Merge pull request #82 from TAMULib/rdc-sprint-staging

RDC Sprint 1

angular.json

@@ -59,6 +59,16 @@
                 "input": "src/themes/dspace/styles/theme.scss",
                 "inject": false,
                 "bundleName": "dspace-theme"
+              },
+              {
+                "input": "src/themes/tamu/styles/theme.scss",
+                "inject": false,
+                "bundleName": "tamu-theme"
+              },
+              {
+                "input": "src/themes/rdc/styles/theme.scss",
+                "inject": false,
+                "bundleName": "rdc-theme"
               }
             ],
             "scripts": [],

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts

@@ -8,6 +8,7 @@ import { ThemeService } from '../../shared/theme-support/theme.service';
 import { FlatBrowseDefinition } from '../../core/shared/flat-browse-definition.model';
 import { ValueListBrowseDefinition } from '../../core/shared/value-list-browse-definition.model';
 import { NonHierarchicalBrowseDefinition } from '../../core/shared/non-hierarchical-browse-definition';
+import { VALUE_LIST_BROWSE_DEFINITION } from 'src/app/core/shared/value-list-browse-definition.resource-type';
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -72,7 +73,12 @@ describe('BrowseBySwitcherComponent', () => {
     comp = fixture.componentInstance;
   }));
 
-  types.forEach((type: NonHierarchicalBrowseDefinition) => {
+  // TAMU Customization - skip test for ValueListBrowseDefinition
+  types
+    .filter((type: NonHierarchicalBrowseDefinition) => !(type instanceof ValueListBrowseDefinition))
+  // types.forEach((type: NonHierarchicalBrowseDefinition) => {
+  // End TAMU Customization - skip test for ValueListBrowseDefinition
+ .forEach((type: NonHierarchicalBrowseDefinition) => {
     describe(`when switching to a browse-by page for "${type.id}"`, () => {
       beforeEach(() => {
         data.next(createDataWithBrowseDefinition(type));
@@ -84,6 +90,23 @@ describe('BrowseBySwitcherComponent', () => {
       });
     });
   });
+
+  // TAMU Customization - test for ValueListBrowseDefinition
+  types
+    .filter((type: NonHierarchicalBrowseDefinition) => (type instanceof ValueListBrowseDefinition))
+    .forEach((type: ValueListBrowseDefinition) => {
+      describe(`when switching to a browse-by page for "${type.id}"`, () => {
+        beforeEach(() => {
+          data.next(createDataWithBrowseDefinition(type));
+          fixture.detectChanges();
+        });
+
+        it(`should call getComponentByBrowseByType with type "${VALUE_LIST_BROWSE_DEFINITION.value}"`, () => {
+          expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(VALUE_LIST_BROWSE_DEFINITION.value, themeName);
+        });
+      });
+    });
+  // End TAMU Customization - test for ValueListBrowseDefinition
 });
 
 export function createDataWithBrowseDefinition(browseDefinition) {

src/app/core/shared/value-list-browse-definition.model.ts

@@ -31,6 +31,8 @@ export class ValueListBrowseDefinition extends NonHierarchicalBrowseDefinition {
   };
 
   getRenderType(): string {
-    return this.dataType;
+    // TAMU Customization - return type.value of `valueList` to properly render author browse by link in simple item view
+    return this.type.value;
+    // return this.dataType;
   }
 }

src/themes/eager-themes.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
+// import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
 // import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';
+import { EagerThemeModule as RdcThemeModule } from './rdc/eager-theme.module';
+import { EagerThemeModule as TamuEagerThemeModule } from './tamu/eager-theme.module';
 
 /**
  * This module bundles the eager theme modules for all available themes.
@@ -11,9 +13,12 @@ import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme
  */
 @NgModule({
   imports: [
-    DSpaceEagerThemeModule,
+    // DSpaceEagerThemeModule,
     // CustomEagerThemeModule,
+    RdcThemeModule,
+    TamuEagerThemeModule,
   ],
 })
 export class EagerThemesModule {
+
 }

src/themes/rdc/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -0,0 +1,92 @@
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
+<div class="row" *ngIf="iiifEnabled">
+  <div class="col-12">
+    <ds-mirador-viewer id="iiif-viewer"
+                   [object]="object"
+                   [searchable]="iiifSearchEnabled"
+                   [query]="iiifQuery$ | async">
+    </ds-mirador-viewer>
+  </div>
+</div>
+
+<div class="d-flex flex-row">
+  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  </ds-themed-item-page-title-field>
+  <ds-dso-edit-menu></ds-dso-edit-menu>
+</div>
+<div class="row">
+  <!-- TAMU Customization - icon thumbnail style `thumb-font-4` -->
+  <div class="col-xs-12 col-md-4 thumb-font-4">
+  <!-- End TAMU Customization - icon thumbnail style `thumb-font-4` -->
+    <ng-container *ngIf="!(mediaViewer.image || mediaViewer.video)">
+      <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
+        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
+      </ds-metadata-field-wrapper>
+    </ng-container>
+    <div *ngIf="mediaViewer.image || mediaViewer.video" class="mb-2">
+      <ds-themed-media-viewer [item]="object"></ds-themed-media-viewer>
+    </div>
+    <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
+    <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
+    <ds-themed-metadata-representation-list class="ds-item-page-mixed-author-field"
+      [parentItem]="object"
+      [itemType]="'Person'"
+      [metadataFields]="['dc.contributor.author', 'dc.creator']"
+      [label]="'relationships.isAuthorOf' | translate">
+    </ds-themed-metadata-representation-list>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['journal.title']"
+      [label]="'item.page.journal-title'">
+    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['journal.identifier.issn']"
+      [label]="'item.page.journal-issn'">
+    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['journalvolume.identifier.name']"
+      [label]="'item.page.volume-title'">
+    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['dc.publisher']"
+      [label]="'item.page.publisher'">
+    </ds-generic-item-page-field>
+  </div>
+  <div class="col-xs-12 col-md-6">
+    <ds-item-page-abstract-field [item]="object"></ds-item-page-abstract-field>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['dc.description']"
+      [label]="'item.page.description'">
+    </ds-generic-item-page-field>
+
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['dc.subject']"
+      [separator]="', '"
+      [label]="'item.page.subject'">
+    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="object"
+      [fields]="['dc.identifier.citation']"
+      [label]="'item.page.citation'">
+    </ds-generic-item-page-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['dc.identifier.uri']"
+      [label]="'item.page.uri'">
+    </ds-item-page-uri-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['dc.relation.profileurl']"
+      [label]="'item.author.uri'">
+    </ds-item-page-uri-field>
+    <ds-item-page-collections [item]="object"></ds-item-page-collections>
+    <!-- TAMU Customization - RDC dataset link -->
+    <div class="mb-2" *ngIf="object.firstMetadataValue('dcterms.source')">
+      <a class="btn btn-primary" href="{{ object.firstMetadataValue('dcterms.source') }}" role="button">
+        {{"item.page.source" | translate}}
+      </a>
+    </div>
+    <!-- End TAMU Customization - RDC dataset link -->
+    <div>
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button">
+        <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
+      </a>
+    </div>
+  </div>
+</div>

src/themes/rdc/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Item } from '../../../../../../../app/core/shared/item.model';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import {
+  listableObjectComponent
+} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import { Context } from '../../../../../../../app/core/shared/context.model';
+import {
+  UntypedItemComponent as BaseComponent
+} from '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component';
+
+/**
+ * Component that represents an untyped Item page
+ */
+@listableObjectComponent(Item, ViewMode.StandalonePage, Context.Any, 'rdc')
+@Component({
+  selector: 'ds-untyped-item',
+  // styleUrls: ['./untyped-item.component.scss'],
+  styleUrls: ['../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.scss'],
+  templateUrl: './untyped-item.component.html',
+  // templateUrl: '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UntypedItemComponent extends BaseComponent {
+}

src/themes/rdc/assets/i18n/en.json5

@@ -0,0 +1,7 @@
+{
+  "item.page.source": "Access at repository",
+
+  "item.author.uri": "Researcher Profile",
+
+  "thumbnail.default.placeholder": "",
+}

src/themes/rdc/eager-theme.module.ts

@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ItemPageModule } from '../../app/item-page/item-page.module';
+import { ItemSharedModule } from '../../app/item-page/item-shared.module';
+import { NavbarModule } from '../../app/navbar/navbar.module';
+import { RootModule } from '../../app/root.module';
+import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module';
+import { DsoPageModule } from '../../app/shared/dso-page/dso-page.module';
+import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module';
+import { SharedModule } from '../../app/shared/shared.module';
+import { UntypedItemComponent } from './app/item-page/simple/item-types/untyped-item/untyped-item.component';
+
+/**
+ * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS.
+ * This will ensure that decorator gets picked up when the app loads
+ */
+const ENTRY_COMPONENTS = [
+  UntypedItemComponent
+];
+
+const DECLARATIONS = [
+  ...ENTRY_COMPONENTS
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    RootModule,
+    NavbarModule,
+    SharedBrowseByModule,
+    ResultsBackButtonModule,
+    ItemPageModule,
+    ItemSharedModule,
+    DsoPageModule,
+  ],
+  declarations: DECLARATIONS,
+  providers: [
+    ...ENTRY_COMPONENTS.map((component) => ({ provide: component }))
+  ],
+})
+/**
+ * This module is included in the main bundle that gets downloaded at first page load. So it should
+ * contain only the themed components that have to be available immediately for the first page load,
+ * and the minimal set of imports required to make them work. Anything you can cut from it will make
+ * the initial page load faster, but may cause the page to flicker as components that were already
+ * rendered server side need to be lazy-loaded again client side
+ *
+ * Themed EntryComponents should also be added here
+ */
+export class EagerThemeModule {
+}

src/themes/rdc/styles/_theme_css_variable_overrides.scss

@@ -0,0 +1,11 @@
+// Override or add CSS variables for your theme here
+
+:root {
+  --ds-thumbnail-max-width: 75px;
+  --ds-thumbnail-placeholder-background: none;
+  --ds-thumbnail-placeholder-border: none;
+  --ds-thumbnail-placeholder-color: #{--$gray-700};
+
+  --ds-home-news-link-color: #{$gray-100};
+  --ds-home-news-link-hover-color: #{darken($gray-100, 15%)};
+}

src/themes/rdc/styles/_thumbnail-styles.scss

@@ -0,0 +1,58 @@
+// Add any thumbnail css for the theme here
+
+.thumbnail-placeholder {
+  @extend .fa;
+  @extend .fa-database;
+}
+
+/* The font sizes used in "no thumbnail" placeholder */
+.thumb-font-0 {
+  .thumbnail-placeholder {
+      @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+          font-size: 0.7rem;
+          padding: 0.2rem;
+      }
+      @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+          font-size: 0.6rem;
+          padding: 0.1rem;
+      }
+      font-size: 0.4rem;
+      padding: 0.1rem;
+  }
+}
+
+.thumb-font-1 {
+  .thumbnail-placeholder {
+      @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+          font-size: 1em;
+          padding: 0.1rem;
+      }
+      @media screen and (max-width: 950px) {
+          font-size: 1em;
+          padding: 0.1rem;
+      }
+      font-size: 1em;
+      padding: 0.125rem;
+  }
+}
+
+.thumb-font-2 {
+  .thumbnail-placeholder {
+      font-size: 2em;
+      padding: 0.125rem;
+  }
+}
+
+.thumb-font-3 {
+  .thumbnail-placeholder {
+      font-size: 3em;
+      padding: 0.5rem;
+  }
+}
+
+.thumb-font-4 {
+  .thumbnail-placeholder {
+      font-size: 4em;
+      padding: 0.5rem;
+  }
+}

src/themes/rdc/styles/theme.scss

@@ -0,0 +1,5 @@
+// This file combines the other scss files in to one. You usually shouldn't edit this file directly
+
+@import '../../tamu/styles/theme.scss';
+@import './_theme_css_variable_overrides.scss';
+@import './_thumbnail-styles.scss';

src/themes/tamu/app/header-nav-wrapper/header-navbar-wrapper.component.html

@@ -0,0 +1,3 @@
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+  <ds-themed-header></ds-themed-header>
+</div>

src/themes/tamu/app/header-nav-wrapper/header-navbar-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}