DSP-1110 Improve resource viewer (#336)

* style(workspace): Fix general resource viewer style * style(workspace): Clean up style, code and bug fixes
dasch-swiss · Nov 25, 2020 · f070d4d · f070d4d
1 parent 5cca7dc
commit f070d4d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 31 deletions.
diff --git a/src/app/workspace/resource/resource.component.html b/src/app/workspace/resource/resource.component.html
@@ -1,7 +1,3 @@
-<button mat-stroked-button class="previousBtn" (click)="goBack()">
-    <mat-icon>arrow_back</mat-icon>
-    Back
-</button>
 <div class="content large middle">
-    <dsp-resource-view [iri]="resourceIri" (openProject)="openProject($event)"></dsp-resource-view>
+    <dsp-resource-view [iri]="resourceIri" (openProject)="openProject($event)" (referredResourceClicked)="openResource($event)" ></dsp-resource-view>
 </div>
diff --git a/src/app/workspace/resource/resource.component.ts b/src/app/workspace/resource/resource.component.ts
@@ -1,5 +1,6 @@
 import { Location } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import {
     ActivatedRoute,
     NavigationEnd,
@@ -8,17 +9,17 @@ import {
     Params,
     Router
 } from '@angular/router';
-import { ReadProject } from '@dasch-swiss/dsp-js';
+import { ReadLinkValue, ReadProject } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-resource',
     templateUrl: './resource.component.html',
     styleUrls: ['./resource.component.scss']
 })
-export class ResourceComponent implements OnInit, OnDestroy {
+export class ResourceComponent implements OnDestroy {
 
-    resourceIri: string;
+    @Input() resourceIri: string;
 
     refresh: boolean;
 
@@ -27,14 +28,19 @@ export class ResourceComponent implements OnInit, OnDestroy {
     constructor(
         private _route: ActivatedRoute,
         private _router: Router,
+        private _titleService: Title,
         private _location: Location) {
 
-        this._route.paramMap.subscribe((params: Params) => {
-            this.resourceIri = decodeURIComponent(params.get('id'));
-        });
+        if (!this.resourceIri) {
+            this._route.paramMap.subscribe((params: Params) => {
+                this.resourceIri = decodeURIComponent(params.get('id'));
+            });
+        }
 
         this._router.events.subscribe((event) => {
 
+            this._titleService.setTitle('Resource view');
+
             if (event instanceof NavigationStart) {
                 // show loading indicator
                 // console.log('NavigationStart', this.resourceIri);
@@ -53,18 +59,8 @@ export class ResourceComponent implements OnInit, OnDestroy {
                 // present error to user
                 console.error(event.error);
             }
-        });
-    }
 
-    ngOnInit() {
-        /*
-        this.navigationSubscription = this._route.paramMap.subscribe((params: ParamMap) => {
-          this.refresh = true;
-          // this.getResource(params.get('id'));
-          this.refresh = false;
         });
-        */
-
     }
 
     ngOnDestroy() {
@@ -81,4 +77,8 @@ export class ResourceComponent implements OnInit, OnDestroy {
     openProject(project: ReadProject){
         window.open('/project/' + project.shortcode, "_blank");
     }
+
+    openResource(linkValue: ReadLinkValue) {
+        window.open('/resource/' + encodeURIComponent(linkValue.linkedResource.id), "_blank");
+    }
 }
diff --git a/src/app/workspace/results/results.component.html b/src/app/workspace/results/results.component.html
@@ -1,10 +1,11 @@
-<div class="content" *ngIf="searchParams" style="margin-top: 20px; height: 100vh;">
+<div class="content" *ngIf="searchParams">
     <as-split direction="horizontal">
         <as-split-area [size]="40">
             <dsp-list-view [search]="searchParams" (resourceSelected)="openResource($event)"></dsp-list-view>
         </as-split-area>
         <as-split-area [size]="60">
-            <dsp-resource-view [iri]="resourceIri" (openProject)="openProject($event)"></dsp-resource-view>
+            <!-- <dsp-resource-view [iri]="resourceIri" (openProject)="openProject($event)"></dsp-resource-view> -->
+            <app-resource [resourceIri]="resourceIri"></app-resource>
         </as-split-area>
     </as-split>
 </div>
diff --git a/src/app/workspace/results/results.component.scss b/src/app/workspace/results/results.component.scss
@@ -1 +1,5 @@
+@import "../../../assets/style/config";
 
+.content {
+  height: calc(100vh - #{$header-height});
+}
diff --git a/src/app/workspace/results/results.component.ts b/src/app/workspace/results/results.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Params } from '@angular/router';
 import { SearchParams } from '@dasch-swiss/dsp-ui';
-import { ReadProject } from '@dasch-swiss/dsp-js';
 
 @Component({
     selector: 'app-results',
@@ -18,7 +18,7 @@ export class ResultsComponent implements OnInit {
 
     constructor(
         private _route: ActivatedRoute,
-        private _router: Router
+        private _titleService: Title
     ) {
 
         this._route.paramMap.subscribe((params: Params) => {
@@ -34,6 +34,9 @@ export class ResultsComponent implements OnInit {
             }
 
         });
+
+        // set the page title
+        this._titleService.setTitle('Search results for ' + this.searchParams.mode + ' search');
     }
 
     ngOnInit() {
@@ -43,8 +46,4 @@ export class ResultsComponent implements OnInit {
         this.resourceIri = id;
     }
 
-    // open project in new tab
-    openProject(project: ReadProject){
-        window.open('/project/' + project.shortcode, "_blank");
-    }
 }