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

Legend:

Unmodified
Added
Removed

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

    rd2e69be ref1219a  
    11.wrapper {
    22  display: flex;
    3   justify-content: space-around;
    4   padding-top: 50px;
     3  flex-direction: column;
     4  max-height: 500px;
     5  min-width: 300px;
    56}
    67
    7 nav {
    8   float: right;
     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;
     24width: 100%;
    1325}
     26
     27h2 {
     28  padding: 1em 0;
     29}

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

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

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

    rd2e69be ref1219a  
    1 import { Component, OnInit, Input, ViewChild } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject } from '@angular/core';
     2import { HttpClient } from '@angular/common/http';
     3import { HealthFacilities } from '../models/HealthFacilities';
     4import { MatTableDataSource } from '@angular/material/table';
     5import { MatPaginator } from '@angular/material/paginator';
     6import { MatSort } from '@angular/material/sort';
     7
    28
    39@Component({
    … …  
    612  styleUrls: ['./home.component.css']
    713})
    8 export class HomeComponent {
     14export class HomeComponent implements OnInit {
     15  public facilities: HealthFacilities[];
     16  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     17  dataSource = new MatTableDataSource<HealthFacilities>();
     18
     19  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     20  @ViewChild(MatSort) sort: MatSort;
     21
     22  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
     23    http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
     24      this.facilities = result;
     25      console.log(this.facilities);
     26      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     27    }, error => console.error(error));
     28  }
     29  ngOnInit(): void {
     30  }
     31
     32  ngAfterViewInit(): void {
     33    this.dataSource.paginator = this.paginator;
     34    this.dataSource.sort = this.sort;
     35  }
     36
     37  applyFilter(filterValue: string) {
     38    filterValue = filterValue.trim();
     39    filterValue = filterValue.toLowerCase();
     40    this.dataSource.filter = filterValue;
     41  }
    942}
Note: See TracChangeset for help on using the changeset viewer.