Ignore:
Timestamp:
07/27/20 23:36:14 (4 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
e42f61a
Parents:
d2e69be
Message:

Handled REST API calls, searchbars and paginators implemented, overall frontend improvment

Location:
Farmatiko/ClientApp/src/app/dashboard
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    rd2e69be ref1219a  
    44.wrapper {
    55    display: flex;
    6     justify-content: space-around;
    7     padding-top: 50px;
     6    flex-direction: column;
     7    max-height: 500px;
     8    min-width: 300px;
    89}
    910 
    10 .wrapper nav {
    11     float: right;
     11.mat-table {
     12    overflow: auto;
     13    max-height: 500px;
    1214}
    1315 
     16.header {
     17    min-height: 64px;
     18    padding: 8px 24px 0;
     19}
     20 
     21.mat-form-field {
     22    font-size: 14px;
     23    width: 100%;
     24}
     25
    1426table {
    15     margin-top: 25px;
     27  width: 100%;
    1628}
     29
     30h2 {
     31    padding: 1em 0;
     32}

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

    rd2e69be ref1219a  
    22    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    33      <div class="container">
    4         <a class="navbar-brand" [routerLink]="['/']"><img src="../../assets/logo.png"></a>
     4        <a class="navbar-brand" [routerLink]="['/dashboard']"><img src="../../assets/logo.png"></a>
    55        <button class="navbar-toggler"
    66                type="button"
    … …  
    1515          </ul>
    1616        </div>
     17       
     18        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
     19        <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>
     22        </mat-menu>
    1723      </div>
    1824    </nav>
    1925</header>
    20 <main>
    21     <div class="wrapper">
    22     <div>
    23       <h2>Мои аптеки</h2>
    24       <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    25         <thead>
    26           <tr>
    27             <th>Placeholder1</th>
    28             <th>Placeholder2</th>
    29             <th>Placeholder3</th>
    30             <th>Placeholder4</th>
    31           </tr>
    32         </thead>
    33         <tbody>
    34           <tr *ngFor="">
    35             <td>data1</td>
    36             <td>data2</td>
    37             <td>data3</td>
    38             <td>data4</td>
    39           </tr>
    40         </tbody>
    41       </table>
    42       <nav aria-label="Page navigation example">
    43         <ul class="pagination">
    44           <li class="page-item">
    45             <a class="page-link" href="#" aria-label="Previous">
    46               <span aria-hidden="true">&laquo;</span>
    47               <span class="sr-only">Previous</span>
    48             </a>
    49           </li>
    50           <li class="page-item"><a class="page-link" href="#">1</a></li>
    51           <li class="page-item"><a class="page-link" href="#">2</a></li>
    52           <li class="page-item"><a class="page-link" href="#">3</a></li>
    53           <li class="page-item">
    54             <a class="page-link" href="#" aria-label="Next">
    55               <span aria-hidden="true">&raquo;</span>
    56               <span class="sr-only">Next</span>
    57             </a>
    58           </li>
    59         </ul>
    60       </nav>
     26
     27<mat-tab-group mat-stretch-tabs>
     28  <mat-tab class="tab" label="Мои аптеки">
     29  <div class="wrapper">
     30    <div class="header">
     31    <h2>Мои аптеки</h2>
    6132    </div>
    62     <div>
    63       <h2>Сите аптеки</h2>
    64       <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
    65       <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    66         <thead>
    67           <tr>
    68             <th>Placeholder1</th>
    69             <th>Placeholder2</th>
    70             <th>Placeholder3</th>
    71             <th>Placeholder4</th>
    72           </tr>
    73         </thead>
    74         <tbody>
    75           <tr *ngFor="">
    76             <td>data1</td>
    77             <td>data2</td>
    78             <td>data3</td>
    79             <td>data4</td>
    80           </tr>
    81         </tbody>
    82       </table>
    83       <nav aria-label="Page navigation example">
    84         <ul class="pagination">
    85           <li class="page-item">
    86             <a class="page-link" href="#" aria-label="Previous">
    87               <span aria-hidden="true">&laquo;</span>
    88               <span class="sr-only">Previous</span>
    89             </a>
    90           </li>
    91           <li class="page-item"><a class="page-link" href="#">1</a></li>
    92           <li class="page-item"><a class="page-link" href="#">2</a></li>
    93           <li class="page-item"><a class="page-link" href="#">3</a></li>
    94           <li class="page-item">
    95             <a class="page-link" href="#" aria-label="Next">
    96               <span aria-hidden="true">&raquo;</span>
    97               <span class="sr-only">Next</span>
    98             </a>
    99           </li>
    100         </ul>
    101       </nav>
    102     </div>
    103   </div>
    104 
    105   <div>
    106     <h2>Достапни лекови</h2>
    107     <input type="text" class="form-control" name="apteka" placeholder="Пронајди лек">
    10833    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    10934      <thead>
    … …  
    11641      </thead>
    11742      <tbody>
    118         <tr *ngFor="">
     43        <tr *ngFor="let facility of facilities">
    11944          <td>data1</td>
    12045          <td>data2</td>
    … …  
    12449      </tbody>
    12550    </table>
    126     <nav aria-label="Page navigation example">
    127       <ul class="pagination">
    128         <li class="page-item">
    129           <a class="page-link" href="#" aria-label="Previous">
    130             <span aria-hidden="true">&laquo;</span>
    131             <span class="sr-only">Previous</span>
    132           </a>
    133         </li>
    134         <li class="page-item"><a class="page-link" href="#">1</a></li>
    135         <li class="page-item"><a class="page-link" href="#">2</a></li>
    136         <li class="page-item"><a class="page-link" href="#">3</a></li>
    137         <li class="page-item">
    138           <a class="page-link" href="#" aria-label="Next">
    139             <span aria-hidden="true">&raquo;</span>
    140             <span class="sr-only">Next</span>
    141           </a>
    142         </li>
    143       </ul>
    144     </nav>
    14551  </div>
    146 </main>
     52  </mat-tab>
     53  <mat-tab class="tab" label="Сите аптеки">
     54  <div class="wrapper">
     55    <div class="header">
     56    <h2>Сите аптеки</h2>
     57    <mat-form-field>
     58      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
     59    </mat-form-field>
     60    </div>
     61      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     62        <ng-container matColumnDef="Име">
     63          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     64          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     65        </ng-container>
     66   
     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>
     71     
     72        <ng-container matColumnDef="Адреса">
     73          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     74          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     75        </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>
     90        </ng-container>
     91 
     92          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     93          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     94      </table>
     95      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     96    </div>
     97    </mat-tab>
     98  </mat-tab-group>
     99
     100<div class="wrapper">
     101    <div class="header">
     102    <h2>Достапни лекови</h2>
     103    <mat-form-field>
     104      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
     105    </mat-form-field>
     106    </div>
     107      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     108        <ng-container matColumnDef="Име">
     109          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     110          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </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 facilities"> {{facilities.municipality}} </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 facilities"> {{facilities.address}} </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 facilities"> {{facilities.type}} </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 facilities"> {{facilities.email}} </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 facilities"> {{facilities.phone}} </td>
     136        </ng-container>
     137 
     138          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     139          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     140      </table>
     141      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     142</div>

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

    rd2e69be ref1219a  
    1 import { Component, OnInit, Input, ViewChild } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject, Output, EventEmitter } from '@angular/core';
    22import { Pharmacy } from '../models/Pharmacy';
    33import { MatTableDataSource } from '@angular/material/table';
    44import { MatPaginator } from '@angular/material/paginator';
    55import { MatSort } from '@angular/material/sort';
     6import { HealthFacilities } from '../models/HealthFacilities';
     7import { HttpClient } from '@angular/common/http';;
     8import { MatDialog } from '@angular/material/dialog';
     9import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
     10import { Router, RouterModule } from '@angular/router';
     11import { HomeComponent } from '../home/home.component';
    612
    713@Component({
    … …  
    1117})
    1218export class DashboardComponent implements OnInit {
     19  public facilities: HealthFacilities[];
     20  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     21  dataSource = new MatTableDataSource<HealthFacilities>();
    1322
    14   constructor() { }
     23  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     24  @ViewChild(MatSort) sort: MatSort;
    1525
    16   ngOnInit(): void { }
     26  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);
     31    }, error => console.error(error));
     32  }
     33  ngOnInit(): void {
     34  }
     35
     36  ngAfterViewInit(): void {
     37    this.dataSource.paginator = this.paginator;
     38    this.dataSource.sort = this.sort;
     39  }
     40
     41  applyFilter(filterValue: string) {
     42    filterValue = filterValue.trim();
     43    filterValue = filterValue.toLowerCase();
     44    this.dataSource.filter = filterValue;
     45  }
     46  test(): void {
     47    console.log('Snackbar works!');
     48    this.openSnackBar("Are you sure?", "Yes").onAction().subscribe(() => {
     49      this.router.navigate(['/']);
     50    });
     51  }
     52
     53  openDialog():void {
     54    let dialogRef = this.dialog.open(HomeComponent, {
     55      width: '70%'
     56    });
     57    dialogRef.afterClosed().subscribe(result => {
     58      if(result) {
     59        this.openSnackBar("Success", "OK");
     60      }
     61    });
     62  }
     63
     64  openSnackBar(message: string, action: string) : MatSnackBarRef<SimpleSnackBar> {
     65    return this._snackBar.open(message, action, {
     66      duration: 10000,
     67    });
     68  }
    1769}
Note: See TracChangeset for help on using the changeset viewer.