Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(project): better project form validation (DEV-336) #641

Merged
merged 6 commits into from Jan 19, 2022
Merged

fix(project): better project form validation (DEV-336) #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
33d90bf
refactor(project): bring back the old description and keyword info
kilchenmann Jan 18, 2022
7407bc4
fix(project): refactor project form
kilchenmann Jan 18, 2022
d5f2454
Merge branch 'main' into wip/dev-336-fix-project-form-edit-mode
kilchenmann Jan 18, 2022
62617d4
fix(project): refactor code
kilchenmann Jan 18, 2022
d59b4c6
Merge branch 'wip/dev-336-fix-project-form-edit-mode' of https://gith…
kilchenmann Jan 18, 2022
e6eab48
Merge branch 'main' into wip/dev-336-fix-project-form-edit-mode
kilchenmann Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 49 additions & 41 deletions src/app/project/board/board.component.html
View file
Open in desktop
@@ -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
Open in desktop
@@ -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
Open in desktop
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