opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New layout sidebar and Change user password

pull/3/head
Alvaro Puente Mella 2024-06-10 15:32:35 +02:00
parent 48867b2c14
commit 60c4d61fcf
12 changed files with 89 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/app.module.ts
View File

@ -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,

7
ogWebconsole/src/app/components/layout/header/header.component.css
View File

@ -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 {

5
ogWebconsole/src/app/components/layout/header/header.component.html
View File

@ -1,6 +1,6 @@
<mat-toolbar>
<button mat-mini-fab color="primary" aria-label="menu">
<mat-icon>menu</mat-icon>
<button mat-mini-fab color="primary" aria-label="menu" (click)="onToggleSidebar()">
<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>

18
ogWebconsole/src/app/components/layout/header/header.component.ts
View File

@ -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);
}
}
}
}

9
ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
View File

@ -1,11 +1,4 @@
:host{
width: 100%;
display: grid;
grid-template-areas:
"header"
"content"
"footer";
}
.content-wrapper{
display: block;
grid-area: content;

3
ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
View File

@ -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>

6
ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts
View File

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

29
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
View File

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

9
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html
View File

@ -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>

38
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
View File

@ -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
@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!")
});
}
}

1
ogWebconsole/src/app/components/login/login.component.ts
View File

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

3
ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts
View File

@ -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]