Commit bc04974b by DESKTOP-HF0LVOG\myhr

Update หัวตาราง

parent 0d804d73
...@@ -47,22 +47,70 @@ ...@@ -47,22 +47,70 @@
</div> </div>
</div> </div>
</div> </div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab" <li ngbNavItem>
aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a> <a ngbNavLink>การจอง</a>
</li> <ng-template ngbNavContent>
<li class="nav-item"> <div class="row">
<a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab" <div class="col-sm-12">
aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a> <div class="card">
</li> <div class="card-body">
<div class="col-sm-4"> <table class="table table-striped">
<form class="form-inline my-2 my-lg-0"> <thead>
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <tr>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <th scope="col">#</th>
</form> <th scope="col">Catagory</th>
<th scope="col">Type</th>
<th scope="col">Detail</th>
<th scope="col">Name</th>
<th scope="col">Start-Date</th>
<th scope="col">End-Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries">
<th scope="row">{{ country.id }}</th>
<td>{{ country.catagory }}</td>
<td>{{ country.type }}</td>
<td>{{ country.detail }}</td>
<td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.status }}</td>
<div class="d-grid gap-3 d-sm-flex justify-content-end">
<button class="btn btn-primary btn-sm align-end"
type="button">เพิ่ม</button>
<button class="btn btn-primary btn-sm " type="button">ลบ</button>
<button class="btn btn-primary btn-sm " type="button">แก้ไข</button>
</div> </div>
</ul> </tr>
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page"
[pageSize]="pageSize" (pageChange)="refreshCountries()">
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
(ngModelChange)="refreshCountries()">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
...@@ -91,7 +139,8 @@ ...@@ -91,7 +139,8 @@
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td> <td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.status }}</td> <td>{{ country.status }}</td>
<div class="d-grid gap-3 d-sm-flex justify-content-end"> <div class="d-grid gap-3 d-sm-flex justify-content-end">
<button class="btn btn-primary btn-sm align-end" type="button">เพิ่ม</button> <button class="btn btn-primary btn-sm align-end"
type="button">เพิ่ม</button>
<button class="btn btn-primary btn-sm " type="button">ลบ</button> <button class="btn btn-primary btn-sm " type="button">ลบ</button>
<button class="btn btn-primary btn-sm " type="button">แก้ไข</button> <button class="btn btn-primary btn-sm " type="button">แก้ไข</button>
</div> </div>
...@@ -100,8 +149,8 @@ ...@@ -100,8 +149,8 @@
</table> </table>
<div class="d-flex justify-content-between p-2"> <div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" <ngb-pagination [collectionSize]="collectionSize" [(page)]="page"
(pageChange)="refreshCountries()"> [pageSize]="pageSize" (pageChange)="refreshCountries()">
</ngb-pagination> </ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize" <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
...@@ -116,4 +165,11 @@ ...@@ -116,4 +165,11 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div> </div>
\ No newline at end of file
...@@ -47,22 +47,65 @@ ...@@ -47,22 +47,65 @@
</div> </div>
</div> </div>
</div> </div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab" <ul ngbNav #nav="ngbNav" class="nav-tabs">
aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a> <li ngbNavItem>
</li> <a ngbNavLink>การจอง</a>
<li class="nav-item"> <ng-template ngbNavContent>
<a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab" <div class="row">
aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a> <div class="col-sm-12">
</li> <div class="card">
<div class="col-sm-4"> <div class="card-body">
<form class="form-inline my-2 my-lg-0"> <table class="table table-striped">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <thead>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <tr>
</form> <th scope="col">#</th>
<th scope="col">Catagory</th>
<th scope="col">Type</th>
<th scope="col">Detail</th>
<th scope="col">Name</th>
<th scope="col">Start-Date</th>
<th scope="col">End-Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries">
<th scope="row">{{ country.id }}</th>
<td>{{ country.catagory }}</td>
<td>{{ country.type }}</td>
<td>{{ country.detail }}</td>
<td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.status }}</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page"
[pageSize]="pageSize" (pageChange)="refreshCountries()">
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
(ngModelChange)="refreshCountries()">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div> </div>
</ul> </div>
</div>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
...@@ -95,8 +138,8 @@ ...@@ -95,8 +138,8 @@
</table> </table>
<div class="d-flex justify-content-between p-2"> <div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" <ngb-pagination [collectionSize]="collectionSize" [(page)]="page"
(pageChange)="refreshCountries()"> [pageSize]="pageSize" (pageChange)="refreshCountries()">
</ngb-pagination> </ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize" <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
...@@ -110,5 +153,12 @@ ...@@ -110,5 +153,12 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment