nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-691 - Add snack bar meaningfull message when triying to save a workbasket and owner is not correctly validated.

This commit is contained in:
Jose Ignacio Recuerda Cambil 2018-08-20 16:08:26 +02:00 committed by Martin Rojas Miguel Angel
parent 928e67f3d5
commit 68701bf7b8
2 changed files with 304 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

433
web/src/app/administration/workbasket/details/information/workbasket-information.component.ts
View File

@ -1,4 +1,12 @@
import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, ViewChild } from '@angular/core'; import {
Component,
OnInit,
Input,
OnDestroy,
OnChanges,
SimpleChanges,
ViewChild
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
@ -12,7 +20,10 @@ import { TaskanaDate } from 'app/shared/util/taskana.date';
import { AlertService } from 'app/services/alert/alert.service'; import { AlertService } from 'app/services/alert/alert.service';
import { ErrorModalService } from 'app/services/errorModal/error-modal.service'; import { ErrorModalService } from 'app/services/errorModal/error-modal.service';
import { SavingWorkbasketService, SavingInformation } from 'app/administration/services/saving-workbaskets/saving-workbaskets.service'; import {
SavingWorkbasketService,
SavingInformation
} from 'app/administration/services/saving-workbaskets/saving-workbaskets.service';
import { WorkbasketService } from 'app/services/workbasket/workbasket.service'; import { WorkbasketService } from 'app/services/workbasket/workbasket.service';
import { RequestInProgressService } from 'app/services/requestInProgress/request-in-progress.service'; import { RequestInProgressService } from 'app/services/requestInProgress/request-in-progress.service';
import { CustomFieldsService } from 'app/services/custom-fields/custom-fields.service'; import { CustomFieldsService } from 'app/services/custom-fields/custom-fields.service';
@ -20,187 +31,283 @@ import { RemoveConfirmationService } from 'app/services/remove-confirmation/remo
import { FormsValidatorService } from 'app/shared/services/forms/forms-validator.service'; import { FormsValidatorService } from 'app/shared/services/forms/forms-validator.service';
@Component({ @Component({
selector: 'taskana-workbasket-information', selector: 'taskana-workbasket-information',
templateUrl: './workbasket-information.component.html', templateUrl: './workbasket-information.component.html',
styleUrls: ['./workbasket-information.component.scss'] styleUrls: ['./workbasket-information.component.scss']
}) })
export class WorkbasketInformationComponent implements OnInit, OnChanges, OnDestroy { export class WorkbasketInformationComponent
implements OnInit, OnChanges, OnDestroy {
@Input()
workbasket: Workbasket;
workbasketClone: Workbasket;
workbasketErrors;
@Input()
action: string;
allTypes: Map<string, string>;
requestInProgress = false;
badgeMessage = '';
@Input() ownerField = this.customFieldsService.getCustomField(
workbasket: Workbasket; 'Owner',
workbasketClone: Workbasket; 'workbaskets.information.owner'
workbasketErrors );
@Input() custom1Field = this.customFieldsService.getCustomField(
action: string; 'Custom 1',
'workbaskets.information.custom1'
);
custom2Field = this.customFieldsService.getCustomField(
'Custom 2',
'workbaskets.information.custom2'
);
custom3Field = this.customFieldsService.getCustomField(
'Custom 3',
'workbaskets.information.custom3'
);
custom4Field = this.customFieldsService.getCustomField(
'Custom 4',
'workbaskets.information.custom4'
);
allTypes: Map<string, string>; toogleValidationMap = new Map<string, boolean>();
requestInProgress = false;
badgeMessage = '';
ownerField = this.customFieldsService.getCustomField('Owner', 'workbaskets.information.owner'); private workbasketSubscription: Subscription;
custom1Field = this.customFieldsService.getCustomField('Custom 1', 'workbaskets.information.custom1');
custom2Field = this.customFieldsService.getCustomField('Custom 2', 'workbaskets.information.custom2');
custom3Field = this.customFieldsService.getCustomField('Custom 3', 'workbaskets.information.custom3');
custom4Field = this.customFieldsService.getCustomField('Custom 4', 'workbaskets.information.custom4');
toogleValidationMap = new Map<string, boolean>();
private workbasketSubscription: Subscription;
private routeSubscription: Subscription; private routeSubscription: Subscription;
private savingValidationSubscription: Subscription; @ViewChild('WorkbasketForm')
@ViewChild('WorkbasketForm') workbasketForm: NgForm; workbasketForm: NgForm;
constructor(private workbasketService: WorkbasketService, constructor(
private alertService: AlertService, private workbasketService: WorkbasketService,
private route: ActivatedRoute, private alertService: AlertService,
private router: Router, private route: ActivatedRoute,
private errorModalService: ErrorModalService, private router: Router,
private savingWorkbasket: SavingWorkbasketService, private errorModalService: ErrorModalService,
private requestInProgressService: RequestInProgressService, private savingWorkbasket: SavingWorkbasketService,
private customFieldsService: CustomFieldsService, private requestInProgressService: RequestInProgressService,
private removeConfirmationService: RemoveConfirmationService, private customFieldsService: CustomFieldsService,
private formsValidatorService: FormsValidatorService) { private removeConfirmationService: RemoveConfirmationService,
this.allTypes = new Map([['PERSONAL', 'Personal'], ['GROUP', 'Group'], private formsValidatorService: FormsValidatorService
['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']]) ) {
this.allTypes = new Map([
['PERSONAL', 'Personal'],
['GROUP', 'Group'],
['CLEARANCE', 'Clearance'],
['TOPIC', 'Topic']
]);
}
} ngOnInit(): void {}
ngOnInit(): void { ngOnChanges(changes: SimpleChanges): void {
} this.workbasketClone = { ...this.workbasket };
if (this.action === ACTION.CREATE) {
this.badgeMessage = 'Creating new workbasket';
} else if (this.action === ACTION.COPY) {
this.badgeMessage = `Copying workbasket: ${this.workbasket.key}`;
}
}
ngOnChanges(changes: SimpleChanges): void { selectType(type: ICONTYPES) {
this.workbasketClone = { ...this.workbasket }; this.workbasket.type = type;
if (this.action === ACTION.CREATE) { }
this.badgeMessage = 'Creating new workbasket';
} else if (this.action === ACTION.COPY) {
this.badgeMessage = `Copying workbasket: ${this.workbasket.key}`;
}
}
selectType(type: ICONTYPES) { onSubmit() {
this.workbasket.type = type; this.formsValidatorService.formSubmitAttempt = true;
} this.formsValidatorService
.validateFormInformation(this.workbasketForm, this.toogleValidationMap)
.then(value => {
if (value) {
this.onSave();
}
});
}
onSubmit() { isFieldValid(field: string): boolean {
this.formsValidatorService.formSubmitAttempt = true; return this.formsValidatorService.isFieldValid(this.workbasketForm, field);
this.formsValidatorService.validateFormInformation(this.workbasketForm, this.toogleValidationMap).then(value => { }
if (value) {
this.onSave(); onClear() {
} this.formsValidatorService.formSubmitAttempt = false;
this.alertService.triggerAlert(
new AlertModel(AlertType.INFO, 'Reset edited fields')
);
this.workbasket = { ...this.workbasketClone };
}
removeWorkbasket() {
this.removeConfirmationService.setRemoveConfirmation(
this.onRemoveConfirmed.bind(this),
`You are going to delete workbasket: ${
this.workbasket.key
}. Can you confirm this action?`
);
}
copyWorkbasket() {
this.router.navigate([{ outlets: { detail: ['copy-workbasket'] } }], {
relativeTo: this.route.parent
}); });
} }
isFieldValid(field: string): boolean { removeDistributionTargets() {
return this.formsValidatorService.isFieldValid(this.workbasketForm, field); this.requestInProgressService.setRequestInProgress(true);
} this.workbasketService
.removeDistributionTarget(
this.workbasket._links.removeDistributionTargets.href
)
.subscribe(
reponse => {
this.requestInProgressService.setRequestInProgress(false);
this.alertService.triggerAlert(
new AlertModel(
AlertType.SUCCESS,
`DistributionTarget for workbasketID: ${
this.workbasket.workbasketId
} was removed successfully`
)
);
},
error => {
this.errorModalService.triggerError(
new ErrorModel(
`There was an error removing distribution target for ${
this.workbasket.workbasketId
}.`,
error
)
);
this.requestInProgressService.setRequestInProgress(false);
}
);
}
onClear() { private onSave() {
this.formsValidatorService.formSubmitAttempt = false; this.beforeRequest();
this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'Reset edited fields')) if (!this.workbasket.workbasketId) {
this.workbasket = { ...this.workbasketClone }; this.postNewWorkbasket();
} return true;
}
removeWorkbasket() { this.workbasketSubscription = this.workbasketService
this.removeConfirmationService.setRemoveConfirmation(this.onRemoveConfirmed.bind(this), .updateWorkbasket(this.workbasket._links.self.href, this.workbasket)
`You are going to delete workbasket: ${this.workbasket.key}. Can you confirm this action?`); .subscribe(
} workbasketUpdated => {
this.afterRequest();
this.workbasket = workbasketUpdated;
this.workbasketClone = { ...this.workbasket };
this.alertService.triggerAlert(
new AlertModel(
AlertType.SUCCESS,
`Workbasket ${workbasketUpdated.key} was saved successfully`
)
);
},
error => {
this.afterRequest();
this.errorModalService.triggerError(
new ErrorModel(
'There was error while saving your workbasket',
error
)
);
}
);
}
copyWorkbasket() { private beforeRequest() {
this.router.navigate([{ outlets: { detail: ['copy-workbasket'] } }], { relativeTo: this.route.parent }); this.requestInProgressService.setRequestInProgress(true);
} }
removeDistributionTargets() { private afterRequest() {
this.requestInProgressService.setRequestInProgress(true); this.requestInProgressService.setRequestInProgress(false);
this.workbasketService.removeDistributionTarget(this.workbasket._links.removeDistributionTargets.href).subscribe(reponse => { this.workbasketService.triggerWorkBasketSaved();
this.requestInProgressService.setRequestInProgress(false); }
this.alertService.triggerAlert(
new AlertModel(AlertType.SUCCESS, `DistributionTarget for workbasketID: ${this.workbasket.workbasketId} was removed successfully`))
}, error => {
this.errorModalService.triggerError(
new ErrorModel(`There was an error removing distribution target for ${this.workbasket.workbasketId}.`, error))
this.requestInProgressService.setRequestInProgress(false);
});
}
private onSave() { private postNewWorkbasket() {
this.beforeRequest(); this.addDateToWorkbasket();
if (!this.workbasket.workbasketId) { this.workbasketService.createWorkbasket(this.workbasket).subscribe(
this.postNewWorkbasket(); (workbasketUpdated: Workbasket) => {
return true; this.alertService.triggerAlert(
} new AlertModel(
AlertType.SUCCESS,
`Workbasket ${workbasketUpdated.key} was created successfully`
)
);
this.workbasket = workbasketUpdated;
this.afterRequest();
this.workbasketService.triggerWorkBasketSaved();
this.workbasketService.selectWorkBasket(this.workbasket.workbasketId);
this.router.navigate(['../' + this.workbasket.workbasketId], {
relativeTo: this.route
});
if (this.action === ACTION.COPY) {
this.savingWorkbasket.triggerDistributionTargetSaving(
new SavingInformation(
this.workbasket._links.distributionTargets.href,
this.workbasket.workbasketId
)
);
this.savingWorkbasket.triggerAccessItemsSaving(
new SavingInformation(
this.workbasket._links.accessItems.href,
this.workbasket.workbasketId
)
);
}
},
error => {
this.errorModalService.triggerError(
new ErrorModel('There was an error creating a workbasket', error)
);
this.requestInProgressService.setRequestInProgress(false);
}
);
}
this.workbasketSubscription = (this.workbasketService.updateWorkbasket(this.workbasket._links.self.href, this.workbasket).subscribe( private addDateToWorkbasket() {
workbasketUpdated => { const date = TaskanaDate.getDate();
this.afterRequest(); this.workbasket.created = date;
this.workbasket = workbasketUpdated; this.workbasket.modified = date;
this.workbasketClone = { ...this.workbasket }; }
this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket ${workbasketUpdated.key} was saved successfully`))
},
error => {
this.afterRequest();
this.errorModalService.triggerError(new ErrorModel('There was error while saving your workbasket', error))
}
));
}
private beforeRequest() { private onRemoveConfirmed() {
this.requestInProgressService.setRequestInProgress(true); this.requestInProgressService.setRequestInProgress(true);
} this.workbasketService
.deleteWorkbasket(this.workbasket._links.self.href)
private afterRequest() { .subscribe(
this.requestInProgressService.setRequestInProgress(false); response => {
this.workbasketService.triggerWorkBasketSaved(); this.requestInProgressService.setRequestInProgress(false);
this.workbasketService.triggerWorkBasketSaved();
} this.alertService.triggerAlert(
new AlertModel(
private postNewWorkbasket() { AlertType.SUCCESS,
this.addDateToWorkbasket(); `Workbasket ${
this.workbasketService.createWorkbasket(this.workbasket) this.workbasket.workbasketId
.subscribe((workbasketUpdated: Workbasket) => { } was removed successfully`
this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket ${workbasketUpdated.key} was created successfully`)) )
this.workbasket = workbasketUpdated; );
this.afterRequest(); this.router.navigate(['administration/workbaskets']);
this.workbasketService.triggerWorkBasketSaved(); },
this.workbasketService.selectWorkBasket(this.workbasket.workbasketId); error => {
this.router.navigate(['../' + this.workbasket.workbasketId], { relativeTo: this.route }); this.requestInProgressService.setRequestInProgress(false);
if (this.action === ACTION.COPY) { this.errorModalService.triggerError(
this.savingWorkbasket.triggerDistributionTargetSaving( new ErrorModel(
new SavingInformation(this.workbasket._links.distributionTargets.href, this.workbasket.workbasketId)); `There was an error deleting workbasket ${
this.savingWorkbasket.triggerAccessItemsSaving( this.workbasket.workbasketId
new SavingInformation(this.workbasket._links.accessItems.href, this.workbasket.workbasketId)); }`,
} error
}, error => { )
this.errorModalService.triggerError(new ErrorModel('There was an error creating a workbasket', error)) );
this.requestInProgressService.setRequestInProgress(false); }
}); );
} }
private addDateToWorkbasket() {
const date = TaskanaDate.getDate();
this.workbasket.created = date;
this.workbasket.modified = date;
}
private onRemoveConfirmed() {
this.requestInProgressService.setRequestInProgress(true);
this.workbasketService.deleteWorkbasket(this.workbasket._links.self.href).subscribe(response => {
this.requestInProgressService.setRequestInProgress(false);
this.workbasketService.triggerWorkBasketSaved();
this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS,
`Workbasket ${this.workbasket.workbasketId} was removed successfully`))
this.router.navigate(['administration/workbaskets']);
}, error => {
this.requestInProgressService.setRequestInProgress(false);
this.errorModalService.triggerError(new ErrorModel(
`There was an error deleting workbasket ${this.workbasket.workbasketId}`, error))
});
}
ngOnDestroy() {
if (this.workbasketSubscription) { this.workbasketSubscription.unsubscribe(); }
if (this.routeSubscription) { this.routeSubscription.unsubscribe(); }
if (this.savingValidationSubscription) { this.savingValidationSubscription.unsubscribe(); }
}
ngOnDestroy() {
if (this.workbasketSubscription) {
this.workbasketSubscription.unsubscribe();
}
if (this.routeSubscription) {
this.routeSubscription.unsubscribe();
}
}
} }

50
web/src/app/shared/services/forms/forms-validator.service.ts
View File

@ -8,6 +8,7 @@ import { AccessIdsService } from 'app/shared/services/access-ids/access-ids.serv
export class FormsValidatorService { export class FormsValidatorService {
public formSubmitAttempt = false; public formSubmitAttempt = false;
private workbasketOwner = 'workbasket.owner';
constructor( constructor(
private alertService: AlertService, private alertService: AlertService,
@ -29,26 +30,34 @@ export class FormsValidatorService {
}); });
const ownerPromise = new Promise((resolve, reject) => { const ownerPromise = new Promise((resolve, reject) => {
if (form.form.controls['workbasket.owner']) { const ownerString = 'owner';
this.accessIdsService.getAccessItemsInformation(form.form.controls['workbasket.owner'].value).subscribe(items => { if (form.form.controls[this.workbasketOwner]) {
const validationState = toogleValidationMap.get('workbasket.owner'); this.accessIdsService.getAccessItemsInformation(form.form.controls[this.workbasketOwner].value).subscribe(items => {
validationState ? toogleValidationMap.set('workbasket.owner', !validationState) : const validationState = toogleValidationMap.get(this.workbasketOwner);
toogleValidationMap.set('workbasket.owner', true); validationState ? toogleValidationMap.set(this.workbasketOwner, !validationState) :
items.find(item => item.accessId === form.form.controls['workbasket.owner'].value) ? resolve(true) : resolve(false); toogleValidationMap.set(this.workbasketOwner, true);
items.find(item => item.accessId === form.form.controls[this.workbasketOwner].value) ?
resolve(new ResponseOwner({valid: true, field: ownerString})) :
resolve(new ResponseOwner({valid: false, field: ownerString}));
}); });
} else { } else {
const validationState = toogleValidationMap.get(form.form.controls['workbasket.owner']); const validationState = toogleValidationMap.get(form.form.controls[this.workbasketOwner]);
validationState ? toogleValidationMap.set('workbasket.owner', !validationState) : validationState ? toogleValidationMap.set(this.workbasketOwner, !validationState) :
toogleValidationMap.set('workbasket.owner', true); toogleValidationMap.set(this.workbasketOwner, true);
resolve(true); resolve(new ResponseOwner({valid: true, field: ownerString}));
} }
}); });
return Promise.all([forFieldsPromise, ownerPromise]).then(values => { return Promise.all([forFieldsPromise, ownerPromise]).then(values => {
if (!(values[0] && values[1])) { const responseOwner = new ResponseOwner(values[1]);
this.alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'There are some empty fields which are required.')) if (!(values[0] && responseOwner.valid)) {
if (!responseOwner.valid) {
this.alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'The ' + responseOwner.field + ' introduced is not valid.'))
} else {
this.alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'There are some empty fields which are required.'))
}
} }
return values[0] && values[1]; return values[0] && responseOwner.valid;
}); });
} }
@ -61,18 +70,22 @@ export class FormsValidatorService {
validationState ? toogleValidationAccessIdMap.set(i, !validationState) : validationState ? toogleValidationAccessIdMap.set(i, !validationState) :
toogleValidationAccessIdMap.set(i, true); toogleValidationAccessIdMap.set(i, true);
this.accessIdsService.getAccessItemsInformation(form.controls[i].value['accessId']).subscribe(items => { this.accessIdsService.getAccessItemsInformation(form.controls[i].value['accessId']).subscribe(items => {
items.length > 0 ? resolve(true) : resolve(false); items.length > 0 ?
resolve(new ResponseOwner({valid: true, field: 'access id'})) :
resolve(new ResponseOwner({valid: false, field: 'access id'}));
}) })
})); }));
} }
let result = true; let result = true;
return Promise.all(ownerPromise).then(values => { return Promise.all(ownerPromise).then(values => {
let responseOwner;
for (let i = 0; i < values.length; i++) { for (let i = 0; i < values.length; i++) {
result = result && values[i]; responseOwner = new ResponseOwner(values[i]);
result = result && responseOwner.valid;
} }
if (!result) { if (!result) {
this.alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'There are some empty fields which are required.')) this.alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'The ' + responseOwner.field + ' introduced is not valid.'))
} }
return result; return result;
}); });
@ -89,3 +102,8 @@ export class FormsValidatorService {
(ngForm.form.controls[field].touched && ngForm.form.controls[field].valid); (ngForm.form.controls[field].touched && ngForm.form.controls[field].valid);
} }
} }
function ResponseOwner(obj) {
this.valid = obj.valid;
this.field = obj.field;
}