sub-job-competency.component.html 16 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<div class="header-title-type">
         <div class="flex justify-end">
             <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" style="height: 40px;">
                     <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 href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
                 data-hs-overlay="#sub-job-competency-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-10 m-0 shadow-md">
                     <i class="ti ti-book fs-l"></i>
                     Help
                 </button>
             </div>
         </div>
 </div>
 
 <div class="page px-rem">
    <div class="flex justify-between mb-5">
        <div class="flex pr-2">
            <!-- Content ของ div แรก -->
33 34 35 36 37 38 39 40 41 42 43 44 45 46
            <div class="flex pr-2">
                <!-- Content ของ div แรก -->
                <div class="px-1">
                    <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
                        <i class="ri-add-line"></i>
                        นำเข้าข้อมูล
                    </button>

                    <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
                        href="javascript:void(0);">
                        ดาวโหลดตัวอย่างไฟล์
                    </a>
                </div>
            </div>
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
        </div>
    </div>
     <div class="overflow-auto table-bordered rounded-t-md">
         <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 ti-custom-table-hover" >
                     <thead>
                         <tr>
                             <ng-container
                             *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)*','ชื่อลักษณะงาน (อังกฤษ)*','การจัดการ']; let f = first; let l = last; let i = index">
                                 <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                     [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">
                                         <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[
                         ['01', '001','Department Manager 1', 'Department Manager 1'],
                         ['02', '002','Department Manager 2', 'Department Manager 2'],
                         ['03', '003','Department 1-HRD', 'Department 1-HRD'],
                         ['04', '004','Department Manager 3', 'Department Manager 3'],
                         ['05', '005','Department Manager 4', 'Department Manager 4']];let i = index">
                             <td class="text-center" style="font-size: 12px; padding-left: 1.5rem;">{{item[0]}}</td>
                             <td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[1]}}</td>
                             <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
                             <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[3]}}</td>
                             <td class="flex justify-center">
                                 <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-competency-component-modal-edit"></i>
                                 <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-competency-component-alert-delete-modal"></i>
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
     </div>
     <div class="body-content" style="margin-top: 20px;">
         <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="sub-job-competency-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">
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
                         data-hs-overlay="#sub-job-competency-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-center">
                 <div class="flex justify-end" style="padding-right: 1rem;">
                     <div class="px-1">
                         <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
                                 transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
                                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                 <g id="SVGRepo_iconCarrier">
                                     <path d="M15 49A24 24 0 0 1 32 8"></path>
                                     <path d="M49 15a24 24 0 0 1-17 41"></path>
                                     <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
                                     <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
                                 </g>
                             </svg>
                             Clear
                         </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>
             <div class="ti-modal-body" style="padding-top: 0px;">
                 <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
                 <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
                 <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)*</label>
                 <input type="text" id="detail_th" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
                 <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
                 <input type="text" id="detail_eng" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
                 <label for="detail_eng" class="ti-form-label mt-2rem">ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน ( Job Competency)</label>
                    <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">1.
2.
3.
4.
5.</textarea>
                 <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="#sub-job-competency-component-modal-edit">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
                         data-hs-overlay="#sub-job-competency-component-alert-edit-modal">
                         บันทึกข้อมูล
                     </a>
                 </div>
             </div>
         </div>
         
     </div>
 </div>
 
 <div id="sub-job-competency-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="#sub-job-competency-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"
                         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="#sub-job-competency-component-modal-edit">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
226
                         data-hs-overlay="#sub-job-competency-component-alert-edit-modal" (click)="editBu1();showSuccessEdit()">
227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260
                         บันทึกข้อมูล
                     </a>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div id="sub-job-competency-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="#sub-job-competency-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="#sub-job-competency-component-alert-delete-modal">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
261
                         data-hs-overlay="#sub-job-competency-component-alert-delete-modal" (click)="editBu1();showSuccessDelete()">
262 263 264 265 266 267 268
                         ลบข้อมูล
                     </a>
                 </div>
             </div>
         </div>
     </div>
 </div>