mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 23:16:46 +00:00
feat(tours): point a tour at its trip's packing list
A tour can now point at the packing list of its trip, as a whole or at one of its categories (say "Hiking gear" for a hike), and shows it in its detail. The new Packing list section reads the list live as the user may see it: the backpack tile with the item count on its corner and the category's own colour, how many are packed with a thin progress bar, the first items ticked off or not with their quantity, how many more there are, and a button that opens the trip's Lists tab. Who may change the tour links one, changes it or lets go through a dialog that lists the whole list and every category with its colour and item count, and writes only on its confirm. It is a reference, never a copy: the items stay in Packing, are ticked off and edited there, and each traveller sees in the tour only the items Packing shows them, so an item kept to oneself never shows through a tour. A category that is renamed, cleared or only holds items of others reads as missing, an empty one as empty, a link that could not be read says so with a retry, and while Lists are switched off the link stays, dimmed, and can still be let go. Removing the link, or the tour, leaves the list and every item as they are. Nothing suggests or changes an item by itself. On the server the link is a row of its own in the tours domain (tour_packing_links, migration 046110), one per tour and gone with it. GET, PUT and DELETE /api/trips/:tripId/tours/:placeId/packing-link read it with the trip and change it with place_edit; linking needs the Lists addon and, for a category, an item of it the user can see. The writes answer the tour with its link and tell the trip through tours:changed, so the offline client queues them as writes of the tour and replays them like one. A copied trip keeps its tours' links, a tour saved as new or taken over does not. The MCP tools get_tour_packing, link_tour_packing and unlink_tour_packing run over the same service and checks; the read also hands the tour's facts as context for suggesting what to pack, which only becomes an item through the packing tools. The empty category placeholder now lives in @trek/shared so both sides leave it out alike. All 27 locales carry the new strings, and the wiki describes the link and the tools.
This commit is contained in:
Maurice
@@ -15,8 +15,9 @@ export const KAT_COLORS = [
|
||||
export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b']
|
||||
|
||||
// A category's first item is seeded with this sentinel because the server
|
||||
// rejects empty names. Treat it as a placeholder in the UI.
|
||||
export const PACKING_PLACEHOLDER_NAME = '...'
|
||||
// rejects empty names. Treat it as a placeholder in the UI. Shared, because a
|
||||
// tour's packing link (P2D-XD-01) leaves it out the same way.
|
||||
export { PACKING_PLACEHOLDER_NAME } from '@trek/shared'
|
||||
|
||||
/** What the import's file picker offers: CSV rows, plain text, or a Markdown list (#875). */
|
||||
export const PACKING_IMPORT_ACCEPT = '.csv,.txt,.md,.markdown,text/markdown'
|
||||
|
||||
@@ -53,6 +53,7 @@ import TourActivitySection from './activity/TourActivitySection';
|
||||
import type { PlanValues } from './activity/tourActivityCompare';
|
||||
import { TourSaveToCollectionButton } from './collection/TourSaveToCollectionButton';
|
||||
import { PaddleCheckSection } from './paddle/PaddleCheckSection';
|
||||
import { TourPackingSection } from './packing/TourPackingSection';
|
||||
import { PaddleWindSection } from './paddle/PaddleWindCard';
|
||||
import { TourProvenanceBlock } from './provenance/TourProvenanceSection';
|
||||
import { RunHeadPills } from './run/RunHeadPills';
|
||||
@@ -94,6 +95,8 @@ interface TourDetailDialogProps extends TourPermissionProps {
|
||||
onSaveAsNew?: (tour: TourListItem) => Promise<void> | void;
|
||||
/** ACT-01: a recorded track was assigned, taken off or imported; the lists take in these tours. */
|
||||
onToursChanged?: (placeIds: number[]) => Promise<void> | void;
|
||||
/** P2D-XD-01: opens the trip's packing list the tour points at. */
|
||||
onOpenPacking?: () => void;
|
||||
onAssignToDay?: (placeId: number, dayId?: number) => void;
|
||||
onRemoveAssignment?: (dayId: number, assignmentId: number) => void;
|
||||
onDelete?: () => void;
|
||||
@@ -502,6 +505,7 @@ export default function TourDetailDialog({
|
||||
onSourceReimported,
|
||||
onSaveAsNew,
|
||||
onToursChanged,
|
||||
onOpenPacking,
|
||||
onAssignToDay,
|
||||
onRemoveAssignment,
|
||||
onDelete,
|
||||
@@ -756,6 +760,13 @@ export default function TourDetailDialog({
|
||||
onToursChanged={onToursChanged}
|
||||
/>
|
||||
)}
|
||||
<TourPackingSection
|
||||
tripId={place.trip_id}
|
||||
tour={tour}
|
||||
tourName={place.name}
|
||||
canEdit={canEdit}
|
||||
onOpenPacking={onOpenPacking}
|
||||
/>
|
||||
|
||||
{description && (
|
||||
<DialogSection className="flex-none" label={t('places.formDescription')}>
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
import { Backpack, Link2, ListChecks, Loader2, Unlink } from 'lucide-react';
|
||||
import { useId, type ReactNode } from 'react';
|
||||
import { useTranslation } from '../../../i18n';
|
||||
import {
|
||||
DialogButton,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogSection,
|
||||
DialogShell,
|
||||
DialogTile,
|
||||
FooterSpacer,
|
||||
fs,
|
||||
NEUTRAL_TINT,
|
||||
} from '../../shared/DialogShell';
|
||||
import { Tooltip } from '../../shared/Tooltip';
|
||||
import { ChoiceList, ChoiceRow } from '../collection/choiceParts';
|
||||
import { CategoryDot, CountBadge } from './packingLinkParts';
|
||||
import type { TourPackingLinkController } from './useTourPackingLink';
|
||||
|
||||
/** One thing to point at: its mark, its name and how many items it holds. */
|
||||
function Choice({
|
||||
selected,
|
||||
onChoose,
|
||||
testId,
|
||||
mark,
|
||||
name,
|
||||
count,
|
||||
}: {
|
||||
selected: boolean;
|
||||
onChoose: () => void;
|
||||
testId: string;
|
||||
mark: ReactNode;
|
||||
name: string;
|
||||
count: number;
|
||||
}) {
|
||||
return (
|
||||
<ChoiceRow selected={selected} disabled={false} disabledHint="" onChoose={onChoose} testId={testId}>
|
||||
{mark}
|
||||
<span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(13, 'body')}>
|
||||
{name}
|
||||
</span>
|
||||
<CountBadge count={count} />
|
||||
</ChoiceRow>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* P2D-XD-01: the dialog that points a tour at its trip's packing list, as a
|
||||
* whole or at one of its categories, each with its colour and how many items
|
||||
* it holds. It writes only through the button in its foot; letting go of a
|
||||
* link is offered there too, and neither touches the list itself.
|
||||
*/
|
||||
export function TourPackingLinkDialog({ packing, tourName }: { packing: TourPackingLinkController; tourName: string }) {
|
||||
const { t } = useTranslation();
|
||||
const labelId = useId();
|
||||
if (!packing.open) return null;
|
||||
return (
|
||||
<DialogShell
|
||||
onClose={packing.close}
|
||||
labelledBy={labelId}
|
||||
width="narrow"
|
||||
align="top"
|
||||
blocked={packing.saving}
|
||||
header={
|
||||
<DialogHeader
|
||||
tile={
|
||||
<DialogTile>
|
||||
<Backpack size={20} strokeWidth={1.9} className="text-content" />
|
||||
</DialogTile>
|
||||
}
|
||||
tint={NEUTRAL_TINT}
|
||||
labelId={labelId}
|
||||
onClose={packing.close}
|
||||
eyebrow={t('tours.packing.link')}
|
||||
title={tourName}
|
||||
sub={t('tours.packing.dialogSub')}
|
||||
subWraps
|
||||
/>
|
||||
}
|
||||
footer={
|
||||
<DialogFooter>
|
||||
{packing.link && (
|
||||
<Tooltip label={t('tours.packing.unlinkHint')}>
|
||||
<span className="inline-flex">
|
||||
<DialogButton
|
||||
onClick={() => void packing.unlink()}
|
||||
disabled={packing.saving}
|
||||
data-testid="tour-packing-unlink"
|
||||
icon={<Unlink size={14} strokeWidth={2} />}
|
||||
>
|
||||
{t('tours.packing.unlink')}
|
||||
</DialogButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<FooterSpacer />
|
||||
<DialogButton onClick={packing.close} disabled={packing.saving}>
|
||||
{t('common.cancel')}
|
||||
</DialogButton>
|
||||
<DialogButton
|
||||
variant="primary"
|
||||
data-testid="tour-packing-confirm"
|
||||
disabled={!packing.canConfirm}
|
||||
onClick={() => void packing.confirm()}
|
||||
icon={
|
||||
packing.saving ? (
|
||||
<Loader2 size={14} strokeWidth={2} className="animate-spin" />
|
||||
) : (
|
||||
<Link2 size={14} strokeWidth={2} />
|
||||
)
|
||||
}
|
||||
>
|
||||
{t('tours.packing.confirm')}
|
||||
</DialogButton>
|
||||
</DialogFooter>
|
||||
}
|
||||
>
|
||||
<DialogSection label={t('tours.packing.choose')}>
|
||||
<ChoiceList label={t('tours.packing.choose')} tall>
|
||||
<Choice
|
||||
selected={packing.choice === null}
|
||||
onChoose={() => packing.choose(null)}
|
||||
testId="tour-packing-choice-whole"
|
||||
mark={
|
||||
<span className="grid h-6 w-6 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm">
|
||||
<ListChecks size={13} strokeWidth={2.2} />
|
||||
</span>
|
||||
}
|
||||
name={t('tours.packing.whole')}
|
||||
count={packing.wholeCount}
|
||||
/>
|
||||
{packing.categories.map((category) => (
|
||||
<Choice
|
||||
key={category.name}
|
||||
selected={packing.choice === category.name}
|
||||
onChoose={() => packing.choose(category.name)}
|
||||
testId={`tour-packing-choice-${category.name}`}
|
||||
mark={
|
||||
<span className="grid h-6 w-6 flex-none place-items-center">
|
||||
<CategoryDot color={category.color} />
|
||||
</span>
|
||||
}
|
||||
name={category.name}
|
||||
count={category.count}
|
||||
/>
|
||||
))}
|
||||
</ChoiceList>
|
||||
</DialogSection>
|
||||
</DialogShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import type { TourListItem, TourPackingLink } from '@trek/shared';
|
||||
import { AlertTriangle, ArrowUpRight, Backpack, Check, Link2, PackageOpen, PowerOff, Unlink } from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { useTranslation } from '../../../i18n';
|
||||
import type { PackingItem } from '../../../types';
|
||||
import { BOX } from '../../Planner/bookings/bookingParts';
|
||||
import { SoftPill, WhiteBadge } from '../../Planner/planParts';
|
||||
import { DialogSection, fs } from '../../shared/DialogShell';
|
||||
import { Tooltip } from '../../shared/Tooltip';
|
||||
import { CardAction, TourNotice } from '../tourParts';
|
||||
import { CategoryDot } from './packingLinkParts';
|
||||
import { TourPackingLinkDialog } from './TourPackingLinkDialog';
|
||||
import { useTourPackingLink, type TourPackingLinkController } from './useTourPackingLink';
|
||||
|
||||
/** How many items of the list the card shows before it says how many more there are. */
|
||||
const SHOWN_ITEMS = 5;
|
||||
|
||||
/** The quiet pill beside the section's label, like the upload of a tour's files. */
|
||||
function SectionPill({ onClick, icon, children }: { onClick: () => void; icon: ReactNode; children: ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-surface-card px-2 py-[2px] font-geist font-semibold text-content-muted shadow-sm transition-colors hover:text-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||
style={fs(10.5)}
|
||||
>
|
||||
{icon}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** The backpack tile with the item count on its corner, the way a waypoint's number carries its marks. */
|
||||
function PackTile({ count, color }: { count: number; color: string | null }) {
|
||||
return (
|
||||
<span className="relative grid h-9 w-9 flex-none place-items-center rounded-full bg-surface-secondary text-content-muted">
|
||||
<Backpack size={16} strokeWidth={2} aria-hidden="true" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute -end-1.5 -top-1.5 grid h-[18px] min-w-[18px] place-items-center rounded-full bg-accent px-1 font-geist font-semibold tabular-nums text-accent-text ring-2 ring-surface-card"
|
||||
style={fs(9.5)}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
{color && (
|
||||
<span className="absolute -bottom-0.5 -start-0.5 grid h-3.5 w-3.5 place-items-center rounded-full bg-surface-card">
|
||||
<CategoryDot color={color} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** One item as Packing keeps it, read only: ticked off or not, its name and how many. */
|
||||
function ItemRow({ item }: { item: PackingItem }) {
|
||||
return (
|
||||
<li className="flex min-w-0 items-center gap-2 py-1">
|
||||
<span
|
||||
className={`grid h-4 w-4 flex-none place-items-center rounded-full ${item.checked ? 'bg-accent text-accent-text' : 'ring-1 ring-inset ring-edge'}`}
|
||||
>
|
||||
{!!item.checked && <Check size={10} strokeWidth={3} aria-hidden="true" />}
|
||||
</span>
|
||||
<span
|
||||
className={`min-w-0 flex-1 truncate ${item.checked ? 'text-content-faint line-through' : 'text-content-secondary'}`}
|
||||
style={fs(12, 'body')}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
{(item.quantity ?? 1) > 1 && <WhiteBadge>×{item.quantity}</WhiteBadge>}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
/** The name of what the tour points at: a category by its own name, otherwise the whole list. */
|
||||
function linkName(link: TourPackingLink, t: (key: string) => string): string {
|
||||
return link.category ?? t('tours.packing.whole');
|
||||
}
|
||||
|
||||
/** The linked list as it reads now: its items with how many are packed, or why there are none to show. */
|
||||
function LinkedCard({ packing, onOpenPacking }: { packing: TourPackingLinkController; onOpenPacking?: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const { link, linked } = packing;
|
||||
if (!link || !linked) return null;
|
||||
const name = linkName(link, t);
|
||||
if (linked.state === 'missing') {
|
||||
return (
|
||||
<TourNotice tone="warning" icon={<AlertTriangle size={13} strokeWidth={2} />}>
|
||||
{t('tours.packing.missing', { name })}
|
||||
</TourNotice>
|
||||
);
|
||||
}
|
||||
const total = linked.items.length;
|
||||
const allPacked = total > 0 && linked.packed === total;
|
||||
const more = total - SHOWN_ITEMS;
|
||||
return (
|
||||
<div className={`${BOX} flex flex-col gap-2.5 px-3 py-2.5`} data-testid="tour-packing-card">
|
||||
<div className="flex min-w-0 items-center gap-2.5">
|
||||
<PackTile count={total} color={packing.linkedColor} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="m-0 truncate font-semibold text-content" style={fs(13, 'body')}>
|
||||
{name}
|
||||
</p>
|
||||
{total > 0 && (
|
||||
<p className="m-0 truncate text-content-faint" style={fs(11)}>
|
||||
{t('tours.packing.packed', { packed: linked.packed, count: total })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{allPacked && (
|
||||
<SoftPill tone="success" icon={<Check size={11} strokeWidth={2.4} className="flex-none" />}>
|
||||
{t('tours.packing.allPacked')}
|
||||
</SoftPill>
|
||||
)}
|
||||
</div>
|
||||
{total > 0 ? (
|
||||
<>
|
||||
<div className="h-1 overflow-hidden rounded-full bg-surface-secondary" aria-hidden="true">
|
||||
<div
|
||||
className="h-full rounded-full bg-accent transition-[width] duration-300"
|
||||
style={{ width: `${(linked.packed / total) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<ul className="m-0 flex list-none flex-col p-0">
|
||||
{linked.items.slice(0, SHOWN_ITEMS).map((item) => (
|
||||
<ItemRow key={item.id} item={item} />
|
||||
))}
|
||||
</ul>
|
||||
{more > 0 && (
|
||||
<p className="m-0 text-content-faint" style={fs(11)}>
|
||||
{t('tours.packing.more', { count: more })}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="m-0 flex items-center gap-1.5 text-content-muted" style={fs(12, 'body')}>
|
||||
<PackageOpen size={13} strokeWidth={2} className="flex-none text-content-faint" />
|
||||
{link.category === null ? t('tours.packing.emptyList') : t('tours.packing.emptyCategory', { name })}
|
||||
</p>
|
||||
)}
|
||||
{onOpenPacking && (
|
||||
<div className="flex">
|
||||
<CardAction icon={<ArrowUpRight size={13} strokeWidth={2.2} />} onClick={onOpenPacking}>
|
||||
{t('tours.packing.open')}
|
||||
</CardAction>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** No link yet: a quiet dashed card, with the way to make one for who may change the tour. */
|
||||
function UnlinkedCard({ onLink }: { onLink?: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex items-center gap-2.5 rounded-[10px] border border-dashed border-edge px-3 py-2.5">
|
||||
<span className="grid h-9 w-9 flex-none place-items-center rounded-full bg-surface-secondary text-content-faint">
|
||||
<Backpack size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 text-content-faint" style={fs(12, 'body')}>
|
||||
{t('tours.packing.none')}
|
||||
</span>
|
||||
{onLink && (
|
||||
<CardAction icon={<Link2 size={13} strokeWidth={2.2} />} onClick={onLink}>
|
||||
{t('tours.packing.link')}
|
||||
</CardAction>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The section's body for whatever the link reads as now. */
|
||||
function SectionBody({
|
||||
packing,
|
||||
canEdit,
|
||||
onOpenPacking,
|
||||
}: {
|
||||
packing: TourPackingLinkController;
|
||||
canEdit: boolean;
|
||||
onOpenPacking?: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
if (packing.status === 'error') {
|
||||
return (
|
||||
<TourNotice tone="warning" icon={<AlertTriangle size={13} strokeWidth={2} />}>
|
||||
<span className="flex flex-wrap items-center gap-2">
|
||||
{t('tours.packing.loadFailed')}
|
||||
<button type="button" onClick={packing.retry} className="font-semibold underline underline-offset-2">
|
||||
{t('tours.planner.retry')}
|
||||
</button>
|
||||
</span>
|
||||
</TourNotice>
|
||||
);
|
||||
}
|
||||
if (!packing.link) return <UnlinkedCard onLink={canEdit ? packing.show : undefined} />;
|
||||
if (!packing.packingEnabled) {
|
||||
// Dimmed, not hidden: the tour still points at the list, it just cannot be shown.
|
||||
return (
|
||||
<div className="opacity-70">
|
||||
<TourNotice icon={<PowerOff size={13} strokeWidth={2} />}>
|
||||
<span className="font-semibold text-content-secondary">{linkName(packing.link, t)}</span>
|
||||
<span className="block">{t('tours.packing.addonOff')}</span>
|
||||
</TourNotice>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <LinkedCard packing={packing} onOpenPacking={onOpenPacking} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* P2D-XD-01 in a tour's detail: the packing list, or the category of it, the
|
||||
* tour points at, read live from the trip's packing list as this user may see
|
||||
* it. Who may change the tour links one, changes it or lets go through the
|
||||
* dialog; the items themselves are only ever changed in Packing, which the
|
||||
* card opens. Without Packing and without a link there is nothing to show.
|
||||
*/
|
||||
export function TourPackingSection({
|
||||
tripId,
|
||||
tour,
|
||||
tourName,
|
||||
canEdit,
|
||||
onOpenPacking,
|
||||
}: {
|
||||
tripId: number;
|
||||
tour: TourListItem;
|
||||
tourName: string;
|
||||
canEdit: boolean;
|
||||
/** Opens the trip's packing list; absent where the detail cannot leave for it. */
|
||||
onOpenPacking?: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const packing = useTourPackingLink({ tripId, tour });
|
||||
if (packing.status === 'loading' || (!packing.packingEnabled && !packing.link)) return null;
|
||||
const editable = canEdit && packing.status === 'ready';
|
||||
let action: ReactNode = null;
|
||||
if (editable && packing.link && packing.packingEnabled) {
|
||||
action = (
|
||||
<SectionPill onClick={packing.show} icon={<Link2 size={11} strokeWidth={2} />}>
|
||||
{t('tours.packing.change')}
|
||||
</SectionPill>
|
||||
);
|
||||
} else if (editable && packing.link) {
|
||||
action = (
|
||||
<Tooltip label={t('tours.packing.unlinkHint')}>
|
||||
<span className="inline-flex">
|
||||
<SectionPill onClick={() => void packing.unlink()} icon={<Unlink size={11} strokeWidth={2} />}>
|
||||
{t('tours.packing.unlink')}
|
||||
</SectionPill>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<DialogSection className="flex-none" label={t('tours.packing.label')} action={action}>
|
||||
<div data-testid="tour-packing-section">
|
||||
<SectionBody packing={packing} canEdit={canEdit} onOpenPacking={onOpenPacking} />
|
||||
</div>
|
||||
<TourPackingLinkDialog packing={packing} tourName={tourName} />
|
||||
</DialogSection>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Package } from 'lucide-react';
|
||||
import { useTranslation } from '../../../i18n';
|
||||
import { tintOf, WhiteBadge } from '../../Planner/planParts';
|
||||
|
||||
/** A packing category's own colour, as the packing list gives it, with a soft halo of the same colour. */
|
||||
export function CategoryDot({ color }: { color: string }) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="h-2.5 w-2.5 flex-none rounded-full"
|
||||
style={{ background: color, boxShadow: `0 0 0 3px ${tintOf(color, 24)}` }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** How many items a list or category holds, as a badge; the count is read out in words. */
|
||||
export function CountBadge({ count }: { count: number }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<span aria-label={t('tours.packing.items', { count })} className="inline-flex">
|
||||
<WhiteBadge icon={<Package size={10} strokeWidth={2.2} className="flex-none text-content-faint" />}>
|
||||
{count}
|
||||
</WhiteBadge>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import type { TourListItem, TourPackingLink } from '@trek/shared';
|
||||
import type { ReactNode } from 'react';
|
||||
import { MemoryRouter } from 'react-router';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen, within } from '../../../../tests/helpers/render';
|
||||
import { TranslationProvider } from '../../../i18n/TranslationContext';
|
||||
import { tourPackingLinkRepo } from '../../../repo/tourPackingLinkRepo';
|
||||
import { useAddonStore } from '../../../store/addonStore';
|
||||
import { useTripStore } from '../../../store/tripStore';
|
||||
import type { PackingItem } from '../../../types';
|
||||
import { TourPackingSection } from './TourPackingSection';
|
||||
import { useTourPackingLink } from './useTourPackingLink';
|
||||
|
||||
// FE-TOUR-PACKING-001 to FE-TOUR-PACKING-010
|
||||
|
||||
const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
|
||||
vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
|
||||
|
||||
const TOUR = { place_id: 11, name: 'Ridge', tour_type: 'hike' } as TourListItem;
|
||||
const GEAR: TourPackingLink = { category: 'Hiking gear', linked_at: '2026-10-20 09:00:00' };
|
||||
|
||||
let nextId = 1;
|
||||
function item(name: string, category: string | null, over: Partial<PackingItem> = {}): PackingItem {
|
||||
return { id: nextId++, trip_id: 5, name, category, checked: 0, sort_order: nextId, quantity: 1, ...over } as PackingItem;
|
||||
}
|
||||
|
||||
const ITEMS = [
|
||||
item('Boots', 'Hiking gear', { checked: 1 }),
|
||||
item('Rain jacket', 'Hiking gear', { quantity: 2 }),
|
||||
item('Map', 'Hiking gear'),
|
||||
item('Passport', 'Documents'),
|
||||
item('...', 'Snacks'),
|
||||
];
|
||||
|
||||
function wrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<MemoryRouter>
|
||||
<TranslationProvider>{children}</TranslationProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
}
|
||||
|
||||
function setPacking(enabled: boolean) {
|
||||
useAddonStore.setState({
|
||||
addons: [
|
||||
{ id: 'tours', enabled: true },
|
||||
{ id: 'packing', enabled },
|
||||
] as never,
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
toast.success.mockReset();
|
||||
toast.error.mockReset();
|
||||
setPacking(true);
|
||||
useTripStore.setState({ packingItems: ITEMS });
|
||||
vi.spyOn(tourPackingLinkRepo, 'read').mockResolvedValue(null);
|
||||
});
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
describe('useTourPackingLink', () => {
|
||||
it('FE-TOUR-PACKING-001: reads the link, shows its items live and offers every category with its colour', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue(GEAR);
|
||||
const { result } = renderHook(() => useTourPackingLink({ tripId: 5, tour: TOUR }), { wrapper });
|
||||
expect(result.current.status).toBe('loading');
|
||||
await waitFor(() => expect(result.current.status).toBe('ready'));
|
||||
expect(tourPackingLinkRepo.read).toHaveBeenCalledWith(5, 11, expect.any(AbortSignal));
|
||||
expect(result.current.linked).toMatchObject({ state: 'ready', packed: 1 });
|
||||
expect(result.current.linked?.items.map((entry) => entry.name)).toEqual(['Boots', 'Rain jacket', 'Map']);
|
||||
expect(result.current.categories.map(({ name, count }) => [name, count])).toEqual([
|
||||
['Hiking gear', 3],
|
||||
['Documents', 1],
|
||||
['Snacks', 0],
|
||||
]);
|
||||
expect(result.current.linkedColor).toBe(result.current.categories[0]?.color);
|
||||
expect(result.current.wholeCount).toBe(4);
|
||||
|
||||
// Ticking an item off in Packing shows here at once.
|
||||
act(() => useTripStore.setState({ packingItems: ITEMS.map((entry) => ({ ...entry, checked: 1 })) }));
|
||||
expect(result.current.linked?.packed).toBe(3);
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-002: the dialog starts on what the tour points at and links the choice only on confirm', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue(GEAR);
|
||||
const link = vi.spyOn(tourPackingLinkRepo, 'link').mockResolvedValue({ category: 'Documents', linked_at: 'now' });
|
||||
const { result } = renderHook(() => useTourPackingLink({ tripId: 5, tour: TOUR }), { wrapper });
|
||||
await waitFor(() => expect(result.current.status).toBe('ready'));
|
||||
act(() => result.current.show());
|
||||
expect(result.current.open).toBe(true);
|
||||
expect(result.current.choice).toBe('Hiking gear');
|
||||
// The same choice again would change nothing.
|
||||
expect(result.current.canConfirm).toBe(false);
|
||||
act(() => result.current.choose('Documents'));
|
||||
expect(result.current.canConfirm).toBe(true);
|
||||
await act(() => result.current.confirm());
|
||||
expect(link).toHaveBeenCalledWith(5, 11, { category: 'Documents' });
|
||||
expect(result.current.link?.category).toBe('Documents');
|
||||
expect(result.current.open).toBe(false);
|
||||
expect(toast.success).toHaveBeenCalledWith('Packing list linked.');
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-003: a refused write keeps the dialog and says why; letting go answers no link', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue(GEAR);
|
||||
vi.spyOn(tourPackingLinkRepo, 'link').mockRejectedValue(new Error('boom'));
|
||||
const unlink = vi.spyOn(tourPackingLinkRepo, 'unlink').mockResolvedValue(null);
|
||||
const { result } = renderHook(() => useTourPackingLink({ tripId: 5, tour: TOUR }), { wrapper });
|
||||
await waitFor(() => expect(result.current.status).toBe('ready'));
|
||||
act(() => result.current.show());
|
||||
act(() => result.current.choose(null));
|
||||
await act(() => result.current.confirm());
|
||||
expect(toast.error).toHaveBeenCalledWith('The link could not be saved.');
|
||||
expect(result.current.open).toBe(true);
|
||||
|
||||
await act(() => result.current.unlink());
|
||||
expect(unlink).toHaveBeenCalledWith(5, 11);
|
||||
expect(result.current.link).toBeNull();
|
||||
expect(toast.success).toHaveBeenCalledWith('Link removed. The packing list stays as it is.');
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-004: a failed read says so and is read again on retry; a reloaded tour reads again', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockRejectedValueOnce(new Error('500'));
|
||||
const { result, rerender } = renderHook(({ tour }) => useTourPackingLink({ tripId: 5, tour }), {
|
||||
wrapper,
|
||||
initialProps: { tour: TOUR },
|
||||
});
|
||||
await waitFor(() => expect(result.current.status).toBe('error'));
|
||||
act(() => result.current.retry());
|
||||
await waitFor(() => expect(result.current.status).toBe('ready'));
|
||||
expect(tourPackingLinkRepo.read).toHaveBeenCalledTimes(2);
|
||||
rerender({ tour: { ...TOUR } });
|
||||
await waitFor(() => expect(tourPackingLinkRepo.read).toHaveBeenCalledTimes(3));
|
||||
});
|
||||
});
|
||||
|
||||
describe('TourPackingSection', () => {
|
||||
const section = (canEdit = true, onOpenPacking?: () => void) =>
|
||||
render(
|
||||
<TourPackingSection tripId={5} tour={TOUR} tourName="Ridge" canEdit={canEdit} onOpenPacking={onOpenPacking} />
|
||||
);
|
||||
|
||||
it('FE-TOUR-PACKING-005: without a link it offers to link one, and links a category through the dialog', async () => {
|
||||
const link = vi.spyOn(tourPackingLinkRepo, 'link').mockResolvedValue(GEAR);
|
||||
section();
|
||||
expect(await screen.findByText('No packing list linked')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText('Link a packing list'));
|
||||
const whole = await screen.findByTestId('tour-packing-choice-whole');
|
||||
expect(whole).toHaveAttribute('aria-checked', 'true');
|
||||
expect(within(whole).getByText('4')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('tour-packing-unlink')).not.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByTestId('tour-packing-choice-Hiking gear'));
|
||||
fireEvent.click(screen.getByTestId('tour-packing-confirm'));
|
||||
await waitFor(() => expect(link).toHaveBeenCalledWith(5, 11, { category: 'Hiking gear' }));
|
||||
expect(await screen.findByTestId('tour-packing-card')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-006: a linked category shows its items, how many are packed, and opens Packing', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue(GEAR);
|
||||
const open = vi.fn();
|
||||
section(true, open);
|
||||
const card = await screen.findByTestId('tour-packing-card');
|
||||
expect(within(card).getByText('Hiking gear')).toBeInTheDocument();
|
||||
expect(within(card).getByText('1 of 3 packed')).toBeInTheDocument();
|
||||
expect(within(card).getByText('Rain jacket')).toBeInTheDocument();
|
||||
expect(within(card).getByText('×2')).toBeInTheDocument();
|
||||
expect(within(card).queryByText('Passport')).not.toBeInTheDocument();
|
||||
fireEvent.click(within(card).getByText('Open packing list'));
|
||||
expect(open).toHaveBeenCalledTimes(1);
|
||||
expect(screen.getByText('Change')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-007: a long list shows its first items and how many more; all packed says so', async () => {
|
||||
const many = Array.from({ length: 8 }, (_, index) => item(`Thing ${index + 1}`, 'Bulk', { checked: 1 }));
|
||||
useTripStore.setState({ packingItems: many });
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue({ category: null, linked_at: 'x' });
|
||||
section(false);
|
||||
const card = await screen.findByTestId('tour-packing-card');
|
||||
expect(within(card).getByText('Whole packing list')).toBeInTheDocument();
|
||||
expect(within(card).getByText('+3 more')).toBeInTheDocument();
|
||||
expect(within(card).getByText('All packed')).toBeInTheDocument();
|
||||
expect(within(card).queryByText('Open packing list')).not.toBeInTheDocument();
|
||||
// Read only: no way to change the link.
|
||||
expect(screen.queryByText('Change')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-008: a category with no item to see reads as missing, an empty one as empty', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue({ category: 'Climbing', linked_at: 'x' });
|
||||
const { unmount } = section();
|
||||
expect(await screen.findByText('“Climbing” has no items you can see any more.')).toBeInTheDocument();
|
||||
unmount();
|
||||
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue({ category: 'Snacks', linked_at: 'x' });
|
||||
section();
|
||||
expect(await screen.findByText('“Snacks” has no items yet.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-009: with Packing off a link is shown dimmed and can be let go, and without one nothing shows', async () => {
|
||||
setPacking(false);
|
||||
vi.mocked(tourPackingLinkRepo.read).mockResolvedValue(GEAR);
|
||||
const unlink = vi.spyOn(tourPackingLinkRepo, 'unlink').mockResolvedValue(null);
|
||||
section();
|
||||
expect(await screen.findByText('Packing lists are switched off, so the list cannot be shown.')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText('Remove link'));
|
||||
await waitFor(() => expect(unlink).toHaveBeenCalledWith(5, 11));
|
||||
await waitFor(() => expect(screen.queryByTestId('tour-packing-section')).not.toBeInTheDocument());
|
||||
});
|
||||
|
||||
it('FE-TOUR-PACKING-010: a failed read is said, with a retry', async () => {
|
||||
vi.mocked(tourPackingLinkRepo.read).mockRejectedValueOnce(new Error('500'));
|
||||
section();
|
||||
expect(await screen.findByText('The packing link could not be loaded.')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText('Retry'));
|
||||
expect(await screen.findByText('No packing list linked')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
import {
|
||||
linkedPackingItems,
|
||||
packingCategoriesOf,
|
||||
type LinkedPackingItems,
|
||||
type PackingCategoryChoice,
|
||||
type TourListItem,
|
||||
type TourPackingLink,
|
||||
} from '@trek/shared';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { translateApiError, useTranslation } from '../../../i18n';
|
||||
import { tourPackingLinkRepo } from '../../../repo/tourPackingLinkRepo';
|
||||
import { useAddonStore } from '../../../store/addonStore';
|
||||
import { useTripStore } from '../../../store/tripStore';
|
||||
import type { PackingItem } from '../../../types';
|
||||
import { packingCategoryOrder, packingViewItems } from '../../Packing/packingListModel';
|
||||
import { katColor } from '../../Packing/packingListPanel.helpers';
|
||||
import { useToast } from '../../shared/Toast';
|
||||
|
||||
/** The link as read for one tour, so a newer tour never shows an older tour's answer. */
|
||||
interface LinkAnswer {
|
||||
key: string;
|
||||
status: 'ready' | 'error';
|
||||
link: TourPackingLink | null;
|
||||
}
|
||||
|
||||
/** What the section shows: nothing known yet, the read failed, or the link as it reads now. */
|
||||
type TourPackingStatus = 'loading' | 'error' | 'ready';
|
||||
|
||||
/** A category the dialog offers, with the colour the packing list gives it. */
|
||||
interface TourPackingCategory extends PackingCategoryChoice {
|
||||
color: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* P2D-XD-01: the packing list a tour points at, for its detail. The link is
|
||||
* read through the offline core whenever the tour reloads (another traveller
|
||||
* may have changed it); the items come live from the trip's packing list as
|
||||
* this user may see it, so ticking an item off in Packing shows here at once.
|
||||
* The dialog chooses what to point at and writes only on its confirm; letting
|
||||
* go writes nothing to the packing list either.
|
||||
*/
|
||||
export function useTourPackingLink({ tripId, tour }: { tripId: number; tour: TourListItem }) {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const packingEnabled = useAddonStore((state) => state.isEnabled('packing'));
|
||||
const items = useTripStore((state) => state.packingItems);
|
||||
const placeId = tour.place_id;
|
||||
const key = `${tripId}:${placeId}`;
|
||||
const [answer, setAnswer] = useState<LinkAnswer | null>(null);
|
||||
const [reloads, setReloads] = useState(0);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [choice, setChoice] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
tourPackingLinkRepo.read(tripId, placeId, controller.signal).then(
|
||||
(link) => {
|
||||
if (!controller.signal.aborted) setAnswer({ key, status: 'ready', link });
|
||||
},
|
||||
() => {
|
||||
if (!controller.signal.aborted) setAnswer({ key, status: 'error', link: null });
|
||||
}
|
||||
);
|
||||
return () => controller.abort();
|
||||
// `tour` is replaced when the trip's tours reload, which is when the link may have changed elsewhere.
|
||||
}, [key, tripId, placeId, tour, reloads]);
|
||||
|
||||
const current = answer?.key === key ? answer : null;
|
||||
const status: TourPackingStatus = current?.status ?? 'loading';
|
||||
const link = current?.link ?? null;
|
||||
|
||||
const linked = useMemo<LinkedPackingItems<PackingItem> | null>(
|
||||
() => (link ? linkedPackingItems(link, items) : null),
|
||||
[link, items]
|
||||
);
|
||||
const defaultCategory = t('packing.defaultCategory');
|
||||
const categories = useMemo<TourPackingCategory[]>(() => {
|
||||
// The colours of the shared list, as the packing list shows it first.
|
||||
const order = packingCategoryOrder(packingViewItems(items, 'common'), defaultCategory);
|
||||
return packingCategoriesOf(items).map((category) => ({ ...category, color: katColor(category.name, order) }));
|
||||
}, [items, defaultCategory]);
|
||||
const wholeCount = useMemo(() => linkedPackingItems({ category: null }, items).items.length, [items]);
|
||||
const linkedColor = link?.category ? (categories.find((c) => c.name === link.category)?.color ?? null) : null;
|
||||
|
||||
const show = useCallback(() => {
|
||||
setChoice(link?.category ?? null);
|
||||
setOpen(true);
|
||||
}, [link]);
|
||||
const close = useCallback(() => {
|
||||
if (!saving) setOpen(false);
|
||||
}, [saving]);
|
||||
const retry = useCallback(() => setReloads((count) => count + 1), []);
|
||||
|
||||
const settle = async (write: () => Promise<TourPackingLink | null>, done: string) => {
|
||||
if (saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const next = await write();
|
||||
setAnswer({ key, status: 'ready', link: next });
|
||||
setOpen(false);
|
||||
toast.success(done);
|
||||
} catch (err: unknown) {
|
||||
toast.error(translateApiError(t, err, 'tours.packing.failed'));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
const confirm = () =>
|
||||
settle(() => tourPackingLinkRepo.link(tripId, placeId, { category: choice }), t('tours.packing.linked'));
|
||||
const unlink = () => settle(() => tourPackingLinkRepo.unlink(tripId, placeId), t('tours.packing.unlinked'));
|
||||
|
||||
/** The choice already is what the tour points at, so linking again would change nothing. */
|
||||
const unchanged = link !== null && link.category === choice;
|
||||
|
||||
return {
|
||||
packingEnabled,
|
||||
status,
|
||||
link,
|
||||
linked,
|
||||
linkedColor,
|
||||
categories,
|
||||
wholeCount,
|
||||
open,
|
||||
choice,
|
||||
saving,
|
||||
canConfirm: !saving && !unchanged,
|
||||
show,
|
||||
close,
|
||||
choose: setChoice,
|
||||
confirm,
|
||||
unlink,
|
||||
retry,
|
||||
};
|
||||
}
|
||||
|
||||
export type TourPackingLinkController = ReturnType<typeof useTourPackingLink>;
|
||||
Reference in New Issue
Block a user