myLearn-manage PDPA

src/app/DPU/models/pdpaMylearn.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface PdpaModel_myLearn {
+    version: string;
+    startDate: string;
+    endDate: string;
+    requestConsent: string;
+    requestConsentEng: string;
+    memberPdpa: any[];
+    status: number;
+    getName(): string
+    getStatus(): string
+  }
+
+  export class MyPdpaModel_myLearn extends BaseModel
+  implements PdpaModel_myLearn {
+    version: string;
+    startDate: string;
+    endDate: string;
+    requestConsent: string;
+    requestConsentEng: string;
+    memberPdpa: any[];
+    status: number;
+    constructor(data?: Partial<PdpaModel_myLearn>,
+        translateService?: TranslateService) {
+        super(data, translateService);
+        this.version = data?.version!;
+        this.startDate = data?.startDate!;
+        this.endDate = data?.endDate!;
+        this.requestConsent = data?.requestConsent!;
+        this.requestConsentEng = data?.requestConsentEng!;
+        this.memberPdpa = data?.memberPdpa!;
+        this.status = data?.status!
+        // this.status = data?.status!;
+    }
+    getName(): string {
+      return this.translateService.currentLang == "th"
+        ? this.requestConsent
+        : this.requestConsentEng;
+    }
+
+      getStatus(): string {
+    if (this.status == 1) {
+      return this.translateService.instant('Active');
+    } else {
+      return this.translateService.instant('Unactive');
+    }
+  }
+  }

src/app/DPU/mylearn/mylearn.module.ts

@@ -11,7 +11,12 @@ export const mylearn: Routes = [
         path: 'dashboard',
       loadComponent: () =>
         import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
-      }
+      },
+      {
+      path: 'mylearn-pdpa-manage',
+      loadComponent: () =>
+        import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
+      },
     ]
   }
 ]
@@ -24,6 +29,6 @@ export const mylearn: Routes = [
   declarations: [MylearnComponent],
   exports: [RouterModule],
 })
-export class MylearnModule { 
+export class MylearnModule {
   static routes = mylearn;
 }

src/app/DPU/mylearn/pdpa-manage/pdpa-manage.component.css

+.page {
+    display: flex;
+    height: auto;
+    flex-direction: column;
+}
+/* Base styling for the modal body content */
+  .ti-modal-body-content {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Form labels */
+  .ti-form-label {
+    font-size: 0.95rem;
+    color: #333;
+  }
+
+  /* Form inputs */
+  .ti-form-input {
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    padding: 0.6rem 1rem;
+    font-size: 1rem;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .ti-form-input:focus {
+    outline: none;
+    border-color: #3b82f6; /* Example primary color */
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+  }
+
+  /* Read-only input styling */
+  .bg-input-readonly {
+    background-color: #e5e7eb;
+    cursor: not-allowed;
+  }
+
+  /* Error text */
+  .text-danger {
+    color: #ef4444;
+  }
+
+  /* Tab button styling */
+  .tab-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px; /* Consistent width for tabs */
+    padding: 0.75rem 1rem;
+    border: 1px solid #d1d5db;
+    border-bottom: none; /* Remove bottom border for active tab effect */
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-align: center;
+    color: #6b7280;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none; /* Remove underline from anchor tags */
+  }
+
+  .tab-btn:hover {
+    color: #111827;
+    background-color: #f3f4f6;
+  }
+
+  /* Active tab styling */
+  .tab-btn.hs-tab-active {
+    background-color: #3b82f6; /* Example primary color */
+    border-color: #3b82f6;
+    color: #ffffff;
+  }
+
+  /* Custom primary color (replace with your actual primary color if different) */
+  .text-primary {
+    color: #3b82f6;
+  }
+
+  .bg-primary {
+    background-color: #3b82f6;
+  }

src/app/DPU/mylearn/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/services/pdpa.service.ts

 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
 import { PdpaConsentModel, PdpaModel } from '../models/pdpa.model';
 import { environment } from '../../../environments/environment';
 import { PdpaSummaryModel } from '../models/pdpaSummary.model';
 import { MyPdpaConfigModel, PdpaConfigModel } from '../models/pdpaConfig.model';
 import { ResponseModel } from '../models/base.model';
+import { MyPdpaModel_myLearn, PdpaModel_myLearn } from '../models/pdpaMylearn.model';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PdpaService {
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient,private translateService: TranslateService) { }
 
   getPdpaList(): Observable<PdpaModel[]> {
     return this.http.get<PdpaModel[]>(`${environment.baseUrl}/pdpa/consent-profile/lists`);
@@ -68,4 +70,33 @@ export class PdpaService {
   getLastVersion(): Observable<PdpaConfigModel> {
     return this.http.get<PdpaConfigModel>(`${environment.baseUrl}/pdpa/consent-profile/last`);
   }
+
+  // myLearn
+  myLearnUrl = "https://mylearn-uat.myhr.co.th/api"
+  // getPdpaList_myLearn(){
+  //   return this.http.get<any>(this.myLearnUrl + "/pdpa" + "/lists?companyId=" );
+  // }
+  // getConfigList_myLearn(){
+  //   return this.http.get<any>(this.myLearnUrl + "/pdpa" + "/lists?companyId=");
+  // }
+  getConfigList_myLearn(): Observable<PdpaModel_myLearn[]> {
+    return this.http.get<PdpaModel_myLearn[]>(this.myLearnUrl + "/pdpa" + "/lists?companyId=")
+    .pipe(
+        map((e) => e.map((e) => new MyPdpaModel_myLearn(e, this.translateService)))
+      );
+  }
+
+  save_pdpa_myLearn(body: PdpaModel_myLearn, conSent: string) {
+    return this.http.post<PdpaModel_myLearn>(this.myLearnUrl+"/pdpa?consent="+conSent!, new MyPdpaModel_myLearn(body));
+  }
+
+    delete_pdpa_myLearn(body: PdpaModel_myLearn) {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: new MyPdpaModel_myLearn(body),
+    };
+    return this.http.delete<ResponseModel>(this.myLearnUrl+"/pdpa?companyId=", options);
+  }
 }

src/app/shared/components/header/header.component.html

@@ -343,7 +343,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/mylearn/dashboard"
+                  <a routerLink="/mylearn/mylearn-pdpa-manage"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/mylearn-logo.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">