Skip to content

M
myjob-manage
Commit 81d51eb9 by Natthaphat
Options

เพิ่ม เมนู รายการเอกสารผ่านการอนุมัติ ของ myPortal

parent 5eacc6c2
Showing with 1315 additions and 11 deletions
src/app/DPU/common/common.module.ts
...@@ -153,6 +153,41 @@ export const admin: Routes = [ ...@@ -153,6 +153,41 @@ export const admin: Routes = [
loadComponent: () => loadComponent: () =>
import('./myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent), import('./myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
}, },
{
path: 'approved-list',
loadComponent: () =>
import('./myportal/management/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
},
{
path: 'view-list-excel',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-excel/:type',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-doc/:type',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'view-list-course/:type',
loadComponent: () =>
import('./myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
//////////////emp///////////////// //////////////emp/////////////////
{ {
path: 'emp/department', path: 'emp/department',
...@@ -164,7 +199,6 @@ export const admin: Routes = [ ...@@ -164,7 +199,6 @@ export const admin: Routes = [
loadComponent: () => loadComponent: () =>
import('./employee/position/position.component').then((m) => m.PositionComponent), import('./employee/position/position.component').then((m) => m.PositionComponent),
}, },
] ]
} }
]; ];
......
src/app/DPU/common/myportal/management/approved-list/approved-list.component.html 0 → 100644
<app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'" [title1]="'อนุมัติหลักสูตร'"></app-page-header>
<!-- <div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="row justify-content-center">
<div class="col-md-4 " *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="card border border-2">
<div class="card-body text-center">
<img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
<h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
</div>
<div class="d-flex justify-content-between bg-light border-top p-3">
<div>
<span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div >
<button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
</div>
</div>
</div>
</div>
</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 -->
<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 transition duration-150 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>
\ No newline at end of file
src/app/DPU/common/myportal/management/approved-list/approved-list.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ApprovedListComponent } from './approved-list.component';
describe('ApprovedListComponent', () => {
let component: ApprovedListComponent;
let fixture: ComponentFixture<ApprovedListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ApprovedListComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ApprovedListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/DPU/common/myportal/management/approved-list/approved-list.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { DocumentService } from '../../../../services/document.service';
import { CourseService } from '../../../../services/course.service';
import { ExcelService } from '../../../../services/excel.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../../../../shared/shared.module';
@Component({
selector: 'app-approved-list',
templateUrl: './approved-list.component.html',
styleUrls: ['./approved-list.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
TranslateModule,
SharedModule,
],
})
export class ApprovedListComponent implements OnInit {
constructor(
private routes: Router,
private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService
) {}
page = 1;
pageSize = 10;
testdata: {
id:string;
img: String;
name: String;
details: String;
document: String;
}[] = [];
ngOnInit() {
this.testdata = [
{
id:'1',
img: "assets/images/icons/excel.png",
name: "Excel",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'2',
img: "assets/images/icons/document.png",
name: "Document",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'3',
img: "assets/images/icons/course.png",
name: "Course",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
];
this.getListCount();
}
async getListCount(){
try {
const countExcel = await this.excelService.getCountContent().toPromise();
const countDoc = await this.documentService.getCountContent().toPromise();
const countCourse = await this.courseService.getCountContent().toPromise();
this.testdata.forEach((x ,i) => {
if(i == 0){
x.document = (countExcel ?? 0).toString()
}else if(i == 1){
x.document = (countDoc ?? 0).toString()
}else if(i == 2){
x.document = (countCourse ?? 0).toString()
}
})
} catch (error) {
console.error('Error loading data:', error);
}
}
openView(id:string){
if(id =='1'){
this.routes.navigate(['/admin/view-list-excel/1']);
}else if(id =='2'){
this.routes.navigate(['/admin/view-list-doc/1']);
}else if(id =='3'){
this.routes.navigate(['/admin/view-list-course/1']);
}
}
}
src/app/DPU/common/myportal/management/approved-list/view-list-course/view-list-course.component.html 0 → 100644
<app-page-header [title]="'รายการหลักสูตร'" [activeTitle]="'รายการเอกสาร'" [title1]="'รายการหลักสูตร'"></app-page-header>
<!-- <div class="row" *ngIf="checkType == '1'">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการหลักสูตร</h4>
<div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
</div>
<div class="table-responsive">
<table class="table table-striped mb-0 no-wrap v-middle ">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col">ประเภทหลักสูตร</th>
<th scope="col">ลิงค์</th>
<th scope="col">สถานะ</th>
<th scope="col" class="text-center">วันที่อัพโหลด</th>
<th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listCourse.length == 0">
<td colspan="{{checkType == '1' ? '9' : '8'}}" class="text-center">ไม่พบข้อมูล</td>
</tr>
<tr *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<td class="text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
<td>{{ data.thName }}</td>
<td class="text-wrap">{{ data.thDesc }}</td>
<td>{{data.courseType}}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
<td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.courseId)"></i></td>
<td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-end py-2">
<select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listCourse.length" [maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div>
</div>
</div>
</div>
<div class="row" *ngIf="checkType != '1'">
<div class="col-12">
<div class="py-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 mb-3" *ngFor="let data of filterListCourse()">
<div class="card border-5 border border-course h-100 shadow" >
<div class=" p-2 border-5">
<img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
</div>
<div class="card-body">
<h4 class="card-title">{{ data.thName }}</h4>
<p class="card-text ">{{ data.thDesc }}</p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.courseId)"><i class="fas fa-download mr-1"></i> ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
<p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i> ตัวอย่างวิธีใช้งาน</p>
</div>
<div class="card-footer border-bottom-5" >
<small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
</div>
</div>
</div>
</div> -->
<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 class="flex flex-wrap gap-4">
<!-- Buttons -->
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหา"
aria-label=".form-control-sm example" [(ngModel)]='search'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
<thead class="bg-info text-white">
<tr>
<th class="!text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col">ประเภทหลักสูตร</th>
<th scope="col">ลิงค์</th>
<th scope="col">สถานะ</th>
<th scope="col" class="!text-center">วันที่อัพโหลด</th>
<th scope="col" class="!text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="!text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listCourse.length == 0">
<td [attr.colspan]="checkType == '1' ? 8 : 7" class="!text-center">ไม่พบข้อมูล</td>
</tr>
<tr *ngFor="let data of filterListCourse() | slice: page * pageSize : (page+1) * pageSize ; let i = index">
<td class="!text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())" style="width: 250px; max-width: none;"></td>
<td>{{ data.thName }}</td>
<td class="text-wrap">{{ data.thDesc }}</td>
<td>{{data.courseType}}</td>
<td class="!text-center"><i class="ri-links-line text-base font-bold cursor-pointer hover:text-primary" (click)="openLink(data.link1)"></i></td>
<td class="!text-center"> <i class="fa fa-download text-base font-bold cursor-pointer hover:text-primary" (click)="downloadFile(data.courseId)"></i></td>
<td class="!text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="!text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="!text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr *ngIf="filterListCourse().length === 0">
<td [attr.colspan]="checkType == '1' ? 10 : 9" class="!text-center py-4">
<ng-container *ngIf="search">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
<ng-container *ngIf="!search">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterListCourse().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 class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterListCourse().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 < filterListCourse().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 < filterListCourse().length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < filterListCourse().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>
</div>
\ No newline at end of file
src/app/DPU/common/myportal/management/approved-list/view-list-course/view-list-course.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { CourseContentModel } from '../../../../../models/course-content.model';
import { CourseService } from '../../../../../services/course.service';
declare var require: any
import FileSaver from 'file-saver';
@Component({
selector: 'app-view-list-course',
templateUrl: './view-list-course.component.html',
styleUrls: ['./view-list-course.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
NgSelectModule,
SharedModule,
MatDialogModule,
TranslateModule,
NgbPaginationModule,
],
})
export class ViewListCourseComponent implements OnInit {
page = 0;
pageSize = 10;
listCourse: CourseContentModel[] = []
search: string = ''
checkType: string = '0'
pagedItems: CourseContentModel[];
constructor(private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
}
get totalItems(): number {
return this.search == ''
? this.listCourse.length
: this.filterListCourse().length;
}
get totalPages(): number {
return Math.ceil(this.totalItems / this.pageSize);
}
get totalPagesArray(): number[] {
return Array(this.totalPages).fill(0);
}
goToPage(index: number): void {
if (index < 0 || index >= this.totalPages) return;
this.page = index;
this.updatePagedItems();
}
updatePagedItems() {
const data: CourseContentModel[] = this.search === '' ? this.listCourse : this.filterListCourse();
const start = this.page * this.pageSize;
const end = start + this.pageSize;
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
}
async downloadFile(logId: string) {
try {
const data = await this.courseService.downloadFileContent(logId).toPromise();
if (data) {
FileSaver.saveAs(new Blob([data]), "file_download.json");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
filterListCourse() {
return this.listCourse.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
}
async getListCourse() {
try {
const data = await firstValueFrom(this.courseService.getListCourseContent('0'));
this.listCourse = data.map(x => new CourseContentModel(x))
console.log("🚀 ~ ViewListCourseComponent ~ getListCourse ~ this.listCourse :", this.listCourse)
} catch (error) {
console.error('Error loading data:', error);
}
}
deleteFile(item: CourseContentModel) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
modalRef.result.then(result => {
this.courseService.deleteCourseContent(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ')
this.getListCourse();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้')
}
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
ngOnInit() {
this.getListCourse();
}
openLink(url: string) {
window.open(url, "_blank");
}
openAlertModal(message?: string) {
const modalRef = this.modalService.open(AlertModalComponent, {
centered: true,
backdrop: 'static'
})
modalRef.componentInstance.message = message ? message : ""
modalRef.result.then(result => {
this.modalService.dismissAll()
}, reason => {
this.modalService.dismissAll()
})
}
coverDate(date: string) {
return date.split('-').reverse().join('/')
}
}
src/app/DPU/common/myportal/management/approved-list/view-list-doc/view-list-doc.component.html 0 → 100644
<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'รายการเอกสาร'" [title1]="'รายการเอกสาร'"></app-page-header>
<!-- <div class="row" *ngIf="checkType == '1'">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
</div>
<div class="table-responsive">
<table class="table table-striped mb-0 no-wrap v-middle ">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="text-center">ลิงค์</th>
<th scope="col" class="text-center">ไฟล์ (ไทย)</th>
<th scope="col" class="text-center">ไฟล์ (อังกฤษ)</th>
<th scope="col" class="text-center">วันที่อัพโหลด</th>
<th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listDoc.length == 0">
<td colspan="{{checkType == '1' ? '9' : '10'}}" class="text-center">ไม่พบข้อมูล</td>
</tr>
<tr *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<td class="text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
<td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.docId,'tha')"></i></td>
<td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.docId,'eng')"></i></td>
<td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-end py-2">
<select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listDoc.length" [maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div>
</div>
</div>
</div>
<div class="row" *ngIf="checkType != '1'">
<div class="col-12">
<div class="py-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 mb-3" *ngFor="let data of filterListDoc()">
<div class="card border-5 border border-doc h-100 shadow" >
<div class=" p-2 border-5">
<img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
</div>
<div class="card-body">
<h4 class="card-title">{{ data.thName }}</h4>
<p class="card-text ">{{ data.thDesc }}</p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.docId,'tha')"><i class="fas fa-download mr-1"></i> ดาวน์โหลด (ไทย) <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.docId,'eng')"><i class="fas fa-download mr-1"></i> ดาวน์โหลด (อังกฤษ) <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
<p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i> ตัวอย่างวิธีใช้งาน</p>
</div>
<div class="card-footer border-bottom-5" >
<small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
</div>
</div>
</div>
</div> -->
<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 class="flex flex-wrap gap-4">
<!-- Buttons -->
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหา"
aria-label=".form-control-sm example" [(ngModel)]='search'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
<thead class="bg-info text-white">
<tr>
<th class="!text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="!text-center">ลิงค์</th>
<th scope="col" class="!text-center">ไฟล์ (ไทย)</th>
<th scope="col" class="!text-center">ไฟล์ (อังกฤษ)</th>
<th scope="col" class="!text-center">วันที่อัพโหลด</th>
<th scope="col" class="!text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="!text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listDoc.length == 0">
<td [attr.colspan]="checkType == '1' ? 8 : 7" class="!text-center">ไม่พบข้อมูล</td>
</tr>
<tr *ngFor="let data of filterListDoc() | slice: page * pageSize : (page+1) * pageSize ; let i = index">
<td class="!text-center">{{i+1}}</td>
<td><img class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())" style="width: 250px; max-width: none;"></td>
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="!text-center"><i class="ri-links-line text-base font-bold cursor-pointer hover:text-primary" (click)="openLink(data.link1)"></i></td>
<td class="!text-center"> <i class="fa fa-download text-base font-bold cursor-pointer hover:text-primary" (click)="downloadFile(data.docId,'tha')"></i></td>
<td class="!text-center"> <i class="fa fa-download text-base font-bold cursor-pointer hover:text-primary" (click)="downloadFile(data.docId,'eng')"></i></td>
<td class="!text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="!text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="!text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button" class="bg-danger hover:bg-danger text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr *ngIf="filterListDoc().length === 0">
<td [attr.colspan]="checkType == '1' ? 10 : 9" class="!text-center py-4">
<ng-container *ngIf="search">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
<ng-container *ngIf="!search">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterListDoc().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 class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterListDoc().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 < filterListDoc().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 < filterListDoc().length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < filterListDoc().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>
</div>
\ No newline at end of file
src/app/DPU/common/myportal/management/approved-list/view-list-doc/view-list-doc.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { DocumentContentModel } from '../../../../../models/document-content.model';
import { DocumentService } from '../../../../../services/document.service';
declare var require: any
import FileSaver from 'file-saver';
@Component({
selector: 'app-view-list-doc',
templateUrl: './view-list-doc.component.html',
styleUrls: ['./view-list-doc.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
NgSelectModule,
SharedModule,
MatDialogModule,
TranslateModule,
NgbPaginationModule,
],
})
export class ViewListDocComponent implements OnInit {
page = 0;
pageSize = 10;
listDoc: DocumentContentModel[] = []
search: string = ''
checkType: string = '0'
pagedItems: DocumentContentModel[] = [];
constructor(private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
}
get totalItems(): number {
return this.search == ''
? this.listDoc.length
: this.filterListDoc().length;
}
get totalPages(): number {
return Math.ceil(this.totalItems / this.pageSize);
}
get totalPagesArray(): number[] {
return Array(this.totalPages).fill(0);
}
goToPage(index: number): void {
if (index < 0 || index >= this.totalPages) return;
this.page = index;
this.updatePagedItems();
}
updatePagedItems() {
const data: DocumentContentModel[] = this.search === '' ? this.listDoc : this.filterListDoc();
const start = this.page * this.pageSize;
const end = start + this.pageSize;
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
}
deleteFile(item: DocumentContentModel) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.deleteExcelContent(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้')
}
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
async downloadFile(logId: string, lang: string) {
try {
const data = await this.documentService.downloadFileContent(logId, lang).toPromise();
if (data) {
FileSaver.saveAs(new Blob([data]), "file_download.doc");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
filterListDoc() {
return this.listDoc.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
}
async getListDoc() {
try {
const data = await firstValueFrom(this.documentService.getListExcelContent('0'));
this.listDoc = data.map(x => new DocumentContentModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
ngOnInit() {
this.getListDoc();
}
openAlertModal(message?: string) {
const modalRef = this.modalService.open(AlertModalComponent, {
centered: true,
backdrop: 'static'
})
modalRef.componentInstance.message = message ? message : ""
modalRef.result.then(result => {
this.modalService.dismissAll()
}, reason => {
this.modalService.dismissAll()
})
}
openLink(url: string) {
window.open(url, "_blank");
}
coverDate(date: string) {
return date.split('-').reverse().join('/')
}
}
src/app/DPU/common/myportal/management/approved-list/view-list-excel/view-list-excel.component.html 0 → 100644
<app-page-header [title]="'รายการ Excel'" [activeTitle]="'รายการเอกสาร'" [title1]="'รายการ Excel'"></app-page-header>
<!-- <div class="row" *ngIf="checkType == '1'">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการ Excel</h4>
<div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
</div>
<div class="table-responsive">
<table class="table table-striped mb-0 no-wrap v-middle ">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="text-center">ลิงค์</th>
<th scope="col" class="text-center">ไฟล์</th>
<th scope="col" class="text-center">วันที่อัพโหลด</th>
<th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listExcel.length == 0">
<td [attr.colspan]="checkType == '1' ? 8 : 7" class="text-center">ไม่พบข้อมูล</td>
</tr>
<tr
*ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<td class="text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}"
(click)="openEmployeeModal(data.getImage())"></td>
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
<td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.excelId)"></i></td>
<td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2"
(click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-end py-2">
<select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listExcel.length" [maxSize]="3"
[rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div>
</div>
</div>
</div>
<div class="row" *ngIf="checkType != '1'">
<div class="col-12">
<div class="py-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 mb-3" *ngFor="let data of filterListExcel()">
<div class="card border-5 border border-excel h-100 shadow">
<div class=" p-2 border-5">
<img width="100" class="card-img-top cover" src="{{data.getImage()}}"
(click)="openEmployeeModal(data.getImage())">
</div>
<div class="card-body">
<h4 class="card-title">{{ data.thName }}</h4>
<p class="card-text ">{{ data.thDesc }}</p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.excelId)"><i class="fas fa-download mr-1"></i>
ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
{{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
<p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i>
ตัวอย่างวิธีใช้งาน</p>
</div>
<div class="card-footer border-bottom-5">
<small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
</div>
</div>
</div>
</div> -->
<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">
รายการ Excel
</div>
<div class="flex flex-wrap gap-4">
<!-- Buttons -->
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหา"
aria-label=".form-control-sm example" [(ngModel)]='search'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
<thead class="bg-info text-white">
<tr>
<th class="!text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="!text-center">ลิงค์</th>
<th scope="col" class="!text-center">ไฟล์</th>
<th scope="col" class="!text-center">วันที่อัพโหลด</th>
<th scope="col" class="!text-center">วันล่าสุดดาวน์โหลด</th>
<th scope="col" class="!text-center">จำนวนดาวน์โหลด</th>
<th scope="col" *ngIf="checkType == '1'"></th>
</tr>
</thead>
<tbody>
<tr *ngIf="listExcel.length == 0">
<td [attr.colspan]="checkType == '1' ? 8 : 7" class="!text-center">ไม่พบข้อมูล</td>
</tr>
<tr *ngFor="let data of filterListExcel() | slice: page * pageSize : (page+1) * pageSize ; let i = index">
<td class="!text-center">{{i+1}}</td>
<td><img class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"
style="width: 250px; max-width: none;"></td>
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="!text-center"><i class="ri-links-line text-base font-bold cursor-pointer hover:text-primary"
(click)="openLink(data.link1)"></i></td>
<td class="!text-center"> <i
class="fa fa-download text-base font-bold cursor-pointer hover:text-primary"
(click)="downloadFile(data.excelId)"></i>
</td>
<td class="!text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
<td class="!text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
<td class="!text-center">{{data.dwTime}} ครั้ง</td>
<td *ngIf="checkType == '1'">
<button type="button"
class="bg-danger hover:bg-danger text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr *ngIf="filterListExcel().length === 0">
<td [attr.colspan]="checkType == '1' ? 10 : 9" class="!text-center py-4">
<ng-container *ngIf="search">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
<ng-container *ngIf="!search">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterListExcel().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 class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterListExcel().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 < filterListExcel().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 < filterListExcel().length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < filterListExcel().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>
</div>
\ No newline at end of file
src/app/DPU/common/myportal/management/approved-list/view-list-excel/view-list-excel.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { ExcelContentModel } from '../../../../../models/excel-content.model';
import { ExcelService } from '../../../../../services/excel.service';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
declare var require: any
import FileSaver from 'file-saver';
@Component({
selector: 'app-view-list-excel',
templateUrl: './view-list-excel.component.html',
styleUrls: ['./view-list-excel.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
NgSelectModule,
SharedModule,
MatDialogModule,
TranslateModule,
NgbPaginationModule,
],
})
export class ViewListExcelComponent implements OnInit {
page = 0;
pageSize = 10;
listExcel: ExcelContentModel[] = []
search: string = ''
checkType: string = '0'
pagedItems: ExcelContentModel[] = [];
constructor(private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
}
get totalItems(): number {
return this.search == ''
? this.listExcel.length
: this.filterListExcel().length;
}
get totalPages(): number {
return Math.ceil(this.totalItems / this.pageSize);
}
get totalPagesArray(): number[] {
return Array(this.totalPages).fill(0);
}
goToPage(index: number): void {
if (index < 0 || index >= this.totalPages) return;
this.page = index;
this.updatePagedItems();
}
updatePagedItems() {
const data: ExcelContentModel[] = this.search === '' ? this.listExcel : this.filterListExcel();
const start = this.page * this.pageSize;
const end = start + this.pageSize;
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
}
deleteFile(item: ExcelContentModel) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
modalRef.result.then(result => {
this.excelService.deleteExcelContent(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ')
this.getListExcel();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้')
}
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
async downloadFile(logId: string) {
try {
const data = await this.excelService.downloadFileContent(logId).toPromise();
if (data) {
FileSaver.saveAs(new Blob([data]), "file_download.xlsx");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
getStatus(status: string): string {
if (status === '0') {
return 'รออนุมัติ';
} else if (status === '1') {
return 'เปิดใช้งาน';
} else if (status === '2') {
return 'ไม่อนุมัติ';
} else {
return 'ไม่ทราบสถานะ'; // สำหรับกรณีที่ไม่ตรงกับเงื่อนไขใดเลย
}
}
filterListExcel() {
return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
}
async getListExcel() {
try {
const data = await firstValueFrom(this.excelService.getListExcelContent('0'));
this.listExcel = data.map(x => new ExcelContentModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
ngOnInit() {
this.getListExcel();
}
openLink(url: string) {
window.open(url, "_blank");
}
openAlertModal(message?: string) {
const modalRef = this.modalService.open(AlertModalComponent, {
centered: true,
backdrop: 'static'
})
modalRef.componentInstance.message = message ? message : ""
modalRef.result.then(result => {
this.modalService.dismissAll()
}, reason => {
this.modalService.dismissAll()
})
}
coverDate(date: string) {
return date.split('-').reverse().join('/')
}
}
src/app/DPU/common/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component.html
...@@ -131,35 +131,35 @@ ...@@ -131,35 +131,35 @@
<!-- <td >{{data.id}}</td> --> <!-- <td >{{data.id}}</td> -->
<td>{{ data.thName }}</td> <td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td> <td>{{ data.thDesc }}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td> <td class="text-center"><i class="ri-links-line text-base font-bold cursor-pointer hover:text-primary" (click)="openLink(data.link1)"></i></td>
<td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId)"></i></td> <td class="text-center"> <i class="fa fa-download text-base font-bold cursor-pointer hover:text-primary" (click)="downloadFile(data.logId)"></i></td>
<td class="text-center"> <td class="text-center">
<span class="fa-stack rt_anim" *ngIf="data.status == 0" ngbTooltip="รออนุมัติ" container="body" <span class="fa-stack rt_anim" *ngIf="data.status == 0" ngbTooltip="รออนุมัติ" container="body"
tooltipClass="myhrcolor-1"> tooltipClass="myhrcolor-1">
<i class="fa fa-circle fa-stack-2x text-info"></i> <i class="fa fa-circle fa-stack-2x text-info"></i>
<i class=" fas fa-hourglass-half fa-stack-1x fa-inverse"></i> <i class=" fa fa-hourglass-half fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="fa-stack rt_anim" *ngIf="data.status == 1" ngbTooltip="เปิดใช้งาน" container="body" <span class="fa-stack rt_anim" *ngIf="data.status == 1" ngbTooltip="เปิดใช้งาน" container="body"
tooltipClass="myhrcolor-2"> tooltipClass="myhrcolor-2">
<i class="fa fa-circle fa-stack-2x text-success"></i> <i class="fa fa-circle fa-stack-2x text-success"></i>
<i class=" fas fa-check fa-stack-1x fa-inverse"></i> <i class=" fa fa-check fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="fa-stack rt_anim" *ngIf="data.status == 2" ngbTooltip="ไม่อนุมัติ" container="body" <span class="fa-stack rt_anim" *ngIf="data.status == 2" ngbTooltip="ไม่อนุมัติ" container="body"
tooltipClass="myhrcolor-3"> tooltipClass="myhrcolor-3">
<i class="fa fa-circle fa-stack-2x text-danger"></i> <i class="fa fa-circle fa-stack-2x text-danger"></i>
<i class="fas fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i> <i class="fa fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i>
</span> </span>
</td> </td>
<td> <td>
<button type="button" class="btn btn-circle btn-success rounded-circle btn-sm mr-2" <button type="button" class="bg-success hover:bg-success text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(click)="onApprove(data)"><i class="fa fa-check"></i></button> (click)="onApprove(data)"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" <button type="button" class="bg-danger hover:bg-danger text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(click)="onCancelApprove(data)"><i class="fas fa-times"></i></button> (click)="onCancelApprove(data)"><i class="fa fa-times"></i></button>
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" <button type="button" class="bg-danger hover:bg-danger text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button> (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fa fa-trash"></i></button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
......
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