fix(entity-table): fix edition autocomplete (#1098)

infra-geo-ouverte · Sep 21, 2022 · 5a0e410 · 5a0e410
1 parent d626798
commit 5a0e410
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.html b/packages/common/src/lib/entity/entity-table/entity-table.component.html
@@ -93,14 +93,16 @@
                                   {{ option.value }}
                               </mat-option>
                           </mat-select>
-                          <input matInput type="text" [formControlName]="column.name" *ngIf="column.type === 'autocomplete'"
-                          [matAutocomplete]="auto" required="{{getValidationAttributeValue(column, 'mandatory')}}" value="{{getValue(record, column)}}">
-                              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAutocompleteValueChange(column.name, record, $event)"
-                              panelWidth="430px">
-                                  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.id">
-                                      {{ option.value }}
-                                  </mat-option>
-                              </mat-autocomplete>
+                          <input matInput type="text" [formControlName]="column.name" *ngIf="column.type === 'autocomplete'" [matAutocomplete]="auto"
+                            required="{{getValidationAttributeValue(column, 'mandatory')}}" value="{{getValue(record, column)}}"
+                            readonly="{{getValidationAttributeValue(column, 'readonly')}}">
+                                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAutocompleteValueChange(column, record, $event)"
+                                panelWidth="430px">
+                                    <mat-option *ngFor="let option of filteredOptions[column.name] | async"
+                                        [value]="option.id">
+                                        {{ option.value }}
+                                    </mat-option>
+                                </mat-autocomplete>
                       </td>
                       <ng-template #isUnsanitizedHTML>
                           <td mat-cell class="mat-cell-text" *ngIf="!isUrl(getValue(record, column));else isAnUrlUnsanitizedHTML" [ngClass]="getCellClass(record, column)"

diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.ts b/packages/common/src/lib/entity/entity-table/entity-table.component.ts
@@ -50,7 +50,7 @@ export class EntityTableComponent implements OnInit, OnChanges, OnDestroy {
 
   public formGroup: UntypedFormGroup = new UntypedFormGroup({});
 
-  public filteredOptions: Observable<any[]>;
+  public filteredOptions = {};
 
   /**
    * Reference to the column renderer types
@@ -256,9 +256,9 @@ export class EntityTableComponent implements OnInit, OnChanges, OnDestroy {
   /**
    * Process autocomplete value change (edition)
    */
-  onAutocompleteValueChange(column: string, record: EntityRecord<any>, event) {
-    this.formGroup.controls[column].setValue(event.option.viewValue);
-    const key = this.getColumnKeyWithoutPropertiesTag(column);
+  onAutocompleteValueChange(column: EntityTableColumn, record: EntityRecord<any>, event) {
+    this.formGroup.controls[column.name].setValue(event.option.viewValue);
+    const key = this.getColumnKeyWithoutPropertiesTag(column.name);
     record.entity.properties[key] = event.option.value;
   }
 
@@ -310,17 +310,19 @@ export class EntityTableComponent implements OnInit, OnChanges, OnDestroy {
           item[key]
         ));
 
-        this.filteredOptions = this.formGroup.controls[column.name].valueChanges.pipe(
-          map(value => {
-            if (value.length) {
-              return column.domainValues.filter((option) => {
-                const filterNormalized = value ? value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
-                const featureNameNormalized = option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-                return featureNameNormalized.includes(filterNormalized);
-              });
-            }
-          })
-        );
+        this.filteredOptions[column.name] = new Observable<any[]>();
+        this.filteredOptions[column.name] =
+          this.formGroup.controls[column.name].valueChanges.pipe(
+            map(value => {
+              if (value?.length) {
+                return column.domainValues?.filter((option) => {
+                  const filterNormalized = value ? value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
+                  const featureNameNormalized = option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+                  return featureNameNormalized.includes(filterNormalized);
+                });
+              }
+            })
+          );
 
         let formControlValue = item[key];
         column.domainValues.forEach(option => {