Skip to content

Commit 9f20636

Browse files
belsmanbelsman
committed
feat(iam-user): add route for iam edit page
1 parent 28d38dc commit 9f20636

7 files changed

Lines changed: 155 additions & 58 deletions

File tree

‎packages/modules/iam-user/src/lib/iam-user.routes.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ROUTER } from '@console-core/config';
44

55
import { IAMUserTemplateComponent } from './ui/components/iam-user-template/iam-user-template.component';
66
import { IAMUserCreateComponent } from './ui/pages/iam-user-create/iam-user-create.component';
7+
import { IAMUserEditComponent } from './ui/pages/iam-user-edit/iam-user-edit.component';
78
import { IAMUserViewComponent } from './ui/pages/iam-user-view/iam-user-view.component';
89

910
export const modulesIamUserRoutes: Route[] = [
@@ -18,10 +19,15 @@ export const modulesIamUserRoutes: Route[] = [
1819
// component: FulfillmentEmptyStateComponent,
1920
// },
2021
{
21-
path: ROUTER.pages.main.children.iam.children.view.path, // e.g. ':fulfillmentId'
22+
path: ROUTER.pages.main.children.iam.children.view.path,
2223
component: IAMUserViewComponent,
2324
title: ROUTER.pages.main.children.iam.children.view.title,
2425
},
26+
{
27+
path: ROUTER.pages.main.children.iam.children.edit.path,
28+
component: IAMUserEditComponent,
29+
title: ROUTER.pages.main.children.iam.children.edit.title,
30+
},
2531
{
2632
path: ROUTER.pages.main.children.iam.children.create.path,
2733
component: IAMUserCreateComponent,

‎packages/modules/iam-user/src/lib/ui/pages/iam-user-edit/iam-user-edit.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<rc-resource-detail [title]="'Edit User'">
2+
<app-iam-user-form
3+
[form]="form"
4+
[roles]="roles()"
5+
[organizations]="organizations()"
6+
[loading]="true"
7+
submitLabel="Save Changes"
8+
(submitForm)="submit()"
9+
/>
10+
</rc-resource-detail>

‎packages/modules/iam-user/src/lib/ui/pages/iam-user-edit/iam-user-edit.component.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup } from '@angular/forms';
3+
import { ActivatedRoute } from '@angular/router';
4+
import { RcResourceDetailComponent } from '@console/rc-ui';
5+
6+
// import { mapFormToEditUserCommand } from '../../../commands';
7+
import {
8+
// IamUserEditFacade,
9+
OrganizationListFacade,
10+
RoleListFacade,
11+
} from '../../../store';
12+
import { IAMUserFormComponent } from '../../components/iam-user-form/iam-user-form.component';
13+
import { createUserForm } from '../../components/iam-user-form/iam-user-form.factory';
14+
15+
@Component({
16+
selector: 'app-module-iam-user-edit',
17+
templateUrl: './iam-user-edit.component.html',
18+
providers: [OrganizationListFacade, RoleListFacade],
19+
imports: [RcResourceDetailComponent, IAMUserFormComponent],
20+
})
21+
export class IAMUserEditComponent implements OnInit, OnDestroy {
22+
form!: FormGroup;
23+
24+
private readonly fb = inject(FormBuilder);
25+
private readonly route = inject(ActivatedRoute);
26+
27+
// private readonly facade = inject(IamUserEditFacade);
28+
private readonly organizationFacade = inject(OrganizationListFacade);
29+
private readonly roleFacade = inject(RoleListFacade);
30+
31+
// readonly loading = this.facade.loading;
32+
33+
roles = this.roleFacade.roles;
34+
organizations = this.organizationFacade.organizations;
35+
36+
ngOnInit(): void {
37+
this.form = createUserForm(this.fb);
38+
// const userId = this.route.snapshot.paramMap.get('id');
39+
40+
this.roleFacade.loadList();
41+
this.organizationFacade.loadList();
42+
}
43+
44+
ngOnDestroy(): void {
45+
console.log('On destory');
46+
// this.facade.reset();
47+
}
48+
49+
submit(): void {
50+
if (this.form.invalid) {
51+
this.form.markAllAsTouched();
52+
return;
53+
}
54+
55+
// const formValue = this.form.getRawValue();
56+
57+
// const command = mapFormToEditUserCommand(formValue);
58+
59+
// this.facade.edit(command);
60+
}
61+
}

‎packages/modules/iam-user/src/lib/ui/pages/iam-user-view/iam-user-view.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@if (user(); as user) {
22
<rc-resource-detail
33
[title]="'User details'"
4+
[showEdit]="true"
5+
[showDelete]="true"
46
(back)="goBack()"
57
(edit)="editUser()"
68
(delete)="deleteUser()"

‎packages/modules/iam-user/src/lib/ui/pages/iam-user-view/iam-user-view.component.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
inject,
66
OnInit,
77
} from '@angular/core';
8-
import { ActivatedRoute } from '@angular/router';
8+
import { ActivatedRoute, Router } from '@angular/router';
99
import { RcResourceDetailComponent } from '@console/rc-ui';
1010
import { distinctUntilChanged, filter, map } from 'rxjs';
1111

@@ -15,6 +15,8 @@ import {
1515
VCLTabNavComponent,
1616
} from '@vcl/ng-vcl';
1717

18+
import { ROUTER } from '@console-core/config';
19+
1820
import { IamUserViewFacade } from '../../../store';
1921
import { IAMUserOverviewTabComponent } from '../../components/iam-user-overview-tab/iam-user-overview-tab.component';
2022
import { IAMUserRolesTabComponent } from '../../components/iam-user-roles-tab/iam-user-roles-tab.component';
@@ -43,6 +45,7 @@ import { IAMUserStatusBadgeComponent } from '../../components/iam-user-status-ba
4345
export class IAMUserViewComponent implements OnInit {
4446
private readonly iamUserFacade = inject(IamUserViewFacade);
4547
private readonly route = inject(ActivatedRoute);
48+
private readonly router = inject(Router);
4649

4750
readonly user = this.iamUserFacade.user;
4851

@@ -63,7 +66,16 @@ export class IAMUserViewComponent implements OnInit {
6366
}
6467

6568
editUser() {
66-
// TODO
69+
const userId = this.user()?.id;
70+
71+
return (
72+
userId &&
73+
this.router.navigate(
74+
ROUTER.pages.main.children.iam.children.edit.getLink({
75+
id: userId,
76+
})
77+
)
78+
);
6779
}
6880

6981
deleteUser() {

‎packages/modules/rc-ui/src/lib/auth/pages/sign-in/sign-in.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { AsyncPipe, NgClass } from '@angular/common';
12
import {
23
Component,
34
EventEmitter,
@@ -6,24 +7,25 @@ import {
67
computed,
78
} from '@angular/core';
89
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
10+
import { RouterModule } from '@angular/router';
911

10-
import { RcSignInAction, RcSignInState } from './sign-in.models';
11-
import {
12-
DEFAULT_SIGN_IN_TRANSLATIONS,
13-
RcSignInTranslations,
14-
} from './sign-in.i18n';
15-
import { RcAuthLayoutConfig } from '../../auth.config';
1612
import {
1713
VCLButtonModule,
1814
VCLCheckboxModule,
1915
VCLFormControlGroupModule,
2016
VCLInputModule,
2117
VCLPasswordInputModule,
2218
} from '@vcl/ng-vcl';
23-
import { RouterModule } from '@angular/router';
24-
import { RsAuthLayoutComponent } from '../../layouts';
19+
2520
import { RcTranslatePipe } from '../../../i18n';
26-
import { AsyncPipe, NgClass } from '@angular/common';
21+
import { RcAuthLayoutConfig } from '../../auth.config';
22+
import { RsAuthLayoutComponent } from '../../layouts';
23+
24+
import {
25+
DEFAULT_SIGN_IN_TRANSLATIONS,
26+
RcSignInTranslations,
27+
} from './sign-in.i18n';
28+
import { RcSignInAction, RcSignInState } from './sign-in.models';
2729

2830
@Component({
2931
selector: 'rc-sign-in',

‎packages/modules/rc-ui/src/lib/shared/layouts/resource-detail/resource-detail.component.ts‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,20 @@ import { VCLIconModule } from '@vcl/ng-vcl';
2626
<!-- Left -->
2727
<div class="row center gap-05">
2828
@if (showBack) {
29-
<button
30-
type="button"
31-
class="button transparent square"
32-
[attr.aria-label]="backLabel"
33-
(click)="back.emit()"
34-
>
35-
<div class="icogram">
36-
<div
37-
class="icon"
38-
[ngClass]="backIcon"
39-
aria-hidden="true"
40-
></div>
41-
</div>
42-
</button>
29+
<button
30+
type="button"
31+
class="button transparent square"
32+
[attr.aria-label]="backLabel"
33+
(click)="back.emit()"
34+
>
35+
<div class="icogram">
36+
<div
37+
class="icon"
38+
[ngClass]="backIcon"
39+
aria-hidden="true"
40+
></div>
41+
</div>
42+
</button>
4343
}
4444
4545
<!-- Title -->
@@ -48,43 +48,45 @@ import { VCLIconModule } from '@vcl/ng-vcl';
4848
</div>
4949
5050
@if (subtitleTpl) {
51-
<ng-container [ngTemplateOutlet]="subtitleTpl" />
51+
<ng-container [ngTemplateOutlet]="subtitleTpl" />
5252
}
5353
</div>
5454
5555
<!-- Right -->
5656
<div class="row center gap-05">
5757
<!-- Custom actions slot -->
5858
@if (actionsTpl) {
59-
<ng-container [ngTemplateOutlet]="actionsTpl" />
60-
} @if (showEdit) {
61-
<button
62-
type="button"
63-
class="button transparent square"
64-
aria-label="Edit"
65-
(click)="edit.emit()"
66-
>
67-
<div class="icogram">
68-
<div
69-
class="icon mdi mdi-pencil"
70-
aria-hidden="true"
71-
></div>
72-
</div>
73-
</button>
74-
} @if (showDelete) {
75-
<button
76-
type="button"
77-
class="button transparent square"
78-
aria-label="Delete"
79-
(click)="delete.emit()"
80-
>
81-
<div class="icogram">
82-
<div
83-
class="icon mdi mdi-delete-outline"
84-
aria-hidden="true"
85-
></div>
86-
</div>
87-
</button>
59+
<ng-container [ngTemplateOutlet]="actionsTpl" />
60+
}
61+
@if (showEdit) {
62+
<button
63+
type="button"
64+
class="button transparent square"
65+
aria-label="Edit"
66+
(click)="edit.emit()"
67+
>
68+
<div class="icogram">
69+
<div
70+
class="icon mdi mdi-pencil"
71+
aria-hidden="true"
72+
></div>
73+
</div>
74+
</button>
75+
}
76+
@if (showDelete) {
77+
<button
78+
type="button"
79+
class="button transparent square"
80+
aria-label="Delete"
81+
(click)="delete.emit()"
82+
>
83+
<div class="icogram">
84+
<div
85+
class="icon mdi mdi-delete-outline"
86+
aria-hidden="true"
87+
></div>
88+
</div>
89+
</button>
8890
}
8991
</div>
9092
</div>
@@ -122,17 +124,19 @@ export class RcResourceDetailComponent {
122124
@Input() backLabel = 'Back';
123125

124126
// Right/actions
125-
@Input() showEdit = true;
126-
@Input() showDelete = true;
127+
@Input() showEdit = false;
128+
@Input() showDelete = false;
127129

128130
@Output() back = new EventEmitter<void>();
129131
@Output() edit = new EventEmitter<void>();
130132
@Output() delete = new EventEmitter<void>();
131133

132134
// Slots
133135
@ContentChild('actionsTemplate', { read: TemplateRef })
136+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
134137
actionsTpl?: TemplateRef<any>;
135138

136139
@ContentChild('subtitleTemplate', { read: TemplateRef })
140+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
137141
subtitleTpl?: TemplateRef<any>;
138142
}

0 commit comments

Comments
 (0)