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

Legend:

Unmodified
Added
Removed

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

    rc73269d ree137aa  
    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  <!--{{head.Name}}--> </li>
     14            <li>Logged as ...<p *ngIf="head">{{head.Name}}</p> </li>
    1515          </ul>
    1616        </div>
    … …  
    1818        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
    1919        <mat-menu #menu="matMenu">
    20           <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>
     20          <button mat-menu-item [routerLink]="['/']"><mat-icon>directions</mat-icon>Почетна</button>
    2221        </mat-menu>
    2322      </div>
    … …  
    3029    <div class="header">
    3130    <h2>Мои аптеки</h2>
    32     <p *ngIf="!mypharmacies"><em>Loading...</em></p>
     31    <p *ngIf="!head"><em>Loading...</em></p>
    3332    </div>
    34     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
     33    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="head">
    3534      <thead>
    3635        <tr>
    … …  
    4342      </thead>
    4443      <tbody>
    45         <tr *ngFor="let pharmacies of mypharmacies">
     44        <tr *ngFor="let pharmacies of head.Pharmacy">
    4645          <td>{{pharmacies.name}}</td>
    4746          <td>{{pharmacies.location}}</td>
    4847          <td>{{pharmacies.address}}</td>
    4948          <td>{{pharmacies.workAllTime}}</td>
    50           <td><a (click)="works24hrs(pharmacies)">Работи 24/7</a> | <a (click)="doesntWork24hrs(pharmacies)">Не работи 24/7</a></td>
     49          <td><a (click)="openEditPharmacyDialog(pharmacies)">Edit</a></td>
    5150        </tr>
    5251      </tbody>
    … …  
    6160      <input matInput (keyup)="applyFilterPharmacies($event.target.value)" placeholder="Пронајди аптека">
    6261    </mat-form-field>
    63     </div>
    64       <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    65         <ng-container matColumnDef="Име">a
    66           <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    67           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.name}} </td>
    68         </ng-container>
    69    
    70         <ng-container matColumnDef="Локација">
    71           <th mat-header-cell *matHeaderCellDef mat-sort-header> Локација </th>
    72           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.location}} </td>
    73         </ng-container>
    74      
    75         <ng-container matColumnDef="Адреса">
    76           <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
    77           <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.address}} </td>
    78         </ng-container>
    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>
    83         </ng-container>
    84  
    85           <tr mat-header-row *matHeaderRowDef="displayedColumnsPharmacies"></tr>
    86           <tr mat-row *matRowDef="let row; columns: displayedColumnsPharmacies;"></tr>
    87       </table>
    88       <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     62  </div>
     63    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="pharmacies">
     64      <thead>
     65        <tr>
     66          <th>Име</th>
     67          <th>Локација</th>
     68          <th>Адреса</th>
     69          <th>Работи 27/7?</th>
     70        </tr>
     71      </thead>
     72      <tbody>
     73        <tr *ngFor="let pharmacy of pharmacies">
     74          <td><a (click)="openPharmacyDialog(pharmacy)">{{ pharmacy.name }}</a></td>
     75          <td>{{ pharmacy.location }}</td>
     76          <td>{{ pharmacy.address }}</td>
     77          <td>{{ pharmacy.workAllTime }}</td>
     78          <td><a (click)="claimPharmacy(pharmacy)">Claim</a></td>
     79        </tr>
     80    </tbody>
     81  </table>
    8982    </div>
    9083    </mat-tab>
    9184  </mat-tab-group>
    92 
    93   <div class="statusbar">{{status}}</div>
    9485
    9586<div class="wrapper">
    … …  
    9788    <h2>Достапни лекови</h2>
    9889    <mat-form-field>
    99       <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
     90      <input matInput (keyup)="applyFilterMedicines($event.target.value)" placeholder="Пронајди лек">
    10091    </mat-form-field>
    10192      </div>
    102       <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
    103         <ng-container matColumnDef="Име">
    104           <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
    105           <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.name}} </td>
    106         </ng-container>
    107    
    108         <ng-container matColumnDef="Јачина">
    109           <th mat-header-cell *matHeaderCellDef mat-sort-header> Јачина </th>
    110           <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.strength}} </td>
    111         </ng-container>
    112      
    113         <ng-container matColumnDef="Форма">
    114           <th mat-header-cell *matHeaderCellDef mat-sort-header> Форма </th>
    115           <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.form}} </td>
    116         </ng-container>
    117        
    118         <ng-container matColumnDef="Начин на издавање">
    119           <th mat-header-cell *matHeaderCellDef mat-sort-header> Начин на издавање </th>
    120           <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.wayOfIssuing}} </td>
    121         </ng-container>
    122    
    123         <ng-container matColumnDef="Производител">
    124           <th mat-header-cell *matHeaderCellDef mat-sort-header> Производител </th>
    125           <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.manufacturer}} </td>
    126         </ng-container>
    127      
    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>
    141         </ng-container>
    142  
    143           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    144           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    145       </table>
    146       <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     93      <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="head">
     94        <thead>
     95          <tr>
     96            <th>Име</th>
     97            <th>Јачина</th>
     98            <th>Форма</th>
     99            <th>Начин на издавање</th>
     100            <th>Производител</th>
     101            <th>Цена</th>
     102            <th>Пакување</th>
     103          </tr>
     104        </thead>
     105        <tbody>
     106          <tr *ngFor="let medicine of head.PharmacyMedicines">
     107            <td><a (click)="openMedicineDialog(medicine)">{{ medicine.name }}</a></td>
     108            <td>{{ medicine.strength }}</td>
     109            <td>{{ medicine.form }}</td>
     110            <td>{{ medicine.wayOfIssuing }}</td>
     111            <td>{{ medicine.manufacturer }}</td>
     112            <td>{{ medicine.price }}</td>
     113            <td>{{ medicine.packaging }}</td>
     114            <td><a (click)="deleteMedicine(medicine)">Delete</a></td>
     115          </tr>
     116      </tbody>
     117    </table>
    147118</div>

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

    rc73269d ree137aa  
    1 import { Component, OnInit, ViewChild, Inject, Output, EventEmitter } from '@angular/core';
    2 import { Pharmacy } from '../models/Pharmacy';
    3 import { MatTableDataSource } from '@angular/material/table';
    4 import { MatPaginator } from '@angular/material/paginator';
    5 import { MatSort } from '@angular/material/sort';
    6 import { HttpClient } from '@angular/common/http';
     1import { Component, OnInit} from '@angular/core';
    72import { MatDialog } from '@angular/material/dialog';
    83import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
    9 import { Router, RouterModule } from '@angular/router';
    10 import { HomeComponent } from '../home/home.component';
    11 import { Medicine } from '../models/Medicine';
    12 import { PharmacyHead } from '../models/PharmacyHead';
    13 import { MedicineList } from '../models/MedicineList';
     4import { IPharmacy, IMedicine, IPharmacyHead, IPharmacyHeadRequest } from '../shared/interfaces';
     5import { DataService } from '../shared/data.service';
     6import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
     7import { EditPharmacyDialogComponent } from '../dialogs/edit-pharmacy-dialog/edit-pharmacy-dialog.component';
     8import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
     9import { ActivatedRoute, Router } from '@angular/router';
    1410
    1511@Component({
    … …  
    1915})
    2016export class DashboardComponent implements OnInit {
    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>();
     17  public pharmacies: IPharmacy[] = [];
     18  public head: IPharmacyHead;
     19  public filteredPharmacies: IPharmacy[] = [];
     20  public filteredMedicines: IMedicine[] = [];
     21  public request: IPharmacyHeadRequest;
     22  public token: string;
    3123
    32   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    33   @ViewChild(MatSort) sort: MatSort;
     24  constructor(private dataService: DataService, private dialog: MatDialog, private snackBar: MatSnackBar, private router: Router, private route: ActivatedRoute) {
    3425
    35   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, private dialog: MatDialog, private _snackBar: MatSnackBar, private router: Router) {
    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);
    49     }, error => console.error(error));
    5026  }
    5127
    5228  ngOnInit(): void {
     29    this.token = this.route.snapshot.params['token'];
     30    this.dataService.getPharmacyHead(this.token)
     31        .subscribe((hd: IPharmacyHead) => {
     32          this.head = hd;
     33        },
     34        (err: any) => console.log(err),
     35        () => console.log('Head data retrieved'));
     36
     37    this.dataService.getPharmacies()
     38        .subscribe((pharmacy: IPharmacy[]) => {
     39          this.pharmacies = pharmacy;
     40        },
     41        (err: any) => console.log(err),
     42        () => console.log('Pharmacy data retrieved'));
     43  }
     44 
     45  claimPharmacy(pharmacy: IPharmacy) {
     46    if(pharmacy && !this.head.Pharmacy.find(x => x === pharmacy)) {
     47      this.request = null;
     48      this.request.Pharmacy = pharmacy;
     49      this.request.PharmacyHead = this.head;
     50      this.dataService.claimPharmacy(this.request)
     51          .subscribe((req: IPharmacyHeadRequest) => {
     52            if(req) {
     53              this.openSnackBar("Claiming request sent!", "OK");
     54            }
     55            else {
     56              this.openSnackBar("Unable to send a request", "Try again");
     57            }
     58          },
     59          (err: any) => console.log(err),
     60          () => console.log('Claiming request sent!'));
     61    }
    5362  }
    5463
    55   ngAfterViewInit(): void {
    56     this.dataSource.paginator = this.paginator;
    57     this.dataSource.sort = this.sort;
    58     this.dataSourcePharmacies.paginator = this.paginator;
    59     this.dataSourcePharmacies.sort = this.sort;
     64  deleteMedicine(medicine: IMedicine){
     65    this.head.PharmacyMedicines = this.head.PharmacyMedicines.filter(x => x !== medicine);
     66    this.dataService.updatePharmacyHead(this.head)
     67        .subscribe((hd: IPharmacyHead) => {
     68          if(hd) {
     69            this.openSnackBar("Success! Medicine deleted", "OK");
     70          }
     71          else {
     72            this.openSnackBar("Unable to delete Medicine", "Try again");
     73          }
     74        },
     75        (err: any) => console.log(err),
     76        () => console.log('Update sent!'));
    6077  }
    6178
    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";
    95   }
    96 
    97   applyFilter(filterValue: string) {
    98     filterValue = filterValue.trim();
    99     filterValue = filterValue.toLowerCase();
    100     this.dataSource.filter = filterValue;
     79  applyFilterMedicines(filterValue: string) {
     80    console.log("applyFilterMedicines works!")
     81    if(filterValue) {
     82      this.dataService.searchMedicines(filterValue)
     83          .subscribe((medicine: IMedicine[]) => {
     84            this.filteredMedicines = medicine;
     85          },
     86          (err: any) => console.log(err),
     87          () => console.log('Medicine data retrieved'));
     88    }
     89    else {
     90      this.filteredMedicines = this.head.PharmacyMedicines;
     91    }
    10192  }
    10293 
    10394  applyFilterPharmacies(filterValue: string) {
    104     filterValue = filterValue.trim();
    105     filterValue = filterValue.toLowerCase();
    106     this.dataSourcePharmacies.filter = filterValue;
     95    console.log("applyFilterPharmacies works!")
     96    if(filterValue) {
     97      this.dataService.searchPharmacies(filterValue)
     98          .subscribe((pharmacy: IPharmacy[]) => {
     99            this.filteredPharmacies = pharmacy;
     100          },
     101          (err: any) => console.log(err),
     102          () => console.log('Pharmacy data retrieved'));
     103    }
     104    else {
     105      this.filteredPharmacies = this.pharmacies;
     106    }   
    107107  }
    108108
    109   test(): void {
    110     console.log('Snackbar works!');
    111     this.openSnackBar("Are you sure?", "Yes").onAction().subscribe(() => {
    112       this.router.navigate(['/']);
     109  openPharmacyDialog(pharmacy: IPharmacy): void {
     110    this.dialog.open(PharmacyDialogComponent, {
     111      width: '450px',
     112      data: pharmacy
    113113    });
    114114  }
    115115
    116   openDialog():void {
    117     let dialogRef = this.dialog.open(HomeComponent, {
    118       width: '70%'
     116  openEditPharmacyDialog(pharmacy: IPharmacy): void {
     117    let dialogRef = this.dialog.open(EditPharmacyDialogComponent, {
     118      width: '450px',
     119      data: pharmacy
    119120    });
    120     dialogRef.afterClosed().subscribe(result => {
    121       if(result) {
    122         this.openSnackBar("Success", "OK");
    123       }
     121    dialogRef.afterClosed().subscribe((editedPharmacy: IPharmacy) => {
     122      if(editedPharmacy) {
     123        this.head.Pharmacy = this.head.Pharmacy.filter(x => x !== pharmacy);
     124        this.head.Pharmacy.push(editedPharmacy);
     125        this.dataService.updatePharmacyHead(this.head)
     126            .subscribe((hd: IPharmacyHead) => {
     127              if(hd) {
     128                this.openSnackBar("Success! Pharmacy edited", "OK").onAction().subscribe(() => {
     129                  window.location.reload();
     130                });
     131              }
     132              else {
     133                this.openSnackBar("Pharmacy edit failed", "Try again");
     134              }
     135            },
     136            (err: any) => console.log(err),
     137            () => console.log('PharmacyHead data updated'));
     138      };
     139    });
     140  }
     141
     142  openMedicineDialog(medicine: IMedicine): void {
     143    this.dialog.open(MedicineDialogComponent, {
     144      width: '450px',
     145      data: medicine
    124146    });
    125147  }
    126148
    127149  openSnackBar(message: string, action: string) : MatSnackBarRef<SimpleSnackBar> {
    128     return this._snackBar.open(message, action, {
    129       duration: 10000,
     150    return this.snackBar.open(message, action, {
     151      duration: 5000,
    130152    });
    131153  }
Note: See TracChangeset for help on using the changeset viewer.