Skip to content

Commit 29e2360

Browse files
jesusrdevjesusrdev
authored
Merge pull request #49 from KJO-Tech/feature/36-refactorize-users-dashboard
Feature: refactorize users dashboard
2 parents 6d6a81e + 54f0ef6 commit 29e2360

16 files changed

Lines changed: 918 additions & 477 deletions

‎src/app/app.routes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const routes: Routes = [
1515
{ path: '', loadComponent: () => import('./modules/dashboard/dashboard-page.component') },
1616
{
1717
path: 'users',
18-
loadComponent: () => import('./modules/user/user-page.component')
18+
loadComponent: () => import('./modules/admin/user/user-page.component')
1919
},
2020
{
2121
path: 'emergency-resources',

‎src/app/core/services/user.service.ts‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,26 @@ export class UserService {
1212
private readonly baseUrl = `${environment.apiUrl}/api/mind/auth/users`;
1313
private http = inject(HttpClient);
1414

15-
private _selectedUser = signal<UserRequest | null>(null);
15+
private _selectedUser = signal<UserResponse | null>(null);
1616

17-
get selectedUser(): UserRequest | null {
18-
return this._selectedUser();
19-
}
17+
readonly selectedUser = this._selectedUser.asReadonly();
2018

21-
set selectedUser(user: UserRequest | null) {
19+
setSelectedUser(user: UserResponse | null): void {
2220
this._selectedUser.set(user);
2321
}
2422

25-
selectUserResponse(user: UserResponse) {
26-
const user2 = user as UserResponse;
27-
this._selectedUser.set({
28-
id: user2.id,
29-
username: user2.username,
30-
email: user2.email,
31-
firstName: user2.firstName,
32-
lastName: user2.lastName,
33-
password: '',
34-
roles: user2.roles
35-
});
36-
}
23+
// selectUserResponse(user: UserResponse) {
24+
// const user2 = user as UserResponse;
25+
// this._selectedUser.set({
26+
// id: user2.id,
27+
// username: user2.username,
28+
// email: user2.email,
29+
// firstName: user2.firstName,
30+
// lastName: user2.lastName,
31+
// password: '',
32+
// roles: user2.roles
33+
// });
34+
// }
3735

3836
getAll(): Observable<UserResponse[]> {
3937
return this.http.get<UserResponse[]>(`${this.baseUrl}/listAll`);
@@ -44,7 +42,7 @@ export class UserService {
4442
}
4543

4644
update(request: UserRequest) {
47-
return this.http.put<void>(`${this.baseUrl}/update/${request.id}`, request);
45+
return this.http.put(`${this.baseUrl}/update/${request.id}`, request);
4846
}
4947

5048
delete(id: string) {

‎src/app/modules/admin/user/user-modal/user-modal.component.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<dialog [id]="modalId()" class="modal">
2+
<div class="modal-box max-h-11/12">
3+
<!-- X BUTTON -->
4+
<!-- <form method="dialog">-->
5+
<!-- <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">-->
6+
<!-- <i class="material-icons-outlined !text-xl">close</i>-->
7+
<!-- </button>-->
8+
<!-- </form>-->
9+
10+
<!-- <h2 class="text-lg font-semibold">{{ title() }}</h2>-->
11+
12+
<div class="flex items-center justify-between mb-6">
13+
<div>
14+
<h2 class="text-2xl font-bold text-base-content">{{ title() }}</h2>
15+
<p class="text-sm text-base-content/70 mt-1">
16+
{{
17+
type() === "create"
18+
? "Añade un nuevo usuario al sistema"
19+
: "Modifica la información del usuario"
20+
}}
21+
</p>
22+
</div>
23+
<form method="dialog">
24+
<button class="btn btn-sm btn-circle btn-ghost hover:btn-error">
25+
<i class="material-icons-outlined !text-xl">close</i>
26+
</button>
27+
</form>
28+
</div>
29+
30+
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
31+
<fieldset class="fieldset">
32+
<legend class="fieldset-legend">First Name</legend>
33+
<input
34+
type="text"
35+
class="input validator w-full"
36+
formControlName="firstName"
37+
placeholder="First Name"
38+
minlength="3"
39+
required
40+
autocomplete="off"
41+
/>
42+
<p class="validator-hint hidden">
43+
{{ formUtils.getFieldError(userForm, 'firstName') }}
44+
</p>
45+
</fieldset>
46+
47+
<fieldset class="fieldset">
48+
<legend class="fieldset-legend">Last Name</legend>
49+
<input
50+
type="text"
51+
class="input validator w-full"
52+
formControlName="lastName"
53+
placeholder="Last Name"
54+
minlength="3"
55+
required
56+
autocomplete="off"
57+
/>
58+
<p class="validator-hint hidden">
59+
{{ formUtils.getFieldError(userForm, 'lastName') }}
60+
</p>
61+
</fieldset>
62+
63+
<fieldset class="fieldset">
64+
<legend class="fieldset-legend">Email</legend>
65+
<input
66+
type="email"
67+
class="input validator w-full"
68+
formControlName="email"
69+
placeholder="Email"
70+
minlength="3"
71+
required
72+
autocomplete="off"
73+
pattern="{{ formUtils.emailPattern }}"
74+
/>
75+
<p class="validator-hint hidden">
76+
{{ formUtils.getFieldError(userForm, 'email') }}
77+
</p>
78+
</fieldset>
79+
80+
@if (type() == "create") {
81+
<fieldset class="fieldset">
82+
<legend class="fieldset-legend">Password</legend>
83+
<label class="input validator w-full">
84+
<input
85+
type="{{ showPassword() ? 'text' : 'password' }}"
86+
class=" w-full"
87+
formControlName="password"
88+
placeholder="Password"
89+
minlength="3"
90+
required
91+
autocomplete="off"
92+
/>
93+
<i (click)="toggleShowPassword()" class="material-icons-outlined !text-xl hover:cursor-pointer">
94+
{{ showPassword() ? 'visibility_off' : 'visibility' }}
95+
</i>
96+
</label>
97+
<p class="validator-hint hidden">
98+
{{ formUtils.getFieldError(userForm, 'password') }}
99+
</p>
100+
</fieldset>
101+
}
102+
103+
<fieldset class="fieldset">
104+
<legend class="fieldset-legend">Rol</legend>
105+
<select
106+
class="select validator w-full"
107+
formControlName="roles"
108+
required
109+
[ngClass]="{ '!input-error': formUtils.isValidField(userForm, 'roles') }"
110+
>
111+
<option disabled [ngValue]="''">-- Select role --</option>
112+
113+
<option value="user">Usuario</option>
114+
<option value="admin">Administrador</option>
115+
</select>
116+
<p class="validator-hint hidden">
117+
{{ formUtils.getFieldError(userForm, 'roles') }}
118+
</p>
119+
</fieldset>
120+
121+
122+
<!-- <div class="modal-action mt-4">-->
123+
<!-- <form method="dialog" class="space-x-2">-->
124+
<!-- <button class="btn">Close</button>-->
125+
126+
<!-- <button-->
127+
<!-- class="btn btn-primary"-->
128+
<!-- [disabled]="userForm.invalid"-->
129+
<!-- type="submit"-->
130+
<!-- (click)="onSubmit()"-->
131+
<!-- >-->
132+
<!-- {{ submitButtonText() }}-->
133+
<!-- </button>-->
134+
<!-- </form>-->
135+
<!-- </div>-->
136+
137+
<div class="modal-action pt-6 border-t border-base-300">
138+
<button
139+
type="button"
140+
class="btn btn-outline"
141+
onclick="this.closest('dialog').close()"
142+
[disabled]="isSubmitting()"
143+
>
144+
Cancelar
145+
</button>
146+
147+
<button
148+
type="submit"
149+
class="btn btn-primary"
150+
[disabled]="userForm.invalid || isSubmitting()"
151+
[class.loading]="isSubmitting()"
152+
>
153+
@if (isSubmitting()) {
154+
<span class="loading loading-spinner loading-sm"></span>
155+
}
156+
{{ submitButtonText() }}
157+
</button>
158+
</div>
159+
</form>
160+
161+
</div>
162+
<form method="dialog" class="modal-backdrop">
163+
<button>close</button>
164+
</form>
165+
</dialog>
166+

0 commit comments

Comments
 (0)