Skip to content

Commit

Permalink
fix: Replaced reset buttons with cancel button (#284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kilchenmann
kilchenmann committed Aug 18, 2020
1 parent 441ffdb commit 1481018
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 105 deletions.
2 changes: 1 addition & 1 deletion src/app/main/dialog/dialog.component.html
View file
Expand Up @@ -148,7 +148,7 @@
<div *ngSwitchCase="'editListInfo'">
<app-dialog-header [title]="data.title" [subtitle]="'Edit list info'" (close)="dialogRef.close()">
</app-dialog-header>
<app-list-info-form [iri]="data.id" [projectIri]="data.project"></app-list-info-form>
<app-list-info-form [iri]="data.id" [projectIri]="data.project" (closeDialog)="dialogRef.close()"></app-list-info-form>
</div>

<!-- Delete list -->
Expand Down
6 changes: 3 additions & 3 deletions src/app/project/list/list-info-form/list-info-form.component.html
View file
Expand Up @@ -3,7 +3,7 @@
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

<!-- success message after updating -->
<dsp-message *ngIf="success" [message]="successMessage" [short]="true" (click)="closeMessage()"></dsp-message>
<dsp-message *ngIf="success" [message]="successMessage" [short]="true"></dsp-message>

<div *ngIf="!loading && !createList" class="form-content list-info">

Expand All @@ -24,8 +24,8 @@

<div class="form-panel form-action">
<span>
<button mat-button type="button" (click)="resetForm($event, list)">
{{ 'appLabels.form.action.reset' | translate }}
<button mat-button type="button" (click)="closeDialog.emit(list)">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
<span class="fill-remaining-space"></span>
Expand Down
5 changes: 0 additions & 5 deletions src/app/project/list/list-info-form/list-info-form.component.ts
View file
Expand Up @@ -227,9 +227,4 @@ export class ListInfoFormComponent implements OnInit {
break;
}
}

closeMessage() {
this.closeDialog.emit(this.list);
}

}
4 changes: 2 additions & 2 deletions src/app/project/ontology/source-type-form/source-type-form.component.html
View file
@@ -1,7 +1,7 @@
<div class="no-shadow" *ngIf="!errorMessage; else errorMsg">

<!-- success message after updating -->
<dsp-message *ngIf="success" [message]="successMessage" [short]="true" (click)="closeMessage()"></dsp-message>
<dsp-message *ngIf="success" [message]="successMessage" [short]="true"></dsp-message>

<!-- content: Step 1 = define resource type -->
<form [formGroup]="sourceTypeForm" class="form-content">
Expand Down Expand Up @@ -37,7 +37,7 @@
<!-- action buttons -->
<div class="form-panel form-action">
<span>
<button mat-button type="button" (click)="closeMessage()">
<button mat-button type="button" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
Expand Down
3 changes: 0 additions & 3 deletions src/app/project/ontology/source-type-form/source-type-form.component.ts
View file
Expand Up @@ -562,9 +562,6 @@ export class SourceTypeFormComponent implements OnInit, OnDestroy, AfterViewChec
);
*/

// show message to close dialog box
// this.closeMessage();
}
/**
* Convert cardinality values (multiple? & required?) from form to string 1-0, 0-n, 1, 0-1
Expand Down
15 changes: 4 additions & 11 deletions src/app/project/project-form/project-form.component.html
View file
Expand Up @@ -3,7 +3,7 @@
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

<!-- success message after updating -->
<dsp-message *ngIf="success" [message]="successMessage" [short]="true" (click)="closeMessage()"></dsp-message>
<dsp-message *ngIf="success" [message]="successMessage" [short]="true"></dsp-message>

<!-- content -->
<form *ngIf="!loading && project.status" [formGroup]="form" class="form-content project-data"
Expand Down Expand Up @@ -39,7 +39,7 @@

<!-- description -->
<dsp-string-literal-input placeholder="{{'appLabels.form.project.general.description' | translate}} *"
[disabled]="project.id !== undefined && !project.status" [textarea]="true" [value]="project.description"
[disabled]="!project.status" [textarea]="true" [value]="project.description"
(dataChanged)="getStringLiteral($event)">
</dsp-string-literal-input>
<mat-hint class="string-literal-error" *ngIf="formErrors.description">
Expand Down Expand Up @@ -80,12 +80,6 @@
[matChipInputSeparatorKeyCodes]="separatorKeyCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addKeyword($event)" />
</mat-chip-list>

<!--
<mat-hint *ngIf="formErrors.keywords">
{{ formErrors.keywords }}
</mat-hint>
-->
</mat-form-field>

<!-- upload logo -->
Expand All @@ -102,10 +96,9 @@

<div class="form-panel form-action">
<span>
<button mat-button type="reset" (click)="resetForm($event, project)">
{{ 'appLabels.form.action.reset' | translate }}
<button mat-button type="reset" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>

</span>
<span class="fill-remaining-space"></span>
<span>
Expand Down
135 changes: 65 additions & 70 deletions src/app/project/project-form/project-form.component.ts
View file
Expand Up @@ -14,15 +14,25 @@ import { CacheService } from '../../main/cache/cache.service';
})
export class ProjectFormComponent implements OnInit {

loading: boolean = true;

errorMessage: any;

@Input() projectcode: string;
/**
* Param of project form component:
* Optional projectcode; if exists we are in edit mode
* otherwise we build empty form to create new project
*/
@Input() projectcode?: string;

/**
* Output of project form component:
* emits info to parent that dialog box was closed
*/
@Output() closeDialog: EventEmitter<any> = new EventEmitter<any>();

project: ReadProject;
description: StringLiteral[];

loading = true;

errorMessage: any;

// is the logged-in user system admin?
sysAdmin: boolean = false;
Expand All @@ -40,7 +50,6 @@ export class ProjectFormComponent implements OnInit {
];
shortcodeRegex = /^[0-9A-Fa-f]+$/;

description: StringLiteral[];
/**
* some restrictions and rules for
* description, shortcode, shortname and keywords
Expand Down Expand Up @@ -84,8 +93,7 @@ export class ProjectFormComponent implements OnInit {
'longname': '',
'shortcode': '',
'description': ''
// 'institution': '',
// 'keywords': '',
// 'institution': ''
};

validationMessages = {
Expand All @@ -110,10 +118,7 @@ export class ProjectFormComponent implements OnInit {
'required': 'A description is required.',
'maxlength': 'Description cannot be more than ' + this.descriptionMaxLength + ' characters long.'
}
// 'institution': {},
// 'keywords': {
// 'required': 'At least one keyword is required.'
// }
// 'institution': {}
};

constructor(
Expand All @@ -126,11 +131,30 @@ export class ProjectFormComponent implements OnInit {

ngOnInit() {

// get a list of all projects and create an array of the short names, but only in "create new" mode
// the short name should be unique and with the array list, we can prevent
// to have the same short name; proof it with the ForbiddenName directive
if (!this.projectcode) {
// if projectcode exists, we are in edit mode
// otherwise create new project
if(this.projectcode) {
// edit existing project
// get origin project data first
this._dspApiConnection.admin.projectsEndpoint.getProjectByShortcode(this.projectcode).subscribe(
(response: ApiResponseData<ProjectResponse>) => {
// save the origin project data in case of reset
this.project = response.body.project;

this.buildForm(this.project);

this.loading = false;
},
(error: ApiResponseError) => {
this.errorMessage = error;
}
);

} else {
// create new project

// to avoid dublicate shortcodes or shortnames
// we have to create a list of already exisiting short codes and names
this._dspApiConnection.admin.projectsEndpoint.getProjects().subscribe(
(response: ApiResponseData<ProjectsResponse>) => {

Expand All @@ -149,58 +173,43 @@ export class ProjectFormComponent implements OnInit {
}
);

if (this.project === undefined) {
this.project = new ReadProject();
this.project.status = true;
}
this.project = new ReadProject();
this.project.status = true;

this.buildForm(this.project);

this.loading = false;

} else {
// edit mode
this.sysAdmin = this._session.getSession().user.sysAdmin;
this._dspApiConnection.admin.projectsEndpoint.getProjectByShortcode(this.projectcode).subscribe(
(response: ApiResponseData<ProjectResponse>) => {
this.project = response.body.project;

this.buildForm(this.project);

this.loading = false;
},
(error: ApiResponseError) => {
this.errorMessage = error;
}
);
}
}

/**
* Build form with project data
* Project data contains exising data (edit mode)
* or no data (create mode) => new ReadProject()
*
* @param project Project data: "empty" means "create new project",
* but if there are project data, it means edit mode
* @param project
*/
buildForm(project: ReadProject): void {
// if project is defined, we're in the edit mode
// otherwise "create new project" mode is active
// edit mode is true, when a project id (iri) exists
const editMode: boolean = (!!project.id);
// edit mode is true, when a projectcode exists

// disabled is true, if project status is false (= archived);
const disabled: boolean = (!project.status);

if (!editMode) {
// separate description
if (!this.projectcode) {
this.description = [new StringLiteral()];
this.formErrors['description'] = '';
}

// disabled is true, if project status is false (= archived);
const disabled: boolean = (project.id !== undefined && !project.status);

// separate list of keywords
this.keywords = project.keywords;

this.form = this._fb.group({
'shortname': new FormControl({
value: project.shortname, disabled: editMode
value: project.shortname, disabled: (this.projectcode)
}, [
Validators.required,
Validators.minLength(this.shortnameMinLength),
Expand All @@ -214,42 +223,33 @@ export class ProjectFormComponent implements OnInit {
Validators.required
]),
'shortcode': new FormControl({
value: project.shortcode, disabled: (editMode && project.shortcode !== null)
value: project.shortcode, disabled: ((this.projectcode) && project.shortcode !== null)
}, [
Validators.required,
Validators.minLength(this.shortcodeMinLength),
Validators.maxLength(this.shortcodeMaxLength),
existingNamesValidator(this.existingShortcodes),
Validators.pattern(this.shortcodeRegex)
]),
// 'description': new FormControl({
// value: project.description,
// disabled: disabled
// }, [
// Validators.maxLength(this.descriptionMaxLength),
// Validators.required
// ]),
// 'institution': new FormControl({
// value: project.institution, disabled: disabled
// }),
'logo': new FormControl({
value: project.logo, disabled: disabled
}),
'status': [true],
'selfjoin': [false],
'keywords': new FormControl({
// must be empty (even in edit mode), because of the mat-chip-list
value: [], disabled: disabled
}) // must be empty (even in edit mode), because of the mat-chip-list
})
});

this.form.valueChanges
.subscribe(data => this.onValueChanged(data));
}

/**
* This method is for the form error handling
*
* @param data Data which changed.
* This method is for the form error handling
*/
onValueChanged(data?: any) {

Expand All @@ -272,9 +272,12 @@ export class ProjectFormComponent implements OnInit {
});
}

/**
* Gets string literal
* @param data
*/
getStringLiteral(data: StringLiteral[]) {
this.description = data;

if (!this.description.length) {
this.formErrors['description'] = this.validationMessages['description'].required;
} else {
Expand Down Expand Up @@ -302,7 +305,6 @@ export class ProjectFormComponent implements OnInit {
}

removeKeyword(keyword: any): void {

const index = this.keywords.indexOf(keyword);

if (index >= 0) {
Expand Down Expand Up @@ -349,6 +351,7 @@ export class ProjectFormComponent implements OnInit {
this._dspApiConnection.admin.projectsEndpoint.updateProject(this.project.id, projectData).subscribe(
(response: ApiResponseData<ProjectResponse>) => {

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

Expand All @@ -359,13 +362,6 @@ export class ProjectFormComponent implements OnInit {

this.loading = false;

// redirect to project page
/*
this._router.navigateByUrl('/project', {skipLocationChange: true}).then(() =>
this._router.navigate(['/project/' + this.form.controls['shortcode'].value])
);
*/

},
(error: ApiResponseError) => {
this.errorMessage = error;
Expand Down Expand Up @@ -406,7 +402,7 @@ export class ProjectFormComponent implements OnInit {
(response: ApiResponseData<UserResponse>) => {

this.loading = false;
this.closeMessage();
this.closeDialog.emit();
// redirect to (new) project page
this._router.navigateByUrl('/project', { skipLocationChange: true }).then(() =>
this._router.navigate(['/project/' + this.form.controls['shortcode'].value])
Expand Down Expand Up @@ -519,6 +515,8 @@ export class ProjectFormComponent implements OnInit {
}

/**
* @deprecated Maybe we can reactivate later.
*
* Reset the form
*/
resetForm(ev: Event, project?: ReadProject) {
Expand All @@ -533,7 +531,4 @@ export class ProjectFormComponent implements OnInit {
// this.form.controls['keywords'].setValue(this.keywords);
}

closeMessage() {
this.closeDialog.emit();
}
}

0 comments on commit 1481018

Please sign in to comment.