mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
23b28a1f3f
Categories showed in the order they were created, which a list kept per day cannot undo once the days swap. A grip in each category's head band moves the whole category onto another's place on desktop. A category has no position of its own, it shows where its first item is, so the move reorders the items as one block through the item reorder the list already has: no new column, and the order reaches everyone the way a dragged item does. The other view's categories keep their order.
73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import type { PackingState } from './usePackingListPanel'
|
|
import { KategorieGruppe } from './PackingListPanelCategoryGroup'
|
|
import EmptyState from '../shared/EmptyState'
|
|
|
|
export function PackingList(S: PackingState) {
|
|
const {
|
|
items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory, handleDeleteItem,
|
|
handleAddItemToCategory, categoryAssignees, tripMembers, handleSetAssignees,
|
|
bagTrackingEnabled, bags, handleCreateBagByName, canEdit, reorderPackingItems,
|
|
currentUserId, handleSetSharing, handleCloneItem, handleJoinItem, handleLeaveItem, sort, moveCategory,
|
|
} = S
|
|
// Which category is being dragged and which card it is over. Held here, above
|
|
// the cards, because the drag starts in one card and ends in another.
|
|
const [draggedCategory, setDraggedCategory] = useState<string | null>(null)
|
|
const [overCategory, setOverCategory] = useState<string | null>(null)
|
|
const endCategoryDrag = () => { setDraggedCategory(null); setOverCategory(null) }
|
|
return (
|
|
<div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
|
|
{items.length === 0 ? (
|
|
<EmptyState scene="packing" title={t('packing.emptyTitle')} />
|
|
) : Object.keys(gruppiert).length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-faint)' }}>
|
|
<p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', margin: 0 }}>{t('packing.emptyFiltered')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{Object.entries(gruppiert).map(([kat, katItems]) => (
|
|
<KategorieGruppe
|
|
key={kat}
|
|
kategorie={kat}
|
|
items={katItems}
|
|
tripId={tripId}
|
|
allCategories={allCategories}
|
|
onRename={handleRenameCategory}
|
|
onDeleteAll={handleDeleteCategory}
|
|
onDeleteItem={handleDeleteItem}
|
|
onAddItem={handleAddItemToCategory}
|
|
assignees={categoryAssignees[kat] || []}
|
|
tripMembers={tripMembers}
|
|
onSetAssignees={handleSetAssignees}
|
|
bagTrackingEnabled={bagTrackingEnabled}
|
|
bags={bags}
|
|
onCreateBag={handleCreateBagByName}
|
|
canEdit={canEdit}
|
|
allItems={items}
|
|
onReorder={(orderedIds) => reorderPackingItems(tripId, orderedIds)}
|
|
reorderable={sort === 'manual'}
|
|
categoryDrag={canEdit ? {
|
|
active: draggedCategory !== null,
|
|
isDragging: draggedCategory === kat,
|
|
isOver: overCategory === kat && draggedCategory !== null && draggedCategory !== kat,
|
|
onStart: () => { setDraggedCategory(kat); setOverCategory(null) },
|
|
onOver: () => setOverCategory(kat),
|
|
onEnd: endCategoryDrag,
|
|
onDrop: () => {
|
|
if (draggedCategory !== null) moveCategory(draggedCategory, kat)
|
|
endCategoryDrag()
|
|
},
|
|
} : undefined}
|
|
currentUserId={currentUserId}
|
|
onSetSharing={handleSetSharing}
|
|
onClone={handleCloneItem}
|
|
onJoin={handleJoinItem}
|
|
onLeave={handleLeaveItem}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|