Add button disable classroom

Client/package.json

@@ -34,12 +34,12 @@
     "classlist.js": "1.1.20150312",
     "core-js": "^2.5.4",
     "express": "4.16.3",
-    "googleapis": "28.1.0",
     "hammerjs": "2.0.8",
     "jquery": "^3.4.1",
     "jwt-decode": "^2.2.0",
     "moment": "2.22.1",
     "ngx-bootstrap": "^5.1.0",
+    "ngx-spinner": "^8.0.3",
     "perfect-scrollbar": "1.1.0",
     "popper.js": "1.14.3",
     "rxjs": "~6.5.2",

Client/src/app/app.component.html

@@ -1,3 +1,4 @@
+<app-loader></app-loader>
 <div class="wrapper">
   <div class="sidebar" data-color="orange" data-background-color="white" data-image="./assets/img/blank.jpg" *ngIf="logged() && isAdmin()" >
     <app-sidebar></app-sidebar>

Client/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { AddClassroomComponent } from './modules/resources/buildings/add-classro
 import { DeleteDialogComponent } from './components/delete-dialog/delete-dialog.component';
 import {ClassroomsModule} from './modules/resources/buildings/classrooms/classrooms.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { NgxSpinnerModule } from 'ngx-spinner';
 
 import { ApiInterceptor } from './interceptors/api.interceptor';
 
@@ -43,7 +44,8 @@ import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import { LoginComponent } from './components/login/login.component';
 import { AuthGuard } from './guards/auth.guard';
 import { CompletedCareerComponent } from './modules/resources/subjects/completed-career/completed-career.component';
-
+import { LoaderComponent } from './components/loader/loader.component';
+import { LoaderInterceptor } from './interceptors/loader.interceptor';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
@@ -63,7 +65,8 @@ import { CompletedCareerComponent } from './modules/resources/subjects/completed
     FlexLayoutModule,
     ReactiveFormsModule,
     InterfaceModule,
-    ButtonsModule.forRoot()
+    ButtonsModule.forRoot(),
+    NgxSpinnerModule
   ],
   declarations: [
     AppComponent,
@@ -80,13 +83,14 @@ import { CompletedCareerComponent } from './modules/resources/subjects/completed
     AddTeacherComponent,
     LoginComponent,
     CompletedCareerComponent,
+    LoaderComponent,
   ],
   providers: [
-    // {
-    //   provide: HTTP_INTERCEPTORS,
-    //   useClass: ApiInterceptor,
-    //   multi: true
-    // },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: LoaderInterceptor,
+      multi: true
+    },
     AuthGuard
   ],
   entryComponents: [

Client/src/app/components/components.module.ts

@@ -6,7 +6,6 @@ import { FooterComponent } from './footer/footer.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { InterfaceModule } from '../modules/interface/interface.module';
-
 @NgModule({
   imports: [
     CommonModule,
@@ -21,7 +20,7 @@ import { InterfaceModule } from '../modules/interface/interface.module';
   exports: [
     FooterComponent,
     NavbarComponent,
-    SidebarComponent
+    SidebarComponent,
   ]
 })
 export class ComponentsModule { }

Client/src/app/components/loader/loader.component.html

@@ -0,0 +1 @@
+<ngx-spinner bdColor="rgba(51,51,51,0.2)" size="large" type="ball-clip-rotate-multiple" color="#ff9800"></ngx-spinner>

Client/src/app/components/loader/loader.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Client/src/app/components/loader/loader.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { LoaderService } from '../../services';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  public loaderStatus = true;
+  public subscription: Subscription;
+
+  constructor(private spinner: NgxSpinnerService, private loaderService: LoaderService) {
+
+    this.subscription = this.loaderService.loaderUpdateEvent.subscribe( item => {
+      this.loaderStatus = this.loaderService.getStatus();
+      if (this.loaderStatus === true) {
+        this.spinner.hide();
+      } else {
+        this.spinner.show();
+      }
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

Client/src/app/components/login/login.component.ts

@@ -58,7 +58,7 @@ export class LoginComponent implements OnInit {
         });
         const role = +this.authService.getRole();
         if (role === UserType.Director || role === UserType.Professor) {
-          console.log('it\'s a director or a teacher');
+          // console.log('it\'s a director or a teacher');
           this.router.navigateByUrl('resources/subjects');
         } else {
           this.router.navigateByUrl('dashboard');

Client/src/app/interceptors/loader.interceptor.ts

@@ -0,0 +1,35 @@
+import {tap} from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse
+} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import { LoaderService } from '../services';
+
+
+
+@Injectable()
+export class LoaderInterceptor implements HttpInterceptor {
+
+  constructor(private loader: LoaderService) {
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(tap((event: HttpEvent<any>) => {
+      if (event instanceof HttpResponse) {
+        this.loader.pop(request.url);
+      } else {
+        this.loader.push(request.url);
+      }
+    }, (error: any) => {
+      if (error instanceof HttpErrorResponse) {
+        this.loader.pop(request.url);
+      }
+    }));
+  }
+}

Client/src/app/models/Classroom.ts

@@ -4,4 +4,5 @@ export class Classroom {
   capacity = 0;
   scheduleId: number;
   buildingId: number;
+  available: boolean;
 }

Client/src/app/modules/interface/interface.module.ts

@@ -41,6 +41,8 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import { NgxSpinnerModule } from 'ngx-spinner';
+
 
 @NgModule({
   exports: [
@@ -86,7 +88,8 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     MatTreeModule,
     PortalModule,
     ScrollingModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    NgxSpinnerModule,
   ]
 })
 export class InterfaceModule { }

Client/src/app/modules/resources/buildings/classrooms/classrooms-list/classrooms-list.component.html

@@ -28,6 +28,16 @@ <h3 class="title">
           <mat-cell *matCellDef="let element"> {{element.capacity}} </mat-cell>
         </ng-container>
 
+        <!-- Available Column -->
+        <ng-container matColumnDef="available">
+          <mat-header-cell *matHeaderCellDef> Disponible</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            <button class="btn btn-sm button-completed" type="button" (click)="changeAvailable(element)"
+            [class.btn-success]="element.available" [class.btn-light]="!element.available">
+            {{element.available ? 'Habilitada' : 'Deshabilitada'}}
+          </button></mat-cell>
+        </ng-container>
+
         <!-- Options Column -->
         <ng-container matColumnDef="options" >
           <mat-header-cell *matHeaderCellDef> Opciones </mat-header-cell>

Client/src/app/modules/resources/buildings/classrooms/classrooms-list/classrooms-list.component.scss

@@ -18,3 +18,12 @@ mat-table {
   display: flex;
   justify-content: center;
 }
+
+.cdk-column-available {
+  display: flex;
+  justify-content: center;
+}
+
+.button-completed {
+  min-width: 83px !important;
+}

Client/src/app/modules/resources/buildings/classrooms/classrooms-list/classrooms-list.component.ts

@@ -20,7 +20,7 @@ export class ClassroomsListComponent implements OnInit {
 
   buildingId: number;
   building: Building;
-  displayedColumns: string[] = ['name', 'capacity', 'options'];
+  displayedColumns: string[] = ['name', 'capacity', 'available', 'options'];
 
   dataSource: MatTableDataSource<Classroom>;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
@@ -42,8 +42,6 @@ export class ClassroomsListComponent implements OnInit {
       this.building = data;
       this.dataSource = new MatTableDataSource<Classroom>(this.building.classrooms);
       this.dataSource.sort = this.sort;
-      console.log(this.sort);
-      console.log(this.dataSource);
       // this.dataSource.paginator = this.paginator;
     });
   }
@@ -104,4 +102,9 @@ export class ClassroomsListComponent implements OnInit {
     });
   }
 
+  changeAvailable(classroom: Classroom) {
+    classroom.available = !classroom.available;
+    this.classroomService.edit(classroom).subscribe();
+  }
+
 }

Client/src/app/modules/resources/careers/careers-list/careers-list.component.ts

@@ -86,6 +86,7 @@ export class CareersListComponent implements OnInit {
         () => {
           const newTeacher: UserData = this.teachers.find( t => t.id === newCareer.directorId);
           if (oldTeacher !== newTeacher ) {
+            console.log('different teacher');
             oldTeacher.type = UserType.Professor; // downgraded
             this.teacherService.update(oldTeacher).subscribe();
           }

Client/src/app/modules/resources/subjects/subjects-list/subjects-list.component.ts

@@ -49,6 +49,8 @@ export class SubjectsListComponent implements OnInit {
       let career: Career;
       this.careerService.getCareerByTeacher(userId).subscribe(data => {
         career = data;
+        this.idCareer = career.id;
+        this.nameToShow = career.name;
       },
       () => {},
       () => {
@@ -68,12 +70,11 @@ export class SubjectsListComponent implements OnInit {
       () => { },
       () => {
         const previousCareer = +sessionStorage.getItem('career');
-        if (previousCareer) {
+        if (previousCareer && this.authService.getRole() === UserType.Admin) {
           this.idCareer = previousCareer;
-          this.loadCareers();
         } else {
-          this.loadCareers();
         }
+        this.loadCareers();
         this.loadRole();
       });
   }
@@ -89,7 +90,9 @@ export class SubjectsListComponent implements OnInit {
     () => {},
     () => {
       if (this.isAdmin() || this.isDirector()) {
-        this.nameToShow = this.career.name;
+        if (this.career) {
+          this.nameToShow = this.career.name;
+        }
       }
     });
   }
@@ -112,7 +115,7 @@ export class SubjectsListComponent implements OnInit {
         }
       });
       this.sections = sections;
-      this.loadRole();
+      this.loadRole(); // to change the data on the table
     }
   }
 
@@ -134,7 +137,7 @@ export class SubjectsListComponent implements OnInit {
         });
         this.subjectService.add(subject, this.idCareer).subscribe(data => {
           // this.loadCareers();
-          this.loadRole();
+          this.loadRole(); // to update the data on the table
         });
       }
     });

Client/src/app/services/index.ts

@@ -5,3 +5,4 @@ export * from './classroom.service';
 export * from './section.service';
 export * from './subjects.service';
 export * from './teacher.service';
+export *  from './loader.service';

Client/src/app/services/loader.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoaderService } from './loader.service';
+
+describe('LoaderService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LoaderService = TestBed.get(LoaderService);
+    expect(service).toBeTruthy();
+  });
+});

Client/src/app/services/loader.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+
+  public    loaderUpdateEvent: Observable<boolean>;
+  private   loaderUpdateSubject: Subject<boolean>;
+  private   eventList: Array<string>;
+
+  constructor() {
+    this.loaderUpdateSubject = new Subject<boolean>();
+    this.loaderUpdateEvent = this.loaderUpdateSubject.asObservable();
+    this.eventList = [];
+  }
+
+  // if there is no event on the queue, then the loader is released.
+  public getStatus() {
+    return !(this.eventList.length > 0);
+  }
+
+  // pushed a callback
+  public push(symbol: string): void {
+    this.eventList.push(symbol);
+    this.loaderUpdateSubject.next(true);
+  }
+
+  public clear() {
+    this.eventList = [];
+    this.loaderUpdateSubject.next(true);
+  }
+
+  // removes a callback
+  public pop(symbol: string): void {
+    const targetIndex = this.eventList.findIndex(item => {
+      return item === symbol;
+    });
+    this.eventList.splice(targetIndex, 1);
+    this.loaderUpdateSubject.next(true);
+  }
+}