fix: disable progress bar if search results are empty (DSP-1575) (#442)

* fix: disable progress bar if search results are empty

* aligned error message in center

* add count query to check no of results for gravsearch

src/app/workspace/results/results.component.html

@@ -1,4 +1,5 @@
-<div class="content" *ngIf="searchParams">
+<!-- In case if results present -->
+<div class="content" *ngIf="searchParams && !loading && (numberOfAllResults > 0)">
     <as-split direction="horizontal">
         <as-split-area [size]="40">
             <dsp-list-view [search]="searchParams" [displayViewSwitch]="false" (resourceSelected)="openResource($event)"></dsp-list-view>
@@ -9,3 +10,15 @@
         </as-split-area>
     </as-split>
 </div>
+
+<!-- In case of 0 result -->
+<div class="no-results" *ngIf="!loading && numberOfAllResults === 0">
+    <p>Your search <span *ngIf="searchMode === 'fulltext'">- <strong> {{searchQuery}}</strong> -</span> did not match any documents.</p>
+    <p>Suggestions:</p>
+    <ul>
+        <li>Make sure that all words are spelled correctly.</li>
+        <li>Try different keywords.</li>
+        <li>Try more general keywords.</li>
+        <li>Try fewer keywords.</li>
+    </ul>
+</div>

src/app/workspace/results/results.component.scss

@@ -3,3 +3,8 @@
 .content {
   height: calc(100vh - #{$header-height});
 }
+
+.no-results {
+  margin: 64px auto;
+  width: 400px;
+}

src/app/workspace/results/results.component.ts

@@ -1,30 +1,48 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Params } from '@angular/router';
-import { SearchParams } from '@dasch-swiss/dsp-ui';
+import { ApiResponseError, CountQueryResponse, KnoraApiConnection } from '@dasch-swiss/dsp-js';
+import { DspApiConnectionToken, NotificationService, SearchParams } from '@dasch-swiss/dsp-ui';
 
 @Component({
     selector: 'app-results',
     templateUrl: './results.component.html',
     styleUrls: ['./results.component.scss']
 })
-export class ResultsComponent implements OnInit {
+export class ResultsComponent {
 
     searchParams: SearchParams;
 
     resIri: string;
 
     resourceIri: string;
 
+    // number of all results
+    numberOfAllResults: number;
+
+    // search params
+    searchQuery: string;
+    searchMode: 'fulltext' | 'gravsearch';
+
+    // progress status
+    loading = true;
+
     constructor(
+        @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
+        private _notification: NotificationService,
         private _route: ActivatedRoute,
         private _titleService: Title
     ) {
 
         this._route.paramMap.subscribe((params: Params) => {
+            this.searchQuery = decodeURIComponent(params.get('q'));
+            this.searchMode = (decodeURIComponent(params.get('mode')) === 'fulltext' ? 'fulltext' : 'gravsearch');
+
+            this.checkResourceCount();
+
             this.searchParams = {
-                query: decodeURIComponent(params.get('q')),
-                mode: (decodeURIComponent(params.get('mode')) === 'fulltext' ? 'fulltext' : 'gravsearch')
+                query: this.searchQuery,
+                mode: this.searchMode
             };
             // get the project iri if exists
             if (params.get('project')) {
@@ -39,7 +57,37 @@ export class ResultsComponent implements OnInit {
         this._titleService.setTitle('Search results for ' + this.searchParams.mode + ' search');
     }
 
-    ngOnInit() {
+    // get the number of search results for given query
+    checkResourceCount() {
+
+        this.loading = true;
+
+        if (this.searchMode === 'fulltext') {
+            // perform count query
+            this._dspApiConnection.v2.search.doFulltextSearchCountQuery(this.searchQuery).subscribe(
+                (response: CountQueryResponse) => {
+                    this.numberOfAllResults = response.numberOfResults;
+                    this.loading = false;
+                },
+                (error: ApiResponseError) => {
+                    this._notification.openSnackBar(error);
+                    this.loading = false;
+                }
+            );
+        } else if (this.searchMode === 'gravsearch') {
+            // search mode: gravsearch
+            // perform count query
+            this._dspApiConnection.v2.search.doExtendedSearchCountQuery(this.searchQuery).subscribe(
+                (response: CountQueryResponse) => {
+                    this.numberOfAllResults = response.numberOfResults;
+                    this.loading = false;
+                },
+                (error: ApiResponseError) => {
+                    this._notification.openSnackBar(error);
+                    this.loading = false;
+                }
+            );
+        }
     }
 
     openResource(id: string) {