Merge pull request #282 from GurukiranP/MOSIP-19814

[MOSIP-19814] Fixed the issue when user clicks on column sort icon holiday date & status replicates and flickers.
mosip · Feb 20, 2024 · 6d00f9e · 6d00f9e
2 parents ec01e3a + c6e9151
commit 6d00f9e
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": {