Skip to content

Commit

Permalink
fix(project): better project form validation (DEV-336) (#641)
Browse files Browse the repository at this point in the history 
* refactor(project): bring back the old description and keyword info

* fix(project): refactor project form

* fix(project): refactor code
  • Loading branch information
@kilchenmann
kilchenmann committed Jan 19, 2022
1 parent 3051a67 commit a7563a3
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 70 deletions.
90 changes: 49 additions & 41 deletions src/app/project/board/board.component.html
View file
@@ -1,55 +1,63 @@
<app-progress-indicator *ngIf="loading"></app-progress-indicator>

<div *ngIf="!loading && project">
<div class="content large middle">
<!-- mobile version: status and edit icon displayed before the title -->
<div class="app-toolbar-mobile">
<span class="app-toolbar-action-status">
<div *ngIf="!loading && project" class="content large middle">
<!-- mobile version: status and edit icon displayed before the title -->
<div class="app-toolbar-mobile">
<span class="app-toolbar-action-status">
<span [class.active]="project.status" class="badge status">
<span *ngIf="project.status">Active</span>
<span *ngIf="!project.status">Deactivated</span>
</span>
</span>
<span class="fill-remaining-space-action"></span>
<span class="app-toolbar-action-edit">
<button mat-icon-button *ngIf="projectAdmin && project.status"
(click)="openDialog('editProject', project.shortname, project.shortcode)" class="right">
<mat-icon>edit</mat-icon>
</button>
</span>
</div>

<!-- desktop and tablet version -->
<div class="app-toolbar transparent more-space-bottom">
<div class="app-toolbar-row">
<h3 class="mat-body subtitle">
Project {{ project.shortcode }} | {{ project.shortname | uppercase }}
</h3>
<span class="fill-remaining-space"></span>
<span class="app-toolbar-action">
<span [class.active]="project.status" class="badge status">
<span *ngIf="project.status">Active</span>
<span *ngIf="!project.status">Deactivated</span>
</span>
</span>
<span class="fill-remaining-space-action"></span>
<span class="app-toolbar-action-edit">
<button mat-icon-button
*ngIf="projectAdmin && project.status"
(click)="openDialog('editProject', project.shortname, project.shortcode)"
class="right">
</div>
<div class="app-toolbar-row">
<h2 class="mat-title">
{{ project.longname }}
</h2>
<span class="fill-remaining-space"></span>
<span class="app-toolbar-action">
<button mat-icon-button *ngIf="projectAdmin && project.status"
(click)="openDialog('editProject', project.shortname, project.shortcode)" class="right">
<mat-icon>edit</mat-icon>
</button>
</span>
</div>

<!-- desktop and tablet version -->
<div class="app-toolbar transparent more-space-bottom">
<div class="app-toolbar-row">
<h3 class="mat-body subtitle">
Project {{ project.shortcode }} | {{ project.shortname | uppercase }}
</h3>
<span class="fill-remaining-space"></span>
<span class="app-toolbar-action">
<span [class.active]="project.status" class="badge status">
<span *ngIf="project.status">Active</span>
<span *ngIf="!project.status">Deactivated</span>
</span>
</span>
</div>
<div class="app-toolbar-row">
<h2 class="mat-title">
{{ project.longname }}
</h2>
<span class="fill-remaining-space"></span>
<span class="app-toolbar-action">
<button mat-icon-button
*ngIf="projectAdmin && project.status"
(click)="openDialog('editProject', project.shortname, project.shortcode)"
class="right">
<mat-icon>edit</mat-icon>
</button>
</span>
</div>
</div>
</div>

<!-- description -->
<section class="project description" *ngFor="let description of project.description">
<div [innerHtml]="description.value"></div>
</section>

<mat-divider *ngIf="project.keywords.length > 0"></mat-divider>

<!-- keywords -->
<section class="project keywords">
<mat-chip-list>
<mat-chip *ngFor="let k of project.keywords">{{k}}</mat-chip>
</mat-chip-list>
</section>

</div>
20 changes: 10 additions & 10 deletions src/app/project/project-form/project-form.component.html
View file
@@ -1,10 +1,5 @@
<div class="no-shadow">

<app-progress-indicator *ngIf="loading"></app-progress-indicator>

<!-- success message after updating -->
<app-message *ngIf="success" [message]="successMessage" [short]="true"></app-message>

<!-- content -->
<form *ngIf="!loading && project.status" [formGroup]="form" class="form-content project-data"
(ngSubmit)="submitData()">
Expand Down Expand Up @@ -75,10 +70,12 @@
{{tag}}
<mat-icon matChipRemove *ngIf="project.status">cancel</mat-icon>
</mat-chip>
<input placeholder="{{'appLabels.form.project.general.keywords' | translate}} *"
[formControl]="form.controls['keywords']" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addKeyword($event)" />
<input placeholder="{{'appLabels.form.project.general.keywords' | translate}} {{projectCode ? '' : '*'}}"
[formControl]="form.controls['keywords']"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addKeyword($event)">
</mat-chip-list>
<mat-hint *ngIf="formErrors.keywords">
{{ formErrors.keywords }}
Expand All @@ -105,9 +102,12 @@
</span>
<span class="fill-remaining-space"></span>
<span>
<!-- TODO: description is required! Disable submit button, if description is empty -->
<button mat-raised-button type="submit" color="primary"
[disabled]="!form.valid || !this.description.length || (projectCode && !project.status)">

<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</app-progress-indicator>
<mat-icon *ngIf="success && !loading">close</mat-icon>
<span *ngIf="projectCode">{{ 'appLabels.form.action.update' | translate }}</span>
<span *ngIf="!projectCode">{{ 'appLabels.form.action.submit' | translate }}</span>
</button>
Expand Down
32 changes: 13 additions & 19 deletions src/app/project/project-form/project-form.component.ts
View file
Expand Up @@ -18,6 +18,7 @@ import {
import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
import { existingNamesValidator } from 'src/app/main/directive/existing-name/existing-name.directive';
import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
import { NotificationService } from 'src/app/main/services/notification.service';
import { SessionService } from 'src/app/main/services/session.service';
import { CacheService } from '../../main/cache/cache.service';

Expand Down Expand Up @@ -141,6 +142,7 @@ export class ProjectFormComponent implements OnInit {
@Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
private _cache: CacheService,
private _errorHandler: ErrorHandlerService,
private _notification: NotificationService,
private _fb: FormBuilder,
private _router: Router,
private _session: SessionService
Expand Down Expand Up @@ -256,11 +258,15 @@ export class ProjectFormComponent implements OnInit {
'keywords': new FormControl({
// must be empty (even in edit mode), because of the mat-chip-list
value: [], disabled: disabled
}, [
Validators.required
])
})
});

if (!this.projectCode) {
// if projectCode does not exist, we are in create mode;
// in this case, the keywords are required in the API request
this.form.controls['keywords'].setValidators(Validators.required);
}

this.form.valueChanges
.subscribe(data => this.onValueChanged(data));
}
Expand Down Expand Up @@ -339,21 +345,10 @@ export class ProjectFormComponent implements OnInit {
this.keywords = [];
}
this.form.controls['keywords'].setValue(this.keywords);
// this.form.controls['keywords'].disabled = !this.project.status;

// b) update description field / multi language preparation
// fIXME: this is a quick (hardcoded) hack:
// --> TODO create multi language input fields
// this.form.controls['description'].setValue([{
// 'language': 'en',
// 'value': this.form.controls['description'].value
// }]);


if (this.projectCode) {
const projectData: UpdateProjectRequest = new UpdateProjectRequest();
projectData.description = [new StringLiteral()];
// projectData.description = this.description;
projectData.keywords = this.form.value.keywords;
projectData.longname = this.form.value.longname;
projectData.status = true;
Expand All @@ -370,16 +365,15 @@ export class ProjectFormComponent implements OnInit {
this._dspApiConnection.admin.projectsEndpoint.updateProject(this.project.id, projectData).subscribe(
(response: ApiResponseData<ProjectResponse>) => {

// this.originProject = response.body.project;
this.success = true;
this.project = response.body.project;
this.buildForm(this.project);

// update cache
this._cache.set(this.projectCode, response);
this._cache.set(this.projectCode, this.project);

this.success = true;
this._notification.openSnackBar('You have successfully updated the project information.');

this.loading = false;
this.closeDialog.emit(this.project);

},
(error: ApiResponseError) => {
Expand Down

0 comments on commit a7563a3

Please sign in to comment.