Skip to content

Commit ea9b785

Browse files
shawonshawon
shawon
authored and
shawon
committed
added form-control to user modal and set password modal
1 parent 2fef271 commit ea9b785

File tree

4 files changed

+216
-128
lines changed

4 files changed

+216
-128
lines changed

‎eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
22
<div mat-dialog-content>
3-
<form #form="ngForm" class="need-wrapper">
3+
<form #form="ngForm" [formGroup]="userForm" class="need-wrapper">
44
<div class="d-flex flex-row">
55
<mat-form-field>
66
<mat-label>{{ 'First name' | translate }}</mat-label>
77
<input
8-
matInput
9-
type="text"
10-
[disabled]="userModel.isDeviceUser"
11-
[(ngModel)]="userModel.firstName"
12-
[id]="edit ? 'editFirstName' : 'createFirstName'"
13-
[name]="edit ? 'editFirstName' : 'createFirstName'"
8+
matInput
9+
type="text"
10+
[disabled]="isDeviceUser"
11+
formControlName="firstName"
12+
[id]="edit ? 'editFirstName' : 'createFirstName'"
13+
[name]="edit ? 'editFirstName' : 'createFirstName'"
1414
>
1515
</mat-form-field>
1616
<mat-form-field>
1717
<mat-label>{{ 'Last name' | translate }}</mat-label>
1818
<input
1919
matInput
2020
type="text"
21-
[disabled]="userModel.isDeviceUser"
22-
[(ngModel)]="userModel.lastName"
21+
[disabled]="isDeviceUser"
22+
formControlName="lastName"
2323
[name]="edit ? 'editLastName' : 'createLastName'"
2424
[id]="edit ? 'editLastName' : 'createLastName'"
2525
>
@@ -31,9 +31,8 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
3131
<input
3232
matInput
3333
required
34-
#createEmail="ngModel"
35-
type="text"
36-
[(ngModel)]="userModel.email"
34+
type="email"
35+
formControlName="email"
3736
[id]="edit ? 'emailEdit' : 'createEmail'"
3837
[name]="edit ? 'emailEdit' : 'createEmail'"
3938
>
@@ -44,7 +43,7 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
4443
matInput
4544
required
4645
type="password"
47-
[(ngModel)]="userModel.password"
46+
formControlName="password"
4847
[id]="edit ? 'editPassword' : 'createPassword'"
4948
[name]="edit ? 'editPassword' : 'createPassword'"
5049
>
@@ -58,8 +57,7 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
5857
bindLabel="name"
5958
bindValue="id"
6059
[clearable]="false"
61-
[(ngModel)]="userModel.role"
62-
[name]="edit ? 'editRole' : 'createRole'"
60+
formControlName="role"
6361
[id]="edit ? 'editRole' : 'createRole'"
6462
id="createRole"
6563
appendTo="body"
@@ -69,14 +67,13 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
6967
]"
7068
></mtx-select>
7169
</mat-form-field>
72-
<mat-form-field *ngIf="userModel.role !== 'admin'">
70+
<mat-form-field *ngIf="userForm.get('role')?.value !== 'admin'">
7371
<mat-label>{{ 'Group' | translate }}</mat-label>
7472
<mtx-select
7573
required
7674
bindLabel="groupName"
7775
bindValue="id"
78-
[(ngModel)]="userModel.groupId"
79-
[name]="edit ? 'editGroup' : 'createGroup'"
76+
formControlName="groupId"
8077
[id]="edit ? 'editGroup' : 'createGroup'"
8178
appendTo="body"
8279
[items]="availableGroups.entities"
@@ -87,11 +84,11 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
8784
</div>
8885
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
8986
<button
90-
[disabled]="!form.form.valid"
9187
mat-raised-button
9288
color="accent"
9389
type="submit"
94-
(click)="edit ? updateUser() : createUser()"
90+
[disabled]="userForm.invalid"
91+
(click)="submit()"
9592
[id]="edit ? 'editUserSaveBtn' : 'createAdministrationUserBtn'"
9693
>
9794
{{ (edit ? 'Save' : 'Create') | translate }}

‎eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.ts‎

Lines changed: 89 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,121 @@
1-
import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
2-
import { Paged } from 'src/app/common/models/common';
3-
import { SecurityGroupModel } from 'src/app/common/models/security';
4-
import { UserRegisterModel } from 'src/app/common/models/user';
5-
import { AdminService } from 'src/app/common/services/users';
1+
import {Component, EventEmitter, Input, OnInit, Output, inject} from '@angular/core';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
3+
import {Paged} from 'src/app/common/models/common';
4+
import {SecurityGroupModel} from 'src/app/common/models/security';
5+
import {UserRegisterModel} from 'src/app/common/models/user';
6+
import {AdminService} from 'src/app/common/services/users';
67
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
78

89
@Component({
9-
selector: 'app-user-modal',
10-
templateUrl: './user-modal.component.html',
11-
styleUrls: ['./user-modal.component.scss'],
12-
standalone: false
10+
selector: 'app-user-modal',
11+
templateUrl: './user-modal.component.html',
12+
styleUrls: ['./user-modal.component.scss'],
13+
standalone: false
1314
})
1415
export class UserModalComponent implements OnInit {
16+
private fb = inject(FormBuilder);
1517
private adminService = inject(AdminService);
1618
dialogRef = inject<MatDialogRef<UserModalComponent>>(MatDialogRef);
17-
18-
userModel: UserRegisterModel = new UserRegisterModel();
19+
userForm: FormGroup;
1920
public availableGroups: Paged<SecurityGroupModel> = new Paged<SecurityGroupModel>();
2021
edit: boolean = false;
22+
selectedId?: number;
23+
isDeviceUser = false;
2124

2225
constructor() {
23-
const data = inject<{
24-
availableGroups: Paged<SecurityGroupModel>;
25-
selectedId?: number;
26-
}>(MAT_DIALOG_DATA);
27-
26+
const data = inject<{ availableGroups: Paged<SecurityGroupModel>; selectedId?: number }>(MAT_DIALOG_DATA);
2827
this.availableGroups = data.availableGroups;
29-
if(data.selectedId) {
28+
this.selectedId = data.selectedId;
29+
30+
this.userForm = this.fb.group({
31+
firstName: ['', Validators.required],
32+
lastName: ['', Validators.required],
33+
email: ['', [Validators.required, Validators.email]],
34+
password: [''],
35+
role: ['user', Validators.required],
36+
groupId: [null, Validators.required]
37+
});
38+
39+
if (data.selectedId) {
3040
this.edit = true;
31-
this.getUserInfo(data.selectedId);
41+
this.loadUser(data.selectedId);
3242
}
3343
}
3444

35-
ngOnInit() {}
45+
ngOnInit() {
46+
if (this.edit) {
47+
this.userForm.get('password')?.clearValidators();
48+
this.userForm.get('password')?.updateValueAndValidity();
49+
} else {
50+
this.userForm.get('password')?.setValidators(Validators.required);
51+
this.userForm.get('password')?.updateValueAndValidity();
52+
}
53+
this.userForm.get('password')?.updateValueAndValidity();
3654

37-
createUser() {
38-
this.adminService.createUser(this.userModel).subscribe((data) => {
39-
if (data && data.success) {
40-
this.hide(true);
55+
this.userForm.get('role')?.valueChanges.subscribe((role) => {
56+
const groupControl = this.userForm.get('groupId');
57+
if (role === 'admin') {
58+
groupControl?.clearValidators();
59+
groupControl?.setValue(null);
60+
} else {
61+
groupControl?.setValidators(Validators.required);
4162
}
63+
groupControl?.updateValueAndValidity();
4264
});
65+
4366
}
4467

45-
getUserInfo(selectedId: number) {
68+
loadUser(selectedId: number) {
4669
this.adminService.getUser(selectedId).subscribe((data) => {
4770
if (data && data.model) {
48-
this.userModel = data.model;
71+
const user = data.model;
72+
this.userForm.patchValue({
73+
firstName: user.firstName,
74+
lastName: user.lastName,
75+
email: user.email,
76+
role: user.role,
77+
groupId: user.groupId
78+
});
79+
80+
if (user.isDeviceUser) {
81+
this.isDeviceUser = true;
82+
}
83+
84+
if (user.role === 'admin') {
85+
const groupControl = this.userForm.get('groupId');
86+
groupControl?.clearValidators();
87+
groupControl?.updateValueAndValidity();
88+
}
4989
}
5090
});
5191
}
5292

53-
updateUser() {
54-
this.adminService.updateUser(this.userModel).subscribe((data) => {
55-
if (data && data.success) {
56-
this.hide(true);
57-
}
58-
});
93+
submit() {
94+
if (this.userForm.invalid) {
95+
return;
96+
}
97+
98+
const formValue = this.userForm.value;
99+
const model = new UserRegisterModel();
100+
Object.assign(model, formValue);
101+
102+
if (this.edit && this.selectedId) {
103+
model.id = this.selectedId;
104+
this.adminService.updateUser(model).subscribe((data) => {
105+
if (data && data.success) {
106+
this.hide(true);
107+
}
108+
});
109+
} else {
110+
this.adminService.createUser(model).subscribe((data) => {
111+
if (data && data.success) {
112+
this.hide(true);
113+
}
114+
});
115+
}
59116
}
60117

61118
hide(result = false) {
62-
this.dialogRef.close({result: result, edit: this.edit});
119+
this.dialogRef.close({result, edit: this.edit});
63120
}
64121
}

0 commit comments

Comments
 (0)