From c6e91510d01486d70c5883259c8f9b086a520efa Mon Sep 17 00:00:00 2001
From: GurukiranP <talk2gurukiran@gmail.com>
Date: Tue, 20 Feb 2024 11:15:37 +0530
Subject: [PATCH] [MOSIP-19814] Fixed the issue when user clicks on column sort
 icon holiday date & status replicates and flickers.

Signed-off-by: GurukiranP <talk2gurukiran@gmail.com>
---
 .../masterdata/list-view/list-view.component.html |  1 +
 .../src/app/shared/table/table.component.html     |  1 +
 .../src/app/shared/table/table.component.scss     |  4 ++--
 .../src/app/shared/toolbar/toolbar.component.html |  4 ++--
 .../src/app/shared/toolbar/toolbar.component.scss | 10 ++++++++++
 admin-ui/src/assets/entity-spec/holiday-data.json | 15 ++++++++++++---
 6 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/admin-ui/src/app/features/masterdata/list-view/list-view.component.html b/admin-ui/src/app/features/masterdata/list-view/list-view.component.html
index 6238f32d..fbf5bcd5 100644
--- a/admin-ui/src/app/features/masterdata/list-view/list-view.component.html
+++ b/admin-ui/src/app/features/masterdata/list-view/list-view.component.html
@@ -19,6 +19,7 @@
       [sortData]="sortFilter"
       [noDataFlag]="noData"
       (sort)="getSortColumn($event)"
+      class="master-data"
     ></app-table>
   </mat-card>
 </ng-container>
diff --git a/admin-ui/src/app/shared/table/table.component.html b/admin-ui/src/app/shared/table/table.component.html
index ea3b756f..850456a4 100644
--- a/admin-ui/src/app/shared/table/table.component.html
+++ b/admin-ui/src/app/shared/table/table.component.html
@@ -5,6 +5,7 @@
       <th
         *ngFor="let columnName of displayedColumns; let i = index"
         class="mat-header-cell table-header sticky-header"
+        [ngStyle]="{'width': columnName?.styles?.width ? columnName.styles.width : auto}"
       >
         <span class="columnName-sort-span" 
           ><span
diff --git a/admin-ui/src/app/shared/table/table.component.scss b/admin-ui/src/app/shared/table/table.component.scss
index dcdb6b4e..926ff0fd 100644
--- a/admin-ui/src/app/shared/table/table.component.scss
+++ b/admin-ui/src/app/shared/table/table.component.scss
@@ -49,8 +49,8 @@ td.mat-footer-cell:first-child {
   padding-left: 20px;
 }
 
-th:last-child {
-  width: 0px;
+.master-data th:last-child {
+  width: 5%;
 }
 
 th.mat-header-cell:last-child,
diff --git a/admin-ui/src/app/shared/toolbar/toolbar.component.html b/admin-ui/src/app/shared/toolbar/toolbar.component.html
index 71bd9e62..dd64ec66 100644
--- a/admin-ui/src/app/shared/toolbar/toolbar.component.html
+++ b/admin-ui/src/app/shared/toolbar/toolbar.component.html
@@ -12,8 +12,8 @@
           'filter-button-style': button.buttonName.eng === 'Filter'
         }"
       >
-        <img [src]="button.imagePath" alt="Button Icon" height="14px" width="14px"/>
-        <span>{{ button.buttonName[lang]}}</span>
+      <img [src]="button.imagePath" alt="Button Icon"/>
+      <span class="button-name">{{ button.buttonName[lang]}}</span>
         <span class="filter-placer" *ngIf="button.buttonName.eng === 'Filter' && filtersAppliedFlag">
           <i style="font-size: 16px;" class="material-icons">fiber_manual_record</i>
         </span>
diff --git a/admin-ui/src/app/shared/toolbar/toolbar.component.scss b/admin-ui/src/app/shared/toolbar/toolbar.component.scss
index 17f21ff0..246192c7 100644
--- a/admin-ui/src/app/shared/toolbar/toolbar.component.scss
+++ b/admin-ui/src/app/shared/toolbar/toolbar.component.scss
@@ -8,6 +8,16 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+  img {
+    height: 14px;
+    width: 14px;
+  }
+
+  .button-name {
+    display: inline-block;
+    padding-left: 3px;
+  }
 }
 .container {
   overflow: auto;
diff --git a/admin-ui/src/assets/entity-spec/holiday-data.json b/admin-ui/src/assets/entity-spec/holiday-data.json
index aafb6867..fce78903 100644
--- a/admin-ui/src/assets/entity-spec/holiday-data.json
+++ b/admin-ui/src/assets/entity-spec/holiday-data.json
@@ -134,7 +134,10 @@
       "linkType": "",
       "LinkURL": "",
       "inputType": "text",
-      "ismandatory": "true"
+      "ismandatory": "true",
+      "styles": {
+        "width": "55%"
+      }
     },
     {
       "name": "holidayDesc",
@@ -158,7 +161,10 @@
       "linkType": "",
       "LinkURL": "",
       "inputType": "calendar",
-      "ismandatory": "true"
+      "ismandatory": "true",
+      "styles": {
+        "width": "20%"
+      }
     },
     {
       "name": "locationCode",
@@ -216,7 +222,10 @@
       "linkType": "",
       "LinkURL": "",
       "inputType": "dropdown",
-      "ismandatory": "false"
+      "ismandatory": "false",
+      "styles": {
+        "width": "20%"
+      }
     }
   ],
   "paginator": {