LP1846042 Angular grid filter dropdown improvements

Add an explicit Close button to filter dropdowns to cover cases where
the user wishes to close the dropdown without making any changes and
clicking-away is not supported.

Othor minor repairs.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
index 66d363a..d855f6d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
@@ -84,6 +84,7 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
     }
 
     isValidDate(dt: NgbDateStruct): dt is NgbDateStruct {
+        if (!dt) { return false; }
         return (<NgbDateStruct>dt).year !== undefined;
     }
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
index 4e85407..112ee99 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
@@ -1,6 +1,6 @@
 
 <!-- drop-down toggle link -->
-<ng-template #dropdownToggle let-col="col"> 
+<ng-template #dropdownToggle>
   <span i18n>Filter</span>
   <ng-container *ngIf="!col.isFiltered">
     <span class="material-icons mat-icon-in-button">filter_list</span>
@@ -11,18 +11,18 @@
 </ng-template>
 
 <!-- apply/clear actions are the same for all filter types -->
-<ng-template #actionsTemplate let-col="col">
+<ng-template #actionsTemplate>
   <div class="pt-2">
-    <button class="btn btn-sm btn-outline-dark" 
-      (click)="closeDropdown(); applyFilter(col)" i18n>Apply filter</button>
+    <button class="btn btn-sm btn-outline-dark" (click)="applyFilterCommon(col)" i18n>Apply filter</button>
     <span class="pl-2"></span>
-    <button class="btn btn-sm btn-outline-dark" 
-      (click)="closeDropdown(); clearFilter(col)" i18n>Clear filter</button>
+    <button class="btn btn-sm btn-outline-dark" (click)="clearFilter(col)" i18n>Clear filter</button>
+    <span class="pl-2"></span>
+    <button class="btn btn-sm btn-outline-dark" (click)="closeDropdown()" i18n>Close</button>
   </div>
 </ng-template>
 
 <!-- various number filters all use the same operators -->
-<ng-template #numericOperators let-col="col">
+<ng-template #numericOperators>
   <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
     [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
     <option value="=" i18n>Is exactly</option>
@@ -40,20 +40,21 @@
   <div [ngSwitch]="col.datatype">
     <div *ngSwitchCase="'link'">
       <div class="input-group">
-        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <eg-combobox [asyncSupportsEmptyTermClick]="col.asyncSupportsEmptyTermClick" 
-                  [idlClass]="col.idlFieldDef.class" (onChange)="applyLinkFilter($event, col)" 
+                  [(ngModel)]="linkFilterEntry" [idlClass]="col.idlFieldDef.class"
+                  (ngModelChange)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
                   i18n-placeholder placeholder="Enter value to filter by"></eg-combobox>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{col: col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -64,19 +65,20 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
-                <select class="custom-select" [(ngModel)]="col.filterValue" (change)="applyBooleanFilter(col)"
-                    [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
+              <div>
+                <select class="custom-select" [(ngModel)]="col.filterValue"
+                  (change)="applyFilterCommon(col)"
+                  [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
                   <option value="" i18n>Any</option>
                   <option value="t" i18n>True</option>
                   <option value="f" i18n>False</option>
                 </select>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -87,11 +89,11 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
@@ -111,11 +113,11 @@
               </div>
               <div class="pt-2">
                 <input type="text" class="form-control" 
-                  [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col); closeDropdown()" 
+                  [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData" 
                   i18n-placeholder placeholder="Enter value to filter by">
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -126,20 +128,20 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
-                <ng-container *ngTemplateOutlet="numericOperators; context:{'col': col}"></ng-container>
+                <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
                 <input type="number" min="0" step="1" class="form-control" 
-                  [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col); closeDropdown()" 
+                  [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"/>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -150,20 +152,20 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
-                <ng-container *ngTemplateOutlet="numericOperators; context:{'col': col}"></ng-container>
+                <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
                 <input type="number" min="0" step="1" class="form-control" 
-                  [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col); closeDropdown()" 
+                  [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -174,20 +176,20 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
-                <ng-container *ngTemplateOutlet="numericOperators; context:{'col': col}"></ng-container>
+                <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
-                <input type="number" class="form-control" [(ngModel)]="col.filterValue" 
-                  (keyup.enter)="applyFilter(col); closeDropdown()" 
+                <input type="number" class="form-control" 
+                  [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -198,20 +200,20 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
-                <ng-container *ngTemplateOutlet="numericOperators; context:{'col': col}"></ng-container>
+                <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
                 <input type="number" step="0.01" class="form-control" 
-                  [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col); closeDropdown()" 
+                  [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"/>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
          </div>
         </div>
@@ -225,11 +227,11 @@
         <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
@@ -245,18 +247,18 @@
                 </select>
               </div>
               <div class="pt-2">
-                <eg-date-select [initialYmd]="col.filterValue" 
-                  (onChangeAsYmd)="applyDateFilter($event, col, dateendsel.currentAsYmd())" (onCleared)="clearDateFilter(col)"
-                  [disabled]="col.filterInputDisabled || context.dataSource.requestingData" #datesel></eg-date-select>
+                <eg-date-select [initialYmd]="col.filterValue" #dateSelectOne
+                  (onChangeAsYmd)="applyFilterCommon(col)"
+                  [disabled]="col.filterInputDisabled || context.dataSource.requestingData"></eg-date-select>
                 <div [hidden]="col.filterOperator !== 'between'" class="form-inline form-group">
                   <label for="eg-filter-end-date-select-{{col.name}}" style="width: 3em;" i18n>and</label>
-                  <eg-date-select [hidden]="col.filterOperator !== 'between'" 
-                    (onChangeAsYmd)="applyDateFilter(datesel.currentAsYmd(), col, $event)"
+                  <eg-date-select [hidden]="col.filterOperator !== 'between'" #dateSelectTwo
+                    (onChangeAsYmd)="applyFilterCommon(col)"
                     [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
-                    [required]="col.filterOperator == 'between'" #dateendsel></eg-date-select>
+                    [required]="col.filterOperator == 'between'"></eg-date-select>
                 </div>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>
@@ -264,16 +266,17 @@
     </div>
     <div *ngSwitchCase="'org_unit'">
       <div class="input-group">
-        <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
+        <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
-            <ng-container *ngTemplateOutlet="dropdownToggle; context:{col:col}"></ng-container>
+            <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
           </a>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
-              <div class="pt-2">
+              <div>
                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
-                <select id="eg-filter-op-select-{{col.name}}" class="form-control" [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
+                <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
+                  [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
                   <option value="=" i18n>Is (or includes)</option>
                   <option value="!=" i18n>Is not (or excludes)</option>
                 </select>
@@ -293,11 +296,12 @@
                 </div>
               </div>
               <div class="pt-2">
-                <eg-org-select [applyOrgId]="col.filterValue" (onChange)="applyOrgFilter($event, col)"
+                <eg-org-select [applyOrgId]="col.filterValue" 
+                  (onChange)="col.filterValue = $event; applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
                   i18n-placeholder placeholder="Enter library to filter by" #ousel></eg-org-select>
               </div>
-              <ng-container *ngTemplateOutlet="actionsTemplate; context:{'col': col}"></ng-container>
+              <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
             </div>
           </div>
         </div>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.ts
index da23710..36fcfae 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {Component, Input, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {GridContext, GridColumn} from './grid';
 import {IdlObject} from '@eg/core/idl.service';
 import {ComboboxComponent} from '@eg/share/combobox/combobox.component';
@@ -6,6 +6,7 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 import {OrgSelectComponent} from '@eg/share/org-select/org-select.component';
 import {OrgService} from '@eg/core/org.service';
 import {NgbDropdown} from '@ng-bootstrap/ng-bootstrap';
+import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 
 @Component({
   selector: 'eg-grid-filter-control',
@@ -19,10 +20,15 @@ export class GridFilterControlComponent implements OnInit {
 
 
     @ViewChildren(ComboboxComponent)   filterComboboxes: QueryList<ComboboxComponent>;
-    @ViewChildren(DateSelectComponent) dateSelects: QueryList<DateSelectComponent>;
     @ViewChildren(OrgSelectComponent)  orgSelects: QueryList<OrgSelectComponent>;
     @ViewChildren(NgbDropdown)         dropdowns: QueryList<NgbDropdown>;
 
+    @ViewChild('dateSelectOne') dateSelectOne: DateSelectComponent;
+    @ViewChild('dateSelectTwo') dateSelectTwo: DateSelectComponent;
+
+    // So we can use (ngModelChange) on the link combobox
+    linkFilterEntry: ComboboxEntry = null;
+
     constructor(
         private org: OrgService
     ) {}
@@ -38,7 +44,9 @@ export class GridFilterControlComponent implements OnInit {
         }
     }
 
-    applyOrgFilter(org: IdlObject, col: GridColumn) {
+    applyOrgFilter(col: GridColumn) {
+        const org: IdlObject = (col.filterValue as unknown) as IdlObject;
+
         if (org == null) {
             this.clearFilter(col);
             return;
@@ -61,11 +69,12 @@ export class GridFilterControlComponent implements OnInit {
         this.context.dataSource.filters[col.name] = [ filt ];
         col.isFiltered = true;
         this.context.reload();
+
+        this.closeDropdown();
     }
 
-    applyLinkFilter($event, col: GridColumn) {
-        if ($event) {
-            col.filterValue = $event.id;
+    applyLinkFilter(col: GridColumn) {
+        if (col.filterValue) {
             this.applyFilter(col);
 
         } else {
@@ -81,7 +90,20 @@ export class GridFilterControlComponent implements OnInit {
         return new Date(
             Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
     }
-    applyDateFilter(dateStr: string, col: GridColumn, endDateStr: string) {
+
+    applyDateFilter(col: GridColumn) {
+        const dateStr = this.dateSelectOne.currentAsYmd();
+        const endDateStr =
+            this.dateSelectTwo ? this.dateSelectTwo.currentAsYmd() : null;
+
+        if (endDateStr && !dateStr) {
+            // User has applied a second date (e.g. between) but cleared
+            // the first date.  Avoid applying the filter until
+            // dateStr gets a value or endDateStr is cleared or the
+            // operator changes.
+            return;
+        }
+
         if (col.filterOperator === 'null' || col.filterOperator === 'not null') {
             this.applyFilter(col);
         } else {
@@ -199,17 +221,15 @@ export class GridFilterControlComponent implements OnInit {
             this.context.dataSource.filters[col.name] = filters;
             col.isFiltered = true;
             this.context.reload();
+            this.closeDropdown();
         }
-
-        // The date filter has autoClose=false so that interacting with
-        // date selectors won't result in closing the dropdown.  Once
-        // we've successfully applied a filter, force it closed.
-        this.closeDropdown();
     }
+
     clearDateFilter(col: GridColumn) {
         delete this.context.dataSource.filters[col.name];
         col.isFiltered = false;
         this.context.reload();
+        this.closeDropdown();
     }
     applyBooleanFilter(col: GridColumn) {
         if (!col.filterValue || col.filterValue === '') {
@@ -227,7 +247,28 @@ export class GridFilterControlComponent implements OnInit {
             col.isFiltered = true;
             this.context.reload();
         }
+
+        this.closeDropdown();
     }
+
+    applyFilterCommon(col: GridColumn) {
+
+        switch (col.datatype) {
+            case 'link':
+                col.filterValue =
+                    this.linkFilterEntry ? this.linkFilterEntry.id : null;
+                return this.applyLinkFilter(col);
+            case 'bool':
+                return this.applyBooleanFilter(col);
+            case 'timestamp':
+                return this.applyDateFilter(col);
+            case 'org_unit':
+                return this.applyOrgFilter(col);
+            default:
+                return this.applyFilter(col);
+        }
+    }
+
     applyFilter(col: GridColumn) {
         // fallback if the operator somehow was not set yet
         if (col.filterOperator === undefined) { col.filterOperator = '='; }
@@ -272,6 +313,7 @@ export class GridFilterControlComponent implements OnInit {
             }
         }
         this.context.reload();
+        this.closeDropdown();
     }
     clearFilter(col: GridColumn) {
         // clear filter values...
@@ -281,16 +323,20 @@ export class GridFilterControlComponent implements OnInit {
         col.isFiltered = false;
         this.reset();
         this.context.reload();
+        this.closeDropdown();
     }
 
     closeDropdown() {
-        this.dropdowns.forEach(drp => { drp.close(); });
+        // Timeout allows actions to occur before closing (some) dropdows
+        // clears the values (e.g. link selector)
+        setTimeout(() => this.dropdowns.forEach(drp => { drp.close(); }));
     }
 
     reset() {
         this.filterComboboxes.forEach(ctl => { ctl.applyEntryId(null); });
-        this.dateSelects.forEach(ctl => { ctl.reset(); });
         this.orgSelects.forEach(ctl => { ctl.reset(); });
+        if (this.dateSelectOne) { this.dateSelectOne.reset(); }
+        if (this.dateSelectTwo) { this.dateSelectTwo.reset(); }
     }
 }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/admin-page/admin-page.component.ts b/Open-ILS/src/eg2/src/app/staff/share/admin-page/admin-page.component.ts
index 2f85522..dfcd549 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/admin-page/admin-page.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/admin-page/admin-page.component.ts
@@ -265,8 +265,6 @@ export class AdminPageComponent implements OnInit {
                 order_by: orderBy
             };
 
-            console.debug(this.dataSource);
-            console.debug(this.dataSource.filters);
             if (!this.contextOrg && !this.gridFilters && !Object.keys(this.dataSource.filters).length) {
                 // No org filter -- fetch all rows
                 return this.pcrud.retrieveAll(
@@ -279,7 +277,7 @@ export class AdminPageComponent implements OnInit {
             if (this.orgField && (this.searchOrgs || this.contextOrg)) {
                 orgFilter[this.orgField] =
                     this.searchOrgs.orgIds || [this.contextOrg.id()];
-                search.push(orgFilter)
+                search.push(orgFilter);
             }
 
             Object.keys(this.dataSource.filters).forEach(key => {
@@ -340,7 +338,6 @@ export class AdminPageComponent implements OnInit {
         idlThings.forEach(idlThing => idlThing.isdeleted(true));
         this.pcrud.autoApply(idlThings).subscribe(
             val => {
-                console.debug('deleted: ' + val);
                 this.deleteSuccessString.current()
                     .then(str => this.toast.success(str));
             },