Skip to content

B
BookingMyHrManagement
Commit d83e7382 by Chanachai
Options

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

parent 0d804d73
Showing with 133 additions and 106 deletions
src/app/pages/equipment/equipment.component.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>First</a> <a ngbNavLink>การจอง</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row"> <div class="row">
...@@ -35,84 +35,100 @@ ...@@ -35,84 +35,100 @@
id="exampleFormControlFile"> id="exampleFormControlFile">
</div> </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> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" <button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click')">Save</button> (click)="modal.close('Save click')">Save</button>
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Cancel click')">Cancel</button>
</div> </div>
</ng-template> </ng-template>
<button class="btn btn-lg btn-outline-primary" <button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button> (click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;"> <div class="row">
<div class="mx-auto" style="width: 200px;"> <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="..."> <img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</div>
</div>
</div> </div>
<div class="d-flex justify-content-between p-2"> <p class="text-left">{{item.name}}</p>
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" <p class="text-left">{{item.desc}}</p>
(pageChange)="refreshCountries()"> <p class="text-left">{{item.type}}</p>
</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"> <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>
<button class="btn btn-primary" type="button">ยกเลิก</button> <button class="btn btn-primary" type="button">ยกเลิก</button>
</div> </div>
</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> </div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Second</a>
<ng-template ngbNavContent>
<p class="text-left">{{item.name}}</p>
<p class="text-left">{{item.desc}}</p>
<p class="text-left">{{item.type}}</p>
<div class="row"> <div class="d-grid gap-2 a-md-flex justify-content-md-end">
<div class="col-sm-12"> <button class="btn btn-primary" type="button">ยืม</button>
<div class="card"> <button class="btn btn-primary" type="button">ยกเลิก</button>
<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>
<div class="modal-body"> </div> -->
<form>
<div class="form-group"> <!-- <div class="col-sm-3" *ngFor="let item of listEquirment">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label> <img src="assets\img\notebook.jpg" class="nav justify-content-center" alt="...">
<input type="file" class="form-control-file" id="exampleFormControlFile">
</div> </div>
</form> <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 class="modal-footer">
<button type="button" class="btn btn-outline-dark" <!-- <div class="card-body" style="width: 50rem,">
(click)="modal.close('Save click')">Save</button> <div class="col-sm-4" style="width: 200px;">
<img src="assets\img\keyboard.png" class="nav justify-content-center" alt="...">
</div> </div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">เพิ่มรายการ</button> <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="card" style="width: 50rem;"> <div class="d-grid gap-2 a-md-flex justify-content-md-end">
<div class="mx-auto" style="width: 200px;"> <button class="btn btn-primary" type="button">ยืม</button>
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="..."> <button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div> </div>
</div> -->
</div> </div>
<div class="d-flex justify-content-between p-2"> <div class="d-flex justify-content-between p-2">
...@@ -127,37 +143,15 @@ ...@@ -127,37 +143,15 @@
<option [ngValue]="100">100 items per page</option> <option [ngValue]="100">100 items per page</option>
</select> </select>
</div> </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> </div>
</ng-template> </ng-template>
</li> </li>
</ul> <li ngbNavItem>
<div [ngbNavOutlet]="nav"></div> <a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<!-- <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="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
...@@ -174,7 +168,8 @@ ...@@ -174,7 +168,8 @@
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label> <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile"> <input type="file" class="form-control-file"
id="exampleFormControlFile">
</div> </div>
</form> </form>
...@@ -185,11 +180,24 @@ ...@@ -185,11 +180,24 @@
</div> </div>
</ng-template> </ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">เพิ่มรายการ</button> <button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;"> <div class="row">
<div class="mx-auto" style="width: 200px;"> <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="..."> <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>
</div> </div>
...@@ -213,12 +221,8 @@ ...@@ -213,12 +221,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
<div class="tab-pane fade" id="book-tab" role="tabpanel" aria-labelledby="book-tab"> </li>
</ul>
sadasd <div [ngbNavOutlet]="nav"></div>
</div>
</div> -->
</div> </div>
\ No newline at end of file
src/app/pages/equipment/equipment.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
interface Country { interface EquirmentModel {
id?: number; id: number;
equip: string;
name: string; name: string;
sdate: string; desc: string;
edate: string; type: string;
pic: string;
} }
const COUNTRIES: Country[] = [
{
equip: 'string',
name: 'ray',
sdate: 'string',
edate: 'string'
}
];
@Component({ @Component({
selector: 'app-equipment', selector: 'app-equipment',
templateUrl: './equipment.component.html', templateUrl: './equipment.component.html',
...@@ -27,17 +17,48 @@ const COUNTRIES: Country[] = [ ...@@ -27,17 +17,48 @@ const COUNTRIES: Country[] = [
export class EquipmentComponent implements OnInit { export class EquipmentComponent implements OnInit {
page = 1; page = 1;
pageSize = 10; pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
closeResult = ''; 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) { } constructor(private modalService: NgbModal) { }
ngOnInit(): void { ngOnInit(): void {
} }
open(content) { 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}`; this.closeResult = `Closed with: ${result}`;
}, (reason) => { }, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
...@@ -54,8 +75,8 @@ export class EquipmentComponent implements OnInit { ...@@ -54,8 +75,8 @@ export class EquipmentComponent implements OnInit {
} }
} }
refreshCountries() { refreshCountries() {
this.countries = COUNTRIES this.listEquirment = this.listEquirment
.map((country, i) => ({ id: i + 1, ...country })) .map((item, i) => ({ id: i + 1, ...item }))
.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);
} }
} }
\ 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