From 52f904b953f4e6cf603d72a3d1378221edc8c532 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Fri, 13 May 2022 11:55:05 +0200 Subject: [PATCH] refactor(project): resolve issues in lists and with status 204 (#738) * fix(lists): root node comment is always required * fix(lists): list root node is mandatory field * fix(project): handle 204 status correctly (DEV-926) * refactor(video): remove console.log * test(lists): fix broken tests --- .../list-info-form.component.html | 5 ++-- .../list-info-form.component.spec.ts | 15 +++++----- .../list-info-form.component.ts | 18 +++++------ src/app/project/list/list.component.html | 8 ++--- src/app/project/list/list.component.ts | 29 ++++++++++++++---- .../project/ontology/ontology.component.html | 8 ++--- .../project/ontology/ontology.component.ts | 30 +++++++++++++++---- .../av-timeline/av-timeline.component.ts | 2 +- 8 files changed, 73 insertions(+), 42 deletions(-) diff --git a/src/app/project/list/list-info-form/list-info-form.component.html b/src/app/project/list/list-info-form/list-info-form.component.html index fbb43212b6..58bcb4e812 100644 --- a/src/app/project/list/list-info-form/list-info-form.component.html +++ b/src/app/project/list/list-info-form/list-info-form.component.html @@ -12,9 +12,10 @@

- + {{ commentInvalidMessage }}
@@ -24,7 +25,7 @@ - diff --git a/src/app/project/list/list-info-form/list-info-form.component.spec.ts b/src/app/project/list/list-info-form/list-info-form.component.spec.ts index d3b335e872..c4253e1566 100644 --- a/src/app/project/list/list-info-form/list-info-form.component.spec.ts +++ b/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(); }); diff --git a/src/app/project/list/list-info-form/list-info-form.component.ts b/src/app/project/list/list-info-form/list-info-form.component.ts index 65af38cbe0..ad7c5339c0 100644 --- a/src/app/project/list/list-info-form/list-info-form.component.ts +++ b/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); + } } diff --git a/src/app/project/list/list.component.html b/src/app/project/list/list.component.html index ce36b70151..6f51786f2f 100644 --- a/src/app/project/list/list.component.html +++ b/src/app/project/list/list.component.html @@ -1,4 +1,4 @@ -
+
@@ -92,10 +92,8 @@

-
+
-
- -
+ diff --git a/src/app/project/list/list.component.ts b/src/app/project/list/list.component.ts index 578bd1db8e..5f1686a0f4 100644 --- a/src/app/project/list/list.component.ts +++ b/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'); + } + } + } diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html index a10cb245ca..554ba0316f 100644 --- a/src/app/project/ontology/ontology.component.html +++ b/src/app/project/ontology/ontology.component.html @@ -1,4 +1,4 @@ -
+
@@ -210,10 +210,8 @@

-
+
-
- -
+ diff --git a/src/app/project/ontology/ontology.component.ts b/src/app/project/ontology/ontology.component.ts index 603a1e837b..48f227b3b2 100644 --- a/src/app/project/ontology/ontology.component.ts +++ b/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'); + } + } + } diff --git a/src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts b/src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts index 1e0a2af219..1a54f48aa2 100644 --- a/src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts +++ b/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); }