k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-21 06:26:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packing): print, PDF and Markdown/CSV export of packing lists

Browse Source 
The packing list bar gets an export menu next to the import button, both
now icon only. The menu prints the open view as a TREK styled page (trip,
dates, packed count, one card per category, bags), which the browser can
also save as a PDF, and downloads it as a Markdown checklist or as a CSV
in the exact format the import reads, bags included, so a list works as a
personal template without admin rights.

The import now also reads Markdown checklists: headings become
categories, "- [x]" marks an item packed, a "3x" prefix sets the
quantity and a "(200 g)" suffix the weight. The phone action sheet
offers the same exports through the shared usePackingExport hook.

The help center gets an export guide with new pictures, the import guide
and the wiki page describe the Markdown format, in all 27 languages.

Addresses discussions #1420 and #875.
This commit is contained in:
Maurice
2026-09-25 11:31:23 +02:00
parent 2a8071f642
commit 5c312a8497
106 changed files with 2148 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Packing/PackingListPanelImportModal.tsx
+7 -2
View File
@@ -1,6 +1,7 @@
import { createPortal } from 'react-dom'
import { FileDown } from 'lucide-react'
import type { PackingState } from './usePackingListPanel'
import { PACKING_IMPORT_ACCEPT } from './packingListPanel.constants'
export function BulkImportModal(S: PackingState) {
const { setShowImportModal, t, importText, setImportText, csvInputRef, handleCsvFile, handleBulkImport, parseImportLines } = S
@@ -16,7 +17,11 @@ export function BulkImportModal(S: PackingState) {
display: 'flex', flexDirection: 'column', gap: 14,
}}>
<div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
<div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
<div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', lineHeight: 1.5 }}>
{t('packing.importHint')}
<br />
{t('packing.importHintMarkdown')}
</div>
<div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
<div style={{
padding: '10px 0', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'monospace', lineHeight: 1.5,
@@ -42,7 +47,7 @@ export function BulkImportModal(S: PackingState) {
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div>
<input ref={csvInputRef} type="file" accept=".csv,.txt" style={{ display: 'none' }} onChange={handleCsvFile} />
<input ref={csvInputRef} type="file" accept={PACKING_IMPORT_ACCEPT} style={{ display: 'none' }} onChange={handleCsvFile} />
<button type="button" onClick={() => csvInputRef.current?.click()} style={{
display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px',
border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',