You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/examples/20-7guis/05-7guis-crud/App.svelte

105 lines
2.1 KiB

<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
<script>
let people = [
{
first: 'Hans',
last: 'Emil'
},
{
first: 'Max',
last: 'Mustermann'
},
{
first: 'Roman',
last: 'Tisch'
}
];
let prefix = '';
let first = '';
let last = '';
let i = 0;
6 years ago
$: filteredPeople = prefix
? people.map(person => {
6 years ago
const name = `${person.last}, ${person.first}`;
return { matched: name.toLowerCase().startsWith(prefix.toLowerCase()), person: person };
6 years ago
})
: people.map(person => Object({ matched: true, person: person }));
6 years ago
$: if (!filteredPeople[i].matched) {
let newIndex = filteredPeople.findIndex(person => person.matched);
if (newIndex >= 0) i = newIndex;
}
$: selected = filteredPeople[i].person;
6 years ago
$: reset_inputs(selected);
6 years ago
function create() {
people = people.concat({ first, last });
i = people.length - 1;
first = last = '';
}
function update() {
people[i] = { first, last };
}
function remove() {
// Remove selected person from the source array (people), not the filtered array
const index = people.indexOf(selected);
people = [...people.slice(0, index), ...people.slice(index + 1)];
first = last = '';
i = Math.min(i, filteredPeople.length - 2);
}
6 years ago
function reset_inputs(person) {
first = person ? person.first : '';
last = person ? person.last : '';
}
</script>
<style>
* {
font-family: inherit;
font-size: inherit;
}
input {
display: block;
margin: 0 0 0.5em 0;
}
select {
float: left;
margin: 0 1em 1em 0;
width: 14em;
}
.buttons {
clear: both;
}
</style>
<input placeholder="filter prefix" bind:value={prefix}>
<select bind:value={i} size={5}>
{#each filteredPeople as { matched, person }, i}
{#if matched}
<option value={i}>{person.last}, {person.first}</option>
{/if}
{/each}
</select>
<label><input bind:value={first} placeholder="first"></label>
<label><input bind:value={last} placeholder="last"></label>
<div class='buttons'>
<button on:click={create} disabled="{!first || !last}">create</button>
<button on:click={update} disabled="{!first || !last || !selected}">update</button>
<button on:click={remove} disabled="{!selected}">delete</button>
</div>