Ignore:
Timestamp:
08/07/20 10:59:56 (4 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
63d885e
Parents:
c73269d
Message:

Added DataService and dialogs, all bindings needed implemented

Location:
Farmatiko/ClientApp/src/app/home
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • Farmatiko/ClientApp/src/app/home/home.component.html

    rc73269d ree137aa  
    77    <h2>Лекови</h2>
    88  <mat-form-field>
    9     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
     9    <input matInput (keyup)="applyFilterMedicines($event.target.value)" placeholder="Пронајди лек">
    1010  </mat-form-field>
    1111    </div>
    12     <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    13       <ng-container matColumnDef="Име">
    14         <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    15         <td mat-cell *matCellDef="let medicines"> {{medicines.name}} </td>
    16       </ng-container>
    17 
    18       <ng-container matColumnDef="Јачина">
    19         <th mat-header-cell *matHeaderCellDef mat-sort-header> Јачина </th>
    20         <td mat-cell *matCellDef="let medicines"> {{medicines.strength}} </td>
    21       </ng-container>
    22 
    23       <ng-container matColumnDef="Форма">
    24         <th mat-header-cell *matHeaderCellDef mat-sort-header> Форма </th>
    25         <td mat-cell *matCellDef="let medicines"> {{medicines.form}} </td>
    26       </ng-container>
    27 
    28       <ng-container matColumnDef="Начин на издавање">
    29         <th mat-header-cell *matHeaderCellDef mat-sort-header> Начин на издавање </th>
    30         <td mat-cell *matCellDef="let medicines"> {{medicines.wayOfIssuing}} </td>
    31       </ng-container>
    32 
    33       <ng-container matColumnDef="Производител">
    34         <th mat-header-cell *matHeaderCellDef mat-sort-header> Производител </th>
    35         <td mat-cell *matCellDef="let medicines"> {{medicines.manufacturer}} </td>
    36       </ng-container>
    37 
    38       <ng-container matColumnDef="Цена">
    39         <th mat-header-cell *matHeaderCellDef mat-sort-header> Цена </th>
    40         <td mat-cell *matCellDef="let medicines"> {{medicines.price}} </td>
    41       </ng-container>
    42 
    43       <ng-container matColumnDef="Пакување">
    44         <th mat-header-cell *matHeaderCellDef mat-sort-header> Пакување </th>
    45         <td mat-cell *matCellDef="let medicines"> {{medicines.packaging}} </td>
    46       </ng-container>
    47 
    48         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    49         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    50     </table>
    51     <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     12  <table class='table table-striped' aria-labelledby="tableLabel" *ngIf="true">
     13      <thead>
     14        <tr>
     15          <th>Име</th>
     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 medicine of filteredMedicines">
     26          <td><a (click)="openMedicineDialog(medicine)">{{ medicine.name }}</a></td>
     27          <td>{{ medicine.strength }}</td>
     28          <td>{{ medicine.form }}</td>
     29          <td>{{ medicine.wayOfIssuing }}</td>
     30          <td>{{ medicine.manufacturer }}</td>
     31          <td>{{ medicine.price }}</td>
     32          <td>{{ medicine.packaging }}</td>
     33        </tr>
     34    </tbody>
     35  </table>
    5236  </div>
    5337  </mat-tab>
    … …  
    6044    </mat-form-field>
    6145    </div>
    62       <table [dataSource]="dataSourcePharmacies" mat-table matSort class="mat-elevation-z8">
    63         <ng-container matColumnDef="Име">
    64           <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    65           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.name}} </td>
    66         </ng-container>
    67 
    68         <ng-container matColumnDef="Локација">
    69           <th mat-header-cell *matHeaderCellDef mat-sort-header> Локација </th>
    70           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.location}} </td>
    71         </ng-container>
    72 
    73         <ng-container matColumnDef="Адреса">
    74           <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    75           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.address}} </td>
    76         </ng-container>
    77 
    78         <ng-container matColumnDef="Работи 27/7?">
    79           <th mat-header-cell *matHeaderCellDef mat-sort-header> Работи 27/7? </th>
    80           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.workAllTime}} </td>
    81         </ng-container>
    82 
    83           <tr mat-header-row *matHeaderRowDef="displayedColumnsPharmacies"></tr>
    84           <tr mat-row *matRowDef="let row; columns: displayedColumnsPharmacies;"></tr>
    85       </table>
    86       <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     46    <table class='table table-striped' aria-labelledby="tableLabel" *ngIf="true">
     47      <thead>
     48        <tr>
     49          <th>Име</th>
     50          <th>Локација</th>
     51          <th>Адреса</th>
     52          <th>Работи 27/7?</th>
     53        </tr>
     54      </thead>
     55      <tbody>
     56        <tr *ngFor="let pharmacy of filteredPharmacies">
     57          <td><a (click)="openPharmacyDialog(pharmacy)">{{ pharmacy.name }}</a></td>
     58          <td>{{ pharmacy.location }}</td>
     59          <td>{{ pharmacy.address }}</td>
     60          <td>{{ pharmacy.workAllTime }}</td>
     61        </tr>
     62    </tbody>
     63  </table>
    8764    </div>
    8865    </mat-tab>

  • Farmatiko/ClientApp/src/app/home/home.component.ts

    rc73269d ree137aa  
    1 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
    2 import { HttpClient } from '@angular/common/http';
    3 import { Medicine } from '../models/Medicine';
    4 import { Pharmacy } from '../models/Pharmacy';
    5 import { MatTableDataSource } from '@angular/material/table';
    6 import { MatPaginator } from '@angular/material/paginator';
    7 import { MatSort } from '@angular/material/sort';
     1import { Component, OnInit } from '@angular/core';
     2import { IMedicine, IPharmacy } from '../shared/interfaces';
     3import { DataService } from '../shared/data.service';
     4import { MatDialog } from '@angular/material/dialog';
     5import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
     6import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
    87
    98@Component({
    … …  
    1312})
    1413export class HomeComponent implements OnInit {
    15   public medicines: Medicine[];
    16   public pharmacies: Pharmacy[];
    17   displayedColumns = ['Име','Јачина','Форма', 'Начин на издавање', 'Производител', 'Цена', 'Пакување'];
    18   displayedColumnsPharmacies = ['Име','Локација','Адреса', 'Работи 27/7?'];
    19   dataSource = new MatTableDataSource<Medicine>();
    20   dataSourcePharmacies = new MatTableDataSource<Pharmacy>();
     14  public medicines: IMedicine[] = [];
     15  public pharmacies: IPharmacy[] = [];
     16  public filteredMedicines: IMedicine[] = [];
     17  public filteredPharmacies: IPharmacy[] = [];
    2118
    22   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    23   @ViewChild(MatSort) sort: MatSort;
     19  constructor(private dataService: DataService, private dialog: MatDialog) {
    2420
    25   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    26     http.get<Medicine[]>(baseUrl + 'Medicine/Get?').subscribe(result => {
    27       this.medicines = result;
    28       console.log(this.medicines);
    29       this.dataSource = new MatTableDataSource<Medicine>(this.medicines);
    30     }, error => console.error(error));
    31     http.get<Pharmacy[]>(baseUrl + 'Pharmacy/Get?').subscribe(result => {
    32       this.pharmacies = result;
    33       console.log(this.pharmacies);
    34       this.dataSourcePharmacies = new MatTableDataSource<Pharmacy>(this.pharmacies);
    35     }, error => console.error(error));
    36   }
    37   ngOnInit(): void {
    3821  }
    3922
    40   ngAfterViewInit(): void {
    41     this.dataSource.paginator = this.paginator;
    42     this.dataSource.sort = this.sort;
    43     this.dataSourcePharmacies.paginator = this.paginator;
    44     this.dataSourcePharmacies.sort = this.sort;
     23  ngOnInit(): void {
     24    this.dataService.getMedicines()
     25        .subscribe((medicine: IMedicine[]) => {
     26          this.medicines = this.filteredMedicines = medicine;
     27        },
     28        (err: any) => console.log(err),
     29        () => console.log('Medicine data retrieved'));
     30
     31    this.dataService.getPharmacies()
     32        .subscribe((pharmacy: IPharmacy[]) => {
     33          this.pharmacies = this.filteredPharmacies = pharmacy;
     34        },
     35        (err: any) => console.log(err),
     36        () => console.log('Pharmacy data retrieved'));
    4537  }
    4638
    47   applyFilter(filterValue: string) {
    48     filterValue = filterValue.trim();
    49     filterValue = filterValue.toLowerCase();
    50     this.dataSource.filter = filterValue;
     39  applyFilterMedicines(filterValue: string) {
     40    console.log("applyFilterMedicines works!")
     41    if(filterValue) {
     42      this.dataService.searchMedicines(filterValue)
     43          .subscribe((medicine: IMedicine[]) => {
     44            this.filteredMedicines = medicine;
     45          },
     46          (err: any) => console.log(err),
     47          () => console.log('Medicine data retrieved'));
     48    }
     49    else {
     50      this.filteredMedicines = this.medicines;
     51    }
    5152  }
    5253 
    5354  applyFilterPharmacies(filterValue: string) {
    54     filterValue = filterValue.trim();
    55     filterValue = filterValue.toLowerCase();
    56     this.dataSourcePharmacies.filter = filterValue;
     55    console.log("applyFilterPharmacies works!")
     56    if(filterValue) {
     57      this.dataService.searchPharmacies(filterValue)
     58          .subscribe((pharmacy: IPharmacy[]) => {
     59            this.filteredPharmacies = pharmacy;
     60          },
     61          (err: any) => console.log(err),
     62          () => console.log('Pharmacy data retrieved'));
     63    }
     64    else {
     65      this.filteredPharmacies = this.pharmacies;
     66    }
     67  }
     68
     69  openMedicineDialog(medicine: IMedicine): void {
     70    this.dialog.open(MedicineDialogComponent, {
     71      width: '450px',
     72      data: medicine
     73    });
     74  }
     75
     76  openPharmacyDialog(pharmacy: IPharmacy): void {
     77    this.dialog.open(PharmacyDialogComponent, {
     78      width: '450px',
     79      data: pharmacy
     80    });
    5781  }
    5882}
Note: See TracChangeset for help on using the changeset viewer.