From 1166b88d259fd1803a0efb5f79ee537252f9ff56 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Tue, 24 Sep 2024 14:49:23 +0200 Subject: [PATCH 1/9] add data and search capability to milestonegroup --- .../DataDisplay/GalleryDisplay.svelte | 70 +++++-- .../src/lib/components/MilestoneGroup.svelte | 22 +-- .../src/routes/milestonegroup/+page.svelte | 182 ++++++++++++++++-- 3 files changed, 232 insertions(+), 42 deletions(-) diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte index bc25430a..5a2af116 100644 --- a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte +++ b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte @@ -1,13 +1,7 @@
- +
From 1e07b00b638988d90014a83abf3f9f0ec14d5765 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Tue, 24 Sep 2024 15:13:24 +0200 Subject: [PATCH 2/9] remove debug output, add search categories to milestoneoverview --- .../DataDisplay/GalleryDisplay.svelte | 9 +- .../lib/components/MilestoneOverview.svelte | 23 +---- .../src/routes/milestonegroup/+page.svelte | 5 - .../src/routes/milestoneoverview/+page.svelte | 94 ++++++++++++++++++- 4 files changed, 104 insertions(+), 27 deletions(-) diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte index 5a2af116..e96dd79d 100644 --- a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte +++ b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte @@ -81,13 +81,18 @@ {:else} - + {/if} {/if} diff --git a/frontend/src/lib/components/MilestoneOverview.svelte b/frontend/src/lib/components/MilestoneOverview.svelte index fe8de1e8..a83a9d9a 100644 --- a/frontend/src/lib/components/MilestoneOverview.svelte +++ b/frontend/src/lib/components/MilestoneOverview.svelte @@ -5,23 +5,6 @@ import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte'; import { CheckCircleSolid, ExclamationCircleSolid } from 'flowbite-svelte-icons'; - function filterData(data: object[], dummy: any, key: string): object[] { - if (key === '') { - return data; - } else { - return data.filter((item) => { - // button label contains info about completion status => use for search - if (key === completeKey) { - return item.complete === true; - } else if (key === incompleteKey) { - return item.complete === false; - } else { - return item.header.toLowerCase().includes(key.toLowerCase()); - } - }); - } - } - // FIXME: this must go eventually. Either must happen in the backend or there // should be in a refactored version of the card component function convertData(data: object[]): object[] { @@ -30,6 +13,8 @@ header: item.title, href: `${base}/milestone`, // hardcoded link for the moment complete: item.answer !== null, + summary: item.desc, + answer: item.answer, auxilliary: item.answer !== null ? CheckCircleSolid : ExclamationCircleSolid }; }); @@ -38,6 +23,7 @@ const completeKey = 'fertig'; const incompleteKey = 'unfertig'; export let breadcrumbdata: object[] = []; + export let searchData: any[]; export let data: object[] = []; const rawdata = convertData(data).sort((a, b) => a.complete - b.complete); // FIXME: the convert step should not be here and will be handeled backend-side @@ -60,9 +46,8 @@ } }; })} - searchPlaceHolder={`Nach Status (${completeKey}/${incompleteKey}) oder Titel durchsuchen`} withSearch={true} - {filterData} + {searchData} /> diff --git a/frontend/src/routes/milestonegroup/+page.svelte b/frontend/src/routes/milestonegroup/+page.svelte index 4645cc1f..896bfed7 100644 --- a/frontend/src/routes/milestonegroup/+page.svelte +++ b/frontend/src/routes/milestonegroup/+page.svelte @@ -210,11 +210,6 @@ // README: this is slow and quite a bit of work because a lot of text has to be searched. Kill it? function searchAll(data: DataElement[], dummy: any, key: string): DataElement[] { - const surveyRes = searchBySurvey(data, dummy, key); - const statusRes = searchByStatus(data, dummy, key); - const milestoneRes = searchByMilestone(data, dummy, key); - const descrRes = searchBySurveyDescription(data, dummy, key); - return [ ...new Set([ ...searchBySurvey(data, dummy, key), diff --git a/frontend/src/routes/milestoneoverview/+page.svelte b/frontend/src/routes/milestoneoverview/+page.svelte index f8ac5086..b93d00ad 100644 --- a/frontend/src/routes/milestoneoverview/+page.svelte +++ b/frontend/src/routes/milestoneoverview/+page.svelte @@ -68,6 +68,98 @@ const desc = 'Hier geht es darum, zu beschreiben, wie sich das Kind fortbewegt Und seinen Körper (Rumpf, Arme, Beine) kontrollieren kann.'; const progress = 0.5; + + interface MilestoneData { + header: string; + href: string; + summary: string; + auxilliary: string; + complete: boolean; + answer: string; + } + + function searchStatus(data: MilestoneData[], dummy: any, key: string): MilestoneData[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + // button label contains info about completion status => use for search + if (key === 'fertig') { + return item.complete === true; + } else if (key === 'unfertig') { + return item.complete === false; + } + }); + } + } + + function searchDescription(data: MilestoneData[], dummy: any, key: string): MilestoneData[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + return item.summary.toLowerCase().includes(key.toLowerCase()); + }); + } + } + + function searchTitle(data: MilestoneData[], dummy: any, key: string): MilestoneData[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + return item.header.toLowerCase().includes(key.toLowerCase()); + }); + } + } + + function searchAnswer(data: MilestoneData[], dummy: any, key: string): MilestoneData[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + return item.answer === null ? false : item.answer.toLowerCase().includes(key.toLowerCase()); + }); + } + } + + function searchAll(data: MilestoneData[], dummy: any, key: string): MilestoneData[] { + return [ + ...new Set([ + ...searchDescription(data, dummy, key), + ...searchStatus(data, dummy, key), + ...searchTitle(data, dummy, key), + ...searchAnswer(data, dummy, key) + ]) + ]; + } + const searchData = [ + { + label: 'Alle', + placeholder: 'Alle Kategorien durchsuchen', + filterFunction: searchAll + }, + { + label: 'Status', + placeholder: 'Nach Status durchsuchen', + filterFunction: searchStatus + }, + { + label: 'Anwort', + placeholder: 'Nach Antwort durchsuchen', + filterFunction: searchAnswer + }, + { + label: 'Titel', + placeholder: 'Nach Meilenstein durchsuchen', + filterFunction: searchTitle + }, + { + label: 'Beschreibung', + placeholder: 'Beschreibungen durchsuchen', + filterFunction: searchDescription + } + ]; - + From e53d494490ebd7cd727374246f58481b6085033b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 24 Sep 2024 13:20:45 +0000 Subject: [PATCH 3/9] pnpm format --- frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte index e96dd79d..77d17767 100644 --- a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte +++ b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte @@ -58,7 +58,7 @@
diff --git a/frontend/src/lib/components/Childrenpage.svelte b/frontend/src/lib/components/Childrenpage.svelte index cc61bcf3..f7a3ed7a 100644 --- a/frontend/src/lib/components/Childrenpage.svelte +++ b/frontend/src/lib/components/Childrenpage.svelte @@ -84,6 +84,48 @@ let data: ChildData[] = []; let loading = true; + function searchName(data: any[], key: string): any[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + item.header.toLowerCase().includes(key.toLowerCase()); + }); + } + } + + function searchRemarks(data: any[], key: string): any[] { + if (key === '') { + return data; + } else { + return data.filter((item) => { + item.summary.toLowerCase().includes(key.toLowerCase()); + }); + } + } + + function searchAll(data: any[], key: string) { + return [...new Set(...searchName(data, key), ...searchRemarks(data, key))]; + } + + const searchData = [ + { + label: 'Alle', + placeholder: 'Alle Kategorien durchsuchen', + filterFunction: searchAll + }, + { + label: 'Name', + placeholder: 'Kinder nach Namen durchsuchen', + filterFunction: searchName + }, + { + label: 'Bemerkung', + placeholder: 'Bemerkungen zu Kindern durchsuchen', + filterFunction: searchRemarks + } + ]; + // this fetches dummy child data for the dummy user whenever the component is mounted into the dom // it is conceptualized as emulating an API call that would normally fetch this from the server. onMount(init); @@ -104,8 +146,8 @@ {/if}
diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte index e96dd79d..034eb3bd 100644 --- a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte +++ b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte @@ -7,7 +7,6 @@ export let header: string | null = null; export let itemComponent; export let withSearch = true; - export let searchableCol = ''; export let componentProps; export let searchData = [ diff --git a/frontend/src/lib/components/MilestoneGroup.svelte b/frontend/src/lib/components/MilestoneGroup.svelte index 03d69d56..bfc41cff 100644 --- a/frontend/src/lib/components/MilestoneGroup.svelte +++ b/frontend/src/lib/components/MilestoneGroup.svelte @@ -37,7 +37,6 @@ a.progress - b.progress)} itemComponent={CardDisplay} - searchableCol={'header'} componentProps={createStyle(milestonedata)} withSearch={true} {searchData} From 99f769ca4aff75ef51346016dae148528bf47827 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Sep 2024 06:50:33 +0000 Subject: [PATCH 5/9] pnpm format --- frontend/src/lib/components/ChildrenRegistration.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte index 929174cc..cb4c6824 100644 --- a/frontend/src/lib/components/ChildrenRegistration.svelte +++ b/frontend/src/lib/components/ChildrenRegistration.svelte @@ -333,7 +333,7 @@ {/each} From 5fbf3f4846ba8ccc4b5f4b9f430360ca787c9674 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Wed, 25 Sep 2024 09:06:52 +0200 Subject: [PATCH 6/9] remove the dummy argument and add better search to childrenoverview --- frontend/src/lib/components/Childrenpage.svelte | 12 +++++++----- .../lib/components/DataDisplay/GalleryDisplay.svelte | 12 ++++++++---- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/frontend/src/lib/components/Childrenpage.svelte b/frontend/src/lib/components/Childrenpage.svelte index f7a3ed7a..f2e523e5 100644 --- a/frontend/src/lib/components/Childrenpage.svelte +++ b/frontend/src/lib/components/Childrenpage.svelte @@ -88,9 +88,10 @@ if (key === '') { return data; } else { - return data.filter((item) => { - item.header.toLowerCase().includes(key.toLowerCase()); + const res = data.filter((item) => { + return item.header.toLowerCase().includes(key.toLowerCase()); }); + return res; } } @@ -98,14 +99,15 @@ if (key === '') { return data; } else { - return data.filter((item) => { - item.summary.toLowerCase().includes(key.toLowerCase()); + const res = data.filter((item) => { + return item.summary.toLowerCase().includes(key.toLowerCase()); }); + return res; } } function searchAll(data: any[], key: string) { - return [...new Set(...searchName(data, key), ...searchRemarks(data, key))]; + return [...new Set([...searchName(data, key), ...searchRemarks(data, key)])]; } const searchData = [ diff --git a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte index 9f4749d4..fad805d1 100644 --- a/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte +++ b/frontend/src/lib/components/DataDisplay/GalleryDisplay.svelte @@ -13,11 +13,15 @@ { label: 'Alle', placeholder: 'Durchsuchen', - filterFunction: (data: any[], col: any, searchTerm: string): any[] => { + filterFunction: (data: any[], searchTerm: string): any[] => { if (searchTerm === '') { return data; } else { - return data.filter((item) => item[col].toLowerCase().includes(searchTerm.toLowerCase())); + return data.filter((item) => + Object.values(item).some((element) => { + return element.toLowerCase().includes(searchTerm.toLowerCase()); + }) + ); } } } @@ -30,7 +34,7 @@ // dynamic statements let searchTerm = ''; - $: filteredItems = withSearch === true ? filterData(data, searchableCol, searchTerm) : data; + $: filteredItems = withSearch === true ? filterData(data, searchTerm) : data; // Create a new array of componentProps that matches the filtered data $: filteredComponentProps = filteredItems.map((item) => { @@ -57,7 +61,7 @@