fix user edit not populating fields

This commit is contained in:
Dan Percic 2021-11-24 12:11:47 +02:00
parent dd8b49ba0e
commit ee8f72d3ef

View File

@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AdminDialogService } from '../../../services/admin-dialog.service';
import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
import { AutoUnsubscribe, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
import { rolesTranslations } from '../../../../../translations/roles-translations';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { User } from '@red/domain';
@ -13,7 +13,7 @@ import { HttpStatusCode } from '@angular/common/http';
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.scss'],
})
export class UserDetailsComponent {
export class UserDetailsComponent extends AutoUnsubscribe implements OnChanges, OnDestroy {
readonly iconButtonTypes = IconButtonTypes;
@Input() user: User;
@ -22,8 +22,8 @@ export class UserDetailsComponent {
readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
readonly translations = rolesTranslations;
form: FormGroup;
private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
readonly form: FormGroup = this._getForm();
constructor(
private readonly _formBuilder: FormBuilder,
@ -32,7 +32,7 @@ export class UserDetailsComponent {
private readonly _loadingService: LoadingService,
readonly userService: UserService,
) {
this._setRolesRequirements();
super();
}
get changed(): boolean {
@ -67,36 +67,6 @@ export class UserDetailsComponent {
}, []);
}
shouldBeDisabled(role: string): boolean {
if (!this.user) {
return false;
}
const isCurrentAdminUser = this.user.isAdmin && this.user.id === this.userService.currentUser.id;
return (
(role === 'RED_ADMIN' && isCurrentAdminUser) ||
Object.keys(this._ROLE_REQUIREMENTS).reduce(
(value, key) => value || (role === this._ROLE_REQUIREMENTS[key] && this.user.roles.includes(key)),
false,
)
);
}
private _getForm(): FormGroup {
return this._formBuilder.group({
firstName: [this.user?.firstName, Validators.required],
lastName: [this.user?.lastName, Validators.required],
email: [
{
value: this.user?.email,
disabled: !!this.user,
},
[Validators.required, Validators.email],
],
...this._rolesControls,
});
}
private get _rolesControls(): any {
return this.ROLES.reduce(
(prev, role) => ({
@ -112,6 +82,26 @@ export class UserDetailsComponent {
);
}
ngOnChanges() {
this.form = this._getForm();
this._setRolesRequirements();
}
shouldBeDisabled(role: string): boolean {
if (!this.user) {
return false;
}
const isCurrentAdminUser = this.user.isAdmin && this.user.id === this.userService.currentUser.id;
return (
(role === 'RED_ADMIN' && isCurrentAdminUser) ||
Object.keys(this._ROLE_REQUIREMENTS).reduce(
(value, key) => value || (role === this._ROLE_REQUIREMENTS[key] && this.user.roles.includes(key)),
false,
)
);
}
async save() {
this._loadingService.start();
const userData = { ...this.form.getRawValue(), roles: this.activeRoles };
@ -143,9 +133,24 @@ export class UserDetailsComponent {
});
}
private _getForm(): FormGroup {
return this._formBuilder.group({
firstName: [this.user?.firstName, Validators.required],
lastName: [this.user?.lastName, Validators.required],
email: [
{
value: this.user?.email,
disabled: !!this.user,
},
[Validators.required, Validators.email],
],
...this._rolesControls,
});
}
private _setRolesRequirements() {
for (const key of Object.keys(this._ROLE_REQUIREMENTS)) {
this.form.controls[key].valueChanges.subscribe(checked => {
this.addSubscription = this.form.controls[key].valueChanges.subscribe(checked => {
if (checked) {
this.form.patchValue({ [this._ROLE_REQUIREMENTS[key]]: true });
this.form.controls[this._ROLE_REQUIREMENTS[key]].disable();