Changeset ee137aa for Farmatiko/ClientApp/src/app/counter
- Timestamp:
- 08/07/20 10:59:56 (4 years ago)
- Branches:
- master
- Children:
- 63d885e
- Parents:
- c73269d
- Location:
- Farmatiko/ClientApp/src/app/counter
- Files:
-
- 2 edited
-
counter.component.html (modified) (2 diffs)
-
counter.component.ts (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
Farmatiko/ClientApp/src/app/counter/counter.component.html
rc73269d ree137aa 8 8 <h2>Здравствени установи</h2> 9 9 <mat-form-field> 10 <input matInput (keyup)="applyFilter ($event.target.value)" placeholder="Пронајди установа">10 <input matInput (keyup)="applyFilterFacilities($event.target.value)" placeholder="Пронајди установа"> 11 11 </mat-form-field> 12 12 </div> 13 <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8"> 14 <ng-container matColumnDef="id"> 15 <th mat-header-cell *matHeaderCellDef mat-sort-header> id </th> 16 <td mat-cell *matCellDef="let facilities"> {{facilities.id}} </td> 17 </ng-container> 18 19 <ng-container matColumnDef="createdOn"> 20 <th mat-header-cell *matHeaderCellDef mat-sort-header> createdOn </th> 21 <td mat-cell *matCellDef="let facilities"> {{facilities.createdOn}} </td> 22 </ng-container> 23 24 <ng-container matColumnDef="deletedOn"> 25 <th mat-header-cell *matHeaderCellDef mat-sort-header> deletedOn </th> 26 <td mat-cell *matCellDef="let facilities"> {{facilities.deletedOn}} </td> 27 </ng-container> 28 29 <ng-container matColumnDef="Име"> 30 <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th> 31 <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td> 32 </ng-container> 33 34 <ng-container matColumnDef="Општина"> 35 <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th> 36 <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td> 37 </ng-container> 38 39 <ng-container matColumnDef="Адреса"> 40 <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th> 41 <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td> 42 </ng-container> 43 44 <ng-container matColumnDef="Тип"> 45 <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th> 46 <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td> 47 </ng-container> 48 49 <ng-container matColumnDef="Е-пошта"> 50 <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th> 51 <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td> 52 </ng-container> 53 54 <ng-container matColumnDef="Телефон"> 55 <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th> 56 <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td> 57 </ng-container> 58 59 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 60 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> 61 </table> 62 <mat-paginator #paginator [pageSize]="100" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator> 13 <table class='table table-striped' aria-labelledby="tableLabel" *ngIf="true"> 14 <thead> 15 <tr> 16 <th>Име</th> 17 <th>Општина</th> 18 <th>Адреса</th> 19 <th>Тип</th> 20 <th>Е-пошта</th> 21 <th>Телефон</th> 22 </tr> 23 </thead> 24 <tbody> 25 <tr *ngFor="let facility of filteredFacilities"> 26 <td><a (click)="openFacilityDialog(facility)">{{ facility.name }}</a></td> 27 <td>{{ facility.municipality }}</td> 28 <td>{{ facility.address }}</td> 29 <td>{{ facility.type }}</td> 30 <td>{{ facility.email }}</td> 31 <td>{{ facility.phone }}</td> 32 </tr> 33 </tbody> 34 </table> 63 35 </div> 64 36 </mat-tab> … … 71 43 </mat-form-field> 72 44 </div> 73 <table [dataSource]="dataSourceWorkers" mat-table matSort class="mat-elevation-z8"> 74 <ng-container matColumnDef="Име"> 75 <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th> 76 <td mat-cell *matCellDef="let workers"> {{workers.name}} </td> 77 </ng-container> 78 79 <ng-container matColumnDef="Гранка"> 80 <th mat-header-cell *matHeaderCellDef mat-sort-header> Гранка </th> 81 <td mat-cell *matCellDef="let workers"> {{workers.branch}} </td> 82 </ng-container> 83 84 <ng-container matColumnDef="Установа"> 85 <th mat-header-cell *matHeaderCellDef mat-sort-header> Установа </th> 86 <td mat-cell *matCellDef="let workers"> {{workers.facility}} </td> 87 </ng-container> 88 89 <ng-container matColumnDef="Назив"> 90 <th mat-header-cell *matHeaderCellDef mat-sort-header> Назив </th> 91 <td mat-cell *matCellDef="let workers"> {{workers.title}} </td> 92 </ng-container> 93 94 <tr mat-header-row *matHeaderRowDef="displayedColumnsWorkers"></tr> 95 <tr mat-row *matRowDef="let row; columns: displayedColumnsWorkers;"></tr> 96 </table> 97 <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator> 45 <table class='table table-striped' aria-labelledby="tableLabel" *ngIf="true"> 46 <thead> 47 <tr> 48 <th>Име</th> 49 <th>Гранка</th> 50 <th>Установа</th> 51 <th>Назив</th> 52 </tr> 53 </thead> 54 <tbody> 55 <tr *ngFor="let worker of filteredWorkers"> 56 <td><a (click)="openWorkerDialog(worker)">{{ worker.name }}</a></td> 57 <td>{{ worker.branch }}</td> 58 <td>{{ worker.facility }}</td> 59 <td>{{ worker.title }}</td> 60 </tr> 61 </tbody> 62 </table> 98 63 </div> 99 64 </mat-tab> -
Farmatiko/ClientApp/src/app/counter/counter.component.ts
rc73269d ree137aa 1 import { Component, OnInit, ViewChild, Inject, Input } from '@angular/core'; 2 import { HttpClient } from '@angular/common/http'; 3 import { HealthFacilities } from '../models/HealthFacilities'; 4 import { MatTableDataSource } from '@angular/material/table'; 5 import { MatPaginator } from '@angular/material/paginator'; 6 import { MatSort } from '@angular/material/sort'; 7 import { HealthcareWorkers } from '../models/HealthcareWorkers'; 1 import { Component, OnInit } from '@angular/core'; 2 import { IHealthFacilities, IHealthcareWorkers } from '../shared/interfaces'; 3 import { DataService } from '../shared/data.service'; 4 import { MatDialog } from '@angular/material/dialog'; 5 import { FacilityDialogComponent } from '../dialogs/facility-dialog/facility-dialog.component'; 6 import { WorkerDialogComponent } from '../dialogs/worker-dialog/worker-dialog.component'; 8 7 9 8 @Component({ … … 13 12 }) 14 13 export class CounterComponent implements OnInit { 15 @Input() facilities: HealthFacilities[]; 16 public workers: HealthcareWorkers[]; 17 displayedColumns = ['id','createdOn','deletedOn','Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон']; 18 displayedColumnsWorkers = ['Име','Гранка','Установа', 'Назив']; 19 dataSource = new MatTableDataSource<HealthFacilities>(); 20 dataSourceWorkers = new MatTableDataSource<HealthcareWorkers>(); 14 public facilities: IHealthFacilities[] = []; 15 public workers: IHealthcareWorkers[] = []; 16 public filteredFacilities: IHealthFacilities[] = []; 17 public filteredWorkers: IHealthcareWorkers[] = []; 21 18 22 @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; 23 @ViewChild(MatSort) sort: MatSort; 24 25 constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) { 26 http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => { 27 this.facilities = result; 28 console.log(this.facilities); 29 this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities); 30 }, error => console.error(error)); 31 http.get<HealthcareWorkers[]>(baseUrl + 'HealthcareWorker/Get?').subscribe(result => { 32 this.workers = result; 33 console.log(this.workers); 34 this.dataSourceWorkers = new MatTableDataSource<HealthcareWorkers>(this.workers); 35 }, error => console.error(error)); 36 } 37 ngOnInit(): void { 19 constructor(private dataService: DataService, private dialog: MatDialog) { 20 38 21 } 39 22 40 ngAfterViewInit(): void { 41 this.dataSource.paginator = this.paginator; 42 this.dataSource.sort = this.sort; 23 ngOnInit(): void { 24 this.dataService.getFacilities() 25 .subscribe((facility: IHealthFacilities[]) => { 26 this.facilities = this.filteredFacilities = facility; 27 }, 28 (err: any) => console.log(err), 29 () => console.log('Facility data retrieved!')); 30 31 this.dataService.getWorkers() 32 .subscribe((worker: IHealthcareWorkers[]) => { 33 this.workers = this.filteredWorkers = worker; 34 }, 35 (err: any) => console.log(err), 36 () => console.log('Facility data retrieved!')); 43 37 } 44 38 45 applyFilter(filterValue: string) { 46 filterValue = filterValue.trim(); 47 filterValue = filterValue.toLowerCase(); 48 this.dataSource.filter = filterValue; 39 applyFilterFacilities(filterValue: string) { 40 console.log("applyFilterFacilities works!") 41 if(filterValue) { 42 this.dataService.searchFacilities(filterValue) 43 .subscribe((facility: IHealthFacilities[]) => { 44 this.filteredFacilities = facility; 45 }, 46 (err: any) => console.log(err), 47 () => console.log('Facility data retrieved!')); 48 } 49 else { 50 this.filteredFacilities = this.facilities; 51 } 49 52 } 50 53 51 54 applyFilterWorkers(filterValue: string) { 52 filterValue = filterValue.trim(); 53 filterValue = filterValue.toLowerCase(); 54 this.dataSourceWorkers.filter = filterValue; 55 console.log("applyFilterWorkers works!") 56 if(filterValue) { 57 this.dataService.searchWorkers(filterValue) 58 .subscribe((worker: IHealthcareWorkers[]) => { 59 this.filteredWorkers = worker; 60 }, 61 (err: any) => console.log(err), 62 () => console.log('Worker data retrieved!')); 63 } 64 else { 65 this.filteredWorkers = this.workers; 66 } 67 } 68 69 openFacilityDialog(facility: IHealthFacilities): void { 70 this.dialog.open(FacilityDialogComponent, { 71 width: '450px', 72 data: facility 73 }); 74 } 75 76 openWorkerDialog(worker: IHealthcareWorkers): void { 77 this.dialog.open(WorkerDialogComponent, { 78 width: '450px', 79 data: worker 80 }); 55 81 } 56 82 }
Note:
See TracChangeset
for help on using the changeset viewer.
