admin-pending.component.html

<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 text-center">
                    <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">หมวดหมู่</th>
                                            <th scope="col">ชื่อการจอง</th>
                                            <th scope="col">รายละเอียด</th>
                                            <th scope="col">ชื่อผู้จอง</th>
                                            <th scope="col">วันที่เริ่มต้น</th>
                                            <th scope="col">วันที่สิ้นสุด</th>
                                            <th scope="col">สถานะ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let item of listRoomDetail">
                                            <th scope="row">{{ item.id }}</th>
                                            <td>{{ item.room.rType }}</td>
                                            <td>{{ item.room.rName }}</td>
                                            <td>{{ item.room.rDesc }}</td>
                                            <td>{{ item.userName }}</td>
                                            <td>{{ item.sDate | date : 'dd/MM/yyyy' }} {{ item.sTime }}</td>
                                            <td>{{ item.eDate | date : 'dd/MM/yyyy' }} {{ item.eTime }}</td>
                                            <td *ngIf="item.rStatus==0">จอง</td>
                                            <td *ngIf="item.rStatus==1">ไม่อนุมัติ</td>
                                            <td *ngIf="item.rStatus==2">ยกเลิก</td>
                                            <div class="col-auto align-self-sm-center">
                                                <button type="button" class="btn btn-info btn-sm btn-circle "
                                                    style="line-height: 0px" (click)="openRoomDetail(Room,item)"><i
                                                        class="fa fa-search"></i> </button>
                                            </div>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between p-2">
                                    <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                        [pageSize]="pageSizeListRoom">
                                        <ng-template ngbPaginationPrevious>Previous</ng-template>
                                        <ng-template ngbPaginationNext>Next</ng-template>
                                    </ngb-pagination>

                                    <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                        (ngModelChange)="pageListRoom=1">
                                        <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 text-center">
                    <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">หมวดหมู่</th>
                                            <th scope="col">ชื่ออุปกรณ์</th>
                                            <th scope="col">รายละเอียด</th>
                                            <th scope="col">ชื่อผู้เบิก</th>
                                            <th scope="col">วันที่เริ่มใช้</th>
                                            <th scope="col">วันที่สิ้นสุด</th>
                                            <th scope="col">จำนวน</th>
                                            <th scope="col">สถานะ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let item of listItemDetail">
                                            <th scope="row">{{ item.id }}</th>
                                            <td>{{ item.equirment.eqType }}</td>
                                            <td>{{ item.equirment.eqName }}</td>
                                            <td>{{ item.equirment.eqDesc }}</td>
                                            <td>{{ item.userName }}</td>
                                            <td>{{ item.sDate | date : 'dd/MM/yyyy' }} {{ item.sTime }}</td>
                                            <td>{{ item.eDate | date : 'dd/MM/yyyy' }} {{ item.eTime }}</td>
                                            <td>{{ item.Quantity }}</td>
                                            <td *ngIf="item.eStatus==0">รอดำเนินการ</td>
                                            <td *ngIf="item.eStatus==1">อนุมัติ</td>
                                            <td *ngIf="item.eStatus==2">ยกเลิก</td>
                                            <td *ngIf="item.eStatus==3">สำเร็จแล้ว</td>
                                            <div class="col-auto align-self-sm-center">
                                                <button type="button" class="btn btn-info btn-sm btn-circle "
                                                    style="line-height: 0px" (click)="openItemDetail(lend,item)"><i
                                                        class="fa fa-search"></i> </button>
                                            </div>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between p-2">
                                    <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                        [pageSize]="pageSizeListRoom">
                                        <ng-template ngbPaginationPrevious>Previous</ng-template>
                                        <ng-template ngbPaginationNext>Next</ng-template>
                                    </ngb-pagination>

                                    <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                        (ngModelChange)="pageListRoom=1">
                                        <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>

<ng-template #Room let-modal>
    <div class=" col-md-12" style="padding: 0;">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">การจอง</h5>
            </div>
            <div class=" card-body">
                <form [formGroup]="myFormRoom" class="needs-validation">
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อผู้จอง </label>
                                <input class=" form-control" placeholder="" type="text"
                                    formControlName="userNameForm" />
                                <div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">
                                    กรุณากรอกชื่อผู้จอง.</div>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-sm-12 mb-1">
                            <div class=" form-group">
                                <label> อีเมล </label>
                                <input class=" form-control" placeholder="" type="text" formControlName="email" />
                                <div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">
                                    กรุณากรอกอีเมล.</div>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> เบอร์โทร </label>
                                <input class=" form-control" placeholder="" type="text" formControlName="rTelephone" />
                                <div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">
                                    กรุณากรอกหมายเลขโทรศัพท์.</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 mb-1">
                            <label for="exampleFormControlSelect1">ชื่อห้อง</label>
                            <input readonly class="form-control" type="text" formControlName="rName" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
                                กรุณากรอกชื่อห้อง.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 mb-1">
                            <label for="exampleFormControlSelect1">รายละเอียด</label>
                            <input readonly class="form-control" type="text" formControlName="rDesc" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
                                กรุณากรอกรายละเอียดการจอง.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-1">
                            <div class=" form-check">
                                <label class=" form-check-label">
                                    <input class=" form-check" type="checkbox" [(ngModel)]="modelRoomDetail.allDay" formControlName="allDay"  />
                                    <span class=" form-check-sign">
                                        <span class="check">ทั้งวัน</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row" *ngIf="!modelRoomDetail.allDay">
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
                            <input type="date" class="form-control" [(ngModel)]="sDate"
                            formControlName="sDate" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.sDate.status=='INVALID'">
                                กรุณากรอกวันที่เริ่มต้นการจอง.</div>
                        </div>
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
                            <input type="date" class="form-control" [(ngModel)]="eDate"
                             formControlName="eDate" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'">
                                กรุณากรอกวันที่สิ้นสุดการจอง.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
                            <input class="form-control" type="time" 
                            formControlName="sTime" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.sTime.status=='INVALID'">
                                กรุณากรอกเวลาที่เริ่มต้นการจอง.</div>
                        </div>
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
                            <input class="form-control" type="time" 
                              formControlName="eTime" />
                            <div style="color: red;" *ngIf="myFormRoom.controls.eTime.status=='INVALID'">
                                กรุณากรอกเวลาที่สิ้นสุดการจอง</div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> หมายเหตุ </label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                    placeholder="......" formControlName="Remark"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <label> สถานะ </label>
                            <select class="custom-select form-control" aria-label="Default select example"
                            formControlName="rStatus">
                                <option value="0" selected style="color: black;">จอง</option>
                                <option value="1" style="color: black;">ไม่อนุมัติ</option>
                                <option value="2" style="color: black;">ยกเลิก</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div class=" card-footer">
                    <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusRoom()">บันทึก</button>
                    <button class=" btn btn-fill btn-danger" type="cancel"
                        (click)="modal.dismiss('Cross click')">ยกเลิก</button>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #lend let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">การเบิก</h5>
            </div>
            <div class=" card-body">
                <form [formGroup]="myFormEquir" class="needs-validation">
                    <div class=" row">
                        <div class=" col-sm-12 mb-1">
                            <div class=" form-group">
                                <label> ชื่อผู้จอง </label>
                                <input class=" form-control" placeholder="" type="text"
                                 formControlName="userNameForm" />
                                <div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'">
                                    กรุณากรอกชื่อผู้จอง.</div>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-sm-12 mb-1">
                            <div class=" form-group">
                                <label> อีเมล </label>
                                <input class=" form-control" placeholder="" type="text"
                                formControlName="email" />
                                <div style="color: red;" *ngIf="myFormEquir.controls.email.status=='INVALID'">
                                    กรุณากรอกอีเมล.</div>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> เบอร์โทร </label>
                                <input class=" form-control" placeholder="" type="text"
                                formControlName="eTelephone" />
                                <div style="color: red;" *ngIf="myFormEquir.controls.eTelephone.status=='INVALID'">
                                    กรุณากรอกหมายเลขโทรศัพท์</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 mb-1">
                            <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
                            <input readonly class="form-control" type="text"
                                formControlName="eqName" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
                                กรุณากรอกชื่ออุปกรณ์.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 mb-1">
                            <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
                            <input readonly class="form-control" type="text" 
                                formControlName="eqDesc" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
                                กรุณากรอกรายละเอียดการเบิก.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
                            <input type="date" class="form-control" [(ngModel)]="sDate"
                                (ngModelChange)="rDate(sDate,'sdate')" formControlName="sDate" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.sDate.status=='INVALID'">
                                กรุณากรอกวันที่เริ่มต้นการเบิก</div>
                        </div>
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
                            <input type="date" class="form-control" [(ngModel)]="eDate"
                                (ngModelChange)="rDate(eDate,'edate')" formControlName="eDate" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.eDate.status=='INVALID'">
                                กรุณากรอกวันที่สิ้นสุดการเบิก.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
                            <input class="form-control" type="time"
                             formControlName="sTime" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.sTime.status=='INVALID'">
                                กรุณากรอกเวลาที่เริ่มต้นการเบิก</div>
                        </div>
                        <div class="col-6 mb-1">
                            <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
                            <input class="form-control" type="time"
                             formControlName="eTime" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.eTime.status=='INVALID'">
                                กรุณากรอกเวลาที่สิ้นสุดการเบิก</div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-sm-6 mb-1">
                            <label for="changequantity">จำนวน</label>
                            <input id="changequantity" type="number" class="form-control form-control-sm"
                            formControlName="Quantity" />
                            <div style="color: red;" *ngIf="myFormEquir.controls.Quantity.status=='INVALID'">
                                กรุณากรอกจำนวนการเบิก.</div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> หมายเหตุ </label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                    placeholder="......" [(ngModel)]="modelItemDetail.Remark"
                                    formControlName="Remark"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <div class=" form-group">
                                <label> สถานะ </label>
                                <br>
                                <select class="form-select form-control" aria-label="Default select example"
                                    formControlName="eStatus">
                                    <option value="0" style="color: black;">รอดำเนินการ</option>
                                    <option value="1" style="color: black;">อนุมัติ</option>
                                    <option value="2" style="color: black;">ยกเลิก</option>
                                    <option value="3" style="color: black;">คืนแล้ว</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                <div class=" card-footer">
                    <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusEquirment()">บันทึก</button>
                    <button class=" btn btn-fill btn-danger" type="cancel"
                        (click)="modal.dismiss('Cross click')">ยกเลิก</button>
                </div>
            </div>
        </div>
    </div>
</ng-template>