From 60c4d61fcf07eb7f5cc4cbaa1a4e62c1c08d94cd Mon Sep 17 00:00:00 2001 From: apuente Date: Mon, 10 Jun 2024 15:32:35 +0200 Subject: [PATCH] New layout sidebar and Change user password --- ogWebconsole/src/app/app.module.ts | 4 +- .../layout/header/header.component.css | 7 +--- .../layout/header/header.component.html | 5 +-- .../layout/header/header.component.ts | 18 +++------ .../main-layout/main-layout.component.css | 9 +---- .../main-layout/main-layout.component.html | 3 +- .../main-layout/main-layout.component.ts | 6 ++- .../layout/sidebar/sidebar.component.css | 29 +++++++++++--- .../layout/sidebar/sidebar.component.html | 9 ++++- .../layout/sidebar/sidebar.component.ts | 38 +++++++++++++++++-- .../app/components/login/login.component.ts | 1 + .../edit-user-modal.component.ts | 3 +- 12 files changed, 89 insertions(+), 43 deletions(-) diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index ca0da21..f687bf7 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -32,6 +32,7 @@ import {MatSelectModule} from '@angular/material/select'; import { EditUserModalComponent } from './components/pages/admin/users/users/edit-user-modal/edit-user-modal.component'; import { AddRoleModalComponent } from './components/pages/admin/roles/roles/add-role-modal/add-role-modal.component'; import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/delete-role-modal/delete-role-modal.component'; +import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component'; @NgModule({ declarations: [ @@ -49,7 +50,8 @@ import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/d AddUserModalComponent, EditUserModalComponent, AddRoleModalComponent, - DeleteRoleModalComponent + DeleteRoleModalComponent, + ChangePasswordModalComponent ], bootstrap: [AppComponent], imports: [BrowserModule, diff --git a/ogWebconsole/src/app/components/layout/header/header.component.css b/ogWebconsole/src/app/components/layout/header/header.component.css index 4c1caaf..d5ba1ce 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.css +++ b/ogWebconsole/src/app/components/layout/header/header.component.css @@ -1,13 +1,10 @@ -:host{ - display: block; - background-color: rgb(126, 126, 126); - grid-area: header; -} mat-toolbar { display: flex; justify-content: space-between; padding: 10px; + height: 50px; + box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5); } .navbar-button-row { diff --git a/ogWebconsole/src/app/components/layout/header/header.component.html b/ogWebconsole/src/app/components/layout/header/header.component.html index 4c83ffb..b00e6be 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.html +++ b/ogWebconsole/src/app/components/layout/header/header.component.html @@ -1,6 +1,6 @@ - Opengnsys webconsole
@@ -13,7 +13,6 @@ -
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.ts b/ogWebconsole/src/app/components/layout/header/header.component.ts index e95c904..15faf81 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.ts +++ b/ogWebconsole/src/app/components/layout/header/header.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import {jwtDecode} from 'jwt-decode'; @Component({ @@ -7,20 +7,14 @@ import {jwtDecode} from 'jwt-decode'; styleUrls: ['./header.component.css'], }) export class HeaderComponent implements OnInit { - isSuperAdmin: boolean = false; + @Output() toggleSidebar = new EventEmitter(); + + onToggleSidebar() { + this.toggleSidebar.emit(); + } constructor() { } ngOnInit(): void { - const token = localStorage.getItem('loginToken'); - if (token) { - try { - const decodedToken: any = jwtDecode(token); - console.log('Decoded JWT:', decodedToken); - this.isSuperAdmin = decodedToken.roles.includes('ROLE_SUPER_ADMIN'); - } catch (error) { - console.error('Error decoding JWT:', error); - } - } } } diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css index 54dacbd..09b9d86 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css @@ -1,11 +1,4 @@ -:host{ - width: 100%; - display: grid; - grid-template-areas: - "header" - "content" - "footer"; -} + .content-wrapper{ display: block; grid-area: content; diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html index ea174d5..1373e77 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html @@ -1,5 +1,6 @@ - +
+
\ No newline at end of file diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts index 90660d6..1365866 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts @@ -5,5 +5,9 @@ import { Component } from '@angular/core'; styleUrl: './main-layout.component.css' }) export class MainLayoutComponent { - + isSidebarVisible: boolean = false; + + toggleSidebar() { + this.isSidebarVisible = !this.isSidebarVisible; + } } diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css index 166a418..081d0e5 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css @@ -1,5 +1,24 @@ -:host{ - display: block; - background-color: rgb(85, 85, 85); - grid-area: sidebar; -} \ No newline at end of file +.sidebar { + width: 250px; + position: fixed; + top: 50px; + left: -260px; + height: 100%; + background-color: rgb(245, 245, 245); + transition: left 0.3s ease-in-out; + box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5); + } + + .sidebar.visible { + left: 0; + } + + .sidebar-content{ + margin: 20px; + } + + button { + margin-bottom: 10px; +} + + diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html index 52a8ffc..56288c5 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html @@ -1 +1,8 @@ -

sidebar works!

+
+
+

Bienvenido {{username}}

+ + +
+
+ \ No newline at end of file diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts index 869580e..a0ed85b 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts @@ -1,4 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { jwtDecode } from 'jwt-decode'; +import { EditUserModalComponent } from '../../pages/admin/users/users/edit-user-modal/edit-user-modal.component'; +import { MatDialog } from '@angular/material/dialog'; +import { ChangePasswordModalComponent } from '../../pages/admin/users/users/change-password-modal/change-password-modal.component'; @Component({ selector: 'app-sidebar', @@ -6,6 +10,32 @@ import { Component } from '@angular/core'; styleUrl: './sidebar.component.css' }) export class SidebarComponent { - hovered = false; -} -//https://medium.com/@yevhen.chmykhun.01/angular-blueprint-application-layout-b1680ca888e0 \ No newline at end of file + @Input() isVisible: boolean = false; + isSuperAdmin: boolean = false; + username: string = localStorage.getItem('username') ?? ''; + + constructor(public dialog: MatDialog) {} + + ngOnInit(): void { + const token = localStorage.getItem('loginToken'); + if (token) { + try { + const decodedToken: any = jwtDecode(token); + console.log('Decoded JWT:', decodedToken); + this.isSuperAdmin = decodedToken.roles.includes('ROLE_SUPER_ADMIN'); + } catch (error) { + console.error('Error decoding JWT:', error); + } + } + } + + editUser(user: any) { + // Implementar la lógica de edición + const dialogRef = this.dialog.open(ChangePasswordModalComponent, { + data: { user: user } + }); + dialogRef.componentInstance.userEdited.subscribe(() => { + console.log("User edited successfully!") + }); + } +} \ No newline at end of file diff --git a/ogWebconsole/src/app/components/login/login.component.ts b/ogWebconsole/src/app/components/login/login.component.ts index 41af25a..74b4fd9 100644 --- a/ogWebconsole/src/app/components/login/login.component.ts +++ b/ogWebconsole/src/app/components/login/login.component.ts @@ -37,6 +37,7 @@ export class LoginComponent { if (res.token) { localStorage.setItem('loginToken', res.token); localStorage.setItem('refreshToken', res.refreshToken); + localStorage.setItem('username', this.loginObj.username); this.router.navigateByUrl('/dashboard'); } }, diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts index dd76248..3b7fdb5 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts +++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts @@ -25,9 +25,8 @@ export class EditUserModalComponent implements OnInit {@Output() userEdited = ne private fb: FormBuilder, private userService: UserService // Inyecta el servicio ) { - console.log(this.data) this.userForm = this.fb.group({ - username: [this.data.user.username], + username: [this.data], password: [''], role: this.data.user.allowedOrganizationalUnits, organizationalUnit: [[this.data.user.allowedOrganizationalUnits], Validators.required]