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/counter/counter.component.html

    rd2e69be ref1219a  
     1
    12<app-nav-menu></app-nav-menu>
    23
    3 <div class="wrapper">
    4     <div>
     4<mat-tab-group mat-stretch-tabs>
     5  <mat-tab class="tab" label="Здравствени установи">
     6  <div class="wrapper">
     7    <div class="header">
    58    <h2>Здравствени установи</h2>
    6     <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
    7     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="facilities">
    8         <thead>
    9             <tr>
    10             <th>Име</th>
    11             <th>Општина</th>
    12             <th>Адреса</th>
    13             <th>Тип на установа</th>
    14             <th>Е-пошта</th>
    15             <th>Телефон</th>
    16             </tr>
    17         </thead>
    18         <tbody>
    19           <tr *ngFor="let facility of facilities">
    20             <td>{{ facility.Name }}</td>
    21             <!--
    22   <td>{{ facility.Municipality }}</td>
    23   <td>{{ facility.Address }}</td>
    24   <td>{{ facility.Type }}</td>
    25   <td>{{ facility.Email }}</td>
    26   <td>{{ facility.Phone }}</td>-->
    27             <td>facility.Municipality</td>
    28             <td></td>
    29             <td></td>
    30             <td></td>
    31             <td>
    32              
    33             </td>
     9  <mat-form-field>
     10    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди установа">
     11  </mat-form-field>
     12    </div>
     13    <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     14      <ng-container matColumnDef="Име">
     15        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     16        <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     17      </ng-container>
     18 
     19      <ng-container matColumnDef="Општина">
     20        <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     21        <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     22      </ng-container>
     23   
     24      <ng-container matColumnDef="Адреса">
     25        <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     26        <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     27      </ng-container>
     28     
     29      <ng-container matColumnDef="Тип">
     30        <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     31        <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     32      </ng-container>
     33 
     34      <ng-container matColumnDef="Е-пошта">
     35        <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     36        <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     37      </ng-container>
     38   
     39      <ng-container matColumnDef="Телефон">
     40        <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     41        <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     42      </ng-container>
    3443
    35           </tr>
    36         </tbody>
     44        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     45        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    3746    </table>
    38     <nav aria-label="Page navigation example">
    39         <ul class="pagination">
    40           <li class="page-item">
    41             <a class="page-link" href="#" aria-label="Previous">
    42               <span aria-hidden="true">&laquo;</span>
    43               <span class="sr-only">Previous</span>
    44             </a>
    45           </li>
    46           <li class="page-item"><a class="page-link" href="#">1</a></li>
    47           <li class="page-item"><a class="page-link" href="#">2</a></li>
    48           <li class="page-item"><a class="page-link" href="#">3</a></li>
    49           <li class="page-item">
    50             <a class="page-link" href="#" aria-label="Next">
    51               <span aria-hidden="true">&raquo;</span>
    52               <span class="sr-only">Next</span>
    53             </a>
    54           </li>
    55         </ul>
    56       </nav>
     47    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     48  </div>
     49  </mat-tab>
     50  <mat-tab class="tab" label="Здравствени работници">
     51  <div class="wrapper">
     52    <div class="header">
     53    <h2>Здравствени работници</h2>
     54    <mat-form-field>
     55      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди работник">
     56    </mat-form-field>
    5757    </div>
    58     <div>
    59     <h2>Здравствени работници</h2>
    60     <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
    61     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    62         <thead>
    63         <tr>
    64             <th>Placeholder1</th>
    65             <th>Placeholder2</th>
    66             <th>Placeholder3</th>
    67             <th>Placeholder4</th>
    68         </tr>
    69         </thead>
    70         <tbody>
    71         <tr *ngFor="">
    72             <td>data1</td>
    73             <td>data2</td>
    74             <td>data3</td>
    75             <td>data4</td>
    76         </tr>
    77         </tbody>
    78     </table>
    79     <nav aria-label="Page navigation example">
    80         <ul class="pagination">
    81           <li class="page-item">
    82             <a class="page-link" href="#" aria-label="Previous">
    83               <span aria-hidden="true">&laquo;</span>
    84               <span class="sr-only">Previous</span>
    85             </a>
    86           </li>
    87           <li class="page-item"><a class="page-link" href="#">1</a></li>
    88           <li class="page-item"><a class="page-link" href="#">2</a></li>
    89           <li class="page-item"><a class="page-link" href="#">3</a></li>
    90           <li class="page-item">
    91             <a class="page-link" href="#" aria-label="Next">
    92               <span aria-hidden="true">&raquo;</span>
    93               <span class="sr-only">Next</span>
    94             </a>
    95           </li>
    96         </ul>
    97       </nav>
     58      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     59        <ng-container matColumnDef="Име">
     60          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     61          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     62        </ng-container>
     63   
     64        <ng-container matColumnDef="Општина">
     65          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     66          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     67        </ng-container>
     68     
     69        <ng-container matColumnDef="Адреса">
     70          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     71          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     72        </ng-container>
     73       
     74        <ng-container matColumnDef="Тип">
     75          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     76          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     77        </ng-container>
     78   
     79        <ng-container matColumnDef="Е-пошта">
     80          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     81          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     82        </ng-container>
     83     
     84        <ng-container matColumnDef="Телефон">
     85          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     86          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     87        </ng-container>
     88 
     89          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     90          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     91      </table>
     92      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
    9893    </div>
    99 </div>
     94    </mat-tab>
     95  </mat-tab-group>
Note: See TracChangeset for help on using the changeset viewer.