feat(project): proof of new project workflow concept (DEV-1001) (#765)

* feat(project): create ontology and lists

* refactor: delete console.logs

* fix(project): edit ontology and lists

* test(list): fix failing unit tests

* feat(beta): feature toggle on the project main page

* test(board): resolve failing test

* feat(instance): workflow when creating new res instance

* fix: resolve issues when closing dialog box

* feat(project): add settings component

* refactor: make eslint happy

* test: resolve failing tests

* fix(project): resolve issue in  old project settings

* fix(project): resolve issue in old project settings

* fix(project): resolve some permission issues

* fix(project): stop loading

* refactor(project): remove commented code

src/app/app-routing.module.ts

@@ -8,10 +8,13 @@ import { HelpComponent } from './main/help/help.component';
 import { MainComponent } from './main/main.component';
 import { StatusComponent } from './main/status/status.component';
 import { OntologyClassInstanceComponent } from './project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component';
+import { SettingsComponent } from './project/beta/settings/settings.component';
 // project
 import { BoardComponent } from './project/board/board.component';
 import { CollaborationComponent } from './project/collaboration/collaboration.component';
+import { ListInfoFormComponent } from './project/list/list-info-form/list-info-form.component';
 import { ListComponent } from './project/list/list.component';
+import { OntologyFormComponent } from './project/ontology/ontology-form/ontology-form.component';
 import { OntologyComponent } from './project/ontology/ontology.component';
 import { PermissionComponent } from './project/permission/permission.component';
 import { ProjectComponent } from './project/project.component';
@@ -111,6 +114,11 @@ const routes: Routes = [
                 path: 'info', // old path setup to avoid 404 when typing beta in front of project
                 redirectTo: ''
             },
+            {
+                path: 'add-ontology',
+                component: OntologyFormComponent,
+                canActivate: [AuthGuard]
+            },
             {
                 path: 'ontology',
                 component: HintComponent,
@@ -135,6 +143,11 @@ const routes: Routes = [
                 path: 'ontology/:onto/:class/:instance',
                 component: OntologyClassInstanceComponent,
             },
+            {
+                path: 'add-list',
+                component: ListInfoFormComponent,
+                canActivate: [AuthGuard]
+            },
             {
                 path: 'list',
                 component: HintComponent,
@@ -147,19 +160,23 @@ const routes: Routes = [
             },
             {
                 path: 'settings',
-                component: StatusComponent,
-                data: { status: 501, comment: 'Here you will be able to configure the project: e.g. setup collaboration and permissions.' },
-                canActivate: [AuthGuard]
-            },
-            {
-                path: 'settings/collaboration',
-                component: CollaborationComponent,
-                canActivate: [AuthGuard]
-            },
-            {
-                path: 'settings/permissions',
-                component: PermissionComponent,
-                canActivate: [AuthGuard]
+                component: SettingsComponent,
+                canActivate: [AuthGuard],
+                children: [
+                    {
+                        path: '',
+                        pathMatch: 'full',
+                        redirectTo: 'collaboration'
+                    },
+                    {
+                        path: 'collaboration',
+                        component: CollaborationComponent
+                    },
+                    {
+                        path: 'permissions',
+                        component: PermissionComponent
+                    },
+                ]
             },
             {
                 path: '**',

src/app/app.module.ts

@@ -164,6 +164,7 @@ import { TextComponent } from './workspace/resource/representation/text/text.com
 import { OntologyClassesComponent } from './project/beta/ontology-classes/ontology-classes.component';
 import { OntologyClassItemComponent } from './project/beta/ontology-classes/ontology-class-item/ontology-class-item.component';
 import { OntologyClassInstanceComponent } from './project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component';
+import { SettingsComponent } from './project/beta/settings/settings.component';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -314,7 +315,8 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         TextComponent,
         OntologyClassesComponent,
         OntologyClassItemComponent,
-        OntologyClassInstanceComponent
+        OntologyClassInstanceComponent,
+        SettingsComponent
     ],
     imports: [
         AngularSplitModule.forRoot(),

src/app/main/action/hint/hint.component.html

@@ -1,5 +1,5 @@
 <div class="hint" [innerHtml]="content"></div>
 
-<a mat-button [href]="documentation" target="_blank" color="primary" class="external-url">
+<a *ngIf="documentation" mat-button [href]="documentation" target="_blank" color="primary" class="external-url">
     Read more in the user guide<mat-icon class="suffix">launch</mat-icon>
 </a>

src/app/main/dialog/dialog.component.html

@@ -32,12 +32,12 @@
         <!-- TODO: create a mat dialog actions component with the following buttons: Cancel to reset and OK to confirm action -->
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Suspend
+                Yes, suspend
             </button>
         </mat-dialog-actions>
     </div>
@@ -179,12 +179,12 @@
         Do you want to delete this node?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -208,12 +208,12 @@
         Do you want to delete this list?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -237,12 +237,12 @@
         Do you want to delete this data model?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -268,12 +268,12 @@
         Do you want to delete this resource class?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -308,12 +308,12 @@
         Do you want to delete this property?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -347,7 +347,7 @@
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
                 [mat-dialog-close]="{confirmed: true, comment: comment}" [disabled]="!comment">
-                Save
+                Update
             </button>
         </mat-dialog-actions>
     </div>

src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.html

@@ -27,11 +27,14 @@
 
 <!-- add new resource instance if instance id is called "add" -->
 <div class="single-instance-form" *ngIf="instanceId && instanceId === 'add'">
-    <h3>Create new {{classId}} instance</h3>
+    <h3>Create new resource of type: {{resClass?.label}}</h3>
     <app-resource-instance-form
         [selectedResourceClassIri]="classId"
         [selectedProject]="projectId">
     </app-resource-instance-form>
 </div>
 
 <!-- display single resource instance if instance id exists and is not called "add" -->
+<div class="single-instance" *ngIf="instanceId && instanceId !== 'add'">
+    <app-resource [resourceIri]="resourceIri"></app-resource>
+</div>

src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnChanges } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ReadOntology, ResourceClassDefinition } from '@dasch-swiss/dsp-js';
 import { AppInitService } from 'src/app/app-init.service';
+import { CacheService } from 'src/app/main/cache/cache.service';
 import { OntologyService } from 'src/app/project/ontology/ontology.service';
 import { FilteredResources, SearchParams } from 'src/app/workspace/results/list-view/list-view.component';
 import { SplitSize } from 'src/app/workspace/results/results.component';
@@ -10,13 +12,21 @@ import { SplitSize } from 'src/app/workspace/results/results.component';
     templateUrl: './ontology-class-instance.component.html',
     styleUrls: ['./ontology-class-instance.component.scss']
 })
-export class OntologyClassInstanceComponent {
+export class OntologyClassInstanceComponent implements OnChanges {
 
     projectId: string;
 
+    ontoId: string;
+
+    // id (iri) of resource class
     classId: string;
 
+    resClass: ResourceClassDefinition;
+
+    // uuid of resource instance
     instanceId: string;
+    // id (iri) or resource instance
+    resourceIri: string;
 
     searchParams: SearchParams;
 
@@ -30,6 +40,7 @@ export class OntologyClassInstanceComponent {
 
     constructor(
         private _ais: AppInitService,
+        private _cache: CacheService,
         private _route: ActivatedRoute,
         private _ontologyService: OntologyService
     ) {
@@ -46,16 +57,22 @@ export class OntologyClassInstanceComponent {
             const className = params['class'];
 
             // get the resource class id from route
-            this.classId = `${iriBase}/ontology/${projectCode}/${ontologyName}/v2#${className}`;
+            this.ontoId = `${iriBase}/ontology/${projectCode}/${ontologyName}/v2`;
+            this.classId = `${this.ontoId}#${className}`;
 
             this.instanceId = params['instance'];
             if (this.instanceId) {
-                // single instance
+                // single instance view
 
                 if (this.instanceId === 'add') {
                     // create new res class instance: display res instance form
+                    this.ngOnChanges();
+                } else {
+                    // get the single resource instance
+                    this.resourceIri = `${this._ais.dspAppConfig.iriBase}/${projectCode}/${this.instanceId}`;
                 }
             } else {
+                // display all resource instances of this resource class
                 this.searchParams = {
                     query: this._setGravsearch(this.classId),
                     mode: 'gravsearch'
@@ -64,6 +81,16 @@ export class OntologyClassInstanceComponent {
         });
     }
 
+    ngOnChanges() {
+        this._cache.get('currentProjectOntologies').subscribe(
+            (ontologies: ReadOntology[]) => {
+                // find ontology of current resource class to get the class label
+                const classes = ontologies[ontologies.findIndex(onto => onto.id === this.ontoId)].getAllClassDefinitions();
+                this.resClass = <ResourceClassDefinition>classes[classes.findIndex(res => res.id === this.classId)];
+            }
+        );
+    }
+
     openSelectedResources(res: FilteredResources) {
 
         this.selectedResources = res;

src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html

@@ -1,14 +1,15 @@
 <span class="link" [routerLink]="link">
     <h2 matLine class="label mat-subheading-1">{{resClass.label}}</h2>
     <span matLine class="instances">
-        {{results | i18nPlural: itemPluralMapping['instance']}}
+        {{results | i18nPlural: itemPluralMapping['resource']}}
     </span>
 </span>
 
-<span class="overlay-buttons hover-only">
+<span class="overlay-buttons hover-only" *ngIf="projectMember">
+    <!-- with the following button, it should be possible to edit the resource class in a quick way; but maybe we don't need it
     <button mat-icon-button class="conf" [routerLink]="link + '/conf'">
         <mat-icon>tune</mat-icon>
-    </button>
+    </button> -->
     <button mat-icon-button class="add" [routerLink]="link + '/add'">
         <mat-icon>add</mat-icon>
     </button>

src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts

@@ -14,6 +14,8 @@ export class OntologyClassItemComponent implements OnInit {
 
     @Input() resClass: ClassDefinition;
 
+    @Input() projectMember: boolean;
+
     gravsearch: string;
 
     results: number;
@@ -22,9 +24,9 @@ export class OntologyClassItemComponent implements OnInit {
 
     // i18n setup
     itemPluralMapping = {
-        instance: {
-            '=1': '1 instance',
-            other: '# instances'
+        resource: {
+            '=1': '1 resource',
+            other: '# resources'
         }
     };
 

src/app/project/beta/ontology-classes/ontology-classes.component.html

@@ -1,5 +1,5 @@
 <mat-list-item *ngFor="let class of classesToDisplay">
-    <app-ontology-class-item [resClass]="class">
+    <app-ontology-class-item [resClass]="class" [projectMember]="projectMember">
 
     </app-ontology-class-item>
 </mat-list-item>

src/app/project/beta/ontology-classes/ontology-classes.component.ts

@@ -11,6 +11,8 @@ export class OntologyClassesComponent implements OnInit {
 
     @Input() resClasses: ClassDefinition[];
 
+    @Input() projectMember: boolean;
+
     classesToDisplay: ClassDefinition[] = [];
 
     constructor(

src/app/project/beta/settings/settings.component.html

@@ -0,0 +1,8 @@
+<nav mat-tab-nav-bar mat-align-tabs="center" class="settings navigation" animationDuration="0ms">
+    <a mat-tab-link *ngFor="let link of navigation; let first = first" id="{{link.route}}" [routerLink]="link.route"
+        routerLinkActive="active-tab" #rla="routerLinkActive" [active]="rla.isActive">
+        <mat-icon class="tab-icon">{{link.icon}}</mat-icon>
+        {{link.label}}
+    </a>
+</nav>
+<router-outlet></router-outlet>

src/app/project/beta/settings/settings.component.scss

@@ -0,0 +1 @@
+

src/app/project/beta/settings/settings.component.spec.ts

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