fix crud example

site/content/examples/7guis-crud/App.html

@@ -1,25 +1,17 @@
+<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
+
 <script>
 	import { beforeUpdate } from 'svelte';
 
 	export let people = [];
 
+	let filteredPeople;
+	let selected;
 	let prefix = '';
 	let first = '';
 	let last = '';
 	let i = 0;
 
-	const filteredPeople = () => {
-		if (!prefix) return people;
-
-		prefix = prefix.toLowerCase();
-		return people.filter(person => {
-			const name = `${person.last}, ${person.first}`;
-			return name.toLowerCase().startsWith(prefix);
-		});
-	};
-
-	const selected = () => filteredPeople()[i];
-
 	function create() {
 		people = people.concat({ first, last });
 		i = people.length - 1;
@@ -31,39 +23,26 @@
 	}
 
 	function remove() {
-		people.splice(i, 1);
-		people = people;
+		people = [...people.slice(0, i), ...people.slice(i + 1)];
 
 		first = last = '';
 		i = Math.min(i, people.length - 1);
 	}
 
-	beforeUpdate(() => {
-		const person = selected();
-		if (person) {
-			first = person.first;
-			last = person.last;
-		}
-	});
-</script>
-
-<!-- https://github.com/eugenkiss/7guis/wiki#crud -->
-<input placeholder="filter prefix" bind:value={prefix}>
-
-<select bind:value={i} size={5}>
-	{#each filteredPeople as person, i}
-		<option value={i}>{person.last}, {person.first}</option>
-	{/each}
-</select>
+	$: filteredPeople = prefix
+		? people.filter(person => {
+			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().startsWith(prefix.toLowerCase());
+		})
+		: people;
 
-<label><input bind:value={first} placeholder="first"></label>
-<label><input bind:value={last} placeholder="last"></label>
+	$: selected = filteredPeople[i];
 
-<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>
+	$: if (selected) {
+		first = selected.first;
+		last = selected.last;
+	}
+</script>
 
 <style>
 	* {
@@ -85,4 +64,21 @@
 	.buttons {
 		clear: both;
 	}
-</style>
+</style>
+
+<input placeholder="filter prefix" bind:value={prefix}>
+
+<select bind:value={i} size={5}>
+	{#each filteredPeople as person, i}
+		<option value={i}>{person.last}, {person.first}</option>
+	{/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>