Skip to content

B
BookingMyHrManagement
Commit d83e7382 by Chanachai
Options

เพิ่มให้มีอุปกรณ์หลายประเภท

parent 0d804d73
Showing with 151 additions and 126 deletions
src/app/pages/equipment/equipment.component.html
......@@ -12,7 +12,7 @@
</div>
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>First</a>
<a ngbNavLink>การจอง</a>
<ng-template ngbNavContent>
<div class="row">
......@@ -35,22 +35,100 @@
id="exampleFormControlFile">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">ชื่อรุ่นอุปกรณ์</label>
<input type="model" class="form-control" id="exampleFormControlInput1"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>จอคอมพิวเตอร์</option>
<option>โน๊ตบุ๊ค</option>
<option>เมาส์</option>
<option>คีย์บอร์ด</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">รายละเอียดอุปกรณ์</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
rows="20"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click')">Save</button>
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Cancel click')">Cancel</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;">
<div class="mx-auto" style="width: 200px;">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirment">
<div class="card-body">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</div>
<p class="text-left">{{item.name}}</p>
<p class="text-left">{{item.desc}}</p>
<p class="text-left">{{item.type}}</p>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div>
<!-- <div class="col-sm-3" *ngFor="let item of listEquirment">
<div class="card-body">
<img src="assets\img\mou.jpg" class="nav justify-content-center" alt="...">
</div>
<p class="text-left">{{item.name}}</p>
<p class="text-left">{{item.desc}}</p>
<p class="text-left">{{item.type}}</p>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div> -->
<!-- <div class="col-sm-3" *ngFor="let item of listEquirment">
<img src="assets\img\notebook.jpg" class="nav justify-content-center" alt="...">
</div>
<p class="text-left">{{item.name}}</p>
<p class="text-left">{{item.desc}}</p>
<p class="text-left">{{item.type}}</p>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div> -->
</div>
<!-- <div class="card-body" style="width: 50rem,">
<div class="col-sm-4" style="width: 200px;">
<img src="assets\img\keyboard.png" class="nav justify-content-center" alt="...">
</div>
<p class="text-left">ชื่อรุ่นอุปกรณ์ : logitech </p>
<p class="text-left">ชื่ออุปกรณ์ : คีย์บอร์ด </p>
<p class="text-left">รายละเอียดอุปกรณ์ </p>
<p class="text-left">ประเภทการเชื่อมต่อ : ไร้สาย</p>
<p class="text-left">อุปกรณ์ที่เสียบพอร์ต : USB</p>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div> -->
</div>
<div class="d-flex justify-content-between p-2">
......@@ -65,20 +143,15 @@
<option [ngValue]="100">100 items per page</option>
</select>
</div>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Second</a>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-sm-12">
<div class="card">
......@@ -95,9 +168,10 @@
<form>
<div class="form-group">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
<input type="file" class="form-control-file"
id="exampleFormControlFile">
</div>
</form>
</div>
<div class="modal-footer">
......@@ -105,21 +179,34 @@
(click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;">
<div class="mx-auto" style="width: 200px;">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
<button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button>
<div class="row">
<div class="col-sm-3" *ngFor="let item of listEquirment">
<div class="card-body">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</div>
<p class="text-left">{{item.name}}</p>
<p class="text-left">{{item.desc}}</p>
<p class="text-left">{{item.type}}</p>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</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>
......@@ -138,87 +225,4 @@
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
<!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="equirment-tab" data-toggle="tab" href="#equirment" role="tab"
aria-controls="equirment" aria-selected="true">ยืมอุปกรณ์IT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="book-tab" data-toggle="tab" href="#book-tab" role="tab"
aria-controls="book-tab" aria-selected="false">จองห้อง-รถ</a>
</li>
<div class="col-sm-4">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="equirment" role="tabpanel" aria-labelledby="equirment-tab">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">เพิ่มรายการ</h4>
<button type="button" class="close" aria-label="Close"
(click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;">
<div class="mx-auto" style="width: 200px;">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</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 class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="book-tab" role="tabpanel" aria-labelledby="book-tab">
sadasd
</div>
</div> -->
</div>
\ No newline at end of file
src/app/pages/equipment/equipment.component.ts
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
interface Country {
id?: number;
equip: string;
interface EquirmentModel {
id: number;
name: string;
sdate: string;
edate: string;
desc: string;
type: string;
pic: string;
}
const COUNTRIES: Country[] = [
{
equip: 'string',
name: 'ray',
sdate: 'string',
edate: 'string'
}
];
@Component({
selector: 'app-equipment',
templateUrl: './equipment.component.html',
......@@ -27,17 +17,48 @@ const COUNTRIES: Country[] = [
export class EquipmentComponent implements OnInit {
page = 1;
pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
closeResult = '';
listEquirment: EquirmentModel[] = [
{
id: 1,
name: "จอคอมพิวเตอร์",
desc: "หน้าจอขนาด 22 นิ้ว",
type: "it",
pic: "assets\img\mo1.jpg"
},
{
id: 2,
name: "เมาส์",
desc: "...",
type: "it",
pic: "assets\img\mou.jpg"
},
{
id: 3,
name: "โน๊ตบุ๊ค",
desc: "หน้าจอขนาด 20 นิ้ว",
type: "it",
pic: "assets\img\notebook.jpg"
},
{
id: 4,
name: "คีย์บอร์ด",
desc: "...",
type: "it",
pic: "assets\img\keyboard.png"
}
]
collectionSize = this.listEquirment.length;
constructor(private modalService: NgbModal) { }
ngOnInit(): void {
}
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
......@@ -54,8 +75,8 @@ export class EquipmentComponent implements OnInit {
}
}
refreshCountries() {
this.countries = COUNTRIES
.map((country, i) => ({ id: i + 1, ...country }))
this.listEquirment = this.listEquirment
.map((item, i) => ({ id: i + 1, ...item }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
}
\ No newline at end of file
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