Skip to content

B
BookingMyHrManagement
Commit 6d169133 by DESKTOP-HF0LVOG\myhr
Options

update เพิ่มปุ่มแก้ไข หน้า admin

parent c709d9e1
Showing with 266 additions and 114 deletions
src/app/pages/admin-equirment/admin-equirment.component.html
......@@ -20,7 +20,7 @@
<div class="card-body">
<button class="btn btn-lg btn-outline-primary"
(click)="open(contentroom)">เพิ่มรายการ</button>
(click)="Ropen(contentroom)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listRoomModel">
......@@ -38,8 +38,8 @@
<div class="text-center">
<div class="d-grid gap-2 a-md-flex justify-content-md-end ">
<button class="btn btn-sm btn-outline-primary"
(click)="open(Room)">จอง</button>
<button class="btn btn-sm btn-primary" type="button">ยกเลิก</button>
(click)="bookRoom(editroom,item)">แก้ไข</button>
<button class="btn btn-sm btn-danger" type="button.dispose" (click)="modal.close()">ลบ</button>
</div>
</div>
</div>
......@@ -73,7 +73,108 @@
<div class="col-sm-12">
<div class="">
<div class="card-body">
<ng-template #contentequirment let-modal style="padding: 0; ">
<button class="btn btn-lg btn-outline-primary"
(click)="Eopen(contentequirment)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirmentModel">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="height: 200px;
width: 200px;" [src]="item.eqPic" class="nav justify-content-center"
alt="...">
<br>
<p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">ประเภท : {{item.eqType}}</p>
</div>
<div class="text-center">
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-sm btn-outline-primary"
(click)="bookEquir(editLend,item)">แก้ไข</button>
<button class="btn btn-sm btn-danger" type="button.dispose">ลบ</button>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
<ng-template #contentroom let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
<h5 class=" title">Add Equirment</h5>
</div>
<div class=" card-body">
<form>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อ </label>
<input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName">
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-6 mb-2">
<div class=" form-group">
<label> ประเภท </label>
<br>
<select class="form-select" aria-label="Default select example" [(ngModel)]="modelRoom.rType">
<option selected>เลือกประเภท</option>
<option value="1">ห้อง</option>
<option value="2">รถ</option>
</select>
</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)]="modelRoom.rDesc"></textarea>
</div>
</div>
</div>
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit" (click)="saveRoom()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
</div>
</ng-template>
<ng-template #contentequirment let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......@@ -125,64 +226,48 @@
</div>
</div>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="open(contentequirment)">เพิ่มรายการ</button>
</ng-template>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirmentModel">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="height: 200px;
width: 200px;" [src]="item.eqPic" class="nav justify-content-center"
alt="...">
<br>
<p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">ประเภท : {{item.eqType}}</p>
<ng-template #editroom let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
<h5 class=" title">แก้ไขข้อมูล</h5>
</div>
<div class="text-center">
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-sm btn-outline-primary"
(click)="open(lend)">เบิก</button>
<button class="btn btn-sm btn-primary" type="button">ยกเลิก</button>
<div class=" card-body">
<form>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อ </label>
<input class=" form-control" type="text" [value]="modelroomDetail.room.rName">
</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"
[value]="modelroomDetail.room.rDesc"></textarea>
</div>
</div>
</div>
<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>
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit" (click)="editRoom()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</ng-template>
<ng-template #contentroom let-modal style="padding: 0; ">
<ng-template #editLend let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
<h5 class=" title">Add Equirment</h5>
<h5 class=" title">แก้ไขข้อมูล</h5>
</div>
<div class=" card-body">
<form>
......@@ -190,7 +275,7 @@
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อ </label>
<input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName">
<input class=" form-control" type="text" [value]="modelitemDetail.equirment.rName">
</div>
</div>
</div>
......@@ -199,11 +284,7 @@
<div class=" form-group">
<label> ประเภท </label>
<br>
<select class="form-select" aria-label="Default select example" [(ngModel)]="modelRoom.rType">
<option selected>เลือกประเภท</option>
<option value="1">ห้อง</option>
<option value="2">รถ</option>
</select>
<input class=" form-control" type="text" [value]="modelitemDetail.equirment.eqType">
</div>
</div>
</div>
......@@ -212,16 +293,14 @@
<div class=" form-group">
<label> รายละเอียด</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelRoom.rDesc"></textarea>
[value]="modelitemDetail.equirment.eqDesc"></textarea>
</div>
</div>
</div>
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit" (click)="saveRoom()">Save</button>
<button class=" btn btn-fill btn-danger" type="submit" (click)="saveEquirment()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
......@@ -303,7 +382,7 @@
</div>
</ng-template>
<ng-template #lend let-modal style="padding: 0; ">
<ng-template #Lend let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......
src/app/pages/admin-equirment/admin-equirment.component.ts
import { Component, OnInit } from '@angular/core';
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 { roomDetail } from 'src/app/models/roomDetail.model';
import { Room } from 'src/app/models/rooms.model';
import { EquirmentService } from 'src/app/service/equirment.service';
import { RoomService } from 'src/app/service/room.service';
import { roomDetailService } from 'src/app/service/room-detail.service';
@Component({
selector: 'app-admin-equirment',
......@@ -19,10 +22,18 @@ export class AdminEquirmentComponent implements OnInit {
listEquirmentModel: Equirment[] = [];
listRoomModel: Room[] = [];
listitemDetail: itemDetail[] = [];
listroomDetail: roomDetail[] = [];
collectionSize = this.listEquirmentModel.length;
modelEquirment = new Equirment();
modelRoom = new Room();
constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService) {
modelitemDetail = new itemDetail();
modelroomDetail = new roomDetail();
constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService, private roomDetailService : roomDetailService) {
}
......@@ -31,6 +42,32 @@ export class AdminEquirmentComponent implements OnInit {
this.listRoomModel = this.roomService.getListRoom();
}
bookEquir(editLend, item: Equirment) {
this.modelitemDetail = new itemDetail();
this.modelitemDetail.equirment = item;
console.log("item", this.modelitemDetail);
this.modalService.open(editLend, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
bookRoom(editroom, item: Room) {
this.modelroomDetail = new roomDetail();
this.modelroomDetail.room = item;
console.log("room", this.modelroomDetail);
this.modalService.open(editroom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
Eopen(contentequirment) {
this.modelEquirment = new Equirment();
this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
......@@ -49,6 +86,26 @@ export class AdminEquirmentComponent 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 {
if (reason === ModalDismissReasons.ESC) {
......@@ -85,4 +142,10 @@ export class AdminEquirmentComponent implements OnInit {
this.ngOnInit();
}
editRoom() {
this.roomService.editroom(this.modelRoom);
this.modalService.dismissAll();
this.ngOnInit();
}
}
src/app/pages/equipment/equipment.component.html
......@@ -72,7 +72,59 @@
<div class="col-sm-12">
<div class="">
<div class="card-body">
<ng-template #contentequirment let-modal style="padding: 0; ">
<button class="btn btn-lg btn-outline-primary"
(click)="Eopen(contentequirment)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirmentModel">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="height: 200px;
width: 200px;" [src]="item.eqPic" class="nav justify-content-center"
alt="...">
<br>
<p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">ประเภท : {{item.eqType}}</p>
</div>
<div class="text-center">
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-sm btn-outline-primary"
(click)="bookEquir(Lend,item)">เบิก</button>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
<ng-template #contentequirment let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......@@ -124,57 +176,7 @@
</div>
</div>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="Eopen(contentequirment)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirmentModel">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="height: 200px;
width: 200px;" [src]="item.eqPic" class="nav justify-content-center"
alt="...">
<br>
<p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">ประเภท : {{item.eqType}}</p>
</div>
<div class="text-center">
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-sm btn-outline-primary"
(click)="bookEquir(lend,item)">เบิก</button>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</ng-template>
<ng-template #contentroom let-modal style="padding: 0; ">
<div class=" col-md-12">
......@@ -301,7 +303,7 @@
</div>
</ng-template>
<ng-template #lend let-modal style="padding: 0; ">
<ng-template #Lend let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......
src/app/pages/equipment/equipment.component.ts
......@@ -51,13 +51,13 @@ export class EquipmentComponent implements OnInit {
}
bookEquir(contentequirment,item : Equirment) {
bookEquir(Lend,item : Equirment) {
this.modelitemDetail = new itemDetail();
this.modelitemDetail.equirment = item ;
console.log("item",this.modelitemDetail);
this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.modalService.open(Lend, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
......
src/app/service/room-detail.service.ts
......@@ -61,6 +61,10 @@ export class roomDetailService {
]
editroomDetail(model: roomDetail) {
this.listroomDetail.push(model)
}
addroomDetail(model: roomDetail) {
console.log(this.listroomDetail);
this.listroomDetail.push(model);
......
src/app/service/room.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Room, SearchRoomModel } from '../models/rooms.model';
import { roomDetail } from '../models/roomDetail.model';
......@@ -28,7 +29,6 @@ export class RoomService {
{
rId: 3,
rName: "ห้องรวม",
rPic: "assets/img/room.jpg",
roomLimit: 100,
rDesc: "จำนวนคน 100 คน",
......@@ -43,6 +43,10 @@ export class RoomService {
]
listRoomSearch: Room[] = [];
editroom(model: Room) {
this.listRoomModel.push(model);
}
addRoom(model: Room) {
this.listRoomModel.push(model);
}
......
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