Merge pull request #43 from TAMULib/tamu-main-improvements

Fixes and improvements

package.json

@@ -27,22 +27,22 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "12.0.3",
-    "@angular/common": "12.0.3",
-    "@angular/compiler": "12.0.3",
-    "@angular/core": "12.0.3",
-    "@angular/forms": "12.0.3",
-    "@angular/localize": "12.0.3",
-    "@angular/platform-browser": "12.0.3",
-    "@angular/platform-browser-dynamic": "12.0.3",
-    "@angular/platform-server": "12.0.3",
-    "@angular/router": "12.0.3",
-    "@ng-bootstrap/ng-bootstrap": "9.1.2",
-    "@ngrx/effects": "12.0.0",
-    "@ngrx/entity": "12.0.0",
-    "@ngrx/router-store": "12.0.0",
-    "@ngrx/store": "12.0.0",
-    "@nguniversal/express-engine": "12.0.1",
+    "@angular/animations": "12.0.5",
+    "@angular/common": "12.0.5",
+    "@angular/compiler": "12.0.5",
+    "@angular/core": "12.0.5",
+    "@angular/forms": "12.0.5",
+    "@angular/localize": "12.0.5",
+    "@angular/platform-browser": "12.0.5",
+    "@angular/platform-browser-dynamic": "12.0.5",
+    "@angular/platform-server": "12.0.5",
+    "@angular/router": "12.0.5",
+    "@ng-bootstrap/ng-bootstrap": "9.1.3",
+    "@ngrx/effects": "12.1.0",
+    "@ngrx/entity": "12.1.0",
+    "@ngrx/router-store": "12.1.0",
+    "@ngrx/store": "12.1.0",
+    "@nguniversal/express-engine": "12.0.2",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
     "bootstrap": "4.6.0",
@@ -55,27 +55,28 @@
     "ie11-custom-properties": "4.1.0",
     "rxjs": "6.6.7",
     "scholars-embed-utilities": "0.3.1",
-    "tslib": "2.2.0",
+    "tslib": "2.3.0",
     "web-animations-js": "2.3.2",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.0.3",
-    "@angular-devkit/schematics": "12.0.3",
-    "@angular/cli": "12.0.3",
-    "@angular/compiler-cli": "12.0.3",
-    "@angular/language-service": "12.0.3",
-    "@ngrx/store-devtools": "12.0.0",
+    "@angular-devkit/build-angular": "12.0.5",
+    "@angular-devkit/schematics": "12.0.5",
+    "@angular/cli": "12.0.5",
+    "@angular/compiler-cli": "12.0.5",
+    "@angular/language-service": "12.0.5",
+    "@ngrx/store-devtools": "12.1.0",
+    "@nguniversal/builders": "12.0.2",
     "@types/compression": "1.7.0",
     "@types/express": "4.17.12",
     "@types/jasmine": "~3.7.7",
     "@types/jasminewd2": "2.0.9",
-    "@types/node": "15.12.2",
+    "@types/node": "15.12.4",
     "codelyzer": "6.0.2",
     "coveralls": "3.1.0",
     "jasmine-core": "3.7.1",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.3.3",
+    "karma": "6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "4.0.1",

src/app/core/store/layout/layout.effects.ts

@@ -78,7 +78,10 @@ export class LayoutEffects implements OnInitEffects {
 
   private updateUrl(menu: SidebarMenu, url: string): void {
     const tree = this.router.parseUrl(url);
-    const expanded = menu.sections.filter(section => !section.collapsed).map(section => encodeURIComponent(section.title)).join(',');
+    const expanded = menu.sections
+      .filter(section => !section.collapsed)
+      .map(section => encodeURIComponent(section.title))
+      .join(',');
     if (expanded.length > 0) {
       tree.queryParams.expanded = expanded;
     } else {

src/app/footer/copyright/copyright.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'scholars-copyright',
   templateUrl: 'copyright.component.html',
   styleUrls: ['copyright.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CopyrightComponent {
 

src/app/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
@@ -22,6 +22,7 @@ import * as fromAuth from '../core/store/auth/auth.actions';
   selector: 'scholars-footer',
   templateUrl: 'footer.component.html',
   styleUrls: ['footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FooterComponent implements OnInit {
 

src/app/header/banner/banner.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
 import { Observable } from 'rxjs';
@@ -13,6 +13,7 @@ import { selectActiveThemeHeaderBanner } from '../../core/store/theme';
   selector: 'scholars-banner',
   templateUrl: 'banner.component.html',
   styleUrls: ['banner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BannerComponent implements OnInit {
 

src/app/header/header.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'scholars-header',
   templateUrl: 'header.component.html',
   styleUrls: ['header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderComponent { }

src/app/header/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
 import { Observable } from 'rxjs';
@@ -16,6 +16,7 @@ import * as fromLayout from '../../core/store/layout/layout.actions';
   selector: 'scholars-navbar',
   templateUrl: 'navbar.component.html',
   styleUrls: ['navbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NavbarComponent implements OnInit {
 

src/app/shared/navigation/navigation.component.html

@@ -10,18 +10,18 @@
           <a class="nav-link menu-action" (click)="toggleSidebar()">{{ ((isSidebarExpanded | async) ? 'SHARED.SIDEBAR.BACK' : 'SHARED.SIDEBAR.MENU') | translate }}</a>
         </li>
         <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
-          <a class="nav-link" [routerLink]="['/']" (click)="toggleNavigation()">{{ 'SHARED.NAVIGATION.HOME' | translate }}</a>
+          <a class="nav-link" [routerLink]="['/']">{{ 'SHARED.NAVIGATION.HOME' | translate }}</a>
         </li>
       </ul>
       <ul class="navbar-nav" *ngIf="directoryViews | async; let directoryViews">
         <!-- NOTE: can not use routerLinkActive here due to the changes in the query parameters -->
         <li class="nav-item" *ngFor="let directoryView of directoryViews" [class.active]="isActive(directoryView, url | async)">
-          <a class="nav-link" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParams(directoryView)" (click)="toggleNavigation()">{{ directoryView.name }}</a>
+          <a class="nav-link" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParams(directoryView)" >{{ directoryView.name }}</a>
         </li>
       </ul>
       <ul class="navbar-nav">
         <!-- <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
-          <a class="nav-link" [routerLink]="['/about']" (click)="toggleNavigation()">{{ 'SHARED.NAVIGATION.ABOUT' | translate }}</a>
+          <a class="nav-link" [routerLink]="['/about']">{{ 'SHARED.NAVIGATION.ABOUT' | translate }}</a>
         </li> -->
         <li class="nav-item">
           <a class="nav-link" href="https://scholars.library.tamu.edu/about_scholars">{{ 'SHARED.NAVIGATION.ABOUT' | translate }}</a>
@@ -41,4 +41,4 @@
       </a>
     </div>
   </div>
-</nav>
+</nav>

src/app/shared/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ChangeDetectionStrategy } from '@angular/core';
 import { Params } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 
@@ -22,6 +22,7 @@ import * as fromLayout from '../../core/store/layout/layout.actions';
   selector: 'scholars-navigation',
   templateUrl: 'navigation.component.html',
   styleUrls: ['navigation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NavigationComponent implements OnInit {
 

src/app/shared/sidebar/sidebar.component.html

@@ -13,8 +13,7 @@
         <span *ngIf="section.collapsible" class="section-collapse float-right fa" [ngClass]="{ 'fa-caret-right': section.collapsed, 'fa-caret-down': !section.collapsed }" aria-role="button" attr.aria-label="{{ (section.collapsed ? 'SHARED.SIDEBAR.SECTION.ARIA_LABEL_EXPAND' : 'SHARED.SIDEBAR.SECTION.ARIA_LABEL_COLLAPSE') | translate:{ label: section.title } }}"></span>
       </a>
 
-      <div class="card-items" [ngbCollapse]="section.collapsed" [@expandCollapse]="section.collapsed ? 'collapsed' : 'expanded'">
-
+      <div class="card-item" [ngbCollapse]="section.collapsed">
         <ul class="list-group list-group-flush" *ngFor="let item of section.items">
           <li [ngSwitch]="item.type" class="list-group-item {{item.classes}}" [ngClass]="{'list-group-item-action link': item.type !== 'INFO'}" aria-role="link" attr.aria-label="{{ 'SHARED.SIDEBAR.LINK.ARIA_LABEL' | translate }}">
 

src/app/shared/sidebar/sidebar.component.scss

@@ -10,9 +10,6 @@
         min-width: 100%;
         max-width: 100%;
       }
-      .collapse:not(.show) {
-        display: block;
-      }
       .card {
         a.card-header {
           color: inherit;
@@ -27,7 +24,7 @@
         .card-header:hover {
           cursor: pointer;
         }
-        .card-items {
+        .card-item {
           ul.list-group {
             padding-left: 1px;
           }
@@ -92,4 +89,4 @@
   .custom-slider .ng5-slider .ng5-slider-tick.ng5-slider-selected {
     background: var(--navigation-color);
   }
-}
+}

src/app/shared/sidebar/sidebar.component.ts

@@ -5,14 +5,13 @@ import { Store, select, Action } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
 import { AppState } from '../../core/store';
-import { SidebarMenu, SidebarItem, SidebarSection } from '../../core/model/sidebar';
+import { SidebarMenu, SidebarSection } from '../../core/model/sidebar';
 
 import { selectIsSidebarCollapsed } from '../../core/store/layout';
 import { selectMenu } from '../../core/store/sidebar';
 
-import { fadeIn, expandCollapse } from '../utilities/animation.utility';
+import { fadeIn } from '../utilities/animation.utility';
 
-import * as fromRouter from '../../core/store/router/router.actions';
 import * as fromSidebar from '../../core/store/sidebar/sidebar.actions';
 import { Params, Router } from '@angular/router';
 import { selectRouterUrl } from 'src/app/core/store/router';
@@ -22,7 +21,7 @@ import { selectResourceIsLoading } from 'src/app/core/store/sdr';
   selector: 'scholars-sidebar',
   templateUrl: 'sidebar.component.html',
   styleUrls: ['sidebar.component.scss'],
-  animations: [fadeIn, expandCollapse],
+  animations: [fadeIn],
 })
 export class SidebarComponent implements OnInit {
 

src/app/shared/sustainable-development-goals/sustainable-development-goals.component.html

@@ -1,6 +1,6 @@
 <div class="d-flex flex-wrap justify-content-center justify-content-md-start">
   <ng-template ngFor let-goal [ngForOf]="goals" let-i="index" [ngForTrackBy]="trackByFn">
-    <img class="goal-logo link" [src]="goal.icon" [ngbPopover]="goalsPopover" [popoverTitle]="goalsPopoverTitle" (hidden)="hidden(goal)" (shown)="shown(goal)" triggers="click" autoClose="outside" popoverClass="sdg-popover" placement="bottom-right">
+    <img class="goal-logo link" height="130" width="130" [src]="goal.icon" [ngbPopover]="goalsPopover" [popoverTitle]="goalsPopoverTitle" (hidden)="hidden(goal)" (shown)="shown(goal)" triggers="click" autoClose="outside" popoverClass="sdg-popover" placement="bottom-right">
     <ng-template #goalsPopoverTitle>
       <span class="goal-title" [ngStyle]="{'border-left-color': goal.color}">{{goal.title}}</span>
       <span class="fa fa-info-circle" [ngStyle]="{'color': goal.color}" aria-hidden="true"></span>

src/app/shared/utilities/animation.utility.ts

@@ -18,17 +18,3 @@ export const fadeOutIn = trigger('fadeOutIn', [
   transition('false=>true', animate('275ms ease-out')),
   transition('true=>false', animate('275ms ease-in'))
 ]);
-
-export const expandCollapse = trigger('expandCollapse', [
-  state('collapsed', style({
-    height: '0px',
-    overflow: 'hidden',
-    opacity: 0,
-  })),
-  state('expanded', style({
-    overflow: 'hidden',
-    opacity: 1,
-  })),
-  transition('collapsed=>expanded', animate('250ms')),
-  transition('expanded=>collapsed', animate('250ms')),
-]);

src/app/shared/utilities/filter.pipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'filter',
+  pure: true
 })
 export class FilterPipe implements PipeTransform {
   transform(items: any[], filter: any): any[] {

src/app/shared/utilities/formalize.pipe.ts

@@ -4,7 +4,10 @@ import { formalize } from 'scholars-embed-utilities';
 
 import { environment } from '../../../environments/environment';
 
-@Pipe({ name: 'formalize' })
+@Pipe({
+  name: 'formalize',
+  pure: true
+})
 export class FormalizePipe implements PipeTransform {
   transform(value) {
     return formalize(value, environment.formalize);

src/app/shared/utilities/safe-html.pipe.ts

@@ -1,7 +1,10 @@
 import { PipeTransform, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
-@Pipe({ name: 'safeHtml' })
+@Pipe({
+  name: 'safeHtml',
+  pure: true
+})
 export class SafeHtmlPipe implements PipeTransform {
   constructor(private sanitized: DomSanitizer) {}
 

src/app/shared/utilities/safe-url.pipe.ts

@@ -1,7 +1,10 @@
 import { PipeTransform, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
-@Pipe({ name: 'safeUrl' })
+@Pipe({
+  name: 'safeUrl',
+  pure: true
+})
 export class SafeUrlPipe implements PipeTransform {
   constructor(private sanitized: DomSanitizer) {}