Skip to content
Permalink
Browse files
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
  • Loading branch information
kilchenmann committed May 13, 2022
1 parent 8dcdd8f commit 52f904b953f4e6cf603d72a3d1378221edc8c532
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 42 deletions.
@@ -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>
@@ -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();
});

@@ -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);

}

}
@@ -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>
@@ -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');
}
}

}
@@ -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>
@@ -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');
}
}

}
@@ -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);
}

0 comments on commit 52f904b

Please sign in to comment.