Merge branch 'master' into w2p-65195_dynamic-component-refactoring

resources/i18n/en.json5

@@ -161,6 +161,7 @@
 
   "collection.page.browse.recent.head": "Recent Submissions",
   "collection.page.browse.recent.empty": "No items to show",
+  "collection.page.handle": "Permanent URI for this collection",
   "collection.page.license": "License",
   "collection.page.news": "News",
 
@@ -184,8 +185,10 @@
   "community.form.rights": "Copyright text (HTML)",
   "community.form.tableofcontents": "News (HTML)",
   "community.form.title": "Name",
+  "community.page.handle": "Permanent URI for this community",
   "community.page.license": "License",
   "community.page.news": "News",
+  "community.all-lists.head": "Subcommunities and Collections",
   "community.sub-collection-list.head": "Collections of this Community",
   "community.sub-community-list.head": "Communities of this Community",
 

src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.spec.ts

@@ -19,6 +19,7 @@ import { ENV_CONFIG, GLOBAL_CONFIG } from '../../../config';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { toRemoteData } from '../+browse-by-metadata-page/browse-by-metadata-page.component.spec';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
+import { VarDirective } from '../../shared/utils/var.directive';
 
 describe('BrowseByDatePageComponent', () => {
   let comp: BrowseByDatePageComponent;
@@ -69,7 +70,7 @@ describe('BrowseByDatePageComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
-      declarations: [BrowseByDatePageComponent, EnumKeysPipe],
+      declarations: [BrowseByDatePageComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: GLOBAL_CONFIG, useValue: ENV_CONFIG },
         { provide: ActivatedRoute, useValue: activatedRouteStub },

src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -1,7 +1,31 @@
 <div class="container">
-  <div class="browse-by-metadata w-100">
+    <ng-container *ngVar="(parent$ | async) as parent">
+    <ng-container *ngIf="parent?.payload as parentContext">
+    <header class="comcol-header border-bottom mb-4 pb-4">
+        <!-- Parent Name -->
+        <ds-comcol-page-header [name]="parentContext.name">
+        </ds-comcol-page-header>
+        <!-- Handle -->
+        <ds-comcol-page-handle
+            [content]="parentContext.handle"
+            [title]="parentContext.type+'.page.handle'" >
+        </ds-comcol-page-handle>
+        <!-- Introductory text -->
+        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+        <!-- News -->
+        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
+        </ds-comcol-page-content>
+      </header>
+      <!-- Browse-By Links -->
+      <ds-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-comcol-page-browse-by>
+      </ng-container></ng-container>
+
+    <section class="comcol-page-browse-section">
+    <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
       title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      parentname="{{(parent$ | async)?.payload?.name || ''}}"
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="paginationConfig"
       [sortConfig]="sortConfig"
@@ -15,4 +39,17 @@
     </ds-browse-by>
     <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
   </div>
+  </section>
+  <ng-container *ngVar="(parent$ | async) as parent">
+    <ng-container *ngIf="parent?.payload as parentContext">
+  <footer *ngIf="parentContext.copyrightText" class="border-top my-5 pt-4">
+    <div >
+
+      <!-- Copyright -->
+      <ds-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+    </div>
+  </footer>
+</ng-container>
+</ng-container>
 </div>

src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.spec.ts

@@ -23,6 +23,7 @@ import { MockRouter } from '../../shared/mocks/mock-router';
 import { ResourceType } from '../../core/shared/resource-type';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
 import { BrowseEntry } from '../../core/shared/browse-entry.model';
+import { VarDirective } from '../../shared/utils/var.directive';
 
 describe('BrowseByMetadataPageComponent', () => {
   let comp: BrowseByMetadataPageComponent;
@@ -86,7 +87,7 @@ describe('BrowseByMetadataPageComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
-      declarations: [BrowseByMetadataPageComponent, EnumKeysPipe],
+      declarations: [BrowseByMetadataPageComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },

src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.spec.ts

@@ -18,6 +18,7 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { BrowseService } from '../../core/browse/browse.service';
 import { MockRouter } from '../../shared/mocks/mock-router';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
+import { VarDirective } from '../../shared/utils/var.directive';
 
 describe('BrowseByTitlePageComponent', () => {
   let comp: BrowseByTitlePageComponent;
@@ -64,7 +65,7 @@ describe('BrowseByTitlePageComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
-      declarations: [BrowseByTitlePageComponent, EnumKeysPipe],
+      declarations: [BrowseByTitlePageComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },

src/app/+collection-page/collection-page.component.html

@@ -3,18 +3,22 @@
          *ngVar="(collectionRD$ | async) as collectionRD">
         <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
             <div *ngIf="collectionRD?.payload as collection">
+                <header class="comcol-header border-bottom mb-4 pb-4">
+                    <!-- Collection logo -->
+                    <ds-comcol-page-logo *ngIf="logoRD$"
+                        [logo]="(logoRD$ | async)?.payload" [alternateText]="'Collection Logo'">
+                        [alternateText]="'Collection Logo'">
+                    </ds-comcol-page-logo>
                 <!-- Collection Name -->
                 <ds-comcol-page-header
                         [name]="collection.name">
                 </ds-comcol-page-header>
-                <!-- Browse-By Links -->
-                <ds-comcol-page-browse-by [id]="collection.id"></ds-comcol-page-browse-by>
-                <!-- Collection logo -->
-                <ds-comcol-page-logo *ngIf="logoRD$"
-                                     [logo]="(logoRD$ | async)?.payload"
-                                     [alternateText]="'Collection Logo'">
-                </ds-comcol-page-logo>
-                <!-- Introductionary text -->
+                 <!-- Handle -->
+                <ds-comcol-page-handle
+                        [content]="collection.handle"
+                        [title]="'collection.page.handle'" >
+                </ds-comcol-page-handle>
+                <!-- Introductory text -->
                 <ds-comcol-page-content
                         [content]="collection.introductoryText"
                         [hasInnerHtml]="true">
@@ -23,23 +27,20 @@
                 <ds-comcol-page-content
                         [content]="collection.sidebarText"
                         [hasInnerHtml]="true"
-                        [title]="'community.page.news'">
+                        [title]="'collection.page.news'">
                 </ds-comcol-page-content>
-                <!-- Copyright -->
-                <ds-comcol-page-content
-                        [content]="collection.copyrightText"
-                        [hasInnerHtml]="true">
-                </ds-comcol-page-content>
-                <!-- Licence -->
-                <ds-comcol-page-content
-                        [content]="collection.dcLicense"
-                        [title]="'collection.page.license'">
-                </ds-comcol-page-content>
-            </div>
-            <br>
+
+              </header>
+              <section class="comcol-page-browse-section">
+              <!-- Browse-By Links -->
+              <ds-comcol-page-browse-by
+                      [id]="collection.id"
+                      [contentType]="collection.type">
+              </ds-comcol-page-browse-by>
+
             <ng-container *ngVar="(itemRD$ | async) as itemRD">
-                <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
-                    <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
+                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
+                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
                     <ds-viewable-collection
                             [config]="paginationConfig"
                             [sortConfig]="sortConfig"
@@ -56,10 +57,19 @@
                         {{'collection.page.browse.recent.empty' | translate}}
                 </div>
             </ng-container>
-        </div>
-        <ds-error *ngIf="collectionRD?.hasFailed"
-                  message="{{'error.collection' | translate}}"></ds-error>
-        <ds-loading *ngIf="collectionRD?.isLoading"
-                    message="{{'loading.collection' | translate}}"></ds-loading>
+            </section>
+            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
+          <!-- Copyright -->
+          <ds-comcol-page-content
+                      [content]="collection.copyrightText"
+                      [hasInnerHtml]="true">
+          </ds-comcol-page-content>
+        </footer>
+      </div>
     </div>
+        <ds-error *ngIf="collectionRD?.hasFailed"
+            message="{{'error.collection' | translate}}"></ds-error>
+        <ds-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-loading>
+  </div>
 </div>

src/app/+community-page/community-page.component.html

@@ -1,33 +1,38 @@
 <div class="container" *ngVar="(communityRD$ | async) as communityRD">
   <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="communityRD?.payload; let communityPayload">
-      <!-- Community name -->
-      <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
-      <!-- Browse-By Links -->
-      <ds-comcol-page-browse-by [id]="communityPayload.id"></ds-comcol-page-browse-by>
-      <!-- Community logo -->
-      <ds-comcol-page-logo *ngIf="logoRD$"
-                           [logo]="(logoRD$ | async)?.payload"
-                           [alternateText]="'Community Logo'">
-      </ds-comcol-page-logo>
-      <!-- Introductory text -->
-      <ds-comcol-page-content
-        [content]="communityPayload.introductoryText"
-        [hasInnerHtml]="true">
-      </ds-comcol-page-content>
-      <!-- News -->
-      <ds-comcol-page-content
-        [content]="communityPayload.sidebarText"
-        [hasInnerHtml]="true"
-        [title]="'community.page.news'">
-      </ds-comcol-page-content>
-      <!-- Copyright -->
-      <ds-comcol-page-content
-        [content]="communityPayload.copyrightText"
-        [hasInnerHtml]="true">
-      </ds-comcol-page-content>
-      <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
-      <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
+      <header class="comcol-header border-bottom mb-4 pb-4">
+        <!-- Community logo -->
+        <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
+        </ds-comcol-page-logo>
+
+        <!-- Community name -->
+        <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
+        <!-- Handle -->
+        <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+        </ds-comcol-page-handle>
+        <!-- Introductory text -->
+        <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+        <!-- News -->
+        <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
+          [title]="'community.page.news'">
+        </ds-comcol-page-content>
+
+      </header>
+      <section class="comcol-page-browse-section">
+        <!-- Browse-By Links -->
+        <ds-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
+        </ds-comcol-page-browse-by>
+
+        <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
+        <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
+      </section>
+      <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
+        <!-- Copyright -->
+        <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+      </footer>
     </div>
   </div>
 

src/app/shared/browse-by/browse-by.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h2 class="w-100">{{title | translate}}</h2>
+  <h3 [ngClass]="{'sr-only': parentname }" >{{title | translate}}</h3>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
     <div *ngIf="!enableArrows">

src/app/shared/browse-by/browse-by.component.ts

@@ -26,6 +26,10 @@ export class BrowseByComponent implements OnInit {
    */
   @Input() title: string;
 
+  /**
+   * The parent name
+   */
+  @Input() parentname: string;
   /**
    * The list of objects to display
    */

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html

@@ -1,6 +1,24 @@
-<h3>{{'browse.comcol.head' | translate}}</h3>
-<ul>
-  <li *ngFor="let config of types">
-    <a [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}">{{'browse.comcol.by.' + config.id | translate}}</a>
-  </li>
-</ul>
+<h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
+<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
+  <div class="d-none d-sm-block">
+
+    <div class="list-group list-group-horizontal">
+      <a *ngFor="let option of allOptions"
+         class="list-group-item"
+         [routerLink]="option.routerLink"
+         [queryParams]="option.params"
+         routerLinkActive="active">{{ option.label | translate }}</a>
+    </div>
+  </div>
+
+  <div class="d-block d-sm-none">
+    <select name="browse-type"
+            class="form-control"
+            aria-label="Browse Community or Collection"
+            (ngModelChange)="onSelectChange($event)" [ngModel]="currentOptionId$ | async">
+      <option *ngFor="let option of allOptions"
+              [ngValue]="option.id"
+              [attr.selected]="(currentOptionId$ | async) === option.id ? 'selected' : null">{{ option.label | translate }}</option>
+    </select>
+  </div>
+</nav>

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts

@@ -1,6 +1,27 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input, NgZone,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { Subscription } from 'rxjs/internal/Subscription';
+import { filter, map, startWith, tap } from 'rxjs/operators';
+import { getCollectionPageRoute } from '../../+collection-page/collection-page-routing.module';
+import { getCommunityPageRoute } from '../../+community-page/community-page-routing.module';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { Router, ActivatedRoute, RouterModule, UrlSegment } from '@angular/router';
 import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
+import { hasValue } from '../empty.util';
+
+export interface ComColPageNavOption {
+  id: string;
+  label: string,
+  routerLink: string
+  params?: any;
+};
 
 /**
  * A component to display the "Browse By" section of a Community or Collection page
@@ -8,24 +29,63 @@ import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interf
  */
 @Component({
   selector: 'ds-comcol-page-browse-by',
-  templateUrl: './comcol-page-browse-by.component.html',
+  styleUrls: ['./comcol-page-browse-by.component.scss'],
+  templateUrl: './comcol-page-browse-by.component.html'
 })
 export class ComcolPageBrowseByComponent implements OnInit {
   /**
    * The ID of the Community or Collection
    */
   @Input() id: string;
-
+  @Input() contentType: string;
   /**
    * List of currently active browse configurations
    */
   types: BrowseByTypeConfig[];
 
-  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
+  allOptions: ComColPageNavOption[];
+
+  currentOptionId$: Observable<string>;
+
+  constructor(
+    @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+    private route: ActivatedRoute,
+    private router: Router) {
   }
 
   ngOnInit(): void {
-    this.types = this.config.browseBy.types;
+    this.allOptions = this.config.browseBy.types
+      .map((config: BrowseByTypeConfig) => ({
+        id: config.id,
+        label: `browse.comcol.by.${config.id}`,
+        routerLink: `/browse/${config.id}`,
+        params: { scope: this.id }
+      }));
+
+    if (this.contentType === 'collection') {
+      this.allOptions = [ {
+        id: this.id,
+        label: 'collection.page.browse.recent.head',
+        routerLink: getCollectionPageRoute(this.id)
+      }, ...this.allOptions ];
+    } else if (this.contentType === 'community') {
+      this.allOptions = [{
+          id: this.id,
+          label: 'community.all-lists.head',
+          routerLink: getCommunityPageRoute(this.id)
+        }, ...this.allOptions ];
+    }
+
+    this.currentOptionId$ = this.route.url.pipe(
+      filter((urlSegments: UrlSegment[]) => hasValue(urlSegments)),
+      map((urlSegments: UrlSegment[]) => urlSegments[urlSegments.length - 1].path)
+    );
   }
 
+  onSelectChange(newId: string) {
+    const selectedOption = this.allOptions
+      .find((option: ComColPageNavOption) => option.id === newId);
+
+    this.router.navigate([selectedOption.routerLink], { queryParams: selectedOption.params });
+  }
 }

src/app/shared/comcol-page-handle/comcol-page-handle.component.html

@@ -0,0 +1,4 @@
+<div *ngIf="content" class="content-with-optional-title mb-2">
+    <h2 class="d-inline-block h6" *ngIf="title">{{ title | translate }}</h2>
+    <div  class="d-inline-block "><a href="{{getHandle()}}">{{getHandle()}}</a></div>
+</div>

src/app/shared/comcol-page-handle/comcol-page-handle.component.scss

@@ -0,0 +1,5 @@
+div {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

src/app/shared/comcol-page-handle/comcol-page-handle.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, Inject, Injectable } from '@angular/core';
+import { GlobalConfig } from '../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../config';
+import { UIURLCombiner } from '../../core/url-combiner/ui-url-combiner';
+/**
+ * This component builds a URL from the value of "handle"
+ */
+
+@Component({
+  selector: 'ds-comcol-page-handle',
+  styleUrls: ['./comcol-page-handle.component.scss'],
+  templateUrl: './comcol-page-handle.component.html'
+})
+
+@Injectable()
+export class ComcolPageHandleComponent {
+
+  // Optional title
+  @Input() title: string;
+
+  // The value of "handle"
+  @Input() content: string;
+
+  constructor(@Inject(GLOBAL_CONFIG) private EnvConfig: GlobalConfig) {
+  }
+  public getHandle(): string {
+    return new UIURLCombiner(this.EnvConfig, '/handle/', this.content).toString();
+  }
+}

src/app/shared/shared.module.ts

@@ -30,6 +30,7 @@ import { AbstractListableElementComponent } from './object-collection/shared/obj
 import { ObjectGridComponent } from './object-grid/object-grid.component';
 import { ObjectCollectionComponent } from './object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
+import { ComcolPageHandleComponent } from './comcol-page-handle/comcol-page-handle.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
 import { ErrorComponent } from './error/error.component';
@@ -192,6 +193,7 @@ const COMPONENTS = [
   UserMenuComponent,
   ChipsComponent,
   ComcolPageContentComponent,
+  ComcolPageHandleComponent,
   ComcolPageHeaderComponent,
   ComcolPageLogoComponent,
   ComColFormComponent,