Skip to content

P
portal-apps-manage
Commit 0ee17d40 by Nattana Chaiyamat
Options

เลือกบริษัท

parent 9070d968
Showing with 1848 additions and 836 deletions
src/app/portal-manage/my-portal/approved-list/approved-list.component.html
<app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'" [title1]="'อนุมัติหลักสูตร'"></app-page-header> <app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'"
[title1]="'อนุมัติหลักสูตร'"></app-page-header>
<!-- <div class="row"> <!-- <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card card-body"> <div class="card card-body">
...@@ -25,44 +26,188 @@ ...@@ -25,44 +26,188 @@
</div> </div>
</div> --> </div> -->
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid --> <ng-template #companyTemplate>
<div class="flex flex-wrap justify-center gap-6"> <div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchText'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border text-white" style="background-color: #49b6f5;">
<th class="text-center" scope="col">บริษัท</th>
<th class="text-center" scope="col">สถานะ</th>
</tr>
</thead>
<tbody *ngIf="company.loading">
<tr>
<td colspan="2" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
}
</table>
</div>
</div>
<div class="box-footer">
@if(companyFilter().length > 0){
<div class="flex items-center flex-wrap overflow-auto">
<div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div>
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{companyFilter().length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(pageCompany > 0){
<li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li>
}
@if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+
3}}</a></li>
}
<div @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;" class="page-link px-3 py-[0.375rem] cursor-pointer"
*ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize" (click)="pageCompany = pageCompany + 1">{{'Next' |
> translate}}</a>
<div class="p-8 text-center"> </li>
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner"> }
<img src="{{ c.img }}" class="" alt="" /> </ul>
</nav>
</div>
</div> </div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3> }
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div> </div>
</div>
</div>
</div>
</ng-template>
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4"> <ng-template #documentTemplate>
<div> <div class="max-w-7xl mx-auto">
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span> <div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid -->
<div class="flex flex-wrap justify-center gap-6">
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="p-8 text-center">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
<img src="{{ c.img }}" class="" alt="" />
</div> </div>
<div> <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
<button </div>
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
<div>
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div>
<button
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md
active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
(click)="openView(c.id)" (click)="openView(c.id)">
> รายละเอียด
รายละเอียด </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </ng-template>
\ No newline at end of file \ No newline at end of file
src/app/portal-manage/my-portal/approved-list/approved-list.component.ts
...@@ -7,6 +7,10 @@ import { SharedModule } from '../../../shared/shared.module'; ...@@ -7,6 +7,10 @@ import { SharedModule } from '../../../shared/shared.module';
import { CourseService } from '../../services/course.service'; import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.service'; import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.service'; import { ExcelService } from '../../services/excel.service';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { DatasourseTableService } from '../../services/datasourse-table.service';
@Component({ @Component({
selector: 'app-approved-list', selector: 'app-approved-list',
...@@ -45,9 +49,20 @@ export class ApprovedListComponent implements OnInit { ...@@ -45,9 +49,20 @@ export class ApprovedListComponent implements OnInit {
"myskill-x" "myskill-x"
] ]
} }
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchText = ''
pageCompany = 0;
pageSizeCompany = 10;
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
constructor( constructor(
private router: Router, private router: Router,
private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService,
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,
) { ) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || '' this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
} }
...@@ -86,7 +101,30 @@ export class ApprovedListComponent implements OnInit { ...@@ -86,7 +101,30 @@ export class ApprovedListComponent implements OnInit {
document: "0" document: "0"
}, },
]; ];
// this.getListCount();
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchText))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getListCount(); this.getListCount();
} }
async getListCount() { async getListCount() {
try { try {
......
src/app/portal-manage/my-portal/category-list-approve/category-list-approve.component.html
<app-page-header [title]="'รายการเอกสารรอการอนุมัติ'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสารรอการอนุมัติ'"></app-page-header> <app-page-header [title]="'รายการเอกสารรอการอนุมัติ'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'รายการเอกสารรอการอนุมัติ'"></app-page-header>
<!-- <div class="row"> <!-- <div class="row">
<div class="col-12"> <div class="col-12">
...@@ -26,43 +27,190 @@ ...@@ -26,43 +27,190 @@
</div> </div>
</div> --> </div> -->
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสารรอการอนุมัติ</h4>
<!-- Flex แทน Grid --> @if(companySelect.companyId){
<div class="flex flex-wrap justify-center gap-6"> <ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;" <ng-template #companyTemplate>
*ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize" <div class="grid grid-cols-12 gap-6">
> <div class="xl:col-span-12 col-span-12">
<div class="p-8 text-center"> <div class="box">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner"> <div class="box-header justify-between">
<img src="{{ c.img }}" class="" alt="" /> <div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchText'>
</div>
</div> </div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
</div> </div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border text-white" style="background-color: #49b6f5;">
<th class="text-center" scope="col">บริษัท</th>
<th class="text-center" scope="col">สถานะ</th>
</tr>
</thead>
<tbody *ngIf="company.loading">
<tr>
<td colspan="2" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
}
</table>
</div>
</div>
<div class="box-footer">
<!-- Footer --> @if(companyFilter().length > 0){
<div class="mt-auto"> <div class="flex items-center flex-wrap overflow-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4"> <div class="d-flex justify-content-end p-2">
<div> <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span> [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div> </div>
<div> <div class="mb-2 sm:mb-0">
<button <div>
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
(click)="openView(c.id)" </div>
> </div>
รายละเอียด <div class="ms-auto">
</button> <nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(pageCompany > 0){
<li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li>
}
@if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+
3}}</a></li>
}
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany + 1">{{'Next' |
translate}}</a>
</li>
}
</ul>
</nav>
</div> </div>
</div> </div>
}
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
</ng-template>
<ng-template #documentTemplate>
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสารรอการอนุมัติ</h4>
<!-- Flex แทน Grid -->
<div class="flex flex-wrap justify-center gap-6">
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="p-8 text-center">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
<img src="{{ c.img }}" class="" alt="" />
</div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
</div>
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
<div>
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div>
<button
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md
active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
(click)="openView(c.id)">
รายละเอียด
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
\ No newline at end of file </ng-template>
\ No newline at end of file
src/app/portal-manage/my-portal/category-list-approve/category-list-approve.component.ts
...@@ -8,6 +8,10 @@ import { SharedModule } from "../../../shared/shared.module"; ...@@ -8,6 +8,10 @@ import { SharedModule } from "../../../shared/shared.module";
import { CourseService } from "../../services/course.service"; import { CourseService } from "../../services/course.service";
import { DocumentService } from "../../services/document.service"; import { DocumentService } from "../../services/document.service";
import { ExcelService } from "../../services/excel.service"; import { ExcelService } from "../../services/excel.service";
import { TokenService } from "../../../shared/services/token.service";
import { CompanyModel } from "../../models/company.model";
import { DatasourceTableModel, MyDatasourceTableModel } from "../../models/datasource-table.model";
import { DatasourseTableService } from "../../services/datasourse-table.service";
@Component({ @Component({
selector: "app-category-list-approve", selector: "app-category-list-approve",
...@@ -46,10 +50,20 @@ export class CategoryListApproveComponent implements OnInit { ...@@ -46,10 +50,20 @@ export class CategoryListApproveComponent implements OnInit {
"myskill-x" "myskill-x"
] ]
} }
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchText = ''
pageCompany = 0;
pageSizeCompany = 10;
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
constructor( constructor(
private modalService: NgbModal, private modalService: NgbModal,
private router: Router, private router: Router,
private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService,
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,
) { ) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || '' this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
} }
...@@ -90,9 +104,32 @@ export class CategoryListApproveComponent implements OnInit { ...@@ -90,9 +104,32 @@ export class CategoryListApproveComponent implements OnInit {
document: "0" document: "0"
}, },
]; ];
// this.getListCount();
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchText))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getListCount(); this.getListCount();
} }
openView(id: string) { openView(id: string) {
if (id == '1') { if (id == '1') {
this.router.navigate(['/' + this.path.data + '/approve-excel']); this.router.navigate(['/' + this.path.data + '/approve-excel']);
......
src/app/portal-manage/my-portal/category-list/category-list.component.html
...@@ -24,7 +24,15 @@ ...@@ -24,7 +24,15 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<ng-template #name>
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<ng-template #companyTemplate>
<div class="grid grid-cols-12 gap-6"> <div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12"> <div class="xl:col-span-12 col-span-12">
<div class="box"> <div class="box">
...@@ -46,11 +54,12 @@ ...@@ -46,11 +54,12 @@
<thead> <thead>
<tr class="border-b border text-white" style="background-color: #49b6f5;"> <tr class="border-b border text-white" style="background-color: #49b6f5;">
<th class="text-center" scope="col">บริษัท</th> <th class="text-center" scope="col">บริษัท</th>
<th class="text-center" scope="col">สถานะ</th>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="company.loading"> <tbody *ngIf="company.loading">
<tr> <tr>
<td colspan="1" class="loading"> <td colspan="2" class="loading">
<div class="spinner"></div> <div class="spinner"></div>
<div class="spinner"></div> <div class="spinner"></div>
<div class="spinner"></div> <div class="spinner"></div>
...@@ -67,14 +76,18 @@ ...@@ -67,14 +76,18 @@
} }
@if(!company.loading && companyFilter().length){ @if(!company.loading && companyFilter().length){
<tbody id="tableBody"> <tbody id="tableBody">
@for (items of companyFilter() | slice: page * pageSize : (page + 1) * pageSize; track $index) { @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))" <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()" (mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}" [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)"> (click)="selectCompany(items)">
<td colspan="6" class="font-16 font-medium"> <td class="font-16 font-medium">
{{items.companyName}} {{items.companyName}}
</td> </td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr> </tr>
} }
</tbody> </tbody>
...@@ -88,7 +101,7 @@ ...@@ -88,7 +101,7 @@
<div class="flex items-center flex-wrap overflow-auto"> <div class="flex items-center flex-wrap overflow-auto">
<div class="d-flex justify-content-end p-2"> <div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto" <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSize" (ngModelChange)="page"> [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option *ngFor="let item of [10,50,100]" [ngValue]="item"> <option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}} {{"รายการต่อหน้า"}}: {{item}}
</option> </option>
...@@ -103,32 +116,37 @@ ...@@ -103,32 +116,37 @@
<div class="ms-auto"> <div class="ms-auto">
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<ul class="ti-pagination mb-0"> <ul class="ti-pagination mb-0">
@if(page > 0){ @if(pageCompany > 0){
<li class="page-item {{page==0 ? 'disabled' : ''}}"><a <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page - 1">{{'Previous' | class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a> translate}}</a>
</li> </li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="page = page - 1">{{page}}</a> (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li> </li>
} }
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">{{page <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+ +
1}}</a> 1}}</a>
</li> </li>
@if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 1">{{page + class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li> 2}}</a></li>
} }
@if((page + 2) * pageSize < companyFilter().length){ <li class="page-item"><a @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 2">{{page class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+ +
3}}</a></li> 3}}</a></li>
} }
@if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page + 1">{{'Next' | class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany + 1">{{'Next' |
translate}}</a> translate}}</a>
</li> </li>
} }
...@@ -151,9 +169,8 @@ ...@@ -151,9 +169,8 @@
</ng-template> </ng-template>
<!-- <ng-container *ngTemplateOutlet="name2"></ng-container> -->
<!-- <ng-template #name2> --> <ng-template #documentTemplate>
<div class="max-w-7xl mx-auto"> <div class="max-w-7xl mx-auto">
<div class="box p-4"> <div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4> <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
...@@ -191,4 +208,4 @@ ...@@ -191,4 +208,4 @@
</div> </div>
</div> </div>
</div> </div>
<!-- </ng-template> --> </ng-template>
\ No newline at end of file \ No newline at end of file
src/app/portal-manage/my-portal/category-list/category-list.component.ts
...@@ -12,6 +12,7 @@ import { SharedModule } from '../../../shared/shared.module'; ...@@ -12,6 +12,7 @@ import { SharedModule } from '../../../shared/shared.module';
import { DatasourseTableService } from '../../services/datasourse-table.service'; import { DatasourseTableService } from '../../services/datasourse-table.service';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model'; import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { TokenService } from '../../../shared/services/token.service'; import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
@Component({ @Component({
selector: 'app-category-list', selector: 'app-category-list',
...@@ -49,6 +50,7 @@ export class CategorylistComponent implements OnInit { ...@@ -49,6 +50,7 @@ export class CategorylistComponent implements OnInit {
tableHover: Map<string, boolean> = new Map<string, boolean>() tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>() buttonHover: Map<string, boolean> = new Map<string, boolean>()
companySelect: CompanyModel = new CompanyModel()
constructor( constructor(
private router: Router, private router: Router,
private excelService: ExcelService, private excelService: ExcelService,
...@@ -58,8 +60,11 @@ export class CategorylistComponent implements OnInit { ...@@ -58,8 +60,11 @@ export class CategorylistComponent implements OnInit {
private datasourceTable: DatasourseTableService, private datasourceTable: DatasourseTableService,
private tokenService: TokenService private tokenService: TokenService
) { ) {
this.tokenService.removeCompany()
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || '' this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
} }
pageCompany = 0;
pageSizeCompany = 10;
page = 1; page = 1;
pageSize = 10; pageSize = 10;
testdata: { testdata: {
...@@ -110,7 +115,7 @@ export class CategorylistComponent implements OnInit { ...@@ -110,7 +115,7 @@ export class CategorylistComponent implements OnInit {
// }, // },
]; ];
this.getListCount(); // this.getListCount();
this.getCompany() this.getCompany()
} }
...@@ -131,6 +136,7 @@ export class CategorylistComponent implements OnInit { ...@@ -131,6 +136,7 @@ export class CategorylistComponent implements OnInit {
} }
selectCompany(body: DatasourceTableModel) { selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any) this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getListCount(); this.getListCount();
} }
......
src/app/portal-manage/my-portal/create-category/create-category.component.html
...@@ -27,45 +27,191 @@ ...@@ -27,45 +27,191 @@
</div> --> </div> -->
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid --> <ng-template #companyTemplate>
<div class="flex flex-wrap justify-center gap-6"> <div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchText'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border text-white" style="background-color: #49b6f5;">
<th class="text-center" scope="col">บริษัท</th>
<th class="text-center" scope="col">สถานะ</th>
</tr>
</thead>
<tbody *ngIf="company.loading">
<tr>
<td colspan="2" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
}
</table>
</div>
</div>
<div class="box-footer">
<div @if(companyFilter().length > 0){
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" <div class="flex items-center flex-wrap overflow-auto">
style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"> <div class="d-flex justify-content-end p-2">
<div class="p-8 text-center"> <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner"> [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<img src="{{ c.img }}" class="" alt="" /> <option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div>
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{companyFilter().length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(pageCompany > 0){
<li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li>
}
@if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+
3}}</a></li>
}
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany + 1">{{'Next' |
translate}}</a>
</li>
}
</ul>
</nav>
</div>
</div>
}
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div> </div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
</div> </div>
</div>
</div>
</div>
</ng-template>
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4"> <ng-template #documentTemplate>
<div> <div class="max-w-7xl mx-auto">
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span> <div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid -->
<div class="flex flex-wrap justify-center gap-6">
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="p-8 text-center">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
<img src="{{ c.img }}" class="" alt="" />
</div> </div>
<div> <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
<button </div>
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
<div>
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div>
<button
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md
active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
(click)="openView(c.id)"> (click)="openView(c.id)">
รายละเอียด รายละเอียด
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </ng-template>
<!-- Add File --> <!-- Add File -->
<!-- <ng-template #editTemplateModal let-modal> <!-- <ng-template #editTemplateModal let-modal>
......
src/app/portal-manage/my-portal/create-category/create-category.component.ts
...@@ -9,6 +9,10 @@ import { CourseService } from '../../services/course.service'; ...@@ -9,6 +9,10 @@ import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.service'; import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.service'; import { ExcelService } from '../../services/excel.service';
import { WidgetService } from '../../services/widgets.service'; import { WidgetService } from '../../services/widgets.service';
import { CompanyModel } from '../../models/company.model';
import { TokenService } from '../../../shared/services/token.service';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { DatasourseTableService } from '../../services/datasourse-table.service';
...@@ -49,11 +53,22 @@ export class CreateCategoryComponent implements OnInit { ...@@ -49,11 +53,22 @@ export class CreateCategoryComponent implements OnInit {
"myskill-x" "myskill-x"
] ]
} }
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchText = ''
pageCompany = 0;
pageSizeCompany = 10;
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
constructor(private modalService: NgbModal, private router: Router, constructor(private modalService: NgbModal, private router: Router,
private excelService: ExcelService, private excelService: ExcelService,
private documentService: DocumentService, private documentService: DocumentService,
private courseService: CourseService, private courseService: CourseService,
private widgetService: WidgetService private widgetService: WidgetService,
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,
) { ) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || '' this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
} }
...@@ -106,7 +121,30 @@ export class CreateCategoryComponent implements OnInit { ...@@ -106,7 +121,30 @@ export class CreateCategoryComponent implements OnInit {
// document: "0" // document: "0"
// } // }
]; ];
// this.getListCount();
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchText))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getListCount(); this.getListCount();
} }
async getListCount() { async getListCount() {
try { try {
......
src/app/portal-manage/my-portal/excel-list/excel-list.component.html
This source diff could not be displayed because it is too large. You can view the blob instead.
src/app/portal-manage/my-portal/excel-list/excel-list.component.ts
...@@ -24,6 +24,8 @@ import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel ...@@ -24,6 +24,8 @@ import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel
import { CustomCubeService } from '../../services/custom-cube.service'; import { CustomCubeService } from '../../services/custom-cube.service';
import { DatasourseTableService } from '../../services/datasourse-table.service'; import { DatasourseTableService } from '../../services/datasourse-table.service';
import { ExcelReportService } from '../../services/excel-report.service'; import { ExcelReportService } from '../../services/excel-report.service';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
export interface ModalDetail { export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] } text: { cardHead: string, search: string[], tableHead: string[] }
} }
...@@ -170,12 +172,20 @@ export class ExcelListComponent implements OnInit { ...@@ -170,12 +172,20 @@ export class ExcelListComponent implements OnInit {
@ViewChild('modalData') modalData!: TemplateRef<any>; @ViewChild('modalData') modalData!: TemplateRef<any>;
@ViewChild('gridModal') gridModal!: TemplateRef<any>; @ViewChild('gridModal') gridModal!: TemplateRef<any>;
@ViewChild('pivotModal') pivotModal!: TemplateRef<any>; @ViewChild('pivotModal') pivotModal!: TemplateRef<any>;
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchTextCompany = ''
pageCompany = 0;
pageSizeCompany = 10;
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService, private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private modal: MatDialog, private modal: MatDialog,
private datasourceTable: DatasourseTableService) { private datasourceTable: DatasourseTableService,
private tokenService: TokenService) {
} }
ngOnInit(): void { ngOnInit(): void {
...@@ -184,6 +194,28 @@ export class ExcelListComponent implements OnInit { ...@@ -184,6 +194,28 @@ export class ExcelListComponent implements OnInit {
this.getExcelPortalList() this.getExcelPortalList()
this.getExcelPortalgGroupList() this.getExcelPortalgGroupList()
this.getExcelPortalTagsList() this.getExcelPortalTagsList()
// this.getData()
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchTextCompany))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getData() this.getData()
} }
get totalItems(): number { get totalItems(): number {
......
src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.html
<app-page-header [title]="'เปิด-ปิด การใช้รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'" <app-page-header [title]="'เปิด-ปิด การใช้รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'เปิด-ปิด การใช้รายงาน Excel'"></app-page-header> [title1]="'เปิด-ปิด การใช้รายงาน Excel'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12"> @if(companySelect.companyId){
<div class="box"> <ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
<div class="box-header justify-between"> } @else {
<div class="box-title"> <ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
รายการเอกสาร }
<ng-template #companyTemplate>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchTextCompany'>
</div>
</div>
</div> </div>
<div class="flex flex-wrap gap-4"> <div class="box-body">
<!-- Search By --> <div class="table-responsive">
<div class="d-flex flex-column" style="min-width: 200px;"> <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<label class="mb-1 font-medium text-sm">Search By</label> <thead>
<select class="form-control h-100" [(ngModel)]="searchBy"> <tr class="border-b border text-white" style="background-color: #49b6f5;">
<option style="color: red" [class.d-none]="searchBy==''" [value]="''"> <th class="text-center" scope="col">บริษัท</th>
{{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option> <th class="text-center" scope="col">สถานะ</th>
<option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option> </tr>
<option [value]="'module'">โมดูล</option> </thead>
<option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option> <tbody *ngIf="company.loading">
<option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option> <tr>
<option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option> <td colspan="2" class="loading">
<option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option> <div class="spinner"></div>
</select> <div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany +
1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
}
</table>
</div> </div>
</div>
<!-- Condition --> <div class="box-footer">
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Condition</label> @if(companyFilter().length > 0){
<select class="form-control h-100" [(ngModel)]="condition"> <div class="flex items-center flex-wrap overflow-auto">
<option style="color: red" [class.d-none]="condition==''" [value]="''"> <div class="d-flex justify-content-end p-2">
{{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option> <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
<option value="includes">คำในประโยค</option> [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option value="lt">น้อยกว่า</option> <option *ngFor="let item of [10,50,100]" [ngValue]="item">
<option value="gt">มากกว่า</option> {{"รายการต่อหน้า"}}: {{item}}
<option value="eq">เท่ากับ</option> </option>
<option value="lte">น้อยกว่าเท่ากับ</option> </select>
<option value="gte">มากกว่าเท่ากับ</option> </div>
<option value="neq">ไม่เท่ากับ</option> <div class="mb-2 sm:mb-0">
</select> <div>
{{'Showing' | translate}} {{companyFilter().length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(pageCompany > 0){
<li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
(click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li
class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li>
}
@if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li
class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+
3}}</a></li>
}
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany + 1">{{'Next' |
translate}}</a>
</li>
}
</ul>
</nav>
</div>
</div>
}
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div> </div>
<!-- Key Value --> </div>
<div class="d-flex flex-column" style="min-width: 200px;"> </div>
<label class="mb-1 font-medium text-sm">Key Value</label> </div>
<input class="form-control h-100" type="text" placeholder="ค้นหา" </div>
aria-label=".form-control-sm example" [(ngModel)]="searchValue"> </ng-template>
<ng-template #documentTemplate>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
รายการเอกสาร
</div> </div>
<div class="flex flex-wrap gap-4">
<!-- Search By -->
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Search By</label>
<select class="form-control h-100" [(ngModel)]="searchBy">
<option style="color: red" [class.d-none]="searchBy==''" [value]="''">
{{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
<option [value]="'module'">โมดูล</option>
<option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
<option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
<option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
<option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
</select>
</div>
<!-- Buttons --> <!-- Condition -->
<div class="flex items-end gap-2"> <div class="d-flex flex-column" style="min-width: 200px;">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full" <label class="mb-1 font-medium text-sm">Condition</label>
style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()"> <select class="form-control h-100" [(ngModel)]="condition">
<i class="ri-search-line font-semibold align-middle"></i>ค้นหา <option style="color: red" [class.d-none]="condition==''" [value]="''">
</a> {{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<!-- <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full" <option value="includes">คำในประโยค</option>
<option value="lt">น้อยกว่า</option>
<option value="gt">มากกว่า</option>
<option value="eq">เท่ากับ</option>
<option value="lte">น้อยกว่าเท่ากับ</option>
<option value="gte">มากกว่าเท่ากับ</option>
<option value="neq">ไม่เท่ากับ</option>
</select>
</div>
<!-- Key Value -->
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Key Value</label>
<input class="form-control h-100" type="text" placeholder="ค้นหา"
aria-label=".form-control-sm example" [(ngModel)]="searchValue">
</div>
<!-- Buttons -->
<div class="flex items-end gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()">
<i class="ri-search-line font-semibold align-middle"></i>ค้นหา
</a>
<!-- <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full"
style="margin-bottom: unset;" (click)="openAddGroupModal()"> style="margin-bottom: unset;" (click)="openAddGroupModal()">
<i class="ri-add-line font-semibold align-middle"></i>Add Group <i class="ri-add-line font-semibold align-middle"></i>Add Group
</a> --> </a> -->
</div>
</div> </div>
</div> </div>
</div>
<div class="box-body"> <div class="box-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover "> <table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
<thead class="bg-info text-white"> <thead class="bg-info text-white">
<tr> <tr>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th> <th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th> <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
<th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th> <th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
<th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th> <th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
<th class="text-center" scope="col">สร้างเมื่อ</th> <th class="text-center" scope="col">สร้างเมื่อ</th>
<th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th> <th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
<th class="text-center" scope="col">Add file</th> <th class="text-center" scope="col">Add file</th>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!template.filter.length"> <tbody *ngIf="!template.filter.length">
<tr style="background-color:#ebf2f6"> <tr style="background-color:#ebf2f6">
<td colspan="7" class="text-center">ไม่พบข้อมูล</td> <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
</tr> </tr>
</tbody> </tbody>
<tbody id="tableBody" *ngIf="isSearching || template.filter.length"> <tbody id="tableBody" *ngIf="isSearching || template.filter.length">
<tr *ngIf="isSearching"> <tr *ngIf="isSearching">
<td colspan="7" class="loading"> <td colspan="7" class="loading">
<div class="spinner"></div> <div class="spinner"></div>
<div class="spinner"></div> <div class="spinner"></div>
<div class="spinner"></div> <div class="spinner"></div>
<span>กำลังค้นหา...</span> <span>กำลังค้นหา...</span>
</td> </td>
</tr> </tr>
<ng-container *ngIf="!isSearching"> <ng-container *ngIf="!isSearching">
<ng-container <ng-container
*ngFor="let items of template.filter | slice: page * pageSize : (page+1) * pageSize ; let i = index"> *ngFor="let items of template.filter | slice: page * pageSize : (page+1) * pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))" <tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))"
(mouseleave)="tableHover.clear()" (mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}"> [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium"> <td colspan="6" class="font-16 font-medium">
{{items.tname}}<span *ngIf="items.tdesc"> {{items.tname}}<span *ngIf="items.tdesc">
-{{items.tdesc}} -{{items.tdesc}}
</span> </span>
</td> </td>
<td class="text-center"> <td class="text-center">
<ng-container *ngIf="items.templateFile.length"> <ng-container *ngIf="items.templateFile.length">
<ng-container *ngIf="!openTemplate.get(items.templateId)"> <ng-container *ngIf="!openTemplate.get(items.templateId)">
<button type="button" title="เปิด" (click)=" <button type="button" title="เปิด" (click)="
openTemplate.set(items.templateId,true)" openTemplate.set(items.templateId,true)"
(mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))" (mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"> class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
<i class="ri-arrow-right-line"></i> <i class="ri-arrow-right-line"></i>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="openTemplate.get(items.templateId)"> <ng-container *ngIf="openTemplate.get(items.templateId)">
<button type="button" title="ปิด" (click)=" <button type="button" title="ปิด" (click)="
openTemplate.set(items.templateId,false)" openTemplate.set(items.templateId,false)"
(mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))" (mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"> class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
<i class="ri-arrow-down-line"></i> <i class="ri-arrow-down-line"></i>
</button> </button>
</ng-container>
</ng-container> </ng-container>
</ng-container>
</td> </td>
</tr> </tr>
<ng-container *ngIf="openTemplate.get(items.templateId)"> <ng-container *ngIf="openTemplate.get(items.templateId)">
<ng-container <ng-container
*ngFor="let item of items.templateFile | slice: page * pageSize : (page+1) * pageSize ; let i = index"> *ngFor="let item of items.templateFile | slice: page * pageSize : (page+1) * pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))" <tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
(mouseleave)="tableHover.clear()" (mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}"> [ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
<td style="white-space: normal !important;word-break: break-word;"> <td style="white-space: normal !important;word-break: break-word;">
{{item.tdesc}} {{item.tdesc}}
</td> </td>
<td style="white-space: normal !important;word-break: break-word;"> <td style="white-space: normal !important;word-break: break-word;">
{{item.edesc}}</td> {{item.edesc}}</td>
<td class="text-center" <td class="text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
<!-- {{item.createBy.thFullName}}</td> --> <!-- {{item.createBy.thFullName}}</td> -->
<td class="text-center" <td class="text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).date}}</td> {{formatISOToLocal(item.createDate).date}}</td>
<td class="text-center" <td class="text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).time}}</td> {{formatISOToLocal(item.createDate).time}}</td>
<td class="text-center" <td class="text-center"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.module}}</td> {{item.module}}</td>
<td class="text-center"> <td class="text-center">
<i *ngIf="item.menuActive=='0'" <i *ngIf="item.menuActive=='0'"
class="fa fa-times text-danger cursor-pointer" class="fa fa-times text-danger cursor-pointer"
style="text-decoration: underline; font-size: medium;" style="text-decoration: underline; font-size: medium;"
(click)="menuActiveTemplateFile(item)"></i> (click)="menuActiveTemplateFile(item)"></i>
<i *ngIf="item.menuActive=='1'" <i *ngIf="item.menuActive=='1'"
class="fa fa-check text-success cursor-pointer" class="fa fa-check text-success cursor-pointer"
style="text-decoration: underline; font-size: medium;" style="text-decoration: underline; font-size: medium;"
(click)="menuActiveTemplateFile(item)"></i> (click)="menuActiveTemplateFile(item)"></i>
&nbsp; &nbsp;
<a aria-label="anchor" title="Print" <a aria-label="anchor" title="Print"
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))" (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning cursor-pointer" class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning cursor-pointer"
(click)="openPrintModal(item);"> (click)="openPrintModal(item);">
<i class="ri-printer-line"></i></a> <i class="ri-printer-line"></i></a>
</td> </td>
</tr> </tr>
</ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </tbody>
</tbody> </table>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
<div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSize" (ngModelChange)="page">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div> </div>
<div class="mb-2 sm:mb-0"> </div>
<div> <div class="box-footer">
{{'Showing' | translate}} {{template.filter.length}} {{'entries' <div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i> <div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSize" (ngModelChange)="page">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div>
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{template.filter.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="page > 0" class="page-item {{page==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="page = page - 1; updatePagedItems()">{{'Previous' | translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);" *ngIf="page > 0"
(click)="page = page - 1; updatePagedItems()">{{page}}</a>
</li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{page + 1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
*ngIf="(page + 1) * pageSize < template.filter.length"
(click)="page = page + 1; updatePagedItems()">{{page + 2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
*ngIf="(page + 2) * pageSize < template.filter.length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < template.filter.length" class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="page = page + 1; updatePagedItems()">{{'Next' | translate}}</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
<div class="ms-auto"> <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<nav aria-label="Page navigation"> <div><i class="fa fa-times text-danger"></i> = used on menu</div>
<ul class="ti-pagination mb-0"> <div><i class="fa fa-check text-success"></i> = unused on menu</div>
<li *ngIf="page > 0" class="page-item {{page==0 ? 'disabled' : ''}}"><a <!-- <div><i class="ri-file-download-line text-info"></i> = download files</div> -->
class="page-link px-3 py-[0.375rem] cursor-pointer" <div><i class="ri-printer-line text-warning"></i> = print report</div>
(click)="page = page - 1; updatePagedItems()">{{'Previous' | translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="page > 0" (click)="page = page - 1; updatePagedItems()">{{page}}</a>
</li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{page + 1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(page + 1) * pageSize < template.filter.length"
(click)="page = page + 1; updatePagedItems()">{{page + 2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(page + 2) * pageSize < template.filter.length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < template.filter.length" class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="page = page + 1; updatePagedItems()">{{'Next' | translate}}</a>
</li>
</ul>
</nav>
</div> </div>
</div>
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<!-- <div><i class="ri-file-download-line text-info"></i> = download files</div> -->
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<ng-template #printModal let-modal> <ng-template #printModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content"> <div class="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5"> <div class="ti-modal-header flex justify-between items-center p-5">
<h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel"> <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
Excel Report Excel Report
</h6> </h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalprintModal()" #closeModal> (click)="closeModalprintModal()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span> <span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i> <i class="ri-close-line"></i>
</button> </button>
</div> </div>
<div class="ti-modal-body px-4 mt-3" style="min-height: 9.5rem;"> <div class="ti-modal-body px-4 mt-3" style="min-height: 9.5rem;">
<div class="row"> <div class="row">
<div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel"> <div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status"> <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div>
</div> </div>
</div> <ng-container *ngIf="!loading&&!loadingExcel">
<ng-container *ngIf="!loading&&!loadingExcel"> <ng-container *ngFor="let item of variableSheet; let i=index">
<ng-container *ngFor="let item of variableSheet; let i=index"> <div class="flex items-center mb-4">
<div class="flex items-center mb-4"> <!-- Label -->
<!-- Label --> <label class="w-1/4 text-right pr-4 font-semibold text-sm">
<label class="w-1/4 text-right pr-4 font-semibold text-sm"> {{ item.label }}
{{ item.label }} </label>
</label>
<!-- Input -->
<!-- Input --> <div class="w-3/4">
<div class="w-3/4"> <ng-container [ngSwitch]="item.type">
<ng-container [ngSwitch]="item.type">
<!-- Text -->
<!-- Text --> <input *ngSwitchCase="'text'" type="text" class="form-input w-full"
<input *ngSwitchCase="'text'" type="text" class="form-input w-full" [(ngModel)]="item.value" />
[(ngModel)]="item.value" />
<!-- List -->
<!-- List --> <select *ngSwitchCase="'list'" class="form-select w-full"
<select *ngSwitchCase="'list'" class="form-select w-full" [(ngModel)]="item.value">
[(ngModel)]="item.value"> <option *ngFor="let list of item.option" [value]="list.value">
<option *ngFor="let list of item.option" [value]="list.value"> {{ list.text }}
{{ list.text }} </option>
</option> </select>
</select>
<!-- Radio -->
<!-- Radio --> <div *ngSwitchCase="'radio'" class="flex flex-wrap gap-4">
<div *ngSwitchCase="'radio'" class="flex flex-wrap gap-4"> <label *ngFor="let radioItem of item.option"
<label *ngFor="let radioItem of item.option" class="inline-flex items-center">
class="inline-flex items-center"> <input type="radio" class="form-radio mr-2"
<input type="radio" class="form-radio mr-2" [name]="'group-' + item.label"
[name]="'group-' + item.label" [id]="radioItem.text+radioItem.value" [id]="radioItem.text+radioItem.value" [value]="radioItem.value"
[value]="radioItem.value" [(ngModel)]="item.value" /> [(ngModel)]="item.value" />
{{ radioItem.text }} {{ radioItem.text }}
</label> </label>
</div> </div>
<!-- Help --> <!-- Help -->
<div *ngSwitchCase="'help'" class="flex items-stretch"> <div *ngSwitchCase="'help'" class="flex items-stretch">
<input type="text" readonly class="form-input w-1/2 bg-white cursor-pointer" <input type="text" readonly
[value]="item.value.tdesc" (click)="openModalData(item)" /> class="form-input w-1/2 bg-white cursor-pointer"
[value]="item.value.tdesc" (click)="openModalData(item)" />
<button
class="bg-primary hover:bg-primary text-white px-3 flex items-center justify-center rounded-none border" <button
type="button" (click)="openModalData(item)"> class="bg-primary hover:bg-primary text-white px-3 flex items-center justify-center rounded-none border"
<i class="ri-search-line font-semibold align-middle"></i> type="button" (click)="openModalData(item)">
</button> <i class="ri-search-line font-semibold align-middle"></i>
</button>
<button type="button"
class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full" <button type="button"
(click)="item.value={id:'',tdesc:'',edesc:''}"> class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
<i class="fa fa-times text-xs"></i> (click)="item.value={id:'',tdesc:'',edesc:''}">
</button> <i class="fa fa-times text-xs"></i>
</button>
</div>
</div>
<!-- Calendar -->
<div *ngSwitchCase="'calendar'" class="flex items-stretch"> <!-- Calendar -->
<!-- Input --> <div *ngSwitchCase="'calendar'" class="flex items-stretch">
<input class="form-input w-1/2 bg-white cursor-pointer rounded-r-none" <!-- Input -->
style="border-color: #e9edf6;" placeholder="dd.mm.yyyy" name="dp1" <input class="form-input w-1/2 bg-white cursor-pointer rounded-r-none"
ngbDatepicker #d1="ngbDatepicker" [(ngModel)]="select[item.key]" style="border-color: #e9edf6;" placeholder="dd.mm.yyyy" name="dp1"
readonly (click)="d1.toggle()" ngbDatepicker #d1="ngbDatepicker" [(ngModel)]="select[item.key]"
(ngModelChange)="formatNgbDate(item.key, select[item.key])" readonly (click)="d1.toggle()"
#c1="ngModel" (change)="validateDate(c1)" container="body"> (ngModelChange)="formatNgbDate(item.key, select[item.key])"
#c1="ngModel" (change)="validateDate(c1)" container="body">
<!-- Calendar Button -->
<button type="button" <!-- Calendar Button -->
class="bg-white hover:bg-primary text-primary hover:text-white px-3 flex items-center justify-center rounded-none border" <button type="button"
style="border-color: #154c9c;" (click)="d1.toggle()"> class="bg-white hover:bg-primary text-primary hover:text-white px-3 flex items-center justify-center rounded-none border"
<i class="ri-calendar-2-line"></i> style="border-color: #154c9c;" (click)="d1.toggle()">
</button> <i class="ri-calendar-2-line"></i>
</button>
<!-- Clear Button -->
<button type="button" <!-- Clear Button -->
class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full" <button type="button"
(click)="select[item.key]=null ;formatNgbDate(item.key)"> class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
<i class="fa fa-times text-xs"></i> (click)="select[item.key]=null ;formatNgbDate(item.key)">
</button> <i class="fa fa-times text-xs"></i>
</div> </button>
</div>
</ng-container> </ng-container>
</div>
</div> </div>
</div> </ng-container>
</ng-container>
<!-- <div *ngIf="variableSheet.length&&!loadingExcel" <!-- <div *ngIf="variableSheet.length&&!loadingExcel"
class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;"> class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;">
<button type="submit" class="btn btn-info waves-effect waves-light btn-w-100" <button type="submit" class="btn btn-info waves-effect waves-light btn-w-100"
(click)="dowloadExcelReport()"> (click)="dowloadExcelReport()">
...@@ -350,253 +506,263 @@ ...@@ -350,253 +506,263 @@
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</div> --> </div> -->
<div *ngIf="!variableSheet.length" <div *ngIf="!variableSheet.length"
class="col-12 justify-content-center align-content-center d-flex" class="col-12 justify-content-center align-content-center d-flex"
style="margin-bottom: 1rem;margin-top: 1rem;"> style="margin-bottom: 1rem;margin-top: 1rem;">
<div <div
class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14"> class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
{{'No Data Found' }} {{'No Data Found' }}
</div>
</div> </div>
</div> <div class="row col-12 flex justify-center"
<div class="row col-12 flex justify-center" *ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"> <div class="col-12 d-flex justify-content-center align-content-center">
<div class="col-12 d-flex justify-content-center align-content-center"> <button type="button" *ngIf="excelReport.isDataGrid=='1'"
<button type="button" *ngIf="excelReport.isDataGrid=='1'" class="ti-btn ti-btn-primary-full"
class="ti-btn ti-btn-primary-full" (click)="getExcelData('grid')">Datagrid</button> (click)="getExcelData('grid')">Datagrid</button>
<ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'"> <ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
&nbsp; &nbsp;
</ng-container> </ng-container>
<button type="button" *ngIf="excelReport.isPivot=='1'" <button type="button" *ngIf="excelReport.isPivot=='1'"
class="ti-btn ti-btn-primary-full" (click)="getExcelData('pivot')">Pivot</button> class="ti-btn ti-btn-primary-full"
(click)="getExcelData('pivot')">Pivot</button>
</div>
</div> </div>
</div> </ng-container>
</ng-container> </div>
</div> </div>
</div>
<div class="border-t mt-3"> <div class="border-t mt-3">
<div class="ti-modal-footer flex justify-end gap-1 mb-3 mt-3 mr-3"> <div class="ti-modal-footer flex justify-end gap-1 mb-3 mt-3 mr-3">
<ng-container *ngIf="variableSheet.length"> <ng-container *ngIf="variableSheet.length">
<button type="submit" class="ti-btn ti-btn-info-full waves-effect waves-light btn-w-100" <button type="submit" class="ti-btn ti-btn-info-full waves-effect waves-light btn-w-100"
[disabled]="loadingExcel" (click)="dowloadExcelReport()"> [disabled]="loadingExcel" (click)="dowloadExcelReport()">
{{"Print" }} {{"Print" }}
</button>
</ng-container>
<button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModalprintModal()">
ปิด
</button> </button>
</ng-container> </div>
<button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModalprintModal()">
ปิด
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template>
<ng-template #modalData let-modal>
<ng-template #modalData let-modal> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out"> <div class="ti-modal-content">
<div class="ti-modal-content"> <div class="ti-modal-header flex justify-between items-center p-5">
<div class="ti-modal-header flex justify-between items-center p-5"> <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
<h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel"> {{modalDetail.text.cardHead }}
{{modalDetail.text.cardHead }} </h6>
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" (click)="closeModalmodalData()" #closeModal>
(click)="closeModalmodalData()" #closeModal> <span class="sr-only">{{'Close' | translate}}</span>
<span class="sr-only">{{'Close' | translate}}</span> <i class="ri-close-line"></i>
<i class="ri-close-line"></i> </button>
</button>
</div>
<div class="ti-modal-body px-4 mt-3">
<div class="d-flex mb-1">
<input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
</div> </div>
<div class="table-responsive"> <div class="ti-modal-body px-4 mt-3">
<table class="table table-hover table-striped-myhr table-sm mb-0 no-wrap v-middle " <div class="d-flex mb-1">
style="width: 100%"> <input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
<thead class="bg-info "> class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
<tr class="text-white font-weight-normal"> </div>
<th class="font-weight-normal text-center" scope="col" <div class="table-responsive">
*ngFor="let item of modalDetail.text.tableHead"> <table class="table table-hover table-striped-myhr table-sm mb-0 no-wrap v-middle "
{{item}} style="width: 100%">
</th> <thead class="bg-info ">
</tr> <tr class="text-white font-weight-normal">
</thead> <th class="font-weight-normal text-center" scope="col"
<tbody *ngIf="!valueDetailFilter().length"> *ngFor="let item of modalDetail.text.tableHead">
<tr> {{item}}
<td colspan="9" class="font-weight-normal text-center"> </th>
{{"No Data Found" }} </tr>
</td> </thead>
</tr> <tbody *ngIf="!valueDetailFilter().length">
</tbody> <tr>
<tbody *ngIf="valueDetailFilter().length"> <td colspan="9" class="font-weight-normal text-center">
<tr class="cursor-pointer" {{"No Data Found" }}
*ngFor="let item of valueDetailFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * pageSizeModal; let i=index" </td>
(click)="selectData(item);closeModalmodalData()" </tr>
(mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))" </tbody>
(mouseleave)="tableHover.clear()" <tbody *ngIf="valueDetailFilter().length">
[ngStyle]="{'background-color':tableHover.get(item.id)?'rgb(201 223 235)':'#ffffff'}"> <tr class="cursor-pointer"
<td class="align-middle text-center"> *ngFor="let item of valueDetailFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * pageSizeModal; let i=index"
{{item.id}} (click)="selectData(item);closeModalmodalData()"
</td> (mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))"
<td class="align-middle text-center"> (mouseleave)="tableHover.clear()"
{{item.tdesc}} [ngStyle]="{'background-color':tableHover.get(item.id)?'rgb(201 223 235)':'#ffffff'}">
</td> <td class="align-middle text-center">
<td class="align-middle text-center"> {{item.id}}
{{item.edesc}} </td>
</td> <td class="align-middle text-center">
</tr> {{item.tdesc}}
</tbody> </td>
</table> <td class="align-middle text-center">
{{item.edesc}}
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div>
<div class="box-footer !border-t-0"> <div class="box-footer !border-t-0">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="valueDetailFilter().length > 0"> <div class="flex items-center flex-wrap overflow-auto" *ngIf="valueDetailFilter().length > 0">
<div class="d-flex justify-content-end p-2"> <div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto" <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSizeModal" (ngModelChange)="pageModal=1"> [(ngModel)]="pageSizeModal" (ngModelChange)="pageModal=1">
<option *ngFor="let item of [10,50,100]" [ngValue]="item"> <option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}} {{"รายการต่อหน้า"}}: {{item}}
</option> </option>
</select> </select>
</div> </div>
<div class="mb-2 sm:mb-0"> <div class="mb-2 sm:mb-0">
<div> <div>
{{'Showing' | translate}} {{valueDetailFilter().length}} {{'entries' {{'Showing' | translate}} {{valueDetailFilter().length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i> | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageModal>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageModal = pageModal-1;updatePagedItems()">{{'Previous' |
translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);" *ngIf="pageModal-1>0"
(click)="pageModal = pageModal-2;updatePagedItems()">{{pageModal-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
*ngIf="pageModal>0 && ((pageModal-1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length))"
(click)="pageModal = pageModal-1;updatePagedItems()">{{pageModal}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageModal +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
*ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(click)="pageModal = pageModal+1;updatePagedItems()">{{pageModal +2}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]"
href="javascript:void(0);"
*ngIf="(pageModal+2)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(click)="pageModal = pageModal+2;updatePagedItems()">{{pageModal +3}}</a>
</li>
<li *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageModal = pageModal+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div> </div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageModal>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageModal = pageModal-1;updatePagedItems()">{{'Previous' |
translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageModal-1>0"
(click)="pageModal = pageModal-2;updatePagedItems()">{{pageModal-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageModal>0 && ((pageModal-1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length))"
(click)="pageModal = pageModal-1;updatePagedItems()">{{pageModal}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageModal +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(click)="pageModal = pageModal+1;updatePagedItems()">{{pageModal +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageModal+2)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(click)="pageModal = pageModal+2;updatePagedItems()">{{pageModal +3}}</a></li>
<li *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageModal = pageModal+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div>
<div class="border-t"> <div class="border-t">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3"> <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button type="button" class="ti-btn bg-danger text-white !font-medium" <button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModalmodalData()"> (click)="closeModalmodalData()">
ปิด ปิด
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template>
<ng-template #gridModal let-modal> <ng-template #gridModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content"> <div class="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5"> <div class="ti-modal-header flex justify-between items-center p-5">
<h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel"> <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
GridData GridData
</h6> </h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalgridModal()" #closeModal> (click)="closeModalgridModal()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span> <span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i> <i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4 mt-3">
<app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
[gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
</app-datagrid-syncfution>
</div>
<div class="border-t">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
(click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
{{"Save Perspective"}}
</button> </button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;"> </div>
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status"> <div class="ti-modal-body px-4 mt-3">
<span class="sr-only">Loading...</span> <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList"
[columns]="columns" [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate"
(layout)="gridLayout.data=$event">
</app-datagrid-syncfution>
</div>
<div class="border-t">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
(click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div> </div>
<button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
(click)="closeModalgridModal()">
ปิด
</button>
</div> </div>
<button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
(click)="closeModalgridModal()">
ปิด
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template>
<ng-template #pivotModal let-modal>
<ng-template #pivotModal let-modal> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out"> <div class="ti-modal-content">
<div class="ti-modal-content"> <div class="ti-modal-header flex justify-between items-center p-5">
<div class="ti-modal-header flex justify-between items-center p-5"> <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
<h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel"> Pivot
Pivot </h6>
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" (click)="closeModalpivotModal()" #closeModal>
(click)="closeModalpivotModal()" #closeModal> <span class="sr-only">{{'Close' | translate}}</span>
<span class="sr-only">{{'Close' | translate}}</span> <i class="ri-close-line"></i>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4 mt-3">
<app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns"
[templateId]="excelReport.templateId" [fileName]="excelReport.fileName"
[pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
(layout)="pivotLayout.data=$event">
</app-pivot-syncfution>
</div>
<div class="border-t mt-3">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button> </button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;"> </div>
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status"> <div class="ti-modal-body px-4 mt-3">
<span class="sr-only">Loading...</span> <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns"
[templateId]="excelReport.templateId" [fileName]="excelReport.fileName"
[pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
(layout)="pivotLayout.data=$event">
</app-pivot-syncfution>
</div>
<div class="border-t mt-3">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div> </div>
<button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
(click)="closeModalpivotModal()">
ปิด
</button>
</div> </div>
<button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
(click)="closeModalpivotModal()">
ปิด
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> </ng-template>
\ No newline at end of file
src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.ts
...@@ -19,6 +19,10 @@ import { ModuleModel } from '../../models/module.model'; ...@@ -19,6 +19,10 @@ import { ModuleModel } from '../../models/module.model';
import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model'; import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
import { CustomCubeService } from '../../services/custom-cube.service'; import { CustomCubeService } from '../../services/custom-cube.service';
import { ExcelReportService } from '../../services/excel-report.service'; import { ExcelReportService } from '../../services/excel-report.service';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { DatasourseTableService } from '../../services/datasourse-table.service';
export interface ModalDetail { export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] } text: { cardHead: string, search: string[], tableHead: string[] }
} }
...@@ -140,15 +144,47 @@ export class ExcelReportToggleComponent implements OnInit { ...@@ -140,15 +144,47 @@ export class ExcelReportToggleComponent implements OnInit {
@ViewChild('modalData') modalData!: TemplateRef<any>; @ViewChild('modalData') modalData!: TemplateRef<any>;
@ViewChild('gridModal') gridModal!: TemplateRef<any>; @ViewChild('gridModal') gridModal!: TemplateRef<any>;
@ViewChild('pivotModal') pivotModal!: TemplateRef<any>; @ViewChild('pivotModal') pivotModal!: TemplateRef<any>;
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchTextCompany = ''
pageCompany = 0;
pageSizeCompany = 10;
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService, private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private modal: MatDialog) { private modal: MatDialog,
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,) {
} }
ngOnInit(): void { ngOnInit(): void {
// this.getExcelList()
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchTextCompany))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getExcelList() this.getExcelList()
} }
get totalItems(): number { get totalItems(): number {
return this.searchText == '' return this.searchText == ''
......
src/app/portal-manage/my-portal/excel-report/excel-report.component.html
<app-page-header [title]="'รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายงาน Excel'"></app-page-header> <app-page-header [title]="'รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายงาน Excel'"></app-page-header>
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div class="box">
<div class="relative w-full max-w-4xl mx-auto my-8 font-sans">
<button (click)="toggleDropdown()"
class="w-full bg-white bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 ease-in-out flex items-center justify-between">
<span class="text-xl sm:text-2xl text-primary">
{{ selectedTemplate ? selectedTemplate.tdesc + ' (' + selectedTemplate.fileName + ')' : 'รายงาน Excel' }}
</span>
<svg class="w-6 h-6 transform transition-transform duration-300 text-primary" [class.rotate-180]="isDropdownOpen"
fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div *ngIf="isDropdownOpen"
class="absolute z-10 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden max-h-60 overflow-y-auto">
<ul class="py-1">
<li *ngFor="let template of excelReportTemplates" (click)="selectTemplate(template)"
class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-800 text-lg">
{{ template.tdesc }} ({{ template.fileName }}) </li>
<li *ngIf="excelReportTemplates.length === 0 && !loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
ไม่พบรายการ Template
</li>
<li *ngIf="loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
กำลังโหลด...
</li>
</ul>
</div>
</div>
<div *ngIf="selectedTemplate && excelReport" <ng-template #companyTemplate>
class="p-6 bg-gray-100 rounded-b-xl shadow-inner transition-all duration-300 ease-in-out" <div class="grid grid-cols-12 gap-6">
[class.max-h-0]="!selectedTemplate" [class.max-h-screen]="selectedTemplate"> <div class="xl:col-span-12 col-span-12">
<div class="pt-6 border-t border-gray-200 bg-white p-3 rounded-xl"> <div class="box">
<h2 class="text-2xl font-bold text-gray-800 mb-4">รายงาน Excel: {{ selectedTemplate.tdesc }}</h2> <div class="box-header justify-between">
<p class="mb-4 text-gray-700">ชื่อไฟล์: {{ selectedTemplate.fileName }}</p> <div class="box-title">
<!-- <p class="mb-4 text-gray-700">รหัส Template: {{ selectedTemplate.templateId }}</p> --> {{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
<div *ngIf="variableSheet.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end mb-4 mt-4"> </div>
<ng-container *ngFor="let sheetVar of variableSheet"> <div class="flex flex-wrap gap-2">
<div [ngSwitch]="sheetVar.type"> <div>
<label [for]="sheetVar.key" class="block text-gray-700 text-sm font-medium mb-1">{{ sheetVar.label <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
}}</label> aria-label=".form-control-sm example" [(ngModel)]='searchText'>
<ng-container *ngSwitchCase="'text'"> </div>
<input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value" [placeholder]="sheetVar.tname" </div>
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" /> </div>
</ng-container> <div class="box-body">
<ng-container *ngSwitchCase="'calendar'"> <div class="table-responsive">
<input type="date" [id]="sheetVar.key" [(ngModel)]="sheetVar.displayValue" <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
(ngModelChange)="formatNgbDate(sheetVar.key, $event)" <thead>
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" /> <tr class="border-b border text-white" style="background-color: #49b6f5;">
</ng-container> <th class="text-center" scope="col">บริษัท</th>
<ng-container *ngSwitchCase="'list'"> <th class="text-center" scope="col">สถานะ</th>
<select [id]="sheetVar.key" [(ngModel)]="sheetVar.value" </tr>
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> </thead>
<option *ngFor="let opt of sheetVar.option" [value]="opt.value">{{ opt.text }}</option> <tbody *ngIf="company.loading">
<tr>
<td colspan="2" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
pageSizeCompany; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
}
</table>
</div>
</div>
<div class="box-footer">
@if(companyFilter().length > 0){
<div class="flex items-center flex-wrap overflow-auto">
<div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select> </select>
</ng-container> </div>
<ng-container *ngSwitchCase="'radio'"> <div class="mb-2 sm:mb-0">
<div class="flex flex-wrap gap-4 mt-1"> <div>
<label *ngFor="let opt of sheetVar.option" class="inline-flex items-center"> {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
<input type="radio" [name]="sheetVar.key" [value]="opt.value" [(ngModel)]="sheetVar.value" | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
class="form-radio text-blue-600" />
<span class="ml-2 text-gray-700">{{ opt.text }}</span>
</label>
</div>
</ng-container>
<ng-container *ngSwitchCase="'help'">
<div class="relative">
<input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value.tdesc"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<button type="button" (click)="selectData(sheetVar.key)"
class="p-1 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<svg class="h-5 w-5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"
(click)="openModal(sheetVar, detailModal); $event.stopPropagation();"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div> </div>
</ng-container> </div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(pageCompany > 0){
<li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 1">{{pageCompany +
2}}</a></li>
}
@if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageCompany = pageCompany + 2">{{pageCompany
+
3}}</a></li>
}
@if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageCompany = pageCompany + 1">{{'Next' |
translate}}</a>
</li>
}
</ul>
</nav>
</div>
</div> </div>
</ng-container> }
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div>
</div> </div>
</div>
</div>
</ng-template>
<ng-template #documentTemplate>
<div class="box">
<div class="relative w-full max-w-4xl mx-auto my-8 font-sans">
<button (click)="toggleDropdown()"
class="w-full bg-white bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 ease-in-out flex items-center justify-between">
<span class="text-xl sm:text-2xl text-primary">
{{ selectedTemplate ? selectedTemplate.tdesc + ' (' + selectedTemplate.fileName + ')' : 'รายงาน Excel' }}
</span>
<svg class="w-6 h-6 transform transition-transform duration-300 text-primary"
[class.rotate-180]="isDropdownOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div *ngIf="isDropdownOpen"
class="absolute z-10 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden max-h-60 overflow-y-auto">
<ul class="py-1">
<li *ngFor="let template of excelReportTemplates" (click)="selectTemplate(template)"
class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-800 text-lg">
{{ template.tdesc }} ({{ template.fileName }}) </li>
<li *ngIf="excelReportTemplates.length === 0 && !loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
ไม่พบรายการ Template
</li>
<li *ngIf="loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
กำลังโหลด...
</li>
</ul>
</div>
</div>
<div class="flex justify-end gap-3 mt-6"> <div *ngIf="selectedTemplate && excelReport"
<!-- <button (click)="dowloadExcelReport()" class="p-6 bg-gray-100 rounded-b-xl shadow-inner transition-all duration-300 ease-in-out"
[class.max-h-0]="!selectedTemplate" [class.max-h-screen]="selectedTemplate">
<div class="pt-6 border-t border-gray-200 bg-white p-3 rounded-xl">
<h2 class="text-2xl font-bold text-gray-800 mb-4">รายงาน Excel: {{ selectedTemplate.tdesc }}</h2>
<p class="mb-4 text-gray-700">ชื่อไฟล์: {{ selectedTemplate.fileName }}</p>
<!-- <p class="mb-4 text-gray-700">รหัส Template: {{ selectedTemplate.templateId }}</p> -->
<div *ngIf="variableSheet.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end mb-4 mt-4">
<ng-container *ngFor="let sheetVar of variableSheet">
<div [ngSwitch]="sheetVar.type">
<label [for]="sheetVar.key" class="block text-gray-700 text-sm font-medium mb-1">{{ sheetVar.label
}}</label>
<ng-container *ngSwitchCase="'text'">
<input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value" [placeholder]="sheetVar.tname"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
</ng-container>
<ng-container *ngSwitchCase="'calendar'">
<input type="date" [id]="sheetVar.key" [(ngModel)]="sheetVar.displayValue"
(ngModelChange)="formatNgbDate(sheetVar.key, $event)"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
</ng-container>
<ng-container *ngSwitchCase="'list'">
<select [id]="sheetVar.key" [(ngModel)]="sheetVar.value"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<option *ngFor="let opt of sheetVar.option" [value]="opt.value">{{ opt.text }}</option>
</select>
</ng-container>
<ng-container *ngSwitchCase="'radio'">
<div class="flex flex-wrap gap-4 mt-1">
<label *ngFor="let opt of sheetVar.option" class="inline-flex items-center">
<input type="radio" [name]="sheetVar.key" [value]="opt.value" [(ngModel)]="sheetVar.value"
class="form-radio text-blue-600" />
<span class="ml-2 text-gray-700">{{ opt.text }}</span>
</label>
</div>
</ng-container>
<ng-container *ngSwitchCase="'help'">
<div class="relative">
<input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value.tdesc"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<button type="button" (click)="selectData(sheetVar.key)"
class="p-1 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<svg class="h-5 w-5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"
(click)="openModal(sheetVar, detailModal); $event.stopPropagation();"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
<div class="flex justify-end gap-3 mt-6">
<!-- <button (click)="dowloadExcelReport()"
class="bg-primary py-3 px-6 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105"> class="bg-primary py-3 px-6 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105">
Download Excel Download Excel
</button> --> </button> -->
<button (click)="printExcelReport()" <button (click)="printExcelReport()"
class="bg-primary py-3 px-6 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105"> class="bg-primary py-3 px-6 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105">
Print Excel Print Excel
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<ng-template #detailModal>
<ng-template #detailModal> <h2 mat-dialog-title clas>
<h2 mat-dialog-title clas> <div class="text-primary">รายชื่อพนักงาน</div>
<div class="text-primary">รายชื่อพนักงาน</div> </h2>
</h2> <mat-dialog-content>
<mat-dialog-content> <div class="box">
<div class="box"> <div class="box-header justify-between">
<div class="box-header justify-between"> <div class="box-title">
<div class="box-title"> รายการทั้งหมด
รายการทั้งหมด </div>
</div> <div class="flex flex-wrap gap-2">
<div class="flex flex-wrap gap-2"> <div>
<div> <input class="form-control form-control" type="text" placeholder="Search..."
<input class="form-control form-control" type="text" placeholder="Search..." aria-label=".form-control-sm example" [(ngModel)]="searchModal"
aria-label=".form-control-sm example" [(ngModel)]="searchModal" (ngModelChange)="updateModalPagedItems()"> (ngModelChange)="updateModalPagedItems()">
</div>
</div> </div>
</div> </div>
</div> <div class="box-body">
<div class="box-body"> <div class="table-responsive">
<div class="table-responsive"> <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover"> <thead>
<thead> <tr class="border-b border-defaultborder bg-primary">
<tr class="border-b border-defaultborder bg-primary"> <th scope="col" *ngFor="let head of modalDetail.text.tableHead" class="text-start text-white">{{ head
<th scope="col" *ngFor="let head of modalDetail.text.tableHead" class="text-start text-white">{{ head }} }}
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@if (modalFilterList.length > 0) { @if (modalFilterList.length > 0) {
@for (item of modalFilterList; track item.id) { @for (item of modalFilterList; track item.id) {
<tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer hover:bg-gray-100" <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer hover:bg-gray-100"
(click)="selectData(item)"> (click)="selectData(item)">
<td>{{ item.id }}</td> <td>{{ item.id }}</td>
<td>{{ item.tdesc }}</td> <td>{{ item.tdesc }}</td>
<td>{{ item.edesc }}</td> <td>{{ item.edesc }}</td>
</tr> </tr>
} }
} @else { } @else {
<tr> <tr>
<td [attr.colspan]="modalDetail.text.tableHead.length" class="text-center py-4 text-gray-500"> <td [attr.colspan]="modalDetail.text.tableHead.length" class="text-center py-4 text-gray-500">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
} }
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> <!-- <input type="text" [(ngModel)]="searchModal" placeholder="Search..."
<!-- <input type="text" [(ngModel)]="searchModal" placeholder="Search..."
(ngModelChange)="updateModalPagedItems()" (ngModelChange)="updateModalPagedItems()"
class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4" /> --> class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4" /> -->
<!-- <div class="box-body"> <!-- <div class="box-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover"> <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead> <thead>
...@@ -184,44 +332,47 @@ ...@@ -184,44 +332,47 @@
</div> </div>
</div> --> </div> -->
<div class="box-footer"> <div class="box-footer">
<div class="mb-2 sm:mb-0"> <div class="mb-2 sm:mb-0">
<div> <div>
{{'Showing' | translate}} {{ (modalPageIndex * modalPageSize) + 1 }} {{'to' | translate}} {{ {{'Showing' | translate}} {{ (modalPageIndex * modalPageSize) + 1 }} {{'to' | translate}} {{
Math.min((modalPageIndex + 1) * modalPageSize, totalModalItemsCount) }} {{'of' | translate}} {{ Math.min((modalPageIndex + 1) * modalPageSize, totalModalItemsCount) }} {{'of' | translate}} {{
totalModalItemsCount }} {{'entries' | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i> totalModalItemsCount }} {{'entries' | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div> </div>
</div> <div class="flex items-center flex-wrap overflow-auto mt-3" *ngIf="totalModalItemsCount > 0">
<div class="flex items-center flex-wrap overflow-auto mt-3" *ngIf="totalModalItemsCount > 0"> <div class="ms-auto">
<div class="ms-auto"> <nav aria-label="Page navigation">
<nav aria-label="Page navigation"> <ul class="ti-pagination mb-0">
<ul class="ti-pagination mb-0"> <li class="page-item" [class.disabled]="modalPageIndex === 0">
<li class="page-item" [class.disabled]="modalPageIndex === 0"> <a class="page-link px-3 py-[0.375rem] cursor-pointer"
<a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(modalPageIndex - 1)">{{'Previous' | translate}}</a>
(click)="onModalPageChange(modalPageIndex - 1)">{{'Previous' | translate}}</a> </li>
</li>
@for (pageNumber of totalPagesArrayInModal; track pageNumber) {
@for (pageNumber of totalPagesArrayInModal; track pageNumber) { <li class="page-item" [class.active]="modalPageIndex === (pageNumber - 1)">
<li class="page-item" [class.active]="modalPageIndex === (pageNumber - 1)"> <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(pageNumber - 1)">
<a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(pageNumber - 1)"> {{ pageNumber }}
{{ pageNumber }} </a>
</a> </li>
</li> }
}
<li class="page-item" [class.disabled]="modalPageIndex === (totalPagesArrayInModal.length - 1)"> <li class="page-item" [class.disabled]="modalPageIndex === (totalPagesArrayInModal.length - 1)">
<a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(modalPageIndex + 1)"> <a class="page-link px-3 py-[0.375rem] cursor-pointer"
{{'Next' | translate}} (click)="onModalPageChange(modalPageIndex + 1)">
</a> {{'Next' | translate}}
</li> </a>
</ul> </li>
</nav> </ul>
</nav>
</div>
</div> </div>
</div> </div>
</div> </mat-dialog-content>
</mat-dialog-content> <mat-dialog-actions style="justify-content: end; padding: 16px 20px;">
<mat-dialog-actions style="justify-content: end; padding: 16px 20px;"> <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" mat-button
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" mat-button (click)="closeDialog()">Close</button>
(click)="closeDialog()">Close</button> </mat-dialog-actions>
</mat-dialog-actions> </ng-template>
</ng-template> </ng-template>
\ No newline at end of file
src/app/portal-manage/my-portal/excel-report/excel-report.component.ts
...@@ -10,6 +10,10 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'; ...@@ -10,6 +10,10 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { SharedModule } from '../../../shared/shared.module'; import { SharedModule } from '../../../shared/shared.module';
import { TemplateFileMiniModel } from '../../models/template-file-mini.model'; import { TemplateFileMiniModel } from '../../models/template-file-mini.model';
import { ExcelReportService } from '../../services/excel-report.service'; import { ExcelReportService } from '../../services/excel-report.service';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { DatasourseTableService } from '../../services/datasourse-table.service';
export interface ValueDetailItem { export interface ValueDetailItem {
id: string; id: string;
...@@ -81,11 +85,22 @@ export class ExcelReportComponent implements OnInit { ...@@ -81,11 +85,22 @@ export class ExcelReportComponent implements OnInit {
loadingTemplates: boolean = false; loadingTemplates: boolean = false;
selectedTemplate: TemplateFileMiniModel | null = null; selectedTemplate: TemplateFileMiniModel | null = null;
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
companySelect: CompanyModel = new CompanyModel()
searchText = ''
pageCompany = 0;
pageSizeCompany = 10;
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private excelReportService: ExcelReportService, private excelReportService: ExcelReportService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private dialog: MatDialog, private dialog: MatDialog,
public translate: TranslateService, // ต้อง inject TranslateService เพื่อให้ translate pipe ทำงาน public translate: TranslateService, // ต้อง inject TranslateService เพื่อให้ translate pipe ทำงาน
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
...@@ -117,7 +132,30 @@ export class ExcelReportComponent implements OnInit { ...@@ -117,7 +132,30 @@ export class ExcelReportComponent implements OnInit {
}); });
// Load templates for the dropdown when the component initializes // Load templates for the dropdown when the component initializes
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchText))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.loadExcelReportTemplates(); this.loadExcelReportTemplates();
} }
openModal(data: any, modal: any) { openModal(data: any, modal: any) {
...@@ -133,7 +171,7 @@ export class ExcelReportComponent implements OnInit { ...@@ -133,7 +171,7 @@ export class ExcelReportComponent implements OnInit {
} }
} }
this.updateModalPagedItems(); // <--- เรียก updateModalPagedItems() หลังจากโหลดข้อมูล Modal ครั้งแรก this.updateModalPagedItems(); // <--- เรียก updateModalPagedItems() หลังจากโหลดข้อมูล Modal ครั้งแรก
this.dialogRef = this.dialog.open(modal,{ this.dialogRef = this.dialog.open(modal, {
width: '1100px', width: '1100px',
height: '650px' height: '650px'
}); });
...@@ -225,7 +263,7 @@ export class ExcelReportComponent implements OnInit { ...@@ -225,7 +263,7 @@ export class ExcelReportComponent implements OnInit {
if (data.valueDefault) { if (data.valueDefault) {
// ถ้ามี valueDefault ให้ใช้ค่าจาก API // ถ้ามี valueDefault ให้ใช้ค่าจาก API
initialValueForModel = data.valueDefault; initialValueForModel = data.valueDefault;
const [d, m, y] = data.valueDefault.split('-').map(Number); const [d, m, y] = data.valueDefault.split('-').map(Number);
initialNgbDate = new NgbDate(y, m, d); initialNgbDate = new NgbDate(y, m, d);
initialValueForInput = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`; initialValueForInput = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
......
src/app/portal-manage/services/course.service.ts
...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs'; ...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators'; import { map, tap } from 'rxjs/operators';
import { CourseModel } from '../models/course.model'; import { CourseModel } from '../models/course.model';
import { CourseContentModel } from '../models/course-content.model'; import { CourseContentModel } from '../models/course-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
...@@ -13,7 +14,7 @@ import { CourseContentModel } from '../models/course-content.model'; ...@@ -13,7 +14,7 @@ import { CourseContentModel } from '../models/course-content.model';
export class CourseService { export class CourseService {
url = environment.url url = environment.url
createStatus: boolean = true createStatus: boolean = true
constructor(private http: HttpClient) { } constructor(private http: HttpClient, private tokenService: TokenService) { }
getListCourse(status?:string): Observable<CourseModel[]> { getListCourse(status?:string): Observable<CourseModel[]> {
if(status){ if(status){
return this.http.get<CourseModel[]>(this.url + "course-center/upload/lists?status="+status) return this.http.get<CourseModel[]>(this.url + "course-center/upload/lists?status="+status)
...@@ -73,9 +74,9 @@ export class CourseService { ...@@ -73,9 +74,9 @@ export class CourseService {
return this.http.put<any>(this.url + "course-center/approve",body) return this.http.put<any>(this.url + "course-center/approve",body)
} }
getCount(status?: string): Observable<number> { getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "course-center/upload/count") return this.http.get<number>(this.url + "course-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getCountContent(status?: string): Observable<number> { getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "course-center/content/count") return this.http.get<number>(this.url + "course-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
} }
src/app/portal-manage/services/datasourse-table.service.ts
...@@ -5,6 +5,7 @@ import { Observable } from 'rxjs'; ...@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
import { DatasourceTableModel } from '../models/datasource-table.model'; import { DatasourceTableModel } from '../models/datasource-table.model';
import { environment } from '../../../environments/environment'; import { environment } from '../../../environments/environment';
import { AlertModel } from '../models/alert.model'; import { AlertModel } from '../models/alert.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
...@@ -13,13 +14,14 @@ import { AlertModel } from '../models/alert.model'; ...@@ -13,13 +14,14 @@ import { AlertModel } from '../models/alert.model';
export class DatasourseTableService { export class DatasourseTableService {
constructor(private http: HttpClient, constructor(private http: HttpClient,
private translateService: TranslateService private translateService: TranslateService,
private tokenService: TokenService
) { } ) { }
getid(companyid: string): Observable<DatasourceTableModel> { getid(companyid: string): Observable<DatasourceTableModel> {
return this.http.get<DatasourceTableModel>(environment.url + "datasource/" + companyid) return this.http.get<DatasourceTableModel>(environment.url + "datasource/" + companyid)
} }
getList(): Observable<DatasourceTableModel[]> { getList(): Observable<DatasourceTableModel[]> {
return this.http.get<DatasourceTableModel[]>(environment.url + "datasource/lists") return this.http.get<DatasourceTableModel[]>(environment.url + "datasource/lists?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
post(body: DatasourceTableModel): Observable<AlertModel> { post(body: DatasourceTableModel): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.url + "datasource", body) return this.http.post<AlertModel>(environment.url + "datasource", body)
......
src/app/portal-manage/services/document.service.ts
...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs'; ...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators'; import { map, tap } from 'rxjs/operators';
import { DocumentModel } from '../models/document.model'; import { DocumentModel } from '../models/document.model';
import { DocumentContentModel } from '../models/document-content.model'; import { DocumentContentModel } from '../models/document-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
...@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model'; ...@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
export class DocumentService { export class DocumentService {
url = environment.url url = environment.url
createStatus: boolean = true createStatus: boolean = true
constructor(private http: HttpClient) { } constructor(private http: HttpClient, private tokenService: TokenService) { }
getListDoc(status?: string): Observable<DocumentModel[]> { getListDoc(status?: string): Observable<DocumentModel[]> {
if (status) { if (status) {
return this.http.get<DocumentModel[]>(this.url + "document-center/upload/lists?status=" + status) return this.http.get<DocumentModel[]>(this.url + "document-center/upload/lists?status=" + status)
...@@ -35,8 +36,8 @@ export class DocumentService { ...@@ -35,8 +36,8 @@ export class DocumentService {
return this.http.get(this.url + "document-center/files/download/content/" + logId + '?lang=' + lang, { responseType: 'blob' }); return this.http.get(this.url + "document-center/files/download/content/" + logId + '?lang=' + lang, { responseType: 'blob' });
} }
createDoc(model: DocumentModel): Observable<any> { createDoc(model: DocumentModel): Observable<any> {
let body : any = model let body: any = model
if (body.group.groupId=='') { if (body.group.groupId == '') {
body.group = undefined body.group = undefined
} }
return this.http.post(this.url + 'document-center', body) return this.http.post(this.url + 'document-center', body)
...@@ -74,9 +75,9 @@ export class DocumentService { ...@@ -74,9 +75,9 @@ export class DocumentService {
} }
getCount(status?: string): Observable<number> { getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "document-center/upload/count") return this.http.get<number>(this.url + "document-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getCountContent(status?: string): Observable<number> { getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "document-center/content/count") return this.http.get<number>(this.url + "document-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
} }
src/app/portal-manage/services/excel-report.service.ts
...@@ -8,6 +8,7 @@ import { ModuleModel } from '../models/module.model'; ...@@ -8,6 +8,7 @@ import { ModuleModel } from '../models/module.model';
import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model'; import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
import { AlertModel } from '../models/alert.model'; import { AlertModel } from '../models/alert.model';
import { TemplateFileMiniModel } from '../models/template-file-mini.model'; import { TemplateFileMiniModel } from '../models/template-file-mini.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -15,13 +16,13 @@ import { TemplateFileMiniModel } from '../models/template-file-mini.model'; ...@@ -15,13 +16,13 @@ import { TemplateFileMiniModel } from '../models/template-file-mini.model';
export class ExcelReportService { export class ExcelReportService {
constructor(private http: HttpClient, constructor(private http: HttpClient,
private translateService: TranslateService private translateService: TranslateService, private tokenService: TokenService
) { } ) { }
getExcelList(): Observable<TemplateModel[]> { getExcelList(): Observable<TemplateModel[]> {
return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=DEMO") return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getModuleList(): Observable<ModuleModel[]> { getModuleList(): Observable<ModuleModel[]> {
return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=DEMO") return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getExcelPortalList(): Observable<ExcelPortalModel[]> { getExcelPortalList(): Observable<ExcelPortalModel[]> {
return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists") return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
...@@ -50,10 +51,10 @@ export class ExcelReportService { ...@@ -50,10 +51,10 @@ export class ExcelReportService {
}), }),
body: body body: body
} }
return this.http.delete<AlertModel>(environment.url + "template?companyid=DEMO", option) return this.http.delete<AlertModel>(environment.url + "template?companyid=" + this.tokenService.getSelectCompany().companyId, option)
} }
postTemplateFile(body: TemplateFileModel): Observable<AlertModel> { postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.url + "template-file?companyid=DEMO", body) return this.http.post<AlertModel>(environment.url + "template-file?companyid=" + this.tokenService.getSelectCompany().companyId, body)
} }
deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> { deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
let option = { let option = {
...@@ -62,22 +63,22 @@ export class ExcelReportService { ...@@ -62,22 +63,22 @@ export class ExcelReportService {
}), }),
body: body body: body
} }
return this.http.delete<AlertModel>(environment.url + "template-file?companyid=DEMO", option) return this.http.delete<AlertModel>(environment.url + "template-file?companyid=" + this.tokenService.getSelectCompany().companyId, option)
} }
downloadTemplateFile(fileName: string) { downloadTemplateFile(fileName: string) {
return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=DEMO", { responseType: 'blob' }) return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=" + this.tokenService.getSelectCompany().companyId, { responseType: 'blob' })
} }
printExcelReport(body: { printExcelReport(body: {
fileName: string, fileName: string,
paramObj: string paramObj: string
}) { }) {
return this.http.post(environment.url + "template-file/export-to-excel?companyid=DEMO", body, { responseType: 'blob' }) return this.http.post(environment.url + "template-file/export-to-excel?companyid=" + this.tokenService.getSelectCompany().companyId, body, { responseType: 'blob' })
} }
getTemplateFile(templateid: string, filename: string): Observable<AlertModel> { getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=DEMO",) return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=" + this.tokenService.getSelectCompany().companyId,)
} }
getTemplateFileLists(): Observable<TemplateFileMiniModel[]> { getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=DEMO",) return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=" + this.tokenService.getSelectCompany().companyId,)
} }
} }
\ No newline at end of file
src/app/portal-manage/services/excel.service.ts
...@@ -4,6 +4,7 @@ import { Observable, of } from 'rxjs'; ...@@ -4,6 +4,7 @@ import { Observable, of } from 'rxjs';
import { environment } from "../../../environments/environment"; import { environment } from "../../../environments/environment";
import { ExcelModel } from '../models/excel.model'; import { ExcelModel } from '../models/excel.model';
import { ExcelContentModel } from '../models/excel-content.model'; import { ExcelContentModel } from '../models/excel-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -11,31 +12,31 @@ import { ExcelContentModel } from '../models/excel-content.model'; ...@@ -11,31 +12,31 @@ import { ExcelContentModel } from '../models/excel-content.model';
export class ExcelService { export class ExcelService {
url = environment.url url = environment.url
createStatus: boolean = true createStatus: boolean = true
constructor(private http: HttpClient) { } constructor(private http: HttpClient, private tokenService: TokenService) { }
getListExcel(status?: string): Observable<ExcelModel[]> { getListExcel(status?: string): Observable<ExcelModel[]> {
if(status){ if (status) {
return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status="+status) return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status=" + status)
}else{ } else {
return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists") return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists")
} }
} }
getListExcelContent(status?: string): Observable<ExcelContentModel[]> { getListExcelContent(status?: string): Observable<ExcelContentModel[]> {
return this.http.get<ExcelContentModel[]>(this.url + "excel-center/content/lists") return this.http.get<ExcelContentModel[]>(this.url + "excel-center/content/lists")
} }
getExcelById(logId:string): Observable<ExcelModel> { getExcelById(logId: string): Observable<ExcelModel> {
return this.http.get<ExcelModel>(this.url + "excel-center/upload/"+logId) return this.http.get<ExcelModel>(this.url + "excel-center/upload/" + logId)
} }
downloadFile(logId:string):Observable<any>{ downloadFile(logId: string): Observable<any> {
return this.http.get(this.url + "excel-center/files/download/"+logId, { responseType: 'blob' }) return this.http.get(this.url + "excel-center/files/download/" + logId, { responseType: 'blob' })
} }
downloadFileContent(logId:string):Observable<any>{ downloadFileContent(logId: string): Observable<any> {
return this.http.get(this.url + "excel-center/files/download/content/"+logId, { responseType: 'blob' }); return this.http.get(this.url + "excel-center/files/download/content/" + logId, { responseType: 'blob' });
} }
createExcel(model: ExcelModel): Observable<any> { createExcel(model: ExcelModel): Observable<any> {
let body : any = model let body: any = model
if (body.group.groupId=='') { if (body.group.groupId == '') {
body.group = undefined body.group = undefined
} }
return this.http.post(this.url + 'excel-center', body) return this.http.post(this.url + 'excel-center', body)
...@@ -69,13 +70,13 @@ export class ExcelService { ...@@ -69,13 +70,13 @@ export class ExcelService {
logId: model.logId, logId: model.logId,
status: model.status status: model.status
} }
return this.http.put<any>(this.url + "excel-center/approve",body) return this.http.put<any>(this.url + "excel-center/approve", body)
} }
getCount(status?: string): Observable<number> { getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "excel-center/upload/count") return this.http.get<number>(this.url + "excel-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getCountContent(status?: string): Observable<number> { getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "excel-center/content/count") return this.http.get<number>(this.url + "excel-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
} }
src/app/portal-manage/services/widgets.service.ts
...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs'; ...@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators'; import { map, tap } from 'rxjs/operators';
import { WidgetModel } from '../models/widgets.model'; import { WidgetModel } from '../models/widgets.model';
import { DocumentContentModel } from '../models/document-content.model'; import { DocumentContentModel } from '../models/document-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({ @Injectable({
...@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model'; ...@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
export class WidgetService { export class WidgetService {
url = environment.url url = environment.url
createStatus: boolean = true createStatus: boolean = true
constructor(private http: HttpClient) { } constructor(private http: HttpClient, private tokenService: TokenService) { }
getListWidgets(status?: string): Observable<WidgetModel[]> { getListWidgets(status?: string): Observable<WidgetModel[]> {
return this.http.get<WidgetModel[]>(this.url + "widget-registry/lists/search") return this.http.get<WidgetModel[]>(this.url + "widget-registry/lists/search")
} }
...@@ -57,9 +58,9 @@ export class WidgetService { ...@@ -57,9 +58,9 @@ export class WidgetService {
getCount(status?: string): Observable<number> { getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "widget-registry/count") return this.http.get<number>(this.url + "widget-registry/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
getCountContent(status?: string): Observable<number> { getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "document-center/content/count") return this.http.get<number>(this.url + "document-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
} }
} }
src/app/shared/services/token.service.ts
...@@ -99,6 +99,10 @@ export class TokenService { ...@@ -99,6 +99,10 @@ export class TokenService {
return new UserProfileModel(); return new UserProfileModel();
} }
public removeCompany(): void {
window.localStorage.removeItem(COMPANY);
}
public saveSelectCompany(company: CompanyModel): void { public saveSelectCompany(company: CompanyModel): void {
window.localStorage.removeItem(COMPANY); window.localStorage.removeItem(COMPANY);
window.localStorage.setItem(COMPANY, JSON.stringify(new CompanyModel(company))); window.localStorage.setItem(COMPANY, JSON.stringify(new CompanyModel(company)));
......
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