Skip to content

B
BookingMyHrManagement
Commit a9536ab5 by DESKTOP-HF0LVOG\myhr
Options

เพิ่มหน้ารออนุมัติ และหน้าอนุมัติ

parent 94df71af
Showing with 293 additions and 87 deletions
src/app/app.module.ts
......@@ -19,6 +19,8 @@ import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
import interactionPlugin from '@fullcalendar/interaction';
import { EquipmentComponent } from "./pages/equipment/equipment.component";
import { CalenRoomComponent } from './pages/calen-room/calen-room.component';
import { AdminPendingComponent } from './pages/admin-pending/admin-pending.component';
import { PendingComponent } from './pages/pending/pending.component';
FullCalendarModule.registerPlugins([ // register FullCalendar plugins
dayGridPlugin,
......@@ -37,7 +39,7 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins
ToastrModule.forRoot(),
FullCalendarModule,
],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent, AdminPendingComponent, PendingComponent],
providers: [],
bootstrap: [AppComponent]
})
......
src/app/components/sidebar/sidebar.component.ts
......@@ -23,6 +23,20 @@ export const ROUTES: RouteInfo[] = [
class: ""
},
{
path: "/pending",
title: "รายการรออนุมัติ",
rtlTitle: "",
icon: "icon-notes",
class: ""
},
{
path: "/admin-pending",
title: "การรออนุมัติ",
rtlTitle: "",
icon: "icon-bag-16",
class: ""
},
{
path: "/dashboard",
title: "Dashboard",
rtlTitle: "",
......
src/app/layouts/admin-layout/admin-layout.routing.ts
......@@ -9,11 +9,15 @@ import { TablesComponent } from "../../pages/tables/tables.component";
import { TypographyComponent } from "../../pages/typography/typography.component";
import { HomePageComponent } from "src/app/pages/home-page/home-page.component";
import { EquipmentComponent } from "src/app/pages/equipment/equipment.component";
import { AdminPendingComponent } from "src/app/pages/admin-pending/admin-pending.component";
import { PendingComponent } from "src/app/pages/pending/pending.component";
// import { RtlComponent } from "../../pages/rtl/rtl.component";
export const AdminLayoutRoutes: Routes = [
{ path: "home-page", component: HomePageComponent },
{ path: "equipment", component: EquipmentComponent },
{ path: "admin-pending", component: AdminPendingComponent },
{ path: "pending", component: PendingComponent },
{ path: "dashboard", component: DashboardComponent },
{ path: "icons", component: IconsComponent },
{ path: "maps", component: MapComponent },
......
src/app/pages/admin-pending/admin-pending.component.html 0 → 100644
<div class=" content">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Detail</th>
<th scope="col">Name</th>
<th scope="col">Start-Date</th>
<th scope="col">End-Date</th>
<th scope="col">----</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries">
<th scope="row">{{ country.id }}</th>
<td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-mm-yyyy' }}</td>
<td>{{ country.edate | date:'dd-mm-yyyy' }}</td>
<div class="d-grid gap-2 d-sm-flex justify-content-end">
<button class="btn btn-primary btn-sm align-end" type="button">ยืนยัน</button>
<button class="btn btn-primary btn-sm " type="button">ยกเลิก</button>
</div>
</tr>
</tbody>
</table>
<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>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/pages/admin-pending/admin-pending.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AdminPendingComponent } from './admin-pending.component';
describe('PendingComponent', () => {
let component: AdminPendingComponent;
let fixture: ComponentFixture<AdminPendingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AdminPendingComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AdminPendingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/admin-pending/admin-pending.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
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-admin-pending',
templateUrl: './admin-pending.component.html',
styleUrls: ['./admin-pending.component.scss']
})
export class AdminPendingComponent implements OnInit {
page = 1;
pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
constructor() {
this.refreshCountries();
}
refreshCountries() {
this.countries = COUNTRIES
.map((country, i) => ({ id: i + 1, ...country }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
ngOnInit(): void {
}
}
src/app/pages/home-page/home-page.component.html
......@@ -22,110 +22,58 @@
<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>
</div>
</div>
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
</div>
</div>
</div>
<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">
<!-- col -->
<div class="col-sm-12">
<ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab2" data-bs-toggle="pill" href="#month" role="tab"
aria-selected="true">Month Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab2" data-bs-toggle="pill" href="#revenue" role="tab"
aria-selected="false">Revenue</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab2" data-bs-toggle="pill" href="#conversion" role="tab"
aria-selected="false">Conversions</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-session-tab2" data-bs-toggle="pill" href="#session" role="tab"
aria-selected="false">Sessions</a>
</li>
</ul>
<div class="tab-content mt-4" id="pills-tabContent">
<div class="tab-pane fade show active" id="month" role="tabpanel" aria-labelledby="pills-home-tab2">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non
<br />pharetra ligula, sitametlaoreet arcu.
</p>
<div class="card">
<div class="card-body">
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
<div class="col-sm-12">
<div class="w-100">
<div class="revenue-chart"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="revenue" role="tabpanel" aria-labelledby="pills-profile-tab2">
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" class="multicollapseExample1">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non
<br />pharetra ligula, sitametlaoreet arcu.
</p>
</div>
<div class="col-sm-12">
<div class="w-100">
<div class="revenue-chart"></div>
</div>
<div class="card">
<div class="card-body">
1
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
</div>
</div>
<div class="tab-pane fade" id="conversion" role="tabpanel" aria-labelledby="pills-contact-tab2">
<div class="row">
<div class="col-sm-12 col-lg-4">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra
ligula, sitametlaoreet arcu.
</p>
<button class="waves-effect waves-light mt-3 btn btn-lg btn-info">
Last Month Summary
</button>
</div>
<div class="col-sm-12 col-lg-8 text-center border-left">
<div class="conversation-chart"></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 class="tab-pane fade" id="session" role="tabpanel" aria-labelledby="pills-session-tab2">
<div class="row">
<div class="col-sm-12 col-lg-4">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra
ligula, sitametlaoreet arcu.
</p>
<button class="waves-effect waves-light mt-3 btn btn-lg btn-info">
Last Month Summary
</button>
</div>
<div class="col-sm-12 col-lg-8 text-center border-start">
<div class="sessions-chart"></div>
</div>
</div>
</div>
......@@ -133,4 +81,6 @@
</div>
</div>
</div>
\ No newline at end of file
src/app/pages/home-page/home-page.component.ts
......@@ -7,6 +7,7 @@ import { CalendarOptions } from '@fullcalendar/angular';
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
public gfg = true;
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
......
src/app/pages/pending/pending.component.html 0 → 100644
<div class=" content">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Detail</th>
<th scope="col">Name</th>
<th scope="col">Start-Date</th>
<th scope="col">End-Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries">
<th scope="row">{{ country.id }}</th>
<td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-mm-yyyy' }}</td>
<td>{{ country.edate | date:'dd-mm-yyyy' }}</td>
</tr>
</tbody>
</table>
<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>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/pages/pending/pending.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PendingComponent } from './pending.component';
describe('PendingComponent', () => {
let component: PendingComponent;
let fixture: ComponentFixture<PendingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PendingComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PendingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/pending/pending.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
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-pending',
templateUrl: './pending.component.html',
styleUrls: ['./pending.component.scss']
})
export class PendingComponent implements OnInit {
page = 1;
pageSize = 10;
collectionSize = COUNTRIES.length;
countries: Country[];
constructor() {
this.refreshCountries();
}
refreshCountries() {
this.countries = COUNTRIES
.map((country, i) => ({ id: i + 1, ...country }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
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