Skip to content

B
BookingMyHrManagement
Commit 37cab6c1 by Chanachai
Options

Add ปุ่มอนุมัติได้

parent c709d9e1
Showing with 124 additions and 84 deletions
src/app/pages/admin-pending/admin-pending.component.html
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
</div> </div>
</div> </div>
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การจอง</a> <a ngbNavLink>การจอง</a>
...@@ -75,29 +76,28 @@ ...@@ -75,29 +76,28 @@
<thead> <thead>
<tr> <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>
<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> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let country of countries"> <tr *ngFor="let item of listroomDetail">
<th scope="row">{{ country.id }}</th> <th scope="row">{{ item.Id }}</th>
<td>{{ country.catagory }}</td> <td>{{ item.room.rName }}</td>
<td>{{ country.type }}</td> <td>{{ item.room.rDesc }}</td>
<td>{{ country.detail }}</td> <td>{{ item.userName }}</td>
<td>{{ country.name }}</td> <td>{{ item.sDate | date:'dd-MM-yyyy' }} {{ item.sTime.hour }}:{{
<td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td> item.sTime.minute }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td> <td>{{ item.eDate | date:'dd-MM-yyyy' }} {{ item.eTime.hour }}:{{
<td>{{ country.status }}</td> item.eTime.minute }}</td>
<div class="col-auto align-self-sm-center"> <td>{{ item.eStatus }}</td>
<button type="button" class="btn btn-info btn-sm btn-circle " <div class="text-center">
style="line-height: 0px" (click)="open(Room)"><i <button type="button" class="btn btn-info btn-sm btn-circle " style="line-height: 0px"
class="fa fa-search"></i> </button> (click)="openRoomDetail(Room,item)"><i class="fa fa-search"></i> </button>
</div> </div>
</tr> </tr>
</tbody> </tbody>
...@@ -115,12 +115,12 @@ ...@@ -115,12 +115,12 @@
<option [ngValue]="100">100 items per page</option> <option [ngValue]="100">100 items per page</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การเบิก</a> <a ngbNavLink>การเบิก</a>
...@@ -137,27 +137,28 @@ ...@@ -137,27 +137,28 @@
<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> <th scope="col">วันที่สิ้นสุด</th>
<th scope="col">จำนวน</th> <th scope="col">จำนวน</th>
<th scope="col">สถานะ</th> <th scope="col">สถานะ</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let country of countries"> <tr *ngFor="let item of listitemDetail">
<th scope="row">{{ country.id }}</th> <th scope="row">{{ item.Id }}</th>
<td>{{ country.catagory }}</td> <td>{{ item.equirment.eqType }}</td>
<td>{{ country.type }}</td> <td>{{ item.equirment.eqName }}</td>
<td>{{ country.detail }}</td> <td>{{ item.equirment.eqDesc }}</td>
<td>{{ country.name }}</td> <td>{{ item.userName }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td> <td>{{ item.sDate | date:'dd-MM-yyyy' }} {{ item.sTime.hour }}:{{
<td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td> item.sTime.minute }}</td>
<td>{{ country.quantity }}</td> <td>{{ item.eDate | date:'dd-MM-yyyy' }} {{ item.eTime.hour }}:{{
<td>{{ country.status }}</td> item.eTime.minute }}</td>
<div class="col-auto align-self-sm-center"> <td>{{ item.Quantity }}</td>
<button type="button" class="btn btn-info btn-sm btn-circle " <td>{{ item.eStatus }}</td>
style="line-height: 0px" (click)="open(lend)"><i <div class="text-center">
class="fa fa-search"></i> </button> <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> </div>
</tr> </tr>
</tbody> </tbody>
...@@ -175,7 +176,6 @@ ...@@ -175,7 +176,6 @@
<option [ngValue]="100">100 items per page</option> <option [ngValue]="100">100 items per page</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -184,15 +184,11 @@ ...@@ -184,15 +184,11 @@
</li> </li>
</ul> </ul>
<div [ngbNavOutlet]="nav"></div> <div [ngbNavOutlet]="nav"></div>
</div> </div>
<ng-template #Room let-modal>
<ng-template #Room let-modal style="padding: 0; "> <div class=" col-md-12" style="padding: 0;">
<div class=" col-md-12"> <div class="card" style="margin: 0; ">
<div class="card">
<div class=" card-header"> <div class=" card-header">
<h5 class=" title">การจอง</h5> <h5 class=" title">การจอง</h5>
</div> </div>
...@@ -202,7 +198,8 @@ ...@@ -202,7 +198,8 @@
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> ชื่อผู้จอง </label> <label> ชื่อผู้จอง </label>
<input readonly class=" form-control" placeholder="" type="text" value="" /> <input readonly class=" form-control" placeholder="" type="text"
value="{{modelroomDetail.userName}}" />
</div> </div>
</div> </div>
</div> </div>
...@@ -210,64 +207,68 @@ ...@@ -210,64 +207,68 @@
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> เบอร์โทร </label> <label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value="" /> <input readonly class=" form-control" placeholder="" type="text" value="" />
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label> <label for="exampleFormControlSelect1">ชื่อห้อง</label>
<input class="form-control" type="text" value="{{item.rname}}"> <input readonly class="form-control" type="text" value="{{modelroomDetail.room.rName}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label> <label for="exampleFormControlSelect1">รายละเอียด</label>
<input class="form-control" type="text" value="{{item.rdecs}}"> <input readonly class="form-control" type="text" value="{{modelroomDetail.room.rDesc}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value=""> <input readonly type="text" class="form-control"
value="{{modelroomDetail.sDate | date:'dd-MM-yyyy'}}">
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value=""> <input readonly type="text" class="form-control"
value="{{modelroomDetail.eDate | date:'dd-MM-yyyy'}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label> <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker> <input readonly class="form-control" type="text"
value="{{modelroomDetail.sTime.hour}} {{modelroomDetail.sTime.minute}}">
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label> <label [readonly] for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker> <input readonly class="form-control" type="text"
value="{{modelroomDetail.eTime.hour}} {{modelroomDetail.eTime.minute}}">
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> หมายเหตุ </label> <label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......"></textarea> placeholder="......" value="{{modelroomDetail.Remark}}"></textarea>
</div>
</div> </div>
</div> </div>
</form>
</div> </div>
<div class=" card-footer"> <div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit">อนุมัติ</button> <button class=" btn btn-fill btn-danger" type="submit" (click)="saveEquirment()">อนุมัติ</button>
<button class=" btn btn-fill btn-danger" type="close">ยกเลิก</button> <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">ยกเลิก</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #lend let-modal style="padding: 0; "> <ng-template #lend let-modal>
<div class=" col-md-12"> <div class=" col-md-12" style="padding: 0; ">
<div class="card"> <div class="card" style="margin: 0; ">
<div class=" card-header"> <div class=" card-header">
<h5 class=" title">Lend Equirment</h5> <h5 class=" title">Lend Equirment</h5>
</div> </div>
...@@ -277,7 +278,8 @@ ...@@ -277,7 +278,8 @@
<div class=" col-sm-12 mb-1"> <div class=" col-sm-12 mb-1">
<div class=" form-group"> <div class=" form-group">
<label> ชื่อผู้จอง </label> <label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text" value="" /> <input readonly class=" form-control" placeholder="" type="text"
value="{{modelitemDetail.userName}}" />
</div> </div>
</div> </div>
</div> </div>
...@@ -285,47 +287,53 @@ ...@@ -285,47 +287,53 @@
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> เบอร์โทร </label> <label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value="" /> <input readonly class=" form-control" placeholder="" type="text" value="" />
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label> <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<input class="form-control" type="text" value="{{item.rname}}"> <input readonly class="form-control" type="text"
value="{{modelitemDetail.equirment.eqName}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label> <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
<input class="form-control" type="text" value="{{item.rdecs}}"> <input readonly class="form-control" type="text"
value="{{modelitemDetail.equirment.eqDesc}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value=""> <input readonly type="text" class="form-control"
value="{{modelitemDetail.sDate | date:'dd-MM-yyyy'}}">
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value=""> <input readonly type="text" class="form-control"
value="{{modelitemDetail.eDate | date:'dd-MM-yyyy'}}">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label> <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker> <input readonly class="form-control" type="text"
value="{{modelitemDetail.sTime.hour}} {{modelitemDetail.sTime.minute}}">
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label> <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker> <input readonly class="form-control" type="text"
value="{{modelitemDetail.eTime.hour}} {{modelitemDetail.eTime.minute}}">
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
<div class=" col-sm-6 mb-1"> <div class=" col-sm-6 mb-1">
<label for="changequantity">จำนวน</label> <label for="changequantity">จำนวน</label>
<input id="changequantity" type="number" class="form-control form-control-sm" <input readonly id="changequantity" type="number" class="form-control form-control-sm"
[(ngModel)]="quantity" /> value="{{modelitemDetail.Quantity}}" />
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
...@@ -333,16 +341,12 @@ ...@@ -333,16 +341,12 @@
<div class=" form-group"> <div class=" form-group">
<label> หมายเหตุ </label> <label> หมายเหตุ </label>
<textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3" <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......"></textarea> placeholder="......" value="{{modelitemDetail.Remark}}"></textarea>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </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>
</div> </div>
</ng-template> </ng-template>
\ No newline at end of file
src/app/pages/admin-pending/admin-pending.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Equirment } from 'src/app/models/equirment.model';
import { itemDetail } from 'src/app/models/itemDetail.model'; import { itemDetail } from 'src/app/models/itemDetail.model';
import { itemDetailService } from 'src/app/service/item-detail.service';
import { roomDetail } from 'src/app/models/roomDetail.model';
import { roomDetailService } from 'src/app/service/room-detail.service';
import { Room } from 'src/app/models/rooms.model';
@Component({ @Component({
selector: 'app-admin-pending', selector: 'app-admin-pending',
...@@ -41,21 +46,28 @@ export class AdminPendingComponent implements OnInit { ...@@ -41,21 +46,28 @@ export class AdminPendingComponent implements OnInit {
closeResult = ''; closeResult = '';
item: itemDetail[] = []; listitemDetail : itemDetail[] = [];
listroomDetail : roomDetail[] = [];
collectionSize = this.item.length; modelEquirment = new Equirment();
modelRoom = new Room();
modelitemDetail = new itemDetail();
modelroomDetail = new roomDetail();
collectionSize = this.listitemDetail.length;
hoveredDate: NgbDate | null = null; hoveredDate: NgbDate | null = null;
fromDate: NgbDate | null; fromDate: NgbDate | null;
toDate: NgbDate | null; toDate: NgbDate | null;
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter , private modalService: NgbModal) { constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private modalService: NgbModal, private itemDetailService: itemDetailService, private roomDetailService: roomDetailService) {
this.fromDate = calendar.getToday(); this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10); this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
this.refreshitemDetail(); this.refreshitemDetail();
} }
refreshitemDetail() { refreshitemDetail() {
this.item = this.item this.listitemDetail = this.listitemDetail
.map((country, i) => ({ id: i + 1, ...country })) .map((country, i) => ({ id: i + 1, ...country }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize); .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
} }
...@@ -79,6 +91,26 @@ export class AdminPendingComponent implements OnInit { ...@@ -79,6 +91,26 @@ export class AdminPendingComponent implements OnInit {
}); });
} }
openItemDetail(content : string ,item : itemDetail) {
this.modelitemDetail = item ;
console.log(item);
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
openRoomDetail(content : string ,item : roomDetail) {
this.modelroomDetail = item ;
console.log(item);
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 { private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) { if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC'; return 'by pressing ESC';
...@@ -107,8 +139,12 @@ export class AdminPendingComponent implements OnInit { ...@@ -107,8 +139,12 @@ export class AdminPendingComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.listitemDetail = this.itemDetailService.getListitemDetail();
this.listroomDetail = this.roomDetailService.getListroomDetail();
console.log(this.listitemDetail);
} }
} }
export class NgbdDropdownBasic { export class NgbdDropdownBasic {
......
src/app/pages/pending/pending.component.html
...@@ -182,9 +182,9 @@ ...@@ -182,9 +182,9 @@
<div [ngbNavOutlet]="nav"></div> <div [ngbNavOutlet]="nav"></div>
</div> </div>
<ng-template #Room let-modal style="padding: 0; "> <ng-template #Room let-modal>
<div class=" col-md-12"> <div class=" col-md-12" style="padding: 0; ">
<div class="card"> <div class="card" style="margin: 0; ">
<div class=" card-header"> <div class=" card-header">
<h5 class=" title">การจอง</h5> <h5 class=" title">การจอง</h5>
</div> </div>
...@@ -253,9 +253,9 @@ ...@@ -253,9 +253,9 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #lend let-modal style="padding: 0; "> <ng-template #lend let-modal>
<div class=" col-md-12"> <div class=" col-md-12" style="padding: 0; ">
<div class="card"> <div class="card" style="margin: 0; ">
<div class=" card-header"> <div class=" card-header">
<h5 class=" title">Lend Equirment</h5> <h5 class=" title">Lend Equirment</h5>
</div> </div>
...@@ -329,3 +329,4 @@ ...@@ -329,3 +329,4 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
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