Ignore:
Timestamp:
07/29/20 19:46:21 (4 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
4e72684
Parents:
e42f61a
Message:

Prepared and improved components for data flows

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

Legend:

Unmodified
Added
Removed

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

    re42f61a rde18858  
    1313      <ng-container matColumnDef="Име">
    1414        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    15         <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     15        <td mat-cell *matCellDef="let medicines"> {{medicines.name}} </td>
    1616      </ng-container>
    1717 
    18       <ng-container matColumnDef="Општина">
    19         <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
    20         <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     18      <ng-container matColumnDef="Јачина">
     19        <th mat-header-cell *matHeaderCellDef mat-sort-header> Јачина </th>
     20        <td mat-cell *matCellDef="let medicines"> {{medicines.strength}} </td>
    2121      </ng-container>
    2222   
    23       <ng-container matColumnDef="Адреса">
    24         <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    25         <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     23      <ng-container matColumnDef="Форма">
     24        <th mat-header-cell *matHeaderCellDef mat-sort-header> Форма </th>
     25        <td mat-cell *matCellDef="let medicines"> {{medicines.form}} </td>
    2626      </ng-container>
    2727     
    28       <ng-container matColumnDef="Тип">
    29         <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
    30         <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     28      <ng-container matColumnDef="Начин на издавање">
     29        <th mat-header-cell *matHeaderCellDef mat-sort-header> Начин на издавање </th>
     30        <td mat-cell *matCellDef="let medicines"> {{medicines.wayOfIssuing}} </td>
    3131      </ng-container>
    3232 
    33       <ng-container matColumnDef="Е-пошта">
    34         <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
    35         <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     33      <ng-container matColumnDef="Производител">
     34        <th mat-header-cell *matHeaderCellDef mat-sort-header> Производител </th>
     35        <td mat-cell *matCellDef="let medicines"> {{medicines.manufacturer}} </td>
    3636      </ng-container>
    3737   
    38       <ng-container matColumnDef="Телефон">
    39         <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
    40         <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     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>
    4146      </ng-container>
    4247
    … …  
    5257    <h2>Аптеки</h2>
    5358    <mat-form-field>
    54       <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
     59      <input matInput (keyup)="applyFilterPharmacies($event.target.value)" placeholder="Пронајди аптека">
    5560    </mat-form-field>
    5661    </div>
    5762      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    58         <ng-container matColumnDef="Име">
     63        <ng-container matColumnDef="Име">a
    5964          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    60           <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     65          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.name}} </td>
    6166        </ng-container>
    6267   
    63         <ng-container matColumnDef="Општина">
    64           <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
    65           <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     68        <ng-container matColumnDef="Локација">
     69          <th mat-header-cell *matHeaderCellDef mat-sort-header> Локација </th>
     70          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.location}} </td>
    6671        </ng-container>
    6772     
    6873        <ng-container matColumnDef="Адреса">
    6974          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    70           <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     75          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.address}} </td>
    7176        </ng-container>
    7277       
    73         <ng-container matColumnDef="Тип">
    74           <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
    75           <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
    76         </ng-container>
    77    
    78         <ng-container matColumnDef="Е-пошта">
    79           <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
    80           <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
    81         </ng-container>
    82      
    83         <ng-container matColumnDef="Телефон">
    84           <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
    85           <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     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>
    8681        </ng-container>
    8782 
    88           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    89           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     83          <tr mat-header-row *matHeaderRowDef="displayedColumnsPharmacies"></tr>
     84          <tr mat-row *matRowDef="let row; columns: displayedColumnsPharmacies;"></tr>
    9085      </table>
    9186      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>

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

    re42f61a rde18858  
    11import { Component, OnInit, ViewChild, Inject } from '@angular/core';
    22import { HttpClient } from '@angular/common/http';
    3 import { HealthFacilities } from '../models/HealthFacilities';
     3import { Medicine } from '../models/Medicine';
     4import { Pharmacy } from '../models/Pharmacy';
    45import { MatTableDataSource } from '@angular/material/table';
    56import { MatPaginator } from '@angular/material/paginator';
    67import { MatSort } from '@angular/material/sort';
    7 
    88
    99@Component({
    … …  
    1313})
    1414export class HomeComponent implements OnInit {
    15   public facilities: HealthFacilities[];
    16   displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
    17   dataSource = new MatTableDataSource<HealthFacilities>();
     15  public medicines: Medicine[];
     16  public pharmacies: Pharmacy[];
     17  displayedColumns = ['Име','Јачина','Форма', 'Начин на издавање', 'Производител', 'Цена', 'Пакување'];
     18  displayedColumnsPharmacies = ['Име','Локација','Адреса', 'Работи 27/7?'];
     19  dataSource = new MatTableDataSource<Medicine>();
     20  dataSourcePharmacies = new MatTableDataSource<Pharmacy>();
    1821
    1922  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    … …  
    2124
    2225  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    23     http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
    24       this.facilities = result;
    25       console.log(this.facilities);
    26       this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     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);
    2735    }, error => console.error(error));
    2836  }
    … …  
    3341    this.dataSource.paginator = this.paginator;
    3442    this.dataSource.sort = this.sort;
     43    this.dataSourcePharmacies.paginator = this.paginator;
     44    this.dataSourcePharmacies.sort = this.sort;
    3545  }
    3646
    … …  
    4050    this.dataSource.filter = filterValue;
    4151  }
     52 
     53  applyFilterPharmacies(filterValue: string) {
     54    filterValue = filterValue.trim();
     55    filterValue = filterValue.toLowerCase();
     56    this.dataSourcePharmacies.filter = filterValue;
     57  }
    4258}
Note: See TracChangeset for help on using the changeset viewer.