Skip to content

Commit 33d837f

Browse files
belsmanbelsman
committed
feat(iam-user): create resuable user form
1 parent 6ed4edf commit 33d837f

2 files changed

Lines changed: 253 additions & 0 deletions

File tree

‎packages/modules/iam-user/src/lib/ui/components/iam-user-form/iam-user-form.component.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<form
2+
vclForm
3+
novalidate
4+
[formGroup]="form"
5+
(submit)="onSubmit()"
6+
>
7+
<section class="rc-section">
8+
<h4>Identity</h4>
9+
10+
<div class="rc-grid cols-2 gap-4">
11+
<vcl-form-control-group>
12+
<vcl-label>First name</vcl-label>
13+
<vcl-input-field>
14+
<input
15+
vclInput
16+
formControlName="firstName"
17+
/>
18+
</vcl-input-field>
19+
</vcl-form-control-group>
20+
21+
<vcl-form-control-group>
22+
<vcl-label>Last name</vcl-label>
23+
<vcl-input-field>
24+
<input
25+
vclInput
26+
formControlName="lastName"
27+
/>
28+
</vcl-input-field>
29+
</vcl-form-control-group>
30+
31+
<vcl-form-control-group>
32+
<vcl-label>Email</vcl-label>
33+
<vcl-input-field>
34+
<input
35+
vclInput
36+
formControlName="email"
37+
/>
38+
</vcl-input-field>
39+
<vcl-hint-error error="required"
40+
>This field is required.</vcl-hint-error
41+
>
42+
<vcl-hint-error error="email">Invalid email address.</vcl-hint-error>
43+
</vcl-form-control-group>
44+
45+
<rc-username-field formControlName="username" />
46+
</div>
47+
</section>
48+
49+
<vcl-checkbox formControlName="invite">Invite</vcl-checkbox>
50+
51+
<rc-password-field formControlName="password" />
52+
53+
<section class="rc-section">
54+
<h4>Default Scope</h4>
55+
56+
<vcl-form-control-group>
57+
<vcl-label>Scope</vcl-label>
58+
<vcl-select>
59+
<vcl-select-list formControlName="defaultScope">
60+
@for (item of organizations; track $index) {
61+
<vcl-select-list-item [value]="item.id">
62+
{{ item.name }}
63+
</vcl-select-list-item>
64+
}
65+
</vcl-select-list>
66+
</vcl-select>
67+
</vcl-form-control-group>
68+
</section>
69+
70+
<section
71+
class="rc-section"
72+
formArrayName="roleAssignments"
73+
>
74+
<h4>Role Assignment</h4>
75+
76+
<fieldset>
77+
<legend>
78+
Add role
79+
80+
<vcl-icon
81+
class="role-add"
82+
icon="vcl:add"
83+
(click)="addRoleAssignment()"
84+
></vcl-icon>
85+
</legend>
86+
87+
@for (group of roleAssignments.controls; track $index; let i = $index) {
88+
<fieldset [formGroupName]="i">
89+
<legend>
90+
Role {{ i + 1 }}
91+
<vcl-icon
92+
class="role-remove"
93+
icon="vcl:remove"
94+
(click)="removeRoleAssignment(i)"
95+
></vcl-icon>
96+
</legend>
97+
98+
<!-- Role -->
99+
<vcl-form-control-group>
100+
<vcl-label>Role</vcl-label>
101+
<vcl-select
102+
[clearable]="true"
103+
placeholder="Select role"
104+
[search]="true"
105+
>
106+
<vcl-select-list formControlName="role">
107+
@for (role of roles; track role.id) {
108+
<vcl-select-list-item [value]="role.id">
109+
{{ role.name }}
110+
<vcl-sub-label>{{ role.description }}</vcl-sub-label>
111+
</vcl-select-list-item>
112+
}
113+
</vcl-select-list>
114+
</vcl-select>
115+
<vcl-hint-error error="required"
116+
>This field is required.</vcl-hint-error
117+
>
118+
</vcl-form-control-group>
119+
120+
<!-- Organization -->
121+
<vcl-form-control-group>
122+
<vcl-label>Organization</vcl-label>
123+
<vcl-select
124+
[clearable]="true"
125+
placeholder="Select Organization"
126+
[search]="true"
127+
>
128+
<vcl-select-list formControlName="scopeInstance">
129+
@for (organization of organizations; track organization.id) {
130+
<vcl-select-list-item [value]="organization.id">
131+
{{ organization.name }}
132+
</vcl-select-list-item>
133+
}
134+
</vcl-select-list>
135+
</vcl-select>
136+
<vcl-hint-error error="required"
137+
>This field is required.</vcl-hint-error
138+
>
139+
</vcl-form-control-group>
140+
</fieldset>
141+
}
142+
</fieldset>
143+
</section>
144+
145+
<div class="loose-button-group row justify-content-end mt-4">
146+
<button
147+
vcl-button
148+
class="transparent outline"
149+
type="button"
150+
routerLink="../"
151+
>
152+
Cancel
153+
</button>
154+
155+
<button
156+
vcl-button
157+
class="emphasized"
158+
type="submit"
159+
[disabled]="form.invalid || loading"
160+
>
161+
Create User
162+
</button>
163+
</div>
164+
</form>

‎packages/modules/iam-user/src/lib/ui/components/iam-user-form/iam-user-form.component.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
2+
import {
3+
FormArray,
4+
FormBuilder,
5+
FormGroup,
6+
ReactiveFormsModule,
7+
Validators,
8+
} from '@angular/forms';
9+
import {
10+
RcPasswordFieldComponent,
11+
RcUsernameFieldComponent,
12+
} from '@console/rc-ui';
13+
14+
import {
15+
VCLButtonComponent,
16+
VCLCheckboxComponent,
17+
VCLFormControlGroupModule,
18+
VCLIconComponent,
19+
VCLInputModule,
20+
VCLSelectComponent,
21+
VCLSelectListComponent,
22+
VCLSelectListItemComponent,
23+
} from '@vcl/ng-vcl';
24+
25+
import { OrganizationListItem, RoleListItem } from '../../../models';
26+
27+
@Component({
28+
selector: 'app-iam-user-form',
29+
standalone: true,
30+
templateUrl: './iam-user-form.component.html',
31+
imports: [
32+
ReactiveFormsModule,
33+
VCLInputModule,
34+
VCLSelectComponent,
35+
VCLSelectListComponent,
36+
VCLSelectListItemComponent,
37+
VCLFormControlGroupModule,
38+
VCLButtonComponent,
39+
VCLCheckboxComponent,
40+
VCLIconComponent,
41+
RcPasswordFieldComponent,
42+
RcUsernameFieldComponent,
43+
],
44+
})
45+
export class IAMUserFormComponent {
46+
@Input({ required: true })
47+
form!: FormGroup;
48+
49+
@Input()
50+
organizations: OrganizationListItem[] = [];
51+
52+
@Input()
53+
roles: RoleListItem[] = [];
54+
55+
@Input()
56+
loading = false;
57+
58+
@Input()
59+
submitLabel = 'Save';
60+
61+
@Output()
62+
submitForm = new EventEmitter<void>();
63+
64+
@Output()
65+
cancelSubmit = new EventEmitter<void>();
66+
67+
private readonly fb = inject(FormBuilder);
68+
69+
get roleAssignments(): FormArray {
70+
return this.form.get('roleAssignments') as FormArray;
71+
}
72+
73+
addRoleAssignment(): void {
74+
this.roleAssignments.push(
75+
this.fb.group({
76+
role: ['', Validators.required],
77+
scopeInstance: ['', Validators.required],
78+
})
79+
);
80+
}
81+
82+
removeRoleAssignment(index: number): void {
83+
this.roleAssignments.removeAt(index);
84+
}
85+
86+
onSubmit(): void {
87+
this.submitForm.emit();
88+
}
89+
}

0 commit comments

Comments
 (0)