feat: restore previous advanced search that user executed (#1226)

libs/vre/advanced-search/src/lib/data-access/advanced-search-store/advanced-search-store.service.ts

@@ -34,6 +34,18 @@ export interface AdvancedSearchState {
     error?: unknown;
 }
 
+export interface AdvancedSearchStateSnapshot {
+    ontologies: ApiData[];
+    resourceClasses: ApiData[];
+    selectedProject: string | undefined;
+    selectedOntology: ApiData | undefined;
+    selectedResourceClass: ApiData | undefined;
+    propertyFormList: PropertyFormItem[];
+    properties: PropertyData[];
+    propertiesOrderByList: OrderByItem[];
+    filteredProperties: PropertyData[];
+}
+
 export interface PropertyFormItem {
     id: string;
     selectedProperty: PropertyData | undefined;
@@ -45,6 +57,7 @@ export interface PropertyFormItem {
     selectedMatchPropertyResourceClass?: ApiData | undefined;
     isChildProperty?: boolean;
     childPropertiesList?: PropertyData[];
+    searchValueLabel?: string;
 }
 
 export interface SearchItem {
@@ -912,6 +925,8 @@ export class AdvancedSearchStoreService extends ComponentStore<AdvancedSearchSta
         const propertyFormList = this.get((state) => state.propertyFormList);
         const orderByList = this.get((state) => state.propertiesOrderByList);
 
+        this._storeSnapshotInLocalStorage();
+
         return this._gravsearchService.generateGravSearchQuery(
             selectedResourceClass?.iri,
             propertyFormList,
@@ -1113,4 +1128,34 @@ export class AdvancedSearchStoreService extends ComponentStore<AdvancedSearchSta
             data.objectType?.includes(Constants.KnoraApiV2)
         );
     }
+
+    private _storeSnapshotInLocalStorage(): void {
+        const ontologies = this.get((state) => state.ontologies);
+        const resourceClasses = this.get((state) => state.resourceClasses);
+        const selectedProject = this.get((state) => state.selectedProject);
+        const selectedOntology = this.get((state) => state.selectedOntology);
+        const selectedResourceClass = this.get(
+            (state) => state.selectedResourceClass
+        );
+        const propertyFormList = this.get((state) => state.propertyFormList);
+        const properties = this.get((state) => state.properties);
+        const propertiesOrderByList = this.get(
+            (state) => state.propertiesOrderByList
+        );
+        const filteredProperties = this.get((state) => state.filteredProperties);
+
+        const snapshot: AdvancedSearchStateSnapshot = {
+            ontologies,
+            resourceClasses,
+            selectedProject,
+            selectedOntology,
+            selectedResourceClass,
+            propertyFormList,
+            properties,
+            propertiesOrderByList,
+            filteredProperties,
+        };
+
+        localStorage.setItem('advanced-search-previous-search', JSON.stringify(snapshot));
+    }
 }

libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.html

@@ -1,7 +1,10 @@
 <div class="advanced-search-container">
     <div class="header">
         <div class="title">
-            <p>Advanced search</p>
+            <p>Advanced Search</p>
+        </div>
+        <div *ngIf="previousSearchObject" class="action-buttons right-margin">
+            <button class="previous-search-button" mat-button (click)="loadPreviousSearch()">Use Previous Search</button>
         </div>
     </div>
     <div
@@ -54,6 +57,8 @@
             [propertyFormItem]="propertyForm"
             [properties]="asyncData.filteredProperties?.length ? asyncData.filteredProperties : asyncData.properties"
             [propertiesLoading]="asyncData.propertiesLoading"
+            [selectedProperty]="propertyForm.selectedProperty"
+            [selectedOperator]="propertyForm.selectedOperator"
             (emitRemovePropertyForm)="handleRemovePropertyForm($event)"
             (emitSelectedPropertyChanged)="handleSelectedPropertyChanged($event)"
             (emitSelectedOperatorChanged)="handleSelectedOperatorChanged($event)"

libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.scss

@@ -1,3 +1,5 @@
+@use '../../ui/styles/advanced-search.scss' as *;
+
 .advanced-search-container {
   padding: 0% 2.5%;
 

libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.ts

@@ -16,6 +16,7 @@ import {
     PropertyFormItem,
     PropertyFormListOperations,
     SearchItem,
+    AdvancedSearchStateSnapshot,
 } from '../../data-access/advanced-search-store/advanced-search-store.service';
 import { PropertyFormComponent } from '../../ui/property-form/property-form.component';
 import { FormActionsComponent } from '../../ui/form-actions/form-actions.component';
@@ -28,6 +29,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from '../../ui/dialog/confirmation-dialog/confirmation-dialog.component';
 import { v4 as uuidv4 } from 'uuid';
 import { take } from 'rxjs/operators';
+import { MatButtonModule } from '@angular/material/button';
 
 export interface QueryObject {
     query: string;
@@ -43,6 +45,7 @@ export interface QueryObject {
         OntologyResourceFormComponent,
         PropertyFormComponent,
         FormActionsComponent,
+        MatButtonModule,
         MatIconModule,
     ],
     providers: [AdvancedSearchStoreService],
@@ -86,6 +89,7 @@ export class AdvancedSearchComponent implements OnInit {
     orderByButtonDisabled$ = this.store.orderByButtonDisabled$;
 
     constants = Constants;
+    previousSearchObject: string | null = null;
 
     constructor(private _dialog: MatDialog) {}
 
@@ -120,6 +124,10 @@ export class AdvancedSearchComponent implements OnInit {
         this.store.propertiesList(this.selectedOntology$);
 
         this.store.filteredPropertiesList(this.selectedResourceClass$);
+
+        this.previousSearchObject = localStorage.getItem(
+            'advanced-search-previous-search'
+        );
     }
 
     // pass-through method to notify the store to update the state of the selected ontology
@@ -169,7 +177,9 @@ export class AdvancedSearchComponent implements OnInit {
         this.store.updateSelectedOperator(property);
     }
 
-    handleSelectedMatchPropertyResourceClassChanged(property: PropertyFormItem): void {
+    handleSelectedMatchPropertyResourceClassChanged(
+        property: PropertyFormItem
+    ): void {
         this.store.updateSelectedMatchPropertyResourceClass(property);
     }
 
@@ -222,15 +232,48 @@ export class AdvancedSearchComponent implements OnInit {
         this.store.deleteChildPropertyFormList(property);
     }
 
-    handleChildSelectedPropertyChanged(property: ParentChildPropertyPair): void {
+    handleChildSelectedPropertyChanged(
+        property: ParentChildPropertyPair
+    ): void {
         this.store.updateChildSelectedProperty(property);
     }
 
-    handleChildSelectedOperatorChanged(property: ParentChildPropertyPair): void {
+    handleChildSelectedOperatorChanged(
+        property: ParentChildPropertyPair
+    ): void {
         this.store.updateChildSelectedOperator(property);
     }
 
     handleChildValueChanged(property: ParentChildPropertyPair): void {
         this.store.updateChildSearchValue(property);
     }
+
+    loadPreviousSearch(): void {
+        if (!this.previousSearchObject) return;
+
+        const prevSearchObject: AdvancedSearchStateSnapshot = JSON.parse(
+            this.previousSearchObject
+        );
+
+        this.store.setState({
+            ontologies: prevSearchObject.ontologies,
+            ontologiesLoading: false,
+            resourceClasses: prevSearchObject.resourceClasses,
+            resourceClassesLoading: false,
+            selectedProject: prevSearchObject.selectedProject,
+            selectedOntology: prevSearchObject.selectedOntology,
+            selectedResourceClass: prevSearchObject.selectedResourceClass,
+            propertyFormList: prevSearchObject.propertyFormList,
+            properties: prevSearchObject.properties,
+            propertiesLoading: false,
+            propertiesOrderByList: prevSearchObject.propertiesOrderByList,
+            filteredProperties: prevSearchObject.filteredProperties,
+            matchResourceClassesLoading: false,
+            resourcesSearchResultsLoading: false,
+            resourcesSearchResultsCount: 0,
+            resourcesSearchNoResults: false,
+            resourcesSearchResultsPageNumber: 0,
+            resourcesSearchResults: [],
+        });
+    }
 }

libs/vre/advanced-search/src/lib/ui/form-actions/form-actions.component.scss

@@ -1,41 +1,3 @@
 @use '../styles/advanced-search.scss' as *;
 
-.action-buttons {
-  padding: 20px 0px;
 
-  button {
-    border-radius: 6px;
-    min-width: 132px;
-    height: 50px;
-
-    &:first-child {
-      margin-right: 20px;
-    }
-  }
-
-  button:disabled {
-    border: 1px solid #BDBFC1;
-
-    &.reset-button {
-      color:#BDBFC1;
-    }
-
-    &.search-button {
-      background-color: #BDBFC1;
-      color: white;
-    }
-  }
-
-  button:not(:disabled) {
-    border: 1px solid #336790;
-
-    &.reset-button {
-      color:#336790;
-    }
-
-    &.search-button {
-      background-color: #336790;
-      color: white;
-    }
-  }
-}

libs/vre/advanced-search/src/lib/ui/ontology-resource-form/ontology-resource-form.component.html

@@ -1,4 +1,4 @@
-<div class="parent-container">
+<div class="parent-property-container">
     <div class="form-fields-container">
         <div class="dropdown-container">
             <div class="content">
@@ -9,6 +9,7 @@
                         (selectionChange)="onSelectedOntologyChanged()"
                         name="ontologies"
                         placeholder="Select a value"
+                        [compareWith]="compareApiDataObjects"
                     >
                         <mat-option *ngIf="ontologiesLoading" disabled="true"
                             >Loading...</mat-option
@@ -34,6 +35,7 @@
                         (selectionChange)="onSelectedResourceClassChanged()"
                         name="resourceClass"
                         placeholder="Select a value"
+                        [compareWith]="compareApiDataObjects"
                     >
                         <mat-option *ngIf="resourceClassesLoading" disabled="true"
                             >Loading...</mat-option

libs/vre/advanced-search/src/lib/ui/ontology-resource-form/ontology-resource-form.component.ts

@@ -51,4 +51,8 @@ export class OntologyResourceFormComponent {
         const selectedResourceClass = this.resourceClassesList.value;
         this.emitSelectedResourceClass.emit(selectedResourceClass);
     }
+
+    compareApiDataObjects(object1: ApiData, object2: ApiData) {
+        return object1 && object2 && object1.iri == object2.iri;
+    }
 }

libs/vre/advanced-search/src/lib/ui/property-form/property-form-link-match-property/property-form-link-match-property.component.html

@@ -1,16 +1,18 @@
 <div
     *ngFor="let item of values; let i = index"
-    class="parent-container child-property-list"
+    class="parent-property-container child-property-list"
 >
     <div class="form-fields-container">
         <div class="dropdown-container">
             <div class="content">
                 <p class="label">Select a property</p>
                 <mat-form-field>
                     <mat-select
+                        #propertiesList
                         (selectionChange)="onSelectedPropertyChanged($event, i)"
                         placeholder="Select a value"
                         name="properties"
+                        [compareWith]="compareObjects"
                     >
                         <mat-option [value]="resourceLabelObj">{{
                             resourceLabelObj.label
@@ -61,18 +63,22 @@
                     item.selectedProperty?.objectType !== constants.ListValue
                 "
                 [objectType]="item.selectedProperty?.objectType"
+                [value]="item.searchValue"
                 (emitValueChanged)="onValueChanged($event, i)"
             />
             <dasch-swiss-property-form-list-value
                 *ngIf="
                     item.selectedProperty?.objectType === constants.ListValue
                 "
                 [list]="item.list"
+                [value]="item.searchValue"
                 (emitValueChanged)="onValueChanged($event, i)"
             >
             </dasch-swiss-property-form-list-value>
             <dasch-swiss-property-form-link-value
                 *ngIf="item.selectedProperty?.isLinkedResourceProperty"
+                [value]="item.searchValue"
+                [label]="item.searchValueLabel"
                 [resourcesSearchResultsLoading]="resourcesSearchResultsLoading"
                 [resourcesSearchResultsCount]="resourcesSearchResultsCount"
                 [resourcesSearchResults]="resourcesSearchResults"
@@ -96,7 +102,7 @@
     </div>
 </div>
 
-<div class="parent-container child-property-list">
+<div class="parent-property-container child-property-list">
     <div class="add-property-button">
         <button mat-button (click)="onAddPropertyFormClicked()">
             Add Subcriteria