From af5e2b6a124bcf91e26f4e06eb5f3c05d64ae828 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Thu, 4 Jul 2024 15:27:27 +0200
Subject: [PATCH] Added new UX. Sidebar, and main styles

---
 ogWebconsole/.gitignore                       |  1 +
 ogWebconsole/angular.json                     |  4 ++
 ogWebconsole/src/app/app.component.css        |  7 ++
 ogWebconsole/src/app/app.module.ts            | 42 ++++++------
 .../layout/header/header.component.css        | 10 ++-
 .../layout/header/header.component.html       | 24 +++----
 .../main-layout/main-layout.component.css     | 15 +++--
 .../main-layout/main-layout.component.html    | 13 ++--
 .../main-layout/main-layout.component.ts      |  2 +-
 .../layout/sidebar/sidebar.component.css      | 58 +++++++++-------
 .../layout/sidebar/sidebar.component.html     | 66 ++++++++++++++++---
 .../layout/sidebar/sidebar.component.spec.ts  |  2 +-
 .../layout/sidebar/sidebar.component.ts       |  2 +-
 package-lock.json                             |  6 ++
 14 files changed, 166 insertions(+), 86 deletions(-)
 create mode 100644 package-lock.json

diff --git a/ogWebconsole/.gitignore b/ogWebconsole/.gitignore
index 0711527..03923dd 100644
--- a/ogWebconsole/.gitignore
+++ b/ogWebconsole/.gitignore
@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
diff --git a/ogWebconsole/angular.json b/ogWebconsole/angular.json
index e3dd628..9ffbc13 100644
--- a/ogWebconsole/angular.json
+++ b/ogWebconsole/angular.json
@@ -104,6 +104,10 @@
     }
   },
   "cli": {
+<<<<<<< Updated upstream
     "analytics": "95fac95c-8936-41a8-8c9c-1fae82fe6912"
+=======
+    "analytics": "ba7c0825-8034-43ff-9c60-83dac232db7e"
+>>>>>>> Stashed changes
   }
 }
diff --git a/ogWebconsole/src/app/app.component.css b/ogWebconsole/src/app/app.component.css
index e69de29..aac26c0 100644
--- a/ogWebconsole/src/app/app.component.css
+++ b/ogWebconsole/src/app/app.component.css
@@ -0,0 +1,7 @@
+.sidenav-container {
+  height: 100%;
+}
+
+.content {
+  padding: 16px;
+}
diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 2009f5a..dc823f7 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -43,7 +43,7 @@ import { DeleteModalComponent } from './components/groups/delete-modal/delete-mo
 import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
 import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
-
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
 
 @NgModule({ declarations: [
         AppComponent,
@@ -70,26 +70,26 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
         EditClientComponent
     ],
     bootstrap: [AppComponent],
-    imports: [BrowserModule,
-        AppRoutingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatButtonModule,
-        MatSidenavModule,
-        BrowserAnimationsModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatListModule,
-        MatTableModule,
-        MatDialogModule,
-        MatSelectModule,
-        MatDividerModule,
-        MatStepperModule,
-        MatSlideToggleModule, MatProgressSpinner],
+  imports: [BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSidenavModule,
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatListModule,
+    MatTableModule,
+    MatDialogModule,
+    MatSelectModule,
+    MatDividerModule,
+    MatStepperModule,
+    MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.css b/ogWebconsole/src/app/components/layout/header/header.component.css
index d5ba1ce..6c84df7 100644
--- a/ogWebconsole/src/app/components/layout/header/header.component.css
+++ b/ogWebconsole/src/app/components/layout/header/header.component.css
@@ -1,15 +1,13 @@
 
 mat-toolbar {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
     height: 50px;
-    box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5);
+    background-color: #3f51b5;
+    color: white;
 }
 
 .navbar-button-row {
     display: flex;
-    justify-content: space-around;
+    justify-content: end;
     flex-grow: 1;
 }
 
@@ -20,4 +18,4 @@ button[mat-flat-button] {
 .navbar-tittle{
     padding-left: 20px;
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.html b/ogWebconsole/src/app/components/layout/header/header.component.html
index 737223f..6a54ed5 100644
--- a/ogWebconsole/src/app/components/layout/header/header.component.html
+++ b/ogWebconsole/src/app/components/layout/header/header.component.html
@@ -1,19 +1,11 @@
 <mat-toolbar>
-    <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">
-        <button mat-flat-button color="primary" routerLink="/groups">Grupos</button>
-        <button mat-flat-button color="primary">Acciones</button>
-        <button mat-flat-button color="primary">Imágenes</button>
-        <button mat-flat-button color="primary">Componentes</button>
-        <button mat-flat-button color="primary">Repositiorios</button>
-        <button mat-flat-button color="primary">Menús</button>
-        <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="warn" routerLink="/auth/login">Salir</button>
-      </div>
-
-</mat-toolbar>
\ No newline at end of file
+      <button mat-button [matMenuTriggerFor]="menu">Administracion</button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item routerLink="/users">Usuarios</button>
+        <button mat-menu-item routerLink="/user-groups">Roles</button>
+      </mat-menu>
+      <button mat-flat-button color="warn" routerLink="/auth/login">Salir</button>
+    </div>
+</mat-toolbar>
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 09b9d86..0b7bd3a 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,6 +1,11 @@
 
-.content-wrapper{
-    display: block;
-    grid-area: content;
-    margin: 20px;
-}
\ No newline at end of file
+.container {
+  width: auto;
+  height: 100%;
+}
+
+.content {
+  margin: 10px;
+  padding: 10px;
+}
+
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 1373e77..f5e4d99 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,6 +1,11 @@
 <app-header (toggleSidebar)="toggleSidebar()"></app-header>
-<div class="content-wrapper">
-  <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
-  <div class="content">
+
+<mat-drawer-container class="container" >
+  <mat-drawer class="sidebar" mode="side" opened>
+    <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
+  </mat-drawer>
+
+  <mat-drawer-content class="content">
     <router-outlet />
-  </div>
\ No newline at end of file
+  </mat-drawer-content>
+</mat-drawer-container>
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 1365866..8017e31 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
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-main-layout',
   templateUrl: './main-layout.component.html',
-  styleUrl: './main-layout.component.css'
+  styleUrl: './main-layout.component.css',
 })
 export class MainLayoutComponent {
   isSidebarVisible: boolean = false;
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
index d68e53c..60409d3 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
@@ -1,25 +1,37 @@
-.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);
-    z-index: 99999999999;
-  }
-  
-  .sidebar.visible {
-    left: 0;
-  }
-
-  .sidebar-content{
-    margin: 20px;
-  }
-
-  button {
-    margin-bottom: 10px;
+mat-nav-list {
+  width: 250px;
 }
-  
 
+mat-list-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.entry{
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding:0.75rem;
+}
+
+mat-icon {
+  margin-right: 8px;
+}
+
+.user-logged{
+  align-items: center;
+  gap: 2rem;
+  padding:1.5rem;
+  font-size: x-large;
+}
+
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.admin-link {
+  margin-top: auto;
+}
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html
index a4a5b88..3c47833 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html
@@ -1,8 +1,58 @@
-<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>
-  
\ No newline at end of file
+<mat-nav-list>
+  <mat-list-item disabled>
+    <span class="user-logged">
+      <span> {{username}}</span>
+    </span>
+  </mat-list-item>
+
+  <mat-divider></mat-divider>
+
+  <mat-list-item routerLink="/groups">
+    <span class="entry">
+      <mat-icon class="icon">apartment</mat-icon>
+      <span>Grupos</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+    <span class="entry">
+      <mat-icon class="icon">chevron_right</mat-icon>
+      <span>Acciones</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">desktop_windows</mat-icon>
+      <span>Imágenes</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">settings_input_component</mat-icon>
+      <span>Componentes</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">warehouse</mat-icon>
+      <span>Repositorios</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">list</mat-icon>
+      <span>Menús</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">search</mat-icon>
+      <span>Buscar</span>
+    </span>
+  </mat-list-item>
+  <mat-list-item>
+     <span class="entry">
+      <mat-icon class="icon">calendar_month</mat-icon>
+      <span>Calendarios</span>
+    </span>
+  </mat-list-item>
+</mat-nav-list>
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts
index 85e49bd..5445f3c 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts
@@ -11,7 +11,7 @@ describe('SidebarComponent', () => {
       imports: [SidebarComponent]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(SidebarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
index ad83d71..9f6c4b1 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
@@ -38,4 +38,4 @@ export class SidebarComponent {
       console.log("User edited successfully!")
     }); */
   }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d8af095
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "oggui",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}