user profile ui changes

This commit is contained in:
amentis 2024-05-10 18:19:28 +03:00
parent f383ef520f
commit 830e06df31
5 changed files with 257 additions and 132 deletions

View File

@ -113,10 +113,7 @@ public class UserAdditionalInfoPersist {
.failOn(UserAdditionalInfoPersist._culture).failWith(messageSource.getMessage("Validation_Required", new Object[]{UserAdditionalInfoPersist._culture}, LocaleContextHolder.getLocale())),
this.spec()
.must(() -> !this.isEmpty(item.getLanguage()))
.failOn(UserAdditionalInfoPersist._language).failWith(messageSource.getMessage("Validation_Required", new Object[]{UserAdditionalInfoPersist._language}, LocaleContextHolder.getLocale())),
this.spec()
.must(() -> !this.isNull(item.getOrganizationId()))
.failOn(UserAdditionalInfoPersist._organizationId).failWith(messageSource.getMessage("Validation_Required", new Object[]{UserAdditionalInfoPersist._organizationId}, LocaleContextHolder.getLocale()))
.failOn(UserAdditionalInfoPersist._language).failWith(messageSource.getMessage("Validation_Required", new Object[]{UserAdditionalInfoPersist._language}, LocaleContextHolder.getLocale()))
);
}
}

View File

@ -1,41 +1,162 @@
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
import { Reference } from '@app/core/model/reference/reference';
import { User } from '@app/core/model/user/user';
import { User, UserAdditionalInfo, UserAdditionalInfoPersist, UserPersist } from '@app/core/model/user/user';
import { BaseEditorModel } from '@common/base/base-form-editor-model';
import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { Validation, ValidationContext } from '@common/forms/validation/validation-context';
import { Guid } from '@common/types/guid';
export class UserProfileEditorModel {
public id: Guid;
public name: String;
public language: any;
public culture: any;
public timezone: String;
public organization: Reference;
public roleOrganization: RoleOrganizationType;
fromModel(item: User): UserProfileEditorModel {
this.id = item.id;
this.name = item.name;
this.language = item.additionalInfo.language;
this.timezone = item.additionalInfo.timezone;
this.culture = item.additionalInfo.culture;
this.organization = item.additionalInfo.organization;
this.roleOrganization = item.additionalInfo.roleOrganization;
export class UserProfileEditorModel extends BaseEditorModel implements UserPersist {
name: string;
additionalInfo: UserAdditionalInfoEditorModel = new UserAdditionalInfoEditorModel();
permissions: string[];
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
constructor() { super(); }
public fromModel(item: User): UserProfileEditorModel {
if (item) {
super.fromModel(item);
this.name = item.name;
this.additionalInfo = new UserAdditionalInfoEditorModel(this.validationErrorModel).fromModel(item.additionalInfo);
}
return this;
}
buildForm(availableLanguages: any[]): UntypedFormGroup {
const formGroup = new UntypedFormBuilder().group({
id: new UntypedFormControl(this.id),
name: new UntypedFormControl(this.name),
language: new UntypedFormControl(this.language ? availableLanguages.filter(x => x === this.language).pop() : '', [Validators.required]),
timezone: new UntypedFormControl(this.timezone, [Validators.required]),
culture: new UntypedFormControl(this.culture, [Validators.required]),
organization: new UntypedFormControl(this.organization),
roleOrganization: new UntypedFormControl(this.roleOrganization),
});
buildForm(availableLanguages: any[], context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
if (context == null) { context = this.createValidationContext(); }
return this.formBuilder.group({
id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators],
name: [{ value: this.name, disabled: disabled }, context.getValidation('name').validators],
additionalInfo: this.additionalInfo.buildForm({
availableLanguages: availableLanguages,
rootPath: `additionalInfo.`,
disabled: disabled
}),
hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators]
});
}
createValidationContext(): ValidationContext {
const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>();
baseValidationArray.push({ key: 'id', validators: [BackendErrorValidator(this.validationErrorModel, 'id')] });
baseValidationArray.push({ key: 'name', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'name')] });
baseValidationArray.push({ key: 'hash', validators: [] });
baseContext.validation = baseValidationArray;
return baseContext;
}
static reApplySectionValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
}): void {
const { formGroup, validationErrorModel } = params;
UserAdditionalInfoEditorModel.reapplyValidators({
formGroup: formGroup?.get('additionalInfo') as UntypedFormGroup,
rootPath: `additionalInfo.`,
validationErrorModel: validationErrorModel
});
formGroup.updateValueAndValidity();
}
}
export class UserAdditionalInfoEditorModel implements UserAdditionalInfoPersist {
avatarUrl: String;
timezone: String;
culture: String;
language: String;
roleOrganization: RoleOrganizationType;
organizationId: Guid;
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
constructor(
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel()
) { }
public fromModel(item: UserAdditionalInfo): UserAdditionalInfoEditorModel {
if (item) {
this.avatarUrl = item.avatarUrl;
this.timezone = item.timezone;
this.culture = item.culture;
this.language = item.language;
this.roleOrganization = item.roleOrganization
this.organizationId = item.organization?.id
}
return this;
}
buildForm(params?: {
availableLanguages: any[],
context?: ValidationContext,
disabled?: boolean,
rootPath?: string
}): UntypedFormGroup {
let {availableLanguages = null, context = null, disabled = false, rootPath } = params ?? {}
if (context == null) {
context = UserAdditionalInfoEditorModel.createValidationContext({
validationErrorModel: this.validationErrorModel,
rootPath
});
}
return this.formBuilder.group({
avatarUrl: [{ value: this.avatarUrl, disabled: disabled }, context.getValidation('avatarUrl').validators],
timezone: [{ value: this.timezone, disabled: disabled }, context.getValidation('timezone').validators],
culture: [{ value: this.culture, disabled: disabled }, context.getValidation('culture').validators],
language: [{ value: this.language ? availableLanguages.filter(x => x === this.language).pop() : '', disabled: disabled }, context.getValidation('language').validators],
roleOrganization: [{ value: this.roleOrganization, disabled: disabled }, context.getValidation('roleOrganization').validators],
organizationId: [{ value: this.organizationId, disabled: disabled }, context.getValidation('organizationId').validators],
});
}
static createValidationContext(params: {
rootPath?: string,
validationErrorModel: ValidationErrorModel
}): ValidationContext {
const { rootPath = '', validationErrorModel } = params;
const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>();
baseValidationArray.push({ key: 'avatarUrl', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}avatarUrl`)] });
baseValidationArray.push({ key: 'timezone', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}timezone`)] });
baseValidationArray.push({ key: 'culture', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}culture`)] });
baseValidationArray.push({ key: 'language', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}language`)] });
baseValidationArray.push({ key: 'roleOrganization', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}roleOrganization`)] });
baseValidationArray.push({ key: 'organizationId', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}organizationId`)] });
baseContext.validation = baseValidationArray;
return baseContext;
}
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = UserAdditionalInfoEditorModel.createValidationContext({
rootPath,
validationErrorModel
});
['avatarUrl', 'timezone', 'culture', 'language', 'roleOrganization', 'organizationId'].forEach(keyField => {
const control = formGroup?.get(keyField);
control?.clearValidators();
control?.addValidators(context.getValidation(keyField).validators);
});
return formGroup;
}
}

View File

@ -111,7 +111,7 @@
<div class="row">
<div class="col organization-form">
<mat-form-field class="w-100">
<app-single-auto-complete placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('organization')" [configuration]="organisationsAutoCompleteConfiguration"></app-single-auto-complete>
<app-single-auto-complete placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('organizationId')" [configuration]="organisationsSingleAutoCompleteConfiguration"></app-single-auto-complete>
</mat-form-field>
</div>
</div>
@ -124,7 +124,7 @@
<div class="row">
<div class="col role-form">
<mat-form-field class="w-100">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('roleOrganization')">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('roleOrganization')">
<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
<mat-option [value]="roleOrganizationEnum.Researcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Researcher)}}</mat-option>
@ -154,13 +154,13 @@
<div class="row">
<div class="col timezone-form">
<mat-form-field class="w-100">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('timezone')" matInput [matAutocomplete]="timezone" required>
<mat-autocomplete #timezone="matAutocomplete">
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
{{ timezone | timezoneInfoDisplay }}
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="this.formGroup.get('timezone').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="this.formGroup.get('additionalInfo').get('timezone').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
@ -173,13 +173,13 @@
<div class="row">
<div class="col culture-form">
<mat-form-field class="w-100">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('culture')" matInput [matAutocomplete]="culture" required>
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let culture of cultures | async" [value]="culture">
{{ culture.displayName }} - {{ culture.nativeName }}
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="this.formGroup.get('culture').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="this.formGroup.get('additionalInfo').get('culture').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
@ -194,12 +194,12 @@
<mat-form-field class="w-100">
<!-- <mat-label>{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}</mat-label> -->
<mat-select [formControl]="this.formGroup.get('language')" name="language">
<mat-select [formControl]="this.formGroup.get('additionalInfo').get('language')" name="language">
<mat-option *ngFor="let language of languages" [value]="language">
{{ "GENERAL.LANGUAGES."+ language | translate }}
</mat-option>
</mat-select>
<mat-error *ngIf="this.formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="this.formGroup.get('additionalInfo').get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>

View File

@ -6,7 +6,7 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
import { CultureInfo } from '@app/core/model/culture-info';
import { Reference } from '@app/core/model/reference/reference';
import { User, UserCredential } from '@app/core/model/user/user';
import { User, UserCredential, UserPersist } from '@app/core/model/user/user';
import { AuthService } from '@app/core/services/auth/auth.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { CultureService } from '@app/core/services/culture/culture-service';
@ -32,6 +32,11 @@ import { BaseHttpParams } from '@common/http/base-http-params';
import { InterceptorType } from '@common/http/interceptors/interceptor-type';
import { PrincipalService } from '@app/core/services/http/principal.service';
import { KeycloakService } from 'keycloak-angular';
import { FormService } from '@common/forms/form-service';
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
@Component({
selector: 'app-user-profile',
@ -58,13 +63,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
tenants: Observable<Array<string>>;
expandedPreferences: boolean = false;
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
initialItems: (excludedItems: any[]) => this.filterOrganisations('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
displayFn: (item) => item['name'],
titleFn: (item) => item['name'],
subtitleFn: (item) => item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'))
};
organisationsSingleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
formGroup: UntypedFormGroup;
tenantFormGroup: UntypedFormGroup;
@ -86,7 +85,10 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
private matomoService: MatomoService,
private formBuilder: UntypedFormBuilder,
private keycloakService: KeycloakService,
private principalService: PrincipalService
private principalService: PrincipalService,
private formService: FormService,
private referenceService: ReferenceService,
private referenceTypeService: ReferenceTypeService
) {
super();
this.languages = this.languageService.getAvailableLanguagesCodes();
@ -115,59 +117,11 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
tenantCode: [this.authService.selectedTenant(), [Validators.required]]
});
this.matomoService.trackPageView('User Profile');
this.organisationsSingleAutoCompleteConfiguration = this.referenceService.getSingleAutocompleteSearchConfiguration(this.referenceTypeService.getOrganizationReferenceType(), null);
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
this.currentUserId = this.authService.userId()?.toString();
this.user = this.userService.getSingle(
Guid.parse(this.currentUserId),
[
nameof<User>(x => x.id),
nameof<User>(x => x.name),
nameof<User>(x => x.additionalInfo.language),
nameof<User>(x => x.additionalInfo.timezone),
nameof<User>(x => x.additionalInfo.culture),
nameof<User>(x => x.additionalInfo.organization),
nameof<User>(x => x.additionalInfo.roleOrganization),
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.email)}`,
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.externalProviderNames)}`,
]
)
.pipe(map(result => {
//tested ui with fake data
// const fakecredentials: UserCredential = {
// "id": Guid.createEmpty(),
// "externalId": "123",
// "user": null,
// "createdAt": new Date(),
// "data": {
// "email": "dmpadmin@dmp.com",
// "externalProviderNames": ["Google", "Facebook"]
// }
// };
// result.credentials.push(fakecredentials);
// result.credentials[0].data.externalProviderNames = ['Google'];
this.userLanguage = result.additionalInfo.language;
this.firstEmail = result.credentials[0].data.email;
this.userCredentials = of(result.credentials);
this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes());
//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
this.formGroup.get('timezone').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
this.formGroup.get('culture').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
// this.initializeDisabledFormGroup();
this.tenants = this.loadUserTenants();
this.unlock();
return result;
}));
this.getOrRefreshData();
//TODO: refactor
// this.userService.getEmails(userId).pipe(takeUntil(this._destroyed))
@ -183,6 +137,62 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
}
getOrRefreshData(){
this.currentUserId = this.authService.userId()?.toString();
this.user = this.userService.getSingle(
Guid.parse(this.currentUserId),
[
nameof<User>(x => x.id),
nameof<User>(x => x.name),
nameof<User>(x => x.additionalInfo.language),
nameof<User>(x => x.additionalInfo.timezone),
nameof<User>(x => x.additionalInfo.culture),
nameof<User>(x => x.additionalInfo.organization),
nameof<User>(x => x.additionalInfo.roleOrganization),
nameof<User>(x => x.createdAt),
nameof<User>(x => x.updatedAt),
nameof<User>(x => x.hash),
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.email)}`,
`${nameof<User>(x => x.credentials)}.${nameof<UserCredential>(x => x.data.externalProviderNames)}`,
]
)
.pipe(map(result => {
//tested ui with fake data
// const fakecredentials: UserCredential = {
// "id": Guid.createEmpty(),
// "externalId": "123",
// "user": null,
// "createdAt": new Date(),
// "data": {
// "email": "dmpadmin@dmp.com",
// "externalProviderNames": ["Google", "Facebook"]
// }
// };
// result.credentials.push(fakecredentials);
// result.credentials[0].data.externalProviderNames = ['Google'];
this.userLanguage = result.additionalInfo.language;
this.firstEmail = result.credentials[0].data.email;
this.userCredentials = of(result.credentials);
this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes());
//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
this.formGroup.get('additionalInfo').get('timezone').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
this.formGroup.get('additionalInfo').get('culture').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
// this.initializeDisabledFormGroup();
this.tenants = this.loadUserTenants();
this.unlock();
return result;
}));
}
ngOnDestroy(): void {
}
@ -192,12 +202,6 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
return result != null;
}
private filterOrganisations(value: string): Observable<Reference[]> {
//TODO: refactor
// return this.externalSourcesService.searchDMPOrganizations(value);
return null;
}
private _filterTimezone(value: string): Observable<any[]> {
if (value && typeof value === 'string') {
const filterValue = value.toLowerCase();
@ -227,32 +231,35 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
}
save() {
//TODO: refactor
// if (!this.formGroup.valid) {
// this.printErrors(this.formGroup);
// this.showValidationErrorsDialog();
// this.nestedCount = [];
// this.nestedIndex = 0;
// this.errorMessages = [];
// return;
// }
// this.userService.updateUserSettings(this.formGroup.value)
// .pipe(takeUntil(this._destroyed))
// .subscribe(
// x => {
// this.editMode = false;
// this.languageService.changeLanguage(this.formGroup.value.language.value);
// this.authService.refresh()
// .pipe(takeUntil(this._destroyed))
// .subscribe(result => {
// this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
// this.router.navigate(['/profile']);
// });
// // .subscribe(result => window.location.reload());
// },
// error => {
// console.log(error);
// });
this.formService.removeAllBackEndErrors(this.formGroup);
this.formService.touchAllFormFields(this.formGroup);
if (!this.formGroup.valid) {
this.printErrors(this.formGroup);
this.showValidationErrorsDialog();
this.nestedCount = [];
this.nestedIndex = 0;
this.errorMessages = [];
return;
}
const formData = this.formService.getValue(this.formGroup.value) as UserPersist;
this.userService.persist(formData)
.pipe(takeUntil(this._destroyed))
.subscribe(
x => {
this.editMode = false;
this.languageService.changeLanguage(this.formGroup.get('additionalInfo').get('language').value);
this.getOrRefreshData();
this.authService.refresh()
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.router.navigate(['/profile']);
});
// .subscribe(result => window.location.reload());
},
error => {
console.log(error);
});
}
public unlock() {

View File

@ -118,7 +118,7 @@ export class UserProfileNotifierListEditorComponent extends BaseComponent implem
}
onCallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.language.instant('COMMONS.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.getConfiguration();
}