Fix updates in CRUD example

Real-time updates and search

site/content/examples/19-7guis/05-7guis-crud/App.svelte

@@ -16,45 +16,25 @@
 		}
 	];
 
-	let prefix = '';
+	let query = '';
-	let first = '';
-	let last = '';
 	let i = 0;
 
-	$: filteredPeople = prefix
+	$: filteredPeople = query ? people.filter(person => {
-		? people.filter(person => {
+			const name = `${person.first} ${person.last}`;
-			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-			return name.toLowerCase().startsWith(prefix.toLowerCase());
+		}) : people;
-		})
-		: people;
 
-	$: selected = filteredPeople[i];
+	$: selected = filteredPeople[i] ? filteredPeople[i] : { first: '', last: '' };
-
-	$: {
-		first = selected ? selected.first : '';
-		last = selected ? selected.last : '';
-	}
 
 	function create() {
-		people = people.concat({ first, last });
+		people = people.concat({ first: "PLACE", last: "HODL"});
 		i = people.length - 1;
-		first = last = '';
-	}
-
-	function update() {
-		people[i] = { first, last };
 	}
 
 	function remove() {
 		people = [...people.slice(0, i), ...people.slice(i + 1)];
-
-		first = last = '';
 		i = Math.min(i, people.length - 1);
 	}
-
-	function reset_inputs(person) {
-		({ first, last } = person);
-	}
 </script>
 
 <style>
@@ -71,7 +51,8 @@
 	select {
 		float: left;
 		margin: 0 1em 1em 0;
-		width: 14em;
+		width: 10em;
+		font-size: 1.618em;
 	}
 
 	.buttons {
@@ -79,19 +60,25 @@
 	}
 </style>
 
-<input placeholder="filter prefix" bind:value={prefix}>
+<select bind:value={i}>
-
-<select bind:value={i} size={5}>
 	{#each filteredPeople as person, i}
-		<option value={i}>{person.last}, {person.first}</option>
+		<option value={i}>{person.first} {person.last}</option>
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first"></label>
+<p>
-<label><input bind:value={last} placeholder="last"></label>
+	<br />
+	<br />
+</p>
+
+<input placeholder="search" bind:value={query}>
+
+<br />
+<label><input bind:value={selected.first} placeholder="first"></label>
+<label><input bind:value={selected.last} placeholder="last"></label>
+<br />
 
 <div class='buttons'>
-	<button on:click={create} disabled="{!first || !last}">create</button>
+	<button on:click={create}>create</button>
-	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
 	<button on:click={remove} disabled="{!selected}">delete</button>
 </div>