From 0e445a76fb5100d6939d0c9c70bd3f6719a8590c Mon Sep 17 00:00:00 2001
From: TheoLechemia <theo.lechemia@ecrins-parcnational.fr>
Date: Fri, 15 Dec 2023 11:48:36 +0100
Subject: [PATCH] remove ngx-mat-select-search - closes #2826 #2827

---
 frontend/package-lock.json                       | 15 ---------------
 frontend/package.json                            |  2 --
 .../src/app/GN2CommonModule/GN2Common.module.ts  |  3 ---
 .../form/datalist/datalist.component.css         |  8 ++++++++
 .../form/datalist/datalist.component.html        | 16 ++++++++--------
 5 files changed, 16 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/app/GN2CommonModule/form/datalist/datalist.component.css

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1745e096db..20725671d9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,7 +48,6 @@
         "moment": "^2.29.4",
         "ng2-charts": "^4.1.1",
         "ng2-cookies": "^1.0.12",
-        "ngx-mat-select-search": "^7.0.0",
         "ngx-toastr": "^16.0.2",
         "rxjs": "~6.6.3",
         "rxjs-compat": "^6.6.3",
@@ -10923,20 +10922,6 @@
         "node": ">=4.1.0"
       }
     },
-    "node_modules/ngx-mat-select-search": {
-      "version": "7.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@angular/material": "^15.0.0"
-      }
-    },
-    "node_modules/ngx-mat-select-search/node_modules/tslib": {
-      "version": "2.4.1",
-      "license": "0BSD"
-    },
     "node_modules/ngx-toastr": {
       "version": "16.0.2",
       "license": "MIT",
diff --git a/frontend/package.json b/frontend/package.json
index 9128bc9107..a93e1a0785 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,7 +53,6 @@
     "moment": "^2.29.4",
     "ng2-charts": "^4.1.1",
     "ng2-cookies": "^1.0.12",
-    "ngx-mat-select-search": "^7.0.0",
     "ngx-toastr": "^16.0.2",
     "rxjs": "~6.6.3",
     "rxjs-compat": "^6.6.3",
@@ -66,7 +65,6 @@
     "@types/node": "^18.0.0",
     "cypress": "^13.4.0",
     "cypress-promise": "^1.1.0",
-    "@compodoc/compodoc": "^1.1.22",
     "prettier": "~3.1.0",
     "typescript": "4.9.4"
   }
diff --git a/frontend/src/app/GN2CommonModule/GN2Common.module.ts b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
index 009bb98d1f..6cd8392c2d 100644
--- a/frontend/src/app/GN2CommonModule/GN2Common.module.ts
+++ b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
@@ -28,7 +28,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 // Required modules
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';
 
@@ -130,7 +129,6 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     MatTooltipModule,
     NgbModule,
     NgxDatatableModule,
-    NgxMatSelectSearchModule,
     ReactiveFormsModule,
     NgxDatatableModule,
     NgSelectModule,
@@ -270,7 +268,6 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     MunicipalitiesComponent,
     NgbModule,
     NgxDatatableModule,
-    NgxMatSelectSearchModule,
     NomenclatureComponent,
     ObserversComponent,
     ObserversTextComponent,
diff --git a/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.css b/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.css
new file mode 100644
index 0000000000..0b619b74a4
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.css
@@ -0,0 +1,8 @@
+.not-clickable {
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+::ng-deep .not-clickable>mat-pseudo-checkbox {
+    display: none!important;
+}
\ No newline at end of file
diff --git a/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.html b/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.html
index aff775594e..a7bce85797 100644
--- a/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.html
+++ b/frontend/src/app/GN2CommonModule/form/datalist/datalist.component.html
@@ -4,14 +4,13 @@
     <mat-form-field style="display: inline-block; width: 100%" class="mt-2" appearance="outline">
       <mat-label>{{ label }}</mat-label>
       <mat-select [formControl]="parentFormControl" [multiple]="multiple" [required]="required" dense>
-        <mat-option>
-          <ngx-mat-select-search
-            placeholderLabel="Filtre"
-            (ngModelChange)="searchChanged($event)"
-            [ngModel]="search"
-            [clearSearchInput]="false"
-          ></ngx-mat-select-search>
-        </mat-option>
+        <mat-form-field class="example-form-field">
+          <mat-label>Taper pour chercher</mat-label>
+          <input [ngModel]="search" (ngModelChange)="searchChanged($event)" matInput type="text">
+          <button  matSuffix mat-icon-button aria-label="Clear">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-form-field>
         <mat-select-trigger *ngIf="multiple">
           <mat-chip-list>
             <mat-chip
@@ -24,6 +23,7 @@
             </mat-chip>
           </mat-chip-list>
         </mat-select-trigger>
+        <mat-option *ngIf="filteredValues.length == 0" class="not-clickable" > Pas d'élément trouvé</mat-option>
         <mat-option
           *ngFor="let value of filteredValues"
           [value]="value[keyValue]"