Skip to content

Commit cec801f

Browse files
itskovacsitskovacs
committed
💄 Shared Trip: add checklist and support
1 parent 7f44896 commit cec801f

File tree

2 files changed

+75
-38
lines changed

2 files changed

+75
-38
lines changed

‎src/src/app/components/shared-trip/shared-trip.component.html‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<section class="mt-4">
44
<div class="p-4 print:p-0 flex items-center justify-between">
55
<div class="flex items-center gap-2">
6-
<div class="flex flex-col max-w-[55vw] md:max-w-full">
7-
<h1 class="font-medium tracking-tight text-2xl truncate">{{ trip.name }}</h1>
6+
<div class="pl-2 flex flex-col max-w-[55vw] md:max-w-full min-w-0">
7+
<h1 class="font-medium tracking-tight text-xl md:text-2xl truncate">{{ trip.name }}</h1>
88
<span class="text-xs text-gray-500">{{ trip.days.length }} {{ trip.days!.length > 1 ? 'days' : 'day'}}</span>
99
</div>
1010
</div>
@@ -14,6 +14,7 @@ <h1 class="font-medium tracking-tight text-2xl truncate">{{ trip.name }}</h1>
1414
<div class="flex gap-2 items-center text-xs text-gray-500"><i class="pi pi-github"></i>itskovacs/trip</div>
1515
</div>
1616
<div class="flex items-center gap-2 print:hidden">
17+
<p-button pTooltip="Checklist" text (click)="openChecklist()" icon="pi pi-check-square" severity="help" />
1718
<p-button pTooltip="Packing list" tooltipPosition="left" text (click)="openPackingList()" icon="pi pi-briefcase"
1819
severity="help" />
1920
<span
@@ -354,6 +355,10 @@ <h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
354355
p.price || '-'
355356
}} {{ currency$ | async }}</span>
356357

358+
@if (trip.collaborators.length) {
359+
<span class="bg-gray-100 text-gray-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-gray-100/85">{{ p.user
360+
}}</span>
361+
}
357362
</div>
358363
</div>
359364
</div>
@@ -415,41 +420,18 @@ <h1 class="font-semibold tracking-tight text-xl">Days</h1>
415420
</div>
416421

417422
<div class="p-4 shadow rounded-md w-full min-h-20">
418-
<div class="group relative p-2 mb-2 flex flex-col items-start">
419-
<h1 class="font-semibold tracking-tight text-xl">Watchlist</h1>
420-
<span class="text-xs text-gray-500 line-clamp-1">{{ trip.name }} pending/constraints</span>
421-
422-
<div
423-
class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
424-
<p-button [icon]="collapsedTripStatuses ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
425-
(click)="collapsedTripStatuses = !collapsedTripStatuses" />
426-
</div>
423+
<div class="p-2 mb-2 flex justify-between items-center">
424+
<h1 class="font-semibold tracking-tight text-xl">About</h1>
425+
<div class="flex items-center gap-1 text-gray-500"><i class="pi pi-github"></i> itskovacs/trip</div>
427426
</div>
428427

429-
@if (!collapsedTripStatuses) {
430-
<div [class.max-h-40!]="!isExpanded" class="max-h-[340px] overflow-y-auto">
431-
@defer {
432-
@for (item of getWatchlistData; track item.id) {
433-
<div class="flex items-center gap-2 h-10 px-4 py-2 w-full max-w-full">
434-
<div class="flex flex-none">
435-
<span [style.background]="item.status.color+'1A'" [style.color]="item.status.color"
436-
class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
437-
item.status.label }}</span>
438-
</div>
439-
<div class="line-clamp-1">{{ item.text }}</div>
440-
</div>
441-
} @empty {
442-
<p class="p-4 font-light text-gray-500">
443-
Nothing there
444-
</p>
445-
}
446-
} @placeholder (minimum 0.4s) {
447-
<div class="h-16">
448-
<p-skeleton height="100%" />
449-
</div>
450-
}
428+
<div class="max-w-[85%] text-center mx-auto flex flex-col items-center gap-4">
429+
<div>TRIP is free and always will be. Building it takes a lot of time and effort, and since I'm committed to
430+
keeping it free, your support simply helps keep the project going. Thank you! ❤️</div>
431+
432+
<a href="https://ko-fi.com/itskovacs" target="_blank" class="custom-button flex items-center">Buy me
433+
a coffee</a>
451434
</div>
452-
}
453435
</div>
454436
}
455437
</div>
@@ -505,4 +487,40 @@ <h1 class="text-2xl font-semibold text-gray-800 tracking-tight dark:text-white m
505487
}
506488
</div>
507489
</section>
490+
</p-dialog>
491+
492+
<p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true"
493+
[(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]">
494+
<section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
495+
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
496+
@for (item of checklistItems; track item.id) {
497+
<div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
498+
<label [for]="item.id" [class.line-through]="item.checked"
499+
class="flex items-center gap-2 w-full cursor-pointer">
500+
<p-checkbox disabled [binary]="true" [inputId]="item.id.toString()" [(ngModel)]="item.checked" />
501+
<div class="pr-6 md:pr-0 truncate select-none flex-1">
502+
<span>{{ item.text }}</span>
503+
</div>
504+
</label>
505+
</div>
506+
}
507+
</div>
508+
509+
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
510+
@for (item of getWatchlistData; track item.id) {
511+
<div class="flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
512+
<label [for]="item.id" class="flex items-center gap-2 w-full">
513+
<div class="relative">
514+
@if (item.status) {<div class="z-50 block absolute top-0 left-3 size-2.5 rounded-full"
515+
[style.background]="item.status.color"></div>}
516+
<p-checkbox disabled />
517+
</div>
518+
<div class="pr-6 md:pr-0 truncate select-none flex-1">
519+
<span>{{ item.text }}</span>
520+
</div>
521+
</label>
522+
</div>
523+
}
524+
</div>
525+
</section>
508526
</p-dialog>

‎src/src/app/components/shared-trip/shared-trip.component.ts‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
TripItem,
1313
TripStatus,
1414
PackingItem,
15+
ChecklistItem,
1516
} from "../../types/trip";
1617
import { Place } from "../../types/poi";
1718
import {
@@ -72,12 +73,14 @@ export class SharedTripComponent implements AfterViewInit {
7273
totalPrice = 0;
7374
collapsedTripDays = false;
7475
collapsedTripPlaces = false;
75-
collapsedTripStatuses = false;
7676
packingDialogVisible = false;
7777
isExpanded = false;
7878
isFilteringMode = false;
7979
packingList: PackingItem[] = [];
8080
dispPackingList: Record<string, PackingItem[]> = {};
81+
checklistDialogVisible = false;
82+
checklistItems: ChecklistItem[] = [];
83+
dispchecklist: ChecklistItem[] = [];
8184

8285
map?: L.Map;
8386
markerClusterGroup?: L.MarkerClusterGroup;
@@ -94,14 +97,15 @@ export class SharedTripComponent implements AfterViewInit {
9497
label: "Packing",
9598
icon: "pi pi-briefcase",
9699
command: () => {
97-
// this.toggleArchiveTrip();
100+
this.openPackingList();
98101
},
99102
},
100103
{
101-
label: "Reminders",
104+
label: "Checklist",
102105
icon: "pi pi-check-square",
106+
iconClass: "text-purple-500!",
103107
command: () => {
104-
// this.toggleArchiveTrip();
108+
this.openChecklist();
105109
},
106110
},
107111
],
@@ -719,4 +723,19 @@ export class SharedTripComponent implements AfterViewInit {
719723
{},
720724
);
721725
}
726+
727+
openChecklist() {
728+
if (!this.trip) return;
729+
730+
if (!this.checklistItems.length)
731+
this.apiService
732+
.getChecklist(this.trip.id)
733+
.pipe(take(1))
734+
.subscribe({
735+
next: (items) => {
736+
this.checklistItems = [...items];
737+
},
738+
});
739+
this.checklistDialogVisible = true;
740+
}
722741
}

0 commit comments

Comments
 (0)