-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from UdL-EPS-SoftArch/shelter-page
Shelter page
- Loading branch information
Showing
13 changed files
with
479 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
src/app/shelter/shelter-create/shelter-create.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <form | ||
| id="shelter-form" | ||
| (ngSubmit)="onSubmit()" | ||
| #form="ngForm" | ||
| [formGroup]="shelterForm" | ||
| > | ||
| <fieldset> | ||
| <div class="form-group mb-3"> | ||
| <label class="control-label" for="name">Name*</label> | ||
| <input | ||
| id="name" | ||
| name="name" | ||
| formControlName="name" | ||
| type="text" | ||
| class="form-control" | ||
| [(ngModel)]="shelter.name" | ||
| /> | ||
| <div class="form-error" *ngIf="name.errors?.['required']"> | ||
| Name is required. | ||
| </div> | ||
| <div | ||
| class="form-error" | ||
| *ngIf="name.errors?.['invalidName'] && !name.errors?.['required']" | ||
| > | ||
| Invalid name. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group mb-3"> | ||
| <label class="control-label" for="email">Email</label> | ||
| <div class="email-input"> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| formControlName="email" | ||
| type="text" | ||
| class="form-control" | ||
| [(ngModel)]="shelter.email" | ||
| /> | ||
| </div> | ||
| <div class="form-error" *ngIf="email.errors?.['invalidName']"> | ||
| Invalid email. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group mb-3"> | ||
| <label class="control-label" for="mobile">Mobile</label> | ||
| <div class="mobile-input"> | ||
| <input | ||
| id="mobile" | ||
| name="mobile" | ||
| formControlName="mobile" | ||
| type="text" | ||
| class="form-control" | ||
| [(ngModel)]="shelter.mobile" | ||
| /> | ||
| </div> | ||
| <div class="form-error" *ngIf="mobile.errors?.['invalidName']"> | ||
| Invalid mobile. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- <!– Added common names section –>--> | ||
|
|
||
| <!-- <div *ngIf="commonNamesList.length > 0" class="added-cards-section mb-3">--> | ||
| <!-- <div--> | ||
| <!-- *ngFor="let commonName of commonNamesList; let i = index"--> | ||
| <!-- class="card"--> | ||
| <!-- >--> | ||
| <!-- <div class="card-wrapper">--> | ||
| <!-- <p>{{ commonName }}</p>--> | ||
| <!-- <div class="remove-card-btn" (click)="removeCommonName(i)">X</div>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
|
|
||
| <!-- Save and back buttons --> | ||
| <div class="form-group fa-pull-right mt-3"> | ||
| <button | ||
| id="listBtn" | ||
| type="button" | ||
| [routerLink]="['..']" | ||
| class="btn btn-outline-primary pull-right" | ||
| > | ||
| Back | ||
| </button> | ||
| <button | ||
| id="submit" | ||
| type="submit" | ||
| [disabled]="!form.form.valid" | ||
| class="btn btn-success ms-3" | ||
| > | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </fieldset> | ||
| </form> |
129 changes: 129 additions & 0 deletions
129
src/app/shelter/shelter-create/shelter-create.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import {Component, OnInit} from '@angular/core'; | ||
| import {Router} from "@angular/router"; | ||
| import {ShelterService} from "../shelter.service"; | ||
| import {Shelter} from "../shelter"; | ||
| import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms"; | ||
| import {ModalDismissReasons, NgbModal} from "@ng-bootstrap/ng-bootstrap"; | ||
| import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client"; | ||
| import {formatDate} from "@angular/common"; | ||
|
|
||
| @Component({ | ||
| selector: 'app-shelter-create', | ||
| templateUrl: './shelter-create.component.html', | ||
| }) | ||
| export class ShelterCreateComponent implements OnInit{ | ||
|
|
||
| closeResult = ''; | ||
| public isModalSaved: boolean = false; | ||
| public shelters: Shelter[] = []; | ||
| public shelter: Shelter; | ||
| public commonNameInput: string = ''; | ||
| public commonEmailsList: any = []; | ||
| public shelterForm: FormGroup; | ||
|
|
||
| constructor( | ||
| private router: Router, | ||
| private shelterService: ShelterService, | ||
| private modalService: NgbModal | ||
| ) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.shelter = new Shelter(); | ||
| this.shelterForm = new FormGroup({ | ||
| name: new FormControl(this.shelter.name, [ | ||
| Validators.required, | ||
| ]), | ||
| email: new FormControl(this.shelter.email, [ | ||
| Validators.required, | ||
| this.emailValidator(), | ||
| ]), | ||
| mobile: new FormControl(this.shelter.mobile, [ | ||
| Validators.required, | ||
| this.mobileValidator(), | ||
| ]), | ||
| }); | ||
| this.loadShelterList(); | ||
| } | ||
|
|
||
| loadShelterList() { | ||
| this.shelterService | ||
| .getPage({ | ||
| sort: { name: 'ASC' }, | ||
| }) | ||
| .subscribe((shelters: PagedResourceCollection<Shelter>) => { | ||
| this.shelters = shelters.resources.sort((a, b) => | ||
| a.name.localeCompare(b.name) | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| open(content) { | ||
| this.modalService | ||
| .open(content, { ariaLabelledBy: 'modal-basic-title' }) | ||
| .result.then( | ||
| (result) => { | ||
| this.closeResult = `Closed with: ${result}`; | ||
| }, | ||
| (reason) => { | ||
| this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| private getDismissReason(reason: any): string { | ||
| if (reason === ModalDismissReasons.ESC) { | ||
| return 'by pressing ESC'; | ||
| } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { | ||
| return 'by clicking on a backdrop'; | ||
| } else { | ||
| return `with: ${reason}`; | ||
| } | ||
| } | ||
|
|
||
| saveAndClose(modal: any) { | ||
| this.isModalSaved = true; | ||
| modal.close('Save click'); | ||
| } | ||
|
|
||
| emailValidator(): ValidatorFn { | ||
| const nameRe: RegExp = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/; | ||
| return (control: AbstractControl): ValidationErrors | null => { | ||
| const invalid = !nameRe.test(control.value); | ||
| return invalid ? { invalidName: { value: control.value } } : null; | ||
| }; | ||
| } | ||
|
|
||
| mobileValidator(): ValidatorFn { | ||
| const nameRe: RegExp = /^$|[0-9]{11}/; | ||
| return (control: AbstractControl): ValidationErrors | null => { | ||
| const invalid = !nameRe.test(control.value); | ||
| return invalid ? { invalidName: { value: control.value } } : null; | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| get name() { | ||
| return this.shelterForm.get('name'); | ||
| } | ||
|
|
||
| get email() { | ||
| return this.shelterForm.get('email'); | ||
| } | ||
|
|
||
| get mobile() { | ||
| return this.shelterForm.get('mobile'); | ||
| } | ||
|
|
||
| onSubmit(): void { | ||
| this.shelter.createdAt = new Date(); | ||
| this.shelter.updatedAt = new Date(); | ||
| this.shelterService | ||
| .createResource({ body: this.shelter }) | ||
| .subscribe((shelter: Shelter) => { | ||
| console.log(shelter); | ||
| const uri = (shelter as any).uri; | ||
| this.router.navigate([uri]).then(); | ||
| }); | ||
| } | ||
|
|
||
| } |
25 changes: 25 additions & 0 deletions
25
src/app/shelter/shelter-delete/shelter-delete.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <div class="panel panel-warning"> | ||
| <div class="panel-heading"> | ||
| <div class="panel-title">Please, confirm deletion:</div> | ||
| </div> | ||
| <div class="panel-body"> | ||
| <div class="text-center"> | ||
| <button | ||
| id="deleteBtn" | ||
| type="button" | ||
| (click)="delete()" | ||
| class="btn btn-outline-danger m-1" | ||
| > | ||
| Delete | ||
| </button> | ||
| <button | ||
| id="listBtn" | ||
| type="button" | ||
| [routerLink]="['..']" | ||
| class="btn btn-outline-primary m-1" | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> |
37 changes: 37 additions & 0 deletions
37
src/app/shelter/shelter-delete/shelter-delete.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import {Component, OnInit} from '@angular/core'; | ||
| import {ActivatedRoute, Router} from "@angular/router"; | ||
| import {Shelter} from "../shelter"; | ||
| import {ShelterService} from "../shelter.service"; | ||
|
|
||
| @Component({ | ||
| selector: 'app-shelter-delete', | ||
| templateUrl: './shelter-delete.component.html', | ||
| }) | ||
| export class ShelterDeleteComponent implements OnInit { | ||
| idShelter: string; | ||
| shelter: Shelter; | ||
| constructor( | ||
| private router: Router, | ||
| private shelterService: ShelterService, | ||
| private route: ActivatedRoute | ||
| ) {} | ||
| ngOnInit(): void { | ||
| this.idShelter = this.route.snapshot.paramMap.get('id'); | ||
| } | ||
| delete() { | ||
| this.shelterService.getResource(this.idShelter).subscribe((shelter: Shelter) => { | ||
| this.shelter = shelter; | ||
| this.shelterService | ||
| .patchResource(this.shelter) | ||
| .subscribe((patchedShelter: Shelter) => { | ||
| this.shelterService.deleteResourceById(patchedShelter.id).subscribe({ | ||
| next: (e) => { | ||
| this.router.navigateByUrl('/shelters'); | ||
| }, | ||
| error: (err) => { | ||
| }, | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.