54-grade-programacao

src/app/app-routing.module.ts

@@ -15,6 +15,9 @@ import { UpdateRoleComponent } from './pages/update-role/update-role.component';
 import { AdminGuard } from './services/admin.guard';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
+import { GridDaysComponent } from './pages/grid-days/grid-days.component'; 
+import { GridComponent } from './pages/grid/grid.component'; 
+
 import { WithTokenGuard } from './guard/with-token.guard';
 
 const routes: Routes = [
@@ -31,7 +34,9 @@ const routes: Routes = [
   { path: 'participate', component: ParticipateComponent, canActivate: [AuthGuard], },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], },
   { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], },
-  { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], },
+  { path: 'grid-days', component: GridDaysComponent },
+  { path: 'grid-days/:day', component: GridComponent },
+  { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -36,7 +36,10 @@ import { MenuModule } from 'primeng/menu';
 import { VideoCommentComponent } from './components/video-comment/video-comment.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
+import { GridComponent } from './pages/grid/grid.component';
+import { GridDaysComponent } from './pages/grid-days/grid-days.component';
 import { MessageService } from 'primeng/api';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 @NgModule({
   imports: [
@@ -50,6 +53,7 @@ import { MessageService } from 'primeng/api';
     InputTextModule,
     DropdownModule,
     ButtonModule,
+    ProgressSpinnerModule,
     MenuModule,
     FormsModule,
     BrowserAnimationsModule,
@@ -72,7 +76,9 @@ import { MessageService } from 'primeng/api';
     UpdateRoleComponent,
     SuggestAgendaComponent,
     ParticipateComponent,
-    VideoCommentComponent,
+    GridComponent,
+    GridDaysComponent,
+    VideoCommentComponent
   ],
   providers: [
     { provide: 'authGuard', useClass: AuthGuard },

src/app/pages/grid-days/grid-days.component.css

@@ -0,0 +1,6 @@
+.button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }

src/app/pages/grid-days/grid-days.component.html

@@ -0,0 +1,5 @@
+<div class="button-container">
+  <div *ngFor="let day of days">
+    <button id="redirect" class="w-20 h-8 bg-blue-brand rounded-lg justify-center my-3 text-white md:h-10 md:w-32" (click)="redirect(day)">{{ day }}</button>
+  </div>
+</div>

src/app/pages/grid-days/grid-days.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { GridDaysComponent } from './grid-days.component';
+import { Router } from '@angular/router';
+
+describe('GridDaysComponent', () => {
+  let component: GridDaysComponent;
+  let fixture: ComponentFixture<GridDaysComponent>;
+  let router: Router;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule.withRoutes(
+        [
+          { path: 'grid-days', component: GridDaysComponent }
+        ]
+      )],
+      declarations: [ GridDaysComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GridDaysComponent);
+    component = fixture.componentInstance;
+    router = TestBed.inject(Router);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call redirect when redirect is clicked', () => {
+    spyOn(component, 'redirect').and.callThrough();
+    const navigateSpy = spyOn(router, 'navigate');
+    fixture.detectChanges();
+    const submitButton = fixture.nativeElement.querySelector(
+      '#redirect'
+    );
+    submitButton.click();
+
+    expect(navigateSpy).toHaveBeenCalledWith(['/grid-days/Domingo']);
+  });
+});

src/app/pages/grid-days/grid-days.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-grid-days',
+  templateUrl: './grid-days.component.html',
+  styleUrls: ['./grid-days.component.css']
+})
+
+export class GridDaysComponent {
+  days: string[] = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
+
+  constructor(
+    private route: Router) { 
+
+  }
+  redirect(day: string) {
+    this.route.navigate(['/grid-days/'+ day]);
+
+  }
+}
+
+

src/app/pages/grid/grid.component.css

@@ -0,0 +1,17 @@
+.padded-cell {
+    padding-left: 40px; 
+  }
+.padded-cell-day {
+    padding-left: 20px; 
+  }
+.center-table {
+  font-size: 14px;
+}
+.center-button {
+  margin-left: auto;
+  margin-right: auto;
+  width: 5%;
+}
+tr:not(:last-child) {
+  border-bottom-width: 0.01em;
+}

src/app/pages/grid/grid.component.html

@@ -0,0 +1,33 @@
+<div class="flex justify-center">
+  <div class="w-2/6 text-center flex flex-col gap-14">
+    <p class="text-blue-brand padded-cell-day text-left font-bold text-2xl">
+      {{ day }}
+    </p>
+
+    <p-progressSpinner
+      *ngIf="loadingSchedule; else scheduleTable"
+    ></p-progressSpinner>
+
+    <ng-template #scheduleTable>
+      <table class="center-table my-6">
+        <caption>Programação diária</caption>
+        <tr>
+          <th class="padded-cell">Horário</th>
+          <th class="text-left">Atividade</th>
+        </tr>
+        <tbody>
+          <tr *ngFor="let item of schedule">
+            <td class="padded-cell">{{ item.time }}</td>
+            <td class="text-left">{{ item.activity }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </ng-template>
+
+    <div>
+      <div class="center-button">
+        <button id="redirectBack" class="text-blue-brand" (click)="redirectBack()">Voltar</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/grid/grid.component.spec.ts

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { GridComponent } from './grid.component';
+import { GridService } from 'src/app/services/grid.service';
+import { Router } from '@angular/router';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of, throwError } from 'rxjs';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+class GridServiceMock {
+  getSchedule() {
+    return of({ success: true });
+  }
+}
+
+describe('GridComponent', () => {
+  let component: GridComponent;
+  let fixture: ComponentFixture<GridComponent>;
+  let gridService: GridService;
+  let router: Router;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProgressSpinnerModule, HttpClientTestingModule, RouterTestingModule.withRoutes(
+        [
+          { path: 'grid-days/:day', component: GridComponent }
+        ]
+      )],
+      declarations: [GridComponent],
+      providers: [{ provide: GridService, useValue: new GridServiceMock() }]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(GridComponent);
+    component = fixture.componentInstance;
+    gridService = TestBed.inject(GridService);
+    router = TestBed.inject(Router);
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('shoud call getGridByDay', () => {
+    const mySpy = spyOn(component, 'getGridByDay');
+    fixture.detectChanges();
+    expect(mySpy).toHaveBeenCalled();
+  })
+
+  it('should call getSchedule', () => {
+    const mySpy = spyOn(gridService, 'getSchedule').and.callThrough();
+    component.day = 'Domingo';
+    component.getGridByDay();
+    fixture.detectChanges();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
+  it('should call getSchedule and return an error', () => {
+    const mySpy = spyOn(gridService, 'getSchedule').and.returnValue(throwError(() => new Error('Erro')));
+    component.getGridByDay();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
+  it('should call redirect when redirect is clicked', () => {
+    spyOn(component, 'redirectBack').and.callThrough();
+    const navigateSpy = spyOn(router, 'navigate');
+    fixture.detectChanges();
+    const submitButton = fixture.nativeElement.querySelector(
+      '#redirectBack'
+    );
+    submitButton.click();
+
+    expect(navigateSpy).toHaveBeenCalledWith(['/grid-days/']);
+  });
+
+});

src/app/pages/grid/grid.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GridService } from 'src/app/services/grid.service';
+
+export interface Schedule {
+  time: string;
+  activity: string;
+}
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.css']
+})
+
+export class GridComponent {
+  day: string = "";
+  schedule: Schedule[] = [];
+  loadingSchedule: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private gridService: GridService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.day = this.route.snapshot.params['day'];
+    this.getGridByDay();
+  }
+
+  getGridByDay(): void {
+    this.gridService.getSchedule(this.day).subscribe({
+      next: (data) => {
+        this.schedule = data[this.day.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")];
+        this.loadingSchedule = false;
+      },
+      error: (error) => {
+        console.error(error);
+        this.loadingSchedule = false;
+      }
+    })
+  }
+  redirectBack() {
+    this.router.navigate(['/grid-days/']);
+
+  } 
+}

src/app/services/grid.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { GridService } from './grid.service';
+
+describe('GridService', () => {
+  let service: GridService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+    service = TestBed.inject(GridService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/grid.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../environment/environment';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class GridService {
+  public videoServiceApiURL = environment.videoAPIURL;
+
+  constructor(private http: HttpClient) { }
+
+  getSchedule(day?: string): Observable<any> {
+    return this.http.get(`${this.videoServiceApiURL}/schedule${day ? '?day=' + day : ''}`)
+  }
+}