Skip to content

B
BookingMyHrManagement
Commit 36bf0afe by Chanachai
Options

Updata--ปุ๋มเพิ่มรายการ

parent d052fac9
Showing with 106 additions and 86 deletions
src/app/components/sidebar/sidebar.component.ts
......@@ -36,62 +36,6 @@ export const ROUTES: RouteInfo[] = [
icon: "icon-bag-16",
class: ""
},
{
path: "/dashboard",
title: "Dashboard",
rtlTitle: "",
icon: "icon-chart-pie-36",
class: ""
},
{
path: "/icons",
title: "Icons",
rtlTitle: "",
icon: "icon-atom",
class: ""
},
{
path: "/maps",
title: "Maps",
rtlTitle: "",
icon: "icon-pin",
class: "" },
{
path: "/notifications",
title: "Notifications",
rtlTitle: "",
icon: "icon-bell-55",
class: ""
},
{
path: "/user",
title: "User Profile",
rtlTitle: "",
icon: "icon-single-02",
class: ""
},
{
path: "/tables",
title: "Table List",
rtlTitle: "",
icon: "icon-puzzle-10",
class: ""
},
{
path: "/typography",
title: "Typography",
rtlTitle: "",
icon: "icon-align-center",
class: ""
},
{
path: "/rtl",
title: "RTL Support",
rtlTitle: "",
icon: "icon-world",
class: ""
}
];
@Component({
......
src/app/pages/equipment/equipment.component.html
......@@ -11,48 +11,72 @@
</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab"
aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab"
aria-controls="จองห้อง-รถ" 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="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>หมวดหมู่</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>ยืมอุปกรณ์</button>
<button ngbDropdownItem>ยืมรถ</button>
<button ngbDropdownItem>จองห้อง</button>
<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>
<div class="col-sm-6">
</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>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Back</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-6">
<div class=" card-body">
<div class=" nav justify-content-center">
<h4 class=" title">รายละเอียดอุปกรณ์</h4>
</div>
<p class="card-text">....</p>
</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>
......@@ -61,4 +85,8 @@
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</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';
interface Country {
id?: number;
equip: string;
name: string;
sdate: string;
edate: string;
}
const COUNTRIES: Country[] = [
{
equip: 'string',
name: 'ray',
sdate: 'string',
edate: 'string'
}
];
@Component({
selector: 'app-equipment',
......@@ -6,10 +25,38 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./equipment.component.scss']
})
export class EquipmentComponent implements OnInit {
page = 1;
pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
closeResult = '';
constructor() { }
constructor(private modalService: NgbModal) { }
ngOnInit(): void {
}
open(content) {
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) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
refreshCountries() {
this.countries = COUNTRIES
.map((country, i) => ({ id: i + 1, ...country }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
}
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