Dsp 945 resource viewer (#330)

* DSP-945-update resource viewer * enhancement (results-viewer) In worksace, display search results and resource viewer in side-by-side column Co-authored-by: André Kilchenmann <[email protected]>
dasch-swiss · Nov 25, 2020 · a66f848 · a66f848
1 parent a57b603
commit a66f848
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
         "@dasch-swiss/dsp-ui": "1.0.0-rc.11",
         "@ngx-translate/core": "^13.0.0",
         "@ngx-translate/http-loader": "^6.0.0",
+        "angular-split": "^4.0.0",
         "ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build",
         "core-js": "^3.6.5",
         "d3": "^5.15.1",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -79,6 +79,8 @@ import { SelectResourceClassComponent } from './workspace/resource/resource-inst
 import { SelectPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/select-properties.component';
 import { SwitchPropertiesComponent } from './workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component';
 
+import { AngularSplitModule } from 'angular-split';
+
 // translate: AoT requires an exported function for factories
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json')
@@ -162,7 +164,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
                 useFactory: HttpLoaderFactory,
                 deps: [HttpClient]
             }
-        })
+        }),
+        AngularSplitModule.forRoot()
     ],
     providers: [
         {

diff --git a/src/app/workspace/results/results.component.html b/src/app/workspace/results/results.component.html
@@ -1,3 +1,10 @@
-<div class="content large middle" *ngIf="searchParams">
-    <dsp-list-view [search]="searchParams" (resourceSelected)="openResource($event)"></dsp-list-view>
+<div class="content" *ngIf="searchParams" style="margin-top: 20px; height: 100vh;">
+    <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>
+        </as-split-area>
+    </as-split>
 </div>
diff --git a/src/app/workspace/results/results.component.scss b/src/app/workspace/results/results.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/workspace/results/results.component.ts b/src/app/workspace/results/results.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { SearchParams } from '@dasch-swiss/dsp-ui';
+import { ReadProject } from '@dasch-swiss/dsp-js';
 
 @Component({
     selector: 'app-results',
@@ -13,6 +14,8 @@ export class ResultsComponent implements OnInit {
 
     resIri: string;
 
+    resourceIri: string;
+
     constructor(
         private _route: ActivatedRoute,
         private _router: Router
@@ -37,6 +40,11 @@ export class ResultsComponent implements OnInit {
     }
 
     openResource(id: string) {
-        this._router.navigate(['/resource/' + encodeURIComponent(id)]);
+        this.resourceIri = id;
+    }
+
+    // open project in new tab
+    openProject(project: ReadProject){
+        window.open('/project/' + project.shortcode, "_blank");
     }
 }