LH#4: add sticky expand/collapse of search form

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
index fcd7bf3..5fd9681 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
@@ -13,10 +13,12 @@
     <div class="col-lg-2 text-right">
       <button class="btn btn-primary mr-1" (click)="submitSearch()" type="submit" i18n>Search</button>
       <button class="btn btn-secondary" (click)="clearSearch()" type="button" i18n>Reset Form</button>
+      <button class="btn" [hidden]="collapsed" (click)="toggleCollapse()" type="submit" i18n><span class="material-icons">expand_less</span></button>
+      <button class="btn" [hidden]="!collapsed" (click)="toggleCollapse()" type="submit" i18n><span class="material-icons">expand_more</span></button>
     </div>
   </div>
 
-  <div class="row mb-1">
+  <div class="row mb-1" [hidden]="collapsed">
     <div class="col-lg">
       <input i18n-placeholder placeholder="Contact Name" [ngModelOptions]="{standalone: true}" [(ngModel)]="contactName" type="text" class="form-control" />
     </div>
@@ -33,7 +35,7 @@
     </div>
   </div>
 
-  <div class="row mb-1">
+  <div class="row mb-1" [hidden]="collapsed">
     <div class="col-lg">
       <input i18n-placeholder placeholder="SAN" [ngModelOptions]="{standalone: true}" [(ngModel)]="providerSAN" type="text" class="form-control" />
     </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.ts
index 04af1fc..c7c9b1d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.ts
@@ -8,7 +8,7 @@ import {StringComponent} from '@eg/share/string/string.component';
 import {ToastService} from '@eg/share/toast/toast.service';
 import {AuthService} from '@eg/core/auth.service';
 import {AcqProviderSearchTerm, AcqProviderSearch} from './acq-provider-search.service';
-import {ServerStoreService} from '@eg/core/server-store.service';
+import {StoreService} from '@eg/core/store.service';
 import {OrgFamily} from '@eg/share/org-family-select/org-family-select.component';
 
 @Component({
@@ -21,6 +21,8 @@ export class AcqProviderSearchFormComponent implements OnInit, AfterViewInit {
 
     @Output() searchSubmitted = new EventEmitter<AcqProviderSearch>();
 
+    collapsed = false;
+
     providerName = '';
     providerCode = '';
     providerOwners: OrgFamily;
@@ -37,7 +39,7 @@ export class AcqProviderSearchFormComponent implements OnInit, AfterViewInit {
         private router: Router,
         private route: ActivatedRoute,
         private pcrud: PcrudService,
-        private store: ServerStoreService,
+        private localStore: StoreService,
         private idl: IdlService,
         private toast: ToastService,
         private auth: AuthService,
@@ -46,6 +48,7 @@ export class AcqProviderSearchFormComponent implements OnInit, AfterViewInit {
     ngOnInit() {
         const self = this;
         this.providerOwners = {primaryOrgId: this.auth.user().ws_ou(), includeDescendants: true};
+        this.collapsed = this.localStore.getLocalItem('eg.acq.provider.search.collapse_form') || false;
     }
 
     ngAfterViewInit() {}
@@ -123,4 +126,9 @@ export class AcqProviderSearchFormComponent implements OnInit, AfterViewInit {
         });
     }
 
+    toggleCollapse() {
+        this.collapsed = ! this.collapsed;
+        this.localStore.setLocalItem('eg.acq.provider.search.collapse_form', this.collapsed)
+    }
+
 }