Skip to content

Commit 415f30a

Browse files
belsmanbelsman
committed
feat(iam): design and style new role association form
1 parent 7e51e55 commit 415f30a

File tree

3 files changed

+160
-94
lines changed

3 files changed

+160
-94
lines changed

‎packages/modules/management/src/lib/components/iam/forms/role-association-form/role-association-form.component.html

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,131 @@
11
<form
22
novalidate
33
vclForm
4+
[formGroup]="form"
45
>
56
<fieldset>
67
<legend>
78
Add role
89
<vcl-icon
9-
class="vcl-jss-form-add"
10+
class="role-add"
1011
icon="vcl:add"
12+
(click)="addUser()"
1113
></vcl-icon>
1214
</legend>
1315

14-
<fieldset>
15-
<legend>
16-
Role 1
17-
<vcl-icon
18-
class="vcl-jss-form-remove"
19-
icon="vcl:remove"
20-
></vcl-icon>
21-
</legend>
16+
<div formArrayName="associations">
17+
@for (item of associations.controls; track item; let idx = $index) {
18+
<fieldset
19+
[formGroupName]="idx"
20+
class="mb-3"
21+
>
22+
<legend>
23+
Role {{ idx + 1 }}
24+
<vcl-icon
25+
class="role-remove"
26+
icon="vcl:remove"
27+
(click)="removeUser(idx)"
28+
></vcl-icon>
29+
</legend>
2230

23-
<vcl-form-control-group>
24-
<vcl-label>Role</vcl-label>
25-
<vcl-select
26-
[clearable]="true"
27-
placeholder="Select role"
28-
[search]="true"
29-
>
30-
<vcl-select-list>
31-
<vcl-select-list-item>
32-
Role 1
33-
<vcl-sub-label>About role 1</vcl-sub-label>
34-
</vcl-select-list-item>
35-
</vcl-select-list>
36-
</vcl-select>
37-
<vcl-hint-error error="required"
38-
>This field is required.</vcl-hint-error
39-
>
40-
</vcl-form-control-group>
31+
<vcl-form-control-group>
32+
<vcl-label>Role</vcl-label>
33+
<vcl-select
34+
[clearable]="true"
35+
placeholder="Select role"
36+
[search]="true"
37+
>
38+
<vcl-select-list formControlName="role">
39+
<vcl-select-list-item>
40+
Role 1
41+
<vcl-sub-label>About role 1</vcl-sub-label>
42+
</vcl-select-list-item>
43+
</vcl-select-list>
44+
</vcl-select>
45+
<vcl-hint-error error="required"
46+
>This field is required.</vcl-hint-error
47+
>
48+
</vcl-form-control-group>
4149

42-
<!-- roleScopingInstanceType -->
43-
<vcl-form-control-group>
44-
<vcl-label>Role scoping instance type</vcl-label>
45-
<vcl-select
46-
[clearable]="true"
47-
placeholder="Select scoping instance"
48-
>
49-
<vcl-select-list>
50-
<vcl-select-list-item>
51-
Role 1
52-
<vcl-sub-label>About role 1</vcl-sub-label>
53-
</vcl-select-list-item>
54-
</vcl-select-list>
55-
</vcl-select>
56-
<vcl-hint-error error="required"
57-
>This field is required.</vcl-hint-error
58-
>
59-
</vcl-form-control-group>
50+
<vcl-form-control-group>
51+
<vcl-label>Instance type</vcl-label>
52+
<vcl-select
53+
[clearable]="true"
54+
placeholder="Select scoping instance"
55+
>
56+
<vcl-select-list formControlName="instanceType">
57+
<vcl-select-list-item>
58+
Role 1
59+
<vcl-sub-label>About role 1</vcl-sub-label>
60+
</vcl-select-list-item>
61+
</vcl-select-list>
62+
</vcl-select>
63+
<vcl-hint-error error="required"
64+
>This field is required.</vcl-hint-error
65+
>
66+
</vcl-form-control-group>
6067

61-
<!-- Organization -->
62-
<vcl-form-control-group>
63-
<vcl-label>Organization</vcl-label>
64-
<vcl-select
65-
[clearable]="true"
66-
placeholder="Select Organization"
67-
[search]="true"
68-
>
69-
<vcl-select-list>
70-
<vcl-select-list-item>
71-
Role 1
72-
<vcl-sub-label>About role 1</vcl-sub-label>
73-
</vcl-select-list-item>
74-
</vcl-select-list>
75-
</vcl-select>
76-
<vcl-hint-error error="required"
77-
>This field is required.</vcl-hint-error
78-
>
79-
</vcl-form-control-group>
68+
<!-- Organization -->
69+
<vcl-form-control-group>
70+
<vcl-label>Organization</vcl-label>
71+
<vcl-select
72+
[clearable]="true"
73+
placeholder="Select Organization"
74+
[search]="true"
75+
>
76+
<vcl-select-list formArrayName="instanceId">
77+
<vcl-select-list-item>
78+
Role 1
79+
<vcl-sub-label>About role 1</vcl-sub-label>
80+
</vcl-select-list-item>
81+
</vcl-select-list>
82+
</vcl-select>
83+
<vcl-hint-error error="required"
84+
>This field is required.</vcl-hint-error
85+
>
86+
</vcl-form-control-group>
8087

81-
<!-- User -->
82-
<vcl-form-control-group>
83-
<vcl-label>User</vcl-label>
84-
<vcl-select
85-
[clearable]="true"
86-
placeholder="Select User"
87-
[search]="true"
88-
>
89-
<vcl-select-list>
90-
<vcl-select-list-item>
91-
Role 1
92-
<vcl-sub-label>About role 1</vcl-sub-label>
93-
</vcl-select-list-item>
94-
</vcl-select-list>
95-
</vcl-select>
96-
<vcl-hint-error error="required"
97-
>This field is required.</vcl-hint-error
98-
>
99-
</vcl-form-control-group>
100-
</fieldset>
88+
<!-- User -->
89+
<vcl-form-control-group>
90+
<vcl-label>User</vcl-label>
91+
<vcl-select
92+
[clearable]="true"
93+
placeholder="Select User"
94+
[search]="true"
95+
>
96+
<vcl-select-list formArrayName="instanceId">
97+
<vcl-select-list-item>
98+
Role 1
99+
<vcl-sub-label>About role 1</vcl-sub-label>
100+
</vcl-select-list-item>
101+
</vcl-select-list>
102+
</vcl-select>
103+
<vcl-hint-error error="required"
104+
>This field is required.</vcl-hint-error
105+
>
106+
</vcl-form-control-group>
107+
</fieldset>
108+
}
109+
</div>
110+
111+
@if (associations.controls.length === 0) { No role associations }
101112
</fieldset>
102113

103114
<!-- Buttons -->
104-
<div class="loose-button-group">
115+
<div class="loose-button-group row justify-end mt-4">
105116
<button
106117
vcl-button
107-
type="submit"
108-
class="emphasized"
118+
type="button"
119+
class="transparent"
109120
>
110-
Save
121+
Cancel
111122
</button>
123+
112124
<button
113125
vcl-button
114-
type="button"
115-
class="transparent"
126+
type="submit"
116127
>
117-
Cancel
128+
Save
118129
</button>
119130
</div>
120131
</form>

‎packages/modules/management/src/lib/components/iam/forms/role-association-form/role-association-form.component.ts

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,64 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
23

34
@Component({
45
selector: 'app-role-association-form',
56
templateUrl: './role-association-form.component.html',
67
changeDetection: ChangeDetectionStrategy.OnPush,
8+
styles: [
9+
`
10+
:host {
11+
display: block;
12+
}
13+
14+
.role-add,
15+
.role-remove {
16+
cursor: pointer;
17+
}
18+
19+
.role-add {
20+
color: green;
21+
}
22+
23+
.role-remove {
24+
color: red;
25+
}
26+
`,
27+
],
728
standalone: false,
829
})
9-
export class RoleAssociationFormComponent {}
30+
export class RoleAssociationFormComponent {
31+
form!: FormGroup;
32+
33+
constructor(private fb: FormBuilder) {
34+
this.form = this.fb.group({
35+
associations: this.fb.array([this.createUser()]),
36+
});
37+
}
38+
39+
get associations(): FormArray {
40+
return this.form.get('associations') as FormArray;
41+
}
42+
43+
createUser(): FormGroup {
44+
return this.fb.group({
45+
role: ['', Validators.required],
46+
instanceType: ['', [Validators.required]],
47+
instanceId: ['', [Validators.required]],
48+
});
49+
}
50+
51+
addUser(): void {
52+
this.associations.push(this.createUser());
53+
}
54+
55+
removeUser(index: number): void {
56+
this.associations.removeAt(index);
57+
}
58+
59+
onSubmit(): void {
60+
if (this.form.valid) {
61+
console.log('Form Data:', this.form.value);
62+
}
63+
}
64+
}

‎packages/modules/management/src/lib/components/iam/role-association-modal.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ import { JssFormService } from './services';
1919
<vcl-panel-title>{{ layer.data.title }}</vcl-panel-title>
2020
<div class="row">
2121
<div class="flex-12">
22-
<vcl-jss-form
22+
<!-- <vcl-jss-form
2323
autocomplete="off"
2424
ngDefaultControl
2525
#roleAssociationsForm="vclJssForm"
2626
[schema]="layer.data.roleAssociationsSchema"
2727
(formAction)="onAction($event)"
2828
(formSubmit)="onSubmit()"
29-
/>
29+
/> -->
3030
<app-role-association-form />
3131
</div>
3232
</div>

0 commit comments

Comments
 (0)