Merge pull request #498 from TAMULib/470-export-section-people

470 export section people

Author: rmathew1011

src/app/+display/section/section.component.html

@@ -1,6 +1,22 @@
 <div class="card-header font-weight-bold text-primary text-capitalize">
-  <span>{{ section.name }}</span>
-  <div class="float-right" *ngIf="section.shared">
+  <div *ngIf="queryParams | async; let queryParams">
+  <div class="container mt-2" >
+    <div class="headers-row row flex-column-reverse flex-md-row">
+      <div class="col-md-8">
+        <span id="sidebar-title">{{ section.name }}</span>
+      </div>
+      <div class="col-md-4 text-right">
+        <span *ngIf="hasExport(section)" class="column-export">
+          <a [href]="getSectionExportUrl(queryParams, section)" download class="btn">
+            <span class="fa fa-share" [attr.aria-hidden]="true"></span>
+            <span>{{ 'DIRECTORY.EXPORT' | translate }}</span>
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="float-right" *ngIf="section.shared">
     <div class="embed-dropdown d-inline-block" placement="bottom-right" ngbDropdown>
       <i class="fa fa-lg fa-share-alt" ngbDropdownToggle ></i>
       <div class="dropdown-menu" ngbDropdownMenu>

src/app/+display/section/section.component.scss

@@ -1,4 +1,27 @@
 :host {
+  width: 100%;
+    .headers-row {
+    .column-export {
+      .btn {
+        color: var(--sidebar-button-color);
+        background-color: var(--sidebar-button-background-color);
+        border: 1px solid var(--sidebar-button-border-color);
+        font-size: 0.9em;
+        padding: 5px 10px 4px;
+        .fa {
+          padding-right: 0.3em;
+        }
+      }
+      .btn:active,
+      .btn:hover {
+        color: var(--sidebar-button-hover-color);
+        background-color: var(--sidebar-button-hover-background-color);
+      }
+      .btn:focus {
+        box-shadow: 0 0 0 0.2rem var(--sidebar-button-focus-shadow-color);
+      }
+    }
+  }
   .embed-dropdown {
     .dropdown-menu {
       min-width: 450px;

src/app/+display/section/section.component.ts

@@ -2,13 +2,16 @@ import { AfterViewInit, Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID
 import { ActivatedRoute, NavigationStart, Params, Router } from '@angular/router';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { Store, select } from '@ngrx/store';
 import { filter, map } from 'rxjs/operators';
 
 import { APP_CONFIG, AppConfig } from '../../app.config';
 import { Individual } from '../../core/model/discovery';
 import { SdrPage } from '../../core/model/sdr';
 import { DisplayTabSectionView, Sort } from '../../core/model/view';
-import { getResourcesPage, getSubsectionResources, loadBadges } from '../../shared/utilities/view.utility';
+import { AppState } from '../../core/store';
+import { selectRouterQueryParams } from '../../core/store/router';
+import { addExportToQueryParams, getResourcesPage, getSubsectionResources,hasExport, loadBadges } from '../../shared/utilities/view.utility';
 
 @Component({
   selector: 'scholars-section',
@@ -34,9 +37,12 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {
 
   private subscriptions: Subscription[];
 
+  public queryParams: Observable<Params>;
+
   constructor(
     @Inject(APP_CONFIG) private appConfig: AppConfig,
     @Inject(PLATFORM_ID) private platformId: string,
+    private store: Store<AppState>,
     private router: Router,
     private route: ActivatedRoute
   ) {
@@ -51,11 +57,13 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.queryParams = this.store.pipe(select(selectRouterQueryParams));
     if (this.section.paginated) {
       this.subscriptions.push(
         this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => loadBadges(this.platformId))
       );
       const resources = getSubsectionResources(this.individual[this.section.field], this.section.filters);
+
       this.page = this.route.queryParams.pipe(
         map((params: Params) => {
           const pageSize = params[`${this.section.name}.size`] ? Number(params[`${this.section.name}.size`]) : this.section.pageSize;
@@ -92,4 +100,22 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {
     setTimeout(() => tooltip.close(), 2000);
   }
 
+  public hasExport(section: DisplayTabSectionView): boolean {
+    return hasExport(section);
+  }
+
+  public getSectionExportUrl(params: Params, section: DisplayTabSectionView): string {
+    const queryParams: Params = { ...params };
+    queryParams.facets = null;
+    queryParams.collection = null;
+    addExportToQueryParams(queryParams, section);
+    const tree = this.router.createUrlTree([''], { queryParams });
+    const query = tree.toString().substring(1);
+    if (!this.individual?.id) {
+      return;
+    }
+
+    return `${this.appConfig.serviceUrl}/individual/${this.individual.id}/export${query}&view=${section.field}`;
+  }
+
 }

src/app/core/model/view/display-view.ts

@@ -1,4 +1,4 @@
-import { View } from './';
+import { CollectionView, View } from './';
 import { ExportView } from './export-view';
 import { FieldView } from './field-view';
 
@@ -13,7 +13,7 @@ export interface DisplaySubsectionView extends FieldView {
   templateFunction?: (individual: any) => string;
 }
 
-export interface DisplayTabSectionView extends FieldView {
+export interface DisplayTabSectionView extends FieldView, CollectionView {
   readonly hidden: boolean;
   readonly shared: boolean;
   readonly paginated: boolean;