feat(01-04): create ItemAssign component for assigning people

- Multi-select checkbox UI for each person
- Reflects current assignment state
- Toggles person on/off when clicked
- Calls store.setAssignment on change
- Shows hint when no people added
This commit is contained in:
2026-03-12 02:50:57 +00:00
parent f3214341f0
commit 24f5fc14b2
+34
View File
@@ -0,0 +1,34 @@
import { store } from '../../store/billStore.js';
export function ItemAssign({ item }) {
const assignedTo = store.getAssignedPeople(item.id);
const togglePerson = (personId) => {
const current = assignedTo.includes(personId)
? assignedTo.filter(id => id !== personId)
: [...assignedTo, personId];
store.setAssignment(item.id, current);
};
const people = store.people.value;
if (people.length === 0) {
return <p class="hint">Add people first to assign items</p>;
}
return (
<div class="item-assign">
<span class="assign-label">Split between:</span>
{people.map((person) => (
<label key={person.id} class="checkbox-label">
<input
type="checkbox"
checked={assignedTo.includes(person.id)}
onChange={() => togglePerson(person.id)}
/>
{person.name}
</label>
))}
</div>
);
}