Clean up for new release (DSP-1338) (#184)

* correct cc icon

* css setting

* add citation links and routes to introduction sections

* fix indentation of list of References

* update text of landing page

* change systemNumber to Metadata in HAN catalog

* fix failing tests

* some more fix

* get rid of the buggy test

* fix typos

* add substitute tests

* fix test

src/app/bebb-route/bebb-route.component.spec.ts

@@ -90,13 +90,10 @@ describe('BebbRouteComponent', () => {
 
         expect(beolServiceSpy.searchForLetterFromBEBB).toHaveBeenCalledWith(lt);
 
-        expect(beolServiceSpy.routeByResourceType).toHaveBeenCalledWith('http://0.0.0.0:3333/ontology/0801/beol/v2#letter', 'letterIri');
-
         const dspServiceSpy = TestBed.inject(DspApiConnectionToken);
 
         expect(dspServiceSpy.v2.search.doExtendedSearch).toHaveBeenCalledWith('gravsearchQuery');
-
-        expect(beolServiceSpy.routeByResourceType).toHaveBeenCalledWith('http://0.0.0.0:3333/ontology/0801/beol/v2#letter', 'letterIri' );
+        expect(beolServiceSpy.routeByResourceType).toHaveBeenCalledTimes(1);
 
     });
 });

src/app/bebb-route/bebb-route.component.ts

@@ -36,11 +36,11 @@ export class BebbRouteComponent implements OnInit {
                     (resourceSeq: ReadResourceSequence) => {
 
                         if (resourceSeq.resources.length === 1) {
-
-                            const letterIri: string = resourceSeq.resources[0].id;
+                            const letter = resourceSeq.resources[0];
+                            const letterIri: string = letter.id;
 
                             // given the Iri of the letter, display the whole resource
-                            this._beolService.routeByResourceType(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#letter', letterIri);
+                            this._beolService.routeByResourceType(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#letter', letterIri, letter);
                         } else {
                             // letter not found
                             this.notFound = true;

src/app/directives/mathjax.directive.ts

@@ -260,7 +260,7 @@ export class MathJaxDirective implements OnChanges {
             // TODO: the value object should handle this and check for the existence of the given referred resource
             const referredRes = this._referredResources[referredResourceIri];
 
-            this._beol.routeByResourceType(referredRes.type, referredResourceIri);
+            this._beol.routeByResourceType(referredRes.type, referredResourceIri, referredRes);
 
             // preventDefault (propagation)
             return false;
@@ -275,7 +275,7 @@ export class MathJaxDirective implements OnChanges {
             // TODO: the value object should handle this and check for the existence of the given referred resource
             const referredResourceType = this._referredResources[referredResourceIri].type;
 
-            this._beol.routeByResourceType(referredResourceType, referredResourceIri);
+            this._beol.routeByResourceType(referredResourceType, referredResourceIri, this._referredResources[referredResourceIri]);
 
             // preventDefault (propagation)
             return false;

src/app/introduction/introduction.component.html

@@ -86,7 +86,27 @@
 
         <!-- Main content of the page -->
         <div class="main-content" *ngIf="!isLoading && props">
-
+            <section class="cite-link">
+                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
+                        [matMenuTriggerFor]="share">
+                    <mat-icon>share</mat-icon>
+                    <span class="desktop-only">Citation Link</span>
+                </button>
+                <mat-menu #share="matMenu" class="res-share-menu">
+                    <!-- citation link - ARK URL -->
+                    <div class="ark-url-label mat-body">
+                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
+                    </div>
+                    <div class="ark-url-input">
+                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
+                               [(ngModel)]="resource.versionArkUrl" />
+                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.versionArkUrl"
+                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
+                            <mat-icon class="icon-arkurl">copy</mat-icon>
+                        </button>
+                    </div>
+                </mat-menu>
+            </section>
             <section class="title center">
                 <h3 mat-card-subtitle>{{resource?.label}}</h3>
                 <h1 mat-card-title *ngFor="let title of props.title">{{title.strval}}</h1>

src/app/introduction/introduction.component.ts

@@ -11,6 +11,7 @@ import {
 import { AppInitService, DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
 import { Subscription } from 'rxjs';
 import { BeolService } from '../services/beol.service';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 declare let require: any;
 
@@ -60,12 +61,16 @@ export class IntroductionComponent implements OnInit, OnDestroy {
         'text': this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#hasText',
     };
 
+    message: string; // message to show in the snackbar to confirm the copy of the ARK URL
+    action: string; // label for the snackbar action
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _route: ActivatedRoute,
         private _beol: BeolService,
         private _appInitService: AppInitService,
-        public location: Location
+        public location: Location,
+        protected _snackBar: MatSnackBar
     ) {
     }
 
@@ -161,5 +166,18 @@ export class IntroductionComponent implements OnInit, OnDestroy {
     toggleGrandChildren(index: number) {
         this.curChildIndex = (index === this.curChildIndex ? undefined : index);
     }
-
+    /**
+     * Display message to confirm the copy of the citation link (ARK URL)
+     * @param message
+     * @param action
+     */
+    openARKURLSnackBar() {
+        this.message = 'Copied to clipboard!';
+        this.action = 'Citation Link';
+        this._snackBar.open(this.message, this.action, {
+            duration: 3000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top'
+        });
+    }
 }

src/app/landing-page/landing-page.component.html

@@ -11,10 +11,10 @@ <h1 mat-card-title>Bernoulli Euler Online</h1>
                 works and correspondence of members of Bernoulli dynasty and Leonhard Euler.
             </p>
             <p>
-                Currently, BEOL platform contains three
-                main editions: <em>Basler Edition der Bernoulli-Briefwechsel</em>, <em>Leonhard Euler's correspondence with
+                Currently, the BEOL platform contains three
+                main editions: <em>Basler Edition der Bernoulli-Briefwechsel (ongoing)</em>, <em>Leonhard Euler's correspondence with
                 Christian Goldbach (Leonhardi Euleri Opera Omnia IVA/IV)</em>, and a multi-layered interactive edition of Jacob Bernoulli's scientific notebook <em>Meditationes</em>.
-                This platform also contains the supplementary edition of Leonhard Euler's correspondence with the
+                The platform also contains the edition of Leonhard Euler's correspondence with the
                 Marquis de Condorcet and Turgot.
             </p>
             <p>
@@ -184,8 +184,8 @@ <h3 mat-card-subtitle>Feedback</h3>
             <br/>
             <h3 mat-card-subtitle>Impressum</h3>
             <p class="impressum">
-                <img src="assets/icons/beol/cc.xlarge.png" class="ccIcon">
-                The contents on our website are released under a Creative Commons Attribution-NonCommercial-NonDerivative 4.0 International (CC BY-NC-ND 4.0) licence.
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons Licence" class="ccIcon" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a>
+                The contents on our website are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
             </p>
         </section>
 

src/app/leoo-route/leoo-route.component.spec.ts

@@ -93,7 +93,7 @@ describe('LeooRouteComponent', () => {
 
         expect(dspConnectionSpy.v2.search.doExtendedSearch).toHaveBeenCalledWith('gravsearchQuery');
 
-        expect(beolServiceSpy.routeByResourceType).toHaveBeenCalledWith('http://0.0.0.0:3333/ontology/0801/beol/v2#letter', 'letterIri');
+        expect(beolServiceSpy.routeByResourceType).toHaveBeenCalledTimes(1);
 
     });
 });

src/app/leoo-route/leoo-route.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { KnoraApiConnection, ReadResourceSequence } from '@dasch-swiss/dsp-js';
 import { AppInitService, DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
 import { BeolService } from '../services/beol.service';
+import { ReadResource } from '@dasch-swiss/dsp-js/src/models/v2/resources/read/read-resource';
 
 @Component({
     selector: 'app-leoo-route',
@@ -35,11 +36,11 @@ export class LeooRouteComponent implements OnInit {
                     (resourceSeq: ReadResourceSequence) => {
 
                         if (resourceSeq.resources.length === 1) {
-
-                            const letterIri: string = resourceSeq.resources[0].id;
+                            const letterRes: ReadResource = resourceSeq.resources[0];
+                            const letterIri: string = letterRes.id;
 
                             // given the Iri of the letter, display the whole resource
-                            this._beolService.routeByResourceType(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#letter', letterIri);
+                            this._beolService.routeByResourceType(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#letter', letterIri, letterRes);
                         } else {
                             // letter not found
                             console.log(`letter with repertorium number ${this.repertoriumNumber} not found`);

src/app/resource/beol-resource.ts

@@ -286,7 +286,7 @@ export abstract class BeolResource implements OnInit, OnDestroy {
 
         const refResType = (linkVal.linkedResource !== undefined ? linkVal.linkedResource.type : '');
 
-        this._beolService.routeByResourceType(refResType, linkVal.linkedResourceIri);
+        this._beolService.routeByResourceType(refResType, linkVal.linkedResourceIri, linkVal.linkedResource);
     }
 
     ngOnInit() {

src/app/resource/biblio-items/biblio-items.component.html

@@ -269,7 +269,7 @@ <h4 class="subheading-2">{{props?.externalLink[0].propertyLabel}}</h4>
                     <mat-list *ngFor="let incomingLinkSourceRes of resource.readResource.incomingReferences">
                         <mat-list-item>
                             <span class="link"
-                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type)">{{incomingLinkSourceRes.label}}</span>
+                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type, incomingLinkSourceRes)">{{incomingLinkSourceRes.label}}</span>
                         </mat-list-item>
                     </mat-list>
                 </div>

src/app/resource/biblio-items/biblio-items.component.ts

@@ -152,7 +152,7 @@ export class BiblioItemsComponent extends BeolResource {
         this.props = props;
     }
 
-    showIncomingRes(resIri, resType) {
-        this._beolService.routeByResourceType(resType, resIri);
+    showIncomingRes(resIri, resType, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 }

src/app/resource/leibniz-letter/leibniz-letter.component.html

@@ -163,7 +163,7 @@ <h4 class="subheading-2">
                     <mat-list *ngFor="let incomingLinkSourceRes of resource.readResource.incomingReferences">
                         <mat-list-item>
                             <span class="link"
-                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type)">{{incomingLinkSourceRes.label}}</span>
+                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type, incomingLinkSourceRes)">{{incomingLinkSourceRes.label}}</span>
                         </mat-list-item>
                     </mat-list>
                 </div>

src/app/resource/leibniz-letter/leibniz-letter.component.ts

@@ -155,7 +155,7 @@ export class LeibnizLetterComponent extends BeolResource {
         const updatedBody = this.getLeibnizImages(html.body);
         this.letter = updatedBody;
     }
-    showIncomingRes(resIri, resType) {
-        this._beolService.routeByResourceType(resType, resIri);
+    showIncomingRes(resIri, resType, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 }

src/app/resource/letter/letter.component.html

@@ -91,7 +91,7 @@ <h4 class="subheading-2">
                 </div>
 
                 <div *ngIf="props?.sysnum[0]">
-                    <h4 class="subheading-2">{{props?.sysnum[0].propertyLabel}}</h4>
+                    <h4 class="subheading-2">Metadata in the HAN catalog</h4>
 
                     <p class="margin-left" appHanCatalogue [sysnum]="props?.sysnum[0].strval"></p>
                 </div>
@@ -214,7 +214,7 @@ <h4 class="subheading-2">{{props?.comment[0].propertyLabel}}</h4>
                 <mat-list *ngFor="let incomingLinkSourceRes of resource.readResource.incomingReferences">
                     <mat-list-item>
                         <span class="link"
-                            (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type)">{{incomingLinkSourceRes.label}}</span>
+                            (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type, incomingLinkSourceRes)">{{incomingLinkSourceRes.label}}</span>
                     </mat-list-item>
                 </mat-list>
             </div>

src/app/resource/letter/letter.component.ts

@@ -150,8 +150,8 @@ export class LetterComponent extends BeolResource {
 
     }
 
-    showIncomingRes(resIri, resType) {
-        this._beolService.routeByResourceType(resType, resIri);
+    showIncomingRes(resIri, resType, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 
     showEditorsRes(gnd) {
@@ -164,11 +164,11 @@ export class LetterComponent extends BeolResource {
             (resourceSeq: ReadResourceSequence) => {
 
                 if (resourceSeq.resources.length === 1) {
-
-                    const personIri: string = resourceSeq.resources[0].id;
+                    const personResource = resourceSeq.resources[0];
+                    const personIri: string = personResource.id;
 
                     // given the Iri of the letter, display the whole resource
-                    this._beolService.routeByResourceType(resType, personIri);
+                    this._beolService.routeByResourceType(resType, personIri, personResource);
                 } else {
                     // person not found
                     console.log(`editor with gnd number ${gnd} not found`);

src/app/resource/manuscript-entry/manuscript-entry.component.html

@@ -18,7 +18,7 @@ <h4 class="subheading-2">Transcriptions:</h4>
                     <p class="margin-left">
                         <mat-list>
                             <mat-list-item *ngFor="let trans of transcriptions">
-                                <a class="salsah-link" (click)="goToResource(trans.type, trans.id)">{{trans.label}}</a>
+                                <a class="salsah-link" (click)="goToResource(trans.type, trans.id, trans)">{{trans.label}}</a>
                             </mat-list-item>
                         </mat-list>
                     </p>

src/app/resource/manuscript-entry/manuscript-entry.component.ts

@@ -96,8 +96,8 @@ export class ManuscriptEntryComponent extends BeolResource {
 
     }
 
-    goToResource(resType: string, resIri: string) {
-        this._beolService.routeByResourceType(resType, resIri);
+    goToResource(resType: string, resIri: string, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 
 }

src/app/resource/newton-letter/newton-letter.component.html

@@ -146,7 +146,7 @@ <h4 class="subheading-2">
                     <mat-list *ngFor="let incomingLinkSourceRes of resource.readResource.incomingReferences">
                         <mat-list-item>
                             <span class="link"
-                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type)">{{incomingLinkSourceRes.label}}</span>
+                                (click)="showIncomingRes(incomingLinkSourceRes.id, incomingLinkSourceRes.type, incomingLinkSourceRes)">{{incomingLinkSourceRes.label}}</span>
                         </mat-list-item>
                     </mat-list>
                 </div>

src/app/resource/newton-letter/newton-letter.component.ts

@@ -148,7 +148,7 @@ export class NewtonLetterComponent extends BeolResource {
         return element;
     }
 
-    showIncomingRes(resIri, resType) {
-        this._beolService.routeByResourceType(resType, resIri);
+    showIncomingRes(resIri, resType, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 }

src/app/resource/page/page.component.html

@@ -52,8 +52,8 @@ <h4 class="subheading-2">{{props?.seqnum[0].propertyLabel}}: </h4>
 
         <div style="text-align: center;">
             <a *ngIf="previousPage" class="salsah-link"
-                (click)="goToResource(previousPage?.type, previousPage?.id)">{{previousPage.label}} </a>
-            <a *ngIf="nextPage" class="salsah-link" (click)="goToResource(nextPage?.type, nextPage?.id)">
+                (click)="goToResource(previousPage?.type, previousPage?.id, previousPage)">{{previousPage.label}} </a>
+            <a *ngIf="nextPage" class="salsah-link" (click)="goToResource(nextPage?.type, nextPage?.id, nextPage)">
                 {{nextPage.label}}</a>
         </div>
 
@@ -74,7 +74,7 @@ <h3>{{transcriptionBelongsToRegion.linkedResource.label}}</h3>
             <br>
             <div *ngIf="manuscriptEntry !== undefined && manuscriptEntry?.linkedResource !== undefined">
                 Transcription of <a class="salsah-link"
-                    (click)="goToResource(manuscriptEntry.linkedResource.type, manuscriptEntry.linkedResource.id)">{{manuscriptEntry.linkedResource.label}}</a>
+                    (click)="goToResource(manuscriptEntry.linkedResource.type, manuscriptEntry.linkedResource.id, manuscriptEntry.linkedResource)">{{manuscriptEntry.linkedResource.label}}</a>
             </div>
         </div>
 
@@ -83,7 +83,7 @@ <h3>{{transcriptionBelongsToRegion.linkedResource.label}}</h3>
             <div>Transcriptions for this manuscript entry:</div>
             <mat-list>
                 <mat-list-item *ngFor="let entry of transcriptionsForManuscriptEntry">
-                    <a class="salsah-link" (click)="goToResource(entry.type, entry.id)">{{entry.label}}</a>
+                    <a class="salsah-link" (click)="goToResource(entry.type, entry.id, entry)">{{entry.label}}</a>
                 </mat-list-item>
             </mat-list>
         </div>

src/app/resource/page/page.component.ts

@@ -169,7 +169,7 @@ export class PageComponent extends BeolResource {
         this._beolService.routeToPageWithActiveRegion(regionIri);
     }
 
-    goToResource(resType: string, resIri: string) {
-        this._beolService.routeByResourceType(resType, resIri);
+    goToResource(resType: string, resIri: string, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
     }
 }