From 4918faf605bf94027a626407c938e53945b8e347 Mon Sep 17 00:00:00 2001
From: Shunichi Hato <shunichi@meuron.jp>
Date: Thu, 31 Oct 2019 17:28:56 +0900
Subject: [PATCH 1/3] Fix crud example update error when filtering
because the index `i` in update refers to the index in the original
---
.../examples/20-7guis/05-7guis-crud/App.svelte | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index f55aeb0d83..68574bca43 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -22,13 +22,13 @@
let i = 0;
$: filteredPeople = prefix
- ? people.filter(person => {
+ ? people.map(person => {
const name = `${person.last}, ${person.first}`;
- return name.toLowerCase().startsWith(prefix.toLowerCase());
+ return { matched: name.toLowerCase().startsWith(prefix.toLowerCase()), person: person };
})
- : people;
+ : people.map(person => Object({ matched: true, person: person }));
- $: selected = filteredPeople[i];
+ $: selected = filteredPeople[i].person;
$: reset_inputs(selected);
@@ -82,8 +82,10 @@
<input placeholder="filter prefix" bind:value={prefix}>
<select bind:value={i} size={5}>
- {#each filteredPeople as person, i}
+ {#each filteredPeople as { matched, person }, i}
+ {#if matched}
<option value={i}>{person.last}, {person.first}</option>
+ {/if}
{/each}
</select>
From b704531a2eca63c0c4afad432c63a1aeda9c6f83 Mon Sep 17 00:00:00 2001
From: Shunichi Hato <shunichi@meuron.jp>
Date: Sun, 3 Nov 2019 13:58:35 +0900
Subject: [PATCH 2/3] Make selection reactive with search
---
site/content/examples/20-7guis/05-7guis-crud/App.svelte | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index 68574bca43..67145ceec7 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -28,6 +28,11 @@
})
: people.map(person => Object({ matched: true, person: person }));
+ $: if (!filteredPeople[i].matched) {
+ let newIndex = filteredPeople.findIndex(person => person.matched);
+ if (newIndex >= 0) i = newIndex;
+ }
+
$: selected = filteredPeople[i].person;
$: reset_inputs(selected);
From 3889ec499e21216614200927288856cab42c4453 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 14 Nov 2019 16:55:34 -0500
Subject: [PATCH 3/3] simpler fix
---
.../20-7guis/05-7guis-crud/App.svelte | 36 ++++++-------------
1 file changed, 11 insertions(+), 25 deletions(-)
diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index 67145ceec7..aec623d2a4 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -2,18 +2,9 @@
<script>
let people = [
- {
- first: 'Hans',
- last: 'Emil'
- },
- {
- first: 'Max',
- last: 'Mustermann'
- },
- {
- first: 'Roman',
- last: 'Tisch'
- }
+ { first: 'Hans', last: 'Emil' },
+ { first: 'Max', last: 'Mustermann' },
+ { first: 'Roman', last: 'Tisch' }
];
let prefix = '';
@@ -22,18 +13,13 @@
let i = 0;
$: filteredPeople = prefix
- ? people.map(person => {
+ ? people.filter(person => {
const name = `${person.last}, ${person.first}`;
- return { matched: name.toLowerCase().startsWith(prefix.toLowerCase()), person: person };
+ return name.toLowerCase().startsWith(prefix.toLowerCase());
})
- : people.map(person => Object({ matched: true, person: person }));
+ : people;
- $: if (!filteredPeople[i].matched) {
- let newIndex = filteredPeople.findIndex(person => person.matched);
- if (newIndex >= 0) i = newIndex;
- }
-
- $: selected = filteredPeople[i].person;
+ $: selected = filteredPeople[i];
$: reset_inputs(selected);
@@ -44,7 +30,9 @@
}
function update() {
- people[i] = { first, last };
+ selected.first = first;
+ selected.last = last;
+ people = people;
}
function remove() {
@@ -87,10 +75,8 @@
<input placeholder="filter prefix" bind:value={prefix}>
<select bind:value={i} size={5}>
- {#each filteredPeople as { matched, person }, i}
- {#if matched}
+ {#each filteredPeople as person, i}
<option value={i}>{person.last}, {person.first}</option>
- {/if}
{/each}
</select>