Gestión de espacios. Desarrollo de una aplicación en Angular

$ ng new angular-espacios

? Would you like to add Angular routing? Yes (1)
? Which stylesheet format would you like to use? CSS

$ ng add @angular/material

Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.a
ngular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

$ npm i -s @angular/flex-layout @angular/cdk

$ ng g module shared

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule, (1)
    BrowserAnimationsModule, (2)
    FlexLayoutModule, (2)
    SharedModule, (3)
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

$ ng g component shared/sidebar
$ ng g component shared/footbar

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FootbarComponent } from './footbar/footbar.component';

@NgModule({
  declarations: [SidebarComponent, FootbarComponent],
  imports: [CommonModule],
  exports: [SidebarComponent, FootbarComponent], (1)
})
export class SharedModule {}

<div fxLayout="row" fxLayoutAlign="start stretch" fxFill> (1)
  <div>
    <app-sidebar></app-sidebar>
  </div>
  <div fxFlex fxLayout="column">
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
    <div>
      <app-footbar></app-footbar>
    </div>
  </div>
</div>

$ ng g module material

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FlexLayoutModule } from '@angular/flex-layout';

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatNativeDateModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [],
  imports: [CommonModule],
  exports: [ (1)
    FlexLayoutModule,  (2)

    MatButtonModule, (3)
    MatCardModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatNativeDateModule,
    MatSelectModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTableModule,
  ],
})
export class MaterialModule {}

$ ng g module main/home --routing
$ ng g module main/solicitudes --routing
$ ng g module main/espacios --routing

$ ng g c main/home/pages/home
$ ng g c main/espacios/pages/consultar
$ ng g c main/solicitudes/pages/consultar
$ ng g c main/solicitudes/pages/crear

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'solicitudes', (1)
    loadChildren: () => (2)
      import('./main/solicitudes/solicitudes.module').then(
        (m) => m.SolicitudesModule
      ),
  },
  {
    path: 'espacios',
    loadChildren: () =>
      import('./main/espacios/espacios.module').then((m) => m.EspaciosModule),
  },
  {
    path: '', (3)
    loadChildren: () => (4)
      import('./main/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: '**', (5)
    redirectTo: '',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  {
    path: '',
    children: [{ path: '', component: HomeComponent }],
  },
  {
    path: '**',
    redirectTo: '',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HomeRoutingModule {}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ConsultarComponent } from './pages/consultar/consultar.component';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'consultar', component: ConsultarComponent },
      { path: '', redirectTo: 'consultar' },
    ],
  },
  {
    path: '**',
    redirectTo: 'consultar',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class EspaciosRoutingModule {}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrearComponent } from './pages/crear/crear.component';
import { ConsultarComponent } from './pages/consultar/consultar.component';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'crear', component: CrearComponent },
      { path: 'consultar', component: ConsultarComponent },
      { path: '', redirectTo: 'consultar' },
    ],
  },
  {
    path: '**',
    redirectTo: 'crear',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SolicitudesRoutingModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FootbarComponent } from './footbar/footbar.component';
import { MaterialModule } from '../material/material.module';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [SidebarComponent, FootbarComponent],
  imports: [CommonModule, MaterialModule, RouterModule], (1)
  exports: [SidebarComponent, FootbarComponent],
})
export class SharedModule {}

<div fxLayout="column">
  <button mat-button routerLink="/">Home</button>
  <hr />

  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title> Solicitudes </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="column">
        <div>
          <button mat-button routerLink="./solicitudes/crear">Crear</button>
        </div>
        <div>
          <button mat-button routerLink="./solicitudes/consultar">
            Consultar
          </button>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title> Espacios </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="column">
        <a mat-button routerLink="./espacios/consultar">Consultar</a>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
</div>

<div fxLayout="row">
  <a mat-button href="https://www.ual.es/avisolegal" target="_blank"
    >Aviso legal</a
  >

  <a mat-button href="https://www.ual.es/politicaprivacidad" target="_blank"
    >Política de Privacidad</a
  >

  <a mat-button href="https://www.ual.es/accesibilidad" target="_blank"
    >Política de Accesibilidad</a
  >
</div>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './pages/home/home.component';
import { MaterialModule } from '../../material/material.module';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, HomeRoutingModule, MaterialModule], (1)
})
export class HomeModule {}

<div fxLayout="row" fxLayoutAlign="center center">
  <mat-card class="text-center" fxLayout="column" fxLayoutAlign="center center">
    <img src="assets/images/empty.png" />
    <h1>¡Hola! ¿Aún no has reservado ningún espacio?</h1>
    <p>
      Si deseas reservar un espacio, consulta la disponibilidad a través del
      siguiente enlace.
    </p>
    <button
      [routerLink]="['/espacios/consultar']"
      mat-stroked-button
      ngClass.xs="mat-fab"
      color="primary"
    >
      <span fxHide fxShow.gt-xs>Ver disponibilidad de espacios</span>
    </button>
  </mat-card>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-mi-form',
  templateUrl: './mi-form.component.html',
  styleUrls: ['./mi-form.component.css'],
})
export class MiFormComponent implements OnInit {
  constructor(private fb: FormBuilder) {} (1)

  ngOnInit(): void {}

  formPersona: FormGroup = this.fb.group({ (2)
    nombre: [{ value: 'John Smith', disabled: true }], (3)
    email: [, [Validators.required, Validators.email]], (4)
  });
}

<form [formGroup]="formPersona" fxLayout="column" fxFlexOffset="10"> (1)
  <mat-form-field>
    <mat-label>Nombre</mat-label
    ><input matInput type="text" formControlName="nombre" /> (2)
  </mat-form-field>
  <mat-form-field>
    <mat-label>Email</mat-label
    ><input matInput type="text" formControlName="email" /> (3)
  </mat-form-field>
</form>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SolicitudesRoutingModule } from './solicitudes-routing.module';
import { ConsultarComponent } from './pages/consultar/consultar.component';
import { CrearComponent } from './pages/crear/crear.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material/material.module';

@NgModule({
  declarations: [ConsultarComponent, CrearComponent],
  imports: [
    CommonModule,
    SolicitudesRoutingModule,
    ReactiveFormsModule, (1)
    MaterialModule, (2)
  ],
})
export class SolicitudesModule {}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css'],
})
export class CrearComponent implements OnInit {
  formHorario: FormGroup = this.fb.group({ (1)
    nombre: [{ value: '', disabled: true }], (2)
    cargo: [, [Validators.required]], (3)
    unidad: [{ value: '', disabled: true }],
    telefono: [{ value: '', disabled: true }],
    email: [, [Validators.required, Validators.email]], (4)
    tipo: [,],
    nombreActividad: [, [Validators.required, Validators.minLength(5)]], (5)
    start: [,],
    end: [,],
    dia: [,],
    horaInicio: [,],
    horaFin: [,],
  });

  cargos: string[] = [ (6)
    'Profesor Titular de Universidad',
    'Director de Secretariado de Innovación Tecnológica',
  ];


  diasSemana: string[] = [ (7)
    'lunes',
    'martes',
    'miercoles',
    'jueves',
    'viernes',
    'sabado',
    'domingo',
  ];

  horas = Array.from(Array(24).keys()); (8)

  constructor(private fb: FormBuilder)  {} (9)

  ngOnInit(): void { (10)
    this.formHorario.controls['nombre'].setValue('Manuel Torres Gil');
    this.formHorario.controls['unidad'].setValue('Informática');
    this.formHorario.controls['telefono'].setValue('84030');
  }

  save() { (11)
    console.log('this.formHorario :>> ', this.formHorario);
  }

<div fxFlexAlign="center" fxLayoutAlign="center center">
  <form [formGroup]="formHorario"> (1)
    <h1>Crear reserva</h1>
    <hr />
    <div fxLayout="column wrap" fxLayoutGap="20px">
      <mat-card> (2)
        <mat-card-subtitle>Datos personales</mat-card-subtitle>
        <div fxLayout="row" fxLayoutGap="20px">
          <div fxFlex>
            <mat-form-field appearance="outline" fxFill> (3)
              <mat-label>Email</mat-label> (4)
              <input
                matInput (5)
                formControlName="email" (6)
              />
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline" fxFill>
              <mat-label>Nombre</mat-label>
              <input matInput formControlName="nombre" />
            </mat-form-field>
          </div>

          <div fxFlex>
            <mat-form-field appearance="outline" fxFill>
              <mat-label>Unidad/Departamento/Centro</mat-label>
              <input matInput formControlName="unidad" />
            </mat-form-field>
          </div>
        </div>
        <div fxLayout="row" fxLayoutGap="20px">
          <div fxFlex>
            <mat-form-field appearance="outline" fxFill>
              <mat-label>Teléfono</mat-label>
              <input matInput formControlName="telefono" />
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline" fxFill>
              <mat-label>Cargo</mat-label>
              <div>
                <mat-select formControlName="cargo"> (7)
                  <mat-option
                    *ngFor="let cargo of cargos"
                    value="{{ cargo }}"
                    >{{ cargo }}</mat-option
                  >
                </mat-select>
              </div>
            </mat-form-field>
          </div>
          <div fxFlex></div>
        </div>
      </mat-card>

      <mat-card> (8)
        <mat-card-subtitle>Datos de la actividad</mat-card-subtitle>
        <div fxLayout="row" fxLayoutGap="20px">
          <div>
            <mat-form-field appearance="outline">
              <mat-label>Tipo</mat-label>
              <mat-select formControlName="tipo">
                <mat-option value="docente">Docente</mat-option>
                <mat-option value="noDocente">No docente</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline" fxFill>
              <mat-label>Actividad</mat-label>
              <input matInput formControlName="nombreActividad" />
            </mat-form-field>
          </div>
        </div>
      </mat-card>

      <mat-card>
        <mat-card-subtitle>Horario de la reserva</mat-card-subtitle>
        <div fxLayout="row" fxLayoutGap="20px">
          <div fxFlex>
            <mat-form-field appearance="fill">
              <mat-label>Rango de fechas</mat-label>
              <mat-date-range-input [rangePicker]="picker"> (9)
                <input
                  matStartDate
                  formControlName="start"
                  placeholder="Start date"
                />
                <input
                  matEndDate
                  formControlName="end"
                  placeholder="End date"
                />
              </mat-date-range-input>
              <mat-datepicker-toggle
                matSuffix
                [for]="picker"
              ></mat-datepicker-toggle>
              <mat-date-range-picker #picker></mat-date-range-picker> (10)
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline">
              <mat-label>Día</mat-label>
              <mat-select formControlName="dia"> (11)
                <mat-option *ngFor="let day of daysOfWeek" value="{{ day }}">{{
                  day | titlecase
                }}</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline">
              <mat-label>Hora de inicio</mat-label>
              <mat-select formControlName="horaInicio"> (12)
                <mat-option *ngFor="let hour of hours" value="{{ hour }}">{{
                  hour
                }}</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div fxFlex>
            <mat-form-field appearance="outline">
              <mat-label>Hora de fin</mat-label>
              <mat-select formControlName="horaFin"> (13)
                <mat-option *ngFor="let hour of hours" value="{{ hour }}">{{
                  hour
                }}</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="end">
          <button mat-stroked-button color="primary" (click)="save()"> (14)
            Guardar
          </button>
        </div>
      </mat-card>
    </div>
  </form>
</div>

export const environment = {
  production: false,
  urlPersonas: 'http://localhost:3000/personas', (1)
};

import { environment } from './../../environments/environment'; (1)
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class PeopleService {
  constructor(private http: HttpClient) {}

  findOne(email: any): Observable<any> {
    return this.http.get(`${environment.urlPersonas}?email=${email}`); (2)
  }
}

export const environment = {
  production: true,
  urlPersonas: 'http://<your-production-people-api-server>/personas', (1)
};

  buscarPersona(email: any) {
    /*
    this.personaService.findOne(email).subscribe((res) => { (1)
      this.persona = res[0];
    });
    */

    return lastValueFrom(this.personaService.findOne(email));(2)
  }

  async actualizarCamposPersona() { (1)
    const email = this.formHorario.controls['email'].value;

    // this.buscarPersona(email); (2)

    this.persona = (await this.buscarPersona(email))[0]; (3)

    if (this.persona) {
      this.cargos = [...this.persona.cargo];

      this.formHorario.controls['nombre'].setValue(this.persona.nombre);
      this.formHorario.controls['unidad'].setValue(this.persona.unidad);
      this.formHorario.controls['telefono'].setValue(this.persona.telefono);

      this.persona.cargo = this.formHorario.controls['cargo'].value;

      return;
    }
  }

      this.formHorario.controls['nombre'].setValue(this.persona.nombre);
      this.formHorario.controls['unidad'].setValue(this.persona.unidad);
      this.formHorario.controls['telefono'].setValue(this.persona.telefono);

  async actualizarCamposPersona() {
    const email = this.formHorario.controls['email'].value;

    this.buscarPersona(email);

    //this.persona = (await this.buscarPersona(email))[0];

    if (this.persona) {
      this.cargos = [...this.persona.cargo];

      this.formHorario.patchValue(this.persona); (1)

      this.persona.cargo = this.formHorario.controls['cargo'].value;

      return;
    }

    this.clearPersonalData();
  }

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { lastValueFrom } from 'rxjs';
import { PersonaService } from '../../../../services/persona.service';
import { MatSnackBar } from '@angular/material/snack-bar'; (1)

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css'],
})
export class CrearComponent implements OnInit {
  cargos: string[] = [];

  persona: any;

  formHorario: FormGroup = this.fb.group({
    nombre: [{ value: '', disabled: true }],
    cargo: [, [Validators.required]],
    unidad: [{ value: '', disabled: true }],
    telefono: [{ value: '', disabled: true }],
    email: [, [Validators.required, Validators.email]],
    tipo: [,],
    nombreActividad: [, [Validators.required, Validators.minLength(5)]],
    start: [,],
    end: [,],
    dia: [,],
    horaInicio: [,],
    horaFin: [,],
  });

  diasSemana: string[] = [
    'lunes',
    'martes',
    'miercoles',
    'jueves',
    'viernes',
    'sabado',
    'domingo',
  ];

  horas = Array.from(Array(24).keys());

  constructor(
    private fb: FormBuilder,
    private personaService: PersonaService,
    private snackBar: MatSnackBar (2)
  ) {}

  ngOnInit(): void {}

  isNotValidField(field: string) {
    return (
      this.formHorario.controls[field].errors &&
      this.formHorario.controls[field].touched
    );
  }

  isValidForm() {
    return this.formHorario.valid;
  }

  buscarPersona(email: any) {
    return lastValueFrom(this.personaService.findOne(email));
  }

  async actualizarCamposPersona() {
    const email = this.formHorario.controls['email'].value;

    this.persona = (await this.buscarPersona(email))[0];

    if (this.persona) {
      this.cargos = [...this.persona.cargo];

      this.formHorario.patchValue(this.persona);

      this.persona.cargo = this.formHorario.controls['cargo'].value;

      return;
    }

    this.clearPersonalData(); (3)
  }

  clearPersonalData() { (4)
    this.formHorario.reset(); (5)

    this.snackBar.open('Persona no disponible', '', { (6)
      duration: 1500,
    });
  }

  save() {
    console.log('this.formHorario :>> ', this.formHorario);
  }
}

$ ng g service services/solicitudes

export const environment = {
  production: false,
  urlPersonas: 'http://localhost:3000/personas',
  urlEspacios: 'http://localhost:3000',
};

export const environment = {
  production: true,
  urlPersonas: 'http://<your-production-people-api-server>/personas',
  urlEspacios: 'http://<your-production-espacios-api-server>',
};

import { environment } from './../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ReservationsService {
  constructor(private http: HttpClient) {}

  save(data: any): Observable<any> { (1)
    return this.http.post(`${environment.urlEspacios}/reservations`, data);
  }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { lastValueFrom } from 'rxjs';
import { PersonaService } from '../../../../services/persona.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { SolicitudesService } from '../../../../services/solicitudes.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css'],
})
export class CrearComponent implements OnInit {
  cargos: string[] = [];

  persona: any;

  formHorario: FormGroup = this.fb.group({
    nombre: [{ value: '', disabled: true }],
    cargo: [, [Validators.required]],
    unidad: [{ value: '', disabled: true }],
    telefono: [{ value: '', disabled: true }],
    email: [, [Validators.required, Validators.email]],
    tipo: [,],
    nombreActividad: [, [Validators.required, Validators.minLength(5)]],
    start: [,],
    end: [,],
    dia: [,],
    horaInicio: [,],
    horaFin: [,],
  });

  diasSemana: string[] = [
    'lunes',
    'martes',
    'miercoles',
    'jueves',
    'viernes',
    'sabado',
    'domingo',
  ];

  horas = Array.from(Array(24).keys());

  constructor(
    private fb: FormBuilder,
    private personaService: PersonaService,
    private solicitudesService: SolicitudesService, (1)
    private snackBar: MatSnackBar,
    private router: Router (2)
  ) {}

  ngOnInit(): void {}

  isNotValidField(field: string) {
    return (
      this.formHorario.controls[field].errors &&
      this.formHorario.controls[field].touched
    );
  }

  isValidForm() {
    return this.formHorario.valid;
  }

  buscarPersona(email: any) {
    return lastValueFrom(this.personaService.findOne(email));
  }

  async actualizarCamposPersona() {
    const email = this.formHorario.controls['email'].value;

    this.persona = (await this.buscarPersona(email))[0];

    if (this.persona) {
      this.cargos = [...this.persona.cargo];

      this.formHorario.patchValue(this.persona);

      this.persona.cargo = this.formHorario.controls['cargo'].value;

      return;
    }

    this.clearPersonalData();
  }

  clearPersonalData() {
    this.formHorario.reset();

    this.snackBar.open('Persona no disponible', '', {
      duration: 1500,
    });
  }

  save() {
    let solicitud = this.formHorario.getRawValue(); (3)

    this.solicitudesService.save(solicitud).subscribe((res) => { (4)
      if (res) { (5)
        this.snackBar.open('Solicitud creada', '', {  (6)
          duration: 1500,
        });

        this.router.navigate(['/solicitudes/consultar']); (7)
      }
    });
  }
}

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class SolicitudesService {
  constructor(private http: HttpClient) {}

  findAll(): Observable<any> { (1)
    return this.http.get(`${environment.urlEspacios}/solicitudes`); (2)
  }

  save(data: any): Observable<any> {
    return this.http.post(`${environment.urlEspacios}/solicitudes`, data);
  }
}

import { Component, OnInit } from '@angular/core';
import { SolicitudesService } from '../../../../services/solicitudes.service';

@Component({
  selector: 'app-consultar',
  templateUrl: './consultar.component.html',
  styleUrls: ['./consultar.component.css'],
})
export class ConsultarComponent implements OnInit {
  dataSource: any = [] (1)
  displayedColumns= ['nombre', 'cargo', 'unidad', 'telefono']; (2)

  constructor(
    private solicitudesService: SolicitudesService, (3)
    private snackBar: MatSnackBar (4)
  ) {}
  ngOnInit(): void { (5)
    this.solicitudesService.findAll().subscribe((res) => { (6)
      this.dataSource = res; (7)
      if (this.dataSource.length == 0) { (8)
        this.snackBar.open('No hay solicitudes', '', {
          duration: 1500,
        });
      }
    });
  }
}

<div fxLayout="column" fxLayoutAlign="center center">
  <h1>Listado de solicitudes</h1>
  <div *ngIf="dataSource.length > 0"> (1)
    <hr />
    <mat-card>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> (2)
        <ng-container matColumnDef="nombre"> (3)
          <th mat-header-cell *matHeaderCellDef>Nombre</th> (4)
          <td mat-cell *matCellDef="let element">{{ element.nombre }}</td> (5)
        </ng-container>

        <ng-container matColumnDef="cargo">
          <th mat-header-cell *matHeaderCellDef>Cargo</th>
          <td mat-cell *matCellDef="let element">{{ element.cargo }}</td>
        </ng-container>

        <ng-container matColumnDef="unidad">
          <th mat-header-cell *matHeaderCellDef>Unidad</th>
          <td mat-cell *matCellDef="let element">{{ element.unidad }}</td>
        </ng-container>

        <ng-container matColumnDef="telefono">
          <th mat-header-cell *matHeaderCellDef>Teléfono</th>
          <td mat-cell *matCellDef="let element">{{ element.telefono }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> (6)
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> (7)
      </table>
    </mat-card>
  </div>
</div>

$ ng g service services/espacios

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class EspaciosService {
  constructor(private http: HttpClient) {} (1)

  findAll(): Observable<any> { (2)
    return this.http.get(`${environment.urlEspacios}/espacios`); (3)
  }
}

import { Component, OnInit } from '@angular/core';
import { EspaciosService } from '../../../../services/espacios.service';

@Component({
  selector: 'app-consultar',
  templateUrl: './consultar.component.html',
  styleUrls: ['./consultar.component.css'],
})
export class ConsultarComponent implements OnInit {
  espacios: any = []; (1)

  constructor(private espaciosService: EspaciosService) {} (2)

  ngOnInit(): void { (3)
    this.espaciosService.findAll().subscribe((res) => { (4)
      this.espacios = res; (5)
    });
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EspaciosRoutingModule } from './espacios-routing.module';
import { ConsultarComponent } from './pages/consultar/consultar.component';
import { MaterialModule } from '../../material/material.module';

@NgModule({
  declarations: [ConsultarComponent],
  imports: [CommonModule, EspaciosRoutingModule, MaterialModule], (1)
})
export class EspaciosModule {}

    { (1)
      "edificio": "Aulario II",
      "aula": "Aula 1",
      "fecha": "07/02/2022",
      "reservas": [ (2)
        {
          "hora": "09:00 - 12:00",
          "descripcion": "GRUPO A",
          "asignatura": "( 31103209 ) - Lexicología y Semántica Inglesas",
          "profesor": ""
        },
        {
          "hora": "12:00 - 15:00",
          "descripcion": "GRUPO A",
          "asignatura": "( 12104226 ) - Historia de la Lengua Española II",
          "profesor": ""
        },
        {
          "hora": "16:00 - 19:00",
          "descripcion": "GRUPO UNICO",
          "asignatura": "( 40153329 ) - Teoría de Códigos y Criptografía",
          "profesor": ""
        }
      ]
    }

<div
  *ngIf="espacios.length " (1)
  fxLayout="column"
  fxLayoutAlign="center "
  fxLayoutGap="10px"
>
  <mat-card *ngFor="let espacio of espacios" class="mt-3" fxFill> (2)
    <mat-card-subtitle>
      <mat-label class="mat-body-strong">Edificio: </mat-label
      >{{ espacio.edificio }} (3)
      <mat-label class="mat-body-strong">Aula: </mat-label> {{ espacio.aula }}
      <mat-label class="mat-body-strong">Fecha: </mat-label>{{ espacio.fecha }}
    </mat-card-subtitle>
    <mat-list>
      <mat-list-item *ngFor="let reserva of espacio.reservas"> (4)
        <mat-card-content>
          <mat-label class="mat-body-strong">Hora: </mat-label
          >{{ reserva.hora }} (5)
          <mat-label class="mat-body-strong">Descripción: </mat-label
          >{{ reserva.descripcion }}
          <mat-label class="mat-body-strong">Asignatura: </mat-label
          >{{ reserva.asignatura }}
          <mat-label class="mat-body-strong">Profesor: </mat-label
          >{{ reserva.profesor }}
        </mat-card-content>
      </mat-list-item>
    </mat-list>
  </mat-card>
</div>

$ ng g component main/espacios/components/tabla-espacios
$ ng g component main/espacios/components/form-buscar

$ ng g component shared/sidebar/components/dialogoCreditos

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialogo-creditos',
  templateUrl: './dialogo-creditos.component.html',
  styleUrls: ['./dialogo-creditos.component.css'],
})
export class DialogoCreditosComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<DialogoCreditosComponent>) {} (1)

  ngOnInit(): void {}

  aceptar() { (2)
    console.log('Pulsaste Aceptar'); (3)
    this.dialogRef.close(); (4)
  }
}

<h1 mat-dialog-title>Créditos</h1>
<div mat-dialog-content class="mat-typography">
  <h3>Dirección del proyecto</h3>
  <p>
    Culpa incididunt ut occaecat amet dolore eiusmod ex ut sit laborum in
    nostrud.
  </p>

  <h3>Equipo de desarrollo</h3>
  <p>
    Laboris excepteur voluptate deserunt labore ex consequat nisi fugiat non
    incididunt adipisicing nisi ipsum labore.
  </p>

  <h3>Información del proyecto</h3>
  <p>
    <a href="https://www.ual.es" target="_blank">Web del proyecto</a>
  </p>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close] cdkFocusInitial>Cancelar</button> (1)
  <button mat-button mat-flat-button color="primary" (click)="aceptar()"> (2)
    Aceptar
  </button>
</div>

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogoCreditosComponent } from './components/dialogo-creditos/dialogo-creditos.component';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
})
export class SidebarComponent implements OnInit {
  constructor(public dialog: MatDialog) {} (1)

  ngOnInit(): void {}

  creditos() { (2)
    const dialogRef = this.dialog.open(DialogoCreditosComponent, { (3)
      width: '50%',
    });
  }
}

<div fxLayout="column">
  <button mat-button routerLink="/">Home</button>
  <hr />

  <mat-accordion>
    ...
  </mat-accordion>
  <button mat-button (click)="creditos()">Créditos</button> (1)
</div>

$ ng g component main/solicitudes/components/dialogoEliminar

import { environment } from './../../environments/environment';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SolicitudesService {
  constructor(private http: HttpClient) {}

  findAll(): Observable<any> {
    return this.http.get(`${environment.urlEspacios}/solicitudes`);
  }

  save(data: any): Observable<any> {
    return this.http.post(`${environment.urlEspacios}/solicitudes`, data);
  }

  delete(id: any): Observable<any> { (1)
    return this.http.delete(`${environment.urlEspacios}/solicitudes/${id}`); (2)
  }
}

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { SolicitudesService } from '../../../../services/solicitudes.service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-dialogo-eliminar',
  templateUrl: './dialogo-eliminar.component.html',
  styleUrls: ['./dialogo-eliminar.component.css'],
})
export class DialogoEliminarComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<DialogoEliminarComponent>, (1)
    @Inject(MAT_DIALOG_DATA) public data: any, (2)
    private solicitudesService: SolicitudesService, (3)
    private router: Router, (4)
    private snackBar: MatSnackBar (5)
  ) {}

  ngOnInit(): void {}

  eliminar() { (6)
    this.solicitudesService.delete(this.data.id).subscribe(() => { (7)
      this.snackBar.open('Solicitud eliminada', '', { (8)
        duration: 1500,
      });

      this.dialogRef.close(); (9)
      this.router.navigate([this.router.url]).then(() => { (10)
        window.location.reload();
      });
    });
  }
}

<h1 mat-dialog-title>Confirmación de eliminación</h1>
<div mat-dialog-content class="mat-typography">
  <h3>Desea eliminar esto?</h3>
  <p>Reserva para : {{ data.nombre }} - {{ data.cargo }}</p> (1)
  <p>Actividad: {{ data.nombreActividad }}</p>
  <p>
    Desde {{ data.start | date: "dd/MM/yyyy" }} hasta
    {{ data.end | date: "dd/MM/yyyy" }}. Día: {{ data.dia }}. Hora:
    {{ data.horaInicio }} - {{ data.horaFin }}
  </p>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close] cdkFocusInitial>Cancelar</button> (2)
  <button mat-button mat-flat-button color="warn" (click)="eliminar()"> (3)
    Eliminar
  </button>
</div>

import { Component, OnInit } from '@angular/core';
import { SolicitudesService } from '../../../../services/solicitudes.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { DialogoEliminarComponent } from '../../components/dialogo-eliminar/dialogo-eliminar.component';

@Component({
  selector: 'app-consultar',
  templateUrl: './consultar.component.html',
  styleUrls: ['./consultar.component.css'],
})
export class ConsultarComponent implements OnInit {
  solicitudes: any = [];

  dataSource: any = [];
  displayedColumns = ['nombre', 'cargo', 'unidad', 'telefono', 'acciones'];

  constructor(
    private solicitudesService: SolicitudesService, (1)
    private snackBar: MatSnackBar, (2)
    public dialog: MatDialog (3)
  ) {}
  ngOnInit(): void {
    this.solicitudesService.findAll().subscribe((res) => {
      this.dataSource = res;
      if (this.dataSource.length == 0) {
        this.snackBar.open('No hay solicitudes', '', {
          duration: 1500,
        });
      }
    });
  }

  eliminar(element: any) { (4)
    this.dialog.open(DialogoEliminarComponent, { (5)
      data: element, (6)
    });
  }
}

<div fxLayout="column" fxLayoutAlign="center center">
  <h1>Listado de solicitudes</h1>
  <div *ngIf="dataSource.length > 0">
    <hr />
    <mat-card>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef>Nombre</th>
          <td mat-cell *matCellDef="let element">{{ element.nombre }}</td>
        </ng-container>

        <ng-container matColumnDef="cargo">
          <th mat-header-cell *matHeaderCellDef>Cargo</th>
          <td mat-cell *matCellDef="let element">{{ element.cargo }}</td>
        </ng-container>

        <ng-container matColumnDef="unidad">
          <th mat-header-cell *matHeaderCellDef>Unidad</th>
          <td mat-cell *matCellDef="let element">{{ element.unidad }}</td>
        </ng-container>

        <ng-container matColumnDef="telefono">
          <th mat-header-cell *matHeaderCellDef>Teléfono</th>
          <td mat-cell *matCellDef="let element">{{ element.telefono }}</td>
        </ng-container>

        <!-- Columna de accciones -->
        <ng-container matColumnDef="acciones">  (2)
          <th mat-header-cell *matHeaderCellDef>Acciones</th>
          <td mat-cell *matCellDef="let element"> (3)
            <button
              mat-stroked-button
              color="primary"
              (click)="eliminar(element)" (4)
            >
              <mat-icon>delete</mat-icon> (5)
              Eliminar
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </mat-card>
  </div>
</div>

import { environment } from './../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SolicitudesService {
  constructor(private http: HttpClient) {}

  findAll(): Observable<any> {
    return this.http.get(`${environment.urlEspacios}/solicitudes`);
  }

  findOne(id: any): Observable<any> { (1)
    return this.http.get(`${environment.urlEspacios}/solicitudes/${id}`); (2)
  }

  save(data: any): Observable<any> {
    return this.http.post(`${environment.urlEspacios}/solicitudes`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${environment.urlEspacios}/solicitudes/${id}`);
  }

  update(data: any): Observable<any> { (3)
    return this.http.put(
      `${environment.urlEspacios}/solicitudes/${data.id}`, (4)
      data
    );
  }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrearComponent } from './pages/crear/crear.component';
import { ConsultarComponent } from './pages/consultar/consultar.component';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'crear', component: CrearComponent },
      { path: 'consultar', component: ConsultarComponent },
      { path: 'editar/:id', component: CrearComponent }, (1)
      { path: '', redirectTo: 'consultar' },
    ],
  },
  {
    path: '**',
    redirectTo: 'crear',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SolicitudesRoutingModule {}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { lastValueFrom } from 'rxjs';
import { PersonaService } from '../../../../services/persona.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Solicitud } from '../../../../interfaces/solicitud';
import { SolicitudesService } from '../../../../services/solicitudes.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css'],
})
export class CrearComponent implements OnInit {
  modoEditar: boolean = false; (1)
  id: any; (2)

  cargos: string[] = [];

  persona: any;

  formHorario: FormGroup = this.fb.group({
    nombre: [{ value: '', disabled: true }],
    cargo: [, [Validators.required]],
    unidad: [{ value: '', disabled: true }],
    telefono: [{ value: '', disabled: true }],
    email: [, [Validators.required, Validators.email]],
    tipo: [,],
    nombreActividad: [, [Validators.required, Validators.minLength(5)]],
    start: [,],
    end: [,],
    dia: [,],
    horaInicio: [,],
    horaFin: [,],
  });

  diasSemana: string[] = [
    'lunes',
    'martes',
    'miercoles',
    'jueves',
    'viernes',
    'sabado',
    'domingo',
  ];

  horas = Array.from(Array(24).keys());

  constructor(
    private fb: FormBuilder,
    private personaService: PersonaService,
    private solicitudesService: SolicitudesService,
    private snackBar: MatSnackBar,
    private router: Router,
    private route: ActivatedRoute (3)
  ) {}

  ngOnInit(): void {
    this.modoEditar = false; (4)
    this.id = this.route.snapshot.params['id']; (5)
    if (this.id) { (6)
      this.solicitudesService.findOne(this.id).subscribe((res) => { (7)
        this.modoEditar = true; (8)
        this.formHorario.patchValue({ ...res }); (9)
      });
    }
  }

  isNotValidField(field: string) {
    return (
      this.formHorario.controls[field].errors &&
      this.formHorario.controls[field].touched
    );
  }

  isValidForm() {
    return this.formHorario.valid;
  }

  buscarPersona(email: any) {
    return lastValueFrom(this.personaService.findOne(email));
  }

  async actualizarCamposPersona() {
    const email = this.formHorario.controls['email'].value;

    this.persona = (await this.buscarPersona(email))[0];

    if (this.persona) {
      this.cargos = [...this.persona.cargo];

      this.formHorario.patchValue(this.persona);

      this.persona.cargo = this.formHorario.controls['cargo'].value;

      return;
    }

    this.clearPersonalData();
  }

  clearPersonalData() {
    this.formHorario.reset();

    this.snackBar.open('Persona no disponible', '', {
      duration: 1500,
    });
  }

  save() {
    let solicitud = this.formHorario.getRawValue();

    if (this.modoEditar) { (10)
      (solicitud.id = this.id), (11)
        this.solicitudesService.update(solicitud).subscribe(() => { (12)
          this.snackBar.open('Solicitud actualizada', '', {
            duration: 1500,
          });

          this.router.navigate(['/solicitudes/consultar']);
        });
    } else { (13)
      this.solicitudesService.save(solicitud).subscribe((res) => {
        this.snackBar.open('Solicitud guardada', '', {
          duration: 1500,
        });

        this.router.navigate(['/solicitudes/consultar']);
      });
    }
  }
}

<div fxFlexAlign="center" fxLayoutAlign="center center">
  <form [formGroup]="formHorario" autocomplete="off">
    <h1>{{ modoEditar ? "Editar" : "Crear" }} solicitud</h1> (1)
    <hr />

....

        <div fxLayout="row" fxLayoutAlign="end">
          <button
            mat-stroked-button
            color="primary"
            (click)="save()"
            [disabled]="!isValidForm()"
          >
            {{ modoEditar ? "Actualizar" : "Crear" }} (2)
          </button>
        </div>
      </mat-card>
    </div>
  </form>
</div>

import { Component, OnInit } from '@angular/core';
import { SolicitudesService } from '../../../../services/solicitudes.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { DialogoEliminarComponent } from '../../components/dialogo-eliminar/dialogo-eliminar.component';
import { Router } from '@angular/router'; (1)

@Component({
  selector: 'app-consultar',
  templateUrl: './consultar.component.html',
  styleUrls: ['./consultar.component.css'],
})
export class ConsultarComponent implements OnInit {
  solicitudes: any = [];

  dataSource: any = [];
  displayedColumns = ['nombre', 'cargo', 'unidad', 'telefono', 'acciones'];

  constructor(
    private solicitudesService: SolicitudesService,
    private snackBar: MatSnackBar,
    public dialog: MatDialog,
    private router: Router (2)
  ) {}
  ngOnInit(): void {
    this.solicitudesService.findAll().subscribe((res) => {
      this.dataSource = res;
      if (this.dataSource.length == 0) {
        this.snackBar.open('No hay solicitudes', '', {
          duration: 1500,
        });
      }
    });
  }

  editar(element: any) { (3)
    this.router.navigate([`/solicitudes/editar/${element.id}`]); (4)
  }

  eliminar(element: any) {
    this.dialog.open(DialogoEliminarComponent, {
      data: element,
    });
  }
}

<div fxLayout="column" fxLayoutAlign="center center">
  <h1>Listado de solicitudes</h1>
  <div *ngIf="dataSource.length > 0">
    <hr />
    <mat-card>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef>Nombre</th>
          <td mat-cell *matCellDef="let element">{{ element.nombre }}</td>
        </ng-container>

        <ng-container matColumnDef="cargo">
          <th mat-header-cell *matHeaderCellDef>Cargo</th>
          <td mat-cell *matCellDef="let element">{{ element.cargo }}</td>
        </ng-container>

        <ng-container matColumnDef="unidad">
          <th mat-header-cell *matHeaderCellDef>Unidad</th>
          <td mat-cell *matCellDef="let element">{{ element.unidad }}</td>
        </ng-container>

        <ng-container matColumnDef="telefono">
          <th mat-header-cell *matHeaderCellDef>Teléfono</th>
          <td mat-cell *matCellDef="let element">{{ element.telefono }}</td>
        </ng-container>

        <!-- Columna de accciones -->
        <ng-container matColumnDef="acciones">
          <th mat-header-cell *matHeaderCellDef>Acciones</th>
          <td mat-cell *matCellDef="let element">
            <button (1)
              mat-stroked-button
              color="primary"
              (click)="editar(element)" (2)
            >
              <mat-icon>edit</mat-icon>
              Editar
            </button>
            <button
              mat-stroked-button
              color="primary"
              (click)="eliminar(element)"
            >
              <mat-icon>delete</mat-icon>
              Eliminar
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </mat-card>
  </div>
</div>