<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
<script>
let people = $state([
{ first: 'Hans', last: 'Emil' },
{ first: 'Max', last: 'Mustermann' },
{ first: 'Roman', last: 'Tisch' }
]);
let prefix = $state('');
let first = $state('');
let last = $state('');
let i = $state(0);
let filteredPeople = $derived(prefix
? people.filter((person) => {
const name = `${person.last}, ${person.first}`;
return name.toLowerCase().startsWith(prefix.toLowerCase());
})
: people);
let selected = $derived(filteredPeople[i]);
$effect(() => {
reset_inputs(selected);
});
function create() {
people = people.concat({ first, last });
i = people.length - 1;
first = last = '';
}
function update() {
selected.first = first;
selected.last = last;
people = people;