francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Display attachments icon in table, display attachments in details

Browse Source
This commit is contained in:
itskovacs 2025-11-02 00:20:08 +01:00
parent 519454b2e7
commit 366328dbb2
2 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/src/app/components/trip/trip.component.html
View File

@ -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) {

9
src/src/app/components/trip/trip.component.ts
View File

@ -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);
}
},
});
}