เเก้ชน +…

เเก้ชน + การจัดการบริษัท,การจัดการคอร์ส,การจัดการผู้ใช้งาน,การจัดการสิทธิ์,การอนุญาติสิทธิ์ผู้ใช้งาน,โอนย้ายคอร์ส

src/app/portal-manage/models/job.model.ts

@@ -9,7 +9,7 @@ import { JobSpecialModel } from "./job-special.model";
 import { JobTypeModel } from "./job-type.model";
 import { SubDistrictModel } from "./subdistrict.model";
 import { PositionModel } from "./position.model";
-import { environment } from "src/environments/environment";
+import { environment } from "../../../environments/environment";
 
 export interface ExamsList {
   examId: string

src/app/portal-manage/models/mylearn/answer.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface AnswerModel {
+  answerId: string;
+  correct: number;
+  engName: string;
+  thName: string;
+  getName(): string;
+}
+
+export class MyAnswerModel extends BaseModel implements AnswerModel {
+  answerId: string;
+  correct: number;
+  engName: string;
+  thName: string;
+
+  constructor(
+    data?: Partial<AnswerModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.answerId = data?.answerId ?? "";
+    this.correct = data?.correct ?? 0;
+    this.engName = data?.engName ?? "";
+    this.thName = data?.thName ?? "";
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}

src/app/portal-manage/models/mylearn/answermatch.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface AnswerMatchModel {
+  answerId?: string;
+  engName?: string;
+  thName?: string;
+  thAnswerName?: string;
+  engAnswerName?: string;
+  getName(): string;
+  getAnwser(): string;
+}
+export class MyAnswerMatchModel extends BaseModel implements AnswerMatchModel {
+  answerId?: string;
+  engName: string;
+  thName: string;
+  thAnswerName: string;
+  engAnswerName: string;
+  constructor(
+    data?: Partial<AnswerMatchModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.answerId = data?.answerId!;
+    this.thAnswerName = data?.thAnswerName!;
+    this.engAnswerName = data?.engAnswerName!;
+    this.engName = data?.engName!;
+    this.thName = data?.thName!;
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getAnwser(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thAnswerName
+      : this.engAnswerName;
+  }
+}

src/app/portal-manage/models/mylearn/answerpoints.model.ts

+
+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface AnswerpointsModel {
+  answerId?: string;
+  correct?: number;
+  points?: number;
+  engName: string;
+  thName: string;
+  getName(): string;
+}
+export class MyAnswerpointsModel extends BaseModel implements AnswerpointsModel {
+  answerId?: string;
+  correct?: number;
+  points?: number;
+  engName: string;
+  thName: string;
+  constructor(
+    data?: Partial<AnswerpointsModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.answerId = data?.answerId!;
+    this.correct = data?.correct!;
+    this.points = data?.points!;
+    this.engName = data?.engName!;
+    this.thName = data?.thName!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}

src/app/portal-manage/models/mylearn/answersequence.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface AnswerSequenceModel {
+  answerId?: string;
+  sequence?: number;
+  engName?: string;
+  thName?: string;
+  getName(): string
+}
+export class MyAnswerSequenceModel extends BaseModel implements AnswerSequenceModel {
+  answerId?: string;
+  sequence?: number;
+  engName: string;
+  thName: string;
+  constructor(
+    data?: Partial<AnswerSequenceModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.answerId = data?.answerId!;
+    this.sequence = data?.sequence!;
+    this.engName = data?.engName!;
+    this.thName = data?.thName!;
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}

src/app/portal-manage/models/mylearn/base.model.ts

+import { TranslateService } from '@ngx-translate/core';
+
+export class BaseModel{
+   translateService: TranslateService;
+
+   constructor(data?: Partial<any> ,translateService?: TranslateService){
+      Object.assign(this , data);
+      this.translateService = translateService!;
+
+   }
+}

src/app/portal-manage/models/mylearn/bu1.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { MyProfileModel, ProfileModel } from "./user.model";
+
+export interface Bu1Model {
+  bu1Id: Number;
+  bu1Code: string;
+  tdesc: string;
+  edesc: string;
+  status: number;
+  companyId: string;
+  getName(): string
+}
+
+export class MyBu1Model extends BaseModel implements Bu1Model {
+    bu1Id: Number;
+    bu1Code: string;
+    tdesc: string;
+    edesc: string;
+    status: number;
+  companyId: string;
+  constructor(data?: Partial<Bu1Model>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.bu1Id = data?.bu1Id!;
+    this.bu1Code = data?.bu1Code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+    this.status = data?.status!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+  
+}
+
+
+

src/app/portal-manage/models/mylearn/bu2.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface Bu2Model {
+  bu2Id: Number;
+  bu2Code: string;
+  tdesc: string;
+  edesc: string;
+  status: number;
+  parent: Number;
+  companyId: string;
+  getName(): string
+}
+
+export class MyBu2Model extends BaseModel implements Bu2Model {
+    bu2Id: Number;
+    bu2Code: string;
+    tdesc: string;
+    edesc: string;
+    status: number;
+    parent: Number;
+  companyId: string;
+  constructor(data?: Partial<Bu2Model>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.bu2Id = data?.bu2Id!;
+    this.bu2Code = data?.bu2Code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+    this.status = data?.status!;
+    this.parent = data?.parent!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+  
+}
+
+

src/app/portal-manage/models/mylearn/bu3.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface Bu3Model {
+  bu3Id: Number;
+  bu3Code: string;
+  tdesc: string;
+  edesc: string;
+  status: number;
+  parent: Number;
+  companyId: string;
+  getName(): string
+}
+
+export class MyBu3Model extends BaseModel implements Bu3Model {
+    bu3Id: Number;
+    bu3Code: string;
+    tdesc: string;
+    edesc: string;
+    status: number;
+    parent: Number;
+  companyId: string;
+  constructor(data?: Partial<Bu3Model>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.bu3Id = data?.bu3Id!;
+    this.bu3Code = data?.bu3Code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+    this.status = data?.status!;
+    this.parent = data?.parent!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+  
+}
+

src/app/portal-manage/models/mylearn/bu4.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface Bu4Model {
+  bu4Id: Number;
+  bu4Code: string;
+  tdesc: string;
+  edesc: string;
+  status: number;
+  parent: Number;
+  companyId: string;
+  getName(): string
+}
+
+export class MyBu4Model extends BaseModel implements Bu4Model {
+    bu4Id: Number;
+    bu4Code: string;
+    tdesc: string;
+    edesc: string;
+    status: number;
+    parent: Number;
+  companyId: string;
+  constructor(data?: Partial<Bu4Model>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.bu4Id = data?.bu4Id!;
+    this.bu4Code = data?.bu4Code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+    this.status = data?.status!;
+    this.parent = data?.parent!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+  
+}
+

src/app/portal-manage/models/mylearn/bu5.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface Bu5Model {
+  bu5Id: Number;
+  bu5Code: string;
+  tdesc: string;
+  edesc: string;
+  status: number;
+  parent: Number;
+  companyId: string;
+  getName(): string
+}
+
+export class MyBu5Model extends BaseModel implements Bu5Model {
+    bu5Id: Number;
+    bu5Code: string;
+    tdesc: string;
+    edesc: string;
+    status: number;
+    parent: Number;
+  companyId: string;
+  constructor(data?: Partial<Bu5Model>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.bu5Id = data?.bu5Id!;
+    this.bu5Code = data?.bu5Code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+    this.status = data?.status!;
+    this.parent = data?.parent!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+  
+}
+

src/app/portal-manage/models/mylearn/certificated-demo.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { environment } from "../../../../environments/environment";
+
+export interface CertificatedDemoModel {
+  cerId: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  format:string;
+  picture: string;
+  status: number;
+  styleFullname: string;
+  styleCourse: string;
+  styleEndstudy: string;
+  styleCername1: string;
+  styleCerpos1: string;
+  styleCername2: string;
+  styleCerpos2: string;
+  styleHeader1: string;
+  styleHeader2: string;
+  styleHeader3: string;
+  getPictureUrl(): string;
+  getName(): string;
+
+}
+
+export class MyCertificatedDemoModel extends BaseModel implements CertificatedDemoModel {
+  cerId: string = "";
+  companyId: string="";
+  thName: string = "";
+  engName: string = "";
+  format: string = "";
+  picture: string = "";
+  status: number;
+  styleFullname: string="";
+  styleCourse: string="";
+  styleEndstudy: string="";
+  styleCername1: string="";
+  styleCerpos1: string="";
+  styleCername2: string="";
+  styleCerpos2: string="";
+  styleHeader1: string="";
+  styleHeader2: string="";
+  styleHeader3: string="";
+  constructor(
+    data?: Partial<CertificatedDemoModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.cerId = data?.cerId!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.format = data?.format!;
+    this.picture = data?.picture!;
+    this.status = data?.status!
+    this.styleFullname = data?.styleFullname!;
+    this.styleCourse = data?.styleCourse!;
+    this.styleEndstudy = data?.styleEndstudy!;
+    this.styleCername1 = data?.styleCername1!;
+    this.styleCerpos1 = data?.styleCerpos1!;
+    this.styleCername2 = data?.styleCername2!;
+    this.styleCerpos2 = data?.styleCerpos2!;
+    this.styleHeader1 = data?.styleHeader1!;
+    this.styleHeader2 = data?.styleHeader2!;
+    this.styleHeader3 = data?.styleHeader3!;
+  }
+
+  getPictureUrl(): string {
+    if (this.picture) {
+      return environment.baseUrl + "/files/image/" + this.picture;
+    } else {
+      return "";
+    }
+  }
+
+
+
+  getStatus(): string {
+    return this.translateService.currentLang == "th"
+      ? this.status == 1 ? "เปิดใช้งาน" : "ปิดใช้งาน"
+      : this.status == 1 ? "Enable" : "Disable"
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th" ? (this.thName ? this.thName : "") : (this.engName ? this.engName : "")
+  }
+
+}

src/app/portal-manage/models/mylearn/course.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "../base.model";
+import { MyExamModel } from "./exam.model";
+import { environment } from "../../../../environments/environment";
+import { LessonModel, MyLessonModel } from "./lesson.model";
+import { DocumentModel, MyDocumentModel } from "./document.model";
+import { MyQuestionnaireModel, QuestionnaireModel } from "./questionnaire.model";
+import { CategoryModel, GroupModel, LevelModel, MyCategoryModel, MyGroupModel, MyLevelModel } from "./master.model";
+import { CertificatedDemoModel, MyCertificatedDemoModel } from "./certificated-demo.model";
+import { MyProfileModel, ProfileModel } from "./user.model";
+
+export interface CourseModel {
+  courseId: Number;
+  courseCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  poster: string;
+  cover: string;
+  sampleVideo: string;
+  publish: number;
+  category?: CategoryModel;
+  group?: GroupModel;
+  level?: LevelModel;
+  owner?: ProfileModel;
+  memberPreview: CoursePreviewModel[];
+  lesson: CourseLessonModel[];
+  exam: CourseExamModel[];
+  document : CourseDocumentModel[];
+  questionnaire : CourseQuestionnaireModel[];
+  resembleCourse: CourseModel[];
+  tags: TagsModel[];
+  certificateSignature1: string;
+  certificateName1: string;
+  certificatePosition1: string;
+  certificateSignature2: string;
+  certificateName2: string;
+  certificatePosition2: string;
+  duration: number;
+  certificate?: CertificatedDemoModel;
+  coursemyhrId?: string;
+  userpreview?: string;
+  getPoster(): string;
+  getCover(): string;
+  getName(): string;
+  getObjective(): string;
+  sumNoti?: number;
+  unreadCommunityTotal? : number;
+  viewAmount?: number;
+  levelPreview?: string;
+  showType?: number;
+  trainingHour?: number;
+  companyOwner?: string;
+  requestPayment?:number;
+  payAmount?:number;
+  notifyBefore?:number;
+  notifyAfter?:number;
+  attendee?:number;
+  notifyDepartment?:string;
+  notifyPosition?:string;
+  notifyLevel?:string;
+  notifyJob?:string;
+  notifyLearncourse?:string;
+  notifyFinishcourse?:string;
+  notifyLearnduration?:string;
+  notifyFinishduration?:string;
+}
+
+export class MyCourseModel extends BaseModel implements CourseModel {
+  courseId: Number;
+  courseCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  poster: string;
+  cover: string;
+  sampleVideo: string;
+  publish: number;
+  category?: CategoryModel;
+  group?: GroupModel;
+  level?: LevelModel;
+  owner?: ProfileModel;
+  memberPreview: CoursePreviewModel[];
+  lesson: CourseLessonModel[];
+  exam: CourseExamModel[];
+  document: CourseDocumentModel[];
+  questionnaire: CourseQuestionnaireModel[];
+  tags: TagsModel[];
+  resembleCourse: CourseModel[];
+  certificateSignature1: string;
+  certificateName1: string;
+  certificatePosition1: string;
+  certificateSignature2: string;
+  certificateName2: string;
+  certificatePosition2: string;
+  duration : number;
+  certificate?: CertificatedDemoModel;
+  coursemyhrId?: string | undefined;
+  levelPreview?: string;
+  showType?: number | undefined;
+  trainingHour?: number | undefined;
+  companyOwner?: string | undefined;
+  requestPayment?: number | undefined;
+  payAmount?: number | undefined;
+  notifyBefore?:number | undefined;
+  notifyAfter?:number| undefined;
+  attendee?:number| undefined;
+  notifyDepartment?:string;
+  notifyPosition?:string;
+  notifyLevel?:string;
+  notifyJob?:string;
+  notifyLearncourse?:string;
+  notifyFinishcourse?:string;
+  notifyLearnduration?:string;
+  notifyFinishduration?:string;
+  constructor(
+    data?: Partial<CourseModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.courseCode = data?.courseCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.thObjective = data?.thObjective!;
+    this.engObjective = data?.engObjective!;
+    this.poster = data?.poster!;
+    this.cover = data?.cover!;
+    this.sampleVideo = data?.sampleVideo!;
+    this.publish = data?.publish!;
+    this.certificateSignature1 = data?.certificateSignature1!;
+    this.certificateName1 = data?.certificateName1!;
+    this.certificatePosition1 = data?.certificatePosition1!;
+    this.certificateSignature2 = data?.certificateSignature2!;
+    this.certificateName2 = data?.certificateName2!;
+    this.certificatePosition2 = data?.certificatePosition2!;
+    this.duration = data?.duration!
+    this.coursemyhrId = data?.coursemyhrId!;
+    this.levelPreview = data?.levelPreview!;
+    this.showType = data?.showType!;
+    this.trainingHour = data?.trainingHour!;
+    this.companyOwner = data?.companyOwner!;
+    this.requestPayment = data?.requestPayment!;
+    this.payAmount = data?.payAmount!;
+    this.notifyBefore = data?.notifyBefore!;
+    this.notifyAfter = data?.notifyAfter!;
+    this.attendee = data?.attendee!;
+    this.notifyDepartment = data?.notifyDepartment!;
+    this.notifyPosition = data?.notifyPosition!;
+    this.notifyLevel = data?.notifyLevel!;
+    this.notifyJob = data?.notifyJob!;
+    this.notifyLearncourse = data?.notifyLearncourse!;
+    this.notifyFinishcourse = data?.notifyFinishcourse!;
+    this.notifyLearnduration = data?.notifyLearnduration!;
+    this.notifyFinishduration = data?.notifyFinishduration!;
+    this.resembleCourse = data?.resembleCourse?.map(
+      (e) => new MyCourseModel(e, this.translateService)
+    )!;
+    this.category = data?.category
+      ? new MyCategoryModel(data?.category, this.translateService)
+      : data?.category;
+    this.group = data?.group
+      ? new MyGroupModel(data?.group, this.translateService)
+      : data?.group;
+    this.level = data?.level
+      ? new MyLevelModel(data?.level, this.translateService)
+      : data?.level;
+    this.owner = data?.owner
+      ? new MyProfileModel(data?.owner, this.translateService)
+      : data?.owner;
+    this.memberPreview = data?.memberPreview?.map(
+      (e) => new MyCoursePreviewModel(e, this.translateService)
+    )!;
+    this.lesson = data?.lesson?.map(
+      (e) => new MyCourseLessonModel(e, this.translateService)
+    )!;
+    this.exam = data?.exam?.map(
+      (e) => new MyCourseExamModel(e, this.translateService)
+    )!;
+    this.document = data?.document?.map(
+      (e) => new MyCourseDocumentModel(e, this.translateService)
+    )!;
+    this.questionnaire = data?.questionnaire?.map(
+      (e) => new MyCourseQuestionnaireModel(e, this.translateService)
+    )!;
+    // this.certificate = data?.certificate?.map(
+    //   (e) => new MyCourseCertificateModel(e, this.translateService)
+    // )!;
+    this.tags = data?.tags!
+    this.certificate = data?.certificate
+      ? new MyCertificatedDemoModel(data?.certificate, this.translateService)
+      : data?.certificate;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getObjective(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thObjective
+      : this.engObjective;
+  }
+
+  getPoster(): string {
+    if (this.poster) {
+      return environment.baseUrl + "/files/image/" + this.poster;
+    } else {
+      return "";
+    }
+  }
+
+  getCover(): string {
+    if (this.poster) {
+      return environment.baseUrl + "/files/image/" + this.cover;
+    } else {
+      return "";
+    }
+  }
+}
+
+export interface CoursePreviewModel {
+  courseId: Number;
+  member: ProfileModel;
+}
+
+export class MyCoursePreviewModel
+  extends BaseModel
+  implements CoursePreviewModel {
+  courseId: Number;
+  member: ProfileModel;
+  constructor(
+    data?: Partial<CoursePreviewModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.member = new MyProfileModel(data?.member, this.translateService);
+  }
+}
+
+export interface CourseExamModel {
+  courseId: Number;
+  exam: MyExamModel;
+}
+
+export class MyCourseExamModel extends BaseModel implements CourseExamModel {
+  courseId: Number;
+  exam: MyExamModel;
+  constructor(
+    data?: Partial<CourseExamModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.exam = new MyExamModel(data?.exam, this.translateService);
+  }
+}
+
+export interface CourseLessonModel {
+  courseId: Number;
+  lesson: LessonModel;
+}
+
+export class MyCourseLessonModel
+  extends BaseModel
+  implements CourseLessonModel {
+  courseId: Number;
+  lesson: LessonModel;
+  constructor(
+    data?: Partial<CourseLessonModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.lesson = new MyLessonModel(data?.lesson, this.translateService);
+  }
+}
+
+export interface CourseDocumentModel {
+  courseId: Number;
+  document: DocumentModel;
+}
+
+export class MyCourseDocumentModel
+  extends BaseModel
+  implements CourseDocumentModel {
+  courseId: Number;
+  document: DocumentModel;
+  constructor(
+    data?: Partial<CourseDocumentModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.document = new MyDocumentModel(data?.document, this.translateService);
+  }
+}
+
+export interface CourseQuestionnaireModel {
+  courseId: Number;
+  questionnaire: QuestionnaireModel;
+}
+
+export class MyCourseQuestionnaireModel
+  extends BaseModel
+  implements CourseQuestionnaireModel {
+  courseId: Number;
+  questionnaire: QuestionnaireModel;
+  constructor(
+    data?: Partial<CourseQuestionnaireModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.courseId = data?.courseId!;
+    this.questionnaire = new MyQuestionnaireModel(data?.questionnaire, this.translateService);
+  }
+}
+
+export interface TagsModel {
+  "display": string,
+  "value": string
+}
+
+// export interface CourseCertificateModel {
+//   courseId: string;
+//   certificatedDemo: CertificatedDemoModel;
+// }
+// export class MyCourseCertificateModel
+//   extends BaseModel
+//   implements CourseCertificateModel {
+//   courseId: string;
+//   certificatedDemo: CertificatedDemoModel;
+//   constructor(
+//     data?: Partial<CourseCertificateModel>,
+//     translateService?: TranslateService
+//   ) {
+//     super(data, translateService);
+//     this.courseId = data?.courseId!;
+//     this.certificate = new MyCourseCertificateModel(data?.certificate, this.translateService);
+//   }
+// }
+
+export interface CourseDurationModel {
+  durationId: string;
+  courseId: number;
+  companyId: string;
+  startLeanDate: string;
+  endLearnDate: string;
+  startLearnTime: string;
+  endLearnTime: string;
+}
+
+export class MyCourseDurationModel extends BaseModel implements CourseDurationModel {
+  durationId: string;
+  courseId: number;
+  companyId: string;
+  startLeanDate: string;
+  endLearnDate: string;
+  startLearnTime: string;
+  endLearnTime: string;
+  constructor(data?: Partial<CourseDurationModel>) {
+    super(data);
+    this.durationId = data?.durationId!;
+    this.courseId = data?.courseId!;
+    this.companyId = data?.companyId!;
+    this.startLeanDate = data?.startLeanDate!;
+    this.endLearnDate = data?.endLearnDate!;
+    this.startLearnTime = data?.startLearnTime!;
+    this.endLearnTime = data?.endLearnTime!;
+  }
+
+}
+

src/app/portal-manage/models/mylearn/courseinsite.model.ts

+
+export interface CourseinsiteModel {
+  courseId: Number;
+  courseCode: string;
+  categoryCode: string;
+  thName: string;
+  engName: string;
+  poster: string;
+  companyId: string;
+  companyName: string;
+  companyType: string;
+  companyStatus: string;
+  pictureCompany: string;
+}
+
+export interface CompanyListModel {
+    companyId: string;
+    companyName: string;
+    companyType: string;
+    companyStatus: string;
+    ownerId: string;
+    ownerName: string;
+    pictureCompany: string;
+  }
+
+export interface CompanyZeemeModel {
+    companyName: string;
+    companyType: string;
+    website: string;
+    metaData: string;
+    companyStatus: string;
+    suggestion: string;
+    radiusStampAllow: string;
+    latitude: string;
+    longitude: string;
+    pictureCompany: string;
+    ownerId: string;
+    ownerName: string;
+    mainbranchId: string;
+    mainbranchName: string;
+    partitionId: string;
+    companyId: string;
+    companyCode: string;
+    qrCode: string;
+    locationList: [];
+}
+
+ 
\ No newline at end of file

src/app/portal-manage/models/mylearn/department.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { CourseModel, MyCourseModel } from "./course.model";
+
+export interface DepartmentModel {
+  departmentId: Number;
+  departmentCode: string;
+  thName: string;
+  engName: string;
+  training: DepartmentCourseModel[];
+  companyId: string;
+  getName(): string
+}
+
+export class MyDepartmentModel extends BaseModel implements DepartmentModel {
+  departmentId: Number;
+  departmentCode: string;
+  thName: string;
+  engName: string;
+  training: DepartmentCourseModel[];
+  companyId: string;
+  constructor(
+    data?: Partial<DepartmentModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.departmentId = data?.departmentId!;
+    this.departmentCode = data?.departmentCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.training = data?.training?.map(
+      (e) => new MyDepartmentCourseModel(e, this.translateService)
+    )!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface DepartmentCourseModel {
+  departmentId: Number;
+  course: CourseModel;
+}
+
+export class MyDepartmentCourseModel
+  extends BaseModel
+  implements DepartmentCourseModel
+{
+  departmentId: Number;
+  course: CourseModel;
+  constructor(
+    data?: Partial<DepartmentCourseModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.departmentId = data?.departmentId!;
+    this.course = new MyCourseModel(data?.course, this.translateService);
+  }
+}

src/app/portal-manage/models/mylearn/document.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { MyProfileModel, ProfileModel } from "./user.model";
+import { environment } from "../../../../environments/environment";
+
+export interface DocumentModel {
+  documentId: Number;
+  documentCode: string;
+  companyId:string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  document: string;
+  owner: ProfileModel;
+  getPictureUrl(): string;
+  getDocumentUrl(): string;
+  getName(): string
+  getObjective(): string
+}
+
+export class MyDocumentModel extends BaseModel implements DocumentModel {
+  documentId: Number;
+  documentCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  document: string;
+  owner: ProfileModel;
+  constructor(
+    data?: Partial<DocumentModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.documentId = data?.documentId!;
+    this.documentCode = data?.documentCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.thObjective = data?.thObjective!;
+    this.engObjective = data?.engObjective!;
+    this.image = data?.image!;
+    this.document = data?.document!;
+    this.owner = new MyProfileModel(data?.owner , this.translateService);
+  }
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+
+  getDocumentUrl(): string {
+    if (this.document) {
+      return environment.baseUrl + "/files/doc/" + this.document;
+    } else {
+      return "";
+    }
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getObjective(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thObjective
+      : this.engObjective;
+  }
+}

src/app/portal-manage/models/mylearn/exam.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { MyProfileModel, ProfileModel } from "./user.model";
+import { BaseModel } from "./base.model";
+import { environment } from "../../../../environments/environment";
+import { QuestionModel } from "../question.model";
+import { MyQuestionModel } from "./question.model";
+
+export interface ExamModel {
+  examId: Number;
+  examCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  sampleVideo: string;
+  examType: number;
+  examPass: number;
+  examPercent: number;
+  examTimes: number;
+  examDuration: number;
+  examAnswerType: number;
+  questionShuffle: number;
+  answerShuffle: number;
+  examStep: number;
+  owner: ProfileModel;
+  question?: MyQuestionModel[];
+  durationExam: number;
+  getPictureUrl(): string;
+  getName(): string
+  getObjective(): string
+}
+export class MyExamModel extends BaseModel implements ExamModel {
+  examId: Number;
+  examCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  sampleVideo: string;
+  examType: number;
+  examPass: number;
+  examPercent: number;
+  examTimes: number;
+  examDuration: number;
+  examAnswerType: number;
+  questionShuffle: number;
+  answerShuffle: number;
+  examStep: number;
+  owner: ProfileModel;
+  question?: MyQuestionModel[];
+  durationExam: number;
+  constructor(data?: Partial<ExamModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.examId = data?.examId!;
+    this.examCode = data?.examCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.thObjective = data?.thObjective!;
+    this.engObjective = data?.engObjective!;
+    this.image = data?.image!;
+    this.video = data?.video!;
+    this.sampleVideo = data?.sampleVideo!;
+    this.examType = data?.examType!;
+    this.examPass = data?.examPass!;
+    this.examPercent = data?.examPercent!;
+    this.examTimes = data?.examTimes!;
+    this.examDuration = data?.examDuration!;
+    this.questionShuffle = data?.questionShuffle!;
+    this.examAnswerType = data?.examAnswerType!;
+    this.answerShuffle = data?.answerShuffle!;
+    this.examStep = data?.examStep!;
+    this.durationExam = data?.durationExam!;
+    this.owner = new MyProfileModel(data?.owner,this.translateService);
+    this.question = data?.question?.map(
+      (x) => new MyQuestionModel(x, this.translateService)
+    );
+  }
+
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+  getObjective (): string {
+    return this.translateService.currentLang == "th"
+      ? this.thObjective
+      : this.engObjective;
+  }
+}

src/app/portal-manage/models/mylearn/job.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { CourseModel, MyCourseModel } from "./course.model";
+
+export interface JobModel {
+  jobId: Number;
+  jobCode: string;
+  thName: string;
+  engName: string;
+  training: JobCourseModel[];
+  companyId: string;
+  getName(): string
+}
+
+export class MyJobModel extends BaseModel implements JobModel {
+  jobId: Number;
+  jobCode: string;
+  thName: string;
+  engName: string;
+  training: JobCourseModel[];
+  companyId: string;
+  constructor(data?: Partial<JobModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.jobId = data?.jobId!;
+    this.jobCode = data?.jobCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.training = data?.training?.map((e) => new MyJobCourseModel(e , this.translateService))!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface JobCourseModel {
+  jobId: Number;
+  course: CourseModel;
+}
+
+export class MyJobCourseModel extends BaseModel implements JobCourseModel {
+  jobId: Number;
+  course: CourseModel;
+  constructor(
+    data?: Partial<JobCourseModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.jobId = data?.jobId!;
+    this.course = new MyCourseModel(data?.course, this.translateService);
+  }
+}

src/app/portal-manage/models/mylearn/lesson.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { MyProfileModel, ProfileModel } from "./user.model";
+import { environment } from "../../../../environments/environment";
+
+
+export interface LessonModel {
+  lessonId: Number;
+  lessonCode: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  requestLearn: number;
+  owner: ProfileModel;
+  companyId: string;
+  requestYoutube: number;
+  youtubeUrl: string;
+  durationLearn: number;
+  fileName: string;
+  durationOfMs: string;
+  videoDurationHHmmss: string;
+  videoDurationTdesc: string;
+  videoDurationEdesc: string;
+  isSuccess: boolean;
+  getPictureUrl(): string;
+  getName(): string
+  getObjective(): string
+}
+
+export class MyLessonModel extends BaseModel implements LessonModel {
+  lessonId: Number;
+  lessonCode: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  requestLearn: number;
+  owner: ProfileModel;
+  companyId: string;
+  requestYoutube: number;
+  youtubeUrl: string;
+  durationLearn: number;
+  isSuccess: boolean;
+  fileName: string;
+  durationOfMs: string;
+  videoDurationHHmmss: string;
+  videoDurationTdesc: string;
+  videoDurationEdesc: string;
+  constructor(
+    data?: Partial<LessonModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.lessonId = data?.lessonId!;
+    this.lessonCode = data?.lessonCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.thObjective = data?.thObjective!;
+    this.engObjective = data?.engObjective!;
+    this.image = data?.image!;
+    this.video = data?.video!;
+    this.requestLearn = data?.requestLearn!;
+    this.requestYoutube = data?.requestYoutube!;
+    this.youtubeUrl = data?.youtubeUrl!;
+    this.owner = new MyProfileModel(data?.owner, this.translateService);
+    this.companyId = data?.companyId!;
+    this.durationLearn = data?.durationLearn!;
+    this.fileName = data?.fileName!;
+    this.durationOfMs = data?.durationOfMs!;
+    this.videoDurationHHmmss = data?.videoDurationHHmmss!;
+    this.videoDurationTdesc = data?.videoDurationTdesc!;
+    this.videoDurationEdesc = data?.videoDurationEdesc!;
+    this.isSuccess = data?.isSuccess!;
+  }
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getObjective(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thObjective
+      : this.engObjective;
+  }
+}
+
+export interface thumnailModel {
+  thumnailId: Number;
+  thumnailName: string;
+  thumnailUrl: string;
+}

src/app/portal-manage/models/mylearn/level.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface UserLevelModel {
+  levelId: Number;
+  levelCode: string;
+  thName: string;
+  engName: string;
+  companyId: string;
+  getName(): string
+}
+
+export class MyUserLevelModel extends BaseModel implements UserLevelModel {
+  levelId: Number;
+  levelCode: string;
+  thName: string;
+  engName: string;
+  companyId: string;
+  constructor(data?: Partial<UserLevelModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.levelId = data?.levelId!;
+    this.levelCode = data?.levelCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+

src/app/portal-manage/models/mylearn/master.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface GroupModel {
+  groupId: Number;
+  groupCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  getName(): string
+}
+
+export class MyGroupModel extends BaseModel implements GroupModel {
+  public groupId: Number;
+  public groupCode: string;
+  public companyId: string;
+  public thName: string;
+  public engName: string;
+  constructor(data?: Partial<GroupModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.groupId = data?.groupId!;
+    this.groupCode = data?.groupCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface CategoryModel {
+  categoryId: Number;
+  categoryCode:string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  priority: number;
+  getName(): string
+}
+
+export class MyCategoryModel extends BaseModel implements CategoryModel {
+  public categoryId: Number;
+  public categoryCode: string;
+  public companyId: string;
+  public thName: string;
+  public engName: string;
+  public priority: number;
+  constructor(
+    data?: Partial<CategoryModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.categoryId = data?.categoryId!;
+    this.categoryCode = data?.categoryCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.priority = data?.priority!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface LevelModel {
+  levelId: Number;
+  levelCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  getName(): string
+}
+
+export class MyLevelModel extends BaseModel implements LevelModel {
+  public levelId: Number;
+  public levelCode: string;
+  public companyId: string;
+  public thName: string;
+  public engName: string;
+  constructor(data?: Partial<LevelModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.levelId = data?.levelId!;
+    this.levelCode = data?.levelCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}

src/app/portal-manage/models/mylearn/myhrcompany.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "../base.model";
+import { environment } from "../../../../environments/environment";
+
+export interface HrcompanyModel {
+  companyId: string;
+  companyCode: string;
+  companyName: string;
+  branchId: string;
+  branchName: string;
+  pictureUrl: string;
+  role: string;
+  database: string;
+  myhrCode: string;
+  myhrUrl: string;
+  companyAddr: string;
+  companyTel: string;
+  companyTax: string;
+  prefix: string;
+  lastNumber: string;
+  number: string;
+  receiptSignature1: string;
+  receiptSignature2: string;
+  logo: string;
+  displayType: number;
+  bestsellerType: number;
+  recommendType: number;
+}
+export class MyHrcompanyModel extends BaseModel implements HrcompanyModel {
+  companyId: string;
+  companyCode: string;
+  companyName: string;
+  branchId: string;
+  branchName: string;
+  pictureUrl: string;
+  role: string;
+  database: string;
+  myhrCode: string;
+  myhrUrl: string;
+  companyAddr: string;
+  companyTel: string;
+  companyTax: string;
+  prefix: string;
+  lastNumber: string;
+  number: string;
+  receiptSignature1: string;
+  receiptSignature2: string;
+  logo: string;
+  displayType: number;
+  bestsellerType: number;
+  recommendType: number;
+  constructor(data?: Partial<HrcompanyModel>, translateService?: TranslateService) {
+    super(data, translateService)
+    this.companyId = data?.companyId!
+    this.companyCode = data?.companyCode!
+    this.companyName = data?.companyName!
+    this.branchId = data?.branchId!
+    this.branchName = data?.branchName!
+    this.pictureUrl = data?.pictureUrl!
+    this.role = data?.role!
+    this.database = data?.database!
+    this.myhrCode = data?.myhrCode!
+    this.myhrUrl = data?.myhrUrl!
+    this.companyAddr = data?.companyAddr!
+    this.companyTel = data?.companyTel!
+    this.companyTax = data?.companyTax!
+    this.prefix = data?.prefix!
+    this.lastNumber = data?.lastNumber!
+    this.number = data?.number!
+    this.receiptSignature1 = data?.receiptSignature1!
+    this.receiptSignature2 = data?.receiptSignature2!
+    this.logo = data?.logo!
+    this.displayType = data?.displayType!
+    this.bestsellerType = data?.bestsellerType!
+    this.recommendType = data?.recommendType!
+  }
+
+  // getPictureURL(): string {
+  //   if (this.pictureUrl) {
+  //     return environment.baseUrls + "/files/image/" + this.pictureUrl
+  //   } else {
+  //     return ""
+  //   }
+  // }
+  getLogo(): string {
+    if (this.logo) {
+      return environment.baseUrls + "/files/image/" + this.logo
+    } else {
+      return ""
+    }
+  }
+}
\ No newline at end of file

src/app/portal-manage/models/mylearn/organization.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { CourseModel, MyCourseModel } from "./course.model";
+
+export interface OrganizationModel {
+  organizationId: Number;
+  organizationCode: string;
+  thName: string;
+  engName: string;
+  training: OrganizationCourseModel[];
+  companyId: string;
+  getName(): string
+}
+
+export class MyOrganizationModel
+  extends BaseModel
+  implements OrganizationModel
+{
+  organizationId: Number;
+  organizationCode:string;
+  thName: string;
+  engName: string;
+  training: OrganizationCourseModel[];
+  companyId: string;
+  constructor(
+    data?: Partial<OrganizationModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.organizationId = data?.organizationId!;
+    this.organizationCode = data?.organizationCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.training = data?.training?.map(
+      (e) => new MyOrganizationCourseModel(e, this.translateService)
+    )!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface OrganizationCourseModel {
+  organizationId: Number;
+  course: CourseModel;
+}
+
+export class MyOrganizationCourseModel
+  extends BaseModel
+  implements OrganizationCourseModel
+{
+  organizationId: Number;
+  course: CourseModel;
+  constructor(
+    data?: Partial<OrganizationCourseModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.organizationId = data?.organizationId!;
+    this.course = new MyCourseModel(data?.course, this.translateService);
+  }
+}

src/app/portal-manage/models/mylearn/page.model.ts

+export interface Sort {
+  empty: boolean;
+  unsorted: boolean;
+  sorted: boolean;
+}
+
+export interface Pageable {
+  offset: number;
+  sort: Sort;
+  unpaged: boolean;
+  paged: boolean;
+  pageNumber: number;
+  pageSize: number;
+}
+
+export interface PageResponseModel<T> {
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  content: T[];
+  number: number;
+  sort: Sort;
+  pageable: Pageable;
+  numberOfElements: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+

src/app/portal-manage/models/mylearn/position.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { CourseModel, MyCourseModel } from "./course.model";
+
+
+export interface PositionModel {
+  positionId : number;
+  positionCode: string;
+  thName: string;
+  engName: string;
+  training: PositionCourseModel[];
+  companyId: string;
+  getName(): string
+}
+
+export class MyPositionModel extends BaseModel implements PositionModel {
+  positionId : number;
+  positionCode: string;
+  thName: string;
+  engName: string;
+  training: PositionCourseModel[];
+  companyId: string;
+  constructor(
+    data?: Partial<PositionModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.positionId = data?.positionId!;
+    this.positionCode = data?.positionCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.companyId = data?.companyId!;
+    this.training = data?.training?.map(
+      (e) => new MyPositionCourseModel(e, this.translateService)
+    )!;
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface PositionCourseModel {
+  positionId: number;
+  course: CourseModel;
+}
+
+export class MyPositionCourseModel
+  extends BaseModel
+  implements PositionCourseModel
+{
+  positionId: number;
+  course: CourseModel;
+  constructor(
+    data?: Partial<PositionCourseModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.positionId = data?.positionId!;
+    this.course = new MyCourseModel(data?.course, this.translateService);
+  }
+}

src/app/portal-manage/models/mylearn/question.model.ts

+import { MyAnswerSequenceModel } from "./answersequence.model";
+import { environment } from "../../../../environments/environment";
+import { MyAnswerModel } from "./answer.model";
+import { MyAnswerMatchModel } from "./answermatch.model";
+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export interface QuestionModel {
+  examId?: number;
+  questionId?: string;
+  thName: string;
+  engName: string;
+  image: string;
+  questionType?: number;
+  answerTrueFalse?: number;
+  answerChoice?: MyAnswerModel[];
+  answerMultiChoice?: MyAnswerModel[];
+  answerSequence?: MyAnswerSequenceModel[];
+  answerMatch?: MyAnswerMatchModel[];
+  getName(): string;
+  getPictureUrl(): string;
+  getTypeDesc(): string;
+}
+
+export class MyQuestionModel extends BaseModel implements QuestionModel {
+  examId?: number;
+  questionId?: string;
+  thName: string;
+  engName: string;
+  image: string;
+  questionType?: number;
+  answerTrueFalse?: number;
+  answerChoice?: MyAnswerModel[];
+  answerMultiChoice?: MyAnswerModel[];
+  answerSequence?: MyAnswerSequenceModel[];
+  answerMatch?: MyAnswerMatchModel[];
+
+  constructor(
+    data?: Partial<QuestionModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.examId = data?.examId ?? 0;
+    this.questionId = data?.questionId ?? "";
+    this.thName = data?.thName ?? "";
+    this.engName = data?.engName ?? "";
+    this.image = data?.image ?? "";
+    this.questionType = data?.questionType ?? 0;
+    this.answerTrueFalse = data?.answerTrueFalse ?? 0;
+    this.answerChoice = data?.answerChoice?.map(
+      (x) => new MyAnswerModel(x, this.translateService)
+    );
+    this.answerMultiChoice = data?.answerMultiChoice?.map(
+      (x) => new MyAnswerModel(x, this.translateService)
+    );
+    this.answerSequence = data?.answerSequence?.map(
+      (x) => new MyAnswerSequenceModel(x, this.translateService)
+    );
+    this.answerMatch = data?.answerMatch?.map(
+      (x) => new MyAnswerMatchModel(x, this.translateService)
+    );
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+
+  getTypeDesc(): string {
+    switch (this.questionType) {
+      case 0:
+        return "Sorting";
+      case 1:
+        return "True/False";
+      case 2:
+        return "Single answer";
+      case 3:
+        return "Multiple answers";
+      case 4:
+        return "Matching";
+      default:
+        return "";
+    }
+  }
+}

src/app/portal-manage/models/mylearn/questionnaire.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+import { MyQuestionModel, QuestionModel } from "./question.model";
+import { MyProfileModel, ProfileModel } from "./user.model";
+import { environment } from "../../../../environments/environment";
+import { MyQuestionnaireQuestionModel, QuestionnairequestionModel } from "./questionnairequestion.model";
+
+export interface QuestionnaireModel {
+  questionnaireId: Number;
+  questionnaireCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  sampleVideo: string;
+  questionnaireType: number;
+  questionnairePass: number;
+  questionnairePercent: number;
+  questionnaireTimes: number;
+  questionnaireDuration: number;
+  questionnaireAnswerType: number;
+  questionShuffle: number;
+  answerShuffle: number;
+  owner: ProfileModel;
+  question?: QuestionnairequestionModel[];
+  getPictureUrl(): string;
+  getName(): string
+  getObjective(): string
+}
+export class MyQuestionnaireModel extends BaseModel implements QuestionnaireModel {
+  questionnaireId: Number;
+  questionnaireCode: string;
+  companyId: string;
+  thName: string;
+  engName: string;
+  thObjective: string;
+  engObjective: string;
+  image: string;
+  video: string;
+  sampleVideo: string;
+  questionnaireType: number;
+  questionnairePass: number;
+  questionnairePercent: number;
+  questionnaireTimes: number;
+  questionnaireDuration: number;
+  questionnaireAnswerType: number;
+  questionShuffle: number;
+  answerShuffle: number;
+  owner: ProfileModel;
+  question?: MyQuestionnaireQuestionModel[];
+  constructor(data?: Partial<QuestionnaireModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.questionnaireId = data?.questionnaireId!;
+    this.questionnaireCode = data?.questionnaireCode!;
+    this.companyId = data?.companyId!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.thObjective = data?.thObjective!;
+    this.engObjective = data?.engObjective!;
+    this.image = data?.image!;
+    this.video = data?.video!;
+    this.sampleVideo = data?.sampleVideo!;
+    this.questionnaireType = data?.questionnaireType!;
+    this.questionnairePass = data?.questionnairePass!;
+    this.questionnairePercent = data?.questionnairePercent!;
+    this.questionnaireTimes = data?.questionnaireTimes!;
+    this.questionnaireDuration = data?.questionnaireDuration!;
+    this.questionShuffle = data?.questionShuffle!;
+    this.questionnaireAnswerType = data?.questionnaireAnswerType!;
+    this.answerShuffle = data?.answerShuffle!;
+    this.owner = new MyProfileModel(data?.owner,this.translateService);
+    this.question = data?.question?.map(
+      (x) => new MyQuestionnaireQuestionModel(x, this.translateService)
+    );
+  }
+
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+  getObjective (): string {
+    return this.translateService.currentLang == "th"
+      ? this.thObjective
+      : this.engObjective;
+  }
+}
+

src/app/portal-manage/models/mylearn/questionnairequestion.model.ts

+
+import { TranslateService } from "@ngx-translate/core";
+import { AnswerModel, MyAnswerModel } from "./answer.model";
+import { AnswerMatchModel, MyAnswerMatchModel } from "./answermatch.model";
+import {
+  AnswerSequenceModel,
+  MyAnswerSequenceModel,
+} from "./answersequence.model";
+import { BaseModel } from "./base.model";
+import { environment } from "../../../../environments/environment";
+import { AnswerpointsModel, MyAnswerpointsModel } from "./answerpoints.model";
+
+export interface QuestionnairequestionModel {
+  questionnaireId?: Number;
+  questionId?: string;
+  questionGroup?: string;
+  thName: string;
+  engName: string;
+  image: string;
+  questionType?: number;
+  answerTrueFalse?: number;
+  answerChoice?: AnswerpointsModel[];
+  answerMultiChoice?: AnswerModel[];
+  //answerSequence?: AnswerSequenceModel[];
+  //answerMatch?: AnswerMatchModel[];
+  getName(): string;
+  getPictureUrl(): string;
+  getTypeDesc(): string
+}
+export class MyQuestionnaireQuestionModel extends BaseModel implements QuestionnairequestionModel {
+  questionnaireId?: Number;
+  questionId?: string;
+  questionGroup?: string; 
+  thName: string;
+  engName: string;
+  image: string;
+  questionType?: number;
+  answerTrueFalse?: number;
+  answerChoice?: AnswerpointsModel[];
+  answerMultiChoice?: AnswerModel[];
+  //answerSequence?: AnswerSequenceModel[];
+  //answerMatch?: AnswerMatchModel[];
+  constructor(
+    data?: Partial<QuestionnairequestionModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.questionnaireId = data?.questionnaireId!;
+    this.questionId = data?.questionId!;
+    this.questionGroup = data?.questionGroup!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.image = data?.image!;
+    this.questionType = data?.questionType!;
+    this.answerTrueFalse = data?.answerTrueFalse!;
+    this.answerChoice = data?.answerChoice?.map(
+      (x) => new MyAnswerpointsModel(x, this.translateService)
+    );
+    this.answerMultiChoice = data?.answerMultiChoice?.map(
+      (x) => new MyAnswerModel(x, this.translateService)
+    );
+    /*this.answerSequence = data?.answerSequence?.map(
+      (x) => new MyAnswerSequenceModel(x, this.translateService)
+    );
+    this.answerMatch = data?.answerMatch?.map(
+      (x) => new MyAnswerMatchModel(x, this.translateService)
+    );*/
+  }
+
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+
+  getPictureUrl(): string {
+    if (this.image) {
+      return environment.baseUrl + "/files/image/" + this.image;
+    } else {
+      return "";
+    }
+  }
+
+  getTypeDesc(): string {
+    let desc = ""
+
+    if (this.questionType == 0) {
+      desc = "Sorting";
+    } else if (this.questionType == 1) {
+      desc = "Enter answer";
+    } else if (this.questionType == 2) {
+      desc = "Single answer";
+    } else if (this.questionType == 3) {
+      desc = "Multiple answers";
+    } else if (this.questionType == 4) {
+      desc = "Matching";
+    }
+
+    return desc
+  }
+}

src/app/portal-manage/models/mylearn/response.model.ts

+export interface ResponseModel {
+  message: string;
+  statusCode: number;
+  resultObject?: any;
+  fail: boolean;
+  actionStatus: string;
+  none: boolean;
+  success: boolean;
+}

src/app/portal-manage/models/mylearn/transfer.model.ts

+import { TranslateService } from "@ngx-translate/core"
+import { BaseModel } from "../base.model"
+
+export interface TransferModel {
+  refCourseId: number;
+  refCompanyId: string;
+  toCompanyId: string;
+}
+export class MytransferModel extends BaseModel implements TransferModel {
+  refCourseId: number;
+  refCompanyId: string;
+  toCompanyId: string;
+  constructor(data?: Partial<TransferModel>, translateService?: TranslateService) {
+    super(data, translateService)
+    this.refCourseId = data?.refCourseId!
+    this.refCompanyId = data?.refCompanyId!
+    this.toCompanyId = data?.toCompanyId!
+  }
+}
\ No newline at end of file

src/app/portal-manage/models/mylearn/user-account.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "../base.model";
+import { ProfileModel, MyProfileModel, RoleModel, MyRoleModel } from "./user.model";
+
+export interface UserAccountModel {
+  userId: number;
+  username: string;
+  password: string;
+  member: ProfileModel;
+  role: RoleModel;
+  roleOth: string;
+  companyId: string;
+  status: number;
+}
+
+export class MyUserAccountModel extends BaseModel implements UserAccountModel {
+  userId: number;
+  username: string;
+  password: string;
+  member: ProfileModel;
+  role: RoleModel;
+  roleOth: string;
+  companyId: string;
+  status: number;
+
+  constructor(data?: Partial<UserAccountModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.userId = data?.userId ?? 0;
+    this.username = data?.username ?? "";
+    this.password = data?.password ?? "";
+    this.member = new MyProfileModel(data?.member, this.translateService);
+    this.role = new MyRoleModel(data?.role, this.translateService);
+    this.roleOth = data?.roleOth ?? "";
+    this.companyId = data?.companyId ?? "";
+    this.status = data?.status ?? 0;
+  }
+
+  getFullname(): string {
+    return this.member?.getFullname() ?? "";
+  }
+
+  getRoleCode(): string {
+    return this.role?.roleCode ?? "";
+  }
+
+  getRoleName(): string {
+    return this.role?.getName() ?? "";
+  }
+}

src/app/portal-manage/models/mylearn/user.model.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "../base.model";
+import { Bu1Model, MyBu1Model } from "./bu1.model";
+import { Bu2Model, MyBu2Model } from "./bu2.model";
+import { Bu3Model, MyBu3Model } from "./bu3.model";
+import { Bu4Model, MyBu4Model } from "./bu4.model";
+import { Bu5Model, MyBu5Model } from "./bu5.model";
+import { DepartmentModel, MyDepartmentModel } from "./department.model";
+import { environment } from "../../../../environments/environment";
+import { MyOrganizationModel, OrganizationModel } from "./organization.model";
+import { MyPositionModel } from "./position.model";
+import { MyJobModel } from "./job.model";
+import { MyUserLevelModel, UserLevelModel } from "./level.model";
+export interface RoleModel {
+  roleId: number;
+  roleCode: string;
+  thName: string;
+  engName: string;
+  menu: string;
+  companyId: string;
+  getName(): string
+}
+
+export class MyRoleModel extends BaseModel implements RoleModel {
+  public roleId: number = 0;
+  public roleCode: string = "";
+  public thName: string = "";
+  public engName: string = "";
+  public menu: string = "";
+  public companyId: string = "";
+  constructor(data?: Partial<RoleModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.roleId = data?.roleId!;
+    this.roleCode = data?.roleCode!;
+    this.thName = data?.thName!;
+    this.engName = data?.engName!;
+    this.menu = data?.menu!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.thName
+      : this.engName;
+  }
+}
+
+export interface ProfileModel {
+  memberId: string;
+  thFirstname: string;
+  engFirstname: string;
+  thLastname: string;
+  engLastname: string;
+  email: string;
+  tel: string;
+  picture: string;
+  pictureBackground: string;
+  organization: OrganizationModel;
+  department: DepartmentModel;
+  position: MyPositionModel;
+  job: MyJobModel;
+  level: UserLevelModel;
+  bu1: Bu1Model;
+  bu2: Bu2Model;
+  bu3: Bu3Model;
+  bu4: Bu4Model;
+  bu5: Bu5Model;
+  status: number;
+  role: RoleModel;
+  thFullName: string;
+  engFullName: string;
+  // team: TeamModel;
+  // work: WorkModel;
+  workingAge: string
+  code: string
+  companyAddress: string
+  companyName: string
+  companyPosition: string
+  companyType: number
+  companyId: string
+  roleOth: string
+  employeeId: string
+  area: string;
+  empStatus: string;
+  sex: SexModel;
+  birthdate: string;
+  marryId: MarryModel;
+  empstatusId: EmpStatusModel;
+  orgName: string;
+  orgEmail: string;
+  orgTel: string;
+  trainingId: string;
+  cid:string;
+
+  //roleOth: RoleModel
+  getPictureUrl(): string;
+  getpictureBackgroundUrl(): string;
+  getFullname(): string;
+  getFullnameTh(): string;
+  getFullnameEn(): string;
+  getWorkAge(): string;
+  getStatus():string;
+ // getRoleOth():RoleModel;
+
+}
+
+export class MyProfileModel extends BaseModel implements ProfileModel {
+  memberId: string = "";
+  thFirstname: string = "";
+  engFirstname: string = "";
+  thLastname: string = "";
+  engLastname: string = "";
+  email: string = "";
+  tel: string = "";
+  picture: string = "";
+  pictureBackground: string = "";
+  organization: OrganizationModel;
+  department: DepartmentModel;
+  position: MyPositionModel;
+  job: MyJobModel;
+  level: UserLevelModel;
+  bu1: Bu1Model;
+  bu2: Bu2Model;
+  bu3: Bu3Model;
+  bu4: Bu4Model;
+  bu5: Bu5Model;
+  status: number;
+  area: string ="";
+  role: RoleModel;
+  thFullName: string;
+  engFullName: string;
+  // team: TeamModel;
+  // work: WorkModel;
+  workingAge: string
+  code: string
+  companyAddress: string
+  companyName: string
+  companyPosition: string
+  companyType: number
+  companyId: string;
+  roleOth: string;
+  employeeId: string;
+  empStatus: string;
+  sex: SexModel;
+  birthdate: string;
+  marryId: MarryModel;
+  empstatusId: EmpStatusModel;
+  orgName: string;
+  orgEmail: string;
+  orgTel: string;
+  trainingId: string;
+  cid: string;
+  //roleOth: RoleModel;
+  constructor(
+    data?: Partial<ProfileModel>,
+    translateService?: TranslateService
+  ) {
+    super(data, translateService);
+    this.memberId = data?.memberId!;
+    this.thFirstname = data?.thFirstname!;
+    this.engFirstname = data?.engFirstname!;
+    this.thLastname = data?.thLastname!;
+    this.engLastname = data?.engLastname!;
+    this.thFullName = data?.thFullName!;
+    this.engFullName = data?.engFullName!;
+    this.email = data?.email!;
+    this.tel = data?.tel!;
+    this.picture = data?.picture!;
+    this.pictureBackground = data?.pictureBackground ?? "";
+    this.organization = new MyOrganizationModel(
+      data?.organization,
+      this.translateService
+    );
+    this.department = new MyDepartmentModel(
+      data?.department,
+      this.translateService
+    );
+    this.position = new MyPositionModel(data?.position, this.translateService);
+    this.job = new MyJobModel(data?.job, this.translateService);
+    this.level = new MyUserLevelModel(data?.level,this.translateService);
+    this.bu1 = new MyBu1Model(data?.bu1, this.translateService);
+    this.bu2 = new MyBu2Model(data?.bu2, this.translateService);
+    this.bu3 = new MyBu3Model(data?.bu3, this.translateService);
+    this.bu4 = new MyBu4Model(data?.bu4, this.translateService);
+    this.bu5 = new MyBu5Model(data?.bu5, this.translateService);
+    this.status = data?.status!
+    this.role = new MyRoleModel(data?.role, this.translateService);
+    this.workingAge = data?.workingAge!
+    this.code = data?.code!;
+    this.companyAddress = data?.companyAddress!;
+    this.companyName = data?.companyName!;
+    this.companyPosition = data?.companyPosition!;
+    this.companyType = data?.companyType!;
+    this.companyId = data?.companyId!;
+    this.roleOth = data?.roleOth!;
+    this.employeeId = data?.employeeId!;
+    this.area = data?.area!
+    this.empStatus = data?.empStatus!
+    this.birthdate = data?.birthdate!
+    this.sex =new MySexModel(data?.sex, this.translateService);
+    this.marryId =new MyMarryModel(data?.marryId, this.translateService);
+    this.empstatusId = new MyEmpStatusModel(data?.empstatusId, this.translateService);
+    this.orgName = data?.orgName!
+    this.orgEmail = data?.orgEmail!
+    this.orgTel = data?.orgTel!
+    this.trainingId = data?.trainingId!
+    this.cid = data?.cid!
+  }
+
+
+
+  getWorkAge(): string{
+    if(this.workingAge=="1"){
+      return "0-3 เดือน"
+    }else if(this.workingAge=="2"){
+      return "3-6 เดือน"
+    }else if (this.workingAge=="3"){
+      return "6 เดือน - 1 ปี"
+    }
+    else if (this.workingAge=="4"){
+      return "1 ปีขึ้นไป"
+    }
+    else if (this.workingAge=="5"){
+      return "3 ปีขึ้นไป"
+    }
+    else if (this.workingAge=="6"){
+      return "6 ปีขึ้นไป"
+    }
+    else {
+      return "-"
+    }
+
+  }
+
+
+
+  getPictureUrl(): string {
+    if (this.picture) {
+      if(!this.picture.includes('http'))
+        return environment.baseUrl + "/files/image/" + this.picture;
+      else
+        return this.picture;
+    } else {
+      return "";
+    }
+  }
+
+  getpictureBackgroundUrl(): string {
+    if (this.pictureBackground) {
+      if(!this.pictureBackground.includes('http'))
+        return environment.baseUrl + "/files/image/" + this.pictureBackground;
+      else
+        return this.pictureBackground;
+    } else {
+      return "";
+    }
+  }
+
+  getFullname(): string {
+    return this.translateService.currentLang == "th"
+      ? this.getFullnameTh()
+      : this.getFullnameEn();
+  }
+
+  getFullnameTh(): string {
+    if (this.thFirstname && this.thLastname) {
+      return this.thFirstname + " " + this.thLastname;
+    }
+    if (this.thFirstname && !this.thLastname) {
+      return this.thFirstname
+    }
+    if (!this.thFirstname && this.thLastname) {
+      return this.thLastname
+    }
+    return ""
+  }
+
+  getFullnameEn(): string {
+    if (this.engFirstname && this.engLastname) {
+      return this.engFirstname + " " + this.engLastname;
+    }
+    if (this.engFirstname && !this.engLastname) {
+      return this.engFirstname
+    }
+    if (!this.engFirstname && this.engLastname) {
+      return this.engLastname
+    }
+    return ""
+  }
+
+  getStatus(): string {
+    return this.translateService.currentLang === "th"
+      ? this.status === 1 ? "เปิดใช้งาน" : "ปิดใช้งาน"
+      : this.status === 1 ? "Enable" : "Disable"
+  }
+}
+
+export interface LoginModel {
+  userId: Number;
+  username: string;
+  password: string;
+  member: ProfileModel;
+  role: RoleModel;
+  roleOth : string;
+  status: number;
+}
+
+export class MyLoginModel extends BaseModel implements LoginModel {
+  userId: Number;
+  username: string = "";
+  password: string = "";
+  role: RoleModel;
+  member: ProfileModel;
+  roleOth: string;
+  status: number;
+  constructor(data?: Partial<LoginModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.userId = data?.userId!;
+    this.username = data?.username!;
+    this.password = data?.password!;
+    this.member = new MyProfileModel(data?.member, this.translateService);
+    this.role = new MyRoleModel(data?.role, this.translateService);
+    this.roleOth = data?.roleOth!;
+    this.status = data?.status!;
+  }
+}
+
+export interface SexModel {
+  code: string;
+  tdesc: string;
+  edesc: string;
+  getName(): string
+}
+
+export class MySexModel extends BaseModel implements SexModel {
+  code: string;
+  tdesc: string = "";
+  edesc: string = "";
+  constructor(data?: Partial<SexModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.code = data?.code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+}
+
+export interface MarryModel {
+  code: string;
+  tdesc: string;
+  edesc: string;
+  getName(): string
+}
+
+export class MyMarryModel extends BaseModel implements MarryModel {
+  code: string;
+  tdesc: string = "";
+  edesc: string = "";
+  constructor(data?: Partial<MarryModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.code = data?.code!;
+    this.tdesc = data?.tdesc!;
+    this.edesc = data?.edesc!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.tdesc
+      : this.edesc;
+  }
+}
+
+export interface EmpStatusModel {
+  empstatusId: Number;
+  empstatusCode: string;
+  empstatusName: string;
+  empstatusEngName: string;
+  companyId: string;
+  getName(): string
+}
+
+export class MyEmpStatusModel extends BaseModel implements EmpStatusModel {
+  empstatusId: Number;
+  empstatusCode: string;
+  empstatusName: string;
+  empstatusEngName: string;
+  companyId: string;
+  constructor(data?: Partial<EmpStatusModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.empstatusId = data?.empstatusId!;
+    this.empstatusCode = data?.empstatusCode!;
+    this.empstatusName = data?.empstatusName!;
+    this.empstatusEngName = data?.empstatusEngName!;
+    this.companyId = data?.companyId!;
+  }
+  getName(): string {
+    return this.translateService.currentLang == "th"
+      ? this.empstatusName
+      : this.empstatusEngName;
+  }
+
+}

src/app/portal-manage/mylearn/company-manage-course/company-manage-course.component.html

+<app-page-header [title]="'การจัดการบริษัท'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'Company Page'">
+</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">{{HrcompanyList.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()"
+            (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+              class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+            translate}}
+          </a>
+
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full me-2" *ngIf="someSelected"
+            (click)="adjustSelect(1)"><i class="ri-user-follow-line font-semibold align-middle"></i>{{ 'Publish' |
+            translate}}
+          </a>
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-amber-full ti-btn-sec me-2"
+            *ngIf="someSelected" (click)="adjustSelect(0)"><i
+              class="ri-user-unfollow-line font-semibold align-middle"></i>{{ 'Unpublish' |
+            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="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">{{"โลโก้"|translate}}</th>
+                <th scope="col" class="text-start">{{"รหัสบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"ชื่อบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"หน่วยงาน" | translate}}</th>
+                <th scope="col" class="text-start">{{"Management"|translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @if (filterList.length > 0) {
+              @for (item of filterList; track item.companyId) {
+              <tr class="border border-defaultborder dark:border-defaultborder/10">
+                <td class="product-checkbox">
+                  <input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.companyId) || false"
+                    (change)="onCheckboxChange(item.companyId)" aria-label="...">
+                </td>
+                <td>
+                  <div class="flex items-center">
+                    <span class="p-3 me-1" style="width: 200px;">
+                        รูป
+                      <!-- <img
+                        [src]="item.getPictureURL() === '' ? 'assets/images/media/default-pic-gX.png' : item.getPictureURL()"
+                        id="profile-img" class="border-radius-1"
+                        style="width: 180px; height: 120px; object-fit: cover;"> -->
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyCode}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyName}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.branchName}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor"
+                      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);"
+                      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="HrcompanyList.length === 0 && !searchTerm">
+                    <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                  </ng-container>
+                  <ng-container *ngIf="HrcompanyList.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] cursor-pointer"
+                    (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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? HrcompanyList.length : filterList.length)"
+                  class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                    translate}}</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/portal-manage/mylearn/company-manage-course/company-manage-course.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { HrcompanyModel, MyHrcompanyModel } from '../../models/mylearn/myhrcompany.model';
+import { MyhrcompanyService } from '../../services/mylearn/myhrcompany.service';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-company-manage-course',
+  templateUrl: './company-manage-course.component.html',
+  styleUrls: ['./company-manage-course.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    FormsModule,
+  ],
+})
+export class CompanyManageCourseComponent implements OnInit {
+
+  HrcompanyList: HrcompanyModel[] = [];
+  filterList: HrcompanyModel[] = [];
+  MyhrcompanyList: MyHrcompanyModel[] = [];
+
+  _searchTerm = "";
+  pageIndex = 0;
+  allSelected = false;
+  someSelected = false;
+  selectedItems = new Map<string, boolean>();
+
+  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();
+    }
+  }
+  constructor(
+    private myhrcompanyservice: MyhrcompanyService,
+    public translate: TranslateService,
+  ) { }
+
+  ngOnInit() {
+    this.getMyHRCompany();
+  }
+
+  onCheckboxChange(companyId: string) {
+    const isSelected = this.selectedItems.get(companyId) || false;
+    this.selectedItems.set(companyId, !isSelected);
+    this.allSelected = this.HrcompanyList.every(item => this.selectedItems.get(item.companyId));
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.HrcompanyList.forEach(item => {
+      this.selectedItems.set(item.companyId, this.allSelected);
+    });
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+  
+  filter(v: string) {
+    return this.HrcompanyList?.filter(
+      (x) =>
+        x.companyId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyCode?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.branchName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.HrcompanyList.slice(startIndex, endIndex);
+  }
+
+  getMyHRCompany() {
+    this.myhrcompanyservice.getList().subscribe({
+      next: (response: HrcompanyModel[]) => {
+        this.MyhrcompanyList  = response.map(
+          (x: HrcompanyModel) => new MyHrcompanyModel(x,this.translate)
+        );
+        this.HrcompanyList = this.MyhrcompanyList;
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error('error cant get article', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
+      }
+    });
+  }
+
+}

src/app/portal-manage/mylearn/course-transfer/course-transfer.component.html

+<app-page-header [title]="'โอนย้ายคอร์ส'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'Company Page'"></app-page-header>
+
+<div class="box p-6">
+    <div class="relative w-full max-w-4xl mx-auto my-8 font-sans">
+        <button
+            class="w-full bg-white bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 ease-in-out flex items-center justify-between">
+            <span class="text-xl sm:text-2xl text-primary">
+                {{ selectedCompany ? selectedCompany.companyName : 'เลือกบริษัทต้นทาง' }}
+            </span>
+            <i class="ri-search-line text-primary" style="font-size: 24px;"
+                (click)="openCompanyModal(sourceCompanyModal)"></i>
+        </button>
+    </div>
+
+    <div *ngIf="selectedCompany" class="bg-gray-50 border p-4 rounded-lg">
+        <h3 class="font-bold mb-4">บริษัทที่เลือก: {{ selectedCompany.companyName }}</h3>
+
+        <div class="mb-4">
+            <label class="block mb-1 font-medium">เลือกคอร์ส</label>
+            <div class="flex gap-2">
+                <input type="text" class="form-control" [value]="selectedCourse?.thName || ''" placeholder="เลือกคอร์ส"
+                    readonly />
+                <button class="btn btn-outline-primary" (click)="openCourseModal(courseModal)">
+                    <i class="ri-search-line"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="mb-4">
+            <label class="block mb-1 font-medium">เลือกบริษัทปลายทาง</label>
+            <div class="flex gap-2">
+                <input type="text" class="form-control" [value]="selectedTargetCompany?.companyName || ''"
+                    placeholder="เลือกบริษัทปลายทาง" readonly />
+                <button class="btn btn-outline-warning" (click)="openCompanyModal(targetCompanyModal)">
+                    <i class="ri-search-line"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="flex justify-end mt-4">
+            <button type="button" (click)="transferCourse()" class="ti-btn bg-primary text-white !font-medium"
+                [disabled]="!selectedCompany || !selectedCourse || !selectedTargetCompany">โอนคอร์ส
+            </button>
+        </div>
+    </div>
+</div>
+
+<ng-template #sourceCompanyModal>
+    <div class="ti-modal-content p-6">
+        <div class="box overflow-x-auto">
+            <div class="box-header justify-between">
+                <div class="box-title">
+                    เลือกบริษัทต้นทาง
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <div>
+                        <input class="form-control form-control" type="text" placeholder="Search..."
+                            aria-label=".form-control-sm example" [(ngModel)]="searchModal"
+                            (ngModelChange)="updateModalPagedItems()">
+                    </div>
+                </div>
+            </div>
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+                <thead>
+                    <tr class="border-b border-defaultborder bg-primary text-white">
+                        <th scope="col" class="text-start">{{ 'โลโก้บริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'รหัสบริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'ชื่อบริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'หน่วยงาน' | translate}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let company of CompanyFilterSource() | slice:(modalPageIndexSource*modalPageSize):(modalPageIndexSource+1)*modalPageSize"
+                        (click)="selectCompany(company)">
+                        <td>
+                            <span class="p-3 me-1" style="width: 50px;">
+                                <img [src]="company.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : company.pictureUrl"
+                                    id="profile-img" class="border-radius-1"
+                                    style="width: 50px; height: 50px; object-fit: cover;">
+                            </span>
+                        </td>
+                        <td>{{ company.companyId }}</td>
+                        <td>{{ company.companyName }}</td>
+                        <td>{{ company.branchName }}</td>
+                    </tr>
+                    <!-- <tr>
+                    <td [attr.colspan]="6" class="text-center py-4">
+                        <ng-container *ngIf="itemsListConsent.length === 0 && !searchTerm">
+                            <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="itemsListConsent.length > 0 && filterListConsent.length === 0 && searchTerm">
+                            <p>ไม่พบข้อมูลที่ค้นหา...</p>
+                        </ng-container>
+                    </td>
+                </tr> -->
+                </tbody>
+            </table>
+        </div>
+        <div class="ti-modal-footer flex justify-end gap-4 mb-3">
+            <button type="button" class="hs-dropdown-toggle ti-btn  bg-danger align-middle text-white !font-medium"
+                (click)="closeModal()">
+                {{'Close' | translate}}
+            </button>
+        </div>
+    </div>
+</ng-template>
+
+<!-- 🔹 Modal: เลือกคอร์ส -->
+<ng-template #courseModal>
+    <div class="ti-modal-content p-6">
+        <div class="box overflow-x-auto">
+            <div class="box-header justify-between">
+                <div class="box-title">
+                    เลือกคอร์ส
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <div>
+                        <input class="form-control form-control" type="text" placeholder="Search..."
+                            aria-label=".form-control-sm example" [(ngModel)]="searchCourse"
+                            (ngModelChange)="updateModalPagedCourse()">
+                    </div>
+                </div>
+            </div>
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+                <thead>
+                    <tr class="border-b border-defaultborder bg-primary text-white">
+                        <th scope="col" class="text-start">{{ 'รหัสคอร์ส' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'ชื่อ (ไทย)' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'ชื่อ (อังกฤษ)' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'สถานะ' | translate}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let course of CourseFilter() | slice:(modalPageIndexSource*modalPageSize):(modalPageIndexSource+1)*modalPageSize"
+                        class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer"
+                        (click)="selectCourse(course)">
+                        <td>{{ course.courseId }}</td>
+                        <td>{{ course.thName }}</td>
+                        <td>{{ course.engName }}</td>
+                        <td>
+                            <ng-container *ngIf="course.publish === 1">
+                                <span class="badge bg-success text-white">
+                                    เผยแพร่ </span>
+                            </ng-container>
+                            <ng-container *ngIf="course.publish === 0">
+                                <span class="badge bg-amber-300 text-white">
+                                    ไม่เผยแพร่ </span>
+                            </ng-container>
+                        </td>
+                    </tr>
+                    <!-- <tr>
+                    <td [attr.colspan]="6" class="text-center py-4">
+                        <ng-container *ngIf="itemsListConsent.length === 0 && !searchTerm">
+                            <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="itemsListConsent.length > 0 && filterListConsent.length === 0 && searchTerm">
+                            <p>ไม่พบข้อมูลที่ค้นหา...</p>
+                        </ng-container>
+                    </td>
+                </tr> -->
+                </tbody>
+            </table>
+        </div>
+        <div class="ti-modal-footer flex justify-end gap-4 mb-3">
+            <button type="button" class="hs-dropdown-toggle ti-btn  bg-danger align-middle text-white !font-medium"
+                (click)="closeModal()">
+                {{'Close' | translate}}
+            </button>
+        </div>
+    </div>
+</ng-template>
+
+<!-- 🔹 Modal: เลือกบริษัทปลายทาง -->
+<ng-template #targetCompanyModal>
+    <div class="ti-modal-content p-6">
+        <div class="box overflow-x-auto">
+            <div class="box-header justify-between">
+                <div class="box-title">
+                    เลือกบริษัทปลายทาง
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <div>
+                        <input class="form-control form-control" type="text" placeholder="Search..."
+                            aria-label=".form-control-sm example" [(ngModel)]="searchTarget"
+                            (ngModelChange)="updateModalPagedItems()">
+                    </div>
+                </div>
+            </div>
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+                <thead>
+                    <tr class="border-b border-defaultborder bg-primary text-white">
+                        <th scope="col" class="text-start">{{ 'โลโก้บริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'รหัสบริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'ชื่อบริษัท' | translate}}</th>
+                        <th scope="col" class="text-start">{{ 'หน่วยงาน' | translate}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let company of CompanyFilterTarget() | slice:(modalPageIndexTarget*modalPageSize):(modalPageIndexTarget+1)*modalPageSize"
+                        (click)="selectTargetCompany(company)">
+                        <td>
+                            <span class="p-3 me-1" style="width: 50px;">
+                                <img [src]="company.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : company.pictureUrl"
+                                    id="profile-img" class="border-radius-1"
+                                    style="width: 50px; height: 50px; object-fit: cover;">
+                            </span>
+                        </td>
+                        <td>{{ company.companyCode }}</td>
+                        <td>{{ company.companyName }}</td>
+                        <td>{{ company.branchName }}</td>
+                    </tr>
+                    <!-- <tr>
+                    <td [attr.colspan]="6" class="text-center py-4">
+                        <ng-container *ngIf="itemsListConsent.length === 0 && !searchTerm">
+                            <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="itemsListConsent.length > 0 && filterListConsent.length === 0 && searchTerm">
+                            <p>ไม่พบข้อมูลที่ค้นหา...</p>
+                        </ng-container>
+                    </td>
+                </tr> -->
+                </tbody>
+            </table>
+        </div>
+        <div class="ti-modal-footer flex justify-end gap-4 mb-3">
+            <button type="button" class="hs-dropdown-toggle ti-btn  bg-danger align-middle text-white !font-medium"
+                (click)="closeModal()">
+                {{'Close' | translate}}
+            </button>
+        </div>
+    </div>
+</ng-template>
\ No newline at end of file

src/app/portal-manage/mylearn/course-transfer/course-transfer.component.ts

+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import swal from 'sweetalert';
+import { TransferService } from '../../services/mylearn/transfer.service';
+import { TransferModel } from '../../models/mylearn/transfer.model';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../../shared/shared.module';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { MyhrcompanyService } from '../../services/mylearn/myhrcompany.service';
+import { HrcompanyModel, MyHrcompanyModel } from '../../models/mylearn/myhrcompany.model';
+import { CourseService } from '../../services/mylearn/course.service';
+import { CourseModel, MyCourseModel } from '../../models/mylearn/course.model';
+
+@Component({
+    standalone: true,
+    selector: 'app-course-transfer',
+    templateUrl: './course-transfer.component.html',
+    styleUrls: ['./course-transfer.component.scss'],
+    imports: [
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        FormsModule,
+    ],
+})
+export class CourseTransferComponent implements OnInit {
+    MyhrcompanyList: MyHrcompanyModel[] = [];
+    HrcompanyList: HrcompanyModel[] = [];
+    companyId: string = '';
+
+    searchCourse = ""
+    searchTarget = ""
+    searchModal = ""
+    modalPageIndex = 0;
+    modalPageIndexSource = 0;
+    modalPageIndexTarget = 0;
+    readonly maxPageButtons = 15;
+
+    modalPageSize = 10;
+
+    allCourses: CourseModel[] = [];
+    courses: CourseModel[] = [];
+    MycoursesList: MyCourseModel[] = [];
+
+    selectedCompany?: MyHrcompanyModel;
+    selectedCourse?: MyCourseModel;
+    selectedTargetCompany?: MyHrcompanyModel;
+
+    private dialogRef?: MatDialogRef<any>;
+
+    constructor(
+        private transferService: TransferService,
+        private myhrcompanyservice: MyhrcompanyService,
+        private translate: TranslateService,
+        private courseService: CourseService,
+        private dialog: MatDialog
+    ) { }
+
+    ngOnInit() {
+        this.getMyHRCompany();
+        this.getMyHRCompanyExternal();
+    }
+
+    getCourseByCompany(companyId: string) {
+        this.courseService.getListByCompany(companyId).subscribe({
+            next: (res: CourseModel[]) => {
+                this.MycoursesList = res.map(
+                    (x: CourseModel) => new MyCourseModel(x, this.translate)
+                );
+                this.courses = [...this.allCourses];
+                this.allCourses = this.MycoursesList;
+            },
+            error: (err) => console.error("โหลด courses ไม่ได้", err)
+        });
+    }
+
+    getMyHRCompany() {
+        this.myhrcompanyservice.getList().subscribe({
+            next: (response: HrcompanyModel[]) => {
+                this.MyhrcompanyList = response.map(
+                    (x: HrcompanyModel) => new MyHrcompanyModel(x, this.translate)
+                );
+                this.HrcompanyList = this.MyhrcompanyList;
+            },
+            error: (error) => {
+                console.error('error cant get company', error);
+                swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
+            }
+        });
+    }
+    getMyHRCompanyExternal() {
+        const externalCompanyId = "5f3c2b6e-8d7a-4b2f-a3e6-9f1d8c4e7b0a";
+        this.myhrcompanyservice.getByCompany(externalCompanyId).subscribe({
+            next: (response: HrcompanyModel) => {
+                const company = new MyHrcompanyModel(response, this.translate);
+                this.HrcompanyList.push(company);
+            },
+            error: (error) => {
+                console.error("error can't get external company", error);
+                swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูล external company ได้", "error");
+            }
+        });
+    }
+
+    openCompanyModal(template: TemplateRef<any>) {
+        this.dialogRef = this.dialog.open(template, { width: '900px', height: '600px' });
+        this.updateModalPagedItems();
+    }
+
+    openCourseModal(template: TemplateRef<any>) {
+        this.dialogRef = this.dialog.open(template, { width: '900px', height: '600px' });
+        this.updateModalPagedCourse()
+    }
+
+    closeModal() {
+        if (this.dialogRef) {
+            this.dialogRef.close();
+            this.dialogRef = undefined;
+        }
+    }
+
+    selectCompany(company: HrcompanyModel) {
+        this.selectedCompany = new MyHrcompanyModel(company, this.translate);
+        this.companyId = company.companyId;
+        this.getCourseByCompany(this.companyId);
+        this.closeModal();
+        this.updateModalPagedItems();
+    }
+
+    selectCourse(course: CourseModel) {
+        this.selectedCourse = new MyCourseModel(course, this.translate);
+        this.closeModal();
+        this.updateModalPagedCourse()
+    }
+
+    selectTargetCompany(company: HrcompanyModel) {
+        this.selectedTargetCompany = new MyHrcompanyModel(company, this.translate);
+        this.closeModal();
+        this.updateModalPagedItems();
+    }
+
+    transferCourse() {
+        if (!this.selectedCompany || !this.selectedCourse || !this.selectedTargetCompany) {
+            swal("ผิดพลาด", "กรุณาเลือกข้อมูลให้ครบ", "error");
+            return;
+        }
+
+        const payload: TransferModel = {
+            refCourseId: Number(this.selectedCourse.courseId),
+            refCompanyId: this.selectedCompany.companyId,
+            toCompanyId: this.selectedTargetCompany.companyId
+        };
+
+        this.transferService.TransferHistory(payload).subscribe(history => {
+            if (history && history.exists) {
+                swal({
+                    title: "เคยโอนแล้ว",
+                    text: "คุณต้องการอัพเดตข้อมูลหรือไม่?",
+                    icon: "warning",
+                    buttons: ["ยกเลิก", "อัพเดต"],
+                    dangerMode: true,
+                }).then((confirm) => {
+                    if (confirm) {
+                        this.doTransfer(payload);
+                    }
+                });
+            } else {
+                this.doTransfer(payload);
+            }
+        });
+    }
+
+    // private doTransfer(payload: TransferModel) {
+    //     this.transferService.TransferCourse(payload).subscribe({
+    //         next: () => swal("สำเร็จ", "โอนคอร์สเรียบร้อยแล้ว", "success"),
+    //         error: (err) => swal("ผิดพลาด", "โอนคอร์สไม่สำเร็จ: " + err.message, "error"),
+    //     });
+    // }
+    private doTransfer(payload: TransferModel) {
+        this.transferService.TransferCourse(payload).subscribe({
+            next: () => {
+                swal("สำเร็จ", "โอนคอร์สเรียบร้อยแล้ว", "success");
+                this.selectedCompany = undefined;
+                this.selectedCourse = undefined;
+                this.selectedTargetCompany = undefined;
+                this.companyId = '';
+                this.courses = [];
+            },
+            error: (err) => swal("ผิดพลาด", "โอนคอร์สไม่สำเร็จ: " + err.message, "error"),
+        });
+    }
+
+    CompanyFilterSource(): HrcompanyModel[] {
+        return this.MyhrcompanyList.filter((item: HrcompanyModel) =>
+            item.companyId.toLowerCase().includes(this.searchModal.toLowerCase()) ||
+            item.companyName.toLowerCase().includes(this.searchModal.toLowerCase()) ||
+            item.branchName.toLowerCase().includes(this.searchModal.toLowerCase())
+        );
+    }
+    CompanyFilterTarget(): HrcompanyModel[] {
+        return this.MyhrcompanyList.filter((item: HrcompanyModel) =>
+            (item.companyId.toLowerCase().includes(this.searchTarget.toLowerCase()) ||
+                item.companyName.toLowerCase().includes(this.searchTarget.toLowerCase()) ||
+                item.branchName.toLowerCase().includes(this.searchTarget.toLowerCase())) &&
+            item.companyId !== this.selectedCompany?.companyId
+        );
+    }
+    updateModalPagedItems() {
+        const filteredData = this.CompanyFilterSource() || this.CompanyFilterTarget();
+        const startIndex = this.modalPageIndexSource || this.modalPageIndexTarget * this.modalPageSize;
+        const endIndex = startIndex + this.modalPageSize;
+        this.HrcompanyList = filteredData.slice(startIndex, endIndex);
+    }
+
+    CourseFilter(): CourseModel[] {
+        if (!this.searchCourse) {
+            return this.allCourses; // ✅ ถ้า search ว่าง ให้คืนค่าข้อมูลทั้งหมด
+        }
+        return this.allCourses.filter((item: CourseModel) =>
+            item.courseId.toString().includes(this.searchCourse.toLowerCase()) ||
+            item.thName.toLowerCase().includes(this.searchCourse.toLowerCase()) ||
+            item.engName.toLowerCase().includes(this.searchCourse.toLowerCase())
+        );
+    }
+
+    updateModalPagedCourse() {
+        const filteredData = this.CourseFilter();
+        const startIndex = this.modalPageIndex * this.modalPageSize;
+        const endIndex = startIndex + this.modalPageSize;
+        this.courses = filteredData.slice(startIndex, endIndex); // ✅ ไม่ overwrite allCourses
+    }
+
+    get totalModalItemsCompany(): number {
+        return this.CompanyFilterSource().length;
+    }
+    get totalModalItemsCompanyTarget(): number {
+        return this.CompanyFilterTarget().length;
+    }
+    get totalModalItemsCourse(): number {
+        return this.CourseFilter().length;
+    }
+    get totalPagesArrayInModal(): number[] {
+    const totalPages = Math.ceil(this.totalModalItemsCompany || this.totalModalItemsCompanyTarget || this.totalModalItemsCourse / this.modalPageSize);
+    const pageButtons: number[] = [];
+
+    let startPage: number, endPage: number;
+
+    if (totalPages <= this.maxPageButtons) {
+      startPage = 1;
+      endPage = totalPages;
+    } else {
+      const halfButtons = Math.floor(this.maxPageButtons / 2);
+      if (this.modalPageIndex < halfButtons) {
+        startPage = 1;
+        endPage = this.maxPageButtons;
+      } else if (this.modalPageIndex >= totalPages - halfButtons) {
+        startPage = totalPages - this.maxPageButtons + 1;
+        endPage = totalPages;
+      } else {
+        startPage = this.modalPageIndex - halfButtons + 1;
+        endPage = this.modalPageIndex + halfButtons;
+      }
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pageButtons.push(i);
+    }
+    return pageButtons;
+  }
+}

src/app/portal-manage/mylearn/management-user/management-user.component.html

+<app-page-header [title]="'การจัดการผู้ใช้งาน'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'การจัดการผู้ใช้งาน'">
+</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">{{HrcompanyList.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()"
+            (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+              class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+            translate}}
+          </a>
+
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full me-2" *ngIf="someSelected"
+            (click)="adjustSelect(1)"><i class="ri-user-follow-line font-semibold align-middle"></i>{{ 'Publish' |
+            translate}}
+          </a>
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-amber-full ti-btn-sec me-2"
+            *ngIf="someSelected" (click)="adjustSelect(0)"><i
+              class="ri-user-unfollow-line font-semibold align-middle"></i>{{ 'Unpublish' |
+            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="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">{{"โลโก้"|translate}}</th>
+                <th scope="col" class="text-start">{{"รหัสบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"ชื่อบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"หน่วยงาน" | translate}}</th>
+                <th scope="col" class="text-start">{{"การจัดการสิทธิ์"|translate}}</th>
+                <th scope="col" class="text-start">{{"การอนุญาติสิทธิ์ผู้ใช้งาน"|translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @if (filterList.length > 0) {
+              @for (item of filterList; track item.companyId) {
+              <tr class="border border-defaultborder dark:border-defaultborder/10">
+                <td class="product-checkbox">
+                  <input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.companyId) || false"
+                    (change)="onCheckboxChange(item.companyId)" aria-label="...">
+                </td>
+                <td>
+                  <div class="flex items-center">
+                    <span class="p-3 me-1" style="width: 200px;">
+                      <img
+                        [src]="item.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : item.pictureUrl"
+                        id="profile-img" class="border-radius-1"
+                        style="width: 100px; height: 100px; object-fit: cover;">
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyCode}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyName}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.branchName}}
+                    </span>
+                  </div>
+                </td>
+                <td style="justify-items: center;">
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor" (click)="goToDetail(item.companyId)"
+                      class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info cursor-pointer">
+                      <i class="ri-eye-line"></i>
+                    </a>
+                  </div>
+                </td>
+                <td style="justify-items: center;">
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor" (click)="goTouserauthorizathin(item.companyId)"
+                      class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info cursor-pointer">
+                      <i class="ri-eye-line"></i>
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              }
+              } @else {
+              <tr>
+                <td [attr.colspan]="6" class="text-center py-4">
+                  <ng-container *ngIf="HrcompanyList.length === 0 && !searchTerm">
+                    <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                  </ng-container>
+                  <ng-container *ngIf="HrcompanyList.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] cursor-pointer"
+                    (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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? HrcompanyList.length : filterList.length)"
+                  class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                    translate}}</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/portal-manage/mylearn/management-user/management-user.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { HrcompanyModel, MyHrcompanyModel, } from '../../models/mylearn/myhrcompany.model';
+import { MyhrcompanyService } from '../../services/mylearn/myhrcompany.service';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-management-user',
+  templateUrl: './management-user.component.html',
+  styleUrls: ['./management-user.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    FormsModule,
+  ],
+})
+export class ManagementUserComponent implements OnInit {
+
+  HrcompanyList: HrcompanyModel[] = [];
+  filterList: HrcompanyModel[] = [];
+  MyhrcompanyList: MyHrcompanyModel[] = [];
+
+  companyId: string;
+
+
+  _searchTerm = "";
+  pageIndex = 0;
+  allSelected = false;
+  someSelected = false;
+  selectedItems = new Map<string, boolean>();
+
+  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();
+    }
+  }
+  constructor(
+    private myhrcompanyservice: MyhrcompanyService,
+    public translate: TranslateService,
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+    this.getMyHRCompany();
+  }
+
+  onCheckboxChange(companyId: string) {
+    const isSelected = this.selectedItems.get(companyId) || false;
+    this.selectedItems.set(companyId, !isSelected);
+    this.allSelected = this.HrcompanyList.every(item => this.selectedItems.get(item.companyId));
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.HrcompanyList.forEach(item => {
+      this.selectedItems.set(item.companyId, this.allSelected);
+    });
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+
+  filter(v: string) {
+    return this.HrcompanyList?.filter(
+      (x) =>
+        x.companyId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyCode?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.branchName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.HrcompanyList.slice(startIndex, endIndex);
+  }
+
+  getMyHRCompany() {
+    this.myhrcompanyservice.getList().subscribe({
+      next: (response: HrcompanyModel[]) => {
+        this.MyhrcompanyList = response.map(
+          (x: HrcompanyModel) => new MyHrcompanyModel(x, this.translate)
+        );
+        this.HrcompanyList = this.MyhrcompanyList;
+        this.updatePagedItems();
+        this.getMyHRCompanyExternal();
+      },
+      error: (error) => {
+        console.error('error cant get article', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
+      }
+    });
+  }
+  getMyHRCompanyExternal() {
+    const externalCompanyId = "5f3c2b6e-8d7a-4b2f-a3e6-9f1d8c4e7b0a";
+    this.myhrcompanyservice.getByCompany(externalCompanyId).subscribe({
+      next: (response: HrcompanyModel) => {
+        const company = new MyHrcompanyModel(response, this.translate);
+        this.HrcompanyList.push(company);
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error("error can't get external company", error);
+        swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูล external company ได้", "error");
+      }
+    });
+  }
+
+  getMyHRCompanyById() {
+    this.myhrcompanyservice.getByCompany(this.companyId).subscribe({
+      next: (response: HrcompanyModel) => {
+        const company = new MyHrcompanyModel(response, this.translate)
+      },
+      error: (error) => {
+        console.error("error can't get myhrcompany by Id")
+        swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error")
+      }
+    })
+  }
+
+  goToDetail(companyId: string) {
+    this.router.navigate(['/mylearn/management-user/user-role', companyId]);
+  }
+
+  goTouserauthorizathin(companyId: string) {
+    this.router.navigate(['/mylearn/management-user/user-authorization', companyId]);
+  }
+
+}

src/app/portal-manage/mylearn/management-user/user-authorization/user-authorization.component.html

+<app-page-header [title]="'การจัดการสิทธิ์ผู้ใช้งาน'" [activeTitle]="'ผู้ดูแลระบบ'"
+    [title1]="'การจัดการสิทธิ์ผู้ใช้งาน'">
+</app-page-header>
+<div class="grid grid-cols-12 gap-4">
+    <div class="box xl:col-span-12 col-span-12" *ngIf="company">
+        <div class="grid grid-cols-3 items-center pt-2 pb-2 pr-2 pl-2">
+
+            <div class="p-4 justify-items-center">
+                <img [src]="company.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : company.pictureUrl"
+                    id="profile-img" class="border-radius-1" style="width: 315px; height: 188px;">
+            </div>
+
+            <div class="p-4">
+                <h2 class="text-lg font-bold text-primary mb-2">{{ company.companyName }}</h2>
+                <p class="text-sm"><span class="text-primary font-bold text-sm">รหัสบริษัท:</span> {{
+                    company.companyCode }}</p>
+                <p class="text-sm"><span class="text-primary font-bold text-sm">สาขา:</span> {{ company.branchName }}
+                </p>
+                <p class="text-sm"><span class="text-primary font-bold text-sm">ที่อยู่:</span> {{ company.companyAddr
+                    }}</p>
+                <p class="text-sm"><span class="text-primary font-bold text-sm">เบอร์โทร:</span> {{ company.companyTel
+                    }}</p>
+                <p class="text-sm"><span class="text-primary font-bold text-sm">Tax ID:</span> {{ company.companyTax }}
+                </p>
+            </div>
+
+            <div>
+
+            </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">
+                    {{ 'All List' | translate}} <span
+                        class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{UserList.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()" (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+                            class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+                        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="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">{{"ลำดับ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"ชื่อ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"สิทธ์การใช้งาน"|translate}}</th>
+                                <th scope="col" class="text-start">{{"action" | translate}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if (filterList.length > 0) {
+                            @for (item of filterList; track item.member.memberId; let i = $index) {
+                            <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer">
+                                <td class="product-checkbox">
+                                    <input class="form-check-input" type="checkbox"
+                                        [checked]="selectedItems.get(item.member.memberId) || false"
+                                        (change)="onCheckboxChange(item.member.memberId)">
+                                </td>
+                                <td class="product-checkbox">
+                                    {{ i+1 }}
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{ item.member.getFullname() }}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{ item.role.roleCode }}
+                                        </span>
+                                    </div>
+                                <td>
+                                    <div class="flex flex-row items-center !gap-2 ">
+                                        <div class="flex flex-row items-center !gap-2 ">
+                                            <a aria-label="anchor" (click)="viewUser(item)" (click)="openDialog()"
+                                                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)="delete(item)"
+                                                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>
+                                    </div>
+                                </td>
+                            </tr>
+                            }
+                            } @else {
+                            <tr>
+                                <td [attr.colspan]="6" class="text-center py-4">
+                                    <ng-container *ngIf="UserList.length === 0 && !searchTerm">
+                                        <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                                    </ng-container>
+                                    <ng-container *ngIf="UserList.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] cursor-pointer"
+                                        (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 == '' ? UserList.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 == '' ? UserList.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 == '' ? UserList.length : filterList.length)"
+                                        (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? UserList.length : filterList.length)"
+                                    class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                        (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                                        translate}}</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<ng-template #userModal let-modal>
+    <div class="modal-headtitle ti-modal-header flex justify-between items-center p-4"
+        style="background-color: #fefbfb;">
+        <h3 class="modal-title text-sm font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+            <span *ngIf="action === 'add'">{{ 'Create' | translate }}</span>
+            <span *ngIf="action === 'edit'">{{ 'Edit' | translate }}</span>{{ 'สิทธิ์การใช้งาน' | translate }}
+        </h3>
+        <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+            (click)="closeDialog()" #closeModal>
+            <span class="sr-only">{{'Close' | translate}}</span>
+            <i class="ri-close-line"></i>
+        </button>
+    </div>
+    <div class="w-full flex justify-end">
+        <div class="absolute flex">
+            <div class="px-1">
+            </div>
+        </div>
+    </div>
+    <mat-dialog-content style="padding: 0px; padding-left: 20px; padding-right: 20px;">
+        <div class="box p-9 top-4">
+            <div class="grid grid-cols-12 gap-4">
+                <div class="xl:col-span-12 col-span-12">
+                    <label for="profileFullName" class="text-primary mt-4 font-bold font-14">
+                        {{ 'ชื่อผู้ใช้งาน' | translate }}
+                    </label>
+                    <input type="text" class="form-control bg-red-300" id="profileFullName"
+                        [value]="selectModel.member.getFullname()" readonly>
+                    <div class="text-danger" *ngIf="!selectModel.member?.getFullname()">
+                        {{ 'Please fill in information' | translate }}
+                    </div>
+                </div>
+
+                <div class="xl:col-span-12 col-span-12 relative">
+                    <label for="profileFullName" class="text-primary mt-4 font-bold font-14">
+                        {{ 'โปรไฟล์' | translate }}
+                    </label>
+
+                    <div class="relative w-full">
+                        <input type="text" id="profileFullName" class="form-control w-full pr-10"
+                            [value]="selectModel.member.getFullname()" placeholder="ค้นหาผู้ใช้งาน..." readonly />
+
+                        <span
+                            class="absolute inset-y-0 right-3 flex items-center text-gray-500 hover:text-primary cursor-pointer"
+                            (click)="openDialogProfile()">
+                            <i class="ri-search-line text-lg"></i>
+                        </span>
+                    </div>
+                </div>
+
+                <!-- เลือกหลาย roleuser -->
+                <!-- <div class="xl:col-span-12 col-span-12">
+                    <label class="mt-4 font-bold font-14 text-primary">
+                        {{ 'สิทธิ์การใช้งาน' | translate }}
+                    </label>
+                    <ng-select class="form-control" [items]="RoleOptions" bindLabel="label" bindValue="value"
+                        [(ngModel)]="menuMultiSelected" [multiple]="true" placeholder="เลือกสิทธิ์การใช้งาน">
+                    </ng-select>
+                </div> -->
+                <div class="xl:col-span-12 col-span-12">
+                    <label class="mt-4 font-bold font-14 text-primary">
+                        {{ 'สิทธิ์การใช้งาน' | translate }}
+                    </label>
+                    <ng-select class="form-control" [items]="RoleOptions" bindLabel="label" bindValue="value"
+                        [(ngModel)]="menuSelected" placeholder="เลือกสิทธิ์การใช้งาน">
+                    </ng-select>
+                </div>
+            </div>
+        </div>
+    </mat-dialog-content>
+    <mat-dialog-actions style="justify-content: end;">
+        <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" (click)="closeDialog()">
+            {{'Cancel' | translate}}
+        </button>
+        <button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium"
+            [class.ti-btn-disabled]="!menuSelected || menuSelected === 0"
+            [disabled]="!menuSelected || menuSelected === 0">
+            {{'Save'| translate}}
+        </button>
+    </mat-dialog-actions>
+</ng-template>
+
+<ng-template #Profile let-modal>
+    <div class="modal-headtitle ti-modal-header flex justify-between items-center p-4"
+        style="background-color: #fefbfb;">
+        <h3 class="modal-title text-sm font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+            {{ 'โปรไฟล์ผู้ใช้งาน' | translate }}
+        </h3>
+        <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+            (click)="closeDialogProfile()" #closeModal>
+            <span class="sr-only">{{'Close' | translate}}</span>
+            <i class="ri-close-line"></i>
+        </button>
+    </div>
+    <div class="w-full flex justify-end">
+        <div class="absolute flex">
+            <div class="px-1">
+            </div>
+        </div>
+    </div>
+    <mat-dialog-content style="padding: 0px; padding-left: 20px; padding-right: 20px;">
+        <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">{{UserList.length}}</span>
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <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="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 text-white bg-primary">
+                                <th scope="col" class="text-start">{{"ลำดับ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"รูป"|translate}}</th>
+                                <th scope="col" class="text-start">{{"ชื่อ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"อีเมล์"|translate}}</th>
+                                <th scope="col" class="text-start">{{"สิทธ์การใช้งาน"|translate}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if (filterList.length > 0) {
+                            @for (item of filterList; track item.member.memberId; let i = $index) {
+                            <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer"
+                                (click)="selectProfile(item)">
+                                <td class="product-checkbox">
+                                    {{ i+1 }}
+                                </td>
+                                <td>
+                                    <div class="flex items-center">
+                                        <span class="p-3 me-1" style="width: 200px;">
+                                            <img [src]="item.member.getPictureUrl() === '' ? 'assets/images/media/default-pic-gX.png' : item.member.getPictureUrl()"
+                                                id="profile-img" class="border-radius-1"
+                                                style="width: 100px; height: 100px; object-fit: cover;">
+                                        </span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{ item.member.getFullname() }}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{ item.member.email }}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{ item.role.roleCode }}
+                                        </span>
+                                    </div>
+                                </td>
+                            </tr>
+                            }
+                            } @else {
+                            <tr>
+                                <td [attr.colspan]="6" class="text-center py-4">
+                                    <ng-container *ngIf="UserList.length === 0 && !searchTerm">
+                                        <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                                    </ng-container>
+                                    <ng-container *ngIf="UserList.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] cursor-pointer"
+                                        (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 == '' ? UserList.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 == '' ? UserList.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 == '' ? UserList.length : filterList.length)"
+                                        (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? UserList.length : filterList.length)"
+                                    class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                        (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                                        translate}}</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </mat-dialog-content>
+    <mat-dialog-actions style="justify-content: end;">
+        <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
+            (click)="closeDialogProfile()">
+            {{'Cancel' | translate}}
+        </button>
+    </mat-dialog-actions>
+</ng-template>
\ No newline at end of file

src/app/portal-manage/mylearn/management-user/user-authorization/user-authorization.component.scss

+::ng-deep .ng-select .ng-value-container .ng-value {
+  background-color: #1E3A8A !important; /* น้ำเงิน */
+  color: #fff !important;               /* ตัวหนังสือขาว */
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+::ng-deep .ng-select .ng-value-container .ng-value .ng-value-label {
+  color: #fff !important; /* ตัวหนังสือขาว */
+}
+
+::ng-deep .ng-select .ng-value-container .ng-value .ng-value-icon {
+  color: #fff !important; /* ไอคอนกากบาท (x) เป็นสีขาว */
+}
\ No newline at end of file

src/app/portal-manage/mylearn/management-user/user-authorization/user-authorization.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ProfileModel, MyProfileModel, MyRoleModel, RoleModel } from '../../../models/mylearn/user.model';
+import { UserRoleService } from '../../../services/mylearn/user-role.service';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MyhrcompanyService } from '../../../services/mylearn/myhrcompany.service';
+import { HrcompanyModel } from '../../../models/mylearn/myhrcompany.model';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { UserService } from '../../../services/mylearn/user.service';
+import { MyUserAccountModel, UserAccountModel } from '../../../models/mylearn/user-account.model';
+
+@Component({
+    selector: 'app-user-authorization',
+    templateUrl: './user-authorization.component.html',
+    styleUrls: ['./user-authorization.component.scss'],
+    standalone: true,
+    imports: [
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        FormsModule,
+        NgSelectModule,
+        MatDialogModule,
+    ],
+})
+export class UserAuthorizationComponent implements OnInit {
+    @ViewChild("userModal") userModal: any;
+    @ViewChild("Profile") Profile: any;
+
+    UserList: UserAccountModel[] = [];
+    filterList: UserAccountModel[] = [];
+    MyUserlist: MyUserAccountModel[] = [];
+    selectModel: UserAccountModel = new MyUserAccountModel();
+    company?: HrcompanyModel;
+    companyId: string;
+    // เลือกหลาย roleuser
+    // menuMultiSelected: number[] = [];
+    menuSelected: number = 0;
+
+    RoleList: RoleModel[] = [];
+    MyRoleList: MyRoleModel[] = [];
+    RoleOptions: { value: number; label: string }[] = [];
+
+
+    selectedMemberId: string = "";
+    selectedMemberName: string = "";
+    action = "new";
+    dialogRef: any;
+    dialogRefProfile: any;
+    _searchTerm = "";
+    pageIndex = 0;
+    allSelected = false;
+    someSelected = false;
+    selectedItems = new Map<string, boolean>();
+
+    selectedMenu: string[] = [];
+
+    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();
+        }
+    }
+
+    constructor(
+        private userroleservice: UserRoleService,
+        private userservice: UserService,
+        public translate: TranslateService,
+        private router: Router,
+        private route: ActivatedRoute,
+        private myhrcompanyservice: MyhrcompanyService,
+        private dialog: MatDialog,
+    ) { }
+
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id')!;
+        this.myhrcompanyservice.getByCompany(id).subscribe(company => {
+            this.company = company;
+            console.log("Company detail:", company);
+            this.getRoleOptions();
+            this.getUser();
+        });
+    }
+
+    new() {
+        this.action = 'add';
+        this.selectModel = new MyUserAccountModel();
+        this.selectModel.member = new MyProfileModel();
+        this.selectModel.member.memberId = "";
+        this.selectModel.role.roleId = 0;
+        this.menuSelected = 0;
+    }
+    // getRoleOptions() {
+    //     if (!this.companyId) return;
+
+    //     this.userroleservice.getListsByCompany(this.companyId).subscribe({
+    //         next: (roles: RoleModel[]) => {
+    //             this.RoleOptions = roles.map(r => ({
+    //                 value: r.roleId,
+    //                 label: `${r.thName} (${r.engName})`
+    //             }));
+    //             console.log("✅ RoleOptions:", this.RoleOptions);
+    //         },
+    //         error: (err) => {
+    //             console.error("โหลด role ไม่ได้:", err);
+    //             swal("ข้อผิดพลาด", "ไม่สามารถโหลดสิทธิ์การใช้งานได้", "error");
+    //         }
+    //     });
+    // }
+
+    getRoleOptions() {
+        this.companyId = this.route.snapshot.paramMap.get('id')!;
+
+        this.userroleservice.getListsByCompany(this.companyId).subscribe({
+            next: (response: RoleModel[]) => {
+                this.MyRoleList = response.map(
+                    (x: RoleModel) => new MyRoleModel(x, this.translate)
+                );
+
+                // ✅ สร้าง options แยกออกมา
+                this.RoleOptions = this.MyRoleList.map(r => ({
+                    value: r.roleId,
+                    label: `${r.roleCode} - ${r.thName} (${r.engName})`
+                }));
+            },
+            error: (error) => {
+                console.error('error cant get article', error);
+                swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลสิทธิ์การใช้งานได้", "error");
+            }
+        });
+    }
+
+    viewUser(user: UserAccountModel) {
+        this.action = 'edit';
+        this.selectModel = new MyUserAccountModel(user, this.translate);
+        this.menuSelected = user.role ? user.role.roleId : 0;
+
+        // 👇 ต้องเซ็ต memberId ให้ถูกต้อง
+        this.selectedMemberId = user.member.memberId;
+    }
+
+    onCheckboxChange(memberId: string) {
+        const isSelected = this.selectedItems.get(memberId) || false;
+        this.selectedItems.set(memberId, !isSelected);
+
+        this.allSelected = this.UserList.every(item =>
+            this.selectedItems.get(item.member.memberId)
+        );
+        this.someSelected = this.UserList.some(item =>
+            this.selectedItems.get(item.member.memberId)
+        );
+    }
+
+    toggleAll(event: any) {
+        this.allSelected = event.target.checked;
+        this.selectedItems.clear();
+
+        this.UserList.forEach(item => {
+            this.selectedItems.set(item.member.memberId, this.allSelected);
+        });
+
+        this.someSelected = this.UserList.some(item =>
+            this.selectedItems.get(item.member.memberId)
+        );
+    }
+
+    filter(v: string) {
+        return this.UserList?.filter(x =>
+            x.member.memberId?.toLowerCase().includes(v.toLowerCase()) ||
+            x.role.getName()?.toLowerCase().includes(v.toLowerCase()) ||
+            x.member.getFullname()?.toLowerCase().includes(v.toLowerCase())
+        );
+    }
+
+    updatePagedItems() {
+        const startIndex = this.pageIndex * 10;
+        const endIndex = startIndex + 10;
+        this.filterList = this.UserList.slice(startIndex, endIndex);
+    }
+
+    getUser() {
+        this.companyId = this.route.snapshot.paramMap.get('id')!;
+
+        this.userservice.getListsByCompany(this.companyId).subscribe({
+            next: (response: UserAccountModel[]) => {
+                this.MyUserlist = response.map(
+                    (x: UserAccountModel) => new MyUserAccountModel(x, this.translate)
+                );
+                this.UserList = this.MyUserlist;
+                this.filterList = this.MyUserlist;
+                this.updatePagedItems();
+            },
+            error: (error) => {
+                console.error('error cant get article', error);
+                swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลสิทธิ์การใช้งานได้", "error");
+            }
+        });
+    }
+
+    openDialog() {
+        this.dialogRef = this.dialog.open(this.userModal, {
+            width: '600px',
+            disableClose: false,
+        });
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
+    save() {
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: "คุณต้องการบันทึกหรือไม่",
+            icon: "warning",
+            dangerMode: false,
+            buttons: ["ยกเลิก", "ยืนยัน"],
+        }).then((willSave: any) => {
+            if (willSave) {
+                const cleanUsername = (this.selectModel.username || "").split(",")[0].trim();
+                const cleanMemberId = (this.selectedMemberId || "").split(",")[0].trim();
+                const selectedRole = this.MyRoleList.find(r => r.roleId === this.menuSelected);
+
+                const payload: any = {
+                    userId: this.action === 'edit' ? this.selectModel.userId : 0,
+                    username: `${cleanUsername},${this.companyId}`,
+                    password: this.selectModel.password,
+                    companyId: this.companyId,
+                    status: this.selectModel.status,
+                    roleOth: selectedRole ? JSON.stringify([selectedRole.roleCode]) : "[]",
+                    member: {
+                        memberId: `${cleanMemberId},${this.companyId}`,
+                        thFirstname: this.selectModel.member?.thFirstname || "",
+                        thLastname: this.selectModel.member?.thLastname || "",
+                        engFirstname: this.selectModel.member?.engFirstname || "",
+                        engLastname: this.selectModel.member?.engLastname || "",
+                        email: cleanUsername,
+                        companyId: this.companyId
+                    },
+                    role: selectedRole
+                        ? {
+                            roleId: selectedRole.roleId,
+                            roleCode: selectedRole.roleCode,
+                            thName: selectedRole.thName,
+                            engName: selectedRole.engName,
+                            menu: selectedRole["menu"] || "[]",
+                            companyId: this.companyId
+                        }
+                        : null
+                };
+
+                console.log("🚀 payload (fixed)", payload);
+
+                this.userservice.save(payload).subscribe(
+                    (result: any) => {
+                        if (result.state === "FAIL") {
+                            swal("ข้อผิดพลาด!!", result.message, "error");
+                        } else {
+                            swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
+                            this.ngOnInit();
+                            this.closeDialog();
+                        }
+                    },
+                    (error) => {
+                        console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
+                        swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
+                    }
+                );
+            }
+        });
+    }
+
+    delete(user: UserAccountModel) {
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
+            icon: "warning",
+            dangerMode: true,
+            buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+        }).then((willDelete: any) => {
+            if (willDelete) {
+                this.userservice.deleteById(user.member.memberId).subscribe(
+                    () => {
+                        swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
+                        this.getUser();
+                    },
+                    (error) => {
+                        console.error("เกิดข้อผิดพลาดในการลบ:", error);
+                        swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+                    }
+                );
+            }
+        });
+    }
+
+    deleteSelect() {
+        const selectedUsers = this.UserList.filter(u =>
+            this.selectedItems.get(u.member.memberId)
+        );
+
+        if (selectedUsers.length === 0) return;
+
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: `คุณต้องการลบ ${selectedUsers.length} รายการใช่หรือไม่`,
+            icon: "warning",
+            buttons: ["ยกเลิก", "ลบ"],
+            dangerMode: true,
+        }).then((willDelete: any) => {
+            if (willDelete) {
+                const deleteCalls = selectedUsers.map(u =>
+                    this.userservice.deleteById(u.member.memberId).toPromise()
+                );
+
+                Promise.all(deleteCalls)
+                    .then(() => {
+                        swal("ลบสำเร็จ!!", "ข้อมูลถูกลบแล้ว", "success");
+                        this.getUser();
+                        this.selectedItems.clear();
+                        this.allSelected = false;
+                        this.someSelected = false;
+                    })
+                    .catch((err) => {
+                        console.error("เกิดข้อผิดพลาดในการลบ:", err);
+                        swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+                    });
+            }
+        });
+    }
+
+    openDialogProfile() {
+        this.dialogRefProfile = this.dialog.open(this.Profile, {
+            width: '900px',
+            disableClose: false,
+        });
+    }
+    closeDialogProfile() {
+        this.dialogRefProfile.close();
+    }
+
+    selectProfile(item: UserAccountModel) {
+        this.selectedMemberId = item.member.memberId;
+        this.selectedMemberName = item.member.getFullname();
+        this.selectModel.member = item.member;
+        this.closeDialogProfile();
+    }
+
+}

src/app/portal-manage/mylearn/management-user/user-role/user-role.component.html

+<app-page-header [title]="'การจัดการสิทธิ์'" [activeTitle]="'ผู้ดูแลระบบ'"
+    [title1]="'การจัดการสิทธิ์'">
+</app-page-header>
+<div class="grid grid-cols-12 gap-4">
+  <div class="box xl:col-span-12 col-span-12" *ngIf="company">
+    <div class="grid grid-cols-3 items-center pt-2 pb-2 pr-2 pl-2">
+      
+      <div class="p-4 justify-items-center">
+        <img [src]="company.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : company.pictureUrl"
+             id="profile-img"
+             class="border-radius-1"
+             style="width: 315px; height: 188px;">
+      </div>
+      
+      <div class="p-4">
+        <h2 class="text-lg font-bold text-primary mb-2">{{ company.companyName }}</h2>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">รหัสบริษัท:</span> {{ company.companyCode }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">สาขา:</span> {{ company.branchName }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">ที่อยู่:</span> {{ company.companyAddr }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">เบอร์โทร:</span> {{ company.companyTel }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">Tax ID:</span> {{ company.companyTax }}</p>
+      </div>
+      
+      <div>
+
+      </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">
+                    {{ 'All List' | translate}} <span
+                        class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{RoleList.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()" (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+                            class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+                        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="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">{{"ลำดับ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"สิทธ์การใช้งาน"|translate}}</th>
+                                <th scope="col" class="text-start">{{"ชื่อ"|translate}}</th>
+                                <th scope="col" class="text-start">{{"action" | translate}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if (filterList.length > 0) {
+                            @for (item of filterList; track item.roleId; let i = $index) {
+                            <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer">
+                                <td class="product-checkbox">
+                                    <input class="form-check-input" type="checkbox"
+                                        [checked]="selectedItems.get(item.roleId) || false"
+                                        (change)="onCheckboxChange(item.roleId)" aria-label="...">
+                                </td>
+                                <td class="product-checkbox">
+                                    {{ i+1 }}
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{item.roleCode}}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div>
+                                        <span class="block mb-1">
+                                            {{item.getName()}}
+                                        </span>
+                                    </div>
+                                <td>
+                                    <div class="flex flex-row items-center !gap-2 ">
+                                        <div class="flex flex-row items-center !gap-2 ">
+                                            <a aria-label="anchor" (click)="view(item)" (click)="openDialog()"
+                                                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)="delete(item)"
+                                                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>
+                                    </div>
+                                </td>
+                            </tr>
+                            }
+                            } @else {
+                            <tr>
+                                <td [attr.colspan]="6" class="text-center py-4">
+                                    <ng-container *ngIf="RoleList.length === 0 && !searchTerm">
+                                        <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                                    </ng-container>
+                                    <ng-container *ngIf="RoleList.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] cursor-pointer"
+                                        (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 == '' ? RoleList.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 == '' ? RoleList.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 == '' ? RoleList.length : filterList.length)"
+                                        (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? RoleList.length : filterList.length)"
+                                    class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                        (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                                        translate}}</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<ng-template #userroleModal let-modal>
+    <div class="modal-headtitle ti-modal-header flex justify-between items-center p-4"
+        style="background-color: #fefbfb;">
+        <h3 class="modal-title text-sm font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+            <span *ngIf="action === 'add'">{{ 'Create' | translate }}</span>
+            <span *ngIf="action === 'edit'">{{ 'Edit' | translate }}</span>{{ 'สิทธิ์การใช้งาน' | translate }}
+        </h3>
+        <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+            (click)="closeDialog()" #closeModal>
+            <span class="sr-only">{{'Close' | translate}}</span>
+            <i class="ri-close-line"></i>
+        </button>
+    </div>
+    <div class="w-full flex justify-end">
+        <div class="absolute flex">
+            <div class="px-1">
+            </div>
+        </div>
+    </div>
+    <mat-dialog-content style="padding: 0px; padding-left: 20px; padding-right: 20px;">
+        <div class="box p-9 top-4">
+            <div class="grid grid-cols-12 gap-4">
+                <div class="xl:col-span-12 col-span-12">
+                    <label for="roleCode" class="text-primary mt-4 font-bold font-14">{{'สิทธิ์การใช้งาน' |
+                        translate}}</label>
+                    <input type="text" class="form-control" id="roleCode" placeholder=""
+                        [(ngModel)]="selectModel.roleCode">
+                    <div class="text-danger" *ngIf="!selectModel.roleCode">
+                        {{'Please fill in information' | translate}}
+                    </div>
+                </div>
+
+                <div class="xl:col-span-6 col-span-12">
+                    <label for="thName" class="text-primary mt-4 font-bold font-14">{{'ชื่อ (ไทย)' | translate}}</label>
+                    <input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName">
+                    <div class="text-danger" *ngIf="!selectModel.thName">
+                        {{'Please fill in information' | translate}}
+                    </div>
+                </div>
+
+                <div class="xl:col-span-6 col-span-12">
+                    <label for="engName" class="text-primary mt-4 font-bold font-14">{{'ชื่อ (อังกฤษ)' |
+                        translate}}</label>
+                    <input type="text" class="form-control" id="engName" placeholder=""
+                        [(ngModel)]="selectModel.engName">
+                    <div class="text-danger" *ngIf="!selectModel.engName">
+                        {{'Please fill in information' | translate}}
+                    </div>
+                </div>
+
+                <div class="xl:col-span-12 col-span-12">
+                    <label for="menu" class="mt-4 font-bold font-14 text-primary">
+                        {{ 'เลือกเมนู' | translate }}
+                    </label>
+                    <ng-select class="form-control" [items]="multiMenu" bindLabel="label" bindValue="value"
+                        [multiple]="true" groupBy="group" [(ngModel)]="menuMultiSelected" placeholder="เลือกเมนู"
+                        name="menuSelect">
+                    </ng-select>
+                    <div class="text-danger" *ngIf="!menuMultiSelected || menuMultiSelected.length === 0">
+                        {{'Please fill in information' | translate}}
+                    </div>
+
+                </div>
+
+
+            </div>
+        </div>
+    </mat-dialog-content>
+    <mat-dialog-actions style="justify-content: end;">
+        <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" (click)="closeDialog()">
+            {{'Cancel' | translate}}
+        </button>
+        <button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium"
+            [class.ti-btn-disabled]="!selectModel.roleCode||!selectModel.thName||!selectModel.engName|| !menuMultiSelected || menuMultiSelected.length === 0"
+            [disabled]="!selectModel.roleCode||!selectModel.thName||!selectModel.engName|| !menuMultiSelected || menuMultiSelected.length === 0">
+            {{'Save'| translate}}
+        </button>
+    </mat-dialog-actions>
+</ng-template>
\ No newline at end of file

src/app/portal-manage/mylearn/management-user/user-role/user-role.component.scss

+::ng-deep .ng-select .ng-dropdown-panel .ng-optgroup {
+  background-color: #f1f1f1; /* เทาอ่อน */
+  font-weight: bold;
+  color: #333;
+  padding: 6px 10px;
+}
+::ng-deep .ng-select.form-control .ng-select-container {
+  height: calc(2.25rem + 2px); /* เท่ากับ input.form-control */
+  min-height: calc(2.25rem + 2px);
+  border-radius: 0.375rem; /* ปรับให้โค้งเหมือน input */
+  border: 1px solid #ced4da; /* สี border เท่ากับ input */
+  padding: 0.375rem 0.75rem;
+}
+
+::ng-deep .ng-select.ng-select-multiple .ng-select-container {
+  height: auto !important;         /* ✅ ปล่อยให้สูงตาม content */
+  min-height: 38px;                /* ✅ ความสูงขั้นต่ำ (เหมือน input) */
+  align-items: flex-start !important; /* ✅ ให้ item เรียงขึ้นบน */
+  flex-wrap: wrap !important;      /* ✅ อนุญาตให้ wrap ลงบรรทัดใหม่ */
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+::ng-deep .ng-select .ng-value-container .ng-value {
+  background-color: #1E3A8A !important; /* น้ำเงิน */
+  color: #fff !important;               /* ตัวหนังสือขาว */
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+::ng-deep .ng-select .ng-value-container .ng-value .ng-value-label {
+  color: #fff !important; /* ตัวหนังสือขาว */
+}
+
+::ng-deep .ng-select .ng-value-container .ng-value .ng-value-icon {
+  color: #fff !important; /* ไอคอนกากบาท (x) เป็นสีขาว */
+}
\ No newline at end of file

src/app/portal-manage/mylearn/management-user/user-role/user-role.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RoleModel, MyRoleModel } from '../../../models/mylearn/user.model';
+import { UserRoleService } from '../../../services/mylearn/user-role.service';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MyhrcompanyService } from '../../../services/mylearn/myhrcompany.service';
+import { HrcompanyModel } from '../../../models/mylearn/myhrcompany.model';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-user-role',
+    templateUrl: './user-role.component.html',
+    styleUrls: ['./user-role.component.scss'],
+    standalone: true,
+    imports: [
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        FormsModule,
+        NgSelectModule,
+        MatDialogModule,
+    ],
+})
+export class UserRoleComponent implements OnInit {
+    @ViewChild("userroleModal") userroleModal: any;
+
+    RoleList: RoleModel[] = [];
+    filterList: RoleModel[] = [];
+    MyRoleList: MyRoleModel[] = [];
+    selectModel: RoleModel = new MyRoleModel();
+    company?: HrcompanyModel;
+    companyId: string;
+    menuMultiSelected: string[] = [];
+
+    action = "new";
+    dialogRef: any;
+    _searchTerm = "";
+    pageIndex = 0;
+    allSelected = false;
+    someSelected = false;
+    selectedItems = new Map<Number, boolean>();
+
+    // multi select
+    multiMenu: any[] = [];
+    selectedMenu: string[] = [];
+
+    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();
+        }
+    }
+
+    constructor(
+        private userroleservice: UserRoleService,
+        public translate: TranslateService,
+        private router: Router,
+        private route: ActivatedRoute,
+        private myhrcompanyservice: MyhrcompanyService,
+        private dialog: MatDialog,
+    ) { }
+
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id')!;
+        this.myhrcompanyservice.getByCompany(id).subscribe(company => {
+            this.company = company;
+            console.log("Company detail:", company);
+        });
+        this.getUserrole();
+        this.getMenuList();
+    }
+
+    new() {
+        this.action = 'add';
+        this.selectModel = new MyRoleModel();
+        this.selectModel.roleCode = "";
+        this.selectModel.thName = "";
+        this.selectModel.engName = "";
+        this.selectModel.menu = "";
+        this.selectModel.companyId = this.companyId;
+        this.menuMultiSelected = [];
+    }
+
+    // view(item: RoleModel) {
+    //     this.action = 'edit';
+    //     this.selectModel = new MyRoleModel(item);
+    //     this.menuMultiSelected = item.menu ? item.menu.split(",") : [];
+    //     console.log(this.selectModel);
+    // }
+    view(item: RoleModel) {
+        this.action = 'edit';
+        this.selectModel = new MyRoleModel(item);
+
+        try {
+            // ถ้า item.menu เป็น JSON string (เช่น '["Organization","Department"]')
+            this.menuMultiSelected = item.menu ? JSON.parse(item.menu) : [];
+        } catch (e) {
+            // fallback กรณีเป็น string ธรรมดา (เช่น "Organization,Department")
+            this.menuMultiSelected = item.menu ? item.menu.split(",").map(m => m.trim()) : [];
+        }
+
+        console.log("menu from DB:", item.menu);
+        console.log("menuMultiSelected:", this.menuMultiSelected);
+        console.log("multiMenu values:", this.multiMenu.map(x => x.value));
+    }
+
+    onCheckboxChange(roleId: Number) {
+        const isSelected = this.selectedItems.get(roleId) || false;
+        this.selectedItems.set(roleId, !isSelected);
+        this.allSelected = this.RoleList.every(item => this.selectedItems.get(item.roleId));
+        this.someSelected = this.RoleList.some(item => this.selectedItems.get(item.roleId));
+    }
+
+    toggleAll(event: any) {
+        this.allSelected = event.target.checked;
+        this.selectedItems.clear();
+        this.RoleList.forEach(item => {
+            this.selectedItems.set(item.roleId, this.allSelected);
+        });
+        this.someSelected = this.RoleList.some(item => this.selectedItems.get(item.roleId));
+    }
+
+    filter(v: string) {
+        return this.RoleList?.filter(
+            (x) =>
+                x.roleId?.toString().indexOf(v.toLowerCase()) !== -1 ||
+                x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+                x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+                x.companyId?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+        );
+    }
+
+    updatePagedItems() {
+        const startIndex = this.pageIndex * 10;
+        const endIndex = startIndex + 10;
+        this.filterList = this.RoleList.slice(startIndex, endIndex);
+    }
+
+    getUserrole() {
+        this.companyId = this.route.snapshot.paramMap.get('id')!;
+
+        this.userroleservice.getListsByCompany(this.companyId).subscribe({
+            next: (response: RoleModel[]) => {
+                this.MyRoleList = response.map(
+                    (x: RoleModel) => new MyRoleModel(x, this.translate)
+                );
+                this.RoleList = this.MyRoleList;
+                this.filterList = this.MyRoleList;
+                this.updatePagedItems();
+            },
+            error: (error) => {
+                console.error('error cant get article', error);
+                swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลสิทธิ์การใช้งานได้", "error");
+            }
+        });
+    }
+
+    getMenuList() {
+        const raw = [
+            {
+                label: "Master",
+                options: [
+                    { value: "Organization", label: "Organization" },
+                    { value: "Department", label: "Department" },
+                    { value: "BU1", label: "BU1" },
+                    { value: "BU2", label: "BU2" },
+                    { value: "BU3", label: "BU3" },
+                    { value: "BU4", label: "BU4" },
+                    { value: "BU5", label: "BU5" },
+                    { value: "Position", label: "Position" },
+                    { value: "Level", label: "Level" },
+                    { value: "Job Description", label: "Job Description" },
+                    { value: "Team", label: "Team" },
+                    { value: "Work Process", label: "Work Process" },
+                    { value: "Banner", label: "Banner" },
+                ]
+            },
+            {
+                label: "Library",
+                options: [
+                    { value: "Exam Library", label: "Exam Library" }
+                ]
+            },
+            {
+                label: "Course",
+                options: [
+                    { value: "Course Group", label: "Course Group" },
+                    { value: "Course Category", label: "Course Category" },
+                    { value: "Course Level", label: "Course Level" },
+                    { value: "Course", label: "Course" },
+                    { value: "Certificated Design Management", label: "Certificated Design Management" },
+                    { value: "Instructor", label: "Instructor" },
+                    { value: "Training", label: "Training" },
+                    { value: "Scorm", label: "Scorm" },
+                    { value: "Payment Transfer", label: "Payment Transfer" },
+                    { value: "Activity Schedule", label: "Activity Schedule" },
+                    { value: "Activity Place", label: "Activity Place" },
+                    { value: "Course Setup Display", label: "Course Setup Display" },
+                ]
+            },
+            {
+                label: "User Management",
+                options: [
+                    { value: "User Role", label: "User Role" },
+                    { value: "User Profile", label: "User Profile" },
+                    { value: "User Profile (External)", label: "User Profile (External)" },
+                    { value: "User Authorization", label: "User Authorization" },
+                ]
+            },
+            {
+                label: "Learn Status",
+                options: [
+                    { value: "Courses View", label: "Courses View" },
+                    { value: "Learners View", label: "Learners View" },
+                    { value: "Job Description View", label: "Job Description View" },
+                    { value: "User Authorization", label: "User Authorization" },
+                ]
+            },
+            {
+                label: "myHr Data",
+                options: [
+                    { value: "Reprocess Data", label: "Reprocess Data" },
+                    { value: "Resent Data", label: "Resent Data" },
+                ]
+            },
+            {
+                label: "Report",
+                options: [
+                    { value: "Report Course", label: "Report Course" },
+                    { value: "Report study status", label: "Report study status" },
+                    { value: "Report Master", label: "Report Master" },
+                    { value: "Report Library", label: "Report Library" },
+                    { value: "User Management", label: "User Management" },
+                    { value: "Dashboard Management", label: "Dashboard Management" },
+                ]
+            }
+        ];
+        this.multiMenu = raw.flatMap(group =>
+            group.options.map(opt => ({
+                ...opt,
+                group: group.label
+            }))
+        );
+    }
+
+    openDialog() {
+        this.dialogRef = this.dialog.open(this.userroleModal, {
+            width: '600px',
+            disableClose: false,
+        });
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
+    save() {
+        this.selectModel.companyId = this.companyId;
+        this.selectModel.menu = JSON.stringify(this.menuMultiSelected);
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: "คุณต้องการบันทึกหรือไม่",
+            icon: "warning",
+            dangerMode: false,
+            buttons: ["ยกเลิก", "ยืนยัน"],
+        }).then((willSave: any) => {
+            if (willSave) {
+                this.userroleservice.create(this.selectModel).subscribe(result => {
+                    console.log(result);
+                    swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
+                    this.ngOnInit();
+                    this.closeDialog();
+                }, error => {
+                    console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
+                    swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
+                });
+            }
+        });
+    }
+
+    delete(item: RoleModel) {
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
+            icon: "warning",
+            dangerMode: true,
+            buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+        })
+            .then((willDelete: any) => {
+                if (willDelete) {
+                    this.userroleservice.deleteroleById(item.roleId).subscribe(result => {
+                        swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
+                        this.ngOnInit();
+                    }, error => {
+                        console.error("เกิดข้อผิดพลาดในการลบ:", error);
+                        swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+                    });
+                }
+            });
+    }
+    deleteSelect() {
+        const selectedIds = this.RoleList
+            .filter(role => this.selectedItems.get(role.roleId))
+            .map(role => role.roleId);
+
+        if (selectedIds.length === 0) return;
+
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: `คุณต้องการลบ ${selectedIds.length} รายการใช่หรือไม่`,
+            icon: "warning",
+            buttons: ["ยกเลิก", "ลบ"],
+            dangerMode: true,
+        }).then((willDelete: any) => {
+            if (willDelete) {
+                const deleteCalls = selectedIds.map(id => {
+                    const role = this.RoleList.find(r => r.roleId === id)!;
+                    return this.userroleservice.delete(role).toPromise();
+                });
+
+                Promise.all(deleteCalls)
+                    .then(() => {
+                        swal("ลบสำเร็จ!!", "ข้อมูลถูกลบแล้ว", "success");
+                        this.getUserrole();
+                        this.selectedItems.clear();
+                        this.allSelected = false;
+                        this.someSelected = false;
+                    })
+                    .catch(err => {
+                        console.error("เกิดข้อผิดพลาดในการลบ:", err);
+                        swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+                    });
+            }
+        });
+    }
+
+}

src/app/portal-manage/mylearn/myhrcompany/manage-course/manage-course.component.html

+<app-page-header [title]="'การจัดการคอร์ส'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'Company Page'">
+</app-page-header>
+<div class="grid grid-cols-12 gap-4">
+  <div class="box xl:col-span-12 col-span-12" *ngIf="company">
+    <div class="grid grid-cols-3 items-center pt-2 pb-2 pr-2 pl-2">
+      
+      <div class="p-4 justify-items-center">
+        <img [src]="company.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : company.pictureUrl"
+             id="profile-img"
+             class="border-radius-1"
+             style="width: 315px; height: 188px;">
+      </div>
+      
+      <div class="p-4">
+        <h2 class="text-lg font-bold text-primary mb-2">{{ company.companyName }}</h2>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">รหัสบริษัท:</span> {{ company.companyCode }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">สาขา:</span> {{ company.branchName }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">ที่อยู่:</span> {{ company.companyAddr }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">เบอร์โทร:</span> {{ company.companyTel }}</p>
+        <p class="text-sm"><span class="text-primary font-bold text-sm">Tax ID:</span> {{ company.companyTax }}</p>
+      </div>
+      
+      <div>
+
+      </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">
+                    {{ 'All List' | translate}} <span
+                        class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{courses.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()"
+                        (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+                        class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+                        translate}}
+                    </a>
+
+                    <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full me-2" *ngIf="someSelected"
+                        (click)="adjustSelect(1)"><i class="ri-user-follow-line font-semibold align-middle"></i>{{ 'Publish' |
+                        translate}}
+                    </a>
+                    <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-amber-full ti-btn-sec me-2"
+                        *ngIf="someSelected" (click)="adjustSelect(0)"><i
+                        class="ri-user-unfollow-line font-semibold align-middle"></i>{{ 'Unpublish' |
+                        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="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">Course ID</th>
+                                <th scope="col" class="text-start">ชื่อ (ไทย)</th>
+                                <th scope="col" class="text-start">ชื่อ (อังกฤษ)</th>
+                                <th scope="col" class="text-start">ผู้ดูแล</th>
+                                <th scope="col" class="text-start">สถานะ</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if (filterList.length > 0) {
+                            @for (item of filterList; track item.courseId) {
+                            <tr class="border border-defaultborder dark:border-defaultborder/10">
+                                <td>
+                                    <input type="checkbox" class="form-check-input"
+                                        [checked]="selectedItems.get(item.courseId.toString()) || false"
+                                        (change)="onCheckboxChange(item.courseId)" />
+                                </td>
+                                <td>{{ item.courseId }}</td>
+                                <td>{{ item.thName }}</td>
+                                <td>{{ item.engName }}</td>
+                                <td *ngIf="item.owner">
+                                    {{ item.owner.getFullname() }}
+                                </td>
+                                <td>
+                                    <ng-container *ngIf="item.publish === 1">
+                                        <span class="badge bg-success text-white">
+                                            เผยแพร่ </span>
+                                    </ng-container>
+                                    <ng-container *ngIf="item.publish === 0">
+                                        <span class="badge bg-amber-300 text-white">
+                                            ไม่เผยแพร่ </span>
+                                    </ng-container>
+                                </td>
+                            </tr>
+                            }
+                            } @else {
+                            <tr>
+                                <td [attr.colspan]="5" class="text-center py-4">
+                                    <ng-container *ngIf="courses.length === 0 && !searchTerm">
+                                        <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                                    </ng-container>
+                                    <ng-container *ngIf="courses.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] cursor-pointer"
+                                        (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 == '' ? courses.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 == '' ? courses.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 == '' ? courses.length : filterList.length)"
+                                        (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? courses.length : filterList.length)"
+                                    class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                        (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                                        translate}}</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/portal-manage/mylearn/myhrcompany/manage-course/manage-course.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MyhrcompanyService } from '../../../services/mylearn/myhrcompany.service';
+import { HrcompanyModel } from '../../../models/mylearn/myhrcompany.model';
+import { CourseModel, MyCourseModel } from '../../../models/mylearn/course.model';
+import { CourseService } from '../../../services/mylearn/course.service';
+import { MyProfileModel } from '../../../models/mylearn/user.model';
+
+@Component({
+    selector: 'app-manage-course',
+    templateUrl: './manage-course.component.html',
+    styleUrls: ['./manage-course.component.scss'],
+    standalone: true,
+    imports: [
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        FormsModule,
+    ],
+})
+export class ManageCourseComponent implements OnInit {
+
+    company?: HrcompanyModel;
+    courses: CourseModel[] = [];
+    filterList: CourseModel[] = [];
+    MycoursesList: MyCourseModel[] = [];
+
+    companyId: string;
+    _searchTerm = "";
+    pageIndex = 0;
+    allSelected = false;
+    someSelected = false;
+    selectedItems = new Map<string, boolean>();
+
+    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();
+        }
+    }
+    constructor(
+        private myhrcompanyservice: MyhrcompanyService,
+        public translate: TranslateService,
+        private route: ActivatedRoute,
+        private courseService: CourseService,
+    ) { }
+
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id')!;
+        this.myhrcompanyservice.getByCompany(id).subscribe(company => {
+            this.company = company;  
+            console.log("Company detail:", company);
+        });
+        this.getCourseByCompany();
+    }
+
+    onCheckboxChange(courseId: Number) {
+        const isSelected = this.selectedItems.get(courseId.toString()) || false;
+        this.selectedItems.set(courseId.toString(), !isSelected);
+        this.allSelected = this.courses.every(item => this.selectedItems.get(item.courseId.toString()));
+        this.someSelected = this.courses.some(item => this.selectedItems.get(item.courseId.toString()));
+    }
+    toggleAll(event: any) {
+        this.allSelected = event.target.checked;
+        this.selectedItems.clear();
+        this.courses.forEach(item => {
+            this.selectedItems.set(item.courseId.toString(), this.allSelected);
+        });
+        this.someSelected = this.courses.some(item => this.selectedItems.get(item.courseId.toString()));
+    }
+
+    filter(v: string) {
+        return this.courses?.filter(
+            (x) =>
+                x.courseId?.toString().indexOf(v.toLowerCase()) !== -1 ||
+                x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+                x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+        );
+    }
+    updatePagedItems() {
+        const startIndex = this.pageIndex * 10;
+        const endIndex = startIndex + 10;
+        this.filterList = this.courses.slice(startIndex, endIndex);
+    }
+
+    getCourseByCompany() {
+        this.companyId = this.route.snapshot.paramMap.get('id')!;
+
+        this.courseService.getListByCompany(this.companyId).subscribe({
+            next: (res: CourseModel[]) => {
+                this.MycoursesList = res.map(
+                    (x: CourseModel) => {
+                        const course = new MyCourseModel(x, this.translate);
+                        if (x.owner) {
+                            course.owner = new MyProfileModel(x.owner, this.translate);
+                        }
+                        return course;
+                    }
+                );
+
+                this.courses = this.MycoursesList;
+                this.updatePagedItems();
+            },
+            error: (err) => {
+                console.error("โหลด courses ไม่ได้", err);
+            }
+        });
+    }
+
+}

src/app/portal-manage/mylearn/myhrcompany/myhrcompany.component.html

+<app-page-header [title]="'จัดการบริษัท'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการบริษัท'">
+</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">{{HrcompanyList.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()"
+            (click)="openDialog()" data-hs-overlay="#modal-detail"><i
+              class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+            translate}}
+          </a>
+
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full me-2" *ngIf="someSelected"
+            (click)="adjustSelect(1)"><i class="ri-user-follow-line font-semibold align-middle"></i>{{ 'Publish' |
+            translate}}
+          </a>
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-amber-full ti-btn-sec me-2"
+            *ngIf="someSelected" (click)="adjustSelect(0)"><i
+              class="ri-user-unfollow-line font-semibold align-middle"></i>{{ 'Unpublish' |
+            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="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">{{"โลโก้"|translate}}</th>
+                <th scope="col" class="text-start">{{"รหัสบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"ชื่อบริษัท"|translate}}</th>
+                <th scope="col" class="text-start">{{"หน่วยงาน" | translate}}</th>
+                <th scope="col" class="text-start">{{"การจัดการคอร์ส"|translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @if (filterList.length > 0) {
+              @for (item of filterList; track item.companyId) {
+              <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer" (click)="goToDetail(item.companyId)">
+                <td class="product-checkbox">
+                  <input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.companyId) || false"
+                    (change)="onCheckboxChange(item.companyId)" aria-label="...">
+                </td>
+                <td>
+                  <div class="flex items-center">
+                    <span class="p-3 me-1" style="width: 200px;">
+                      <img
+                        [src]="item.pictureUrl === '' ? 'assets/images/media/default-pic-gX.png' : item.pictureUrl"
+                        id="profile-img" class="border-radius-1"
+                        style="width: 100px; height: 100px; object-fit: cover;">
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyCode}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.companyName}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div>
+                    <span class="block mb-1">
+                      {{item.branchName}}
+                    </span>
+                  </div>
+                </td>
+                <td>
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor" (click)="goToDetail(item.companyId)"
+                      class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info cursor-pointer">
+                      <i class="ri-eye-line"></i>
+                    </a>
+                    <!-- <a aria-label="anchor" href="javascript:void(0);"
+                      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="HrcompanyList.length === 0 && !searchTerm">
+                    <p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
+                  </ng-container>
+                  <ng-container *ngIf="HrcompanyList.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] cursor-pointer"
+                    (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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.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 == '' ? HrcompanyList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? HrcompanyList.length : filterList.length)"
+                  class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                    translate}}</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/portal-manage/mylearn/myhrcompany/myhrcompany.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { HrcompanyModel, MyHrcompanyModel, } from '../../models/mylearn/myhrcompany.model';
+import { MyhrcompanyService } from '../../services/mylearn/myhrcompany.service';
+import swal from 'sweetalert';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-myhrcompany',
+  templateUrl: './myhrcompany.component.html',
+  styleUrls: ['./myhrcompany.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    FormsModule,
+  ],
+})
+export class MyhrcompanyComponent implements OnInit {
+
+  HrcompanyList: HrcompanyModel[] = [];
+  filterList: HrcompanyModel[] = [];
+  MyhrcompanyList: MyHrcompanyModel[] = [];
+
+  companyId: string;
+
+
+  _searchTerm = "";
+  pageIndex = 0;
+  allSelected = false;
+  someSelected = false;
+  selectedItems = new Map<string, boolean>();
+
+  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();
+    }
+  }
+  constructor(
+    private myhrcompanyservice: MyhrcompanyService,
+    public translate: TranslateService,
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+    this.getMyHRCompany();
+  }
+
+  onCheckboxChange(companyId: string) {
+    const isSelected = this.selectedItems.get(companyId) || false;
+    this.selectedItems.set(companyId, !isSelected);
+    this.allSelected = this.HrcompanyList.every(item => this.selectedItems.get(item.companyId));
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.HrcompanyList.forEach(item => {
+      this.selectedItems.set(item.companyId, this.allSelected);
+    });
+    this.someSelected = this.HrcompanyList.some(item => this.selectedItems.get(item.companyId));
+  }
+
+  filter(v: string) {
+    return this.HrcompanyList?.filter(
+      (x) =>
+        x.companyId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyCode?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.companyName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.branchName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.HrcompanyList.slice(startIndex, endIndex);
+  }
+
+  getMyHRCompany() {
+    this.myhrcompanyservice.getList().subscribe({
+      next: (response: HrcompanyModel[]) => {
+        this.MyhrcompanyList = response.map(
+          (x: HrcompanyModel) => new MyHrcompanyModel(x, this.translate)
+        );
+        this.HrcompanyList = this.MyhrcompanyList;
+        this.updatePagedItems();
+        this.getMyHRCompanyExternal();
+      },
+      error: (error) => {
+        console.error('error cant get article', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
+      }
+    });
+  }
+  getMyHRCompanyExternal() {
+    const externalCompanyId = "5f3c2b6e-8d7a-4b2f-a3e6-9f1d8c4e7b0a";
+    this.myhrcompanyservice.getByCompany(externalCompanyId).subscribe({
+      next: (response: HrcompanyModel) => {
+        const company = new MyHrcompanyModel(response, this.translate);
+        this.HrcompanyList.push(company);
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error("error can't get external company", error);
+        swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูล external company ได้", "error");
+      }
+    });
+  }
+
+  getMyHRCompanyById() {
+    this.myhrcompanyservice.getByCompany(this.companyId).subscribe({
+      next: (response: HrcompanyModel) => {
+        const company = new MyHrcompanyModel(response, this.translate)
+      },
+      error: (error) => {
+        console.error("error can't get myhrcompany by Id")
+        swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error")
+      }
+    })
+  }
+
+  goToDetail(companyId: string) {
+    this.router.navigate(['/mylearn/myhrcompany/manage-course', companyId]);
+  }
+
+}

src/app/portal-manage/mylearn/mylearn.module.ts

@@ -118,6 +118,56 @@ export const mylearn: Routes = [
         loadComponent: () =>
           import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
       },
+      {
+        path: 'user-company',
+        loadComponent: () =>
+          import('./user-company/user-company.component').then((m) => m.UserCompanyComponent),
+      },
+      {
+        path: 'myhrcompany',
+        children: [
+          {
+            path: 'manage-course/:id',
+            loadComponent: () =>
+              import('./myhrcompany/manage-course/manage-course.component')
+                .then(m => m.ManageCourseComponent),
+          },
+          {
+            path: '',
+            loadComponent: () =>
+              import('./myhrcompany/myhrcompany.component')
+                .then(m => m.MyhrcompanyComponent),
+          },
+        ]
+      },
+      {
+        path: 'course-transfer',
+        loadComponent: () =>
+          import('./course-transfer/course-transfer.component').then((m) => m.CourseTransferComponent),
+      },
+      {
+        path: 'management-user',
+        children: [
+          {
+            path: 'user-role/:id',
+            loadComponent: () =>
+              import('./management-user/user-role/user-role.component')
+                .then(m => m.UserRoleComponent),
+          },
+          {
+            path: 'user-authorization/:id',
+            loadComponent: () =>
+              import('./management-user/user-authorization/user-authorization.component')
+                .then(m => m.UserAuthorizationComponent),
+          },
+          {
+            path: '',
+            loadComponent: () =>
+              import('./management-user/management-user.component')
+                .then(m => m.ManagementUserComponent),
+          },
+        ]
+      },
       ...portalRoutes
     ]
   }

src/app/portal-manage/mylearn/user-company/user-company.component.html

+<ng-container>
+  <app-page-header [title]="'จัดการบริษัท'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'Company Page'"></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">
+            {{ 'Company List' | translate }}
+            <span class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">
+              {{ filterArray.length }}
+            </span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <input
+              class="form-control"
+              type="text"
+              placeholder="{{'Search by ID or Name' | translate}}"
+              [(ngModel)]="searchTerm"
+            />
+          </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 class="!text-center" scope="col">#</th>
+                  <th scope="col">{{ 'Picture' | translate }}</th>
+                  <th scope="col">{{ 'Name' | translate }}</th>
+                  <th scope="col">{{ 'Owner' | translate }}</th>
+                  <th scope="col">{{ 'Status' | translate }}</th>
+                  <th scope="col">{{ 'Action' | translate }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @if (filterArray.length > 0) {
+                @for(company of filterArray | slice:(page-1)*pageSize:(page-1)*pageSize+pageSize; track filterArray){
+                <tr class="border border-defaultborder dark:border-defaultborder/10">
+                  <td class="text-center">{{ (page-1) * pageSize + $index+1 }}</td>
+                  <td>
+                    <img
+                      *ngIf="company.pictureCompany; else blankImage"
+                      [src]="company.pictureCompany"
+                      class="border p-1 w-24 h-16 object-cover"
+                    />
+                    <ng-template #blankImage>
+                      <img src="assets/images/no_img.jpg" class="border p-1 w-24 h-16 object-cover" />
+                    </ng-template>
+                  </td>
+                  <td class="text-wrap">{{ company.companyName }}</td>
+                  <td class="text-wrap">{{ company.ownerName }}</td>
+                  <td>
+                    <span class="badge"
+                      [ngClass]="company.companyStatus=='Open' ? 'bg-primary text-white' : 'bg-danger text-white'">
+                      {{ company.companyStatus=='Open' ? ('Enable' | translate) : ('Disable' | translate) }}
+                    </span>
+                  </td>
+                  <td>
+                    <div class="flex flex-row items-center gap-2">
+                      <!-- ✅ Tailwind tooltip -->
+                      <a
+                        class="relative group ti-btn ti-btn-wave bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"
+                        >
+                        <!-- [routerLink]="'../user-profile/' + company.companyId" -->
+                        <i class="ri-search-line"></i>
+                        <span
+                          class="absolute bottom-full mb-2 hidden group-hover:block
+                                 bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap">
+                          {{ 'User' | translate }}
+                        </span>
+                      </a>
+                    </div>
+                  </td>
+                </tr>
+                }
+                } @else {
+                <tr>
+                  <td colspan="6" class="text-center py-4">
+                    <p>{{ 'No data available' | translate }}</p>
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="box-footer">
+          <div class="flex items-center flex-wrap overflow-auto" *ngIf="filterArray.length > 0">
+            <div class="mb-2 sm:mb-0">
+              {{'Showing' | translate}} {{filterArray.length}} {{'entries' | translate}}
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination mb-0">
+                  <li *ngIf="page>1" class="page-item">
+                    <a class="page-link px-3 py-[0.375rem]" (click)="page = page-1">{{'Previous' | translate}}</a>
+                  </li>
+                  <li class="page-item">
+                    <a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">{{page}}</a>
+                  </li>
+                  <li *ngIf="page*pageSize < filterArray.length" class="page-item">
+                    <a class="page-link px-3 py-[0.375rem]" (click)="page = page+1">{{'Next' | translate}}</a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>

src/app/portal-manage/mylearn/user-company/user-company.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserCompanyComponent } from './user-company.component';
+
+describe('UserCompanyComponent', () => {
+  let component: UserCompanyComponent;
+  let fixture: ComponentFixture<UserCompanyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserCompanyComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserCompanyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portal-manage/mylearn/user-company/user-company.component.ts

+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { CompanyListModel, CompanyZeemeModel } from "../../models/mylearn/courseinsite.model";
+import { UserProfileService } from "../../services/mylearn/user-profile.services";
+import { CourseModel } from "../../models/mylearn/course.model";
+import { ProfileModel } from "../../models/mylearn/user.model";
+import { SharedModule } from "../../../shared/shared.module";
+
+@Component({
+  selector: "app-user-company",
+  templateUrl: "./user-company.component.html",
+  styleUrls: ["./user-company.component.scss"],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TranslateModule,
+    SharedModule,
+  ]
+})
+export class UserCompanyComponent implements OnInit {
+  filterArray: CompanyListModel[] = [];
+  courseList?: CourseModel[];
+  profileList?: ProfileModel[];
+  companyListAll?: CompanyZeemeModel[];
+  page = 1;
+  pageSize = 10;
+  searchTerm = "";
+
+  constructor(
+    private userProfileService: UserProfileService,
+    public translate: TranslateService,
+  ) {}
+
+  ngOnInit(): void {
+    this.userProfileService.getListsAll().subscribe(response => {
+      this.profileList = response;
+
+      this.userProfileService.getCompanyListAll().subscribe(companyResponse => {
+        this.companyListAll = companyResponse;
+
+        this.profileList?.forEach(res => {
+          if (!this.filterArray.find(x => x.companyId == res.companyId) && res.companyId != undefined) {
+            let companyList = {} as CompanyListModel;
+            companyList.companyId = res.companyId!;
+
+            this.companyListAll?.forEach(y => {
+              if (y.companyId == res.companyId) {
+                companyList.companyName = y.companyName;
+                companyList.pictureCompany = y.pictureCompany;
+                companyList.companyStatus = y.companyStatus;
+                companyList.companyType = y.companyType;
+                companyList.ownerId = y.ownerId;
+                companyList.ownerName = y.ownerName;
+                this.filterArray.unshift(companyList);
+              }
+            });
+          }
+        });
+      });
+    });
+  }
+
+  openModalDetail() {}
+
+  setUser() {}
+}

src/app/portal-manage/services/mylearn/course.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+import { CourseModel } from '../../models/mylearn/course.model';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CourseService {
+  api = "/course"
+  urlApi = environment.baseUrls + "/course"
+  constructor(private http: HttpClient) { }
+
+  getcourse() {
+    return this.http.get<CourseModel>(this.urlApi)
+  }
+
+  getcourseList(): Observable<CourseModel[]> {
+    return this.http.get<CourseModel[]>(this.urlApi + "/lists")
+  }
+  getListByCompany(companyId: string): Observable<CourseModel[]> {
+    return this.http.get<CourseModel[]>(`${this.urlApi}/lists/${companyId}`);
+  }
+
+
+
+  // postMyHRcompany(body: Partial<CourseModel>): Observable<any> {
+  //   return this.http.post(this.urlApi, body)
+  // }
+
+}

src/app/portal-manage/services/mylearn/myhrcompany.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+import { HrcompanyModel } from '../../models/mylearn/myhrcompany.model';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyhrcompanyService {
+  api = "/myhrcompany"
+  urlApi = environment.baseUrls + "/myhrcompany"
+  constructor(private http: HttpClient) { }
+
+  getcompany() {
+    return this.http.get<HrcompanyModel>(this.urlApi)
+  }
+
+  getByCompany(companyId: string): Observable<HrcompanyModel> {
+    return this.http.get<HrcompanyModel>(`${this.urlApi}/${companyId}`);
+  }
+
+  getList(): Observable<HrcompanyModel[]> {
+    return this.http.get<HrcompanyModel[]>(this.urlApi + "/lists")
+  }
+
+
+  postMyHRcompany(body: Partial<HrcompanyModel>): Observable<any> {
+    return this.http.post(this.urlApi, body)
+  }
+
+}

src/app/portal-manage/services/mylearn/transfer.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+import { TransferModel } from '../../models/mylearn/transfer.model';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TransferService {
+  api = "/course-transfer"
+  urlApi = environment.baseUrls + "/course-transfer"
+  constructor(private http: HttpClient) { }
+
+  TransferCourse(body: TransferModel): Observable<any>{
+    return this.http.post<any>(this.urlApi,body)
+  }
+
+  TransferHistory(body: TransferModel): Observable<any> {
+    return this.http.post<any>(`${this.urlApi}/history`, body);
+  }
+
+}

src/app/portal-manage/services/mylearn/user-profile.services.ts

+// import { HttpClient, HttpHeaders } from "@angular/common/http";
+// import { Injectable } from "@angular/core";
+// import { TranslateService } from "@ngx-translate/core";
+// import { forkJoin, from, Observable } from "rxjs";
+// import { map, tap, switchMap, filter, reduce } from "rxjs/operators";
+// import { TokenService } from "src/app/authentication/token.service";
+// import { MyProfileModel, ProfileModel } from "../../models/mylearn/user.model";
+// import { PageResponseModel, ResponseModel } from "../../models/base.model";
+
+// @Injectable({
+//   providedIn: "root",
+// })
+// export class UserProfileService {
+//   apiBaseUrl = "/member";
+//   constructor(
+//     private http: HttpClient,
+//     private translateService: TranslateService,
+//     private tokenService: TokenService
+//   ) { }
+
+//   getProfileById(memberId: string) {
+//     return this.http
+//       .get<ProfileModel>(this.apiBaseUrl + "/" + memberId)
+//       .pipe(map((e) => new MyProfileModel(e, this.translateService)));
+//   }
+
+//   getProfile() {
+//     return this.http
+//       .get<ProfileModel>(this.apiBaseUrl + "/profile")
+//       .pipe(map((e) => new MyProfileModel(e, this.translateService)));
+//   }
+
+//   getLists() {
+//     return this.http
+//       .get<ProfileModel[]>(this.apiBaseUrl + "/lists?companyId="+this.tokenService.getSelectCompany().companyId!)
+//       .pipe(
+//         map((e) => e.map((e) => new MyProfileModel(e, this.translateService)))
+//       );
+//   }
+
+//   getCompanyLists(companyId:String) {
+//     return this.http
+//       .get<ProfileModel[]>(this.apiBaseUrl + "/lists?companyId="+companyId!)
+//       .pipe(
+//         map((e) => e.map((e) => new MyProfileModel(e, this.translateService)))
+//       );
+//   }
+
+//   getListsAll() {
+//     return this.http
+//       .get<ProfileModel[]>(this.apiBaseUrl + "/lists")
+//       .pipe(
+//         map((e) => e.map((e) => new MyProfileModel(e, this.translateService)))
+//       );
+//   }
+
+//   getListsNotTrainee() {
+//     return this.http
+//       .get<ProfileModel[]>(this.apiBaseUrl + "/lists/nottrainee?companyId="+this.tokenService.getSelectCompany().companyId!)
+//       .pipe(
+//         map((e) => e.map((e) => new MyProfileModel(e, this.translateService)))
+//       );
+//   }
+
+//   getListByPageSize(body: { page: number; size: number }) {
+//     return this.http
+//       .get<PageResponseModel<ProfileModel>>(this.apiBaseUrl+"?companyId="+this.tokenService.getSelectCompany().companyId!, {
+//         params: body,
+//       })
+//       .pipe(
+//         map((page) => {
+//           return {
+//             ...page,
+//             content: page.content.map(
+//               (e) => new MyProfileModel(e, this.translateService)
+//             ),
+//           };
+//         })
+//       );
+//   }
+
+//   getListAllPageSize(): Observable<ProfileModel[]> {
+//     return this.http
+//       .get<PageResponseModel<ProfileModel>>(this.apiBaseUrl+"?companyId="+this.tokenService.getSelectCompany().companyId!, {
+//         params: { page: 0, size: 1 },
+//       })
+//       .pipe(
+//         switchMap((checkData: any) => {
+//           const size = 500;
+//           const numOfPages = checkData.totalElements / size;
+//           const parallelList: Observable<PageResponseModel<ProfileModel>>[] =
+//             [];
+
+//           for (let page = 0; page < numOfPages; page++) {
+//             parallelList.push(
+//               this.getListByPageSize({
+//                 page,
+//                 size,
+//               })
+//             );
+//           }
+//           return forkJoin(parallelList).pipe(
+//             map((response) => {
+//               let data: ProfileModel[] = [];
+//               for (let i = 0; i < response.length; i++) {
+//                 data = data.concat(response[i].content);
+//               }
+//               return data;
+//             })
+//           );
+//         })
+//       );
+//   }
+
+//   getCompanyListAllPageSize(companyId:string): Observable<ProfileModel[]> {
+//     return this.http
+//       .get<PageResponseModel<ProfileModel>>(this.apiBaseUrl+"?companyId="+companyId!, {
+//         params: { page: 0, size: 1 },
+//       })
+//       .pipe(
+//         switchMap((checkData: any) => {
+//           const size = 5000;
+//           const numOfPages = checkData.totalElements / size;
+//           const parallelList: Observable<PageResponseModel<ProfileModel>>[] =
+//             [];
+
+//           for (let page = 0; page < numOfPages; page++) {
+//             parallelList.push(
+//               this.getListByPageSize({
+//                 page,
+//                 size,
+//               })
+//             );
+//           }
+//           return forkJoin(parallelList).pipe(
+//             map((response) => {
+//               let data: ProfileModel[] = [];
+//               for (let i = 0; i < response.length; i++) {
+//                 data = data.concat(response[i].content);
+//               }
+//               return data;
+//             })
+//           );
+//         })
+//       );
+//   }
+
+//   save(body: ProfileModel) {
+//     return this.http.post<ResponseModel>(this.apiBaseUrl, new MyProfileModel(body));
+//   }
+
+//   delete(body: ProfileModel) {
+//     const options = {
+//       headers: new HttpHeaders({
+//         "Content-Type": "application/json",
+//       }),
+//       body: new MyProfileModel(body),
+//     };
+//     return this.http.delete<ResponseModel>(this.apiBaseUrl, options);
+//   }
+
+
+
+
+//   approve(body: ProfileModel) {
+//     return this.http.put<ResponseModel>(this.apiBaseUrl + "/approve", body)
+//   }
+
+//   getListsByStatus(status: number) {
+//     return this.http.get<ProfileModel[]>(this.apiBaseUrl + "/lists/waiting-check/" + status+"?companyId="+this.tokenService.getSelectCompany().companyId!).pipe(
+//       map((e) => e.map((e) => new MyProfileModel(e, this.translateService)))
+//     );
+//   }
+
+//   getNumberApplied() {
+//     return this.http.get<ProfileModel[]>(this.apiBaseUrl + "/lists/newest")
+//   }
+ 
+// }
+
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { forkJoin, Observable } from "rxjs";
+import { map, switchMap } from "rxjs/operators";
+import { MyProfileModel, ProfileModel } from "../../models/mylearn/user.model";
+import { PageResponseModel, ResponseModel } from "../../models/base.model";
+import { environment } from "../../../../environments/environment";
+import { CompanyZeemeModel } from "../../models/mylearn/courseinsite.model";
+
+@Injectable({
+  providedIn: "root",
+})
+export class UserProfileService {
+  private apiBaseUrl = `${environment.baseUrls}/member`;
+  // private apiBaseUrl = `${environment.baseUrls}/admin`;
+  constructor(
+    private http: HttpClient,
+    private translateService: TranslateService
+  ) {}
+
+  getProfileById(memberId: string) {
+    return this.http
+      .get<ProfileModel>(`${this.apiBaseUrl}/${memberId}`)
+      .pipe(map((e) => new MyProfileModel(e, this.translateService)));
+  }
+
+  getProfile() {
+    return this.http
+      .get<ProfileModel>(`${this.apiBaseUrl}/profile`)
+      .pipe(map((e) => new MyProfileModel(e, this.translateService)));
+  }
+
+  getLists(companyId: string) {
+    return this.http
+      .get<ProfileModel[]>(`${this.apiBaseUrl}/lists?companyId=${companyId}`)
+      .pipe(map((e) => e.map((e) => new MyProfileModel(e, this.translateService))));
+  }
+
+  getCompanyLists(companyId: string) {
+    return this.http
+      .get<ProfileModel[]>(`${this.apiBaseUrl}/lists?companyId=${companyId}`)
+      .pipe(map((e) => e.map((e) => new MyProfileModel(e, this.translateService))));
+  }
+
+  getListsAll() {
+    return this.http
+      .get<ProfileModel[]>(`${this.apiBaseUrl}/lists`)
+      .pipe(map((e) => e.map((e) => new MyProfileModel(e, this.translateService))));
+  }
+
+  getListsNotTrainee(companyId: string) {
+    return this.http
+      .get<ProfileModel[]>(`${this.apiBaseUrl}/lists/nottrainee?companyId=${companyId}`)
+      .pipe(map((e) => e.map((e) => new MyProfileModel(e, this.translateService))));
+  }
+
+  getListByPageSize(companyId: string, body: { page: number; size: number }) {
+    return this.http
+      .get<PageResponseModel<ProfileModel>>(`${this.apiBaseUrl}?companyId=${companyId}`, {
+        params: body,
+      })
+      .pipe(
+        map((page) => ({
+          ...page,
+          content: page.content.map((e) => new MyProfileModel(e, this.translateService)),
+        }))
+      );
+  }
+
+  getListAllPageSize(companyId: string): Observable<ProfileModel[]> {
+    return this.http
+      .get<PageResponseModel<ProfileModel>>(`${this.apiBaseUrl}?companyId=${companyId}`, {
+        params: { page: 0, size: 1 },
+      })
+      .pipe(
+        switchMap((checkData: any) => {
+          const size = 500;
+          const numOfPages = Math.ceil(checkData.totalElements / size);
+          const parallelList: Observable<PageResponseModel<ProfileModel>>[] = [];
+
+          for (let page = 0; page < numOfPages; page++) {
+            parallelList.push(this.getListByPageSize(companyId, { page, size }));
+          }
+
+          return forkJoin(parallelList).pipe(
+            map((response) => {
+              let data: ProfileModel[] = [];
+              for (let i = 0; i < response.length; i++) {
+                data = data.concat(response[i].content);
+              }
+              return data;
+            })
+          );
+        })
+      );
+  }
+
+  save(body: ProfileModel) {
+    return this.http.post<ResponseModel>(this.apiBaseUrl, new MyProfileModel(body));
+  }
+
+  delete(body: ProfileModel) {
+    const options = {
+      headers: new HttpHeaders({ "Content-Type": "application/json" }),
+      body: new MyProfileModel(body),
+    };
+    return this.http.delete<ResponseModel>(this.apiBaseUrl, options);
+  }
+
+  approve(body: ProfileModel) {
+    return this.http.put<ResponseModel>(`${this.apiBaseUrl}/approve`, body);
+  }
+
+  getListsByStatus(companyId: string, status: number) {
+    return this.http
+      .get<ProfileModel[]>(`${this.apiBaseUrl}/lists/waiting-check/${status}?companyId=${companyId}`)
+      .pipe(map((e) => e.map((e) => new MyProfileModel(e, this.translateService))));
+  }
+
+  getNumberApplied() {
+    return this.http.get<ProfileModel[]>(`${this.apiBaseUrl}/lists/newest`);
+  }
+  getCompanyListAll(): Observable<CompanyZeemeModel[]> {
+  return this.http.get<CompanyZeemeModel[]>(`${environment.baseUrl}/company/lists`);
+}
+}
+

src/app/portal-manage/services/mylearn/user-role.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, forkJoin } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { environment } from '../../../../environments/environment';
+import { RoleModel, MyRoleModel } from '../../models/mylearn/user.model';
+import { TranslateService } from '@ngx-translate/core';
+import { PageResponseModel, ResponseModel } from '../../models/base.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserRoleService {
+  private urlApi = environment.baseUrls + "/users-role";
+
+  constructor(
+    private http: HttpClient,
+    private translateService: TranslateService
+  ) { }
+
+  getAll(): Observable<MyRoleModel[]> {
+    return this.http
+      .get<RoleModel[]>(this.urlApi)
+      .pipe(map(list => list.map(e => new MyRoleModel(e, this.translateService))));
+  }
+
+  getById(roleId: number): Observable<MyRoleModel> {
+    return this.http
+      .get<RoleModel>(`${this.urlApi}/${roleId}`)
+      .pipe(map(e => new MyRoleModel(e, this.translateService)));
+  }
+
+  getByCode(roleCode: string): Observable<MyRoleModel> {
+    return this.http
+      .get<RoleModel>(`${this.urlApi}/rolecode/${roleCode}`)
+      .pipe(map(e => new MyRoleModel(e, this.translateService)));
+  }
+
+  getLists(): Observable<MyRoleModel[]> {
+    return this.http
+      .get<RoleModel[]>(`${this.urlApi}/lists`)
+      .pipe(map(list => list.map(e => new MyRoleModel(e, this.translateService))));
+  }
+  getListsByCompany(companyId: string): Observable<MyRoleModel[]> {
+    return this.http
+      .get<RoleModel[]>(`${this.urlApi}/lists?companyId=${companyId}`)
+      .pipe(
+        map(list => list.map(e => new MyRoleModel(e, this.translateService)))
+      );
+  }
+
+  getListByPageSize(body: { page: number; size: number }): Observable<PageResponseModel<MyRoleModel>> {
+    return this.http
+      .get<PageResponseModel<RoleModel>>(this.urlApi, { params: body })
+      .pipe(
+        map(page => ({
+          ...page,
+          content: page.content.map(e => new MyRoleModel(e, this.translateService))
+        }))
+      );
+  }
+
+  getListAllPageSize(): Observable<MyRoleModel[]> {
+    return this.http
+      .get<PageResponseModel<RoleModel>>(this.urlApi, { params: { page: 0, size: 1 } })
+      .pipe(
+        switchMap(checkData => {
+          const size = 500;
+          const numOfPages = Math.ceil(checkData.totalElements / size);
+          const parallelList: Observable<PageResponseModel<MyRoleModel>>[] = [];
+
+          for (let page = 0; page < numOfPages; page++) {
+            parallelList.push(this.getListByPageSize({ page, size }));
+          }
+
+          return forkJoin(parallelList).pipe(
+            map(response => response.flatMap(r => r.content))
+          );
+        })
+      );
+  }
+
+  create(body: RoleModel): Observable<ResponseModel> {
+    return this.http.post<ResponseModel>(this.urlApi, new MyRoleModel(body));
+  }
+
+  delete(body: RoleModel): Observable<ResponseModel> {
+    const options = {
+      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+      body: new MyRoleModel(body)
+    };
+    return this.http.delete<ResponseModel>(this.urlApi, options);
+  }
+  deleteroleById(roleId: number) {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: {roleId : roleId},
+    };
+    return this.http.delete(this.urlApi, options)
+  }
+}

src/app/portal-manage/services/mylearn/user.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+import { ResponseModel, PageResponseModel } from '../../models/base.model';
+import { ProfileModel, MyProfileModel } from '../../models/mylearn/user.model';
+import { UserAccountModel, MyUserAccountModel } from '../../models/mylearn/user-account.model';
+import { map } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UserService {
+    private urlApi = environment.baseUrls + "/users";
+
+    constructor(
+        private http: HttpClient,
+        private translate: TranslateService
+    ) { }
+
+    getAll(): Observable<MyProfileModel[]> {
+        return this.http.get<ProfileModel[]>(this.urlApi).pipe(
+            map(list => list.map(e => new MyProfileModel(e, this.translate)))
+        );
+    }
+
+    getByUsername(username: string): Observable<MyProfileModel> {
+        return this.http.get<ProfileModel>(`${this.urlApi}/${username}`).pipe(
+            map(e => new MyProfileModel(e, this.translate))
+        );
+    }
+
+    getLists(): Observable<MyProfileModel[]> {
+        return this.http.get<ProfileModel[]>(`${this.urlApi}/lists`).pipe(
+            map(list => list.map(e => new MyProfileModel(e, this.translate)))
+        );
+    }
+
+    getListsByCompany(companyId: string): Observable<MyUserAccountModel[]> {
+        return this.http
+            .get<UserAccountModel[]>(`${this.urlApi}/lists?companyId=${companyId}`)
+            .pipe(map(list => list.map(e => new MyUserAccountModel(e, this.translate))));
+    }
+
+    //   create(user: ProfileModel): Observable<ResponseModel> {
+    //     return this.http.post<ResponseModel>(this.urlApi, new MyProfileModel(user));
+    //   }
+    save(user: UserAccountModel): Observable<ResponseModel> {
+        return this.http.post<ResponseModel>(this.urlApi, new MyUserAccountModel (user));
+    }
+
+
+    delete(user: ProfileModel): Observable<ResponseModel> {
+        const options = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+            body: new MyProfileModel(user),
+        };
+        return this.http.delete<ResponseModel>(this.urlApi, options);
+    }
+
+    deleteById(memberId: string): Observable<ResponseModel> {
+        const options = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+            body: { memberId },
+        };
+        return this.http.delete<ResponseModel>(this.urlApi, options);
+    }
+
+    changePassword(username: string, newPassword: string): Observable<ResponseModel> {
+        return this.http.post<ResponseModel>(`${this.urlApi}/change-password`, {
+            username,
+            newPassword,
+        });
+    }
+}

src/app/shared/services/nav.service.ts

@@ -221,10 +221,28 @@ export class NavService implements OnDestroy {
         title: 'จัดการ PDPA',
         type: 'link',
       },
+      // {
+      //   icon: 'receipt',
+      //   path: '/mylearn/user-company',
+      //   title: 'จัดการบริษัท',
+      //   type: 'link',
+      // },
+      {
+        icon: 'news bx-flip-horizontal',
+        path: '/mylearn/myhrcompany',
+        title: 'จัดการบริษัท',
+        type: 'link',
+      },
       {
         icon: 'receipt',
-        path: '/mylearn/dashboard',
-        title: 'dashboard',
+        path: '/mylearn/management-user',
+        title: 'การจัดการผู้ใช้งาน',
+        type: 'link',
+      },
+      {
+        icon: 'receipt',
+        path: '/mylearn/course-transfer',
+        title: 'โอนย้ายคอร์ส',
         type: 'link',
       },
       ...this.createPortalMenu('mylearn')

src/environments/environment.ts

@@ -4,6 +4,9 @@
 export const environment = {
   production: false,
   baseUrl: 'https://myjob-uat.myhr.co.th/api',
+  baseUrls: 'https://mylearn-uat.myhr.co.th/api',
+  // baseScormUrl: 'http://localhost/vsscorm',
+  // api: '9357268c262a35e41df4cb3774d28301',
   url: 'https://portal.myhr.co.th/api/',
   jbossUrl: 'https://hrplus.myhr.co.th/hr', //add
   portalFixedToken: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBdXRoIiwidWlkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0Iiwicm9sZSI6InVzZXIiLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJmdWxsTmFtZSI6InRlZXJhZGFjaCBrdWhhdGFuYXNhdGllbiIsIm1lbWJlcklkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0In0.FO7u8g7KfzkmZFTuuniBCEQxduPjcvzMbH7iug3DT90',