| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}"> |
| <button type="button" #list (click)="multiactions.toggle($event, list)"> |
| <span class="ellipsis" *ngIf="model.length === 0">Select roles</span> |
| <span class="selected-items ellipsis" *ngIf="model.length !== 0"> |
| {{selectedList?.length ? selectedList : getSelectedRolesList()}} |
| </span> |
| <span class="caret-btn"><i class="material-icons">keyboard_arrow_down</i></span> |
| </button> |
| |
| <bubble-up #multiactions position="bottom" [keep-open]="true" class="mt-5"> |
| <ul class="list-menu" id="scrolling"> |
| <li class="filter-actions"> |
| <a class="select_all" (click)="selectAllOptions($event)"> |
| <i class="material-icons">playlist_add_check</i> All |
| </a> |
| <a class="deselect_all" (click)="deselectAllOptions($event)"> |
| <i class="material-icons">clear</i> None |
| </a> |
| </li> |
| |
| <ng-template ngFor let-item [ngForOf]="items" let-i="index"> |
| <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" > |
| <a href="#" class="list-item" role="menuitem"> |
| <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}"> |
| <i class="material-icons">keyboard_arrow_right</i> |
| </span> |
| <!-- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >--> |
| <!-- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>--> |
| <!-- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>--> |
| <!-- </span>--> |
| <datalab-checkbox |
| class="header-checkbox" |
| [checked]="selectedAllInCattegory(item.type)" |
| [someChecked]="selectedSomeInCattegory(item.type)" |
| (toggleSelection)="toggleselectedCategory(model, item.type)" |
| ></datalab-checkbox> |
| {{labels[item.type] || item.type | titlecase}} |
| </a> |
| </li> |
| |
| <li |
| class="role-item" |
| role="presentation" |
| *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'" |
| [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'" |
| > |
| <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)"> |
| <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> |
| <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> |
| <!-- </span>--> |
| <datalab-checkbox |
| class="header-checkbox" |
| [checked]="checkInModel(item.role)" |
| (toggleSelection)="toggleSelectedOptions(model, item)" |
| ></datalab-checkbox> |
| {{item.role}} |
| </a> |
| </li> |
| <li |
| class="role-item" |
| role="presentation" |
| (click)="toggleItemsForCloud(item.type + item.cloud, $event)" |
| *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud |
| || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type |
| || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud |
| || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type" |
| > |
| <a href="#" class="list-item" role="menuitem"> |
| <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}"> |
| <i class="material-icons">keyboard_arrow_right</i> |
| </span> |
| <!-- <span class="empty-checkbox"--> |
| <!-- [ngClass]="{--> |
| <!-- 'checked': selectedAllInCloud(item.type, item.cloud)--> |
| <!-- || selectedSomeInCloud(item.type, item.cloud)}"--> |
| <!-- (click)="toggleSelectedCloud($event, model, item.type, item.cloud);--> |
| <!-- $event.stopPropagation()"--> |
| <!-- >--> |
| <!-- <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>--> |
| <!-- <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>--> |
| <!-- </span>--> |
| <datalab-checkbox |
| class="header-checkbox" |
| [checked]="selectedAllInCloud(item.type, item.cloud)" |
| [someChecked]="selectedSomeInCloud(item.type, item.cloud)" |
| (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)" |
| ></datalab-checkbox> |
| {{item.cloud}} |
| </a> |
| </li> |
| <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" > |
| <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)"> |
| <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> |
| <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> |
| <!-- </span>--> |
| <datalab-checkbox |
| class="header-checkbox" |
| [checked]="checkInModel(item.role)" |
| (toggleSelection)="toggleSelectedOptions(model, item)" |
| ></datalab-checkbox> |
| {{item.role}} |
| </a> |
| </li> |
| |
| </ng-template> |
| |
| <li *ngIf="items?.length == 0"> |
| <a role="menuitem" class="list-item"> |
| <span class="material-icons">visibility_off</span> |
| No {{type}} |
| </a> |
| </li> |
| </ul> |
| </bubble-up> |
| </div> |