feature (resource): add previous button

src/app/resource/artikel/artikel.component.html

@@ -1 +1,6 @@
+<button mat-stroked-button class="previousBtn" (click)="location.back()">
+    <mat-icon>arrow_back</mat-icon>
+    Previous
+</button>
+
 <kui-search-results [searchMode]="'extended'" [searchQuery]="gravsearch"></kui-search-results>

src/app/resource/artikel/artikel.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MlsService } from '../../services/mls.service';
 
@@ -14,7 +15,8 @@ export class ArtikelComponent implements OnInit {
   constructor(
     private _router: Router,
     private _route: ActivatedRoute,
-    private _mls: MlsService
+    private _mls: MlsService,
+    public location: Location
   ) { }
 
   ngOnInit() {

src/app/resource/lemmata/lemmata.component.html

@@ -1 +1,6 @@
+<button mat-stroked-button class="previousBtn" (click)="location.back()">
+    <mat-icon>arrow_back</mat-icon>
+    Previous
+</button>
+
 <kui-search-results [searchMode]="'extended'" [searchQuery]="gravsearch"></kui-search-results>

src/app/resource/lemmata/lemmata.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MlsService } from '../../services/mls.service';
 
@@ -14,7 +15,8 @@ export class LemmataComponent implements OnInit {
   constructor(
     private _router: Router,
     private _route: ActivatedRoute,
-    private _mls: MlsService
+    private _mls: MlsService,
+    public location: Location
   ) { }
 
   ngOnInit() {

src/app/resource/lexika/lexika.component.html

@@ -1 +1,6 @@
+<button mat-stroked-button class="previousBtn" (click)="location.back()">
+    <mat-icon>arrow_back</mat-icon>
+    Previous
+</button>
+
 <kui-search-results [searchMode]="'extended'" [searchQuery]="gravsearch"></kui-search-results>

src/app/resource/lexika/lexika.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MlsService } from '../../services/mls.service';
 
@@ -14,7 +15,8 @@ export class LexikaComponent implements OnInit {
   constructor(
     private _router: Router,
     private _route: ActivatedRoute,
-    private _mls: MlsService
+    private _mls: MlsService,
+    public location: Location
   ) { }
 
   ngOnInit() {

src/app/resource/resource.component.html

@@ -1,10 +1,17 @@
-<kui-progress-indicator *ngIf="loading"></kui-progress-indicator>
+<div class="resource-content">
+    <kui-progress-indicator *ngIf="loading"></kui-progress-indicator>
 
-<h2>Metadata for resource {{ resource?.label}}</h2>
-<h3>type: {{ontologyInfo?.getLabelForResourceClass(resource?.type)}}</h3>
+    <button mat-stroked-button class="previousBtn" (click)="location.back()">
+        <mat-icon>arrow_back</mat-icon>
+        Previous
+    </button>
 
-<div class="resource-content">
+    <h2>Metadata for resource {{ resource?.label}}</h2>
+    <h3>type: {{ontologyInfo?.getLabelForResourceClass(resource?.type)}}</h3>
+
+    <!-- Resource metadata -->
     <div *ngFor="let prop of resource?.properties | kuiKey">
+
         <mat-list>
             <span>{{ontologyInfo?.getLabelForProperty(prop.key)}}</span>
             <mat-list-item *ngFor="let val of prop.value">
@@ -27,18 +34,21 @@ <h3>type: {{ontologyInfo?.getLabelForResourceClass(resource?.type)}}</h3>
                 </span>
             </mat-list-item>
         </mat-list>
+
+        <!-- Incoming links -->
+        <section>
+            <div *ngIf="resource?.incomingLinks?.length > 0" class="incoming-link-position">
+                <p>
+                    <strong>Referenced in:</strong>
+                </p>
+                <mat-list *ngFor="let incomingLinkSourceRes of resource.incomingLinks">
+                    <mat-list-item>
+                        <span class="link" (click)="showIncomingRes(incomingLinkSourceRes.id)">{{incomingLinkSourceRes.label}}</span>
+                    </mat-list-item>
+                </mat-list>
+            </div>
+        </section>
+
     </div>
 
-    <section>
-        <div *ngIf="resource?.incomingLinks?.length > 0" class="incoming-link-position">
-            <p>
-                <strong>Referenced in:</strong>
-            </p>
-            <mat-list *ngFor="let incomingLinkSourceRes of resource.incomingLinks">
-                <mat-list-item>
-                    <span class="link" (click)="showIncomingRes(incomingLinkSourceRes.id)">{{incomingLinkSourceRes.label}}</span>
-                </mat-list-item>
-            </mat-list>
-        </div>
-    </section>
 </div>

src/app/resource/resource.component.scss

@@ -1,4 +1 @@
-.resource-content {
-    margin-top: 48px;
-    margin-left: 48px;
-}
+

src/app/resource/resource.component.ts

@@ -3,6 +3,7 @@ import { ReadResourcesSequence, OntologyInformation, KnoraConstants, ResourceSer
 import { ActivatedRoute, Router, Params, ParamMap } from '@angular/router';
 import { MlsService } from '../services/mls.service';
 import { Subscription } from 'rxjs';
+import { Location } from '@angular/common';
 
 declare let require: any;
 const jsonld = require('jsonld');
@@ -27,7 +28,8 @@ export class ResourceComponent implements OnInit, OnDestroy {
         protected _resourceService: ResourceService,
         protected _incomingService: IncomingService,
         private _cacheService: OntologyCacheService,
-        private _mlsService: MlsService
+        private _mlsService: MlsService,
+        public location: Location
     ) {
         const routeParams = this._route.snapshot.params;
         this.iri = routeParams.id;

src/styles.scss

@@ -39,3 +39,9 @@
 .link {
   cursor: pointer;
 }
+
+.previousBtn {
+  color: #ffab40 !important;
+  margin: 0 auto 24px 0 !important;
+  justify-content: center;
+}