New layout sidebar and Change user password

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,

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 {

ogWebconsole/src/app/components/layout/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar>
-    <button mat-mini-fab color="primary" aria-label="menu">
+    <button mat-mini-fab color="primary" aria-label="menu" (click)="onToggleSidebar()">
-        <mat-icon>menu</mat-icon>
+        <mat-icon>person</mat-icon>
     </button>
     <span class="navbar-tittle" routerLink="/dashboard">Opengnsys webconsole</span>
     <div class="navbar-button-row">
@@ -13,7 +13,6 @@
         <button mat-flat-button color="primary">Buscar</button>
         <button mat-flat-button color="primary">Calendario</button>
         <button mat-flat-button color="primary">Ayuda</button>
-        <button mat-flat-button color="accent" routerLink="/admin" *ngIf="isSuperAdmin">Admin</button>
         <button mat-flat-button color="warn" routerLink="/auth/login">Salir</button>
       </div>
 

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<void>();
+
+  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);
-      }
-    }
   }
 }

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;

ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html

@@ -1,5 +1,6 @@
-<app-header></app-header>
+<app-header (toggleSidebar)="toggleSidebar()"></app-header>
 <div class="content-wrapper">
+  <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
   <div class="content">
     <router-outlet />
   </div>

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;
+  }
 }

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css

@@ -1,5 +1,24 @@
-:host{
+.sidebar {
-    display: block;
+    width: 250px;
-    background-color: rgb(85, 85, 85);
+    position: fixed;
-    grid-area: sidebar;
+    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;
 }
+  
+

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html

@@ -1 +1,8 @@
-<p>sidebar works!</p>
+<div class="sidebar" [class.visible]="isVisible">
+  <div class="sidebar-content">
+    <h4>Bienvenido {{username}}</h4>
+    <button mat-flat-button color="primary" (click)="editUser(username)">Editar usuario</button>
+    <button mat-flat-button color="accent" routerLink="/admin" *ngIf="isSuperAdmin">Admin</button>
+  </div>
+  </div>
+  

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;
+  @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!")
+    });
+  }
 }
-//https://medium.com/@yevhen.chmykhun.01/angular-blueprint-application-layout-b1680ca888e0

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');
                 }
             },

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]