[myLearn] เพิ่มหน้าจอตั้งค่าระยะเวลาผู้เรียนไม่ตอบสนอง

src/app/portal-manage/models/mylearn/m-config.model.ts

+
+export interface TimeOutscreenModel {
+  configId: string
+  companyId: string
+  thName: string
+  engName: string
+  configValue: string
+  configCode: string
+  configType: string
+  configUnit: string
+  configCodeDetail: ConfigCodeDetail
+  configTypeDetail: ConfigTypeDetail
+  configUnitDetail: ConfigUnitDetail
+}
+
+export interface ConfigCodeDetail {
+  code: string
+  tdesc: string
+  edesc: string
+}
+
+export interface ConfigTypeDetail {
+  code: string
+  tdesc: string
+  edesc: string
+}
+
+export interface ConfigUnitDetail {
+  code: string
+  tdesc: string
+  edesc: string
+}

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

@@ -77,14 +77,14 @@ export class MyHrcompanyModel extends BaseModel implements HrcompanyModel {
 
   // getPictureURL(): string {
   //   if (this.pictureUrl) {
-  //     return environment.baseUrls + "/files/image/" + this.pictureUrl
+  //     return environment.baseUrlMylearn + "/files/image/" + this.pictureUrl
   //   } else {
   //     return ""
   //   }
   // }
   getLogo(): string {
     if (this.logo) {
-      return environment.baseUrls + "/files/image/" + this.logo
+      return environment.baseUrlMylearn + "/files/image/" + this.logo
     } else {
       return ""
     }

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

@@ -101,7 +101,7 @@ export class UserAuthorizationComponent implements OnInit {
 
     uploadConfig() {
         this.uploaderProfile = new FileUploader({
-            url: environment.baseUrls + "/files/upload-image",
+            url: environment.baseUrlMylearn + "/files/upload-image",
             isHTML5: true,
             authToken: this.tokenService.getToken()!,
         });

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

@@ -146,6 +146,11 @@ export const mylearn: Routes = [
           import('./course-transfer/course-transfer.component').then((m) => m.CourseTransferComponent),
       },
       {
+        path: 'timeout-screen-manage',
+        loadComponent: () =>
+          import('./timeout-screen-manage/timeout-screen-manage.component').then((m) => m.TimeoutScreenManageComponent),
+      },
+      {
         path: 'management-user',
         children: [
           {

src/app/portal-manage/mylearn/timeout-screen-manage/timeout-screen-manage.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 (click)="openCompanyModal(sourceCompanyModal)"
+      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;"></i>
+    </button>
+  </div>
+
+  <div *ngIf="selectedCompany && timeoutScreenConconfig" class="bg-gray-50 border p-4 rounded-lg">
+    <h3 class="font-bold mb-4">บริษัทที่เลือก: {{ selectedCompany.companyName }}</h3>
+
+    <div class="flex flex-wrap -mx-2 items-end"><!-- 👈 ใช้ items-end ให้ชิดด้านล่าง -->
+      <!-- คอลัมน์ 1 -->
+      <div class="w-full md:w-1/3 px-2">
+        <h5 class="block mb-1 font-medium">ระยะเวลา</h5>
+        <div class="flex gap-2">
+          <input type="number"
+            class="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="ระยะเวลา" [(ngModel)]="timeoutScreenConconfig.configValue" step="1"/>
+        </div>
+      </div>
+
+      <!-- คอลัมน์ 2 -->
+      <div class="w-full md:w-1/3 px-2">
+        <h5 class="block mb-1 font-medium">หน่วย</h5>
+        <div class="flex gap-2">
+          <select class="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            [(ngModel)]="timeoutScreenConconfig.configUnit">
+            <option value="S">วินาที</option>
+            <option value="M">นาที</option>
+            <option value="H">ชั่วโมง</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- คอลัมน์ 3 -->
+      <div class="w-full md:w-1/3 px-2">
+        <div class="flex gap-2 justify-center">
+          <button type="button"
+            class="w-1/2 border rounded-md px-3 py-2 text-sm bg-blue-600 bg-primary text-white font-medium focus:outline-none focus:ring-2 focus:ring-blue-500"
+            (click)="save()">
+            {{'Save' | translate}}
+          </button>
+        </div>
+      </div>
+    </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>

src/app/portal-manage/mylearn/timeout-screen-manage/timeout-screen-manage.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TimeoutScreenManageComponent } from './timeout-screen-manage.component';
+
+describe('TimeoutScreenManageComponent', () => {
+  let component: TimeoutScreenManageComponent;
+  let fixture: ComponentFixture<TimeoutScreenManageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TimeoutScreenManageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimeoutScreenManageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portal-manage/mylearn/timeout-screen-manage/timeout-screen-manage.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MyhrcompanyService } from '../../services/mylearn/myhrcompany.service';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { HrcompanyModel, MyHrcompanyModel } from '../../models/mylearn/myhrcompany.model';
+import swal from 'sweetalert';
+import { MConfigService } from '../../services/mylearn/m-config.service';
+import { TimeOutscreenModel } from '../../models/mylearn/m-config.model';
+
+@Component({
+  selector: 'app-timeout-screen-manage',
+  templateUrl: './timeout-screen-manage.component.html',
+  styleUrls: ['./timeout-screen-manage.component.scss'],
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+  ],
+  standalone: true,
+})
+export class TimeoutScreenManageComponent implements OnInit {
+
+  MyhrcompanyList: MyHrcompanyModel[] = [];
+  HrcompanyList: HrcompanyModel[] = [];
+  selectedCompany?: MyHrcompanyModel;
+  companyId: string = '';
+
+  private dialogRef?: MatDialogRef<any>;
+  searchTarget = ""
+  searchModal = ""
+  modalPageIndex = 0;
+  modalPageIndexSource = 0;
+  modalPageIndexTarget = 0;
+  readonly maxPageButtons = 15;
+  modalPageSize = 10;
+
+  timeoutScreenConconfig: TimeOutscreenModel
+
+  constructor(
+    private myhrcompanyservice: MyhrcompanyService,
+    private translateService: TranslateService,
+    private dialog: MatDialog,
+    private mConfigService: MConfigService
+  ) { }
+
+  ngOnInit() {
+    this.getMyHRCompany();
+    this.getMyHRCompanyExternal();
+  }
+
+  getMyHRCompany() {
+    this.myhrcompanyservice.getList().subscribe({
+      next: (response: HrcompanyModel[]) => {
+        this.MyhrcompanyList = response.map(
+          (x: HrcompanyModel) => new MyHrcompanyModel(x, this.translateService)
+        );
+        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.translateService);
+        this.HrcompanyList.push(company);
+      },
+      error: (error) => {
+        console.error("error can't get external company", error);
+        swal("เกิดข้อผิดพลาด", "ไม่สามารถดึงข้อมูล external company ได้", "error");
+      }
+    });
+  }
+
+  closeModal() {
+    if (this.dialogRef) {
+      this.dialogRef.close();
+      this.dialogRef = undefined;
+    }
+  }
+
+  selectCompany(company: HrcompanyModel) {
+    this.selectedCompany = new MyHrcompanyModel(company, this.translateService);
+    this.companyId = company.companyId;
+    this.closeModal();
+    this.updateModalPagedItems();
+    this.getTimeoutScreen(this.companyId);
+  }
+
+  getTimeoutScreen(companyId: string) {
+    this.mConfigService.getTimeoutScreen(companyId, "NR").subscribe(result => {
+      this.timeoutScreenConconfig = result[0]
+      // console.log("🍇🍇 ~ this.timeoutScreenConconfig:", this.timeoutScreenConconfig)
+    })
+  }
+
+  save() {
+
+    const body = {
+      configId: this.timeoutScreenConconfig.configId,
+      companyId: this.timeoutScreenConconfig.companyId,
+      thName: this.timeoutScreenConconfig.thName,
+      engName: this.timeoutScreenConconfig.engName,
+      configValue: this.timeoutScreenConconfig.configValue,
+      configCode: this.timeoutScreenConconfig.configCode,
+      configType: this.timeoutScreenConconfig.configType,
+      configUnit: this.timeoutScreenConconfig.configUnit,
+      configCodeDetail: this.timeoutScreenConconfig.configCodeDetail,
+      configTypeDetail: this.timeoutScreenConconfig.configTypeDetail,
+      configUnitDetail: this.timeoutScreenConconfig.configUnitDetail
+    }
+
+    swal({
+      title: "ยืนยันการบันทึก",
+      text: "คุณต้องการบันทึกหรือไม่?",
+      icon: "warning",
+      buttons: ["ยกเลิก", "ยืนยัน"],
+      dangerMode: false,
+    }).then((willSave: boolean) => {
+      // console.log("🍇🍇 ~ willSave:", willSave)
+      if (willSave) {
+        this.mConfigService.saveTimeoutScreen(body).subscribe(response => {
+          swal("บันทึกสำเร็จ!", "ข้อมูลถูกบันทึกเรียบร้อยแล้ว", "success");
+        })
+      }
+    })
+  }
+
+  openCompanyModal(template: TemplateRef<any>) {
+    this.dialogRef = this.dialog.open(template, { width: '900px', height: '600px' });
+    this.updateModalPagedItems();
+  }
+
+
+  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);
+  }
+
+  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
+    );
+  }
+
+
+  get totalModalItemsCompany(): number {
+    return this.CompanyFilterSource().length;
+  }
+  get totalModalItemsCompanyTarget(): number {
+    return this.CompanyFilterTarget().length;
+  }
+  get totalPagesArrayInModal(): number[] {
+    const totalPages = Math.ceil(this.totalModalItemsCompany || this.totalModalItemsCompanyTarget);
+    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/services/mylearn/course.service.ts

@@ -10,7 +10,7 @@ import { CourseModel } from '../../models/mylearn/course.model';
 })
 export class CourseService {
   api = "/course"
-  urlApi = environment.baseUrls + "/course"
+  urlApi = environment.baseUrlMylearn + "/course"
   constructor(private http: HttpClient) { }
 
   getcourse() {

src/app/portal-manage/services/mylearn/m-config.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '../../../../environments/environment';
+import { TimeOutscreenModel } from '../../models/mylearn/m-config.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MConfigService {
+
+  api = "/config"
+  urlApi = environment.baseUrlMylearn + "/config"
+
+constructor(
+  private http: HttpClient
+) { }
+
+getTimeoutScreen(companyId: string , configCode: string ){
+return this.http.get<TimeOutscreenModel[]>(this.urlApi + "/lists/search?companyId=" + companyId + "&configCode=" + configCode)
+}
+
+saveTimeoutScreen(body: TimeOutscreenModel){
+  return this.http.post<TimeOutscreenModel>(this.urlApi , body )
+}
+
+
+}

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

@@ -11,7 +11,7 @@ import { HrcompanyModel } from '../../models/mylearn/myhrcompany.model';
 })
 export class MyhrcompanyService {
   api = "/myhrcompany"
-  urlApi = environment.baseUrls + "/myhrcompany"
+  urlApi = environment.baseUrlMylearn + "/myhrcompany"
   constructor(private http: HttpClient) { }
 
   getcompany() {

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

@@ -10,7 +10,7 @@ import { TransferModel } from '../../models/mylearn/transfer.model';
 })
 export class TransferService {
   api = "/course-transfer"
-  urlApi = environment.baseUrls + "/course-transfer"
+  urlApi = environment.baseUrlMylearn + "/course-transfer"
   constructor(private http: HttpClient) { }
 
   TransferCourse(body: TransferModel): Observable<any>{

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

@@ -192,8 +192,8 @@ import { CompanyZeemeModel } from "../../models/mylearn/courseinsite.model";
   providedIn: "root",
 })
 export class UserProfileService {
-  private apiBaseUrl = `${environment.baseUrls}/member`;
-  // private apiBaseUrl = `${environment.baseUrls}/admin`;
+  private apiBaseUrl = `${environment.baseUrlMylearn}/member`;
+  // private apiBaseUrl = `${environment.baseUrlMylearn}/admin`;
   constructor(
     private http: HttpClient,
     private translateService: TranslateService

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

@@ -11,7 +11,7 @@ import { PageResponseModel, ResponseModel } from '../../models/base.model';
   providedIn: 'root'
 })
 export class UserRoleService {
-  private urlApi = environment.baseUrls + "/users-role";
+  private urlApi = environment.baseUrlMylearn + "/users-role";
 
   constructor(
     private http: HttpClient,

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

@@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
     providedIn: 'root'
 })
 export class UserService {
-    private urlApi = environment.baseUrls + "/users";
+    private urlApi = environment.baseUrlMylearn + "/users";
 
     constructor(
         private http: HttpClient,

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

@@ -251,6 +251,12 @@ export class NavService implements OnDestroy {
         title: 'โอนย้ายคอร์ส',
         type: 'link',
       },
+      {
+        icon: 'time',
+        path: '/mylearn/timeout-screen-manage',
+        title: 'จัดการเวลาหน้าจอ',
+        type: 'link',
+      },
       ...this.createPortalMenu('mylearn')
     ];
   }

src/environments/environment.prod.ts

@@ -5,7 +5,7 @@ export const environment = {
   production: true,
   // baseUrl: window.location.origin + '/api',
   baseUrl: 'https://myjob-uat.myhr.co.th/api',
-  baseUrls: 'https://mylearn-uat.myhr.co.th/api',
+  baseUrlMylearn: 'https://mylearn-uat.myhr.co.th/api',
   url: 'https://portal.myhr.co.th/api/',
   jbossUrl: 'https://hrplus.myhr.co.th/hr', //add
   portalFixedToken: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBdXRoIiwidWlkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0Iiwicm9sZSI6InVzZXIiLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJmdWxsTmFtZSI6InRlZXJhZGFjaCBrdWhhdGFuYXNhdGllbiIsIm1lbWJlcklkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0In0.FO7u8g7KfzkmZFTuuniBCEQxduPjcvzMbH7iug3DT90',

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   apiUrl: 'http://localhost:3000/api', // Example API URL for development
 
   baseUrl: 'https://myjob-uat.myhr.co.th/api',
-  baseUrls: 'https://mylearn-uat.myhr.co.th/api',
+  baseUrlMylearn: 'https://mylearn-uat.myhr.co.th/api',
   // baseScormUrl: 'http://localhost/vsscorm',
   // api: '9357268c262a35e41df4cb3774d28301',
   url: 'https://portal.myhr.co.th/api/',