feat(advanced-search): advanced search library

apps/dsp-app/src/app/app-routing.module.ts

@@ -27,7 +27,8 @@ import { UserComponent } from './user/user.component';
 // search results and resource viewer
 import { ResourceComponent } from './workspace/resource/resource.component';
 import { ResultsComponent } from './workspace/results/results.component';
-import {ProjectFormComponent} from "@dsp-app/src/app/project/project-form/project-form.component";
+import { AdvancedSearchContainerComponent } from './workspace/search/advanced-search/advanced-search-container.component';
+import { ProjectFormComponent } from "@dsp-app/src/app/project/project-form/project-form.component";
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 
 const routes: Routes = [
@@ -132,6 +133,14 @@ const routes: Routes = [
                     },
                 ],
             },
+            {
+                path: RouteConstants.advancedSearch,
+                component: AdvancedSearchContainerComponent,
+            },
+            {
+                path: RouteConstants.advancedSearchResultsRelative,
+                component: ResultsComponent,
+            },
             {
                 path: RouteConstants.notFoundWildcard,
                 component: StatusComponent,

apps/dsp-app/src/app/app.module.ts

@@ -142,22 +142,7 @@ import { UriValueComponent } from './workspace/resource/values/uri-value/uri-val
 import { ListViewComponent } from './workspace/results/list-view/list-view.component';
 import { ResourceListComponent } from './workspace/results/list-view/resource-list/resource-list.component';
 import { ResultsComponent } from './workspace/results/results.component';
-import { AdvancedSearchComponent } from './workspace/search/advanced-search/advanced-search.component';
-import { ResourceAndPropertySelectionComponent } from './workspace/search/advanced-search/resource-and-property-selection/resource-and-property-selection.component';
-import { SearchSelectPropertyComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/search-select-property.component';
-import { SearchBooleanValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-boolean-value/search-boolean-value.component';
-import { SearchDateValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-date-value/search-date-value.component';
-import { SearchDecimalValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-decimal-value/search-decimal-value.component';
-import { SearchIntValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-int-value/search-int-value.component';
-import { SearchLinkValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-link-value/search-link-value.component';
-import { SearchDisplayListComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-list-value/search-display-list/search-display-list.component';
-import { SearchListValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-list-value/search-list-value.component';
-import { SearchResourceComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-resource/search-resource.component';
-import { SearchTextValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-text-value/search-text-value.component';
-import { SearchUriValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/search-uri-value/search-uri-value.component';
-import { SpecifyPropertyValueComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/specify-property-value.component';
-import { SearchSelectResourceClassComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-resource-class/search-select-resource-class.component';
-import { SearchSelectOntologyComponent } from './workspace/search/advanced-search/search-select-ontology/search-select-ontology.component';
+import { AdvancedSearchContainerComponent } from './workspace/search/advanced-search/advanced-search-container.component';
 import { ExpertSearchComponent } from './workspace/search/expert-search/expert-search.component';
 import { FulltextSearchComponent } from './workspace/search/fulltext-search/fulltext-search.component';
 import { SearchPanelComponent } from './workspace/search/search-panel/search-panel.component';
@@ -179,6 +164,7 @@ import {
 } from '@dasch-swiss/vre/shared/app-config';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { AppDatePickerModule } from '@dasch-swiss/vre/shared/app-date-picker';
+import { AdvancedSearchComponent } from '@dasch-swiss/vre/advanced-search';
 import { AppProgressIndicatorComponent } from "@dasch-swiss/vre/shared/app-progress-indicator";
 
 // translate: AoT requires an exported function for factories
@@ -194,7 +180,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         AddUserComponent,
         AddValueComponent,
         AdminImageDirective,
-        AdvancedSearchComponent,
+        AdvancedSearchContainerComponent,
         AppComponent,
         ArchiveComponent,
         AudioComponent,
@@ -264,7 +250,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         PropertyFormComponent,
         PropertyInfoComponent,
         ReplaceFileFormComponent,
-        ResourceAndPropertySelectionComponent,
         ResourceClassFormComponent,
         ResourceClassInfoComponent,
         ResourceClassPropertyInfoComponent,
@@ -273,20 +258,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         ResourceLinkFormComponent,
         ResourceListComponent,
         ResultsComponent,
-        SearchBooleanValueComponent,
-        SearchDateValueComponent,
-        SearchDecimalValueComponent,
-        SearchDisplayListComponent,
-        SearchIntValueComponent,
-        SearchLinkValueComponent,
-        SearchListValueComponent,
         SearchPanelComponent,
-        SearchResourceComponent,
-        SearchSelectOntologyComponent,
-        SearchSelectPropertyComponent,
-        SearchSelectResourceClassComponent,
-        SearchTextValueComponent,
-        SearchUriValueComponent,
         SelectedResourcesComponent,
         SelectGroupComponent,
         SelectLanguageComponent,
@@ -295,7 +267,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         SelectPropertiesComponent,
         SelectResourceClassComponent,
         SortButtonComponent,
-        SpecifyPropertyValueComponent,
         SplitPipe,
         StatusComponent,
         StillImageComponent,
@@ -351,6 +322,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         NgxSkeletonLoaderModule,
         PdfViewerModule,
         ReactiveFormsModule,
+        AdvancedSearchComponent,
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,

apps/dsp-app/src/app/project/collaboration/add-user/add-user.component.ts

@@ -28,7 +28,7 @@ import { DialogComponent } from '@dsp-app/src/app/main/dialog/dialog.component';
 import { existingNamesValidator } from '@dsp-app/src/app/main/directive/existing-name/existing-name.directive';
 import { AppErrorHandler } from '@dasch-swiss/vre/shared/app-error-handler';
 import { ProjectService } from '@dsp-app/src/app/workspace/resource/services/project.service';
-import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/operator';
+import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/operator';
 
 @Component({
     selector: 'app-add-user',

apps/dsp-app/src/app/project/collaboration/select-group/select-group.component.ts

@@ -16,7 +16,7 @@ import {
 import { ApplicationStateService } from '@dasch-swiss/vre/shared/app-state-service';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { AppErrorHandler } from '@dasch-swiss/vre/shared/app-error-handler';
-import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/operator';
+import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/operator';
 
 @Component({
     selector: 'app-select-group',

apps/dsp-app/src/app/project/ontology/property-form/property-form.component.ts

@@ -40,7 +40,6 @@ import { existingNamesValidator } from '@dsp-app/src/app/main/directive/existing
 import { AppErrorHandler } from '@dasch-swiss/vre/shared/app-error-handler';
 import { SortingService } from '@dsp-app/src/app/main/services/sorting.service';
 import { CustomRegex } from '@dsp-app/src/app/workspace/resource/values/custom-regex';
-import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/operator';
 import {
     DefaultProperties,
     DefaultProperty,
@@ -51,6 +50,7 @@ import { OntologyService } from '../ontology.service';
 import { GuiCardinality } from '@dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component';
 import { PropToDisplay } from '../resource-class-info/resource-class-info.component';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
+import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/operator';
 
 export type EditMode =
     | 'createProperty'

apps/dsp-app/src/app/project/project.component.html

@@ -19,7 +19,18 @@
 
                     <!-- Description Section -->
                     <mat-divider></mat-divider>
-                    <mat-list-item [ngClass]="{ 'active': this.listItemSelected === '/project/' + projectUuid}" class="section-title" (click)="open('/project/' + projectUuid)">
+                    <mat-list-item [ngClass]="{ 'active': listItemSelected === 'advanced-search'}" class="section-title" (click)="open('advanced-search')">
+                        <span matListItemTitle class="section-label">
+                            <mat-icon class="sidenav-prefix-icon">search</mat-icon>
+                            <p>Advanced Search</p>
+                            <mat-icon class="sidenav-suffix-icon">chevron_right</mat-icon>
+                        </span>
+
+                    </mat-list-item>
+
+                    <!-- Description Section -->
+                    <mat-divider></mat-divider>
+                    <mat-list-item [ngClass]="{ 'active': listItemSelected === '/project/' + projectUuid}" class="section-title" (click)="open('/project/' + projectUuid)">
                         <span matListItemTitle class="section-label">
                             <mat-icon class="sidenav-prefix-icon">description</mat-icon>
                             <p>Project Description</p>

apps/dsp-app/src/app/project/project.component.ts

@@ -111,6 +111,10 @@ export class ProjectComponent implements OnInit {
 
     ngOnInit() {
         switch (this._router.url) {
+            case `/project/${this.projectUuid}/advanced-search`: {
+                this.listItemSelected = 'advanced-search';
+                break;
+            }
             case `/project/${this.projectUuid}`: {
                 this.listItemSelected = this._router.url;
                 break;

apps/dsp-app/src/app/user/membership/membership.component.ts

@@ -24,7 +24,7 @@ import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { AppErrorHandler } from '@dasch-swiss/vre/shared/app-error-handler';
 import { Session } from '@dasch-swiss/vre/shared/app-session';
 import { ProjectService } from '@dsp-app/src/app/workspace/resource/services/project.service';
-import { AutocompleteItem } from '@dsp-app/src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/operator';
+import { AutocompleteItem } from '../../workspace/search/operator';
 
 // --> TODO replace it by IPermissions from dsp-js
 export interface IPermissions {

apps/dsp-app/src/app/workspace/results/list-view/list-view.component.html

@@ -1,16 +1,24 @@
 <!-- header / toolbar to select view and pagination -->
-<div *ngIf="numberOfAllResults !== 0 && loading === false" class="list-view-header">
-    <button mat-button class="pagination-button previous" [disabled]="0 >= currentIndex" (click)="goToPage('previous')">
-        <mat-icon>west</mat-icon>
-        <span>Previous</span>
-    </button>
-    <span class="fill-remaining-space"></span>
-    <div class="range">{{currentRangeStart}} - {{currentRangeEnd}} of {{numberOfAllResults}}</div>
-    <span class="fill-remaining-space"></span>
-    <button mat-button class="pagination-button next" [disabled]="(pageSize > numberOfAllResults) || nextDisabled" (click)="goToPage('next')">
-        <span>Next</span>
-        <mat-icon>east</mat-icon>
-    </button>
+<div *ngIf="!loading && (numberOfAllResults > 0 && resources.resources.length)" class="list-view-header">
+    <div *ngIf="search.mode === 'gravsearch' && search.projectUuid && (numberOfAllResults > 0 && resources.resources.length)" class="back">
+        <button mat-button class="back-button" (click)="handleBackButtonClicked()">
+            <span>Go Back to Search Form</span>
+            <mat-icon iconPositionEnd>chevron_right</mat-icon>
+        </button>
+    </div>
+    <div class="navigation">
+        <button mat-button class="pagination-button previous" [disabled]="0 >= currentIndex" (click)="goToPage('previous')">
+            <mat-icon>west</mat-icon>
+            <span>Previous</span>
+        </button>
+        <span class="fill-remaining-space"></span>
+        <div class="range">{{currentRangeStart}} - {{currentRangeEnd}} of {{numberOfAllResults}}</div>
+        <span class="fill-remaining-space"></span>
+        <button mat-button class="pagination-button next" [disabled]="(pageSize > numberOfAllResults) || nextDisabled" (click)="goToPage('next')">
+            <span>Next</span>
+            <mat-icon>east</mat-icon>
+        </button>
+    </div>
 </div>
 
 <!-- container with search results -->
@@ -43,10 +51,16 @@
         </div>
         <!-- Case B: user clicked on the class item -->
         <div *ngIf="search.mode !== 'fulltext'">
+            <div *ngIf="search.mode === 'gravsearch' && search.projectUuid" class="back">
+                <button mat-button class="back-button" (click)="handleBackButtonClicked()">
+                    <span>Go Back to Search Form</span>
+                    <mat-icon iconPositionEnd>chevron_right</mat-icon>
+                </button>
+            </div>
             <!-- Case B1: there is no resources created-->
             <div *ngIf="hasPermission" class="no-results-container">
                 <mat-icon>warning</mat-icon>
-                <div>No resources have been created for this class yet.</div>
+                <div>No results were found for your query.</div>
             </div>
             <!-- Case B2: no permission-->
             <div *ngIf="!hasPermission" class="no-results-container">

apps/dsp-app/src/app/workspace/results/list-view/list-view.component.scss

@@ -1,57 +1,64 @@
 @use "../../../../styles/config" as *;
 
 .list-view-header {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  align-items: center;
-  white-space: nowrap;
-  padding: 0 16px;
-  height: 60px;
-  width: 100%;
-  z-index: 1;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  position: sticky !important;
+  top: 0;
   background: $bright;
+  z-index: 1;
+
+  .back {
+    text-align: right;
+    padding: 3% 0%;
 
-  .pagination-button:disabled {
-    span,
-    mat-icon{
-      color: $cool_gray_300;
+    .back-button {
+        border: 1px solid $primary;
+        margin-right: 2%;
+        color: $primary;
     }
   }
 
-  .pagination-button {
-    &.previous {
-      span{
-        padding-left: 14px;
-      }
-    }
+  .navigation {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0 16px;
+    height: 60px;
+    width: 100%;
 
-    &.next {
-      span{
-        padding-right: 14px;
+    .pagination-button:disabled {
+      span,
+      mat-icon{
+        color: $cool_gray_300;
       }
     }
 
-    span,
-    mat-icon{
-      color: $primary;
-      font-weight: 400;
-    }
-  }
+    .pagination-button {
+      &.previous {
+        span{
+          padding-left: 14px;
+        }
+      }
 
-  .range{
-    color: $cool_gray_500;
-    font-weight: 300;
-  }
-}
+      &.next {
+        span{
+          padding-right: 14px;
+        }
+      }
 
-.list-view-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  position: sticky !important;
-  top: 0;
+      span,
+      mat-icon{
+        color: $primary;
+        font-weight: 400;
+      }
+    }
 
-  .switch-view-label {
-    margin-right: 16px;
+    .range{
+      color: $cool_gray_500;
+      font-weight: 300;
+    }
   }
 }
 
@@ -69,6 +76,18 @@
   }
 }
 
+.no-results {
+  .back {
+    padding: 0% 0% 3% 0%;
+
+    .back-button {
+        border: 1px solid $primary;
+        margin-right: 2%;
+        color: $primary;
+    }
+  }
+}
+
 button.active {
   background-color: $black-12-opacity;
 }