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/dashboard
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    re42f61a rde18858  
    1212        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    1313          <ul class="navbar-nav flex-grow">
    14             <li>Logged as ...</li>
     14            <li>Logged as  <!--{{head.Name}}--> </li>
    1515          </ul>
    1616        </div>
    … …  
    1919        <mat-menu #menu="matMenu">
    2020          <button mat-menu-item (click)="openDialog()"><mat-icon>person_add</mat-icon>View homepage</button>
    21           <button mat-menu-item (click)="test()"><mat-icon> directions</mat-icon>Go to homepage</button>
     21          <button mat-menu-item (click)="test()"><mat-icon>directions</mat-icon>Go to homepage</button>
    2222        </mat-menu>
    2323      </div>
    … …  
    3030    <div class="header">
    3131    <h2>Мои аптеки</h2>
     32    <p *ngIf="!mypharmacies"><em>Loading...</em></p>
    3233    </div>
    3334    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    3435      <thead>
    3536        <tr>
    36           <th>Placeholder1</th>
    37           <th>Placeholder2</th>
    38           <th>Placeholder3</th>
    39           <th>Placeholder4</th>
     37          <th>Име</th>
     38          <th>Локација</th>
     39          <th>Адреса</th>
     40          <th>Работи 24/7</th>
     41          <th>Actions</th>
    4042        </tr>
    4143      </thead>
    4244      <tbody>
    43         <tr *ngFor="let facility of facilities">
    44           <td>data1</td>
    45           <td>data2</td>
    46           <td>data3</td>
    47           <td>data4</td>
     45        <tr *ngFor="let pharmacies of mypharmacies">
     46          <td>{{pharmacies.name}}</td>
     47          <td>{{pharmacies.location}}</td>
     48          <td>{{pharmacies.address}}</td>
     49          <td>{{pharmacies.workAllTime}}</td>
     50          <td><a (click)="works24hrs(pharmacies)">Работи 24/7</a> | <a (click)="doesntWork24hrs(pharmacies)">Не работи 24/7</a></td>
    4851        </tr>
    4952      </tbody>
    … …  
    5659    <h2>Сите аптеки</h2>
    5760    <mat-form-field>
    58       <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
     61      <input matInput (keyup)="applyFilterPharmacies($event.target.value)" placeholder="Пронајди аптека">
    5962    </mat-form-field>
    6063    </div>
    6164      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    62         <ng-container matColumnDef="Име">
     65        <ng-container matColumnDef="Име">a
    6366          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    64           <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     67          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.name}} </td>
    6568        </ng-container>
    6669   
    67         <ng-container matColumnDef="Општина">
    68           <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
    69           <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     70        <ng-container matColumnDef="Локација">
     71          <th mat-header-cell *matHeaderCellDef mat-sort-header> Локација </th>
     72          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.location}} </td>
    7073        </ng-container>
    7174     
    7275        <ng-container matColumnDef="Адреса">
    7376          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    74           <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     77          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.address}} </td>
    7578        </ng-container>
    76        
    77         <ng-container matColumnDef="Тип">
    78           <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
    79           <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
    80         </ng-container>
    81    
    82         <ng-container matColumnDef="Е-пошта">
    83           <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
    84           <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
    85         </ng-container>
    86      
    87         <ng-container matColumnDef="Телефон">
    88           <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
    89           <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     79
     80        <ng-container matColumnDef="Actions">
     81          <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
     82          <td mat-cell *matCellDef="let pharmacies"> <a (click)="claimPharmacy(pharmacies)">Claim Pharmacy</a> </td>
    9083        </ng-container>
    9184 
    92           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    93           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     85          <tr mat-header-row *matHeaderRowDef="displayedColumnsPharmacies"></tr>
     86          <tr mat-row *matRowDef="let row; columns: displayedColumnsPharmacies;"></tr>
    9487      </table>
    9588      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
    … …  
    9790    </mat-tab>
    9891  </mat-tab-group>
     92
     93  <div class="statusbar">{{status}}</div>
    9994
    10095<div class="wrapper">
    … …  
    10499      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
    105100    </mat-form-field>
    106     </div>
     101      </div>
    107102      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    108103        <ng-container matColumnDef="Име">
    109104          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    110           <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     105          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.name}} </td>
    111106        </ng-container>
    112107   
    113         <ng-container matColumnDef="Општина">
    114           <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
    115           <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     108        <ng-container matColumnDef="Јачина">
     109          <th mat-header-cell *matHeaderCellDef mat-sort-header> Јачина </th>
     110          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.strength}} </td>
    116111        </ng-container>
    117112     
    118         <ng-container matColumnDef="Адреса">
    119           <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    120           <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     113        <ng-container matColumnDef="Форма">
     114          <th mat-header-cell *matHeaderCellDef mat-sort-header> Форма </th>
     115          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.form}} </td>
    121116        </ng-container>
    122117       
    123         <ng-container matColumnDef="Тип">
    124           <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
    125           <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     118        <ng-container matColumnDef="Начин на издавање">
     119          <th mat-header-cell *matHeaderCellDef mat-sort-header> Начин на издавање </th>
     120          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.wayOfIssuing}} </td>
    126121        </ng-container>
    127122   
    128         <ng-container matColumnDef="Е-пошта">
    129           <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
    130           <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     123        <ng-container matColumnDef="Производител">
     124          <th mat-header-cell *matHeaderCellDef mat-sort-header> Производител </th>
     125          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.manufacturer}} </td>
    131126        </ng-container>
    132127     
    133         <ng-container matColumnDef="Телефон">
    134           <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
    135           <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     128        <ng-container matColumnDef="Цена">
     129          <th mat-header-cell *matHeaderCellDef mat-sort-header> Цена </th>
     130          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.price}} </td>
     131        </ng-container>
     132 
     133        <ng-container matColumnDef="Пакување">
     134          <th mat-header-cell *matHeaderCellDef mat-sort-header> Пакување </th>
     135          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.packaging}} </td>
     136        </ng-container>
     137 
     138        <ng-container matColumnDef="Actions">
     139          <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
     140          <td mat-cell *matCellDef="let mymedicines"> <a (click)="medicineExists(mymedicines)">Exists</a> | <a (click)="medicineDoesntSell(mymedicines)">Doesnt sell</a> </td>
    136141        </ng-container>
    137142 

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

    re42f61a rde18858  
    44import { MatPaginator } from '@angular/material/paginator';
    55import { MatSort } from '@angular/material/sort';
    6 import { HealthFacilities } from '../models/HealthFacilities';
    76import { HttpClient } from '@angular/common/http';
    87import { MatDialog } from '@angular/material/dialog';
    … …  
    109import { Router, RouterModule } from '@angular/router';
    1110import { HomeComponent } from '../home/home.component';
     11import { Medicine } from '../models/Medicine';
     12import { PharmacyHead } from '../models/PharmacyHead';
     13import { MedicineList } from '../models/MedicineList';
    1214
    1315@Component({
    … …  
    1719})
    1820export class DashboardComponent implements OnInit {
    19   public facilities: HealthFacilities[];
    20   displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
    21   dataSource = new MatTableDataSource<HealthFacilities>();
     21  public mymedicines: Medicine[];
     22  public hasmymedicines: boolean[];
     23  public pharmacies: Pharmacy[];
     24  public mypharmacies: Pharmacy[];
     25  public head: PharmacyHead;
     26  public status: string;
     27  displayedColumns = ['Име','Јачина','Форма', 'Начин на издавање', 'Производител', 'Цена', 'Пакување', 'Actions'];
     28  displayedColumnsPharmacies = ['Име','Локација','Адреса', 'Actions'];
     29  dataSource = new MatTableDataSource<Medicine>();
     30  dataSourcePharmacies = new MatTableDataSource<Pharmacy>();
    2231
    2332  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    … …  
    2534
    2635  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, private dialog: MatDialog, private _snackBar: MatSnackBar, private router: Router) {
    27     http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
    28       this.facilities = result;
    29       console.log(this.facilities);
    30       this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     36    http.get<PharmacyHead>(baseUrl + 'PharmacyHead/GetLoggedHead?').subscribe(result => {
     37      this.head = result;
     38      console.log(this.head);
     39      this.mymedicines = this.head.PharmacyMedicines.Medicines;
     40      console.log(this.mymedicines);
     41      this.mypharmacies = this.head.Pharmacy;
     42      console.log(this.mypharmacies);
     43      this.dataSource = new MatTableDataSource<Medicine>(this.mymedicines);
     44    }, error => console.error(error));
     45    http.get<Pharmacy[]>(baseUrl + 'Pharmacy/Get?').subscribe(result => {
     46      this.pharmacies = result;
     47      console.log(this.pharmacies);
     48      this.dataSourcePharmacies = new MatTableDataSource<Pharmacy>(this.pharmacies);
    3149    }, error => console.error(error));
    3250  }
     51
    3352  ngOnInit(): void {
    3453  }
    … …  
    3756    this.dataSource.paginator = this.paginator;
    3857    this.dataSource.sort = this.sort;
     58    this.dataSourcePharmacies.paginator = this.paginator;
     59    this.dataSourcePharmacies.sort = this.sort;
     60  }
     61
     62  works24hrs(pharmacy: Pharmacy) {
     63    console.log(pharmacy);
     64    // post request vo prodolzenie
     65
     66    this.status="Status bar works24hrs";
     67  }
     68
     69  doesntWork24hrs(pharmacy: Pharmacy) {
     70    console.log(pharmacy);
     71    // post request vo prodolzenie
     72
     73    this.status="Status bar doesntWork24hrs";
     74  }
     75
     76  claimPharmacy(pharmacy: Pharmacy) {
     77    console.log(pharmacy);
     78    // post request vo prodolzenie
     79
     80    this.status="Status bar claimPharmacy";
     81  }
     82
     83  medicineExists(mymedicine: Medicine) {
     84    console.log(mymedicine);
     85    // post request vo prodolzenie
     86
     87    this.status="Status bar medicineexists";
     88  }
     89
     90  medicineDoesntSell(mymedicine: Medicine) {
     91    console.log(mymedicine);
     92    // post request vo prodolzenie
     93
     94    this.status="Status bar medicineDoesntSell";
    3995  }
    4096
    … …  
    44100    this.dataSource.filter = filterValue;
    45101  }
     102 
     103  applyFilterPharmacies(filterValue: string) {
     104    filterValue = filterValue.trim();
     105    filterValue = filterValue.toLowerCase();
     106    this.dataSourcePharmacies.filter = filterValue;
     107  }
     108
    46109  test(): void {
    47110    console.log('Snackbar works!');
Note: See TracChangeset for help on using the changeset viewer.