รอบการประเมิน

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component.html

@@ -23,14 +23,16 @@
             </nav>
         </div>
         <div class="px-2rem" [ngClass]="{'pt-50px': groupShow !== '2'}">
-            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1" *ngIf="activeTab === 'underline-1'">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
+                *ngIf="activeTab === 'underline-1'">
                 <app-evaluation-cycle></app-evaluation-cycle>
             </div>
             <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
                 *ngIf="activeTab === 'underline-2'">
-                <app-define-document-form *ngIf="groupShow=='1'" (sendGroupShow)="groupShow=$event"></app-define-document-form>
+                <app-define-document-form *ngIf="groupShow=='1'"
+                    (sendGroupShow)="groupShow=$event"></app-define-document-form>
             </div>
         </div>
 
     </div>
-</div>
+</div>
\ No newline at end of file

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html

@@ -274,26 +274,39 @@
         <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="evaluation_cycle.apsPeriodEnd">
 
         <label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน (JL)</label>
-        <div *ngFor="let item of evaluation_cycle.personalLevel;let i = index;let f=first" [class.mt-2]="!f"
-          class="col-span-6 sm:col-span-6 ">
-          <div class="flex">
-            <div class="relative flex rounded-md">
-              <input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
-                style="padding-right: 3.5rem;" [(ngModel)]="item.tdesc">
+        <div *ngFor="let item of evaluation_cycle.personalLevel;let i = index;let f=first;let l = last"
+          class="grid grid-cols-2">
+          <div class="col-span-1">
+            <div class="flex relative">
+              <input type="text" class="ti-form-input" readonly
+                [ngClass]="{'input-list-f1': f&&!l, 'input-list-c1': !f&&!l, 'input-list-l1': !f&&l, 'input-list-fl1': f&&l}"
+                [(ngModel)]="item.plId">
+              <input type="text" class="ti-form-input" readonly
+                [ngClass]="{'input-list-f2': f&&!l, 'input-list-c2': !f&&!l, 'input-list-l2': !f&&l, 'input-list-fl2': f&&l}"
+                [(ngModel)]="item.tdesc">
               <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                 <button *ngIf="item.plId" type="button" class="flex items-center text-red-500"
                   (click)="pl.selectIndex=i;selectPl()">
                   <i class="ti ti-circle-x cursor-pointer"></i>
                 </button>
-                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                  (click)="pl.selectIndex=i;modal.search='';searchModalChange(plListFilter())"
-                  data-hs-overlay="#evaluation-cycle-pl-table-modal">
-                  <i class="ri-search-line cursor-pointer text-gray"></i>
-                </button>
               </div>
             </div>
           </div>
+          <div class="col-span-1 ml-1" *ngIf="f">
+            <ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
+          </div>
+        </div>
+        <div class="col-span-1" *ngIf="!evaluation_cycle.personalLevel.length">
+          <ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
         </div>
+        <ng-template #plSearchButton>
+          <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 !m-0 h-full"
+            (click)="modal.search='';searchModalChange(plListFilter())"
+            data-hs-overlay="#evaluation-cycle-pl-table-modal">
+            <i class="ri-search-line cursor-pointer text-gray"></i>
+          </button>
+        </ng-template>
 
         <div class="flex justify-end mt-2rem mb-1rem">
           <button type="button"

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts

@@ -93,10 +93,7 @@ export class EvaluationCycleComponent {
       this.evaluation_cycle.personalLevel.splice(this.pl.selectIndex, 1);
       return;
     }
-    this.evaluation_cycle.personalLevel[this.pl.selectIndex] = new MyPLModel(data);
-    if (this.pl.selectIndex === this.evaluation_cycle.personalLevel.length - 1) {
-      this.evaluation_cycle.personalLevel.push(new MyPLModel());
-    }
+    this.evaluation_cycle.personalLevel.push(new MyPLModel(data))
   }
 
   getEvaluationCycleList() {
@@ -145,7 +142,6 @@ export class EvaluationCycleComponent {
   }
   setData(data?: EvaluationCycleModel) {
     this.evaluation_cycle = new MyEvaluationCycleModel(data)
-    this.evaluation_cycle.personalLevel.push(new MyPLModel())
   }
   addevaluation_cycle() {
     this.evaluation_cycle.personalLevel.pop()

src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html

@@ -275,26 +275,39 @@
         <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="pmsMasfromEvaluation.apsPeriodEnd">
 
         <label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน (JL)</label>
-        <div *ngFor="let item of pmsMasfromEvaluation.personalLevel;let i = index;let f=first" [class.mt-2]="!f"
-          class="col-span-6 sm:col-span-6 ">
-          <div class="flex">
-            <div class="relative flex rounded-md">
-              <input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
-                style="padding-right: 3.5rem;" [(ngModel)]="item.tdesc">
+        <div *ngFor="let item of pmsMasfromEvaluation.personalLevel;let i = index;let f=first;let l = last"
+          class="grid grid-cols-2">
+          <div class="col-span-1">
+            <div class="flex relative">
+              <input type="text" class="ti-form-input" readonly
+                [ngClass]="{'input-list-f1': f&&!l, 'input-list-c1': !f&&!l, 'input-list-l1': !f&&l, 'input-list-fl1': f&&l}"
+                [(ngModel)]="item.plId">
+              <input type="text" class="ti-form-input" readonly
+                [ngClass]="{'input-list-f2': f&&!l, 'input-list-c2': !f&&!l, 'input-list-l2': !f&&l, 'input-list-fl2': f&&l}"
+                [(ngModel)]="item.tdesc">
               <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                 <button *ngIf="item.plId" type="button" class="flex items-center text-red-500"
                   (click)="pl.selectIndex=i;selectPl()">
                   <i class="ti ti-circle-x cursor-pointer"></i>
                 </button>
-                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                  (click)="pl.selectIndex=i;modal.search='';searchModalChange(plListFilter())"
-                  data-hs-overlay="#management-evaluation-cycle-pl-table-modal">
-                  <i class="ri-search-line cursor-pointer text-gray"></i>
-                </button>
               </div>
             </div>
           </div>
+          <div class="col-span-1 ml-1" *ngIf="f">
+            <ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
+          </div>
+        </div>
+        <div class="col-span-1" *ngIf="!pmsMasfromEvaluation.personalLevel.length">
+          <ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
         </div>
+        <ng-template #plSearchButton>
+          <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 !m-0 h-full"
+            (click)="modal.search='';searchModalChange(plListFilter())"
+            data-hs-overlay="#management-evaluation-cycle-pl-table-modal">
+            <i class="ri-search-line cursor-pointer text-gray"></i>
+          </button>
+        </ng-template>
 
         <div class="flex justify-end mt-2rem mb-1rem">
           <button type="button"

src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts

@@ -92,10 +92,7 @@ export class ManagementCycleComponent {
             this.pmsMasfromEvaluation.personalLevel.splice(this.pl.selectIndex, 1);
             return;
         }
-        this.pmsMasfromEvaluation.personalLevel[this.pl.selectIndex] = new MyPLModel(data);
-        if (this.pl.selectIndex === this.pmsMasfromEvaluation.personalLevel.length - 1) {
-            this.pmsMasfromEvaluation.personalLevel.push(new MyPLModel());
-        }
+        this.pmsMasfromEvaluation.personalLevel.push(new MyPLModel(data))
     }
 
 
@@ -147,7 +144,6 @@ export class ManagementCycleComponent {
 
     setData(data?: PmsMasfromEvaluationModel) {
         this.pmsMasfromEvaluation = new MyPmsMasfromEvaluationModel(data)
-        this.pmsMasfromEvaluation.personalLevel.push(new MyPLModel())
     }
     addPmsMasfromEvaluation() {
         this.pmsMasfromEvaluation.personalLevel.pop()

src/assets/css/style.css

@@ -24937,3 +24937,44 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .max-w-1\/2 {
   max-width: 50% !important;
 }
+
+.input-list-f1 {
+  border-radius: 0.25rem 0 0 0;
+  border-bottom: none;
+  width: 40%;
+}
+.input-list-f2 {
+  border-radius: 0 0.25rem 0 0;
+  border-bottom: none;
+  padding-right: 3.5rem;
+}
+.input-list-c1 {
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  width: 40%;
+}
+.input-list-c2 {
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  padding-right: 3.5rem;
+}
+.input-list-l1 {
+  border-radius: 0 0 0 0.25rem;
+  border-top: none;
+  width: 40%;
+}
+.input-list-l2 {
+  border-radius: 0 0 0.25rem 0;
+  border-top: none;
+  padding-right: 3.5rem;
+}
+.input-list-fl1 {
+  border-radius: 0.25rem 0 0 0.25rem;
+  width: 40%;
+}
+.input-list-fl2 {
+  border-radius: 0 0.25rem  0.25rem 0;
+  padding-right: 3.5rem;
+}