fix: styling search result

onecx · Oct 11, 2024 · b6f7ee2 · b6f7ee2
1 parent 96cc30b
commit b6f7ee2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 27 deletions.
diff --git a/src/app/announcement/announcement-search/announcement-search.component.html b/src/app/announcement/announcement-search/announcement-search.component.html
@@ -137,22 +137,35 @@
             <ng-container *ngIf="col.isDropdown">
               {{ 'ENUMS.ANNOUNCEMENT_' + col.header + '.' + rowData[col.field] | translate }}
             </ng-container>
-            <ng-container *ngIf="!(col.isDropdown || col.isDate || col.limit)">
-              <ng-container *ngIf="col.field !== 'workspaceName' && col.field !== 'productName'">
-                {{ rowData[col.field] }}</ng-container
-              >
-              <ng-container *ngIf="col.field === 'workspaceName' && isWorkspace(rowData.workspaceName)">
-                {{ getDisplayNameWorkspace(rowData[col.field]) }}
-              </ng-container>
-              <ng-container *ngIf="col.field === 'productName' && !rowData.productName">
-                {{ 'ANNOUNCEMENT.EVERY_PRODUCT' | translate }}
-              </ng-container>
-              <ng-container *ngIf="col.field === 'productName'">
-                {{ getDisplayNameProduct(rowData[col.field]) }}
-              </ng-container>
-              <ng-container *ngIf="col.field === 'workspaceName' && !isWorkspace(rowData.workspaceName)">
-                {{ getTranslationKeyForNonExistingWorkspaces(rowData.workspaceName) | translate }}
-              </ng-container>
+
+            <ng-container *ngIf="col.field === 'status'">
+              <span
+                *ngIf="rowData[col.field] === 'ACTIVE'"
+                class="pi pi-circle-on"
+                [pTooltip]="'ENUMS.ANNOUNCEMENT_STATUS.ACTIVE' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+              ></span>
+              <span
+                *ngIf="rowData[col.field] === 'INACTIVE'"
+                class="pi pi-circle-off"
+                [pTooltip]="'ENUMS.ANNOUNCEMENT_STATUS.INACTIVE' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+              ></span>
+            </ng-container>
+
+            <ng-container *ngIf="col.field === 'workspaceName' && isWorkspace(rowData.workspaceName)">
+              {{ getDisplayNameWorkspace(rowData[col.field]) }}
+            </ng-container>
+            <ng-container *ngIf="col.field === 'workspaceName' && !isWorkspace(rowData.workspaceName)">
+              {{ getTranslationKeyForNonExistingWorkspaces(rowData.workspaceName) | translate }}
+            </ng-container>
+            <ng-container *ngIf="col.field === 'productName' && !rowData.productName">
+              {{ 'ANNOUNCEMENT.EVERY_PRODUCT' | translate }}
+            </ng-container>
+            <ng-container *ngIf="col.field === 'productName'">
+              {{ getDisplayNameProduct(rowData[col.field]) }}
             </ng-container>
           </td>
         </tr>

diff --git a/src/app/announcement/announcement-search/announcement-search.component.ts b/src/app/announcement/announcement-search/announcement-search.component.ts
@@ -22,6 +22,7 @@ type ExtendedColumn = Column & {
   isDropdown?: true
   css?: string
   limit?: boolean
+  needsDisplayName?: boolean
 }
 type ChangeMode = 'VIEW' | 'NEW' | 'EDIT'
 
@@ -57,6 +58,13 @@ export class AnnouncementSearchComponent implements OnInit {
   public limitText = limitText
 
   public columns: ExtendedColumn[] = [
+    {
+      field: 'status',
+      header: 'STATUS',
+      active: true,
+      translationPrefix: 'ANNOUNCEMENT',
+      css: 'text-center hidden sm:table-cell'
+    },
     {
       field: 'title',
       header: 'TITLE',
@@ -69,14 +77,16 @@ export class AnnouncementSearchComponent implements OnInit {
       header: 'WORKSPACE',
       active: true,
       translationPrefix: 'ANNOUNCEMENT',
-      css: 'text-center hidden xl:table-cell'
+      css: 'text-center hidden xl:table-cell',
+      needsDisplayName: true
     },
     {
       field: 'productName',
       header: 'APPLICATION',
       active: true,
       translationPrefix: 'ANNOUNCEMENT',
-      css: 'hidden sm:table-cell'
+      css: 'hidden lg:table-cell',
+      needsDisplayName: true
     },
     {
       field: 'type',
@@ -86,14 +96,6 @@ export class AnnouncementSearchComponent implements OnInit {
       css: 'text-center hidden xl:table-cell',
       isDropdown: true
     },
-    {
-      field: 'status',
-      header: 'STATUS',
-      active: true,
-      translationPrefix: 'ANNOUNCEMENT',
-      css: 'text-center hidden lg:table-cell',
-      isDropdown: true
-    },
     {
       field: 'priority',
       header: 'PRIORITY',
@@ -116,7 +118,7 @@ export class AnnouncementSearchComponent implements OnInit {
       header: 'END_DATE',
       active: true,
       translationPrefix: 'ANNOUNCEMENT',
-      css: 'text-center hidden sm:table-cell',
+      css: 'text-center hidden md:table-cell',
       hasFilter: true,
       isDate: true
     }