Feature web UI for lookup records

angular/projects/researchdatabox/dashboard/src/app/dashboard.component.html

@@ -1,12 +1,32 @@
 <div *ngIf="isReady">
     <ng-container>
         <div *ngFor="let workflowStep of workflowSteps">
-            <h2 *ngIf="workflowSteps.length > 1 && (dashboardTypeSelected == 'standard' || dashboardTypeSelected == 'consolidated')" [innerHTML]="'dashboard-heading' | i18next: {stage: workflowStep.config.workflow.stageLabel, recordTypeName: typeLabel}">
-            </h2>
-            <h2 *ngIf="workflowSteps.length == 1 && (dashboardTypeSelected == 'standard' || dashboardTypeSelected == 'consolidated')" [innerHTML]="'dashboard-heading-one-step' | i18next: {recordTypeName: typeLabel}">
-            </h2>
+            <div class="d-flex flex-row">
+              <div *ngIf="workflowSteps.length > 1 && (dashboardTypeSelected == 'standard' || dashboardTypeSelected == 'consolidated')" class="col-md-4">
+                <h2>{{ 'dashboard-heading' | i18next: {stage: workflowStep.config.workflow.stageLabel, recordTypeName: typeLabel} }}</h2>
+              </div>
+              <div *ngIf="workflowSteps.length == 1 && !hideWorkflowStepTitle && (dashboardTypeSelected == 'standard' || dashboardTypeSelected == 'consolidated')" class="col-md-4">
+                <h2>{{ 'dashboard-heading-one-step' | i18next: {recordTypeName: typeLabel} }}</h2>
+              </div>
+              <ng-container *ngIf="dashboardTypeSelected == 'standard' && (records[workflowStep.config.workflow.stage].totalItems > 0 || (records[workflowStep.config.workflow.stage].totalItems <= 0 && getFilterSearchDisplayed(workflowStep.config.workflow.stage)))">
+                <div class="col-md-8">
+                  <div class="d-flex flex-row mt-4">
+                    <button class="btn btn-primary dropdown-toggle" type='button' data-bs-toggle="dropdown" aria-expanded="false" >Filter by {{ filterFieldName }}</button>
+                    <ul class="dropdown-menu">
+                      <li *ngFor="let filter of getTextFilters()"><a class="dropdown-item" href="#" (click)="setFilterField(filter, $event)">Filter by {{ filter.name }}</a></li>
+                      <li><hr class="dropdown-divider"></li>
+                      <li><a class="dropdown-item" href="#" (click)="resetFilterAndSearch(workflowStep.config.workflow.stage, $event)">{{ 'record-search-reset' | i18next }}</a></li>
+                    </ul>
+                    <input type="text" class="form-control" [(ngModel)]="filterSearchString[workflowStep.config.workflow.stage]" placeholder="{{ 'record-search-basic-search-placeholder' | i18next}}" (keyup.enter)="filterChanged(workflowStep.config.workflow.stage)" aria-describedby="basic-search-addon" autofocus>
+                    <button class="btn btn-primary" type='button' aria-expanded="false" [disabled]="getIsSearching(workflowStep.config.workflow.stage) || getFilterSearchString(workflowStep.config.workflow.stage) == ''" (click)="filterChanged(workflowStep.config.workflow.stage)">{{ 'record-search-basic-search' | i18next }}</button>
+                  </div>
+                </div>
+                <div class="col-md-4"></div>
+              </ng-container>
+            </div>
             <div *ngIf="records[workflowStep.config.workflow.stage] != null">
-                <div *ngIf="records[workflowStep.config.workflow.stage].totalItems <= 0" class="padding-bottom-10" [innerHTML]="'no-records' | i18next: {stage: workflowStep.config.workflow.stageLabel.toLowerCase(), recordTypeName: typeLabel.toLowerCase()}">
+                <div *ngIf="records[workflowStep.config.workflow.stage].totalItems <= 0" class="padding-bottom-10" >
+                    {{ 'no-records' | i18next: {stage: workflowStep.config.workflow.stageLabel.toLowerCase(), recordTypeName: typeLabel.toLowerCase()} }}
                 </div>
                 <div *ngIf="records[workflowStep.config.workflow.stage].totalItems > 0">
                 <table class="table">

angular/projects/researchdatabox/dashboard/src/app/dashboard.component.spec.ts

@@ -13,11 +13,25 @@ let recordDataStandard = {
   dashboardType: 
   { 
     formatRules: {
-      filterBy: [], 
-      filterWorkflowStepsBy: [], 
+      filterBy: [],
+      filterWorkflowStepsBy: [],
+      queryFilters: {
+        rdmp: [
+                { 
+                  filterType: 'text',
+                  filterFields: [
+                                  { 
+                                    name: 'Title',
+                                    path: 'metadata.title'
+                                  }
+                                ]
+                }
+              ]
+        },
       sortBy: 'metaMetadata.lastSaveDate:-1',
-      groupBy: '', 
-      sortGroupBy: [], 
+      groupBy: '',
+      sortGroupBy: [],
+      hideWorkflowStepTitleForRecordType: []
     }
   },
   step: [{
@@ -134,8 +148,7 @@ describe('DashboardComponent standard', () => {
     const fixture = TestBed.createComponent(DashboardComponent);
     const dashboardComponent = fixture.componentInstance;
     await dashboardComponent.initView('rdmp');
-    expect(dashboardComponent.workflowSteps.length).toBeGreaterThan(0);
-    expect(dashboardComponent.defaultTableConfig.length).toBeGreaterThan(0);
+    expect(dashboardComponent.defaultRowConfig.length).toBeGreaterThan(0);
     expect(dashboardComponent.dashboardTypeSelected).toEqual('standard');
     await dashboardComponent.initStep('draft','draft','rdmp','',1);
     let planTable = dashboardComponent.evaluatePlanTableColumns({}, {}, {}, 'draft', recordDataStandard['records']);
@@ -152,12 +165,26 @@ let recordDataWorkspace = {
   dashboardType: 
   { 
     formatRules: {
-      filterBy: [], 
+      filterBy: [],
       recordTypeFilterBy: 'existing-locations',
-      filterWorkflowStepsBy: [ 'existing-locations-draft'], 
+      filterWorkflowStepsBy: [ 'existing-locations-draft'],
+      queryFilters: {
+        rdmp: [
+                { 
+                  filterType: 'text',
+                  filterFields: [
+                                  { 
+                                    name: 'Title',
+                                    path: 'metadata.title'
+                                  }
+                                ]
+                }
+              ]
+        },
       sortBy: 'metaMetadata.lastSaveDate:-1',
-      groupBy: '', 
-      sortGroupBy: [], 
+      groupBy: '',
+      sortGroupBy: [],
+      hideWorkflowStepTitleForRecordType: []
     }
   },
   step: [{
@@ -277,8 +304,7 @@ describe('DashboardComponent workspace', () => {
     const dashboardComponent = fixture.componentInstance;
     dashboardComponent.dashboardTypeSelected = 'workspace';
     await dashboardComponent.initView('workspace');
-    expect(dashboardComponent.workflowSteps.length).toBeGreaterThan(0);
-    expect(dashboardComponent.defaultTableConfig.length).toBeGreaterThan(0);
+    expect(dashboardComponent.defaultRowConfig.length).toBeGreaterThan(0);
     expect(dashboardComponent.dashboardTypeSelected).toEqual('workspace');
     await dashboardComponent.initStep('','existing-locations-draft','','workspace',1);
     let planTable = dashboardComponent.evaluatePlanTableColumns({}, {}, {}, 'existing-locations-draft', recordDataWorkspace['records']);
@@ -295,11 +321,25 @@ let recordDataConsolidated = {
   dashboardType: 
   { 
     formatRules: {
-      filterBy: [], 
-      filterWorkflowStepsBy: ['consolidated'], 
+      filterBy: [],
+      filterWorkflowStepsBy: ['consolidated'],
+      queryFilters: {
+        rdmp: [
+                { 
+                  filterType: 'text',
+                  filterFields: [
+                                  { 
+                                    name: 'Title',
+                                    path: 'metadata.title'
+                                  }
+                                ]
+                }
+              ]
+        },
       sortBy: '',
-      groupBy: 'groupedByRecordType', 
-      sortGroupBy: [{ rowLevel: 0, compareFieldValue: 'rdmp' }], 
+      groupBy: 'groupedByRecordType',
+      sortGroupBy: [{ rowLevel: 0, compareFieldValue: 'rdmp' }],
+      hideWorkflowStepTitleForRecordType: []
     }
   },
   step: [{
@@ -478,7 +518,7 @@ describe('DashboardComponent consolidated group by record type', () => {
     dashboardComponent.dashboardTypeSelected = 'consolidated';
     await dashboardComponent.initView('consolidated');
     expect(dashboardComponent.workflowSteps.length).toBeGreaterThan(0);
-    expect(dashboardComponent.defaultTableConfig.length).toBeGreaterThan(0);
+    expect(dashboardComponent.defaultRowConfig.length).toBeGreaterThan(0);
     expect(dashboardComponent.dashboardTypeSelected).toEqual('consolidated');
     await dashboardComponent.initStep('','consolidated','rdmp','',1);
     let groupedRecords = recordDataConsolidated['groupedRecords'];
@@ -505,11 +545,25 @@ let recordDataConsolidatedRelationships = {
   dashboardType: 
   { 
     formatRules: {
-      filterBy: [], 
-      filterWorkflowStepsBy: ['consolidated'], 
+      filterBy: [],
+      filterWorkflowStepsBy: ['consolidated'],
+      queryFilters: {
+        rdmp: [
+                { 
+                  filterType: 'text',
+                  filterFields: [
+                                  { 
+                                    name: 'Title',
+                                    path: 'metadata.title'
+                                  }
+                                ]
+                }
+              ]
+        },
       sortBy: '',
-      groupBy: 'groupedByRelationships', 
-      sortGroupBy: [{ rowLevel: 0, compareFieldValue: 'rdmp' }], 
+      groupBy: 'groupedByRelationships',
+      sortGroupBy: [{ rowLevel: 0, compareFieldValue: 'rdmp' }],
+      hideWorkflowStepTitleForRecordType: []
     }
   },
   step: [{
@@ -705,7 +759,7 @@ describe('DashboardComponent consolidated group by relationships', () => {
     dashboardComponent.dashboardTypeSelected = 'consolidated';
     await dashboardComponent.initView('consolidated');
     expect(dashboardComponent.workflowSteps.length).toBeGreaterThan(0);
-    expect(dashboardComponent.defaultTableConfig.length).toBeGreaterThan(0);
+    expect(dashboardComponent.defaultRowConfig.length).toBeGreaterThan(0);
     expect(dashboardComponent.dashboardTypeSelected).toEqual('consolidated');
     await dashboardComponent.initStep('','consolidated','rdmp','',1);
     let groupedRecords = recordDataConsolidatedRelationships['groupedRecords'];