diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html new file mode 100644 index 0000000000..7963dd18b7 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html @@ -0,0 +1,41 @@ +<div class="composition-palette-component"> + <div class="palette-elements-count">Elements + <span class="palette-elements-count-value">{{numberOfElements}}</span> + </div> + + <sdc-filter-bar placeholder="Search..." (valueChange)="onSearchChanged($event)" testId="searchAsset"></sdc-filter-bar> + + <div class="palette-elements-list"> + <sdc-loader [global]="false" name="palette-loader" testId="palette-loader" [active]="this.isPaletteLoading" [class.inactive]="!this.isPaletteLoading"></sdc-loader> + <div *ngIf="numberOfElements === 0 && searchText" class="no-elements-found">No Elements Found</div> + <sdc-accordion *ngFor="let mapByCategory of paletteElements | keyValue; let first = first" [attr.data-tests-id]="'leftPalette.category.'+mapByCategory.key" [title]="mapByCategory.key" [css-class]="'palette-category'"> + <div *ngFor="let mapBySubCategory of mapByCategory.value | keyValue"> + <div class="palette-subcategory">{{mapBySubCategory.key}}</div> + <ng-container *ngIf="!(isViewOnly$ | async)"> + <div *ngFor="let paletteElement of mapBySubCategory.value" + [dndDraggable]="paletteElement" + [dndDisableIf]="paletteElement.componentSubType == 'GROUP' && paletteElement.componentSubType == 'POLICY'" + (dndStart)="onDragStart($event, paletteElement)" + (drag)="onDraggableMoved($event)" + [dndEffectAllowed]="'copyMove'" + (mouseenter)="onMouseOver($event, paletteElement)" + (mouseleave)="onMouseOut(paletteElement)" + [attr.data-tests-id]="paletteElement.name"> + <palette-element [paletteElement]="paletteElement"></palette-element> + </div> + </ng-container> + <ng-container *ngIf="(isViewOnly$ | async)"> + <div *ngFor="let paletteElement of mapBySubCategory.value" + [attr.data-tests-id]="paletteElement.name"> + <palette-element [paletteElement]="paletteElement"></palette-element> + </div> + </ng-container> + </div> + </sdc-accordion> + </div> +</div> + +<div id="draggable_element" dndDropzone (dndDrop)="onDrop($event)" [dndAllowExternal]="true"> + <sdc-element-icon *ngIf="paletteDraggedElement" [iconName]="paletteDraggedElement.icon" + [elementType]="paletteDraggedElement.componentSubType" [uncertified]="paletteDraggedElement.certifiedIconClass"></sdc-element-icon> +</div> |