Layout list active announcements (#215)

* fix: remote - layout list active announcements * fix: remove p-dataview from list-active
onecx · Aug 29, 2024 · ece4749 · ece4749
1 parent 9c91db8
commit ece4749
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 58 deletions.
diff --git a/src/app/remotes/announcement-list-active/announcement-list-active.component.html b/src/app/remotes/announcement-list-active/announcement-list-active.component.html
@@ -1,63 +1,43 @@
 <ng-container *ngIf="announcements$ | async as announcements">
-  <p-dataView
-    #table
-    id="am_announcement_list_active_dataview"
-    [value]="announcements"
-    [rows]="10"
-    [layout]="'list'"
-    [emptyMessage]="'ACTIONS.SEARCH.NO_DATA' | translate"
-  >
-    <ng-template let-announcements let-row="rowIndex" pTemplate="listItem">
+  <div class="flex flex-column row-gap-3 px-1">
+    <a
+      *ngFor="let announcement of announcements"
+      class="block flex flex-row flex-nowrap justify-content-start align-items-center column-gap-4 hover:font-bold cursor-pointer"
+      (click)="announcementContent.toggle($event)"
+    >
       <div
-        *ngFor="let announcement of announcements"
-        class="flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 py-1 px-3 hover:bg-gray-200 cursor-pointer"
+        class="font-bold"
+        [ngClass]="
+          announcement.priority === 'IMPORTANT'
+            ? 'text-red-600'
+            : announcement.priority === 'NORMAL'
+              ? 'text-yellow-600'
+              : announcement.priority === 'LOW'
+                ? 'text-blue-600'
+                : 'text-green-600'
+        "
+        aria-hidden="true"
       >
         <div
-          [id]="'am_announcement_list_active_data_row_' + row + '_title'"
-          class="p-0 col-8 sm:col-6 md:col-6 lg:col-5 xl:col-3 sm:font-bold text-base sm:text-md md:text-lg"
-          [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.TITLE' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-          {{ limitText(announcement.title, 60) }}
-        </div>
-        <div
-          [id]="'am_announcement_list_active_data_row_' + row + '_content'"
-          class="p-0 hidden md:block col-2"
-          [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.CONTENT' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-          {{ limitText(announcement.content, 40) }}
-        </div>
-        <div
-          [id]="'am_announcement_list_active_data_row_' + row + '_type'"
-          class="p-0 hidden xl:block col-2"
-          [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.TYPE' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-          {{ limitText(announcement.type, 50) }}
-        </div>
-        <div
-          [id]="'am_announcement_list_active_data_row_' + row + '_priority'"
-          class="p-0 hidden xl:block col-2"
-          [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.PRIORITY' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-          {{ limitText(announcement.priority, 50) }}
-        </div>
-        <div
-          [id]="'am_announcement_list_active_data_row_' + row + '_workspace'"
-          class="p-0 hidden xl:block col-2"
-          [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.WORKSPACE' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-          {{ limitText(announcement.workspaceName, 50) }}
-        </div>
+          id="am_announcement_list_active_icon"
+          class="pi text-xl"
+          [ngClass]="
+            announcement.type === 'EVENT'
+              ? 'pi-calendar'
+              : announcement.type === 'INFO'
+                ? 'pi-info-circle'
+                : announcement.type === 'SYSTEM_MAINTENANCE'
+                  ? 'pi-wrench'
+                  : 'pi-info-circle'
+          "
+        ></div>
+      </div>
+      <div [id]="'am_announcement_list_active_data_row_' + '_title'" class="text-base sm:text-md">
+        {{ limitText(announcement.title, 100) }}
       </div>
-    </ng-template>
-  </p-dataView>
+    </a>
+  </div>
+  <p-overlayPanel #announcementContent>
+    <div class="">Hallo Henry</div>
+  </p-overlayPanel>
 </ng-container>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea'
 import { KeyFilterModule } from 'primeng/keyfilter'
 import { ListboxModule } from 'primeng/listbox'
 import { MultiSelectModule } from 'primeng/multiselect'
+import { OverlayPanelModule } from 'primeng/overlaypanel'
 import { SelectButtonModule } from 'primeng/selectbutton'
 import { TableModule } from 'primeng/table'
 import { ToastModule } from 'primeng/toast'
@@ -42,6 +43,7 @@ import { LabelResolver } from './label.resolver'
     KeyFilterModule,
     ListboxModule,
     MultiSelectModule,
+    OverlayPanelModule,
     ReactiveFormsModule,
     SelectButtonModule,
     TableModule,
@@ -63,6 +65,7 @@ import { LabelResolver } from './label.resolver'
     KeyFilterModule,
     ListboxModule,
     MultiSelectModule,
+    OverlayPanelModule,
     ReactiveFormsModule,
     SelectButtonModule,
     TableModule,

diff --git a/src/app/shared/utils.ts b/src/app/shared/utils.ts
@@ -1,7 +1,7 @@
 import { AbstractControl, FormArray, FormGroup } from '@angular/forms'
 import { SelectItem } from 'primeng/api'
 
-export function limitText(text: string, limit: number): string {
+export function limitText(text: string | undefined, limit: number): string {
   if (text) {
     return text.length < limit ? text : text.substring(0, limit) + '...'
   } else {