Skip to content

B
BookingMyHrManagement
Commit a564c62c by Chanachai
Options

Merge branch 'master' of https://mygit.myhr.co.th/chanachai.pmg.eng/BookingMyHrManagement

parents d83e7382 2e1d1840
Showing with 202 additions and 79 deletions
src/app/pages/admin-pending/admin-pending.component.ts
......@@ -119,3 +119,6 @@ export class AdminPendingComponent implements OnInit {
}
}
export class NgbdDropdownBasic {
}
src/app/pages/home-page/home-page.component.html
<div class=" content">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6 mb-3">
<label for="exampleFormControlSelect1">วันที่เริ่มใช้</label>
<input type="date" class="form-control" value="">
<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>
<div class="col-6 mb-3">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="">
</form>
</div>
</div>
</div>
<div class="col-4">
<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>
<button ngbDropdownItem>สำเร็จแล้ว</button>
</div>
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</div>
</div>
......@@ -22,65 +67,24 @@
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<p>
<br />
<button type="button" class="btn btn-primary" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg" aria-controls="multicollapseExample" value="calendar">
Click to collapse1
</button>
<button type="button" class="btn btn-primary" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg" aria-controls="multicollapseExample multicollapseExample1"
value="calendar1">
Click to collapse2
</button>
<button type="button" class="btn btn-primary" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg"
aria-controls="multicollapseExample multicollapseExample1 multicollapseExample2"
value="calendar2">
Click to collapse3
</button>
</p>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" class="multicollapseExample">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
</div>
</div>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" class="multicollapseExample1">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
1
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
</div>
</div>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" class="multicollapseExample2">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
2
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
</div>
</div>
</div>
</div>
<ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs">
<li [ngbNavItem]="1">
<a ngbNavLink>ปฏิทินการจองห้อง</a>
<ng-template ngbNavContent>
<full-calendar #calendarBook [options]="calendarOptions"></full-calendar>
</ng-template>
</li>
<li [ngbNavItem]="2">
<a ngbNavLink>ปฏิทินการยืมรถ</a>
<ng-template ngbNavContent>
<full-calendar #calendar [options]="calendarOptions"></full-calendar>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/pages/home-page/home-page.component.ts
import { Component, OnInit } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FullCalendarComponent, CalendarOptions } from '@fullcalendar/angular';
import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
interface Country {
id?: number;
catagory: string;
type: string;
detail: string;
name: string;
sdate: string;
edate: string;
status: string;
}
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
styleUrls: ['./home-page.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 HomePageComponent implements OnInit {
active = 1;
public gfg = true;
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
dateClick: this.handleDateClick.bind(this), // bind is important!
events: [
{ title: 'จองรถ', date: '2021-11-23' },
]
};
page = 1;
pageSize = 10;
@ViewChild('calendarBook') calendarBook: FullCalendarComponent
hoveredDate: NgbDate | null = null;
fromDate: NgbDate | null;
toDate: NgbDate | null;
countries: Country[] = [
{
catagory: 'string',
type: 'string',
detail: 'Moniter',
name: 'a',
sdate: '2021-11-25',
edate: '2021-11-25',
status: 'waiting',
},
{
catagory: 'string',
type: 'string',
detail: 'Mouse',
name: 'b',
sdate: '2021-11-25',
edate: '2021-11-25',
status: 'waiting',
}
];
calendarOptions: CalendarOptions;
showBook = false;
handleDateClick(arg) {
alert('date click! ' + arg.dateStr)
}
constructor() { }
constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
this.refreshCountries();
}
refreshCountries() {
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 {
setTimeout(function () {
window.dispatchEvent(new Event('resize'))
}, 1)
}
onNavChange(changeEvent: NgbNavChangeEvent) {
setTimeout(function () {
window.dispatchEvent(new Event('resize'))
},250);
}
}
export class NgbdCollapseBasic {
public isCollapsed = false;
export class NgbdDropdownBasic {
}
\ No newline at end of file
src/app/pages/pending/pending.component.ts
......@@ -117,3 +117,6 @@ export class PendingComponent implements OnInit {
}
}
export class NgbdDropdownBasic {
}
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