Merge pull request #14 from TAMULib/tamu-sprint10-wrapup

Sprint 10 Wrap Up
vivo-community · Apr 20, 2020 · 172acfd · 172acfd
2 parents a67485a + 21c6cdd
commit 172acfd
Show file tree

Hide file tree

Showing 43 changed files with 653 additions and 399 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@angular/platform-browser-dynamic": "9.1.2",
     "@angular/platform-server": "9.1.2",
     "@angular/router": "9.1.2",
-    "@ng-bootstrap/ng-bootstrap": "6.0.2",
+    "@ng-bootstrap/ng-bootstrap": "6.0.3",
     "@ngrx/effects": "9.1.0",
     "@ngrx/entity": "9.1.0",
     "@ngrx/router-store": "9.1.0",
@@ -54,7 +54,7 @@
     "net": "1.0.2",
     "ng5-slider": "1.2.4",
     "rxjs": "6.5.5",
-    "scholars-embed-utilities": "0.2.3",
+    "scholars-embed-utilities": "0.2.7",
     "sockjs-client": "1.4.0",
     "stompjs": "2.3.3",
     "tslib": "1.11.1",

diff --git a/src/app/+directory/directory.component.html b/src/app/+directory/directory.component.html
@@ -7,39 +7,39 @@
     </div>
   </div>
 </div>
-<scholars-sidebar>
-  <div class="container mt-2" *ngIf="directoryView | async; let directoryView">
+<scholars-sidebar *ngIf="directoryView | async; let directoryView">
+  <div class="container mt-2">
     <div class="headers-row row flex-column-reverse flex-md-row">
       <div class="col-md-8">
         <span class="h3 text-primary">{{ directoryView.name }}</span>
       </div>
       <div class="col-md-4 text-right">
         <span *ngIf="hasExport(directoryView)" class="column-export">
-          <a [href]="getDirectoryExportUrl(directoryView, queryParams | async)" download class="btn">
+          <a [href]="getDirectoryExportUrl(queryParams | async, directoryView)" download class="btn">
             <span class="fa fa-share" aria-hidden="true"></span>
             <span>{{ 'DIRECTORY.EXPORT' | translate }}</span>
           </a>
         </span>
       </div>
     </div>
-    <div class="applied-filters mt-2" *ngIf="filters | async; let filters">
-      <span class="badge badge-light p-2 mr-2 mb-2" *ngFor="let filter of filters">
+    <div class="applied-filters mt-2">
+      <span class="badge badge-light p-2 mr-2 mb-2" *ngFor="let filter of filters | async">
         <span *ngIf="showFilter(directoryView, filter)">
           <span class="mr-1">{{getFilterField(directoryView, filter) | formalize}}:</span>
           <span class="mr-2">{{getFilterValue(directoryView, filter) | formalize}}</span>
-          <a class="fa fa-close" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParams(directoryView, filters, filter)"></a>
+          <a class="fa fa-close" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsRemovingFilter(queryParams | async, filter)"></a>
         </span>
       </span>
-      <span *ngIf="showClearFilters(directoryView, filters)" class="badge badge-light p-2 mr-2 mb-2">
-        <a [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParams(directoryView, filters)">Clear</a>
+      <span *ngIf="showClearFilters(directoryView, filters | async)" class="badge badge-light p-2 mr-2 mb-2">
+        <a [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsClearingFilters(queryParams | async, directoryView)">Clear</a>
       </span>
     </div>
     <div class="index">
-      <a class="option" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getResetQueryParams(directoryView, queryParams | async)">
+      <a class="option" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsResetting(queryParams | async, directoryView)">
         <span *ngIf="isActive(directoryView, queryParams | async, 'All')" class="fa fa-caret-right mr-1"></span>
         <span>{{ 'DIRECTORY.ALL' | translate }}</span>
       </a>
-      <a class="option" *ngFor="let option of directoryView.index.options" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryOptionQueryParams(directoryView, option, filters | async)">
+      <a class="option" *ngFor="let option of directoryView.index.options" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsWithOption(queryParams | async, directoryView, option)">
         <span *ngIf="isActive(directoryView, queryParams | async, option)" class="fa fa-caret-right mr-1"></span>
         <span>{{option}}</span>
       </a>

diff --git a/src/app/+directory/directory.component.ts b/src/app/+directory/directory.component.ts
@@ -17,7 +17,7 @@ import { fadeIn } from '../shared/utilities/animation.utility';
 import { selectAllResources, selectResourcesPage, selectResourcesFacets, selectResourceById, selectDiscoveryViewByClass, selectResourceIsLoading } from '../core/store/sdr';
 import { selectRouterQueryParams, selectRouterQueryParamFilters } from '../core/store/router';
 
-import { addExportToQueryParams, getQueryParams, applyFiltersToQueryParams, showFilter, showClearFilters, getFilterField, getFilterValue, hasExport } from '../shared/utilities/view.utility';
+import { addExportToQueryParams, showFilter, showClearFilters, getFilterField, getFilterValue, hasExport, removeFilterFromQueryParams, resetFiltersInQueryParams } from '../shared/utilities/view.utility';
 
 @Component({
   selector: 'scholars-directory',
@@ -118,34 +118,26 @@ export class DirectoryComponent implements OnDestroy, OnInit {
     return ['/directory', directoryView.name];
   }
 
-  public getDirectoryQueryParams(directoryView: DirectoryView, filters: Filter[], filterToRemove?: Filter): Params {
-    const queryParams: Params = getQueryParams(directoryView);
-    applyFiltersToQueryParams(queryParams, directoryView, filters, filterToRemove);
-    queryParams.page = 1;
-    return queryParams;
+  public getDirectoryExportUrl(params: Params, directoryView: DirectoryView): string {
+    const queryParams: Params = Object.assign({}, params);
+    queryParams.facets = null;
+    queryParams.collection = null;
+    addExportToQueryParams(queryParams, directoryView);
+    const tree = this.router.createUrlTree([''], { queryParams });
+    const query = tree.toString().substring(1);
+    return `${this.appConfig.serviceUrl}/individual/search/export${query}`;
   }
 
-  public getDirectoryOptionQueryParams(directoryView: DirectoryView, option: string, filters: Filter[], filterToRemove?: Filter): Params {
-    const queryParams: Params = getQueryParams(directoryView);
-    applyFiltersToQueryParams(queryParams, directoryView, filters, filterToRemove);
-    queryParams.page = 1;
-    if (option) {
-      queryParams[`${directoryView.index.field}.filter`] = option;
-      queryParams[`${directoryView.index.field}.opKey`] = directoryView.index.opKey;
-      if (!queryParams.filters) {
-        queryParams.filters = directoryView.index.field;
-      } else {
-        queryParams.filters += `,${directoryView.index.field}`;
-      }
-    }
+  public getDirectoryQueryParamsRemovingFilter(params: Params, filterToRemove: Filter): Params {
+    const queryParams: Params = Object.assign({}, params);
+    removeFilterFromQueryParams(queryParams, filterToRemove);
     return queryParams;
   }
 
-  public getResetQueryParams(directoryView: DirectoryView, params: Params): Params {
+  public getDirectoryQueryParamsResetting(params: Params, directoryView: DirectoryView): Params {
     const queryParams: Params = Object.assign({}, params);
     if (queryParams.filters && queryParams.filters.indexOf(directoryView.index.field) >= 0) {
-      const filters = queryParams.filters
-        .split(',')
+      const filters = queryParams.filters.split(',')
         .map((field) => field.trim())
         .filter((field) => field !== directoryView.index.field);
       if (filters.length > 0) {
@@ -159,13 +151,25 @@ export class DirectoryComponent implements OnDestroy, OnInit {
     return queryParams;
   }
 
-  public getDirectoryExportUrl(directoryView: DirectoryView, params: Params): string {
+  public getDirectoryQueryParamsClearingFilters(params: Params, discoveryView: DiscoveryView): Params {
     const queryParams: Params = Object.assign({}, params);
-    queryParams.facets = null;
-    queryParams.collection = null;
-    addExportToQueryParams(queryParams, directoryView);
-    const tree = this.router.createUrlTree([''], { queryParams });
-    const query = tree.toString().substring(1);
-    return `${this.appConfig.serviceUrl}/individual/search/export${query}`;
+    resetFiltersInQueryParams(queryParams, discoveryView);
+    return queryParams;
   }
+
+  public getDirectoryQueryParamsWithOption(params: Params, directoryView: DirectoryView, option: string): Params {
+    const queryParams: Params = Object.assign({}, params);
+    queryParams.page = 1;
+    if (option) {
+      queryParams[`${directoryView.index.field}.filter`] = option;
+      queryParams[`${directoryView.index.field}.opKey`] = directoryView.index.opKey;
+      if (!queryParams.filters) {
+        queryParams.filters = directoryView.index.field;
+      } else {
+        queryParams.filters += `,${directoryView.index.field}`;
+      }
+    }
+    return queryParams;
+  }
+
 }
diff --git a/src/app/+discovery/discovery.component.html b/src/app/+discovery/discovery.component.html
@@ -7,8 +7,8 @@
     </div>
   </div>
 </div>
-<scholars-sidebar>
-  <div class="container mt-2" *ngIf="discoveryView | async; let discoveryView">
+<scholars-sidebar *ngIf="discoveryView | async; let discoveryView">
+  <div class="container mt-2">
     <div class="headers-row row flex-column-reverse flex-md-row">
       <div class="col-md-8">
         <span class="h4 text-primary">
@@ -21,28 +21,28 @@
       </div>
       <div class="col-md-4 text-right">
         <span *ngIf="hasExport(discoveryView)" class="column-export">
-          <a [href]="getDiscoveryExportUrl(discoveryView, queryParams | async)" download class="btn">
+          <a [href]="getDiscoveryExportUrl(queryParams | async, discoveryView)" download class="btn">
             <span class="fa fa-share" aria-hidden="true"></span>
             <span>{{ 'DISCOVERY.EXPORT' | translate }}</span>
           </a>
         </span>
       </div>
     </div>
-    <div class="applied-filters mt-2" *ngIf="filters | async; let filters">
-      <span class="badge badge-light p-2 mr-2 mb-2" *ngFor="let filter of filters">
+    <div class="applied-filters mt-2">
+      <span class="badge badge-light p-2 mr-2 mb-2" *ngFor="let filter of filters | async">
         <span *ngIf="showFilter(discoveryView, filter)">
           <span class="mr-1">{{getFilterField(discoveryView, filter) | formalize}}:</span>
           <span class="mr-2">{{getFilterValue(discoveryView, filter) | formalize}}</span>
-          <a class="fa fa-close" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParams(discoveryView, page | async, query | async, filters, filter)"></a>
+          <a class="fa fa-close" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsRemovingFilter(queryParams | async, filter)"></a>
         </span>
       </span>
-      <span *ngIf="showClearFilters(discoveryView, filters)" class="badge badge-light p-2 mr-2 mb-2">
-        <a [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParams(discoveryView, page | async, query | async)">Clear</a>
+      <span *ngIf="showClearFilters(discoveryView, filters | async)" class="badge badge-light p-2 mr-2 mb-2">
+        <a [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsClearingFilters(queryParams | async, discoveryView)">Clear</a>
       </span>
     </div>
     <ul role="tablist" class="list-unstyled mt-3 nav" *ngIf="discoveryViews | async; let discoveryViews" [ngClass]="{ 'nav-tabs': showTabs(windowDimensions | async), 'nav-pills flex-column': !showTabs(windowDimensions | async) }">
       <li class="nav-item" *ngFor="let discoveryView of discoveryViews">
-        <a class="nav-link font-weight-bold" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParams(discoveryView, page | async, query | async)" [class.active]="isActive(discoveryView, url | async)">{{ discoveryView.name }}</a>
+        <a class="nav-link font-weight-bold" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsSwitchingDiscoveryView(queryParams | async, discoveryView)" [class.active]="isActive(discoveryView, url | async)">{{ discoveryView.name }}</a>
       </li>
     </ul>
     <div *ngIf="(loading | async) === false" [@fadeIn]>
@@ -52,4 +52,4 @@
       </scholars-pagination>
     </div>
   </div>
-</scholars-sidebar>
+</scholars-sidebar>
diff --git a/src/app/+discovery/discovery.component.ts b/src/app/+discovery/discovery.component.ts
@@ -19,7 +19,7 @@ import { selectRouterSearchQuery, selectRouterUrl, selectRouterQueryParamFilters
 import { selectAllResources, selectResourcesPage, selectResourcesFacets, selectResourceById, selectResourceIsLoading } from '../core/store/sdr';
 import { selectWindowDimensions } from '../core/store/layout';
 
-import { addExportToQueryParams, getQueryParams, applyFiltersToQueryParams, showFilter, showClearFilters, getFilterField, getFilterValue, hasExport } from '../shared/utilities/view.utility';
+import { addExportToQueryParams, showFilter, showClearFilters, getFilterField, getFilterValue, hasExport, removeFilterFromQueryParams, resetFiltersInQueryParams, getQueryParams } from '../shared/utilities/view.utility';
 
 @Component({
   selector: 'scholars-discovery',
@@ -124,19 +124,7 @@ export class DiscoveryComponent implements OnDestroy, OnInit {
     return ['/discovery', discoveryView.name];
   }
 
-  public getDiscoveryQueryParams(discoveryView: DiscoveryView, page: SdrPage, query: string, filters: Filter[] = [], filterToRemove?: Filter): Params {
-    const queryParams: Params = getQueryParams(discoveryView);
-    applyFiltersToQueryParams(queryParams, discoveryView, filters, filterToRemove);
-    if (query && query.length > 0) {
-      queryParams.q = query;
-    }
-    if (page && page.size) {
-      queryParams.size = page.size;
-    }
-    return queryParams;
-  }
-
-  public getDiscoveryExportUrl(discoveryView: DiscoveryView, params: Params): string {
+  public getDiscoveryExportUrl(params: Params, discoveryView: DiscoveryView): string {
     const queryParams: Params = Object.assign({}, params);
     queryParams.facets = null;
     queryParams.collection = null;
@@ -145,4 +133,23 @@ export class DiscoveryComponent implements OnDestroy, OnInit {
     const query = tree.toString().substring(1);
     return `${this.appConfig.serviceUrl}/individual/search/export${query}`;
   }
+
+  public getDiscoveryQueryParamsRemovingFilter(params: Params, filterToRemove: Filter): Params {
+    const queryParams: Params = Object.assign({}, params);
+    removeFilterFromQueryParams(queryParams, filterToRemove);
+    return queryParams;
+  }
+
+  public getDiscoveryQueryParamsClearingFilters(params: Params, discoveryView: DiscoveryView): Params {
+    const queryParams: Params = Object.assign({}, params);
+    resetFiltersInQueryParams(queryParams, discoveryView);
+    return queryParams;
+  }
+
+  public getDiscoveryQueryParamsSwitchingDiscoveryView(params: Params, discoveryView: DiscoveryView): Params {
+    const queryParams: Params = getQueryParams(discoveryView);
+    queryParams.q = params.q;
+    return queryParams;
+  }
+
 }
diff --git a/src/app/+display/display.component.html b/src/app/+display/display.component.html
@@ -7,13 +7,14 @@
     </div>
   </div>
 </div>
-<div *ngIf="(loading | async) === false" [@fadeIn]>
+<div [scholarsLoader]="loading()" [ngClass]="{ 'loader': (loading() | async) }"></div>
+<div *ngIf="ready | async" [@fadeIn]>
   <div class="document container" *ngIf="document | async; let document">
     <div *ngIf="displayView | async; let displayView" class="row">
       <div *ngIf="showAsideLeft(displayView)" class="d-none d-lg-block col-lg-3 p-0">
         <ng-container *ngTemplateOutlet="aside"></ng-container>
       </div>
-      <div [ngClass]="{ 'col-lg-9': showAside(displayView), 'col-lg-12': !showAside(displayView) }" *ngIf="ready | async">
+      <div [ngClass]="{ 'col-lg-9': showAside(displayView), 'col-lg-12': !showAside(displayView) }">
         <div class="row mt-2">
           <div *ngIf="showLeftScan(displayView)" class="col-md-{{ getLeftScanColSize(displayView) }}" [innerHtml]="displayView.leftScanTemplateFunction(document) | safeHtml"></div>
           <div *ngIf="showMainContent(displayView)" class="col-md-{{ getMainContentColSize(displayView) }}" [innerHtml]="displayView.mainContentTemplateFunction(document) | safeHtml"></div>

diff --git a/src/app/+display/display.component.scss b/src/app/+display/display.component.scss
@@ -1,3 +1,6 @@
 :host {
   width: 100%;
+  .loader {
+    height: 100px;
+  }
 }