fix: EDITOR-289 list-header filter inputs autofocus

entrecode · Mar 22, 2019 · 9915311 · 9915311
1 parent bc9bb53
commit 9915311
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/packages/ui/src/lib/list/list-header/list-header.component.html b/packages/ui/src/lib/list/list-header/list-header.component.html
@@ -1,10 +1,11 @@
 <div *ngIf="filterFormConfig">
-  <ec-form (changed)="list?.setFilter($event?.group?.value)" [config]="filterFormConfig" [value]="list?.config?.filter"
-    [empty]="true" #filterForm></ec-form>
+  <ec-form [config]="filterFormConfig" [value]="list?.config?.filter" [empty]="true" #filterForm
+    (ready)="initFilterForm($event)" [lazy]="true"></ec-form>
   <ec-pop (toggle)="toggledFilterPop($event)" #filterPop>
     <div *ngIf="filteredField" class="btn-group">
-      <ec-input class="has-width-full" [field]="filteredField" [group]="filterForm?.group" [debounce]="200"
-        *ngIf="filterPop.active" #filterInput></ec-input>
+      <ec-input (changed)="setFilter(filteredField, $event)" [lazy]="true" class="has-width-full"
+        [field]="filteredField" [group]="filterForm?.group" [debounce]="200" *ngIf="filterPop.active&&filterForm?.group"
+        #filterInput></ec-input>
       <a class="btn btn_clear" (click)="filterPop.hide()">
         <ec-icon name="close-x-big"></ec-icon>
       </a>

diff --git a/packages/ui/src/lib/list/list-header/list-header.component.ts b/packages/ui/src/lib/list/list-header/list-header.component.ts
@@ -19,15 +19,23 @@ export class ListHeaderComponent implements OnChanges {
   @Input() selection: Selection<any>;
   /** The pop dropdowns that contain the filtering */
   @ViewChildren('filterPop') pops: QueryList<PopComponent>;
-  /** The form that holds the current filter information */
-  @ViewChild('filterForm') filter: FormComponent<any>;
   /** The config for the filter form */
   filterFormConfig: ListConfig<any>;
   filteredField: any;
+  filterForm: FormComponent<any>;
 
   constructor(public listConfig: ListConfigService) {
   }
 
+  setFilter(field, value) {
+    this.list.setFilter({ [field.property]: value });
+  }
+
+  initFilterForm(filterForm) {
+    // is called when form is ready
+    this.filterForm = filterForm;
+  }
+
   ngOnChanges(changes?) {
     if (!changes.list) {
       return;
@@ -40,7 +48,12 @@ export class ListHeaderComponent implements OnChanges {
       if (fieldConfig[property].filterable) {
         return {
           ...fields,
-          [property]: fieldConfig[property]
+          [property]: {
+            ...fieldConfig[property],
+            required: false,
+            readOnly: false,
+            autofocus: true
+          }
         };
       }
       return fields;
@@ -55,39 +68,39 @@ export class ListHeaderComponent implements OnChanges {
   /** opens the given filter pop and closes all others */
   public editFilter(pop, field) {
     if (this.filteredField) {
-      this.removeFilter(this.filteredField.property);
       if (this.filteredField.property === field.property) {
         pop.hide();
         return;
       }
+      this.clearFilter();
     }
     if (!field) {
       return;
     }
+    field.autofocus = true;
     field.nestedCrudConfig = {
       ...field.nestedCrudConfig,
       methods: ['get'],
     };
-    field.config = {
-      ...field.config,
-      required: false,
-      readOnly: true
-    };
+    // patch current filter value to control
+    this.filterForm.group.get(field.property).patchValue(this.list.getFilterValue(field.property));
     this.filteredField = field;
     pop.show();
   }
 
-  toggledFilterPop(active) {
-    if (!active) {
-      this.removeFilter(this.filteredField.property);
-      delete this.filteredField;
+  clearFilter() {
+    if (!this.filteredField || !this.list.isFiltered(this.filteredField.property)) {
+      return;
     }
+    this.filterForm.group.get(this.filteredField.property).reset();
+    this.list.clearFilter();
+    delete this.filteredField;
   }
 
-  /** Resets the fields filter */
-  public removeFilter(property) {
-    const control = this.filter.group.get(property);
-    control.reset();
+  toggledFilterPop(active) {
+    if (!active) {
+      this.clearFilter();
+    }
   }
 
   /** Returns the fields label */