Skip to content

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

เพิ่มรายละเอียดหน้า pending

parent d052fac9
Showing with 191 additions and 77 deletions
src/app/components/sidebar/sidebar.component.ts
......@@ -24,7 +24,7 @@ export const ROUTES: RouteInfo[] = [
},
{
path: "/pending",
title: "รายการรออนุมัติ",
title: "รายการทั้งหมด",
rtlTitle: "",
icon: "icon-notes",
class: ""
......@@ -35,62 +35,6 @@ export const ROUTES: RouteInfo[] = [
rtlTitle: "",
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: ""
}
];
......
src/app/pages/equipment/equipment.component.html
......@@ -15,6 +15,36 @@
<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">Add Equipment</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="addequip">Add Equipment</label>
<div class="input-group">
<input id="addequip" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</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)">Add Equipment</button>
<hr>
<pre>{{ closeResult }}</pre>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>หมวดหมู่</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
......
src/app/pages/equipment/equipment.component.ts
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-equipment',
......@@ -6,10 +7,29 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./equipment.component.scss']
})
export class EquipmentComponent implements OnInit {
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}`;
}
}
}
src/app/pages/pending/pending.component.html
......@@ -3,6 +3,54 @@
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<form class="form-inline">
<div class="form-group hidden">
<div class="input-group">
<input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker"
[autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2"
[dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1">
<ng-template #t let-date let-focused="focused">
<span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate"
[value]="formatter.format(fromDate)"
(input)="fromDate = validateInput(fromDate, dpFromDate.value)">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
type="button"></button>
</div>
</div>
</div>
<div class="form-group ml-2">
<div class="input-group">
<input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate"
[value]="formatter.format(toDate)"
(input)="toDate = validateInput(toDate, dpToDate.value)">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
type="button"></button>
</div>
</div>
</div>
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
......@@ -11,14 +59,17 @@
<th scope="col">Name</th>
<th scope="col">Start-Date</th>
<th scope="col">End-Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries">
<th scope="row">{{ country.id }}</th>
<td>{{ country.detail }}</td>
<td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-mm-yyyy' }}</td>
<td>{{ country.edate | date:'dd-mm-yyyy' }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
<td>{{ country.status }}</td>
</tr>
</tbody>
</table>
......@@ -35,9 +86,9 @@
<option [ngValue]="100">100 items per page</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/pages/pending/pending.component.ts
import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
interface Country {
id?: number;
equip: string;
detail: string;
name: string;
sdate: string;
edate: string;
status: string;
}
const COUNTRIES: Country[] = [
{
equip: 'string',
name: 'ray',
sdate: 'string',
edate: 'string'
}
];
@Component({
selector: 'app-pending',
templateUrl: './pending.component.html',
styleUrls: ['./pending.component.scss']
styleUrls: ['./pending.component.scss'],
styles: [`
.form-group.hidden {
width: 0;
margin: 0;
border: none;
padding: 0;
}
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range, .custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`]
})
export class PendingComponent implements OnInit {
page = 1;
pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
constructor() {
countries: Country[] = [
{
detail: 'Moniter',
name: 'a',
sdate: '2021-11-25',
edate: '2021-11-25',
status: 'waiting',
},
{
detail: 'Mouse',
name: 'b',
sdate: '2021-11-25',
edate: '2021-11-25',
status: 'waiting',
}
];
collectionSize = this.countries.length;
hoveredDate: NgbDate | null = null;
fromDate: NgbDate | null;
toDate: NgbDate | null;
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
this.refreshCountries();
}
refreshCountries() {
this.countries = COUNTRIES
this.countries = this.countries
.map((country, i) => ({ id: i + 1, ...country }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
}
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
isInside(date: NgbDate) {
return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date);
}
validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
const parsed = this.formatter.parse(input);
return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
}
ngOnInit(): void {
}
......
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