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

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

+.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.spec.ts

+/* 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-manage.component.css

+.page {
+    display: flex;
+    height: auto;
+    flex-direction: column;
+}
\ No newline at end of file

src/app/DPU/common/pdpa-manage/pdpa-manage.component.spec.ts

+/* 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/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

+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

+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

+export interface PdpaSummaryModel {
+  consentProfile: number
+  nonConsentProfile: number
+  totalProfile: number
+}

src/app/DPU/services/pdpa.service.ts

+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