General Little Improvements

src/app/app-routing.module.ts

@@ -1,13 +1,14 @@
-import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
+import { AuthGuardService } from "./service/auth/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 { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+
 const routes: Routes = [
   {
     path: "users",

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 "./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,20 +1,23 @@
-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 { AppRoutingModule } from "./app-routing.module";
+import { RouteReuseService } from "./service/route-reuse/route-reuse.service"
 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 { 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 "./projects-list/projects-list.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 { RouteReuseStrategy } from "@angular/router";
+
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
@@ -35,9 +38,6 @@ 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/dashboard/dashboard.component.html

@@ -3,4 +3,4 @@
 </button>
 <mat-card-content class="little-pad-marg mat-upm-secondary" fxLayoutAlign="center center">
     <p>Tarjetas de dashboard</p>
-</mat-card-content>
+</mat-card-content>

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

@@ -1,21 +1,12 @@
 <mat-toolbar class="mat-upm-shade-3">
-  <button
-    id="toggleNavBtn"
-    mat-icon-button
-    aria-label="Toggle navigation sidebar button"
-    (click)="onClickToggleSidebarButton()"
-  >
+  <button id="toggleNavBtn" mat-icon-button aria-label="Toggle navigation sidebar button"
+    (click)="onClickToggleSidebarButton()">
     <mat-icon>menu</mat-icon>
   </button>
   <span>UPM</span>
   <span class="header-spacer"></span>
-  <button
-    id="settingsBtn"
-    mat-icon-button
-    aria-label="Open user's settings"
-    routerLink="/account-settings"
-    routerLinkActive="active"
-  >
+  <button id="settingsBtn" mat-icon-button aria-label="Open user's settings" routerLink="/account-settings"
+    routerLinkActive="active">
     <mat-icon>settings</mat-icon>
   </button>
-</mat-toolbar>
+</mat-toolbar>

src/app/layout/sidenav-body/sidenav-body.component.html

@@ -53,4 +53,4 @@
   </mat-list-item>
 
   <mat-divider></mat-divider>
-</mat-nav-list>
+</mat-nav-list>

src/app/layout/toolbar/toolbar.component.html

@@ -1,47 +1,21 @@
 <mat-toolbar class="mat-upm-shade-2" fxLayoutAlign="space-between center">
-  <button
-    id="myProjectsBtn"
-    mat-icon-button
-    aria-label="My Projects"
-    routerLink="/my-projects"
-    routerLinkActive="active"
-  >
+  <button id="myProjectsBtn" mat-icon-button aria-label="My Projects" routerLink="/my-projects"
+    routerLinkActive="active">
     <mat-icon>folder_shared</mat-icon>
   </button>
-  <button
-    id="newProjectBtn"
-    mat-icon-button
-    aria-label="Create New Project"
-    routerLink="/new-project"
-    routerLinkActive="active"
-  >
+  <button id="newProjectBtn" mat-icon-button aria-label="Create New Project" routerLink="/new-project"
+    routerLinkActive="active">
     <mat-icon>create_new_folder</mat-icon>
   </button>
-  <button
-    id="myRequestsBtn"
-    mat-icon-button
-    aria-label="My Requests"
-    routerLink="/my-requests"
-    routerLinkActive="active"
-  >
+  <button id="myRequestsBtn" mat-icon-button aria-label="My Requests" routerLink="/my-requests"
+    routerLinkActive="active">
     <mat-icon>library_books</mat-icon>
   </button>
-  <button
-    id="remindersBtn"
-    mat-icon-button
-    aria-label="Reminders"
-    routerLink="/my-reminders"
-    routerLinkActive="active"
-  >
+  <button id="remindersBtn" mat-icon-button aria-label="Reminders" routerLink="/my-reminders" routerLinkActive="active">
     <mat-icon>calendar_today</mat-icon>
   </button>
-  <button
-    id="searchProjectsBtn"
-    mat-icon-button
-    aria-label="Search Projects"
-    routerLink="/projects"
-    routerLinkActive="active"
-  >
+  <button id="searchProjectsBtn" mat-icon-button aria-label="Search Projects" routerLink="/projects"
+    routerLinkActive="active">
     <mat-icon>search</mat-icon>
   </button>
-</mat-toolbar>
+</mat-toolbar>

src/app/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

@@ -1,16 +1,17 @@
+import { LoginInputDto } from "../model/auth/input/login.input.dto";
+
+import { AuthService } from "../service/auth/auth.service";
+import { LocalStorageService } from "../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]);
   }
 }

src/app/project-detail/project-detail.component.html

@@ -10,8 +10,7 @@
       Universidad: <mat-chip>{{ project?.department?.university?.name }}</mat-chip>
 
       Departamento:
-      <mat-chip
-        >{{ project?.department == undefined ? "Independiente" : project?.department?.name }}
+      <mat-chip>{{ project?.department == undefined ? "Independiente" : project?.department?.name }}
       </mat-chip>
       Projecto: <mat-chip>{{ project?.type }}</mat-chip>
     </div>
@@ -45,4 +44,4 @@ <h3>Tópicos</h3>
     <button mat-raised-button color="primary">Inscribirse</button>
     <!-- Hacer funcionar boton de inscripción -->
   </mat-card-actions>
-</mat-card>
+</mat-card>

src/app/project-detail/project-detail.component.ts

@@ -1,8 +1,10 @@
+import { Project } from "../model/project/project";
+
+import { ProjectsService } from "../service/projects/projects.service";
+import { UniversitiesService } from "../service/universities/universities.service";
+
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { Project } from "../model/project/project";
-import { ProjectsService } from "../projects.service";
-import { UniversitiesService } from "../universities.service";
 
 @Component({
   selector: "app-project-detail",

src/app/projects-list/projects-list.component.html

@@ -3,7 +3,10 @@
     <mat-form-field class="search-bar">
       <mat-label>Buscar proyectos</mat-label>
       <input matInput placeholder="Por nombre de proyecto o por usuario" formControlName="generalSearch" />
-        <mat-icon matSuffix (click)="onSubmit()">search</mat-icon>
+      <mat-icon *ngIf="generalSearchValid()" matSuffix>search</mat-icon>
+      <mat-icon *ngIf="!generalSearchValid()" matSuffix type="button" class="submitIcon" (click)="onSubmit()">
+        check
+      </mat-icon>
     </mat-form-field>
     <button mat-button class="toggleFilterMenu" type="menu" (click)="openFilterMenu()">
       <mat-icon>filter_list</mat-icon>
@@ -95,9 +98,8 @@
             <mat-card-content>
               <mat-chip-list matLine>
                 <mat-chip *ngIf="project.users !== undefined" class="user-tag">
-                  {{ project.users[0].name }} {{ project.users[0].lastName }}, +{{
-                    project.users.length
-                  }}
+                  {{ project.users[0].name }} {{ project.users[0].lastName }}, +
+                  {{ project.users.length }}
                   personas
                 </mat-chip>
                 <mat-chip *ngElse class="user-tag">

src/app/projects-list/projects-list.component.scss

@@ -25,6 +25,10 @@
   flex-grow: 1;
 }
 
+.submitIcon {
+  cursor: pointer;
+}
+
 .toggleFilterMenu,
 .applyFilters,
 .resetFilters {