Skip to content

M
myjob-manage
Commit ec2177a8 by Natthaphat
Options

quill editor ใช้หน้าจัดการ pdpa

parent cf669e9f
Showing with 1538 additions and 8 deletions
src/app/DPU/common/common.module.ts
......@@ -25,6 +25,16 @@ export const admin: Routes = [
loadComponent: () =>
import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
},
{
path: 'pdpa-manage',
loadComponent: () =>
import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
},
{
path: 'admin-manage',
loadComponent: () =>
import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
},
//////////////emp/////////////////
{
path: 'emp/department',
......
src/app/DPU/common/company-manage/company-manage.component.html
......@@ -48,6 +48,7 @@
<th scope="col" class="text-start">ข้อมูลบริษัท</th>
<th scope="col" class="text-start">{{"Status" | translate}}</th>
<!-- <th scope="col" class="text-start">{{"Update Date" | translate}}</th> -->
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
......
src/app/DPU/common/pdpa-manage/pdpa-config/pdpa-config.component.css 0 → 100644
.page {
display: flex;
height: 100%;
flex-direction: column;
}
\ No newline at end of file
src/app/DPU/common/pdpa-manage/pdpa-config/pdpa-config.component.html 0 → 100644
<app-page-header [title]="'จัดการข้อมูลส่วนบุคคล'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'จัดการข้อมูลส่วนบุคคล'"></app-page-header>
<div class="block-main-content px-8 py-2">
<div class="page">
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header flex justify-between items-center flex-wrap gap-4">
<!-- ฝั่งซ้าย -->
<div class="flex items-center gap-3">
<div class="box-title">
{{ 'Edit Version' | translate }}
<span class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">
{{ itemsList.length }}
</span>
</div>
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="onBackPage()">
<i class="ti ti-chevron-left"></i>
{{ "Back" | translate }}
</button>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Consent List' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2"
*ngIf="someSelected" (click)="deleteSelect()"><i
class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาสมาชิก"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="ti-modal-body-content " style="margin-top: 10px;">
<div class="sm:grid grid-cols-12 gap-x-6 space-y-4 lg:space-y-0">
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"Version" | translate}}
*</label>
<input type="text" class="my-auto ti-form-input w-full bg-input-readonly" readonly>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6 space-y-4 lg:space-y-0 mt-1">
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"Start Date" | translate}} *</label>
<input type="text" class="my-auto ti-form-input w-full">
</div>
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"End Date" | translate}}</label>
<input type="text" class="ti-form-input w-full">
</div>
</div>
<div class="body-content mt-8">
<div class="!page">
<nav class="flex rtl:space-x-reverse space-x-2 border-b border-gray-200">
<a (click)="currentTab=1"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1"
aria-controls="card-type-1">
ไทย
</a>
<a (click)="currentTab=2"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2"
aria-controls="card-type-2">
อังกฤษ
</a>
<a (click)="currentTab=3"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3"
aria-controls="card-type-3">
จีน
</a>
</nav>
<div class="pt-50px">
<div *ngIf="currentTab==1" id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<quill-editor [modules]="quillConfig" theme="snow"
>
</quill-editor>
</div>
<div *ngIf="currentTab==2" id="card-type-2" role="tabpanel" aria-labelledby="card-type-item-2">
<quill-editor [modules]="quillConfig" theme="snow"
>
</quill-editor>
</div>
<div *ngIf="currentTab==3" id="card-type-3" role="tabpanel" aria-labelledby="card-type-item-3">
<quill-editor [modules]="quillConfig" theme="snow"
>
</quill-editor>
</div>
<!-- <div *ngIf="currentTab==2" id="card-type-2" class="hidden" role="tabpanel"
aria-labelledby="card-type-item-2">
<app-sub-grade-registration [dataSelect]="dataSelect"
(sendDataSelect)="dataSelect=$event"></app-sub-grade-registration>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start:: Create Contact -->
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
<!-- {{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('User' | translate) }} -->
สร้างเวอร์ชั่น
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">{{'version' | translate}}</label>
<input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': action === 'edit' }"
id="deal-title" placeholder="" [(ngModel)]="consent.version" [readonly]="action === 'edit'">
<div class="text-danger" *ngIf="!consent.version">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
<label for="deal-title" class="form-label">{{'วันที่เริ่ม' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="consent.startDate">
<div class="text-danger" *ngIf="!consent.startDate">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
<label for="deal-title" class="form-label">{{'วันที่สินสุด' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="consent.endDate">
<div class="text-danger" *ngIf="!consent.endDate">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label class="form-label">{{'Status' | translate}}</label>
<ng-select name="choices-multiple-remove-button2" id="choices-multiple-remove-button2" placeholder=""
[(ngModel)]="consent.status">
<ng-option [value]="0">{{'Unactive' | translate}}</ng-option>
<ng-option [value]="1">{{'Active' | translate}}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
<!-- End:: Create Contact -->
\ No newline at end of file
src/app/DPU/common/pdpa-manage/pdpa-config/pdpa-config.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PdpaConfigComponent } from './pdpa-config.component';
describe('PdpaConfigComponent', () => {
let component: PdpaConfigComponent;
let fixture: ComponentFixture<PdpaConfigComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PdpaConfigComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PdpaConfigComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/DPU/common/pdpa-manage/pdpa-config/pdpa-config.component.ts 0 → 100644
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { NgSelectModule } from "@ng-select/ng-select";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import swal from 'sweetalert';
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { FileUploadModule } from 'ng2-file-upload';
import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
import { Router } from "@angular/router";
import { SharedModule } from "../../../../shared/shared.module";
import { MyPdpaConsentModel, PdpaConsentModel, PdpaModel } from "../../../models/pdpa.model";
import { PdpaService } from "../../../services/pdpa.service";
import { TokenService } from "../../../../shared/services/token.service";
import { QuillModule } from "ngx-quill";
@Component({
selector: 'app-pdpa-config',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
ReactiveFormsModule,
MatPaginator,
FileUploadModule,
QuillModule
],
templateUrl: './pdpa-config.component.html',
styleUrl: './pdpa-config.component.css'
})
export class PdpaConfigComponent {
quillConfig = {
toolbar: [
['link'], // เพิ่มปุ่มลิงก์
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['clean'], // remove formatting button
]
};
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef;
@Input() pdpaconfig: PdpaConsentModel = new MyPdpaConsentModel({})
@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
currentTab = 1
edit = false
onBackPage() {
this.sendEdit.emit(false)
}
action = "new";
allSelected = false;
someSelected = false;
confirmPassword = ""
itemsList: MyPdpaConsentModel[] = []
filterList: MyPdpaConsentModel[] = []
consent: MyPdpaConsentModel = new MyPdpaConsentModel()
selectedItems = new Map<string, boolean>();
roleList: MyPdpaConsentModel[] = []
empList: MyPdpaConsentModel[] = []
descName = 'engName'
pageIndex = 0;
uploaderProfile: FileUploader | undefined;
uploadErrorMsg: string = "";
modalStatus: "add" | "edit" = "add"
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
_searchTerm = "";
constructor(private pdpaService: PdpaService, public translate: TranslateService, private tokenService: TokenService, private router: Router) {
}
ngOnInit(): void {
this.pdpaService.getConfigList().subscribe(res => {
this.itemsList = res.map(item => new MyPdpaConsentModel(item, this.translate));
this.filterList = [...this.itemsList];
});
}
editVersion(version: string) {
this.router.navigate(['/admin/pdpa-config/edit', version]); // ไปอีกหน้าหนึ่ง
}
createNewVersion() {
this.router.navigate(['/admin/pdpa-config/new']);
}
deleteVersion(version: string) {
swal({
title: "ยืนยันลบเวอร์ชัน?",
text: version,
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ลบ"]
}).then(confirm => {
if (confirm) {
this.pdpaService.deleteConfig(version).subscribe(() => {
swal("สำเร็จ", "ลบเวอร์ชันเรียบร้อย", "success");
this.ngOnInit();
});
}
});
}
filter(v: string): MyPdpaConsentModel[] {
const search = v.toLowerCase();
return this.itemsList.filter(x =>
x.version?.toLowerCase().includes(search) ||
x.startDate?.toLowerCase().includes(search) ||
x.endDate?.toLowerCase().includes(search) ||
x.status?.toLowerCase().includes(search)
);
}
delete(item: PdpaModel) {
swal({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes,Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.pdpaService.deletePost(item).subscribe(result => {
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
this.ngOnInit()
})
}
});
}
new() {
this.action = 'add'
this.consent = new MyPdpaConsentModel()
}
view(item: PdpaModel) {
this.action = 'edit'
this.confirmPassword = ''
this.consent = new MyPdpaConsentModel(item.pdpa, this.translate);
}
save() {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
console.log(this.consent);
// if (this.action == 'add') {
// this.pdpaService.postPdpa(this.consent).subscribe(result => {
// console.log(result)
// swal("Save Success!!", "บันทึกข้อมูลสมาชิก", "success");
// this.ngOnInit()
// this.childModal?.nativeElement.click()
// })
// } else if (this.action == 'edit') {
// this.pdpaService.postPdpa(this.consent).subscribe(result => {
// console.log(result)
// swal("Update Success!!", "บันทึกข้อมูลสมาชิก", "success");
// this.ngOnInit()
// this.childModal?.nativeElement.click()
// })
// }
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.version, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.version));
}
onCheckboxChange(version: string) {
const isSelected = this.selectedItems.get(version) || false;
this.selectedItems.set(version, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.version));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.version));
}
deleteSelect() {
let employeeInfo = '';
this.selectedItems.forEach((isSelected, version) => {
if (isSelected) {
const user = this.itemsList.find(user => user.version === version) as MyPdpaConsentModel;
if (user) {
employeeInfo += `${this.translate.instant('version')}: ${user.version}\n`;
}
}
});
swal({
title: "Are you sure?",
text: employeeInfo,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes, Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.selectedItems.forEach((isSelected, version) => {
if (isSelected) {
const user = this.itemsList.find(user => user.version === version);
if (user) {
this.pdpaService.deletePost(user).subscribe(result => {
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
this.ngOnInit();
});
}
}
});
}
});
}
// adjustSelect(status: number) {
// let title = "Are you sure?"
// let employeeInfo = ''; // ตัวแปรสำหรับเก็บข้อมูลพนักงาน
// this.selectedItems.forEach((isSelected, version) => {
// if (isSelected) {
// const user = this.itemsList.find(user => user.version === version);
// if (user) {
// employeeInfo += `${this.translate.instant('Fullname')}: ${user.getFullname()}\n`;
// }
// }
// });
// swal({
// title: title,
// text: employeeInfo,
// icon: "warning",
// dangerMode: false,
// buttons: ["Cancel", "Confirm"],
// })
// .then((willDelete: any) => {
// if (willDelete) {
// this.selectedItems.forEach((isSelected, version) => {
// if (isSelected) {
// const user = this.itemsList.find(user => user.version === version);
// if (user) {
// user.pdpa.status = status
// this.pdpaService.postPdpa(user).subscribe(result => {
// swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
// this.ngOnInit();
// });
// }
// }
// });
// }
// });
// }
filterEmp(empId: string) {
this.consent = this.empList.filter(e => e.version == empId)[0]
}
}
src/app/DPU/common/pdpa-manage/pdpa-manage.component.css 0 → 100644
.page {
display: flex;
height: auto;
flex-direction: column;
}
\ No newline at end of file
src/app/DPU/common/pdpa-manage/pdpa-manage.component.html 0 → 100644
<ng-container *ngIf="!edit">
<app-page-header [title]="'จัดการ PDPA'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการ PDPA'"></app-page-header>
<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">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Add Version' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาสมาชิก"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
<!-- <div>
<input class="form-control form-control" type="text" placeholder="กรองตามบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div> -->
<!-- <a href="javascript:void(0);" class="ti-btn ti-btn-primary-full !py-1 !px-2" aria-expanded="false">
เรียงตาม<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Newest</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Oldest</a></li>
</ul> -->
</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-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">{{ 'Version' | translate}}</th>
<th scope="col" class="text-start">{{ 'Start Date' | translate}}</th>
<th scope="col" class="text-start">{{ 'End Date' | translate}}</th>
<th scope="col" class="text-start">{{ 'Status' | translate}}</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (itemsList.length > 0) {
@for(item of itemsList;track itemsList){
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox"><input class="form-check-input" type="checkbox"
[checked]="selectedItems.get(item.version)" (change)="onCheckboxChange(item.version)"
aria-label="..." value="">
</td>
<!-- <td>
<div class="flex items-center">
<span class="avatar avatar-sm p-1 me-1 bg-light !rounded-full">
<img [src]="item.getPicture()" alt="" id="profile-img">
</span>
<div class="ms-2">
<p class="font-semibold mb-0 flex items-center text-primary"><a (click)="view(item)">
{{item.getFullname()}}</a></p>
<p class="text-[0.75rem] text-muted mb-0">{{item.memberId}}</p>
</div>
</div>
</td> -->
<!-- <td>
<div class="flex">
<div class="ms-2">
<p class="font-semibold mb-0 flex items-center text-primary"><a (click)="view(item)"
data-hs-overlay="#modal-detail">
{{item.username}}</a></p>
<p class="text-[0.75rem] text-muted mb-0">{{item.memberId}}</p>
</div>
</div>
</td> -->
<td>
<div>
<span class="block">{{item.version}}</span>
</div>
</td>
<td>
<div>
<span class="block mb-1">{{item.startDate| date
: 'medium'}}</span>
</div>
</td>
<td>
<div>
<span class="block mb-1">{{item.endDate | date
: 'medium'}}</span>
</div>
</td>
<td> <span
class="badge bg-{{ item.status == '1' ? 'primary' : 'danger'}} text-white">{{item.getStatus()}}</span>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
class="ri-pencil-line"></i></a>
<a aria-label="anchor" href="javascript:void(0);" (click)="deleteVersion(item.version)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
class="ri-delete-bin-line"></i></a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.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="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem]"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem]"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start:: Add Version Oldest -->
<!-- <div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
{{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('User' | translate) }}
สร้างเวอร์ชั่น
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">{{'version' | translate}}</label>
<input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': modalStatus === 'edit' }"
id="deal-title" placeholder="" [(ngModel)]="consent.version" [readonly]="modalStatus === 'edit'">
<div class="text-danger" *ngIf="!consent.version">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
<label for="deal-title" class="form-label">{{'วันที่เริ่ม' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="consent.startDate">
<div class="text-danger" *ngIf="!consent.startDate">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
<label for="deal-title" class="form-label">{{'วันที่สินสุด' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="consent.endDate">
<div class="text-danger" *ngIf="!consent.endDate">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label class="form-label">{{'Status' | translate}}</label>
<ng-select name="choices-multiple-remove-button2" id="choices-multiple-remove-button2" placeholder=""
[(ngModel)]="consent.status">
<ng-option [value]="0">{{'Unactive' | translate}}</ng-option>
<ng-option [value]="1">{{'Active' | translate}}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div> -->
<!-- End:: Add Version Oldest -->
<ng-template #modalDetail let-modal>
<!-- <div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]"> -->
<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">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
{{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('Version' | translate) }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="modalRef.close()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="!page">
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header flex justify-between items-center flex-wrap gap-4">
<!-- ฝั่งซ้าย -->
<div class="flex items-center gap-3">
<!-- <div class="box-title">
{{ 'Edit Version' | translate }}
<span class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">
{{ itemsList.length }}
</span>
</div> -->
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2"
(click)="new()" data-hs-overlay="#modal-detail"><i
class="ri-add-line font-semibold align-middle"></i>{{ 'Consent List' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2"
*ngIf="someSelected" (click)="deleteSelect()"><i
class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<!-- <div>
<input class="form-control form-control" type="text" placeholder="ค้นหาสมาชิก"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div> -->
</div>
</div>
<div class="ti-modal-body-content " style="margin-top: 10px;">
<div class="sm:grid grid-cols-12 gap-x-6 space-y-4 lg:space-y-0">
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"Version" | translate}}
*</label>
<input type="text" class="my-auto ti-form-input w-full bg-input-readonly" readonly
[(ngModel)]="consent.version">
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6 space-y-4 lg:space-y-0 mt-1">
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"Start Date" | translate}}
*</label>
<input type="text" class="my-auto ti-form-input w-full" [(ngModel)]="consent.startDate">
</div>
<div
class="col-span-12 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"
style="margin-left: 10%;">
<label class="w-56 ti-form-label mb-0 text-primary font-bold">{{"End Date" |
translate}}</label>
<input type="text" class="ti-form-input w-full" [(ngModel)]="consent.endDate">
</div>
</div>
<div class="body-content mt-8">
<div class="!page">
<nav class="flex rtl:space-x-reverse space-x-2 border-b border-gray-200">
<a (click)="currentTab=1"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1"
aria-controls="card-type-1">
ไทย
</a>
<a (click)="currentTab=2"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2"
aria-controls="card-type-2">
อังกฤษ
</a>
<a (click)="currentTab=3"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3"
aria-controls="card-type-3">
จีน
</a>
</nav>
<div class="pt-50px">
<div *ngIf="currentTab==1" id="card-type-1" role="tabpanel"
aria-labelledby="card-type-item-1">
<quill-editor [modules]="quillConfig" [styles]="{'max-height': '200px','overflow-y': 'auto'}"
[(ngModel)]="consent.requestConsentThai" [ngModelOptions]="{standalone: true}"
theme="snow">
</quill-editor>
</div>
<div *ngIf="currentTab==2" id="card-type-2" role="tabpanel"
aria-labelledby="card-type-item-2">
<quill-editor [modules]="quillConfig" [styles]="{'max-height': '200px','overflow-y': 'auto'}"
[(ngModel)]="consent.requestConsentEng" [ngModelOptions]="{standalone: true}"
theme="snow">
</quill-editor>
</div>
<div *ngIf="currentTab==3" id="card-type-3" role="tabpanel"
aria-labelledby="card-type-item-3">
<quill-editor [modules]="quillConfig" [styles]="{'max-height': '200px','overflow-y': 'auto'}"
[(ngModel)]="consent.requestConsentChina" [ngModelOptions]="{standalone: true}"
theme="snow">
</quill-editor>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ti-modal-footer flex justify-center gap-4">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
<!-- </div> -->
</ng-template>
</ng-container>
<ng-container *ngIf="edit">
<app-pdpa-config [pdpaconfig]="pdpaconfig" (sendEdit)="edit=false"></app-pdpa-config>
</ng-container>
src/app/DPU/common/pdpa-manage/pdpa-manage.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PdpaManageComponent } from './pdpa-manage.component';
describe('PdpaManageComponent', () => {
let component: PdpaManageComponent;
let fixture: ComponentFixture<PdpaManageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PdpaManageComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PdpaManageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/DPU/common/pdpa-manage/pdpa-manage.component.ts 0 → 100644
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
import { NgSelectModule } from "@ng-select/ng-select";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { FormsModule } from "@angular/forms";
import swal from 'sweetalert';
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { FileUploadModule } from 'ng2-file-upload';
import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
import { SharedModule } from "../../../shared/shared.module";
import { UserProfileModel } from "../../models/user.model";
import { UserRoleModel } from "../../models/user-role-model";
import { TokenService } from "../../../shared/services/token.service";
import { environment } from "../../../../environments/environment";
import { PdpaService } from "../../services/pdpa.service";
import { MyPdpaConsentModel, MyPdpaModel, PdpaConsentModel, PdpaModel } from "../../models/pdpa.model";
import { PdpaConfigModel } from "../../models/pdpaConfig.model";
import { Router } from "@angular/router";
import { PdpaConfigComponent } from "./pdpa-config/pdpa-config.component";
import { QuillModule } from "ngx-quill";
import { MatDialog } from "@angular/material/dialog";
@Component({
selector: 'app-pdpa-manage',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule,
PdpaConfigComponent,
QuillModule
],
templateUrl: './pdpa-manage.component.html',
styleUrl: './pdpa-manage.component.css'
})
export class PdpaManageComponent {
quillConfig = {
toolbar: [
['link'], // เพิ่มปุ่มลิงก์
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['clean'], // remove formatting button
]
};
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
modalRef: any;
pdpaconfig!: MyPdpaConsentModel;
edit = false
currentTab = 1
// modalStatus = "new";
allSelected = false;
someSelected = false;
confirmPassword = ""
itemsList: MyPdpaConsentModel[] = []
filterList: MyPdpaConsentModel[] = []
consent: MyPdpaConsentModel = new MyPdpaConsentModel()
selectedItems = new Map<string, boolean>();
roleList: MyPdpaConsentModel[] = []
empList: MyPdpaConsentModel[] = []
descName = 'engName'
pageIndex = 0;
uploaderProfile: FileUploader | undefined;
uploadErrorMsg: string = "";
modalStatus: "add" | "edit" = "add"
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
editVersion(version: string) {
this.pdpaService.getConfigList().subscribe(res => {
const matched = res.find(item => item.version === version);
if (matched) {
this.pdpaconfig = new MyPdpaConsentModel(matched, this.translate);
this.edit = true;
}
});
}
_searchTerm = "";
constructor(private pdpaService: PdpaService, public translate: TranslateService, private tokenService: TokenService, private router: Router, private modal: MatDialog) {
}
ngOnInit(): void {
this.pdpaService.getConfigList().subscribe(res => {
this.itemsList = res.map(item => new MyPdpaConsentModel(item, this.translate));
this.filterList = [...this.itemsList];
});
}
createNewVersion() {
this.router.navigate(['/admin/pdpa-config/new']);
}
deleteVersion(version: string) {
swal({
title: "ยืนยันลบเวอร์ชัน?",
text: version,
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ลบ"]
}).then(confirm => {
if (confirm) {
this.pdpaService.deleteConfig(version).subscribe(() => {
swal("สำเร็จ", "ลบเวอร์ชันเรียบร้อย", "success");
this.ngOnInit();
});
}
});
}
filter(v: string): MyPdpaConsentModel[] {
const search = v.toLowerCase();
return this.itemsList.filter(x =>
x.version?.toLowerCase().includes(search) ||
x.startDate?.toLowerCase().includes(search) ||
x.endDate?.toLowerCase().includes(search) ||
x.status?.toLowerCase().includes(search)
);
}
delete(item: PdpaModel) {
swal({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes,Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.pdpaService.deletePost(item).subscribe(result => {
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
this.ngOnInit()
})
}
});
}
new() {
this.modalStatus = 'add'
this.openModal()
this.consent = new MyPdpaConsentModel()
}
view(item: MyPdpaConsentModel) {
this.modalStatus = 'edit'
this.confirmPassword = ''
this.openModal()
this.consent = new MyPdpaConsentModel(item, this.translate);
}
save() {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
console.log(this.consent);
// if (this.modalStatus == 'add') {
// this.pdpaService.postPdpa(this.consent).subscribe(result => {
// console.log(result)
// swal("Save Success!!", "บันทึกข้อมูลสมาชิก", "success");
// this.ngOnInit()
// this.childModal?.nativeElement.click()
// })
// } else if (this.modalStatus == 'edit') {
// this.pdpaService.postPdpa(this.consent).subscribe(result => {
// console.log(result)
// swal("Update Success!!", "บันทึกข้อมูลสมาชิก", "success");
// this.ngOnInit()
// this.childModal?.nativeElement.click()
// })
// }
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.version, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.version));
}
onCheckboxChange(version: string) {
const isSelected = this.selectedItems.get(version) || false;
this.selectedItems.set(version, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.version));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.version));
}
deleteSelect() {
let employeeInfo = '';
this.selectedItems.forEach((isSelected, version) => {
if (isSelected) {
const user = this.itemsList.find(user => user.version === version) as MyPdpaConsentModel;
if (user) {
employeeInfo += `${this.translate.instant('version')}: ${user.version}\n`;
}
}
});
swal({
title: "Are you sure?",
text: employeeInfo,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes, Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.selectedItems.forEach((isSelected, version) => {
if (isSelected) {
const user = this.itemsList.find(user => user.version === version);
if (user) {
this.pdpaService.deletePost(user).subscribe(result => {
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
this.ngOnInit();
});
}
}
});
}
});
}
// adjustSelect(status: number) {
// let title = "Are you sure?"
// let employeeInfo = ''; // ตัวแปรสำหรับเก็บข้อมูลพนักงาน
// this.selectedItems.forEach((isSelected, version) => {
// if (isSelected) {
// const user = this.itemsList.find(user => user.version === version);
// if (user) {
// employeeInfo += `${this.translate.instant('Fullname')}: ${user.getFullname()}\n`;
// }
// }
// });
// swal({
// title: title,
// text: employeeInfo,
// icon: "warning",
// dangerMode: false,
// buttons: ["Cancel", "Confirm"],
// })
// .then((willDelete: any) => {
// if (willDelete) {
// this.selectedItems.forEach((isSelected, version) => {
// if (isSelected) {
// const user = this.itemsList.find(user => user.version === version);
// if (user) {
// user.pdpa.status = status
// this.pdpaService.postPdpa(user).subscribe(result => {
// swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
// this.ngOnInit();
// });
// }
// }
// });
// }
// });
// }
openModal() {
this.modalRef = this.modal.open(this.modalDetail, {
width: '1000px',
})
}
closeModal() {
this.modalRef.close()
}
filterEmp(empId: string) {
this.consent = this.empList.filter(e => e.version == empId)[0]
}
}
src/app/DPU/common/user-management/user-setting/user-setting.component.html
......@@ -64,6 +64,7 @@
<!-- <th scope="col" class="text-start">{{ 'User Group' | translate}}</th> -->
<th scope="col" class="text-start">{{ 'Status' | translate}}</th>
<th scope="col" class="text-start">{{ 'Update Date' | translate}}</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
......@@ -118,9 +119,10 @@
<td> <span
class="badge bg-{{ item.status == 1 ? 'primary' : 'danger'}} text-white">{{item.getStatus()}}</span>
</td>
<td><span class="badge bg-info/10 text-primary"><i class="bi bi-clock me-1"></i>{{item.lastModifiedDate | date
: 'medium'}}</span></td>
<td>
<td><span class="badge bg-info/10 text-primary"><i class="bi bi-clock me-1"></i>{{item.lastModifiedDate
| date
: 'medium'}}</span>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
......@@ -266,8 +268,7 @@
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
<label for="deal-title" class="form-label">{{'นามสกุล(ไทย)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="selectModel.thLastname">
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.thLastname">
<div class="text-danger" *ngIf="!selectModel.thLastname">
{{'Please fill in information' | translate}}
</div>
......@@ -290,8 +291,7 @@
</div>
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='edit'">
<label for="deal-title" class="form-label">{{'ชื่อ-นามสกุล(ไทย)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="selectModel.thFullName">
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.thFullName">
<div class="text-danger" *ngIf="!selectModel.thFullName">
{{'Please fill in information' | translate}}
</div>
......@@ -299,7 +299,8 @@
<div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='edit'">
<label for="deal-title" class="form-label">{{'ชื่อ-นามสกุล(อังกฤษ)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.engFullName">
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="selectModel.engFullName">
<div class="text-danger" *ngIf="!selectModel.engFullName">
{{'Please fill in information' | translate}}
</div>
......
src/app/DPU/models/pdpa.model.ts 0 → 100644
import { TranslateService } from "@ngx-translate/core"
import { BaseModel, checkData } from "./base.model"
import { environment } from "../../../environments/environment"
export interface PdpaModel {
profileId: string
thFirstname: string
engFirstname: string
thLastname: string
engLastname: string
picture: string
sex: number
phoneCurrent: string
thFullName: string
engFullName: string
consentDate: string
remoteIp: string
serverName: string
pdpa: PdpaConsentModel
consentStatus: boolean
}
export class MyPdpaModel extends BaseModel implements PdpaModel {
profileId: string
thFirstname: string
engFirstname: string
thLastname: string
engLastname: string
picture: string
sex: number
phoneCurrent: string
thFullName: string
engFullName: string
consentDate: string
remoteIp: string
serverName: string
pdpa: PdpaConsentModel
consentStatus: boolean
constructor(data?: Partial<PdpaModel>, translateService?: TranslateService) {
super(data, translateService)
this.profileId = data?.profileId || ''
this.thFirstname = data?.thFirstname || ''
this.engFirstname = data?.engFirstname || ''
this.thLastname = data?.thLastname || ''
this.engLastname = data?.engLastname || ''
this.picture = data?.picture || ''
this.sex = data?.sex ?? 0
this.phoneCurrent = data?.phoneCurrent || ''
this.thFullName = data?.thFullName || ''
this.engFullName = data?.engFullName || ''
this.remoteIp = data?.remoteIp || ''
this.serverName = data?.serverName || ''
this.pdpa = new MyPdpaConsentModel(data?.pdpa, translateService)
}
getPicture(): string {
return this.picture ? environment.baseUrl + '/images/' + this.picture : './assets/images/faces/1.jpg';
}
getFullname(): string {
return this.thFirstname + " " + this.thLastname;
}
getName(): string {
const th = this.thFullName || '';
const en = this.engFullName || '';
return this.translateService?.currentLang === 'th' ? th : en;
}
}
export interface PdpaConsentModel {
version: string
startDate: string
endDate: string
status: string
requestConsentThai: string
requestConsentEng: string
requestConsentChina: string
}
export class MyPdpaConsentModel extends BaseModel implements PdpaConsentModel {
version: string
startDate: string
endDate: string
status: string
requestConsentThai: string
requestConsentEng: string
requestConsentChina: string
constructor(data?: Partial<PdpaConsentModel>, translateService?: TranslateService) {
super(data, translateService)
this.version = data?.version || ''
this.startDate = data?.startDate || ''
this.endDate = data?.endDate || ''
this.status = data?.status || ''
this.requestConsentThai = data?.requestConsentThai || ''
this.requestConsentThai = data?.requestConsentThai || ''
this.requestConsentChina = data?.requestConsentChina || ''
}
getStatus(): string {
if (this.status == "1") {
return this.translateService.instant('Active');
} else {
return this.translateService.instant('Unactive');
}
}
}
\ No newline at end of file
src/app/DPU/models/pdpaConfig.model.ts 0 → 100644
export interface PdpaConfigModel {
version: string
startDate: string
endDate: string
status: string
requestConsentThai: string
requestConsentEng: string
requestConsentChina: string
}
\ No newline at end of file
src/app/DPU/models/pdpaSummary.model.ts 0 → 100644
export interface PdpaSummaryModel {
consentProfile: number
nonConsentProfile: number
totalProfile: number
}
src/app/DPU/services/pdpa.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PdpaConsentModel, PdpaModel } from '../models/pdpa.model';
import { environment } from '../../../environments/environment';
import { PdpaSummaryModel } from '../models/pdpaSummary.model';
import { PdpaConfigModel } from '../models/pdpaConfig.model';
@Injectable({
providedIn: 'root'
})
export class PdpaService {
constructor(private http: HttpClient) { }
getPdpaList(): Observable<PdpaModel[]> {
return this.http.get<PdpaModel[]>(`${environment.baseUrl}/pdpa/consent-profile/lists`);
}
getPdpaNonList(): Observable<PdpaModel[]> {
return this.http.get<PdpaModel[]>(`${environment.baseUrl}/pdpa/consent-profile-non/lists`);
}
postPdpa(body: any): Observable<any> {
return this.http.post(`${environment.baseUrl}/pdpa/consent-profile`, body, { observe: 'response' });
}
deletePost(body: any): Observable<any> {
const option = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
body: body
};
return this.http.delete<any>(`${environment.baseUrl}/pdpa/consent-profile`, option);
}
// ใช้กับ PdpaConfigModel
getConfigList(): Observable<PdpaConsentModel[]> {
return this.http.get<PdpaConsentModel[]>(`${environment.baseUrl}/pdpa/config/lists`);
}
getConfigByVersion(version: string): Observable<PdpaConsentModel> {
return this.http.get<PdpaConsentModel>(`${environment.baseUrl}/pdpa/config/${version}`);
}
postConfig(data: PdpaConsentModel): Observable<any> {
return this.http.post(`${environment.baseUrl}/pdpa/config`, data);
}
deleteConfig(version: string): Observable<any> {
const options = {
headers: new HttpHeaders({ "Content-Type": "application/json" }),
body: { version: version }
};
return this.http.delete(`${environment.baseUrl}/pdpa/config`, options);
}
// ใช้กับ PdpaSummaryModel
getSummaryByVersion(version: string): Observable<PdpaSummaryModel> {
return this.http.get<PdpaSummaryModel>(`${environment.baseUrl}/pdpa/consent-profile/total/${version}`);
}
getLastVersion(): Observable<PdpaConsentModel> {
return this.http.get<PdpaConsentModel>(`${environment.baseUrl}/pdpa/consent-profile/last`);
}
}
src/app/shared/services/nav.service.ts
......@@ -114,6 +114,13 @@ export class NavService implements OnDestroy {
title: 'จัดการสิทธิ์ผู้ดูแลระบบ',
type: 'link',
},
{
icon: 'news',
path: '/admin/pdpa-manage',
title: 'จัดการ PDPA',
type: 'link',
},
// { headTitle: 'User Management' },
];
......
src/assets/css/style.css
......@@ -1053,6 +1053,10 @@ uhfdsj .ngx-colors-overlay.undefined .ng-star-inserted:not(.circle.button) {
content: "\ea6e";
}
.ql-editor {
font-family: 'Prompt', sans-serif;
}
.h4 {
font-size: 1.5rem;
}
......
src/styles.scss
......@@ -29,6 +29,8 @@
@import "../node_modules/ngx-bar-rating/themes/br-square-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-stars-theme.scss";
@import "../node_modules/angular-calendar/scss/angular-calendar.scss";
@import '../node_modules/quill/dist/quill.core.css';
@import '../node_modules/quill/dist/quill.snow.css';
// @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
//swiperjs
......
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