feat: add search into dashboard name

src/app/components/dynamic-hub/collapse/card-dropdown.component.ts

@@ -1,21 +1,39 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa 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.
+ */
 import { Component, Input, Renderer2 } from '@angular/core';
 
 @Component({
-  selector: '[card-dropdown]',
-  templateUrl: './card-dropdown.component.html',
-  styles: ['.dynamic-collapse{height: 30px;width: 30px;line-height: 30px;}'],
+    selector: '[arlas-card-dropdown]',
+    templateUrl: './card-dropdown.component.html',
+    styles: ['.dynamic-collapse{height: 30px;width: 30px;line-height: 30px;}'],
 })
 export class CardDropdownComponent {
-    @Input('card-dropdown') public collapsableElement: HTMLElement;
+    @Input('arlas-card-dropdown') public collapsableElement: HTMLElement;
     public display = true;
-  constructor(private _r: Renderer2) { }
+    public constructor(private _r: Renderer2) { }
 
-  collapse() {
-      this.display = !this.display;
-      if(this.display){
-          this._r.removeStyle(this.collapsableElement, 'display');
-      } else {
-          this._r.setStyle(this.collapsableElement, 'display', 'none');
-      }
+    public collapse() {
+        this.display = !this.display;
+        if(this.display){
+            this._r.removeStyle(this.collapsableElement, 'display');
+        } else {
+            this._r.setStyle(this.collapsableElement, 'display', 'none');
+        }
     }
 }

src/app/components/dynamic-hub/dynamic-hub.component.html

@@ -16,7 +16,7 @@
     </div>
     <div class="dynamic-hub__content">
         <div class="dashboards">
-            <div class="dashboard" *ngFor="let data of cards | keyvalue : publicAtTheEnd " >
+            <div class="dashboard" *ngFor="let data of cardsFiltered | keyvalue : publicAtTheEnd " >
                 <h2>
                     <span class="dashboard-title">{{data.key | titlecase | translate}} {{'dashboards' | translate}}</span>
                     <ng-container *ngIf="data.key | getValue:canCreateDashboardByOrg">
@@ -29,7 +29,7 @@ <h2>
                             <mat-icon class="add-button--icon">file_upload</mat-icon>
                         </button>
                     </ng-container>
-                    <div class="collapse" [card-dropdown]="cards"></div>
+                    <div class="collapse" [arlas-card-dropdown]="cards"></div>
                 </h2>
                 <div #cards class="cards">
                     <arlas-card *ngFor="let card of data.value" (actionOnCard)="fetchCards()" [card]="card"

src/app/components/dynamic-hub/dynamic-hub.component.ts

@@ -43,6 +43,8 @@ export class DynamicHubComponent implements OnInit {
     public action = Action;
     public isLoading = false;
     public cards: Map<string, Card[]>;
+    public cardsFiltered: Map<string, Card[]>;
+    public searchIndex: string[] = []; // indexId: ;research:;
     public cardsRef: Map<string, Card[]>;
     public canCreateDashboardByOrg: Map<string, boolean>;
     public allowedOrganisations: string[] = [];
@@ -181,6 +183,8 @@ export class DynamicHubComponent implements OnInit {
 
     }
 
+
+
     public import(org?: string) {
 
         if (this.authentMode === 'iam' && this.connected) {
@@ -319,6 +323,13 @@ export class DynamicHubComponent implements OnInit {
         if (!this.cardCollections.has(c.collection)) {
             this.cardCollections.set(c.collection, { color: c.color, selected: true });
         }
+        // todo: remove when dev end
+        /*
+        let i = 0;
+        while (i < 50){
+            this.cardCollections.set('' + i, { color: c.color, selected: false });
+            i++;
+        }*/
     }
 
     private enrichCards(cards: Card[], fetchOptions?): Card[] {
@@ -366,6 +377,62 @@ export class DynamicHubComponent implements OnInit {
         } else {
             this.cards = this.cardsRef;
         }
+
+        // todo: remove when dev end
+        /*
+        this.cards.forEach((values: Card[], key: string) => {
+           const v = {...values[0]};
+           v.organisation = 'too'
+            const v2 = {...values[0]};
+            v2.organisation = 'gisaia'
+            v2.title = 'fusée du ciel.'
+            const v3 = {...values[0]};
+            v3.organisation = 'cnes'
+            v3.title = 'bateau echoue'
+            values.push(v3, v2, v)
+            console.log(v3)
+        });
+
+        this.cards.set('toto', this.cards.get('public'))
+        this.cards.set('zdzd', this.cards.get('public'))
+        this.cards.set('aaadd', this.cards.get('public'))
+ */
+
+        this._buildSearchIndex();
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const filter = urlParams.get('filter_hub_dashboard');
+        this.filterDashboard(filter);
+    }
+
+    private _buildSearchIndex(){
+        this.cards.forEach((values: Card[], key: string) => {
+            values.forEach((c,i) => {
+                const s = `${c.title.toLowerCase().replace(/\s/g, '')}${(c?.organisation) ? c.organisation : '' }`;
+                const searchIndex = `searchIndex:${key};i:${i};search:${s}`;
+                this.searchIndex.push(searchIndex);
+            });
+        });
+    }
+
+    public filterDashboard(searchValue: string){
+        if(searchValue){
+            this.cardsFiltered = new Map<string, Card[]>();
+            this.searchIndex.filter(s => s.split(';search:')[1].includes(searchValue.toLowerCase().trim())).forEach(f => {
+                const z = f.split(';');
+                const key = z[0].split(':')[1];
+                const index = z[1].split(':')[1];
+
+                if(this.cardsFiltered.has(key)){
+                    this.cardsFiltered.get(key).push( this.cards.get(key)[index]);
+                } else {
+                    this.cardsFiltered.set(key, [this.cards.get(key)[index]]);
+                }
+
+            });
+        } else {
+            this.cardsFiltered = this.cards;
+        }
     }