Improve Composition View Filtering

Issue-ID: SDC-4330
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: I0a161605b722ca6db46b6a8259acc17fd8af0c02

3 files changed, 5 insertions, 1 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
index e5bd4a9079..054ba6c4b3 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`palette component should match current snapshot of palette component 1`
   onDraggableMoved={[Function Function]}
   onDrop={[Function Function]}
   onSearchChanged={[Function Function]}
+  openAccordion="false"
   position={[Function Point]}
 >
   <div
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
index 89a12d01d4..080f83cfa1 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html
@@ -8,7 +8,7 @@
     <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'">
+        <sdc-accordion *ngFor="let mapByCategory of paletteElements | keyValue; let first = first" [open]="this.openAccordion" [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)">
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
index 673efa4172..020acffd5c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
@@ -49,6 +49,7 @@ export class PaletteComponent {
     public isPaletteLoading: boolean;
     private paletteDraggedElement: LeftPaletteComponent;
     public position: Point = new Point();
+    private openAccordion: boolean = false;
 
     ngOnInit() {
         this.isPaletteLoading = true;
@@ -66,6 +67,7 @@ export class PaletteComponent {
     public buildPaletteByCategories = (searchText?: string) => { // create nested by category & subcategory, filtered by search parans
         // Flat the object and run on its leaves
         if (searchText) {
+            this.openAccordion = true;
             searchText = searchText.toLowerCase();
             const paletteElementsAfterSearch = {};
             this.paletteElements = this.compositionPaletteService.getLeftPaletteElements();
@@ -83,6 +85,7 @@ export class PaletteComponent {
             }
             this.paletteElements = paletteElementsAfterSearch;
         } else {
+            this.openAccordion = false;
             this.paletteElements = this.compositionPaletteService.getLeftPaletteElements();
         }
         this.numberOfElements = this.countLeftPalleteElements(this.paletteElements);