Skip to content

Commit

Permalink
Merge pull request #73 from ssciwr/add-checkboxes-to-data-input
Browse files Browse the repository at this point in the history 
Refactor data input element (again)
  • Loading branch information
@MaHaWo
MaHaWo authored Sep 26, 2024
2 parents bbea732 + 908718a commit 9b050b7
Show file tree
Hide file tree
Showing 13 changed files with 495 additions and 448 deletions.
239 changes: 40 additions & 199 deletions frontend/src/lib/components/ChildrenRegistration.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { base } from '$app/paths';
import AlertMessage from '$lib/components/AlertMessage.svelte';
import DataInput from '$lib/components/DataInput/DataInput.svelte';
import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
import {
children,
Expand All @@ -14,161 +15,10 @@
import { hash, users } from '$lib/stores/userStore';
import {
Button,
Card,
Fileupload,
Heading,
Input,
MultiSelect,
Select,
Textarea
} from 'flowbite-svelte';
import { Card, Heading } from 'flowbite-svelte';
import { onDestroy, onMount } from 'svelte';
// this can be supplied from the database
export let data = [
{
component: Input,
value: null,
props: {
type: 'text',
label: 'Name',
placeholder: 'Bitte eintragen',
key: 'name',
required: true
}
},
{
component: Input,
value: null,
props: {
type: 'date',
label: 'Geburtsdatum',
placeholder: 'Bitte eintragen',
key: 'dateOfBirth',
required: true
}
},
{
component: Select,
value: null,
props: {
label: 'Frühgeburt',
items: ['nein', '0-2 Monate', '2-4 Monate', '4-6 Monate'].map((v) => {
return { name: String(v), value: v };
}),
placeholder: 'Bitte auswählen',
key: 'bornEarly',
required: true
}
},
{
component: Select,
value: null,
props: {
label: 'Geschlecht',
items: ['männlich', 'weiblich'].map((v) => {
return { name: String(v), value: v };
}),
placeholder: 'Bitte auswählen',
key: 'gender',
required: true
}
},
{
component: MultiSelect,
value: [],
props: {
label: 'Nationalität',
items: ['Andere', 'Deutschland', 'Grossbritannien', 'USA', 'China'].map((v) => {
return { name: String(v), value: v };
}),
placeholder: 'Bitte auswählen',
key: 'nationality',
required: true,
textTrigger: 'Andere'
}
},
{
component: MultiSelect,
value: [],
props: {
label: 'Sprache',
items: ['Andere', 'Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
(v) => {
return { name: String(v), value: v };
}
),
placeholder: 'Bitte auswählen',
key: 'language',
required: true,
textTrigger: 'Andere'
}
},
{
component: Select,
value: null,
props: {
label: 'Verhältnis zum Kind',
key: 'relationship',
items: [
'Anderes',
'Kind',
'Enkelkind',
'Neffe/Nichte',
'Pflegekind',
'Adoptivkind',
'Betreuung extern',
'Betreuung zu Hause'
].map((v) => {
return { name: String(v), value: v };
}),
placeholder: 'Bitte auswählen',
required: true,
textTrigger: 'Anderes'
}
},
{
component: MultiSelect,
value: [],
props: {
label: 'Entwicklungsauffälligkeiten',
items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler', 'Andere'].map((v) => {
return { name: String(v), value: v };
}),
placeholder: 'Bitte auswählen',
key: 'developmentalIssues',
required: true,
textTrigger: 'Andere'
}
},
{
component: Textarea,
value: null,
props: {
label: 'Anmerkungen',
placeholder: 'Weitere Bemerkungen',
key: 'remarks',
required: false
}
},
{
component: Fileupload,
value: null,
props: {
label: 'Foto',
placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
key: 'image',
required: false,
accept: ['png', 'jpg', 'svg', 'webp']
}
}
];
// event handlers and verification function
export async function submitData() {
const verified = await verifyInput();
Expand All @@ -182,7 +32,6 @@
current: await createDummyCurrent()
});
console.log(childData);
await children.save();
await goto(nextpage as string);
} else {
Expand All @@ -195,6 +44,11 @@
childData = data.reduce((dict: any, curr) => {
dict[curr.props.key] = curr.value;
if (curr.additionalValue !== null) {
dict[curr.props.key + '_additional'] = curr.additionalValue;
}
required[curr.props.key] = curr.props.required;
return dict;
}, {});
Expand Down Expand Up @@ -232,6 +86,8 @@
let unsubscribe: unknown = children.subscribe((childrenlist) => {
children.save();
});
// this can be supplied from the database
export let data: any[];
// rerender page if missing values or showAlert changes
$: missingValues = [];
Expand All @@ -256,6 +112,13 @@
await children.save();
await (unsubscribe as Function)();
});
const buttons = [
{
label: 'Abschließen',
onclick: submitData
}
];
</script>

<!-- Show big alert message when something is missing -->
Expand Down Expand Up @@ -287,55 +150,33 @@
{/if}

<!-- The actual content -->
<Card class="container m-1 mx-auto w-full max-w-xl">
{#if heading}
<Heading
tag="h3"
class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
>{heading}</Heading
>
{/if}

<form class="m-1 mx-auto w-full flex-col space-y-6">
{#each data as element, i}
{#if element.props.key === 'image'}
<div class="container m-1 mx-auto w-full max-w-xl">
<Card class="container m-1 mx-auto w-full max-w-xl">
{#if heading}
<Heading
tag="h3"
class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
>{heading}</Heading
>
{/if}

<form class="m-1 mx-auto w-full flex-col space-y-6">
{#each data as element}
<DataInput
component={element.component}
bind:this={refs[i]}
properties={element.props}
bind:value={element.value}
bind:additionalInput={element.additionalValue}
label={element.props.label}
eventHandlers={{
...element?.eventHandlers,
...{
'on:change': (event) => {
if (!(event.target === null)) {
const image = event.target.files[0];
// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
let reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (e) => {
element.value = e.target.result;
};
}
}
}
}}
/>
{:else}
<DataInput
component={element.component}
properties={element.props}
label={element.props.label}
textTrigger={element.props.textTrigger}
bind:value={element.value}
eventHandlers={{
'on:change': element.onchange,
'on:blur': element.onblur,
'on:click': element.onclick
}}
/>
{/if}
{/each}

<Button
class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
on:click={submitData}
>{'Kind hinzufügen'}
</Button>
</form>
</Card>
{/each}
</form>
<NavigationButtons {buttons} />
</Card>
</div>
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Childrenpage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
horizontal: false
}
: { horizontal: item.image ? true : false },
: { horizontal: false },
header:
item.header == 'Neu'
? {
Expand Down
Loading

0 comments on commit 9b050b7

Please sign in to comment.