Semana 11: TRABAJO EN EQUIPO ( 2 integrantes)

Instrucciones: Implemente las siguientes historias de usuario. Tome como base el proyecto avanzado en
clase, ahora con el código fuente dado en este documento culmine la implementación solicitada. Tenga en
cuenta que debe agregar componentes si faltan, así como métodos en el service, modelos o rutas.

HU03: Como administrador quiero editar una universidad para gestionarla.

HU04: Como administrador quiero eliminara una universidad para gestionarla.

Model actual:

export class University{

idUniversity:number=0
nameUniversity:string=""
adressUniversity:string=""
creationDateUniversity:Date=new Date(Date.now())
typeUniversity:string=""
}
Service

import { Injectable } from '@angular/core';

import { environment } from 'src/environments/environment';
import { Observable, Subject } from 'rxjs';
import { University } from '../models/university';
import { HttpClient } from '@angular/common/http';
const base_url = environment.base;
@Injectable({
providedIn: 'root',
})
export class UniversityService {
private url = `${base_url}/universidades`;
private listaCambio = new Subject<University[]>();
constructor(private http: HttpClient) {}
list() {
return this.http.get<University[]>(this.url);
}

insert(uni: University) {
return this.http.post(this.url, uni);
}

setList(listaNueva: University[]) {
this.listaCambio.next(listaNueva);
}

getList() {
return this.listaCambio.asObservable();
}
listId(id: number) {
return this.http.get<University>(`${this.url}/${id}`);
}
update(u: University) {
return this.http.put(this.url, u);
}
delete(id: number) {
return this.http.delete(`${this.url}/${id}`);
}

}
Creaedita: TS

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

import {
FormGroup,
FormBuilder,
Validators,
AbstractControl,
FormControl,
} from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { University } from 'src/app/models/university';
import { UniversityService } from 'src/app/services/university.service';
import * as moment from 'moment';
@Component({
selector: 'app-creaedita-university',
templateUrl: './creaedita-university.component.html',
styleUrls: ['./creaedita-university.component.css'],
})
export class CreaeditaUniversityComponent implements OnInit {
form: FormGroup = new FormGroup({});
universidad: University = new University();
mensaje: string = '';
maxFecha: Date = moment().add(-1, 'days').toDate();
id: number = 0;
edicion: boolean = false;
tipos: { value: string; viewValue: string }[] = [
{ value: 'Pública', viewValue: 'Pública' },
{ value: 'Privada', viewValue: 'Privada' },
];

constructor(
private uS: UniversityService,
private router: Router,
private formBuilder: FormBuilder,
private route: ActivatedRoute
) {}

ngOnInit(): void {
this.route.params.subscribe((data: Params) => {
this.id = data['id'];
this.edicion = data['id'] != null;
this.init();
});
this.form = this.formBuilder.group({
idUniversity: [''],
nameUniversity: ['', Validators.required],
 adressUniversity: ['', Validators.required],
creationDateUniversity: ['', [Validators.required]],
typeUniversity: ['', Validators.required],
});
}
aceptar(): void {
if (this.form.valid) {
this.universidad.idUniversity = this.form.value.idUniversity;
this.universidad.nameUniversity = this.form.value.nameUniversity;
this.universidad.typeUniversity = this.form.value.typeUniversity;
this.universidad.creationDateUniversity =
this.form.value.creationDateUniversity;
this.universidad.adressUniversity = this.form.value.adressUniversity;
if (this.edicion) {
this.uS.update(this.universidad).subscribe(() => {
this.uS.list().subscribe((data) => {
this.uS.setList(data);
});
});
} else {
this.uS.insert(this.universidad).subscribe((data) => {
this.uS.list().subscribe((data) => {
this.uS.setList(data);
});
});
}
this.router.navigate(['universidades']);
} else {
this.mensaje = 'Por favor complete todos los campos obligatorios.';
}
}

obtenerControlCampo(nombreCampo: string): AbstractControl {

const control = this.form.get(nombreCampo);
if (!control) {
throw new Error(`Control no encontrado para el campo ${nombreCampo}`);
}
return control;
}
init() {
if (this.edicion) {
this.uS.listId(this.id).subscribe((data) => {
this.form = new FormGroup({
idUniversity: new FormControl(data.idUniversity),
nameUniversity: new FormControl(data.nameUniversity),
adressUniversity: new FormControl(data.adressUniversity),
typeUniversity:new FormControl(data.typeUniversity),
 creationDateUniversity: new FormControl(data.creationDateUniversity),
});
});
}
}
}
Creaedita: HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container" style="text-align: center">
<h2>Registro de universidades</h2>
<form [formGroup]="form" (submit)="aceptar()" class="example-form">
<mat-form-field class="example-full-width" *ngIf="edicion">
<mat-label>idUniversity</mat-label>
<input matInput placeholder="Id" formControlName="idUniversity" />
</mat-form-field>
<br />
<mat-form-field class="example-full-width">
<mat-label>Universidad</mat-label>
<input
matInput
placeholder="Postre"
formControlName="nameUniversity"
/>
<mat-error
*ngIf="obtenerControlCampo('nameUniversity')?.errors?.['required']"
>
El nombre es obligatorio.
</mat-error>
</mat-form-field>
<br />
<mat-form-field class="example-full-width">
<mat-label>Dirección</mat-label>
<input
matInput
placeholder="Dirección"
formControlName="adressUniversity"
/>
<mat-error
*ngIf="obtenerControlCampo('adressUniversity')?.errors?.['required']"
>
La direcciónes obligatoria .
</mat-error>
</mat-form-field>
<br />
<mat-form-field class="example-full-width">
 <mat-label>Tipo</mat-label>
<mat-select formControlName="typeUniversity">
<mat-option *ngFor="let p of tipos" [value]="p.value">
{{ p.viewValue }}
</mat-option>
</mat-select>
<mat-error
*ngIf="obtenerControlCampo('typeUniversity')?.errors?.['required']"
>
El tipo es obligatorio.
</mat-error>
</mat-form-field>
<br />
<mat-form-field appearance="fill" class="example-full-width">
<input
matInput
placeholder="Ingrese fecha"
[matDatepicker]="picker"
formControlName="creationDateUniversity"
[max]="maxFecha"
/>
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle
matIconSuffix
[for]="picker"
></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error
*ngIf="obtenerControlCampo('creationDateUniversity')?.errors?.['require
d']"
>
La fecha de creación es obligatoria.
</mat-error>
</mat-form-field>
<br />
<button mat-raised-button color="primary">Aceptar</button>
<button mat-raised-button color="warn" routerLink="/universidades">
Cancelar
</button>
<p>{{ mensaje }}</p>
</form>
</div>
</body>
</html>
LIistar: TS

import { Component, OnInit, ViewChild } from '@angular/core';

import { University } from 'src/app/models/university';
import { MatTableDataSource } from '@angular/material/table';
import { UniversityService } from 'src/app/services/university.service';
import { MatPaginator } from '@angular/material/paginator';
@Component({
selector: 'app-listar-university',
templateUrl: './listar-university.component.html',
styleUrls: ['./listar-university.component.css'],
})
export class ListarUniversityComponent implements OnInit {
dataSource: MatTableDataSource<University> = new MatTableDataSource();
@ViewChild(MatPaginator) paginator!: MatPaginator;
displayedColumns: string[] = [
'codigo',
'universidad',
'fecha',
'direccion',
'tipo',
'accion01',
'accion02',
];

constructor(private uS: UniversityService) {}

ngOnInit(): void {
this.uS.list().subscribe((data) => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
});
this.uS.getList().subscribe((data) => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
});
}
eliminar(id: number) {
this.uS.delete(id).subscribe((data) => {
this.uS.list().subscribe((data) => {
this.uS.setList(data);
});
});
}
filter(en: any) {
this.dataSource.filter = en.target.value.trim();
}
}
Listar: HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<br />
<h2 style="text-align: center">Lista de Universidades</h2>
<div style="text-align: right">
<button
mat-raised-button
color="primary"
routerLink="/universidades/nuevo"
>
Nuevo
</button>
</div>
<mat-form-field>
<input matInput (keyup)="filter($event)" placeholder="buscar" />
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row
definition" -->

<!-- Position Column -->

<ng-container matColumnDef="codigo">
<th mat-header-cell *matHeaderCellDef>Código</th>
<td mat-cell *matCellDef="let element">{{ element.idUniversity }}</td>
</ng-container>

<!-- Name Column -->

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

<!-- Weight Column -->

<ng-container matColumnDef="fecha">
 <th mat-header-cell *matHeaderCellDef>Fecha de creación</th>
<td mat-cell *matCellDef="let element">
{{ element.creationDateUniversity }}
</td>
</ng-container>

<!-- Symbol Column -->

<ng-container matColumnDef="direccion">
<th mat-header-cell *matHeaderCellDef>Dirección</th>
<td mat-cell *matCellDef="let element">
{{ element.adressUniversity }}
</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="tipo">
<th mat-header-cell *matHeaderCellDef>Tipo de universidad</th>
<td mat-cell *matCellDef="let element">
{{ element.typeUniversity }}
</td>
</ng-container>
<ng-container matColumnDef="accion01">
<th mat-header-cell *matHeaderCellDef>Acciones</th>
<td mat-cell *matCellDef="let element">
<button
mat-raised-button
color="warn"
[routerLink]="['ediciones', element.idUniversity]"
>
Actualizar
</button>
</td></ng-container
>
<ng-container matColumnDef="accion02">
<th mat-header-cell *matHeaderCellDef>Acciones</th>
<td mat-cell *matCellDef="let element">
<button
mat-raised-button
color="accent"
(click)="eliminar(element.idUniversity)"
>
Eliminar
</button>
</td></ng-container
>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
 <mat-paginator
[pageSizeOptions]="[5, 10, 25, 100]"
showFirstLastButtons
></mat-paginator>
</div>
</body>
</html>

App-routing.module

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

import { RouterModule, Routes } from '@angular/router';
import { UniversityComponent } from './components/university/university.component';
import { CreaeditaUniversityComponent } from './components/university/creaedita-
university/creaedita-university.component';

const routes: Routes = [

{
path: 'universidades',
component: UniversityComponent,
children: [
{ path: 'nuevo', component: CreaeditaUniversityComponent },
{ path: 'ediciones/:id', component: CreaeditaUniversityComponent },
],
},
];

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

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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { UniversityComponent } from './components/university/university.component';
import { ListarUniversityComponent } from './components/university/listar-
university/listar-university.component';
import { CreaeditaUniversityComponent } from './components/university/creaedita-
university/creaedita-university.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
declarations: [
AppComponent,
UniversityComponent,
ListarUniversityComponent,
CreaeditaUniversityComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatTableModule,
MatButtonModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
MatPaginatorModule,
MatIconModule,
MatToolbarModule,
MatMenuModule,
 FormsModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}