Skip to content

B
BookingMyHrManagement
Commit 2e1d1840 by DESKTOP-HF0LVOG\myhr
Options

Update ปฏิทินหน้าหลัก

parent bc04974b
Showing with 238 additions and 85 deletions
src/app/pages/admin-pending/admin-pending.component.html
<div class=" content"> <div class=" content">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-8">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<form class="form-inline"> <form class="form-inline">
...@@ -40,12 +40,27 @@ ...@@ -40,12 +40,27 @@
</div> </div>
</div> </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> </form>
</div> </div>
</div> </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>
</div>
</div> </div>
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
......
src/app/pages/admin-pending/admin-pending.component.ts
...@@ -119,3 +119,6 @@ export class AdminPendingComponent implements OnInit { ...@@ -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=" content">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-8">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="row"> <form class="form-inline">
<div class="col-6 mb-3"> <div class="form-group hidden">
<label for="exampleFormControlSelect1">วันที่เริ่มใช้</label> <div class="input-group">
<input type="date" class="form-control" value=""> <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>
<div class="col-6 mb-3"> </form>
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> </div>
<input type="date" class="form-control" value=""> </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> </div>
<button class="btn btn-outline-success" type="submit">Search</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -22,65 +67,24 @@ ...@@ -22,65 +67,24 @@
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<p> <ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs">
<br /> <li [ngbNavItem]="1">
<button type="button" class="btn btn-primary" (click)="collapse.toggle()" <a ngbNavLink>ปฏิทินการจองห้อง</a>
[attr.aria-expanded]="!gfg" aria-controls="multicollapseExample" value="calendar"> <ng-template ngbNavContent>
Click to collapse1 <full-calendar #calendarBook [options]="calendarOptions"></full-calendar>
</button> </ng-template>
<button type="button" class="btn btn-primary" (click)="collapse.toggle()" </li>
[attr.aria-expanded]="!gfg" aria-controls="multicollapseExample multicollapseExample1" <li [ngbNavItem]="2">
value="calendar1"> <a ngbNavLink>ปฏิทินการยืมรถ</a>
Click to collapse2 <ng-template ngbNavContent>
</button> <full-calendar #calendar [options]="calendarOptions"></full-calendar>
<button type="button" class="btn btn-primary" (click)="collapse.toggle()" </ng-template>
[attr.aria-expanded]="!gfg" </li>
aria-controls="multicollapseExample multicollapseExample1 multicollapseExample2" </ul>
value="calendar2"> <div [ngbNavOutlet]="nav"></div>
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>
</div> </div>
</div> </div>
</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 { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular'; 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({ @Component({
selector: 'app-home-page', selector: 'app-home-page',
templateUrl: './home-page.component.html', 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 { export class HomePageComponent implements OnInit {
active = 1;
public gfg = true; public gfg = true;
page = 1;
calendarOptions: CalendarOptions = { pageSize = 10;
initialView: 'dayGridMonth', @ViewChild('calendarBook') calendarBook: FullCalendarComponent
dateClick: this.handleDateClick.bind(this), // bind is important!
events: [ hoveredDate: NgbDate | null = null;
{ title: 'จองรถ', date: '2021-11-23' },
] 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) { handleDateClick(arg) {
alert('date click! ' + arg.dateStr) 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 { ngOnInit(): void {
setTimeout(function () {
window.dispatchEvent(new Event('resize'))
}, 1)
}
onNavChange(changeEvent: NgbNavChangeEvent) {
setTimeout(function () {
window.dispatchEvent(new Event('resize'))
},250);
} }
} }
export class NgbdCollapseBasic { export class NgbdDropdownBasic {
public isCollapsed = false;
} }
\ No newline at end of file
src/app/pages/pending/pending.component.html
<div class=" content"> <div class=" content">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-8">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<form class="form-inline"> <form class="form-inline">
...@@ -40,12 +40,27 @@ ...@@ -40,12 +40,27 @@
</div> </div>
</div> </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> </form>
</div> </div>
</div> </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>
</div>
</div> </div>
......
src/app/pages/pending/pending.component.ts
...@@ -117,3 +117,6 @@ export class PendingComponent implements OnInit { ...@@ -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