General Little Improvements

src/app/users.service.ts → src/app/admin/users-service/users.service.ts

@@ -1,7 +1,8 @@
+import { User } from "../../model/user/user";
+
+import { Observable } from "rxjs";
 import { Injectable } from "@angular/core";
 import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { User } from "./model/user/user";
-import { Observable } from "rxjs";
 
 @Injectable({
   providedIn: "root",

src/app/admin/users/users.component.html

@@ -0,0 +1,47 @@
+<div fxLayout="row" fxLayoutGap="0.5rem" id="filter-input" class="little-side-marg">
+  <mat-form-field fxFlex="1 2 calc(15em + 20px)">
+    <mat-label>Filtrar</mat-label>
+    <input matInput (keyup)="filter($event)" placeholder="John Doe" />
+    <button mat-button matSuffix aria-label="Filter" (click)="filter($event)" type="button" class="btn-filter">
+      <mat-icon>search</mat-icon>
+    </button>
+  </mat-form-field>
+</div>
+<div fxLayout="row" fxLayoutGap="0.5rem" id="filter-slide" class="little-side-marg">
+  <mat-slide-toggle (click)="toggleFilterRequests()"
+    >Solo Solicitud Pendiente</mat-slide-toggle
+  >
+</div>
+
+<mat-table [dataSource]="users" matSort class="mat-elevation-z8 little-side-marg">
+  <ng-container matColumnDef="user">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Usuario</mat-header-cell>
+    <mat-cell *matCellDef="let user">
+      {{ user.lastName }}, {{ user.name }} <br />
+      {{ user.mail }}
+    </mat-cell>
+  </ng-container>
+  <ng-container matColumnDef="requestActions">
+    <mat-header-cell *matHeaderCellDef>Solicita Cargo</mat-header-cell>
+    <mat-cell *matCellDef="let user" class="positionRequests">
+      <div *ngIf="user.requestPosition">
+        <button mat-button>
+          <mat-icon aria-hidden="false" aria-label="Revise">visibility</mat-icon>
+        </button>
+        <button mat-button>
+          <mat-icon aria-hidden="false" aria-label="Decline">delete</mat-icon>
+        </button>
+      </div>
+      <div *ngIf="!user.requestPosition">NO</div>
+    </mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
+</mat-table>
+
+<mat-paginator
+  [pageSizeOptions]="[10, 15, 20]"
+  showFirstLastButtons
+  class="mat-elevation-z8 little-side-marg"
+>
+</mat-paginator>

src/app/admin/users/users.component.scss

@@ -0,0 +1,44 @@
+.little-side-marg {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.submitIcon {
+    cursor: pointer;
+}
+
+.btn-filter {
+    min-width: 2rem !important;
+    width: 2rem !important;
+    padding: 0rem;
+    margin-left: 0rem;
+    margin-right: 0rem;
+}
+
+#filter-slide {
+    margin-bottom: 2vh;
+}
+
+.mat-header-cell {
+    text-align: center;
+}
+
+.positionRequests {
+    justify-content: center;
+}
+
+.users-container {
+    padding: 0.5rem;
+}
+
+.mat-column-requestActions {
+    justify-content: center;
+}
+
+.mat-column-user {
+    flex: 0 0 75%;
+    word-wrap: break-word;
+    white-space: unset;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}

src/app/users/users.component.ts → src/app/admin/users/users.component.ts

@@ -1,10 +1,11 @@
+import { LocalStorageService } from "../../general-service/local-storage/local-storage.service";
+import { User } from "../../model/user/user";
+import { UsersService } from "../users-service/users.service";
+
 import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
 import { MatPaginator } from "@angular/material/paginator";
 import { MatSort } from "@angular/material/sort";
 import { MatTableDataSource } from "@angular/material/table";
-import { LocalStorageService } from "../local-storage.service";
-import { User } from "../model/user/user";
-import { UsersService } from "../users.service";
 
 @Component({
   selector: "app-users",
@@ -22,7 +23,7 @@ export class UsersComponent implements OnInit, AfterViewInit {
   constructor(
     private usersService: UsersService,
     private storageService: LocalStorageService
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     const token = this.storageService.getTokenInStorage();
@@ -40,12 +41,16 @@ export class UsersComponent implements OnInit, AfterViewInit {
     this.users.sort = this.sort
   }
 
-  filter(event: Event){
+  filter(event: Event) {
     const inputValue = (event.target as HTMLInputElement).value
     this.users.filter = inputValue.trim().toLowerCase()
   }
 
-  toggleFilterRequests(){
+  searchValid() {
+    return this.users.filter == "";
+  }
+
+  toggleFilterRequests() {
     if (!this.filterRequestsAlreadyApplied) {
       this.users.filter = "true"
       this.filterRequestsAlreadyApplied = true

src/app/app-routing.module.ts

@@ -1,12 +1,13 @@
-import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
+import { AuthGuardService } from "./auth/auth-guard/auth-guard.service";
 import { AccountSettingsComponent } from "./account-settings/account-settings.component";
-import { AuthGuardService } from "./auth-guard.service";
 import { DashboardComponent } from "./dashboard/dashboard.component";
-import { LoginComponent } from "./login/login.component";
-import { ProjectDetailComponent } from "./project-detail/project-detail.component";
-import { ProjectsListComponent } from "./projects-list/projects-list.component";
-import { UsersComponent } from "./users/users.component";
+import { LoginComponent } from "./auth/login/login.component";
+import { ProjectDetailComponent } from "./project/project-detail/project-detail.component";
+import { ProjectsListComponent } from "./project/projects-list/projects-list.component";
+import { UsersComponent } from "./admin/users/users.component";
+
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
 
 const routes: Routes = [
   {

src/app/app.component.html

@@ -1,11 +1,6 @@
 <app-header *ngIf="showHeader" (toggleSidebar)="onToggleSidebar()"></app-header>
 <mat-sidenav-container>
-  <mat-sidenav
-    [mode]="isMobile ? 'over' : 'side'"
-    *ngIf="showSidenav"
-    [class.sidenav]="isMobile"
-    [opened]="!isMobile"
-  >
+  <mat-sidenav [mode]="isMobile ? 'over' : 'side'" *ngIf="showSidenav" [class.sidenav]="isMobile" [opened]="!isMobile">
     <app-sidenav-body></app-sidenav-body>
   </mat-sidenav>
   <mat-sidenav-content class="filled">
@@ -14,4 +9,4 @@
       <router-outlet class="outlet"></router-outlet>
     </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>

src/app/app.component.ts

@@ -1,7 +1,8 @@
+import { DeviceDetectorService } from "./general-service/device-detector/device-detector.service";
+
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatSidenav } from "@angular/material/sidenav";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
-import { DeviceDetectorService } from "./device-detector.service";
+import { MatSidenav } from "@angular/material/sidenav";
 
 @Component({
   selector: "app-root",

src/app/app.module.ts

@@ -1,19 +1,23 @@
+import { AppComponent } from "./app.component";
+import { AppRoutingModule } from "./app-routing.module";
+import { RouteReuseService } from "./general-service/route-reuse/route-reuse.service"
+import { UsersComponent } from "./admin/users/users.component";
+import { LoginComponent } from "./auth/login/login.component";
+import { DashboardComponent } from "./dashboard/dashboard.component";
+import { HeaderComponent } from "./layout/header/header.component";
+import { ToolbarComponent } from './layout/toolbar/toolbar.component';
+import { SidenavBodyComponent } from "./layout/sidenav-body/sidenav-body.component";
+import { AccountSettingsComponent } from "./account-settings/account-settings.component";
+import { ProjectsListComponent } from "./project/projects-list/projects-list.component";
+import { ProjectDetailComponent } from "./project/project-detail/project-detail.component";
+
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { HttpClientModule } from "@angular/common/http";
 import { FlexLayoutModule } from "@angular/flex-layout";
 import { ReactiveFormsModule } from "@angular/forms";
-
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { UsersComponent } from "./users/users.component";
-import { LoginComponent } from "./login/login.component";
-import { DashboardComponent } from "./dashboard/dashboard.component";
-import { HeaderComponent } from "./layout/header/header.component";
-import { SidenavBodyComponent } from "./layout/sidenav-body/sidenav-body.component";
-import { AccountSettingsComponent } from "./account-settings/account-settings.component";
-import { ProjectsListComponent } from "./projects-list/projects-list.component";
+import { RouteReuseStrategy } from "@angular/router";
 
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -32,12 +36,8 @@ import { MatSortModule } from "@angular/material/sort";
 import { MatSelectModule } from "@angular/material/select";
 import { MatChipsModule } from "@angular/material/chips";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
-import { ProjectDetailComponent } from "./project-detail/project-detail.component";
 import { MatDatepickerModule } from "@angular/material/datepicker";
 import { MatMomentDateModule } from "@angular/material-moment-adapter";
-import { ToolbarComponent } from './layout/toolbar/toolbar.component';
-import { RouteReuseStrategy } from "@angular/router";
-import { RouteReuseService } from "./route-reuse.service";
 
 @NgModule({
   declarations: [

src/app/auth-guard.service.ts → src/app/auth/auth-guard/auth-guard.service.ts

@@ -1,15 +1,15 @@
+import { AuthService } from "../auth-service/auth.service"
+import { LoginComponent } from "../login/login.component"
+
+import { Observable } from "rxjs";
 import { Injectable } from "@angular/core";
-import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {
   ActivatedRouteSnapshot,
   CanActivate,
-  Router,
   RouterStateSnapshot,
   UrlTree,
 } from "@angular/router";
-import { Observable } from "rxjs";
-import { AuthService } from "./auth.service";
-import { LoginComponent } from "./login/login.component";
+import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 
 @Injectable({
   providedIn: "root",

src/app/auth.service.ts → src/app/auth/auth-service/auth.service.ts

@@ -1,10 +1,12 @@
+import { LoginInputDto } from "../../model/auth/input/login.input.dto";
+import { LoggedUserDto } from "../../model/auth/output/login.output.dto";
+
+import { LocalStorageService } from "../../general-service/local-storage/local-storage.service";
+
+import { Observable } from "rxjs";
+import { JwtHelperService } from "@auth0/angular-jwt";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { JwtHelperService } from "@auth0/angular-jwt";
-import { Observable } from "rxjs";
-import { LocalStorageService } from "./local-storage.service";
-import { LoginInputDto } from "./model/auth/input/login.input.dto";
-import { LoggedUserDto } from "./model/auth/output/login.output.dto";
 
 @Injectable({
   providedIn: "root",

src/app/login/login.component.html → src/app/auth/login/login.component.html

@@ -10,20 +10,16 @@
 
   <mat-tab-group class="lit-pad-b" animationDuration="0ms" mat-stretch-tabs>
     <mat-tab label="Login">
-      <form
-        [formGroup]="loginForm"
-        fxLayout="column"
-        fxLayoutAlign="stretch"
-        (ngSubmit)="onLoginSubmit()">
-
+      <form [formGroup]="loginForm" fxLayout="column" fxLayoutAlign="stretch" (ngSubmit)="onLoginSubmit()">
+
         <mat-form-field class="lit-pad-t">
           <mat-label>Email</mat-label>
-          <input matInput placeholder="Email" formControlName="mail"/>
+          <input matInput placeholder="Email" formControlName="mail" />
           <mat-icon matSuffix>mail</mat-icon>
         </mat-form-field>
         <mat-form-field>
           <mat-label>Contraseña</mat-label>
-          <input matInput type="password" placeholder="Contraseña" formControlName="password"/>
+          <input matInput type="password" placeholder="Contraseña" formControlName="password" />
           <mat-icon matSuffix>lock</mat-icon>
         </mat-form-field>
 
@@ -34,21 +30,17 @@
     </mat-tab>
 
     <mat-tab label="Registrarse">
-      <form
-        [formGroup]="registerForm"
-        fxLayout="column"
-        fxLayoutAlign="stretch"
-        (ngSubmit)="onRegisterSubmit()">
-
+      <form [formGroup]="registerForm" fxLayout="column" fxLayoutAlign="stretch" (ngSubmit)="onRegisterSubmit()">
+
         <mat-form-field class="lit-pad-t">
           <mat-label>Email</mat-label>
-          <input matInput placeholder="Email" formControlName="mail"/>
+          <input matInput placeholder="Email" formControlName="mail" />
           <mat-icon matSuffix>mail</mat-icon>
         </mat-form-field>
 
         <mat-form-field>
           <mat-label>Contraseña</mat-label>
-          <input matInput type="password" placeholder="Contraseña" formControlName="password"/>
+          <input matInput type="password" placeholder="Contraseña" formControlName="password" />
           <mat-icon matSuffix>lock</mat-icon>
         </mat-form-field>
 
@@ -58,20 +50,20 @@
       </form>
     </mat-tab>
   </mat-tab-group>
-  
+
   <mat-divider></mat-divider>
 
   <div fxLayout="column" fxLayoutAlign="stretch">
-    <br/>
+    <br />
     <button mat-raised-button class="google-style btn-pd">
       <mat-icon svgIcon="logo" class="btn-icon"></mat-icon>
       Conectarse con Google
     </button>
 
-    <br/>
+    <br />
     <button mat-raised-button color="primary" class="btn-pd">
       <mat-icon class="btn-icon">nature_people</mat-icon>
       Solo vengo de visita
     </button>
   </div>
-</mat-card>
+</mat-card>

src/app/login/login.component.ts → src/app/auth/login/login.component.ts

@@ -1,16 +1,17 @@
+import { LoginInputDto } from "../../model/auth/input/login.input.dto";
+
+import { AuthService } from "../auth-service/auth.service";
+import { LocalStorageService } from "../../general-service/local-storage/local-storage.service";
+
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { Router } from "@angular/router";
 import { DomSanitizer } from '@angular/platform-browser';
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { MatIconRegistry } from '@angular/material/icon';
 
-import { AuthService } from "../auth.service";
-import { LocalStorageService } from "../local-storage.service";
-import { LoginInputDto } from "../model/auth/input/login.input.dto";
-
-const googleLogoURL = 
-"https://raw.githubusercontent.com/fireflysemantics/logo/master/Google.svg";
+const googleLogoURL =
+  "https://raw.githubusercontent.com/fireflysemantics/logo/master/Google.svg";
 
 @Component({
   selector: "app-login",
@@ -80,7 +81,7 @@ export class LoginComponent {
       mail: this.registerMail?.value,
       password: this.registerPassword?.value,
     };
-      // verify if already exists
-      this.router.navigate([this.redirectRoute]);
+    // verify if already exists
+    this.router.navigate([this.redirectRoute]);
   }
 }