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

Replace reset buttons with cancel button #284

Merged
merged 1 commit into from Aug 18, 2020
Merged

Replace reset buttons with cancel button #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/app/main/dialog/dialog.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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();
}
}