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/counter
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    rd2e69be ref1219a  
    11.wrapper {
    2   display: flex;
    3   justify-content: space-around;
    4   padding-top: 50px;
     2    display: flex;
     3    flex-direction: column;
     4    max-height: 500px;
     5    min-width: 300px;
    56}
    6 
    7 nav {
    8   float: right;
     7 
     8.mat-table {
     9    overflow: auto;
     10    max-height: 500px;
     11}
     12 
     13.header {
     14    min-height: 64px;
     15    padding: 8px 24px 0;
     16}
     17 
     18.mat-form-field {
     19    font-size: 14px;
     20    width: 100%;
    921}
    1022
    1123table {
    12   margin-top: 25px;
     24  width: 100%;
    1325}
     26
     27h2 {
     28    padding: 1em 0;
     29}

  • 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>

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

    rd2e69be ref1219a  
    1 import { Component, Inject } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject } from '@angular/core';
    22import { HttpClient } from '@angular/common/http';
    33import { HealthFacilities } from '../models/HealthFacilities';
     4import { MatTableDataSource } from '@angular/material/table';
     5import { MatPaginator } from '@angular/material/paginator';
     6import { MatSort } from '@angular/material/sort';
     7
    48@Component({
    59  selector: 'app-counter-component',
    … …  
    711  styleUrls: ['./counter.component.css']
    812})
    9 export class CounterComponent {
     13export class CounterComponent implements OnInit {
    1014  public facilities: HealthFacilities[];
     15  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     16  dataSource = new MatTableDataSource<HealthFacilities>();
     17
     18  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     19  @ViewChild(MatSort) sort: MatSort;
    1120
    1221  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    … …  
    1423      this.facilities = result;
    1524      console.log(this.facilities);
     25      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
    1626    }, error => console.error(error));
    1727  }
     28  ngOnInit(): void {
     29  }
     30
     31  ngAfterViewInit(): void {
     32    this.dataSource.paginator = this.paginator;
     33    this.dataSource.sort = this.sort;
     34  }
     35
     36  applyFilter(filterValue: string) {
     37    filterValue = filterValue.trim();
     38    filterValue = filterValue.toLowerCase();
     39    this.dataSource.filter = filterValue;
     40  }
    1841}
    19 /*interface healthFacilities {
    20   Name: string;
    21   Municipality: string;
    22   Address: string;
    23   Type: string;
    24   Email: string;
    25   Phone: string;
    26 }*/
    27 
Note: See TracChangeset for help on using the changeset viewer.