Skip to content

B
BookingMyHrManagement
Commit 3b3c8056 by DESKTOP-HF0LVOG\myhr
Options

Edit ปุ่มเพิ่มรายการ และเพิ่มหน้าอุปกรณ์ admin

parent 31cfe643
Showing with 524 additions and 11 deletions
src/app/app.module.ts
......@@ -21,6 +21,7 @@ import { EquipmentComponent } from "./pages/equipment/equipment.component";
import { CalenRoomComponent } from './pages/calen-room/calen-room.component';
import { AdminPendingComponent } from './pages/admin-pending/admin-pending.component';
import { PendingComponent } from './pages/pending/pending.component';
import { AdminEquirmentComponent } from './pages/admin-equirment/admin-equirment.component';
FullCalendarModule.registerPlugins([ // register FullCalendar plugins
dayGridPlugin,
......@@ -39,7 +40,7 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins
ToastrModule.forRoot(),
FullCalendarModule,
],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent, AdminPendingComponent, PendingComponent],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent, AdminPendingComponent, PendingComponent, AdminEquirmentComponent],
providers: [],
bootstrap: [AppComponent]
})
......
src/app/components/sidebar/sidebar.component.ts
......@@ -23,6 +23,13 @@ export const ROUTES: RouteInfo[] = [
class: ""
},
{
path: "/admin-equirment",
title: "รายการอุปกรณ์ Admin",
rtlTitle: "",
icon: "icon-bag-16",
class: ""
},
{
path: "/pending",
title: "รายการทั้งหมด",
rtlTitle: "",
......@@ -36,6 +43,7 @@ export const ROUTES: RouteInfo[] = [
icon: "icon-bag-16",
class: ""
},
{
path: "/lend-page",
title: "รายการดำเนินการ",
......
src/app/layouts/admin-layout/admin-layout.routing.ts
......@@ -12,11 +12,13 @@ import { EquipmentComponent } from "src/app/pages/equipment/equipment.component"
import { AdminPendingComponent } from "src/app/pages/admin-pending/admin-pending.component";
import { PendingComponent } from "src/app/pages/pending/pending.component";
import { LendPageComponent } from "src/app/pages/lend-page/lend-page.component";
import { AdminEquirmentComponent } from "src/app/pages/admin-equirment/admin-equirment.component";
// import { RtlComponent } from "../../pages/rtl/rtl.component";
export const AdminLayoutRoutes: Routes = [
{ path: "home-page", component: HomePageComponent },
{ path: "equipment", component: EquipmentComponent },
{ path: "admin-equirment", component: AdminEquirmentComponent },
{ path: "admin-pending", component: AdminPendingComponent },
{ path: "pending", component: PendingComponent },
{ path: "lend-page", component: LendPageComponent },
......
src/app/pages/admin-equirment/admin-equirment.component.html 0 → 100644
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div>
<h4 class="nav justify-content-center ">รายการ</h4>
</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="">
<div class="card-body">
<button class="btn btn-lg btn-outline-primary"
(click)="open(contentroom)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listRoomModel">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="height: 200px;
width: 200px;" [src]="item.rPic" class="nav justify-content-center"
alt="...">
<br>
<p class="text-left">ชื่อ : {{item.rName}}</p>
<p class="text-left">รายละเอียด : {{item.rDesc}}</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)="open(Room)">จอง</button>
<button class="btn btn-sm btn-primary" type="button">ยกเลิก</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>
<li ngbNavItem>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-sm-12">
<div class="">
<div class="card-body">
<ng-template #contentequirment 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)]="modelEquirment.eqName"
value="" />
</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)]="modelEquirment.eqType">
<option selected>เลือกหมวดหมู่</option>
<option value="4">IT</option>
<option value="5">Company</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)]="modelEquirment.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)="saveEquirment()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="open(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)="open(lend)">เบิก</button>
<button class="btn btn-sm btn-primary" type="button">ยกเลิก</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 #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 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 readonly 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 readonly 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)]="stime"></ngb-timepicker>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="etime"></ngb-timepicker>
</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">Save</button>
<button class=" btn btn-fill btn-danger" type="close">Cancel</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 readonly 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 readonly 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)]="stime"></ngb-timepicker>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="etime"></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 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">Save</button>
<button class=" btn btn-fill btn-danger" type="close">Cancel</button>
</div>
</div>
</div>
</ng-template>
\ No newline at end of file
src/app/pages/admin-equirment/admin-equirment.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AdminEquirmentComponent } from './admin-equirment.component';
describe('AdminEquirmentComponent', () => {
let component: AdminEquirmentComponent;
let fixture: ComponentFixture<AdminEquirmentComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AdminEquirmentComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AdminEquirmentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/admin-equirment/admin-equirment.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Equirment } from 'src/app/models/equirment.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';
@Component({
selector: 'app-admin-equirment',
templateUrl: './admin-equirment.component.html',
styleUrls: ['./admin-equirment.component.scss']
})
export class AdminEquirmentComponent implements OnInit {
time = { hour: 13, minute: 30 };
page = 1;
pageSize = 10;
closeResult = '';
listEquirmentModel: Equirment[] = [];
listRoomModel: Room[] = [];
collectionSize = this.listEquirmentModel.length;
modelEquirment = new Equirment();
modelRoom = new Room();
constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService) {
}
ngOnInit() {
this.listEquirmentModel = this.equirmentService.getListEquirment();
this.listRoomModel = this.roomService.getListRoom();
}
Eopen(contentequirment) {
this.modelEquirment = new Equirment();
this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
Ropen(contentroom) {
this.modelRoom = new Room();
this.modalService.open(contentroom, { 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}`;
}
}
refreshCountries() {
this.listEquirmentModel = this.listEquirmentModel
this.listRoomModel = this.listRoomModel
.map((item, i) => ({ id: i + 1, ...item }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
NgbdTimepickerBasic() {
}
saveEquirment() {
this.equirmentService.addEquirment(this.modelEquirment);
this.modalService.dismissAll();
this.ngOnInit();
}
saveRoom() {
this.roomService.addRoom(this.modelRoom);
this.modalService.dismissAll();
this.ngOnInit();
}
}
src/app/pages/equipment/equipment.component.html
......@@ -20,7 +20,7 @@
<div class="card-body">
<button class="btn btn-lg btn-outline-primary"
(click)="Ropen(content)">เพิ่มรายการ</button>
(click)="open(contentroom)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listRoomModel">
......@@ -64,6 +64,8 @@
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
......@@ -71,7 +73,7 @@
<div class="col-sm-12">
<div class="">
<div class="card-body">
<ng-template #content let-modal style="padding: 0; ">
<ng-template #contentequirment let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......@@ -126,7 +128,7 @@
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="Eqopen(content)">เพิ่มรายการ</button>
(click)="open(contentequirment)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirmentModel">
......@@ -176,7 +178,7 @@
<div [ngbNavOutlet]="nav"></div>
</div>
<ng-template #content let-modal style="padding: 0; ">
<ng-template #contentroom let-modal style="padding: 0; ">
<div class=" col-md-12">
<div class="card">
<div class=" card-header">
......
src/app/pages/equipment/equipment.component.ts
......@@ -32,18 +32,18 @@ export class EquipmentComponent implements OnInit {
this.listRoomModel = this.roomService.getListRoom();
}
Eqopen(content) {
Eopen(contentequirment) {
this.modelEquirment = new Equirment();
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
Ropen(content) {
Ropen(contentroom) {
this.modelRoom = new Room();
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.modalService.open(contentroom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
......
src/app/service/room.service.ts
......@@ -44,7 +44,7 @@ export class RoomService {
]
listRoomSearch: Room[] = [];
addRoom(model : Room){
addRoom(model: Room) {
this.listRoomModel.push(model);
}
......@@ -61,7 +61,7 @@ export class RoomService {
}
searchListRoom(searchModel: SearchRoomModel) {
this.http.get(this.url + '/limits?roomlimit='+searchModel.roomlimit+'&startDate='+searchModel.sdate.split("-")[2]+'-'+searchModel.sdate.split("-")[1]+'-'+searchModel.sdate.split("-")[0]+'&endDate='+searchModel.edate.split("-")[2]+'-'+searchModel.edate.split("-")[1]+'-'+searchModel.edate.split("-")[0]+'&startTime='+searchModel.stime+':00'+'&endTime='+searchModel.etime+':00').subscribe((response: any) => {
this.http.get(this.url + '/limits?roomlimit=' + searchModel.roomlimit + '&startDate=' + searchModel.sdate.split("-")[2] + '-' + searchModel.sdate.split("-")[1] + '-' + searchModel.sdate.split("-")[0] + '&endDate=' + searchModel.edate.split("-")[2] + '-' + searchModel.edate.split("-")[1] + '-' + searchModel.edate.split("-")[0] + '&startTime=' + searchModel.stime + ':00' + '&endTime=' + searchModel.etime + ':00').subscribe((response: any) => {
console.log(response);
this.listRoomSearch = response;
}, error => {
......
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