<div class=" content"> <div class="row"> <div class="col-sm-8"> <div class="card"> <div class="card-body"> <form class="form-inline"> <div class="form-group hidden"> <div class="input-group"> <input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker" [autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1"> <ng-template #t let-date let-focused="focused"> <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null"> {{ date.day }} </span> </ng-template> </div> </div> <div class="form-group"> <div class="input-group"> <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate" [value]="formatter.format(fromDate)" (input)="fromDate = validateInput(fromDate, dpFromDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> <div class="form-group ml-2"> <div class="input-group"> <input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate" [value]="formatter.format(toDate)" (input)="toDate = validateInput(toDate, dpToDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> </form> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body"> <div ngbDropdown class="d-inline-block"> <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>ประเภทการค้นหา</button> <div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <button ngbDropdownItem>รอดำเนินการ</button> <button ngbDropdownItem>อนุมัติ</button> <button ngbDropdownItem>ยกเลิก</button> <button ngbDropdownItem>สำเร็จแล้ว</button> </div> <button class="btn btn-sm btn-outline-success" type="submit">Search</button> </div> </div> </div> </div> </div> <ul ngbNav #nav="ngbNav" class="nav-tabs"> <li ngbNavItem> <a ngbNavLink>การจอง</a> <ng-template ngbNavContent> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <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> </div> </div> </div> </ng-template> </li> <li ngbNavItem> <a ngbNavLink>การเบิก</a> <ng-template ngbNavContent> <div class="row"> <div class="col-sm-12"> <div class="card"> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <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> </div> </div> </div> </ng-template> </li> </ul> <div [ngbNavOutlet]="nav"></div> </div>