mirror of
https://github.com/tiennm99/gsd-framework.git
synced 2026-07-17 00:17:09 +00:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user