refactor(compiler): enable strict template (DSP-1403) (#432)

* refactor(compiler): set strictTemplate in angularCompilerOptions

* chore(material): add MatHint to appModule

* test(resource): fix tests

* chore(deps): clean up node modules

* test(ontology): disable one step

Test on gh-ci failed because of this:
Chrome Headless 90.0.4430.93 (Linux x86_64) PropertyFormComponent should update labels when the value changes FAILED
69
	Expected ' Update
70

71

72
	' to equal ' Update '.

* test(gh-ci): fix tests

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

@@ -6,7 +6,7 @@
         <app-dialog-header [title]="'appLabels.form.user.title.profile' | translate"
             [subtitle]="'appLabels.form.user.title.new' | translate">
         </app-dialog-header>
-        <app-user-form [name]="data.name" [projectcode]="data.project" (closeDialog)="dialogRef.close()">
+        <app-user-form [name]="data.name" [projectCode]="data.project" (closeDialog)="dialogRef.close()">
         </app-user-form>
     </div>
 
@@ -99,7 +99,7 @@
     <div *ngSwitchCase="'editProject'">
         <app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate">
         </app-dialog-header>
-        <app-project-form [projectcode]="data.project" (closeDialog)="dialogRef.close()"></app-project-form>
+        <app-project-form [projectCode]="data.project" (closeDialog)="dialogRef.close()"></app-project-form>
     </div>
 
     <!-- Delete project -->
@@ -141,7 +141,7 @@
     <!-- Create new list -->
     <div *ngSwitchCase="'createList'">
         <app-dialog-header [title]="'Create new list'" [subtitle]=""></app-dialog-header>
-        <app-list-info-form [projectcode]="data.project" [mode]="'create'" [projectIri]="data.id"
+        <app-list-info-form [projectCode]="data.project" [mode]="'create'" [projectIri]="data.id"
             (closeDialog)="dialogRef.close($event)">
         </app-list-info-form>
     </div>
@@ -248,9 +248,9 @@
     </div>
 
     <!-- Ontology editor: customize and add resource class -->
-    <div *ngSwitchCase="'addResourceClass'">
+    <div *ngSwitchCase="'createResourceClass'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle"></app-dialog-header>
-        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
+        <app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project"
             (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
         </app-resource-class-form>
     </div>
@@ -289,14 +289,14 @@
     <div *ngSwitchCase="'createProperty'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 
     <div *ngSwitchCase="'editProperty'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 

src/app/main/dialog/dialog.component.spec.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -52,6 +53,7 @@ describe('DialogComponent', () => {
                 PropertyFormComponent
             ],
             imports: [
+                CommonModule,
                 DspActionModule,
                 MatAutocompleteModule,
                 MatButtonModule,

src/app/main/dialog/dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { PropertyInfoObject } from 'src/app/project/ontology/default-data/default-properties';
 
 export interface DialogData {
     mode: string;       // switch mode
@@ -10,6 +11,10 @@ export interface DialogData {
     comment?: string;
     name?: string;
     existing?: string[];
+    propInfo?: PropertyInfoObject;
+    position?: number;
+    parentIri?: string;
+    projectCode?: string;
 }
 
 @Component({

src/app/material-module.ts

@@ -11,6 +11,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -43,6 +44,7 @@ const matModules = [
     MatDatepickerModule,
     MatDialogModule,
     MatExpansionModule,
+    MatFormFieldModule,
     MatGridListModule,
     MatIconModule,
     MatInputModule,

src/app/project/board/board.component.ts

@@ -43,7 +43,7 @@ export class BoardComponent implements OnInit {
     projectAdmin = false;
 
     // project shortcode; as identifier in project cache service
-    projectcode: string;
+    projectCode: string;
 
     // project data
     project: ReadProject;
@@ -77,11 +77,11 @@ export class BoardComponent implements OnInit {
     ) {
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
-            this.projectcode = params.get('shortcode');
+            this.projectCode = params.get('shortcode');
         });
 
         // set the page title
-        this._titleService.setTitle('Project ' + this.projectcode);
+        this._titleService.setTitle('Project ' + this.projectCode);
     }
 
     ngOnInit() {
@@ -101,7 +101,7 @@ export class BoardComponent implements OnInit {
 
     getProject() {
         // get the project data from cache
-        this._cache.get(this.projectcode).subscribe(
+        this._cache.get(this.projectCode).subscribe(
             (response: ReadProject) => {
                 this.project = response;
 

src/app/project/board/dataset-tab-view/dataset-tab-view.component.html

@@ -9,7 +9,7 @@ <h1>Selected dataset: {{ metadata.title }} </h1>
 
 <div class="properties-container">
     <div class="properties">
-        <div *ngFor="let prop of metadata | keyvalue; let last = last; let i = index;" [class.border-bottom]="!last">
+        <div *ngFor="let prop of metadataObject | keyvalue; let last = last; let i = index;" [class.border-bottom]="!last">
             <div *ngIf="excludeKeys.indexOf(prop.key) < 0;" class="property">
                 <div class="property-label">
                     <h3 class="label mat-subheading-1">

src/app/project/board/dataset-tab-view/dataset-tab-view.component.ts

@@ -1,19 +1,21 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Dataset } from '@dasch-swiss/dsp-js';
 
 @Component({
     selector: 'app-dataset-tab-view',
     templateUrl: './dataset-tab-view.component.html',
     styleUrls: ['./dataset-tab-view.component.scss']
 })
-export class DatasetTabViewComponent {
+export class DatasetTabViewComponent implements OnInit {
 
     // metadata input object
     @Input() metadata: Dataset;
 
     // number of datasets available for this project
     @Input() noOfDatasets: number;
 
+    metadataObject: {[key: string]: any};
+
     // metadata keys that we do not want to display
     excludeKeys = ['project', 'qualifiedAttribution'];
 
@@ -22,4 +24,8 @@ export class DatasetTabViewComponent {
 
     // date keys from metadata object for formatting
     dateKeys = ['dateCreated', 'dateModified', 'datePublished'];
+
+    ngOnInit() {
+        this.metadataObject = this.metadata;
+    }
 }

src/app/project/board/project-tab-view/project-tab-view.component.html

@@ -2,7 +2,7 @@
 
 <div class="properties-container">
     <div class="properties">
-        <div *ngFor="let prop of selectedProject | keyvalue; let last = last; let i = index;" class="border-bottom">
+        <div *ngFor="let prop of projectObject | keyvalue; let last = last; let i = index;" class="border-bottom">
             <div *ngIf="excludeKeys.indexOf(prop.key) < 0" class="property">
                 <div class="property-label">
                     <h3 class="label mat-subheading-1">

src/app/project/board/project-tab-view/project-tab-view.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import {
     DataManagementPlan,
-    Grant, IId, Organization, Person, SingleProject
+    Grant, IId, IUrl, Organization, Person, Place, SingleProject
 } from '@dasch-swiss/dsp-js';
 import { MetadataService } from '../dataset-metadata.service';
 
@@ -16,6 +16,8 @@ export class ProjectTabViewComponent implements OnInit {
     @Input() selectedProject: SingleProject;
     @Input() subProperties: Object;
 
+    projectObject: {[key: string]: any};
+
     // metadata keys that we do not want to display in template
     excludeKeys = ['contactPoint'];
 
@@ -36,6 +38,8 @@ export class ProjectTabViewComponent implements OnInit {
 
     ngOnInit() {
 
+        this.projectObject = this.selectedProject;
+
         // get DMP
         if (this.selectedProject.dataManagementPlan) {
             this.dmps = this.getDMP(this.selectedProject.dataManagementPlan);

src/app/project/collaboration/add-user/add-user.component.ts

@@ -30,7 +30,7 @@ export class AddUserComponent implements OnInit {
      * project name to get existing team members
      * or to know where to add selected user
      */
-    @Input() projectcode: string;
+    @Input() projectCode: string;
 
     /**
      * event emitter, when the selected user will be added to the list
@@ -141,7 +141,7 @@ export class AddUserComponent implements OnInit {
                 const members: string[] = [];
 
                 // get all members of this project; response from cache
-                this._cache.get('members_of_' + this.projectcode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectcode)).subscribe(
+                this._cache.get('members_of_' + this.projectCode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectCode)).subscribe(
                     (res: ApiResponseData<MembersResponse>) => {
                         for (const m of res.body.members) {
                             members.push(m.id);
@@ -291,14 +291,14 @@ export class AddUserComponent implements OnInit {
                 this.selectedUser = response.body.user;
 
                 // the following request should never start
-                this.isAlreadyMember = (!!response.body.user.projects.find(p => p.shortcode === this.projectcode));
+                this.isAlreadyMember = (!!response.body.user.projects.find(p => p.shortcode === this.projectCode));
 
                 if (!this.isAlreadyMember) {
 
                     this.loading = true;
 
-                    // get project iri by projectcode
-                    this._cache.get(this.projectcode).subscribe(
+                    // get project iri by projectCode
+                    this._cache.get(this.projectCode).subscribe(
                         (p: ReadProject) => {
                             // add user to project
                             this._dspApiConnection.admin.usersEndpoint.addUserToProjectMembership(this.selectedUser.id, p.id).subscribe(
@@ -355,7 +355,7 @@ export class AddUserComponent implements OnInit {
             position: {
                 top: '112px'
             },
-            data: { project: this.projectcode, name: this.selectUserForm.controls['username'].value, mode: mode }
+            data: { project: this.projectCode, name: this.selectUserForm.controls['username'].value, mode: mode }
         };
 
         const dialogRef = this._dialog.open(DialogComponent, dialogConfig);

src/app/project/collaboration/collaboration.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="projectAdmin" class="content large middle">
     <!-- add user to the project -->
-    <app-add-user *ngIf="project?.status && (sysAdmin || projectAdmin)" [projectcode]="projectcode"
+    <app-add-user *ngIf="project?.status && (sysAdmin || projectAdmin)" [projectCode]="projectCode"
         (refreshParent)="refresh()" #addUserComponent></app-add-user>
 
     <!-- main content: list of project members -->

src/app/project/collaboration/collaboration.component.ts

@@ -33,7 +33,7 @@ export class CollaborationComponent implements OnInit {
     projectAdmin = false;
 
     // project shortcode; as identifier in project cache service
-    projectcode: string;
+    projectCode: string;
 
     // project data
     project: ReadProject;
@@ -57,11 +57,11 @@ export class CollaborationComponent implements OnInit {
 
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
-            this.projectcode = params.get('shortcode');
+            this.projectCode = params.get('shortcode');
         });
 
         // set the page title
-        this._titleService.setTitle('Project ' + this.projectcode + ' | Collaboration');
+        this._titleService.setTitle('Project ' + this.projectCode + ' | Collaboration');
 
         // --> TODO go back to project page, if the logged-in user has no admin rights
         // is the logged-in user a project admin?
@@ -86,7 +86,7 @@ export class CollaborationComponent implements OnInit {
         this.sysAdmin = this.session.user.sysAdmin;
 
         // get the project data from cache
-        this._cache.get(this.projectcode).subscribe(
+        this._cache.get(this.projectCode).subscribe(
             (response: ReadProject) => {
                 this.project = response;
 
@@ -112,10 +112,10 @@ export class CollaborationComponent implements OnInit {
      */
     initList(): void {
         // set the cache
-        this._cache.get('members_of_' + this.projectcode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectcode));
+        this._cache.get('members_of_' + this.projectCode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectCode));
 
         // get the project data from cache
-        this._cache.get('members_of_' + this.projectcode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectcode)).subscribe(
+        this._cache.get('members_of_' + this.projectCode, this._dspApiConnection.admin.projectsEndpoint.getProjectMembersByShortcode(this.projectCode)).subscribe(
             (response: ApiResponseData<MembersResponse>) => {
                 this.projectMembers = response.body.members;
 
@@ -148,7 +148,7 @@ export class CollaborationComponent implements OnInit {
         // referesh the component
         this.loading = true;
         // update the cache
-        this._cache.del('members_of_' + this.projectcode);
+        this._cache.del('members_of_' + this.projectCode);
 
         this.initList();
 

src/app/project/collaboration/select-group/select-group.component.ts

@@ -13,7 +13,7 @@ import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 export class SelectGroupComponent implements OnInit {
 
     // project short code
-    @Input() projectcode: string;
+    @Input() projectCode: string;
 
     // project iri
     @Input() projectid: string;
@@ -50,10 +50,10 @@ export class SelectGroupComponent implements OnInit {
 
     setList() {
         // set cache for groups
-        this._cache.get('groups_of_' + this.projectcode, this._dspApiConnection.admin.groupsEndpoint.getGroups());
+        this._cache.get('groups_of_' + this.projectCode, this._dspApiConnection.admin.groupsEndpoint.getGroups());
 
         // update list of groups with the project specific groups
-        this._cache.get('groups_of_' + this.projectcode, this._dspApiConnection.admin.groupsEndpoint.getGroups()).subscribe(
+        this._cache.get('groups_of_' + this.projectCode, this._dspApiConnection.admin.groupsEndpoint.getGroups()).subscribe(
             (response: ApiResponseData<GroupsResponse>) => {
                 for (const group of response.body.groups) {
                     if (group.project.id === this.projectid) {

src/app/project/list/list-info-form/list-info-form.component.spec.ts

@@ -47,15 +47,15 @@ class TestHostUpdateListComponent {
  * test host component to simulate parent component for creating a new list.
  */
 @Component({
-    template: '<app-list-info-form #listInfoForm [mode]="mode" [projectcode]="projectcode" [projectIri]="projectIri"></app-list-info-form>'
+    template: '<app-list-info-form #listInfoForm [mode]="mode" [projectCode]="projectCode" [projectIri]="projectIri"></app-list-info-form>'
 })
 class TestHostCreateListComponent {
 
     @ViewChild('listInfoForm') listInfoForm: ListInfoFormComponent;
 
     mode = 'create';
 
-    projectcode = '0001';
+    projectCode = '0001';
 
     projectIri = 'http://rdfh.ch/projects/0001';
 

src/app/project/list/list-info-form/list-info-form.component.ts

@@ -28,7 +28,7 @@ export class ListInfoFormComponent implements OnInit {
     @Input() mode: 'create' | 'update';
 
     // project short code
-    @Input() projectcode: string;
+    @Input() projectCode: string;
 
     @Input() projectIri: string;