refactor(project): resolve issues in lists and with status 204

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

@@ -12,9 +12,10 @@
         <br><br>
 
         <!-- list description / comment -->
-        <app-string-literal-input [textarea]="true" [placeholder]="'List description'" [value]="comments"
+        <app-string-literal-input [textarea]="true" [placeholder]="'List description *'" [value]="comments"
             (dataChanged)="handleData($event, 'comments')" [language]="labels.length ? labels[0].language : 'en'">
         </app-string-literal-input>
+        <mat-hint class="invalid-form string-literal-error" *ngIf="commentInvalidMessage">{{ commentInvalidMessage }}</mat-hint>
 
         <div class="form-panel form-action">
             <span>
@@ -24,7 +25,7 @@
             </span>
             <span class="fill-remaining-space"></span>
             <span>
-                <button mat-raised-button type="submit" color="primary" [disabled]="labels.length === 0"
+                <button mat-raised-button type="submit" color="primary" [disabled]="saveButtonDisabled"
                     (click)="submitData()" class="list-submit">
                     {{ mode === 'update' ? 'Update' : 'Create' | translate }}
                 </button>

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

@@ -139,20 +139,21 @@ describe('ListInfoFormComponent', () => {
             expect(testHostUpdateListComponent.listInfoForm.comments).toEqual([{ 'value': 'Other Tree List comment', 'language': 'en' }]);
         });
 
-        it('should display "Update" as the submit button text and be disabled as long as no labels are provided', async () => {
+        it('should display "Update" as the submit button text and be disabled as long as no labels and comments are provided', async () => {
             const submitButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.list-submit' }));
 
             expect(await submitButton.getText()).toEqual('Update');
-
-            expect(await submitButton.isDisabled()).toBeFalsy();
+            expect(await submitButton.isDisabled()).toBeTruthy(); // because comment is missing in the test data
 
             testHostUpdateListComponent.listInfoForm.handleData([], 'labels');
-
             expect(await submitButton.isDisabled()).toBeTruthy();
 
             testHostUpdateListComponent.listInfoForm.handleData([{ 'value': 'My edited list label', 'language': 'en' }], 'labels');
-
+            testHostUpdateListComponent.listInfoForm.handleData([{ 'value': 'My edited list comment', 'language': 'en' }], 'comments');
             expect(await submitButton.isDisabled()).toBeFalsy();
+
+            testHostUpdateListComponent.listInfoForm.handleData([], 'comments');
+            expect(await submitButton.isDisabled()).toBeTruthy();
         });
 
         it('should update labels when the value changes', () => {
@@ -215,15 +216,13 @@ describe('ListInfoFormComponent', () => {
             const submitButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.list-submit' }));
 
             expect(await submitButton.getText()).toEqual('Create');
-
             expect(await submitButton.isDisabled()).toBeTruthy();
 
             testHostCreateListComponent.listInfoForm.handleData([{ 'value': 'My new list', 'language': 'en' }], 'labels');
-
+            testHostCreateListComponent.listInfoForm.handleData([{ 'value': 'My new list description', 'language': 'en' }], 'comments');
             expect(await submitButton.isDisabled()).toBeFalsy();
 
             testHostCreateListComponent.listInfoForm.handleData([], 'labels');
-
             expect(await submitButton.isDisabled()).toBeTruthy();
         });
 

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

@@ -45,12 +45,16 @@ export class ListInfoFormComponent implements OnInit {
     labelErrors = {
         label: {
             'required': 'A label is required.'
+        },
+        comment: {
+            'required': 'A description is required.'
         }
     };
 
-    saveButtonDisabled = false;
+    saveButtonDisabled = true;
 
     labelInvalidMessage: string;
+    commentInvalidMessage: string;
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
@@ -153,21 +157,17 @@ export class ListInfoFormComponent implements OnInit {
         switch (type) {
             case 'labels':
                 this.labels = data;
+                this.labelInvalidMessage = (data.length ? null : this.labelErrors.label.required);
                 break;
 
             case 'comments':
                 this.comments = data;
+                this.commentInvalidMessage = (data.length ? null : this.labelErrors.comment.required);
                 break;
         }
 
-        if (this.labels.length === 0) {
-            // invalid label, don't let user submit
-            this.saveButtonDisabled = true;
-            this.labelInvalidMessage = this.labelErrors.label.required;
-        } else {
-            this.saveButtonDisabled = false;
-            this.labelInvalidMessage = null;
-        }
+        this.saveButtonDisabled = (!this.labels.length || !this.comments.length);
+
     }
 
 }

src/app/project/list/list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="projectAdmin" class="content large middle desktop-only">
+<div *ngIf="projectAdmin && !disableContent" class="content large middle">
 
     <app-progress-indicator *ngIf="loading"></app-progress-indicator>
 
@@ -92,10 +92,8 @@ <h2 class="mat-title">
 
 </div>
 
-<div *ngIf="!projectAdmin" class="content large middle">
+<div *ngIf="!projectAdmin && !disableContent" class="content large middle">
     <app-status [status]="403"></app-status>
 </div>
 
-<div class="mobile-only">
-    <app-status [status]="204"></app-status>
-</div>
+<app-status *ngIf="disableContent" [status]="204"></app-status>

src/app/project/list/list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
@@ -11,7 +11,6 @@ import {
     List,
     ListNodeInfo,
     ListsResponse,
-    ProjectResponse,
     ReadProject,
     StringLiteral
 } from '@dasch-swiss/dsp-js';
@@ -71,6 +70,9 @@ export class ListComponent implements OnInit {
         }
     };
 
+    // disable content on small devices
+    disableContent = false;
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _cache: CacheService,
@@ -93,15 +95,22 @@ export class ListComponent implements OnInit {
         }
 
         // set the page title
-        if (this.listIri) {
-            this._titleService.setTitle('Project ' + this.projectCode + ' | List');
-        } else {
-            this._titleService.setTitle('Project ' + this.projectCode + ' | Lists');
+        this._setPageTitle();
+
+    }
+
+    @HostListener('window:resize', ['$event']) onWindwoResize(e: Event) {
+        this.disableContent = (window.innerWidth <= 768);
+        // reset the page title
+        if (!this.disableContent) {
+            this._setPageTitle();
         }
     }
 
     ngOnInit() {
 
+        this.disableContent = (window.innerWidth <= 768);
+
         this.loading = true;
 
         // get information about the logged-in user
@@ -274,4 +283,12 @@ export class ListComponent implements OnInit {
         });
     }
 
+    private _setPageTitle() {
+        if (this.listIri) {
+            this._titleService.setTitle('Project ' + this.projectCode + ' | List');
+        } else {
+            this._titleService.setTitle('Project ' + this.projectCode + ' | Lists');
+        }
+    }
+
 }

src/app/project/ontology/ontology.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="projectAdmin" class="desktop-only">
+<div *ngIf="projectAdmin && !disableContent">
 
     <app-progress-indicator *ngIf="loading"></app-progress-indicator>
 
@@ -210,10 +210,8 @@ <h2 class="mat-title">
 
 </div>
 
-<div *ngIf="!projectAdmin" class="content large middle">
+<div *ngIf="!projectAdmin && !disableContent" class="content large middle">
     <app-status [status]="403"></app-status>
 </div>
 
-<div class="mobile-only">
-    <app-status [status]="204"></app-status>
-</div>
+<app-status *ngIf="disableContent" [status]="204"></app-status>

src/app/project/ontology/ontology.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, HostListener, Inject, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
@@ -115,6 +115,9 @@ export class OntologyComponent implements OnInit {
     defaultClasses: DefaultClass[] = DefaultResourceClasses.data;
     defaultProperties: PropertyCategory[] = DefaultProperties.data;
 
+    // disable content on small devices
+    disableContent = false;
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _cache: CacheService,
@@ -144,15 +147,21 @@ export class OntologyComponent implements OnInit {
         }
 
         // set the page title
-        if (this.ontologyIri) {
-            this._titleService.setTitle('Project ' + this.projectCode + ' | Data model');
-        } else {
-            // set the page title in case of more than one existing project ontologies
-            this._titleService.setTitle('Project ' + this.projectCode + ' | Data models');
+        this._setPageTitle();
+
+    }
+
+    @HostListener('window:resize', ['$event']) onWindwoResize(e: Event) {
+        this.disableContent = (window.innerWidth <= 768);
+        // reset the page title
+        if (!this.disableContent) {
+            this._setPageTitle();
         }
     }
 
     ngOnInit() {
+
+        this.disableContent = (window.innerWidth <= 768);
         this.loading = true;
 
         // get information about the logged-in user
@@ -586,4 +595,13 @@ export class OntologyComponent implements OnInit {
         );
     }
 
+    private _setPageTitle() {
+        if (this.ontologyIri) {
+            this._titleService.setTitle('Project ' + this.projectCode + ' | Data model');
+        } else {
+            // set the page title in case of more than one existing project ontologies
+            this._titleService.setTitle('Project ' + this.projectCode + ' | Data models');
+        }
+    }
+
 }

src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts

@@ -76,7 +76,7 @@ export class AvTimelineComponent implements OnChanges {
         this._onMouseup(e);
     }
 
-    @HostListener('window:resize', ['$event']) onWindwoResiz(e: Event) {
+    @HostListener('window:resize', ['$event']) onWindowResize(e: Event) {
         this._onWindowResize(e);
     }