remove ngx-mat-select-search - closes #2826 #2827

PnX-SI · Mar 8, 2024 · 0e445a7 · 0e445a7
1 parent 8c474c5
commit 0e445a7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 28 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -0,0 +1,8 @@
+.not-clickable {
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+::ng-deep .not-clickable>mat-pseudo-checkbox {
+    display: none!important;
+}
diff --git 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]"