From c8fbe867ce5deba17a8e1998aa90f469bfd3c1a8 Mon Sep 17 00:00:00 2001 From: LAPTOP-CV4JFSHE\kantavee <kantaveepongsarai@gmail.com> Date: Mon, 16 Dec 2024 17:20:25 +0700 Subject: [PATCH] alert หลังจากกดยืนยันข้อมูลหน้า ทะเบียนบริษัท > ทะเบียนเเผนก > เบียนส่วน, หน้าข้อมูลลักษณะงาน > กลุ่มพนักงาน > ตำเเหน่ง, หน้า ตั้งค่าชื่อผู้ใช้ > สร้างชื่อผู้ใช้ เเละจัด responsive ในตัว ti-modal --- src/app/components/account-settings/user-settings/user-settings.component.html | 493 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- src/app/components/account-settings/user-settings/user-settings.component.scss | 47 ++++++++++++++++++++++++++++++++++++++--------- src/app/components/account-settings/user-settings/user-settings.component.ts | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- src/app/components/company-registration/branch-business-unit/department-list/department-list.component.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts | 14 +++++++++++++- src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.html | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts | 14 +++++++++++++- src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html | 6 +++--- src/app/components/job-description/employee-group-unit/employee-group-unit.component.html | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts | 34 ++++++++++++++++++++++++++-------- src/app/components/job-description/position/position-unit.component.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- src/app/components/job-description/position/position-unit.component.ts | 14 +++++++++++++- 12 files changed, 1042 insertions(+), 63 deletions(-) diff --git a/src/app/components/account-settings/user-settings/user-settings.component.html b/src/app/components/account-settings/user-settings/user-settings.component.html index a25ca0e..6d5924d 100644 --- a/src/app/components/account-settings/user-settings/user-settings.component.html +++ b/src/app/components/account-settings/user-settings/user-settings.component.html @@ -1,4 +1,4 @@ -<div class="flex justify-end pt-2rem"> +<!-- <div class="flex justify-end pt-2rem"> <div class="px-1"> <div class="relative shadow-md"> <input type="text" id="hs-leading-icon" name="hs-leading-icon" @@ -352,4 +352,495 @@ </div> </div> +</div> --> + +<div class="flex justify-end pt-2rem"> + <div class="px-1"> + <div class="relative shadow-md"> + <input type="text" id="hs-leading-icon" name="hs-leading-icon" + class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"> + <div + class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> + <i class="ri-search-line text-gray"></i> + </div> + </div> + </div> + <div class="px-1"> + <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" + data-hs-overlay="#user-settings-component-modal-add"> + <i class="ri-add-line"></i> + Add + </button> + </div> + <div class="px-1"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" + data-hs-overlay="#user-settings-component-alert-delete-modal"> + <i class="ri-delete-bin-6-line"></i> + Delete + </button> + </div> + <div class="px-1"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> +</div> + +<div class="page px-rem"> + <div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> + <nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> + <a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" + href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1"> + นำเข้าข้อมูล + </a> + <a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end" + href="javascript:void(0);"> + ดาวโหลดตัวอย่างไฟล์ + </a> + </nav> + </div> + <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"> + <div class="overflow-auto shadow-md"> + <table class="ti-custom-table ti-custom-table-head"> + <thead> + <tr> + <ng-container + *ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','Action']; let f = first; let l = last; let i = index"> + <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" style="text-align: center;" + [class.!text-center]="f||l"> + <span class="text-sm">{{ item }}</span> + <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i"> + <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" + height="16" fill="currentColor" viewBox="0 0 16 16"> + <path + d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"> + </path> + </svg> + </div> + </th> + </ng-container> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of[ + ['CC001', '620010','จรุณ','เทพมาศ','ใช้งาน'], + ['CC002', '592530','มานะ','มิณนา','ใช้งาน'], + ['CC003', '5812142','ชาญชัย','โพธิ์สุข','ใช้งาน'], + ['FC001', '6125365','อดิศร','สมสัย','ใช้งาน'], + ['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'], + ['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'], + ['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index"> + <td style="font-size: 12px;" class="flex justify-center"> + <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> + {{item[0]}} + </td> + <td style="text-align: center; font-size: 12px;">{{item[1]}}</td> + <td style="text-align: center; font-size: 12px;">{{item[2]}}</td> + <td style="text-align: center; font-size: 12px;">{{item[3]}}</td> + <td style="text-align: center; font-size: 12px;">{{item[4]}}</td> + <td class="flex justify-center"> + <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-modal-edit"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-alert-delete-modal"></i> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="body-content" style="margin-top: 20px; margin-left: 10px;"> + <ul class="nav-tabs"> + <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> + <div class="box-body"> + <nav class="pagination-style-3 overflow-auto"> + <ul class="ti-pagination"> + <li> + <a aria-label="anchor" class="page-link" href="javascript:void(0);"> + <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> + </a> + </li> + <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> + <li><a class="page-link" href="javascript:void(0);">2</a></li> + <li><a class="page-link" href="javascript:void(0);">3</a></li> + <li><a class="page-link" href="javascript:void(0);">4</a></li> + <li><a class="page-link" href="javascript:void(0);">5</a></li> + <li><a class="page-link" href="javascript:void(0);">...</a></li> + <li><a class="page-link" href="javascript:void(0);">31</a></li> + <li> + <a aria-label="anchor" class="page-link" href="javascript:void(0);"> + <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> + </a> + </li> + </ul> + </nav> + </div> + </div> + </ul> + <ul class="nav-tabs"> + <p>Show 1 to 10 of 50 items</p> + </ul> + </div> +</div> + + + +<div id="user-settings-component-modal-add" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> + <div class="max-h-full overflow-hidden ti-modal-content"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + กำหนดค่าผู้ใช้งานระบบ + </h3> + <div class="flex justify-end"> + <div class="button-help" > + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#user-settings-component-modal-add"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body-content " style="margin-top: 60px;"> + <div class="checkbox-container text-primary" style="display: flex; justify-content: flex-end; gap: 3px; margin-bottom: 10px;"> + <label style="display: flex; align-items: center; margin-right: 20px;"> + <input type="checkbox" style="transform: scale(0.6); margin-right: 2px;">ใช้งาน + </label> + <label style="display: flex; align-items: center;"> + <input type="checkbox" style="transform: scale(0.6); margin-right: 2px;">ไม่ใช้งาน + </label> + </div> + <form class="space-y-3"> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-2">ชื่อล็อคอิน</label> + <input type="email" class="sm:col-span-4 ti-form-input" placeholder=""> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">รหัสพนักงาน</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">บทบาท</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2 relative"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">ระดับ</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2 relative"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6 mt-4"> + <label class="col-span-3 ti-form-label text-primary mt-2">สถานะรหัสผ่าน</label> + <div class="col-span-6 mt-2 flex"> + <select class="ti-form-input flex" > + <option value="1">รหัสผ่านถูกตั้งใหม่เเล้ว</option> + </select> + </div> + </div> + </form> + <div class="flex justify-end mt-2rem mb-1rem space-x-2" style="margin-top: 75px;"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-add"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#user-settings-component-alert-modal"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="user-settings-component-modal-edit" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> + <div class="max-h-full overflow-hidden ti-modal-content"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แก้ไขข้อมูลกลุ่มพนักงาน + </h3> + <div class="flex justify-end"> + <div class="button-help"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#user-settings-component-modal-edit"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body-content " style="margin-top: 60px;"> + <div class="checkbox-container text-primary" style="display: flex; justify-content: flex-end; gap: 3px; margin-bottom: 10px;"> + <label style="display: flex; align-items: center; margin-right: 20px;"> + <input type="checkbox" style="transform: scale(0.6); margin-right: 2px;">ใช้งาน + </label> + <label style="display: flex; align-items: center;"> + <input type="checkbox" style="transform: scale(0.6); margin-right: 2px;">ไม่ใช้งาน + </label> + </div> + <form class="space-y-3"> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-2">ชื่อล็อคอิน</label> + <input type="email" class="sm:col-span-4 ti-form-input" placeholder=""> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">รหัสพนักงาน</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">บทบาท</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2 relative"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6"> + <label class="col-span-3 ti-form-label text-primary mt-4">ระดับ</label> + <div class="col-span-3 relative mt-2"> + <div> + <div class="relative flex rounded-md"> + <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10"> + <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4"> + <svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </svg> + </div> + </div> + </div> + </div> + <div class="flex col-span-4 relative mt-2 relative"> + <input type="password" class="ti-form-input" style="background-color: #B3B3B3;" disabled placeholder=""> + </div> + </div> + <div class="sm:grid grid-cols-12 gap-x-6 mt-4"> + <label class="col-span-3 ti-form-label text-primary mt-2">สถานะรหัสผ่าน</label> + <div class="col-span-6 mt-2 flex"> + <select class="ti-form-input flex" > + <option value="1">รหัสผ่านถูกตั้งใหม่เเล้ว</option> + </select> + </div> + </div> + </form> + <div class="flex justify-end mt-2rem mb-1rem space-x-2" style="margin-top: 75px;"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-add"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#user-settings-component-alert-edit-modal"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + + </div> +</div> + +<div id="user-settings-component-alert-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content-alert w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#user-settings-component-alert-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการบันทึกข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-alert-modal"> + ย้อนกลับ + </button> + <!-- <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-add"> + ย้อนกลับ + </button> --> + <!-- <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-edit"> + ย้อนกลับ + </button> --> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#user-settings-component-alert-modal" (click)="addUser();showSuccess()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="user-settings-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content-alert w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#user-settings-component-alert-edit-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการเเก้ไขข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <!-- <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-add"> + ย้อนกลับ + </button> --> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-alert-edit-modal"> + ย้อนกลับ + </button> + <!-- <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-edit"> + ย้อนกลับ + </button> --> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#user-settings-component-alert-edit-modal" (click)="addUser();showSuccessEdit()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> +<div id="user-settings-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content-alert w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#user-settings-component-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่! + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <!-- <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-modal-add"> + ย้อนกลับ + </button> --> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#user-settings-component-alert-delete-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#user-settings-component-alert-delete-modal" (click)="addUser();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> </div> \ No newline at end of file diff --git a/src/app/components/account-settings/user-settings/user-settings.component.scss b/src/app/components/account-settings/user-settings/user-settings.component.scss index f9314a7..8ab9717 100644 --- a/src/app/components/account-settings/user-settings/user-settings.component.scss +++ b/src/app/components/account-settings/user-settings/user-settings.component.scss @@ -10,6 +10,7 @@ z-index: 1; right: 0vw; margin: 4.2rem; + margin-right: 10px; /* เพิ่มใหม่ 12/16*/ } table.ti-custom-table thead { @@ -94,18 +95,46 @@ a.custom-link { .page{ min-height: 0vh; } -.ti-modal-content{ - width: 70%; /* ความกว้างที่คุณต้องการ */ - position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */ - top: 50%; /* ให้อยู่กลางในแนวตั้ง */ - left: 50%; /* ให้อยู่กลางในแนวนอน */ - transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */ +// .ti-modal-content{ +// width: 70%; /* ความกว้างที่คุณต้องการ */ +// position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */ +// top: 50%; /* ให้อยู่กลางในแนวตั้ง */ +// left: 50%; /* ให้อยู่กลางในแนวนอน */ +// transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */ +// } + +.ti-modal-content { + width: 70%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 90%; /* จำกัดความสูงให้อยู่ใน modal */ + overflow-y: auto; /* เปิดการเลื่อนแนวตั้ง */ } -.ti-modal-body { + +// .ti-modal-body-content { +// display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */ +// justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */ +// flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */ +// height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */ +// margin-left: 100px; +// margin-right: 50px; +// } +.ti-modal-body-content { display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */ justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */ flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */ height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */ - margin-left: 100px; - margin-right: 50px; + margin-left: calc(15% - 30px); + margin-right: 20px; +} + +.ti-modal-content-alert{ + width: 35%; /* ความกว้างที่คุณต้องการ */ + position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */ + top: 50%; /* ให้อยู่กลางในแนวตั้ง */ + left: 50%; /* ให้อยู่กลางในแนวนอน */ + transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */ + background-color: #ffffff; } \ No newline at end of file diff --git a/src/app/components/account-settings/user-settings/user-settings.component.ts b/src/app/components/account-settings/user-settings/user-settings.component.ts index 9c0e3a0..cc7b84d 100644 --- a/src/app/components/account-settings/user-settings/user-settings.component.ts +++ b/src/app/components/account-settings/user-settings/user-settings.component.ts @@ -1,4 +1,61 @@ +// import { Component, EventEmitter, Input, Output } from '@angular/core'; + +// @Component({ +// selector: 'app-user-settings', +// templateUrl: './user-settings.component.html', +// styleUrls: ['./user-settings.component.scss'] +// }) +// export class UserSettingsComponent { +// @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน'] +// @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); +// activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น + +// // ฟังก์ชันในการเปลี่ยนแท็บ +// changeTab(tab: { id: string, text: string }) { +// this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text]) +// this.activeTab = tab.id; +// } +// modalOptions: { +// [nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด +// isModalOpen: boolean; // เปิด/ปิด +// modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 ) +// backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด ) +// } +// } = { +// "add": { +// isModalOpen: false, +// modalSize: 'm', +// backdropClose: true, +// }, +// "edit": { +// isModalOpen: false, +// modalSize: 'm', +// backdropClose: true, +// } +// } + +// openModal(name: string, size: string, closeOnBackdrop?: boolean) { +// this.modalOptions[name].modalSize = size; +// this.modalOptions[name].backdropClose = closeOnBackdrop || false; +// this.modalOptions[name].isModalOpen = true; +// document.body.style.overflow = 'hidden'; // ล็อก Scroll +// } + +// closeModal(name: string) { +// this.modalOptions[name].isModalOpen = false; +// // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่ +// if (!this.isAnyModalOpen()) { +// document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว +// } +// } + +// isAnyModalOpen(): boolean { +// // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่ +// return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด +// } +// } import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-user-settings', @@ -6,51 +63,88 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; styleUrls: ['./user-settings.component.scss'] }) export class UserSettingsComponent { - @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน'] + @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']; @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น // ฟังก์ชันในการเปลี่ยนแท็บ changeTab(tab: { id: string, text: string }) { - this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text]) + this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text]); this.activeTab = tab.id; } + + // การจัดการการเปิดปิด modal modalOptions: { - [nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด - isModalOpen: boolean; // เปิด/ปิด - modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 ) - backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด ) - } + [nameModal: string]: { + isModalOpen: boolean; + modalSize: string; + backdropClose: boolean; + }; } = { - "add": { - isModalOpen: false, - modalSize: 'm', - backdropClose: true, - }, - "edit": { - isModalOpen: false, - modalSize: 'm', - backdropClose: true, - } + "add": { + isModalOpen: false, + modalSize: 'm', + backdropClose: true, + }, + "edit": { + isModalOpen: false, + modalSize: 'm', + backdropClose: true, } + }; openModal(name: string, size: string, closeOnBackdrop?: boolean) { this.modalOptions[name].modalSize = size; this.modalOptions[name].backdropClose = closeOnBackdrop || false; this.modalOptions[name].isModalOpen = true; - document.body.style.overflow = 'hidden'; // ล็อก Scroll + this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit' + document.body.style.overflow = 'hidden'; } closeModal(name: string) { this.modalOptions[name].isModalOpen = false; - // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่ if (!this.isAnyModalOpen()) { document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว } } isAnyModalOpen(): boolean { - // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่ - return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด + return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่ + } + + // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล + addUser() { + // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน + console.log('เพิ่มผู้ใช้งาน'); + } + + deleteUser() { + // ฟังก์ชันสำหรับการลบผู้ใช้งาน + console.log('ลบผู้ใช้งาน'); + } + + editUser() { + // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน + console.log('แก้ไขผู้ใช้งาน'); + } + currentModal = "" + constructor(private toastr: ToastrService) { } + showSuccess() { + this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessEdit() { + this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessDelete() { + this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); } } diff --git a/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.html b/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.html index b1f3f65..b99957b 100644 --- a/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.html +++ b/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.html @@ -82,7 +82,7 @@ <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu2(item);currentModal='edit'" data-hs-overlay="#department-list-modal-edit"></i> - <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu2(item)"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu2(item)" data-hs-overlay="#department-list-alert-delete-modal"></i> </td> </tr> </tbody> @@ -292,7 +292,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#department-list-alert-modal"> + data-hs-overlay="#department-list-alert-edit-modal"> บันทึกข้อมูล </a> </div> @@ -563,11 +563,92 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#department-list-alert-modal" (click)="addBu2()"> + data-hs-overlay="#department-list-alert-modal" (click)="addBu2();showSuccess()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="department-list-alert-edit-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#department-list-alert-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการเเก้ไขข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#department-list-modal-add"> + ย้อนกลับ + </button> + <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#department-list-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#department-list-alert-edit-modal" (click)="addBu2();showSuccessEdit()"> บันทึกข้อมูล </a> </div> </div> </div> </div> +</div> +<div id="department-list-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#department-list-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่! + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#department-list-modal-add"> + ย้อนกลับ + </button> + <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#department-list-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#department-list-alert-delete-modal" (click)="addBu2();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> </div> \ No newline at end of file diff --git a/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts b/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts index 6a3f399..8aa4064 100644 --- a/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts +++ b/src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts @@ -119,7 +119,19 @@ export class DepartmentListComponent implements OnInit { } showSuccess() { - this.toastr.success('This is an example of tip', 'TIP', { + this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessEdit() { + this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessDelete() { + this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right', }); diff --git a/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.html b/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.html index 0f827e6..5005a13 100644 --- a/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.html +++ b/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.html @@ -82,7 +82,7 @@ <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu3(item);currentModal='edit'" data-hs-overlay="#section-registration-modal-edit"></i> - <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu3(item)"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu3(item)" data-hs-overlay="#section-registration-alert-delete-modal"></i> </td> </tr> </tbody> @@ -292,7 +292,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#section-registration-alert-modal"> + data-hs-overlay="#section-registration-alert-edit-modal"> บันทึกข้อมูล </a> </div> @@ -364,7 +364,7 @@ <tbody *ngIf="filterBu2Modal().length"> <ng-container *ngIf="currentModal=='add'"> <tr *ngFor="let item of filterBu2Modal() | slice:((bu2Modal.currentPage-1) * 10) : (((bu2Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu2(item); showSuccess()" + class="cursor-pointer" (click)="selectBu2(item)" data-hs-overlay="#section-registration-modal-add"> <td class="flex justify-center"> {{((bu2Modal.currentPage-1) * 10)+(i+1)}} @@ -376,7 +376,7 @@ </ng-container> <ng-container *ngIf="currentModal=='edit'"> <tr *ngFor="let item of filterBu2Modal() | slice:((bu2Modal.currentPage-1) * 10) : (((bu2Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu2(item); showSuccess()" + class="cursor-pointer" (click)="selectBu2(item)" data-hs-overlay="#section-registration-modal-edit"> <td class="flex justify-center"> {{((bu2Modal.currentPage-1) * 10)+(i+1)}} @@ -484,7 +484,7 @@ </tbody> <tbody *ngIf="filterBu3Modal().length"> <tr *ngFor="let item of filterBu3Modal() | slice:((bu3Modal.currentPage-1) * 10) : (((bu3Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu3(item); showSuccess()" + class="cursor-pointer" (click)="selectBu3(item)" data-hs-overlay="#section-registration-modal-add"> <td class="flex justify-center"> {{((bu3Modal.currentPage-1) * 10)+(i+1)}} @@ -563,11 +563,93 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#section-registration-alert-modal" (click)="addBu3()"> + data-hs-overlay="#section-registration-alert-modal" (click)="addBu3();showSuccess()"> บันทึกข้อมูล </a> </div> </div> </div> </div> +</div> + +<div id="section-registration-alert-edit-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#section-registration-alert-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการเเก้ไขข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#section-registration-modal-add"> + ย้อนกลับ + </button> + <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#section-registration-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#section-registration-alert-edit-modal" (click)="addBu3();showSuccessEdit()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="section-registration-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#section-registration-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่! + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" *ngIf="currentModal=='add'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#section-registration-modal-add"> + ย้อนกลับ + </button> + <button type="button" *ngIf="currentModal=='edit'" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#section-registration-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#section-registration-alert-delete-modal" (click)="addBu3();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> </div> \ No newline at end of file diff --git a/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts b/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts index fafa6c5..3e60e07 100644 --- a/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts +++ b/src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts @@ -119,7 +119,19 @@ export class SectionRegistrationComponent implements OnInit { } showSuccess() { - this.toastr.success('This is an example of tip', 'TIP', { + this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessEdit() { + this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessDelete() { + this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right', }); diff --git a/src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html b/src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html index a656d5e..eda4e5b 100644 --- a/src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html +++ b/src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html @@ -364,7 +364,7 @@ <tbody *ngIf="filterBu3Modal().length"> <ng-container *ngIf="currentModal=='add'"> <tr *ngFor="let item of filterBu3Modal() | slice:((bu3Modal.currentPage-1) * 10) : (((bu3Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu3(item); showSuccess()" + class="cursor-pointer" (click)="selectBu3(item)" data-hs-overlay="#sub-department-one-modal-add"> <td class="flex justify-center"> {{((bu3Modal.currentPage-1) * 10)+(i+1)}} @@ -376,7 +376,7 @@ </ng-container> <ng-container *ngIf="currentModal=='edit'"> <tr *ngFor="let item of filterBu3Modal() | slice:((bu3Modal.currentPage-1) * 10) : (((bu3Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu3(item); showSuccess()" + class="cursor-pointer" (click)="selectBu3(item)" data-hs-overlay="#sub-department-one-modal-edit"> <td class="flex justify-center"> {{((bu3Modal.currentPage-1) * 10)+(i+1)}} @@ -484,7 +484,7 @@ </tbody> <tbody *ngIf="filterBu4Modal().length"> <tr *ngFor="let item of filterBu4Modal() | slice:((bu4Modal.currentPage-1) * 10) : (((bu4Modal.currentPage-1) * 10) + 10);let i = index" - class="cursor-pointer" (click)="selectBu4(item); showSuccess()" + class="cursor-pointer" (click)="selectBu4(item)" data-hs-overlay="#sub-department-one-modal-add"> <td class="flex justify-center"> {{((bu4Modal.currentPage-1) * 10)+(i+1)}} diff --git a/src/app/components/job-description/employee-group-unit/employee-group-unit.component.html b/src/app/components/job-description/employee-group-unit/employee-group-unit.component.html index 8fb5b2e..c7d777b 100644 --- a/src/app/components/job-description/employee-group-unit/employee-group-unit.component.html +++ b/src/app/components/job-description/employee-group-unit/employee-group-unit.component.html @@ -18,7 +18,8 @@ </button> </div> <div class="px-1"> - <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" + data-hs-overlay="#employee-group-unit-component-alert-delete-modal"> <i class="ri-delete-bin-6-line"></i> Delete </button> @@ -85,7 +86,7 @@ <td class="flex justify-center"> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)" data-hs-overlay="#employee-group-unit-component-modal-edit"></i> - <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_group(item)"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_group(item)" data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i> </td> </tr> </tbody> @@ -240,7 +241,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#employee-group-unit-component-alert-modal"> + data-hs-overlay="#employee-group-unit-component-alert-edit-modal"> บันทึกข้อมูล </a> </div> @@ -276,7 +277,43 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#employee-group-unit-component-alert-modal" (click)="addEmp_group()"> + data-hs-overlay="#employee-group-unit-component-alert-modal" (click)="addEmp_group();showSuccess()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="employee-group-unit-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#employee-group-unit-component-alert-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการเเก้ไขข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#employee-group-unit-component-alert-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#employee-group-unit-component-alert-edit-modal" (click)="addEmp_group();showSuccesssEdit()"> บันทึกข้อมูล </a> </div> @@ -285,6 +322,42 @@ </div> </div> +<div id="employee-group-unit-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#employee-group-unit-component-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#employee-group-unit-component-alert-delete-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#employee-group-unit-component-alert-delete-modal" (click)="addEmp_group();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + <div id="employee-group-unit-component-modal-upload" class="hs-overlay hidden ti-modal"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> <div class="max-h-full overflow-hidden ti-modal-content-upload"> diff --git a/src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts b/src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts index 1b8ad41..4276adc 100644 --- a/src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts +++ b/src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts @@ -13,20 +13,24 @@ export class EmployeeGroupUnit implements OnInit { @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น - // ฟังก์ชันในการเปลี่ยนแท็บ - changeTab(tab: { id: string, text: string }) { - this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text]) - this.activeTab = tab.id; - } - currentPage = 1 page = Array.from({ length: 1 }, (_, i) => i + 1); emp_groupList: EmpGroupModel[] = [] emp_group: EmpGroupModel = new MyEmpGroupModel({}) - search = "" + search = "" + constructor(private EmpGroupService: EmpGroupService, private toastr: ToastrService ) { } + + // ฟังก์ชันในการเปลี่ยนแท็บ + changeTab(tab: { id: string, text: string }) { + this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text]) + this.activeTab = tab.id; + } + + + ngOnInit(): void { this.getEmpGroupList() } @@ -89,13 +93,26 @@ export class EmployeeGroupUnit implements OnInit { x.tdesc.toLowerCase().includes(this.search) || x.edesc.toLowerCase().includes(this.search)) } + selectEmp_group(emp_group: EmpGroupModel) { // this.showSuccess() this.emp_group = new MyEmpGroupModel(emp_group) } showSuccess() { - this.toastr.success('This is an example of tip', 'TIP', { + this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccesssEdit() { + this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessDelete() { + this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right', }); @@ -108,6 +125,7 @@ export class EmployeeGroupUnit implements OnInit { // }) } deleteEmp_group(emp_group: EmpGroupModel) { + // this.emp_groupService.delete(new MyEmpGroupModel(emp_group)).subscribe((response:any) => { // if (response.success) { // this.getemp_groupList() diff --git a/src/app/components/job-description/position/position-unit.component.html b/src/app/components/job-description/position/position-unit.component.html index af5aca8..23f3b50 100644 --- a/src/app/components/job-description/position/position-unit.component.html +++ b/src/app/components/job-description/position/position-unit.component.html @@ -18,7 +18,8 @@ </button> </div> <div class="px-1"> - <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" + data-hs-overlay="#position-unit-component-alert-delete-modal"> <i class="ri-delete-bin-6-line"></i> Delete </button> @@ -85,7 +86,8 @@ <td class="flex justify-center"> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)" data-hs-overlay="#position-unit-component-modal-edit"></i> - <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deletePosition(item)"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deletePosition(item)" + data-hs-overlay="#position-unit-component-alert-delete-modal"></i> </td> </tr> </tbody> @@ -240,7 +242,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#position-unit-component-alert-modal"> + data-hs-overlay="#position-unit-component-alert-edit-modal"> บันทึกข้อมูล </a> </div> @@ -275,7 +277,7 @@ </div> </div> </div> - <div id="position-unit-component-alert-modal" class="hs-overlay hidden ti-modal"> +<div id="position-unit-component-alert-modal" class="hs-overlay hidden ti-modal"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="ti-modal-header"> @@ -302,11 +304,84 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#position-unit-component-alert-modal" (click)="addPosition()"> + data-hs-overlay="#position-unit-component-alert-modal" (click)="addPosition();showSuccess()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> +</div> + +<div id="position-unit-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#position-unit-component-alert-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการเเก้ไขข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#position-unit-component-alert-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#position-unit-component-alert-edit-modal" (click)="addPosition();showSuccesssEdit()"> บันทึกข้อมูล </a> </div> </div> </div> </div> +</div> + + +<div id="position-unit-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#position-unit-component-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#position-unit-component-alert-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#position-unit-component-alert-delete-modal" (click)="addPosition();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> </div> \ No newline at end of file diff --git a/src/app/components/job-description/position/position-unit.component.ts b/src/app/components/job-description/position/position-unit.component.ts index 42783a0..d471a35 100644 --- a/src/app/components/job-description/position/position-unit.component.ts +++ b/src/app/components/job-description/position/position-unit.component.ts @@ -50,7 +50,19 @@ export class PositionUnitComponent implements OnInit { } showSuccess() { - this.toastr.success('This is an example of tip', 'TIP', { + this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccesssEdit() { + this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { + timeOut: 3000, + positionClass: 'toast-top-right', + }); + } + showSuccessDelete() { + this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right', }); -- libgit2 0.26.0