💄 Display attachments icon in table, display attachments in details

src/src/app/components/trip/trip.component.html

@@ -135,11 +135,15 @@
           (click)="onRowClick(tripitem)">
           @if (tripTableSelectedColumns.includes('time')) {<td class="font-mono text-sm">{{ tripitem.time }}</td>}
           @if (tripTableSelectedColumns.includes('text')) {<td class="relative">
-            <div class="truncate">
+            <div class="truncate" [class.mr-2]="tripitem.attachments.length">
               @if (tripitem.status) {<div class="block absolute top-3 left-1 size-2.5 rounded-full"
                 [style.background]="tripitem.status.color"></div>}
               {{ tripitem.text }}
             </div>
+            @if (tripitem.attachments.length) {
+            <div class="absolute right-2 top-1/2 -translate-y-1/2"><i class="pi pi-file-pdf text-lg! text-red-500!"></i>
+            </div>
+            }
           </td>}
           @if (tripTableSelectedColumns.includes('place')) {<td class="relative">
             @if (tripitem.place) {
@@ -197,11 +201,15 @@
           }
           @if (tripTableSelectedColumns.includes('time')) {<td class="font-mono text-sm">{{ tripitem.time }}</td>}
           @if (tripTableSelectedColumns.includes('text')) {<td class="relative max-w-60">
-            <div class="truncate">
+            <div class="truncate" [class.mr-2]="tripitem.attachments.length">
               @if (tripitem.status) {<div class="block absolute top-3 left-1 size-2.5 rounded-full"
                 [style.background]="tripitem.status.color"></div>}
               {{ tripitem.text }}
             </div>
+            @if (tripitem.attachments.length) {
+            <div class="absolute right-2 top-1/2 -translate-y-1/2"><i class="pi pi-file-pdf text-lg! text-red-500!"></i>
+            </div>
+            }
           </td>}
           @if (tripTableSelectedColumns.includes('place')) {<td>
             @if (tripitem.place) {
@@ -368,6 +376,36 @@
             selectedItem.status.label }}</span>
         </div>
         }
+
+        @if (selectedItem.attachments?.length) {
+        <div class="md:col-span-3 rounded-md shadow p-4">
+          <p class="font-bold mb-1">Attachments</p>
+          <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
+            @for (attachment of selectedItem.attachments; track attachment.id) {
+            <div (click)="downloadAttachment(attachment)"
+              class="group relative cursor-pointer flex items-center gap-3 rounded-lg bg-white hover:bg-gray-100 dark:hover:bg-white/5 p-3 transition-all dark:bg-gray-950">
+              <div
+                class="group relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-red-100 transition-colors dark:bg-red-900">
+                <i class="pi pi-file text-red-600 transition-opacity group-hover:opacity-0 dark:text-red-400"></i>
+                <i
+                  class="pi pi-arrow-down absolute -translate-y-4 text-red-600 opacity-0 transition-none group-hover:translate-y-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-300 dark:text-red-400"></i>
+              </div>
+
+              <div class="min-w-0 flex-1">
+                <div class="truncate font-mono text-md text-left text-gray-900 dark:text-gray-100">{{
+                  attachment.filename }}</div>
+                <div class="flex items-center gap-2 mt-1 text-xs font-mono text-gray-500 dark:text-gray-400">
+                  <span>{{ attachment.file_size | fileSize }}</span>
+                  <span
+                    class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded min-w-fit dark:bg-gray-400">{{
+                    attachment.uploaded_by }}</span>
+                </div>
+              </div>
+            </div>
+            }
+          </div>
+        </div>
+        }
       </div>
 
       @if (selectedItem.image) {

src/src/app/components/trip/trip.component.ts

@@ -207,7 +207,7 @@ export class TripComponent implements AfterViewInit {
   ];
   readonly menuTripExportItems: MenuItem[] = [
     {
-      label: 'Actions',
+      label: 'Export',
       items: [
         {
           label: 'Calendar (.ics)',
@@ -427,6 +427,7 @@ export class TripComponent implements AfterViewInit {
           lng,
           distance,
           paid_by: item.paid_by,
+          attachments: item.attachments,
         };
       });
   }
@@ -1126,6 +1127,7 @@ export class TripComponent implements AfterViewInit {
         days: this.trip.days,
         selectedDay: day_id,
         members: this.tripMembers,
+        trip: this.trip,
       },
     })!;
 
@@ -1185,6 +1187,7 @@ export class TripComponent implements AfterViewInit {
           status: item.status ? (item.status as TripStatus).label : null,
         },
         members: this.tripMembers,
+        trip: this.trip,
       },
     })!;
 
@@ -2021,6 +2024,10 @@ export class TripComponent implements AfterViewInit {
       .subscribe({
         next: () => {
           this.trip!.attachments = this.trip?.attachments?.filter((att) => att.id != attachmentId);
+          if (this.selectedItem?.attachments?.length) {
+            if (this.selectedItem.attachments.some((a) => a.id == attachmentId))
+              this.selectedItem.attachments = this.selectedItem.attachments.filter((a) => a.id != attachmentId);
+          }
         },
       });
   }