fix: remove p-dataview from list-active

onecx · Aug 29, 2024 · ff1cdfb · ff1cdfb
1 parent 1fee114
commit ff1cdfb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 47 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,50 +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">
+  <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
+        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
-          *ngFor="let announcement of announcements"
-          class="flex flex-row flex-nowrap justify-content-start align-items-center column-gap-4 hover:font-bold cursor-pointer"
-        >
-          <div
-            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'
-            "
-          >
-            <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'
-              "
-              aria-label="'ANNOUNCEMENT.PRIORITY' | translate + ': ' + announcement.priority"
-            ></div>
-          </div>
-          <div [id]="'am_announcement_list_active_data_row_' + row + '_title'" class="text-base sm:text-md md:text-lg">
-            {{ limitText(announcement.title, 100) }}
-          </div>
-        </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>
-    </ng-template>
-  </p-dataView>
+      <div [id]="'am_announcement_list_active_data_row_' + '_title'" class="text-base sm:text-md">
+        {{ limitText(announcement.title, 100) }}
+      </div>
+    </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 {