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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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>
Note: See TracChangeset for help on using the changeset viewer.