search: add button to export results

This part add a button or dropdown list on search page to export results. * Adapts record search component and template. * Adds `export as ...` on ng-core-tester home page. Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch> Co-Authored-by: Lauren-D <laurent.dubois@itld-solutions.be>
rero · Jul 21, 2020 · b01da98 · b01da98
1 parent f6c49d3
commit b01da98
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 2 deletions.
diff --git a/projects/ng-core-tester/src/app/home/home.component.ts b/projects/ng-core-tester/src/app/home/home.component.ts
@@ -37,10 +37,27 @@ export class HomeComponent {
       key: 'documents',
       label: 'Documents',
       component: DocumentComponent
+      ,
+      exportFormats: [
+        {
+          label: 'JSON',
+          format: 'json'
+        }
+      ],
     },
     {
       key: 'organisations',
-      label: 'Organisations'
+      label: 'Organisations',
+      exportFormats: [
+        {
+          label: 'JSON',
+          format: 'json'
+        },
+        {
+          label: 'CSV',
+          format: 'csv'
+        }
+      ],
     }
   ];
 

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -54,6 +54,31 @@ <h5 *ngIf="types.length == 1 && showLabel">
           <i class="fa fa-plus mr-0 mr-sm-1"></i>
           <span class="d-none d-sm-inline">{{ 'Add' | translate }}</span>
         </a>
+        <a role="button" class="btn btn-outline-primary ml-2" *ngIf="exportFormats && exportFormats.length == 1"
+           [href]="getExportFormatUrl(exportFormats[0].format)" >
+          <i class="fa fa-download mr-1"></i> {{ 'Export as' | translate }} {{ exportFormats[0].label }}
+        </a>
+        <div class="btn-group ml-2" dropdown *ngIf="exportFormats && exportFormats.length > 1">
+          <button
+            id="button-export-basic"
+            dropdownToggle
+            type="button"
+            class="btn btn-outline-primary dropdown-toggle"
+          >
+            <i class="fa fa-download mr-1"></i> {{ 'Export as' | translate }} ... <span class="caret"></span>
+          </button>
+          <ul
+            id="dropdown-export-basic"
+            *dropdownMenu
+            class="dropdown-menu"
+            role="menu"
+            aria-labelledby="button-export-basic"
+          >
+            <li role="menuitem" *ngFor="let format of exportFormats">
+              <a class="dropdown-item" [href]="getExportFormatUrl(format.format)" >{{ format.label }}</a>
+            </li>
+          </ul>
+        </div>
         <div class="btn-group ml-2" dropdown>
           <button
             id="button-basic"

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -25,6 +25,7 @@ import { ActionStatus } from '../action-status';
 import { RecordUiService } from '../record-ui.service';
 import { RecordService } from '../record.service';
 import { AggregationsFilter, RecordSearchService } from './record-search.service';
+import { ApiService } from '../../api/api.service';
 
 @Component({
   selector: 'ng-core-record-search',
@@ -172,13 +173,15 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
    * @param _recordSearchService Record search service.
    * @param _translateService Translate service.
    * @param _spinner Spinner service.
+   * @param _apiService Api service.
    */
   constructor(
     private _recordService: RecordService,
     private _recordUiService: RecordUiService,
     private _recordSearchService: RecordSearchService,
     private _translateService: TranslateService,
-    private _spinner: NgxSpinnerService
+    private _spinner: NgxSpinnerService,
+    private _apiService: ApiService
   ) { }
 
   /**
@@ -455,6 +458,35 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
     return null;
   }
 
+  /**
+   * Get Export formats for the current resource given by configuration.
+   * @return Array of export format to generate an `export as` button or an empty array.
+   */
+  get exportFormats(): Array<any> {
+    if (this._config && this._config.exportFormats) {
+      return this._config.exportFormats;
+    }
+    return [];
+  }
+
+  /**
+   * Get export format url.
+   * @param format - string, export format
+   * @return formatted url for an export format.
+   */
+  getExportFormatUrl(format: string) {
+    const baseUrl = this._apiService.getEndpointByType(this.currentType);
+    let url = `${baseUrl}?&format=${format}&size=${RecordService.MAX_REST_RESULTS_SIZE}`;
+    if (this.aggregationsFilters) {
+      this.aggregationsFilters.map(filter => {
+        filter.values.map(v => {
+          url += `&${filter.key}=${v}`;
+        });
+      });
+    }
+    return url;
+  }
+
   /**
    * Aggregations order (facets)
    * @param aggr - Aggregations dictonary