Skip to content

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

เลือกบริษัท

parent 9070d968
Showing with 1361 additions and 169 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="col-12">
<div class="card card-body">
......@@ -25,7 +26,152 @@
</div>
</div> -->
@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="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>
}
@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>
</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>
......@@ -34,9 +180,8 @@
<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"
>
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="" />
......@@ -54,8 +199,7 @@
<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)"
>
(click)="openView(c.id)">
รายละเอียด
</button>
</div>
......@@ -65,4 +209,5 @@
</div>
</div>
</div>
\ No newline at end of file
</div>
</ng-template>
\ 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';
import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.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({
selector: 'app-approved-list',
......@@ -45,9 +49,20 @@ export class ApprovedListComponent implements OnInit {
"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 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)) || ''
}
......@@ -86,7 +101,30 @@ export class ApprovedListComponent implements OnInit {
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();
}
async getListCount() {
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="col-12">
......@@ -26,7 +27,154 @@
</div>
</div> -->
<div class="max-w-7xl mx-auto">
@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="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>
}
@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>
</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>
......@@ -34,9 +182,8 @@
<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"
>
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="" />
......@@ -54,8 +201,7 @@
<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)"
>
(click)="openView(c.id)">
รายละเอียด
</button>
</div>
......@@ -65,4 +211,6 @@
</div>
</div>
</div>
\ No newline at end of file
</div>
</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";
import { CourseService } from "../../services/course.service";
import { DocumentService } from "../../services/document.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({
selector: "app-category-list-approve",
......@@ -46,10 +50,20 @@ export class CategoryListApproveComponent implements OnInit {
"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,
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)) || ''
}
......@@ -90,9 +104,32 @@ export class CategoryListApproveComponent implements OnInit {
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();
}
openView(id: string) {
if (id == '1') {
this.router.navigate(['/' + this.path.data + '/approve-excel']);
......
src/app/portal-manage/my-portal/category-list/category-list.component.html
......@@ -24,7 +24,15 @@
</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="xl:col-span-12 col-span-12">
<div class="box">
......@@ -46,11 +54,12 @@
<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="1" class="loading">
<td colspan="2" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
......@@ -67,14 +76,18 @@
}
@if(!company.loading && companyFilter().length){
<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))"
(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 colspan="6" class="font-16 font-medium">
<td class="font-16 font-medium">
{{items.companyName}}
</td>
<td class="font-16 font-medium">
{{items.status}}
</td>
</tr>
}
</tbody>
......@@ -88,7 +101,7 @@
<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)]="pageSize" (ngModelChange)="page">
[(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
......@@ -103,32 +116,37 @@
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(page > 0){
<li class="page-item {{page==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page - 1">{{'Previous' |
@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)="page = page - 1">{{page}}</a>
(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);">{{page
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageCompany
+
1}}</a>
</li>
@if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 1">{{page +
@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((page + 2) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 2">{{page
@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((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page + 1">{{'Next' |
@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>
}
......@@ -151,9 +169,8 @@
</ng-template>
<!-- <ng-container *ngTemplateOutlet="name2"></ng-container> -->
<!-- <ng-template #name2> -->
<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>
......@@ -191,4 +208,4 @@
</div>
</div>
</div>
<!-- </ng-template> -->
\ No newline at end of file
</ng-template>
\ 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';
import { DatasourseTableService } from '../../services/datasourse-table.service';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
@Component({
selector: 'app-category-list',
......@@ -49,6 +50,7 @@ export class CategorylistComponent implements OnInit {
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
companySelect: CompanyModel = new CompanyModel()
constructor(
private router: Router,
private excelService: ExcelService,
......@@ -58,8 +60,11 @@ export class CategorylistComponent implements OnInit {
private datasourceTable: DatasourseTableService,
private tokenService: TokenService
) {
this.tokenService.removeCompany()
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
}
pageCompany = 0;
pageSizeCompany = 10;
page = 1;
pageSize = 10;
testdata: {
......@@ -110,7 +115,7 @@ export class CategorylistComponent implements OnInit {
// },
];
this.getListCount();
// this.getListCount();
this.getCompany()
}
......@@ -131,6 +136,7 @@ export class CategorylistComponent implements OnInit {
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.companySelect = this.tokenService.getSelectCompany()
this.getListCount();
}
......
src/app/portal-manage/my-portal/create-category/create-category.component.html
......@@ -27,8 +27,153 @@
</div> -->
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div class="max-w-7xl mx-auto">
<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)]='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>
}
@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>
</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>
......@@ -65,7 +210,8 @@
</div>
</div>
</div>
</div>
</ng-template>
<!-- Add File -->
<!-- <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';
import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.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 {
"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,
private excelService: ExcelService,
private documentService: DocumentService,
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)) || ''
}
......@@ -106,7 +121,30 @@ export class CreateCategoryComponent implements OnInit {
// 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();
}
async getListCount() {
try {
......
src/app/portal-manage/my-portal/excel-list/excel-list.component.html
<app-page-header [title]="'เพิ่มรายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'เพิ่มรายงาน Excel'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
@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="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 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>
}
@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>
</div>
</div>
</div>
</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">
......@@ -95,7 +248,8 @@
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium">
<span class="cursor-pointer text-info" style="text-decoration: underline;"
<span class="cursor-pointer text-info"
style="text-decoration: underline;"
(click)="openAddGroupModal(items)">
{{items.tname}}
</span>
......@@ -144,7 +298,8 @@
<tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
<ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)">
<ng-container
*ngIf="downloadTemplateFileLoading.get(item.fileName)">
<td colspan="7" class="text-center">
<div *ngFor="let item of [1,2,3]"
class="spinner-grow text-info mx-1" role="status">
......@@ -152,8 +307,10 @@
</div>
</td>
</ng-container>
<ng-container *ngIf="!downloadTemplateFileLoading.get(item.fileName)">
<td style="white-space: normal !important;word-break: break-word;">
<ng-container
*ngIf="!downloadTemplateFileLoading.get(item.fileName)">
<td
style="white-space: normal !important;word-break: break-word;">
<i *ngIf="item.menuActive=='0'"
class="fa fa-times text-danger cursor-pointer"
style="text-decoration: underline;"
......@@ -169,7 +326,8 @@
{{item.tdesc}}
</span>
</td>
<td style="white-space: normal !important;word-break: break-word;">
<td
style="white-space: normal !important;word-break: break-word;">
{{item.edesc}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
......@@ -238,16 +396,19 @@
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 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);"
<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);"
<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
......@@ -268,9 +429,9 @@
</div>
</div>
</div>
</div>
</div>
<ng-template #addGroupModal let-modal>
<ng-template #addGroupModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -344,7 +505,8 @@
</label>
<select class="form-select" required [disabled]="bodyTemplate.status=='edit'"
[(ngModel)]="bodyTemplate.data.companyId">
<option style="color: red" [class.d-none]="bodyTemplate.data.companyId==''" [value]="''">
<option style="color: red" [class.d-none]="bodyTemplate.data.companyId==''"
[value]="''">
{{bodyTemplate.data.companyId!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of itemsList" [ngValue]="item.companyId">{{item.companyName}}
</option>
......@@ -368,9 +530,9 @@
</div>
</div>
</div>
</ng-template>
</ng-template>
<ng-template #addChildModal let-modal>
<ng-template #addChildModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -428,8 +590,8 @@
</div>
<div *ngIf="templateFileType=='upload'" class="flex items-center gap-2 col-span-2 truncate">
<input #fileInput type="file" accept=".xlsx,.xls,.xlsm" (change)="onFileSelected($event)"
style="display: none;" />
<input #fileInput type="file" accept=".xlsx,.xls,.xlsm"
(change)="onFileSelected($event)" style="display: none;" />
<button (click)="fileInput.click()"
class="px-2 py-1 border border-black rounded bg-white hover:bg-gray-100 shadow-sm font-bold whitespace-nowrap">
......@@ -448,7 +610,8 @@
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<div
class="col-span-3 lg:col-span-5 sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full rtl:space-x-reverse">
<label class="ti-form-label block mb-1 font-bold" style="width: 50%;">รายละเอียด (ภาษาไทย)
<label class="ti-form-label block mb-1 font-bold" style="width: 50%;">รายละเอียด
(ภาษาไทย)
</label>
<input type="text" id="input-label" class="ti-form-input w-full "
[(ngModel)]="templateFile.tdesc">
......@@ -542,9 +705,9 @@
</div>
</div>
</div>
</ng-template>
</ng-template>
<ng-template #excel_portalModal let-modal>
<ng-template #excel_portalModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -577,9 +740,11 @@
<div class="flex flex-col min-w-[200px]">
<select class="custom-select" [(ngModel)]="excelPortalSearch.tags">
<option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือก
<option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>
เลือก
tags</option>
<option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''">
<option style="color: red" [class.d-none]="excelPortalSearch.tags==''"
[value]="''">
{{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalTags.data" [ngValue]="item.value">
{{item.value}}
......@@ -603,7 +768,8 @@
<th class="text-center" scope="col">Ex.</th>
<th class="text-center" scope="col">VDO</th>
<th class="text-center" scope="col" style="min-width: 200px">Name</th>
<th class="text-center" scope="col" style="min-width: 200px">Description</th>
<th class="text-center" scope="col" style="min-width: 200px">Description
</th>
<th class="text-center" scope="col">Database Support</th>
<th class="text-center" scope="col">Pivot</th>
<th class="text-center" scope="col">DataGrid</th>
......@@ -702,12 +868,14 @@
<li class="page-item"
*ngIf="(pageModal + 1) * pageSizeModal < excelPortalFilter().length">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageModal = pageModal + 1; updatePagedItems()">{{pageModal + 2}}</a>
(click)="pageModal = pageModal + 1; updatePagedItems()">{{pageModal +
2}}</a>
</li>
<li class="page-item"
*ngIf="(pageModal + 2) * pageSizeModal < excelPortalFilter().length">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageModal = pageModal + 2; updatePagedItems()">{{pageModal + 3}}</a>
(click)="pageModal = pageModal + 2; updatePagedItems()">{{pageModal +
3}}</a>
</li>
<li *ngIf="(pageModal + 1) * pageSizeModal < excelPortalFilter().length"
......@@ -731,17 +899,17 @@
</div>
</div>
</div>
</ng-template>
</ng-template>
<ng-template #videoModal let-modal>
<ng-template #videoModal let-modal>
<div style="width: 100%; height: 100%;">
<iframe style="width: 100%; height: 100%;" [src]="videoLink | safeUrl" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>
</ng-template>
</ng-template>
<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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -792,15 +960,17 @@
<label *ngFor="let radioItem of item.option"
class="inline-flex items-center">
<input type="radio" class="form-radio mr-2"
[name]="'group-' + item.label" [id]="radioItem.text+radioItem.value"
[value]="radioItem.value" [(ngModel)]="item.value" />
[name]="'group-' + item.label"
[id]="radioItem.text+radioItem.value" [value]="radioItem.value"
[(ngModel)]="item.value" />
{{ radioItem.text }}
</label>
</div>
<!-- Help -->
<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
class="form-input w-1/2 bg-white cursor-pointer"
[value]="item.value.tdesc" (click)="openModalData(item)" />
<button
......@@ -874,12 +1044,14 @@
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
<div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'"
class="ti-btn ti-btn-primary-full" (click)="getExcelData('grid')">Datagrid</button>
class="ti-btn ti-btn-primary-full"
(click)="getExcelData('grid')">Datagrid</button>
<ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
&nbsp;
</ng-container>
<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>
</ng-container>
......@@ -903,9 +1075,9 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -987,23 +1159,28 @@
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"
<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);"
<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);"
<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);"
(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>
(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' |
......@@ -1026,9 +1203,9 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -1068,9 +1245,9 @@
</div>
</div>
</div>
</ng-template>
</ng-template>
<!-- <ng-template #gridModals let-modal>
<!-- <ng-template #gridModals let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">GridData</h5>
<button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
......@@ -1098,7 +1275,7 @@
</div>
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -1139,10 +1316,10 @@
</div>
</div>
</div>
</ng-template>
</ng-template>
<!-- <ng-template #pivotModals let-modal>
<!-- <ng-template #pivotModals let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">Pivot</h5>
<button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
......@@ -1170,3 +1347,5 @@
</button>
</div>
</ng-template> -->
</ng-template>
\ No newline at end of file
src/app/portal-manage/my-portal/excel-list/excel-list.component.ts
......@@ -24,6 +24,8 @@ import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel
import { CustomCubeService } from '../../services/custom-cube.service';
import { DatasourseTableService } from '../../services/datasourse-table.service';
import { ExcelReportService } from '../../services/excel-report.service';
import { TokenService } from '../../../shared/services/token.service';
import { CompanyModel } from '../../models/company.model';
export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] }
}
......@@ -170,12 +172,20 @@ export class ExcelListComponent implements OnInit {
@ViewChild('modalData') modalData!: TemplateRef<any>;
@ViewChild('gridModal') gridModal!: 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,
private modalService: NgbModal,
private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef,
private modal: MatDialog,
private datasourceTable: DatasourseTableService) {
private datasourceTable: DatasourseTableService,
private tokenService: TokenService) {
}
ngOnInit(): void {
......@@ -184,6 +194,28 @@ export class ExcelListComponent implements OnInit {
this.getExcelPortalList()
this.getExcelPortalgGroupList()
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()
}
get totalItems(): number {
......
src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.html
<app-page-header [title]="'เปิด-ปิด การใช้รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'เปิด-ปิด การใช้รายงาน Excel'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
@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="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 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>
}
@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>
</div>
</div>
</div>
</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">
......@@ -196,16 +347,19 @@
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 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);"
<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);"
<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
......@@ -226,11 +380,11 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -280,15 +434,17 @@
<label *ngFor="let radioItem of item.option"
class="inline-flex items-center">
<input type="radio" class="form-radio mr-2"
[name]="'group-' + item.label" [id]="radioItem.text+radioItem.value"
[value]="radioItem.value" [(ngModel)]="item.value" />
[name]="'group-' + item.label"
[id]="radioItem.text+radioItem.value" [value]="radioItem.value"
[(ngModel)]="item.value" />
{{ radioItem.text }}
</label>
</div>
<!-- Help -->
<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
class="form-input w-1/2 bg-white cursor-pointer"
[value]="item.value.tdesc" (click)="openModalData(item)" />
<button
......@@ -362,12 +518,14 @@
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
<div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'"
class="ti-btn ti-btn-primary-full" (click)="getExcelData('grid')">Datagrid</button>
class="ti-btn ti-btn-primary-full"
(click)="getExcelData('grid')">Datagrid</button>
<ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
&nbsp;
</ng-container>
<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>
</ng-container>
......@@ -390,9 +548,9 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -474,23 +632,28 @@
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"
<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);"
<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);"
<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);"
(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>
(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' |
......@@ -513,11 +676,11 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -532,8 +695,9 @@
</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 [searchSettings]="searchSettings" [dataSource]="dataList"
[columns]="columns" [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate"
(layout)="gridLayout.data=$event">
</app-datagrid-syncfution>
</div>
......@@ -556,9 +720,9 @@
</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="ti-modal-content">
<div class="ti-modal-header flex justify-between items-center p-5">
......@@ -599,4 +763,6 @@
</div>
</div>
</div>
</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';
import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
import { CustomCubeService } from '../../services/custom-cube.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 {
text: { cardHead: string, search: string[], tableHead: string[] }
}
......@@ -140,15 +144,47 @@ export class ExcelReportToggleComponent implements OnInit {
@ViewChild('modalData') modalData!: TemplateRef<any>;
@ViewChild('gridModal') gridModal!: 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,
private modalService: NgbModal,
private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef,
private modal: MatDialog) {
private modal: MatDialog,
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,) {
}
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()
}
get totalItems(): number {
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>
@if(companySelect.companyId){
<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
} @else {
<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
}
<div class="box">
<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)]='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>
}
@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>
</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">
<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>
......@@ -99,9 +245,9 @@
</div>
</div>
</div>
</div>
</div>
<ng-template #detailModal>
<ng-template #detailModal>
<h2 mat-dialog-title clas>
<div class="text-primary">รายชื่อพนักงาน</div>
</h2>
......@@ -114,7 +260,8 @@
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="Search..."
aria-label=".form-control-sm example" [(ngModel)]="searchModal" (ngModelChange)="updateModalPagedItems()">
aria-label=".form-control-sm example" [(ngModel)]="searchModal"
(ngModelChange)="updateModalPagedItems()">
</div>
</div>
</div>
......@@ -123,7 +270,8 @@
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<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>
</tr>
</thead>
......@@ -210,7 +358,8 @@
}
<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"
(click)="onModalPageChange(modalPageIndex + 1)">
{{'Next' | translate}}
</a>
</li>
......@@ -224,4 +373,6 @@
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" mat-button
(click)="closeDialog()">Close</button>
</mat-dialog-actions>
</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';
import { SharedModule } from '../../../shared/shared.module';
import { TemplateFileMiniModel } from '../../models/template-file-mini.model';
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 {
id: string;
......@@ -81,11 +85,22 @@ export class ExcelReportComponent implements OnInit {
loadingTemplates: boolean = false;
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,
private excelReportService: ExcelReportService,
private cdr: ChangeDetectorRef,
private dialog: MatDialog,
public translate: TranslateService, // ต้อง inject TranslateService เพื่อให้ translate pipe ทำงาน
private tokenService: TokenService,
private datasourceTable: DatasourseTableService,
) { }
ngOnInit(): void {
......@@ -117,7 +132,30 @@ export class ExcelReportComponent implements OnInit {
});
// 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();
}
openModal(data: any, modal: any) {
......@@ -133,7 +171,7 @@ export class ExcelReportComponent implements OnInit {
}
}
this.updateModalPagedItems(); // <--- เรียก updateModalPagedItems() หลังจากโหลดข้อมูล Modal ครั้งแรก
this.dialogRef = this.dialog.open(modal,{
this.dialogRef = this.dialog.open(modal, {
width: '1100px',
height: '650px'
});
......
src/app/portal-manage/services/course.service.ts
......@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CourseModel } from '../models/course.model';
import { CourseContentModel } from '../models/course-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
......@@ -13,7 +14,7 @@ import { CourseContentModel } from '../models/course-content.model';
export class CourseService {
url = environment.url
createStatus: boolean = true
constructor(private http: HttpClient) { }
constructor(private http: HttpClient, private tokenService: TokenService) { }
getListCourse(status?:string): Observable<CourseModel[]> {
if(status){
return this.http.get<CourseModel[]>(this.url + "course-center/upload/lists?status="+status)
......@@ -73,9 +74,9 @@ export class CourseService {
return this.http.put<any>(this.url + "course-center/approve",body)
}
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> {
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';
import { DatasourceTableModel } from '../models/datasource-table.model';
import { environment } from '../../../environments/environment';
import { AlertModel } from '../models/alert.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
......@@ -13,13 +14,14 @@ import { AlertModel } from '../models/alert.model';
export class DatasourseTableService {
constructor(private http: HttpClient,
private translateService: TranslateService
private translateService: TranslateService,
private tokenService: TokenService
) { }
getid(companyid: string): Observable<DatasourceTableModel> {
return this.http.get<DatasourceTableModel>(environment.url + "datasource/" + companyid)
}
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> {
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';
import { map, tap } from 'rxjs/operators';
import { DocumentModel } from '../models/document.model';
import { DocumentContentModel } from '../models/document-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
......@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
export class DocumentService {
url = environment.url
createStatus: boolean = true
constructor(private http: HttpClient) { }
constructor(private http: HttpClient, private tokenService: TokenService) { }
getListDoc(status?: string): Observable<DocumentModel[]> {
if (status) {
return this.http.get<DocumentModel[]>(this.url + "document-center/upload/lists?status=" + status)
......@@ -35,8 +36,8 @@ export class DocumentService {
return this.http.get(this.url + "document-center/files/download/content/" + logId + '?lang=' + lang, { responseType: 'blob' });
}
createDoc(model: DocumentModel): Observable<any> {
let body : any = model
if (body.group.groupId=='') {
let body: any = model
if (body.group.groupId == '') {
body.group = undefined
}
return this.http.post(this.url + 'document-center', body)
......@@ -74,9 +75,9 @@ export class DocumentService {
}
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> {
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';
import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
import { AlertModel } from '../models/alert.model';
import { TemplateFileMiniModel } from '../models/template-file-mini.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
providedIn: 'root'
......@@ -15,13 +16,13 @@ import { TemplateFileMiniModel } from '../models/template-file-mini.model';
export class ExcelReportService {
constructor(private http: HttpClient,
private translateService: TranslateService
private translateService: TranslateService, private tokenService: TokenService
) { }
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[]> {
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[]> {
return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
......@@ -50,10 +51,10 @@ export class ExcelReportService {
}),
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> {
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> {
let option = {
......@@ -62,22 +63,22 @@ export class ExcelReportService {
}),
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) {
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: {
fileName: 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> {
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[]> {
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';
import { environment } from "../../../environments/environment";
import { ExcelModel } from '../models/excel.model';
import { ExcelContentModel } from '../models/excel-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
providedIn: 'root'
......@@ -11,31 +12,31 @@ import { ExcelContentModel } from '../models/excel-content.model';
export class ExcelService {
url = environment.url
createStatus: boolean = true
constructor(private http: HttpClient) { }
constructor(private http: HttpClient, private tokenService: TokenService) { }
getListExcel(status?: string): Observable<ExcelModel[]> {
if(status){
return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status="+status)
}else{
if (status) {
return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status=" + status)
} else {
return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists")
}
}
getListExcelContent(status?: string): Observable<ExcelContentModel[]> {
return this.http.get<ExcelContentModel[]>(this.url + "excel-center/content/lists")
}
getExcelById(logId:string): Observable<ExcelModel> {
return this.http.get<ExcelModel>(this.url + "excel-center/upload/"+logId)
getExcelById(logId: string): Observable<ExcelModel> {
return this.http.get<ExcelModel>(this.url + "excel-center/upload/" + logId)
}
downloadFile(logId:string):Observable<any>{
return this.http.get(this.url + "excel-center/files/download/"+logId, { responseType: 'blob' })
downloadFile(logId: string): Observable<any> {
return this.http.get(this.url + "excel-center/files/download/" + logId, { responseType: 'blob' })
}
downloadFileContent(logId:string):Observable<any>{
return this.http.get(this.url + "excel-center/files/download/content/"+logId, { responseType: 'blob' });
downloadFileContent(logId: string): Observable<any> {
return this.http.get(this.url + "excel-center/files/download/content/" + logId, { responseType: 'blob' });
}
createExcel(model: ExcelModel): Observable<any> {
let body : any = model
if (body.group.groupId=='') {
let body: any = model
if (body.group.groupId == '') {
body.group = undefined
}
return this.http.post(this.url + 'excel-center', body)
......@@ -69,13 +70,13 @@ export class ExcelService {
logId: model.logId,
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> {
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> {
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';
import { map, tap } from 'rxjs/operators';
import { WidgetModel } from '../models/widgets.model';
import { DocumentContentModel } from '../models/document-content.model';
import { TokenService } from '../../shared/services/token.service';
@Injectable({
......@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
export class WidgetService {
url = environment.url
createStatus: boolean = true
constructor(private http: HttpClient) { }
constructor(private http: HttpClient, private tokenService: TokenService) { }
getListWidgets(status?: string): Observable<WidgetModel[]> {
return this.http.get<WidgetModel[]>(this.url + "widget-registry/lists/search")
}
......@@ -57,9 +58,9 @@ export class WidgetService {
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> {
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 {
return new UserProfileModel();
}
public removeCompany(): void {
window.localStorage.removeItem(COMPANY);
}
public saveSelectCompany(company: CompanyModel): void {
window.localStorage.removeItem(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