fix(offline): cache accommodations, trip members, tags, and categories for full offline support

This commit is contained in:
jubnl
2026-04-14 23:50:52 +02:00
parent 85d72c831d
commit 4e3b27c712
6 changed files with 94 additions and 12 deletions
+38 -1
View File
@@ -1,5 +1,10 @@
import Dexie, { type Table } from 'dexie'; import Dexie, { type Table } from 'dexie';
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile } from '../types'; import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile, Accommodation, TripMember, Tag, Category } from '../types';
/** TripMember enriched with tripId so we can index by trip. */
export interface CachedTripMember extends TripMember {
tripId: number;
}
// ── Queue + sync types ──────────────────────────────────────────────────────── // ── Queue + sync types ────────────────────────────────────────────────────────
@@ -52,6 +57,10 @@ class TrekOfflineDb extends Dexie {
budgetItems!: Table<BudgetItem, number>; budgetItems!: Table<BudgetItem, number>;
reservations!: Table<Reservation, number>; reservations!: Table<Reservation, number>;
tripFiles!: Table<TripFile, number>; tripFiles!: Table<TripFile, number>;
accommodations!: Table<Accommodation, number>;
tripMembers!: Table<CachedTripMember, [number, number]>;
tags!: Table<Tag, number>;
categories!: Table<Category, number>;
mutationQueue!: Table<QueuedMutation, string>; mutationQueue!: Table<QueuedMutation, string>;
syncMeta!: Table<SyncMeta, number>; syncMeta!: Table<SyncMeta, number>;
blobCache!: Table<BlobCacheEntry, string>; blobCache!: Table<BlobCacheEntry, string>;
@@ -72,6 +81,13 @@ class TrekOfflineDb extends Dexie {
syncMeta: 'tripId', syncMeta: 'tripId',
blobCache: 'url, cachedAt', blobCache: 'url, cachedAt',
}); });
this.version(2).stores({
accommodations: 'id, trip_id',
tripMembers: '[tripId+id], tripId',
tags: 'id',
categories: 'id',
});
} }
} }
@@ -111,6 +127,23 @@ export async function upsertTripFiles(files: TripFile[]): Promise<void> {
await offlineDb.tripFiles.bulkPut(files); await offlineDb.tripFiles.bulkPut(files);
} }
export async function upsertAccommodations(items: Accommodation[]): Promise<void> {
await offlineDb.accommodations.bulkPut(items);
}
export async function upsertTripMembers(tripId: number, members: TripMember[]): Promise<void> {
const rows: CachedTripMember[] = members.map(m => ({ ...m, tripId }));
await offlineDb.tripMembers.bulkPut(rows);
}
export async function upsertTags(tags: Tag[]): Promise<void> {
await offlineDb.tags.bulkPut(tags);
}
export async function upsertCategories(categories: Category[]): Promise<void> {
await offlineDb.categories.bulkPut(categories);
}
export async function upsertSyncMeta(meta: SyncMeta): Promise<void> { export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
await offlineDb.syncMeta.put(meta); await offlineDb.syncMeta.put(meta);
} }
@@ -129,6 +162,8 @@ export async function clearTripData(tripId: number): Promise<void> {
offlineDb.budgetItems, offlineDb.budgetItems,
offlineDb.reservations, offlineDb.reservations,
offlineDb.tripFiles, offlineDb.tripFiles,
offlineDb.accommodations,
offlineDb.tripMembers,
offlineDb.mutationQueue, offlineDb.mutationQueue,
offlineDb.syncMeta, offlineDb.syncMeta,
], ],
@@ -140,6 +175,8 @@ export async function clearTripData(tripId: number): Promise<void> {
await offlineDb.budgetItems.where('trip_id').equals(tripId).delete(); await offlineDb.budgetItems.where('trip_id').equals(tripId).delete();
await offlineDb.reservations.where('trip_id').equals(tripId).delete(); await offlineDb.reservations.where('trip_id').equals(tripId).delete();
await offlineDb.tripFiles.where('trip_id').equals(tripId).delete(); await offlineDb.tripFiles.where('trip_id').equals(tripId).delete();
await offlineDb.accommodations.where('trip_id').equals(tripId).delete();
await offlineDb.tripMembers.where('tripId').equals(tripId).delete();
await offlineDb.mutationQueue.where('tripId').equals(tripId).delete(); await offlineDb.mutationQueue.where('tripId').equals(tripId).delete();
await offlineDb.syncMeta.where('tripId').equals(tripId).delete(); await offlineDb.syncMeta.where('tripId').equals(tripId).delete();
}, },
+13 -6
View File
@@ -26,6 +26,8 @@ import { useToast } from '../components/shared/Toast'
import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users } from 'lucide-react' import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users } from 'lucide-react'
import { useTranslation } from '../i18n' import { useTranslation } from '../i18n'
import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client' import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client'
import { accommodationRepo } from '../repo/accommodationRepo'
import { offlineDb } from '../db/offlineDb'
import ConfirmDialog from '../components/shared/ConfirmDialog' import ConfirmDialog from '../components/shared/ConfirmDialog'
import { useResizablePanels } from '../hooks/useResizablePanels' import { useResizablePanels } from '../hooks/useResizablePanels'
import { useTripWebSocket } from '../hooks/useTripWebSocket' import { useTripWebSocket } from '../hooks/useTripWebSocket'
@@ -104,7 +106,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
const loadAccommodations = useCallback(() => { const loadAccommodations = useCallback(() => {
if (tripId) { if (tripId) {
accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {}) accommodationRepo.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
tripActions.loadReservations(tripId) tripActions.loadReservations(tripId)
} }
}, [tripId]) }, [tripId])
@@ -192,11 +194,16 @@ export default function TripPlannerPage(): React.ReactElement | null {
tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') }) tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
tripActions.loadFiles(tripId) tripActions.loadFiles(tripId)
loadAccommodations() loadAccommodations()
tripsApi.getMembers(tripId).then(d => { if (!navigator.onLine) {
// Combine owner + members into one list offlineDb.tripMembers.where('tripId').equals(Number(tripId)).toArray()
const all = [d.owner, ...(d.members || [])].filter(Boolean) .then(rows => setTripMembers(rows))
setTripMembers(all) .catch(() => {})
}).catch(() => {}) } else {
tripsApi.getMembers(tripId).then(d => {
const all = [d.owner, ...(d.members || [])].filter(Boolean)
setTripMembers(all)
}).catch(() => {})
}
} }
}, [tripId]) }, [tripId])
+16
View File
@@ -0,0 +1,16 @@
import { accommodationsApi } from '../api/client'
import { offlineDb, upsertAccommodations } from '../db/offlineDb'
import type { Accommodation } from '../types'
export const accommodationRepo = {
async list(tripId: number | string): Promise<{ accommodations: Accommodation[] }> {
if (!navigator.onLine) {
const accommodations = await offlineDb.accommodations
.where('trip_id').equals(Number(tripId)).toArray()
return { accommodations }
}
const result = await accommodationsApi.list(tripId)
upsertAccommodations(result.accommodations || []).catch(() => {})
return result
},
}
+7 -2
View File
@@ -1,6 +1,7 @@
import { create } from 'zustand' import { create } from 'zustand'
import type { StoreApi } from 'zustand' import type { StoreApi } from 'zustand'
import { tripsApi, tagsApi, categoriesApi } from '../api/client' import { tripsApi, tagsApi, categoriesApi } from '../api/client'
import { offlineDb } from '../db/offlineDb'
import { tripRepo } from '../repo/tripRepo' import { tripRepo } from '../repo/tripRepo'
import { dayRepo } from '../repo/dayRepo' import { dayRepo } from '../repo/dayRepo'
import { placeRepo } from '../repo/placeRepo' import { placeRepo } from '../repo/placeRepo'
@@ -94,8 +95,12 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
placeRepo.list(tripId), placeRepo.list(tripId),
packingRepo.list(tripId), packingRepo.list(tripId),
todoRepo.list(tripId), todoRepo.list(tripId),
tagsApi.list().catch(() => ({ tags: [] })), navigator.onLine
categoriesApi.list().catch(() => ({ categories: [] })), ? tagsApi.list().catch(() => offlineDb.tags.toArray().then(tags => ({ tags })))
: offlineDb.tags.toArray().then(tags => ({ tags })),
navigator.onLine
? categoriesApi.list().catch(() => offlineDb.categories.toArray().then(categories => ({ categories })))
: offlineDb.categories.toArray().then(categories => ({ categories })),
]) ])
const assignmentsMap: AssignmentsMap = {} const assignmentsMap: AssignmentsMap = {}
+14 -2
View File
@@ -10,7 +10,7 @@
* - trip list refresh (DashboardPage) * - trip list refresh (DashboardPage)
* - WS reconnect (phase 7) * - WS reconnect (phase 7)
*/ */
import { tripsApi } from '../api/client' import { tripsApi, tagsApi, categoriesApi } from '../api/client'
import { import {
offlineDb, offlineDb,
upsertTrip, upsertTrip,
@@ -21,12 +21,16 @@ import {
upsertBudgetItems, upsertBudgetItems,
upsertReservations, upsertReservations,
upsertTripFiles, upsertTripFiles,
upsertAccommodations,
upsertTripMembers,
upsertTags,
upsertCategories,
upsertSyncMeta, upsertSyncMeta,
clearTripData, clearTripData,
} from '../db/offlineDb' } from '../db/offlineDb'
import { prefetchTilesForTrip } from './tilePrefetcher' import { prefetchTilesForTrip } from './tilePrefetcher'
import { useSettingsStore } from '../store/settingsStore' import { useSettingsStore } from '../store/settingsStore'
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile } from '../types' import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile, Accommodation, TripMember } from '../types'
// ── Types ───────────────────────────────────────────────────────────────────── // ── Types ─────────────────────────────────────────────────────────────────────
@@ -39,6 +43,8 @@ interface TripBundle {
budgetItems: BudgetItem[] budgetItems: BudgetItem[]
reservations: Reservation[] reservations: Reservation[]
files: TripFile[] files: TripFile[]
accommodations: Accommodation[]
members: TripMember[]
} }
// ── Helpers ─────────────────────────────────────────────────────────────────── // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -77,6 +83,8 @@ async function syncTrip(tripId: number): Promise<void> {
await upsertBudgetItems(bundle.budgetItems) await upsertBudgetItems(bundle.budgetItems)
await upsertReservations(bundle.reservations) await upsertReservations(bundle.reservations)
await upsertTripFiles(bundle.files) await upsertTripFiles(bundle.files)
await upsertAccommodations(bundle.accommodations || [])
await upsertTripMembers(tripId, bundle.members || [])
await upsertSyncMeta({ await upsertSyncMeta({
tripId, tripId,
lastSyncedAt: Date.now(), lastSyncedAt: Date.now(),
@@ -145,6 +153,10 @@ export const tripSyncManager = {
} }
} }
// Cache global user data (tags + categories) — fire-and-forget
tagsApi.list().then(d => upsertTags(d.tags)).catch(() => {})
categoriesApi.list().then(d => upsertCategories(d.categories)).catch(() => {})
// Cache file blobs + map tiles in background (don't block syncAll) // Cache file blobs + map tiles in background (don't block syncAll)
const tileUrl = useSettingsStore.getState().settings.map_tile_url || undefined const tileUrl = useSettingsStore.getState().settings.map_tile_url || undefined
for (const trip of toSync) { for (const trip of toSync) {
+6 -1
View File
@@ -29,7 +29,7 @@ import {
ValidationError, ValidationError,
TRIP_SELECT, TRIP_SELECT,
} from '../services/tripService'; } from '../services/tripService';
import { listDays } from '../services/dayService'; import { listDays, listAccommodations } from '../services/dayService';
import { listPlaces } from '../services/placeService'; import { listPlaces } from '../services/placeService';
import { listItems as listPackingItems } from '../services/packingService'; import { listItems as listPackingItems } from '../services/packingService';
import { listItems as listTodoItems } from '../services/todoService'; import { listItems as listTodoItems } from '../services/todoService';
@@ -318,6 +318,9 @@ router.get('/:id/bundle', authenticate, (req: Request, res: Response) => {
const budgetItems = listBudgetItems(tripId); const budgetItems = listBudgetItems(tripId);
const reservations = listReservations(tripId); const reservations = listReservations(tripId);
const files = listFiles(tripId, false); const files = listFiles(tripId, false);
const accommodations = listAccommodations(tripId);
const { owner, members } = listMembers(tripId, trip.user_id);
const allMembers = [owner, ...(members || [])].filter(Boolean);
res.json({ res.json({
trip, trip,
@@ -328,6 +331,8 @@ router.get('/:id/bundle', authenticate, (req: Request, res: Response) => {
budgetItems, budgetItems,
reservations, reservations,
files, files,
accommodations,
members: allMembers,
}); });
}); });