lvl0/buckets
1
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

18 - Add inline editing for name, allocation type, and allocation value

Browse source
This commit is contained in:
myrmidex 2026-03-22 02:05:43 +01:00
parent 81bd3880ec
commit aca9644c5b
1 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
resources/js/pages/Scenarios/Show.tsx
View file

@ -71,6 +71,11 @@ const bucketTypeOptions = [
{ value: 'want', label: 'Want' },
];
const allocationTypeOptions = [
{ value: 'fixed_limit', label: 'Fixed Limit' },
{ value: 'percentage', label: 'Percentage' },
];
/** Convert cents to dollars for display */
const centsToDollars = (cents: number): number => cents / 100;
@ -269,7 +274,11 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900">
{bucket.name}
<InlineEditInput
type="text"
value={bucket.name}
onSave={(val) => patchBucket(bucket.id, { name: val })}
/>
</h3>
<p className="text-sm text-gray-600 mt-1">
Priority {bucket.priority} •{' '}
@ -280,7 +289,14 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
displayLabel={bucket.type_label}
disabled={bucket.type === 'overflow'}
/>
{' '}• {bucket.allocation_type_label}
{' '}•{' '}
<InlineEditSelect
value={bucket.allocation_type}
options={allocationTypeOptions}
onSave={(val) => patchBucket(bucket.id, { allocation_type: val, allocation_value: null })}
displayLabel={bucket.allocation_type_label}
disabled={bucket.type === 'overflow'}
/>
</p>
</div>
<div className="flex items-center gap-1">
@ -325,7 +341,26 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
<div className="mt-2">
<span className="text-sm text-gray-600">
Allocation: {formatAllocationValue(bucket)}
Allocation:{' '}
{bucket.allocation_type === 'fixed_limit' && bucket.allocation_value !== null ? (
<InlineEditInput
value={centsToDollars(bucket.allocation_value)}
onSave={(val) => patchBucket(bucket.id, { allocation_value: dollarsToCents(val) })}
formatDisplay={(v) => `$${v.toFixed(2)}`}
min={0}
step="0.01"
/>
) : bucket.allocation_type === 'percentage' && bucket.allocation_value !== null ? (
<InlineEditInput
value={basisPointsToPercent(bucket.allocation_value)}
onSave={(val) => patchBucket(bucket.id, { allocation_value: percentToBasisPoints(val) })}
formatDisplay={(v) => `${v.toFixed(2)}%`}
min={0}
step="0.01"
/>
) : (
formatAllocationValue(bucket)
)}
</span>
{bucket.allocation_type === 'fixed_limit' && (
<span className="text-sm text-gray-500 ml-2">