การประเมินสมรรถนะ > การจัดการสมรรถนะ > ตัวชี้วัดเเละหลักสูตร

src/app/components/competency-assessment/competency-management/competency-management.component.html

@@ -32,13 +32,13 @@
             <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                 <app-indicators-and-curriculum (sendPathTitle)="pathTitle=$event"></app-indicators-and-curriculum>
             </div>
-            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2">
+            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
                 <app-group-competencies *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
                     (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-group-competencies>
                 <app-edit-group-competencies *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
                     (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-competencies>
             </div>
-            <div id="underline-3" role="tabpanel" aria-labelledby="underline-item-3">
+            <div id="underline-3" class="hidden" role="tabpanel" aria-labelledby="underline-item-3">
                 <app-set-approvers [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-set-approvers>
             </div>
         </div>

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html

@@ -13,7 +13,7 @@
                 </div>
             </div>
             <div class="px-1">
-                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                <button type="button" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
                     <i class="ti ti-book fs-l"></i>
                     Help
                 </button>
@@ -53,7 +53,8 @@
                         <td>{{item.name}}</td>
                         <td>{{item.type}}</td>
                         <td class="flex justify-center">
-                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="editTab=true;pathTitleChange()"></i>
+                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                                (click)="editTab=true;pathTitleChange()"></i>
                             <i class="ti ti-file-download cursor-pointer i-gray fs-l px-1"></i>
                         </td>
                     </tr>
@@ -63,7 +64,7 @@
         <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
             <ul class="ti-pagination">
                 <li>
-                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                    <a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
                         (click)="currentPage = (currentPage-1 || 1)">
                         <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
                     </a>
@@ -91,6 +92,11 @@
                     </a>
                 </li>
             </ul>
+            <ul class="nav-tabs mt-3">
+                <span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
+                        (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length)
+                        ) :(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
+            </ul>
         </nav>
     </div>
 </ng-container>

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.ts

@@ -14,8 +14,8 @@ export class IndicatorsAndCurriculumComponent {
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
   editTab = false
   currentPage = 1
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   search = ""
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
 
   dataList: DataModel[] = [
     { code: "CC-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)", type: "CC" },
@@ -23,10 +23,11 @@ export class IndicatorsAndCurriculumComponent {
     { code: "CC-03", name: "ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)", type: "CC" },
     { code: "MC-01", name: "การคิดเชิงกลยุทธ์ (Strategic Thinking)", type: "MC" },
     { code: "MC-02", name: "การมีทัศนคติที่เติบโต (Mindset-Growth)", type: "MC" },
-    { code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" }
+    { code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" },
   ]
   constructor(private toastr: ToastrService) {
     this.pathTitleChange()
+    this.searchChange()
   }
 
   pathTitleChange() {
@@ -76,5 +77,7 @@ export class IndicatorsAndCurriculumComponent {
   editUser() {
     console.log('แก้ไขผู้ใช้งาน');
   }
+
+  
 }
 

src/assets/css/style.css

@@ -3785,6 +3785,9 @@ select option:focus {
 .col-span-10 {
   grid-column: span 10 / span 10;
 }
+.col-span-11 {
+  grid-column: span 11 / span 11;
+}
 .col-span-12 {
   grid-column: span 12 / span 12;
 }
@@ -4737,6 +4740,9 @@ select option:focus {
 .cursor-text {
   cursor: text;
 }
+.cursor-default {
+  cursor: default;
+}
 .select-all {
   -webkit-user-select: all;
   -moz-user-select: all;
@@ -4800,6 +4806,24 @@ select option:focus {
 .grid-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+.grid-cols-auto {
+  grid-template-columns: auto;
+}
 .grid-rows-3 {
   grid-template-rows: repeat(3, minmax(0, 1fr));
 }
@@ -6297,6 +6321,10 @@ select option:focus {
 .pr-50px {
   padding-right: 50px;
 }
+.px-5px {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .px-10px {
   padding-left: 10px;
   padding-right: 10px;
@@ -24778,29 +24806,45 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
   margin-top: 20px !important;
 }
 .swal2-styled.swal2-confirm.\!swal2-button-bg-green {
-  background-color: #1DBE5A !important;
+  background-color: #1dbe5a !important;
   border-radius: 20px !important;
 }
 .swal2-styled.swal2-confirm.\!swal2-button-bg-green:focus {
   box-shadow: 0 0 0 0px rgba(110, 120, 129, 0.5) !important;
 }
 .swal2-styled.swal2-cancel.\!swal2-button-bg-gray {
-  background-color: #B3B3B3 !important;
+  background-color: #b3b3b3 !important;
   border-radius: 20px !important;
 }
 .swal2-styled.swal2-cancel.\!swal2-button-bg-gray:focus {
   box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5) !important;
 }
-.\!w-80px{
+.\!w-80px {
   width: 80px !important;
 }
-.\!h-80px{
+.\!h-80px {
   height: 80px !important;
 }
 
-.w-80px{
+.w-80px {
   width: 80px !important;
 }
-.h-80px{
+.h-80px {
   height: 80px !important;
 }
+.align-center {
+  align-content: center;
+}
+.align-start {
+  align-content: start;
+}
+.height-20px {
+  height: 20px;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+.\!pl-0 {
+  padding-left: 0 !important;
+}