component for location res, linking locations, adding number of manus…

…cript

src/app/app.module.ts

@@ -68,6 +68,7 @@ import { PageTranscriptionComponent } from './resource/page-transcription/page-t
 import { ArkUrlDialogComponent } from './dialog/ark-url-dialog.component';
 import { ReisbuechleinUriPipe } from './pipes/reisbuechlein-uri.pipe';
 import { OnlyTranscriptionComponent } from './resource/page-transcription/only-transcription/only-transcription.component';
+import { LocationComponent } from './resource/location/location.component';
 
 @NgModule({
     declarations: [
@@ -109,7 +110,8 @@ import { OnlyTranscriptionComponent } from './resource/page-transcription/only-t
         PageTranscriptionComponent,
         ArkUrlDialogComponent,
         ReisbuechleinUriPipe,
-        OnlyTranscriptionComponent
+        OnlyTranscriptionComponent,
+        LocationComponent
     ],
     imports: [
         AppRouting,

src/app/app.routing.ts

@@ -25,6 +25,7 @@ import { CommentComponent } from './resource/comment/comment.component';
 import { BiographyComponent } from './biography/biography.component';
 import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
 import { PageTranscriptionComponent } from './resource/page-transcription/page-transcription.component';
+import {LocationComponent} from './resource/location/location.component';
 
 
 const appRoutes: Routes = [
@@ -52,6 +53,10 @@ const appRoutes: Routes = [
         path: 'resource/:id',
         component: ResourceComponent
     },
+    {
+        path: 'location/:id',
+        component: LocationComponent
+    },
     {
         path: 'simpleResource/:id',
         component: SimpleResourceComponent

src/app/resource/location/location.component.html

@@ -0,0 +1,32 @@
+<div class="container">
+    <menu>
+        <li>
+            <button mat-stroked-button class="previousBtn" (click)="location.back()">
+                <mat-icon>arrow_back</mat-icon>Previous
+            </button>
+        </li>
+        <li>
+            <button mat-stroked-button class="share-res" (click)="openDialog(resource.readResource.versionArkUrl)">
+                <mat-icon>share</mat-icon>Citation Link
+            </button>
+        </li>
+    </menu>
+
+    <main>
+        <h1 mat-card-subtitle>{{resource?.readResource.resourceClassLabel}}</h1>
+        <h2>{{resource?.readResource.label}}</h2>
+
+        <section mat-line *ngFor="let prop of resource?.readResource.properties | keyvalue">
+            <h3>{{prop.value[0].propertyLabel}}</h3>
+            <ul>
+                <li *ngFor="let val of prop.value">
+                    <ng-container *ngIf="val.type === dspConstants.GeonameValue">{{val.strval}}</ng-container>
+                    <ng-container *ngIf="val.type === dspConstants.TextValue">{{val.strval}}</ng-container>
+                    <ng-container *ngIf="val.type === dspConstants.UriValue">
+                        <a [href]="val.strval">{{val.strval}}</a>
+                    </ng-container>
+                </li>
+            </ul>
+        </section>
+    </main>
+</div>

src/app/resource/location/location.component.scss

@@ -0,0 +1,47 @@
+@import "src/app/dsp-ui-lib/style/responsive";
+
+.container {
+  display: flex;
+  flex-direction: column;
+
+  menu {
+    list-style: none;
+    margin-inline-start: 2rem;
+    margin-inline-end: 2rem;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .previousBtn {
+      margin-inline-start: 0!important;
+    }
+  }
+
+  main {
+    margin-inline-start: 14rem;
+    margin-inline-end: 14rem;
+    max-width: 1000px;
+    align-content: center;
+  }
+}
+
+@media(max-width: map-get($grid-breakpoints, tablet)) {
+  .container {
+    main {
+      margin-inline-start: 6rem;
+      margin-inline-end: 6rem;
+    }
+  }
+}
+
+@media(max-width: map-get($grid-breakpoints, phone)) {
+  .container {
+    main {
+      margin-inline-start: 2rem;
+      margin-inline-end: 2rem;
+    }
+  }
+}

src/app/resource/location/location.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LocationComponent } from './location.component';
+
+describe('LocationComponent', () => {
+  let component: LocationComponent;
+  let fixture: ComponentFixture<LocationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LocationComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/resource/location/location.component.ts

@@ -0,0 +1,66 @@
+import {Component, Inject} from '@angular/core';
+import {BeolCompoundResource, BeolResource} from '../beol-resource';
+import {Constants, KnoraApiConnection, ResourceClassAndPropertyDefinitions} from '@dasch-swiss/dsp-js';
+import {Subscription} from 'rxjs';
+import {AppInitService, DspApiConnectionToken} from '../../dsp-ui-lib/core';
+import {ActivatedRoute} from '@angular/router';
+import {IncomingService} from '../../services/incoming.service';
+import {BeolService} from '../../services/beol.service';
+import {Location} from '@angular/common';
+import {MatDialog} from '@angular/material/dialog';
+import {ArkUrlDialogComponent} from '../../dialog/ark-url-dialog.component';
+
+@Component({
+  selector: 'app-location',
+  templateUrl: './location.component.html',
+  styleUrls: ['./location.component.scss']
+})
+export class LocationComponent extends BeolResource {
+
+    iri: string;
+    resource: BeolCompoundResource;
+    ontologyInfo: ResourceClassAndPropertyDefinitions;
+    incomingStillImageRepresentationCurrentOffset: number; // last offset requested for `this.resource.incomingStillImageRepresentations`
+    isLoading = true;
+    errorMessage: any;
+    dspConstants = Constants;
+    navigationSubscription: Subscription;
+
+    propIris;
+
+    constructor(
+        @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
+        private _appInitService: AppInitService,
+        protected _route: ActivatedRoute,
+        protected _incomingService: IncomingService,
+        protected _beolService: BeolService,
+        public location: Location,
+        public dialog: MatDialog
+    ) {
+        super(_dspApiConnection, _route, _incomingService, _beolService);
+    }
+
+    initProps() {
+    }
+
+    /**
+     * Display incoming links as clickable links
+     *
+     * @param resIri
+     * @param resType
+     * @param res
+     */
+    showIncomingRes(resIri, resType, res) {
+        this._beolService.routeByResourceType(resType, resIri, res);
+    }
+
+    openDialog(arkURL: string) {
+        this.dialog.open(ArkUrlDialogComponent, {
+            hasBackdrop: true,
+            width: '600px',
+            data: {
+                arkURL: arkURL
+            }
+        });
+    }
+}

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

@@ -50,10 +50,10 @@ <h4 class="subheading-2">{{props?.manuscriptEntryOf[0].propertyLabel}}</h4>
                         [propIri]="props?.manuscriptEntryOf[0].property" (referredResourceClicked)="resLinkClicked($event)" [mode]="'read'"></dsp-link-value>
     </section>
 
-    <!--<section *ngIf="props?.seqnum[0]">
-        <h4 class="subheading-2">{{ontologyInfo?.getLabelForProperty(props?.seqnum[0].propIri)}}</h4>
-        <kui-integer-value [valueObject]="props?.seqnum[0]"></kui-integer-value>
-    </section>-->
+    <section *ngIf="props?.seqnum[0]">
+        <h4 class="subheading-2">Manuscript number</h4>
+        <p>{{props.seqnum[0].int}}</p>
+    </section>
 
     <ng-container *ngIf="isPartOfReisbuechlein">
         <section *ngIf="pages$ | async as page" class="transcription-btn">
@@ -70,13 +70,20 @@ <h4>Journey</h4>
                         Table 1: Information about the journey
                     </caption>
                     <thead>
-                    <tr>
-                        <th *ngFor="let headerItem of journey.head.vars">{{headerItem}}</th>
-                    </tr>
+                        <tr>
+                            <th *ngFor="let headerItem of journey.head.vars">{{headerItem}}</th>
+                        </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let dataSet of journey.results.bindings">
-                            <td *ngFor="let hItem of journey.head.vars">{{dataSet[hItem] | reisbuechleinURI}}</td>
+                            <td *ngFor="let hItem of journey.head.vars">
+                                <ng-container *ngIf="dataSet[hItem].uri; else notIRI">
+                                    <a class="salsah-link" (click)="goToLocation(dataSet[hItem].uri)">{{dataSet[hItem].value}}</a>
+                                </ng-container>
+                                <ng-template #notIRI>
+                                    {{dataSet[hItem].value}}
+                                </ng-template>
+                            </td>
                         </tr>
                     </tbody>
                 </table>
@@ -91,13 +98,20 @@ <h4>Stages</h4>
                         Table 2: Stages of the journey
                     </caption>
                     <thead>
-                    <tr>
-                        <th *ngFor="let headerItem of stages.head.vars">{{headerItem}}</th>
-                    </tr>
+                        <tr>
+                            <th *ngFor="let headerItem of stages.head.vars">{{headerItem}}</th>
+                        </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let dataSet of stages.results.bindings">
-                            <td *ngFor="let hItem of stages.head.vars">{{dataSet[hItem] | reisbuechleinURI}}</td>
+                            <td *ngFor="let hItem of stages.head.vars">
+                                <ng-container *ngIf="dataSet[hItem]?.uri; else notIRI">
+                                    <a class="salsah-link" (click)="goToLocation(dataSet[hItem].uri)">{{dataSet[hItem].value}}</a>
+                                </ng-container>
+                                <ng-template #notIRI>
+                                    {{dataSet[hItem] | reisbuechleinURI}}
+                                </ng-template>
+                            </td>
                         </tr>
                     </tbody>
                 </table>

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

@@ -13,12 +13,13 @@ import {
     ResourceClassAndPropertyDefinitions
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken, AppInitService } from '../../dsp-ui-lib/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription} from 'rxjs';
 import { IncomingService } from 'src/app/services/incoming.service';
-import { BeolService } from '../../services/beol.service';
+import { BeolService, DataGraphDB} from '../../services/beol.service';
 import { BeolCompoundResource, BeolResource, PropertyValues, PropIriToNameMapping } from '../beol-resource';
 import { ArkUrlDialogComponent } from '../../dialog/ark-url-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
+import { map } from 'rxjs/operators';
 
 class ManuscriptEntryProps implements PropertyValues {
 
@@ -117,12 +118,41 @@ export class ManuscriptEntryComponent extends BeolResource {
         this.pages$ = this._dspApiConnection.v2.search.doExtendedSearch(gravsearch);
     }
 
+    private addURI(data: DataGraphDB) {
+        const headerWithIRI = data.head.vars.filter((item: string) => item.endsWith("Iri"));
+        data.head.vars = data.head.vars.filter((item: string) => !item.endsWith("Iri"));
+
+        for(let i = 0; i < data.results.bindings.length; i++) {
+
+            const keys = Object.keys(data.results.bindings[i]);
+            keys.map(key => {
+                if (headerWithIRI.find(header => header === key)) {
+                    const uri = data.results.bindings[i][key].value
+                    data.results.bindings[i][key.split('Iri')[0]]['uri'] = uri;
+                    delete data.results.bindings[i][key];
+                }
+                return key;
+            })
+        }
+        return data;
+    }
+
     private getJourney() {
-        this.journey$ = this._beolService.getJourney(this.iri);
+        this.journey$ = this._beolService.getJourney(this.iri)
+            .pipe(
+                map((data: DataGraphDB) => this.addURI(data))
+            );
     }
 
     private getStages() {
-        this.stages$ = this._beolService.getStages(this.iri);
+        this.stages$ = this._beolService.getStages(this.iri)
+            .pipe(
+                map((data: DataGraphDB) => this.addURI(data)),
+            );
+    }
+
+    goToLocation(resIri) {
+        this.goToResource(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#Location', resIri, undefined);
     }
 
     goToResource(resType: string, resIri: string, res) {