Skip to content

B
BookingMyHrManagement
Commit ff7f4fe3 by DESKTOP-HF0LVOG\myhr
Options

Update หน้าต่าง admin

parent 37fd070b
Showing with 190 additions and 13 deletions
src/app/pages/admin-pending/admin-pending.component.html
......@@ -94,11 +94,10 @@
<td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</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 class="col-auto align-self-sm-center">
<button type="button" class="btn btn-info btn-sm btn-circle "
style="line-height: 0px" (click)="open(Room)"><i
class="fa fa-search"></i> </button>
</div>
</tr>
</tbody>
......@@ -155,11 +154,10 @@
<td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td>
<td>{{ country.quantity }}</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 class="col-auto align-self-sm-center">
<button type="button" class="btn btn-info btn-sm btn-circle "
style="line-height: 0px" (click)="open(lend)"><i
class="fa fa-search"></i> </button>
</div>
</tr>
</tbody>
......@@ -189,4 +187,162 @@
</div>
\ No newline at end of file
</div>
<ng-template #Room let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
<h5 class=" title">การจอง</h5>
</div>
<div class=" card-body">
<form>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อผู้จอง </label>
<input readonly class=" form-control" placeholder="" type="text" value="" />
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label>
<input class="form-control" type="text" value="{{item.rname}}">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label>
<input class="form-control" type="text" value="{{item.rdecs}}">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value="">
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="text" value="{{country.stime}}">
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="text" value="{{country.etime}}">
</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="......"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit">อนุมัติ</button>
<button class=" btn btn-fill btn-danger" type="close">ยกเลิก</button>
</div>
</div>
</div>
</ng-template>
<ng-template #lend let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
<h5 class=" title">Lend Equirment</h5>
</div>
<div class=" card-body">
<form>
<div class=" row">
<div class=" col-sm-12 mb-1">
<div class=" form-group">
<label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text" value="" />
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<input class="form-control" type="text" value="{{item.rname}}">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
<input class="form-control" type="text" value="{{item.rdecs}}">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value="">
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</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"
[(ngModel)]="quantity" />
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> หมายเหตุ </label>
<textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit">อนุมัติ</button>
<button class=" btn btn-fill btn-danger" type="close">ยกเลิก</button>
</div>
</div>
</div>
</ng-template>
\ No newline at end of file
src/app/pages/admin-pending/admin-pending.component.ts
import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-admin-pending',
......@@ -37,6 +38,8 @@ export class AdminPendingComponent implements OnInit {
page = 1;
pageSize = 10;
closeResult = '';
countries: Country[] = [
{
catagory: 'string',
......@@ -69,7 +72,7 @@ export class AdminPendingComponent implements OnInit {
fromDate: NgbDate | null;
toDate: NgbDate | null;
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter , private modalService: NgbModal) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
this.refreshCountries();
......@@ -92,6 +95,24 @@ export class AdminPendingComponent implements OnInit {
}
}
open(content) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
......
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