Changeset 8e74e2f for Farmatiko/ClientApp/src/app/dashboard

Timestamp:

11/16/20 03:55:10 (3 years ago)

Author:

DimitarSlezenkovski <dslezenkovski@…>

Branches:

master

Children:

db484c9

Parents:

8b13eb2

Message:

Fix bugs, add some more.

Location:

Farmatiko/ClientApp/src/app/dashboard

Files:

• dashboard.component.css (modified) (2 diffs)
• dashboard.component.html (modified) (5 diffs)
• dashboard.component.ts (modified) (8 diffs)

Farmatiko/ClientApp/src/app/dashboard/dashboard.component.css

@@ -15 +15 @@
   
 .header {
-    min-height: 64px;
     padding: 8px 24px 0;
 }
@@ -31 +30 @@
     padding: 1em 0;
 }
+
+.btns {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.btns button {
+    margin: 0.5em 0.5em 0.5em 0;
+}

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

@@ -13 +13 @@
           <ul class="navbar-nav flex-grow">
             <li>Logged as <p *ngIf="head">{{head.Name}}</p> </li>
-            <li (click)="logout()" class="btn btn-link"><a>Logout</a></li>
           </ul>
         </div>
@@ -20 +19 @@
         <mat-menu #menu="matMenu">
           <button mat-menu-item [routerLink]="['/']"><mat-icon>directions</mat-icon>Почетна</button>
+          <button mat-menu-item (click)="logout()"><mat-icon>exit_to_app</mat-icon>Одјави се</button>
         </mat-menu>
       </div>
@@ -25 +25 @@
 </header>
 
-<mat-tab-group mat-stretch-tabs>
+<mat-tab-group dynamicHeight mat-stretch-tabs>
   <mat-tab class="tab" label="Мои аптеки"> 
   <div class="wrapper">
@@ -88 +88 @@
     <div class="header">
     <h2>Достапни лекови</h2>
-    <mat-form-field>
+    <div class="btns">
+      <button mat-raised-button color="primary" (click)="saveDeletedMedicines()" [disabled]="editedMedicine==false">Зачувај ги промените</button>
+      <button mat-raised-button color="accent" aria-label="Add medicine" (click)="addMedicine()">Додај нов лек</button>
+      <button mat-raised-button color="accent" aria-label="Add medicine" (click)="addMedicinesFromList()">Додај постоечки лекови</button>
+    </div><br/>
+    <mat-slide-toggle (click)="switchEditMedicineMode()">Edit mode</mat-slide-toggle>
+    
+    <mat-form-field *ngIf="!medicinesEditMode">
       <input matInput (keyup)="applyFilterMedicines($event.target.value)" placeholder="Пронајди лек">
     </mat-form-field>
-      </div>
+    </div>
       <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="head">
         <thead>
@@ -102 +109 @@
             <th>Цена</th>
             <th>Пакување</th>
+            <th>Контроли</th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let medicine of head.PharmacyMedicines">
-            <td><a (click)="openMedicineDialog(medicine)">{{ medicine.name }}</a></td>
-            <td>{{ medicine.strength }}</td>
-            <td>{{ medicine.form }}</td>
-            <td>{{ medicine.wayOfIssuing }}</td>
-            <td>{{ medicine.manufacturer }}</td>
-            <td>{{ medicine.price }}</td>
-            <td>{{ medicine.packaging }}</td>
-            <td><a (click)="deleteMedicine(medicine)">Delete</a></td>
+          <tr *ngFor="let medicine of filteredMedicines">
+            <td *ngIf="!medicinesEditMode"><a (click)="openMedicineDialog(medicine)">{{ medicine.name }}</a></td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.name" name="medname"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.strength }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.strength" name="medstr"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.form }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.form" name="medform"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.wayOfIssuing }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.wayOfIssuing" name="medwayOfIssuing"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.manufacturer }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.manufacturer" name="medmanufacturer"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.price }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.price" name="medprice"></mat-form-field></td>
+            <td *ngIf="!medicinesEditMode">{{ medicine.packaging }}</td>
+            <td *ngIf="medicinesEditMode"><mat-form-field appearance="fill"><input matInput [(ngModel)]="medicine.packaging" name="medpackaging"></mat-form-field></td>
+            <td>
+              <button mat-mini-fab color="warn" aria-label="Delete medicine" (click)="deleteMedicine(medicine)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </td>
           </tr>
       </tbody>

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

@@ -9 +9 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService } from '../shared/services/auth.service';
+import { AddMedicineDialogComponent } from '../dialogs/add-medicine-dialog/add-medicine-dialog.component';
+import { ListMedicinesDialogComponent } from '../dialogs/list-medicines-dialog/list-medicines-dialog.component';
 
 @Component({
@@ -21 +23 @@
   public filteredMedicines: IMedicine[] = [];
   public request: IPharmacyHeadRequest;
+  editedMedicine: boolean = false;
+  medicinesEditMode: boolean = false;
 
   constructor(private dataService: DataService, private authService: AuthService, private dialog: MatDialog, private snackBar: MatSnackBar, private router: Router, private route: ActivatedRoute) {
@@ -37 +41 @@
         .subscribe((pharmacy: IPharmacy[]) => {
           this.pharmacies = pharmacy;
+          this.head.Pharmacy.forEach((pharma) => {
+            this.filteredPharmacies = this.pharmacies = this.pharmacies.filter(x => x == pharma);
+          });
         },
         (err: any) => console.log(err),
         () => console.log('Pharmacy data retrieved'));
+    this.filteredMedicines = this.head.PharmacyMedicines;
   }
   
@@ -83 +91 @@
   deleteMedicine(medicine: IMedicine){
     this.head.PharmacyMedicines = this.head.PharmacyMedicines.filter(x => x !== medicine);
+    this.filteredMedicines = this.head.PharmacyMedicines;
+    this.editedMedicine = true;
+  }
+  
+  saveDeletedMedicines() {
     this.dataService.updatePharmacyHead(this.head)
-        .subscribe((hd: IPharmacyHead) => {
-          if(hd) {
-            this.openSnackBar("Success! Medicine deleted", "OK");
-          }
-          else {
-            this.openSnackBar("Unable to delete Medicine", "Try again");
-          }
-        },
-        (err: any) => console.log(err),
-        () => console.log('Update sent!'));
+      .subscribe((hd: IPharmacyHead) => {
+        if(hd) {
+          this.openSnackBar("Success! Medicine deleted", "OK");
+          this.editedMedicine = false;
+        }
+        else {
+          this.openSnackBar("Unable to delete Medicine", "Try again");
+        }
+      },
+      (err: any) => console.log(err),
+      () => console.log('Update sent!'));
   }
 
@@ -99 +113 @@
     console.log("applyFilterMedicines works!")
     if(filterValue) {
-      this.dataService.searchMedicines(filterValue)
-          .subscribe((medicine: IMedicine[]) => {
-            this.filteredMedicines = medicine;
-          },
-          (err: any) => console.log(err),
-          () => console.log('Medicine data retrieved')); 
+      this.filteredMedicines = this.filteredMedicines.filter(x => x.name.toLocaleLowerCase().includes(filterValue.toLocaleLowerCase()));
     }
     else {
       this.filteredMedicines = this.head.PharmacyMedicines;
+    }
+  }
+
+  addMedicine() {
+    let dialogRef = this.dialog.open(AddMedicineDialogComponent, {
+      width: 'auto'
+    });
+    dialogRef.afterClosed().subscribe((newMedicine: IMedicine) => {
+      if(newMedicine){
+        this.head.PharmacyMedicines.push(newMedicine);
+        this.filteredMedicines = this.head.PharmacyMedicines;
+        if(this.editedMedicine == false) {
+          this.editedMedicine = true;
+        }
+        this.openSnackBar("Success! Medicine added, please save changes now", "OK");
+      }
+      else {
+        this.openSnackBar("Failed! Please try again", "OK");
+      }
+    }, () => this.openSnackBar("Failed! Please try again", "OK"));
+  }
+
+  addMedicinesFromList() {
+    let dialogRef = this.dialog.open(ListMedicinesDialogComponent, {
+      width: 'auto',
+      height: 'auto'
+    });
+    dialogRef.afterClosed().subscribe((listMedicines: IMedicine[]) => {
+      if(listMedicines){
+        listMedicines.forEach((medicine) => {
+          this.head.PharmacyMedicines = this.head.PharmacyMedicines.filter(x => x != medicine);
+          this.head.PharmacyMedicines.push(medicine);
+          this.filteredMedicines = this.head.PharmacyMedicines;
+        });
+        if(this.editedMedicine == false) {
+          this.editedMedicine = true;
+        }
+        this.openSnackBar("Success! Medicines added, please save changes now", "OK");
+      }
+      else {
+        this.openSnackBar("Failed! Please try again", "OK");
+      }
+    }, () => this.openSnackBar("Failed! Please try again", "OK"));
+  }
+
+  switchEditMedicineMode() {
+    this.medicinesEditMode = !this.medicinesEditMode;
+    if(this.editedMedicine == false) {
+      this.editedMedicine = true;
     }
   }
@@ -117 +175 @@
           .subscribe((pharmacy: IPharmacy[]) => {
             this.filteredPharmacies = pharmacy;
+            this.head.Pharmacy.forEach((pharma) => {
+              this.filteredPharmacies = this.filteredPharmacies.filter(x => x == pharma);
+            });
           },
           (err: any) => console.log(err),
@@ -123 +184 @@
     else {
       this.filteredPharmacies = this.pharmacies;
-    }    
+    }
   }
 
@@ -138 +199 @@
 
   openEditPharmacyDialog(pharmacy: IPharmacy): void {
+    console.log(pharmacy);
     let dialogRef = this.dialog.open(EditPharmacyDialogComponent, {
       width: '450px',