feat: drag & drop razeni polozek pri vytvareni faktury
Nahrazeny tlacitka nahoru/dolu za @dnd-kit drag & drop (SortableRow + DragHandle), stejny pattern jako v nabidkach. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,11 @@ import Forbidden from '../components/Forbidden'
|
||||
import FormField from '../components/FormField'
|
||||
import AdminDatePicker from '../components/AdminDatePicker'
|
||||
import { motion } from 'framer-motion'
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
|
||||
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
|
||||
import SortableRow, { DragHandle } from '../components/SortableRow'
|
||||
import useSortableList from '../hooks/useSortableList'
|
||||
import apiFetch from '../utils/api'
|
||||
import { formatCurrency } from '../utils/formatters'
|
||||
|
||||
@@ -315,15 +320,12 @@ export default function InvoiceCreate() {
|
||||
setItems(prev => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const moveItem = (index, direction) => {
|
||||
setItems(prev => {
|
||||
const newItems = [...prev]
|
||||
const target = index + direction
|
||||
if (target < 0 || target >= newItems.length) return prev
|
||||
;[newItems[index], newItems[target]] = [newItems[target], newItems[index]]
|
||||
return newItems
|
||||
})
|
||||
}
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
|
||||
useSensor(KeyboardSensor)
|
||||
)
|
||||
const { handleDragEnd } = useSortableList(setItems, '_key')
|
||||
|
||||
// Totals
|
||||
const totals = useMemo(() => {
|
||||
@@ -651,105 +653,114 @@ export default function InvoiceCreate() {
|
||||
</div>
|
||||
|
||||
<div className="offers-items-table">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '2.5rem', textAlign: 'center' }}>#</th>
|
||||
<th>Popis</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
|
||||
{form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
|
||||
<th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item, index) => {
|
||||
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
||||
return (
|
||||
<tr key={item._key || index}>
|
||||
<td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.description}
|
||||
onChange={(e) => updateItem(index, 'description', e.target.value)}
|
||||
className="admin-form-input"
|
||||
placeholder="Popis položky..."
|
||||
style={{ fontWeight: 500 }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) => updateItem(index, 'quantity', e.target.value)}
|
||||
className="admin-form-input"
|
||||
min="0"
|
||||
step="any"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.unit}
|
||||
onChange={(e) => updateItem(index, 'unit', e.target.value)}
|
||||
className="admin-form-input"
|
||||
placeholder="ks"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value={item.unit_price}
|
||||
onChange={(e) => updateItem(index, 'unit_price', e.target.value)}
|
||||
className="admin-form-input"
|
||||
step="any"
|
||||
style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
{form.apply_vat ? (
|
||||
<td>
|
||||
<select
|
||||
value={item.vat_rate}
|
||||
onChange={(e) => updateItem(index, 'vat_rate', Number(e.target.value))}
|
||||
className="admin-form-input"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
>
|
||||
{VAT_OPTIONS.map(o => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
) : null}
|
||||
<td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
||||
{formatCurrency(lineTotal, form.currency)}
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '0.125rem', justifyContent: 'center' }}>
|
||||
<button type="button" onClick={() => moveItem(index, -1)} disabled={index === 0} className="admin-btn-icon" title="Nahoru" aria-label="Nahoru">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 15l-6-6-6 6" /></svg>
|
||||
</button>
|
||||
<button type="button" onClick={() => moveItem(index, 1)} disabled={index === items.length - 1} className="admin-btn-icon" title="Dolů" aria-label="Dolů">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
|
||||
</button>
|
||||
{items.length > 1 && (
|
||||
<button type="button" onClick={() => removeItem(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
modifiers={[restrictToVerticalAxis]}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '2rem' }}></th>
|
||||
<th style={{ width: '2rem', textAlign: 'center' }}>#</th>
|
||||
<th>Popis</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
|
||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
|
||||
{form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
|
||||
<th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
|
||||
<th style={{ width: '2.5rem' }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<SortableContext items={items.map(i => String(i._key))} strategy={verticalListSortingStrategy}>
|
||||
<tbody>
|
||||
{items.map((item, index) => {
|
||||
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
||||
return (
|
||||
<SortableRow key={item._key} id={String(item._key)}>
|
||||
{({ attributes, listeners }) => (
|
||||
<>
|
||||
<td style={{ width: '2rem' }}>
|
||||
<DragHandle listeners={listeners} attributes={attributes} />
|
||||
</td>
|
||||
<td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.description}
|
||||
onChange={(e) => updateItem(index, 'description', e.target.value)}
|
||||
className="admin-form-input"
|
||||
placeholder="Popis položky..."
|
||||
style={{ fontWeight: 500 }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value={item.quantity}
|
||||
onChange={(e) => updateItem(index, 'quantity', e.target.value)}
|
||||
className="admin-form-input"
|
||||
min="0"
|
||||
step="any"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.unit}
|
||||
onChange={(e) => updateItem(index, 'unit', e.target.value)}
|
||||
className="admin-form-input"
|
||||
placeholder="ks"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value={item.unit_price}
|
||||
onChange={(e) => updateItem(index, 'unit_price', e.target.value)}
|
||||
className="admin-form-input"
|
||||
step="any"
|
||||
style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</td>
|
||||
{form.apply_vat ? (
|
||||
<td>
|
||||
<select
|
||||
value={item.vat_rate}
|
||||
onChange={(e) => updateItem(index, 'vat_rate', Number(e.target.value))}
|
||||
className="admin-form-input"
|
||||
style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}
|
||||
>
|
||||
{VAT_OPTIONS.map(o => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
) : null}
|
||||
<td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
||||
{formatCurrency(lineTotal, form.currency)}
|
||||
</td>
|
||||
<td>
|
||||
{items.length > 1 && (
|
||||
<button type="button" onClick={() => removeItem(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</SortableRow>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</SortableContext>
|
||||
</table>
|
||||
</DndContext>
|
||||
</div>
|
||||
|
||||
{/* Soucty */}
|
||||
|
||||
Reference in New Issue
Block a user