Skip to content

Commit 29c5968

Browse files
KaiVollandKaiVolland
authored
Merge pull request #46 from gdi-be/add-more-fields
This adds and updates some form fields
2 parents 574c182 + e112406 commit 29c5968

14 files changed

+222
-186
lines changed

‎src/lib/components/Form/Field/05_MetadataProfile.svelte

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
let validationResult = $derived(fieldConfig?.validator(value)) as ValidationResult;
3636
3737
const onChange = async (newValue?: string) => {
38-
// TODO check if value has changed
3938
const response = await persistValue(KEY, newValue);
4039
if (response.ok) {
4140
showCheckmark = true;

‎src/lib/components/Form/Field/13_TopicCategory.svelte

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
44
import FieldTools from '../FieldTools.svelte';
55
import SelectInput from '../Inputs/SelectInput.svelte';
6-
import AutoFillButton from '../AutoFillButton.svelte';
76
import type { IsoTheme } from '$lib/models/metadata';
87
import type { ValidationResult } from '../FieldsConfig';
98
@@ -21,6 +20,10 @@
2120
}
2221
});
2322
23+
$effect(() => {
24+
getAutoFillValues(inspireTheme);
25+
});
26+
2427
let showCheckmark = $state(false);
2528
const fieldConfig = getFieldConfig<string>(KEY);
2629
let validationResult = $derived(fieldConfig?.validator(value)) as ValidationResult;
@@ -41,11 +44,11 @@
4144
}));
4245
};
4346
44-
const getAutoFillValues = async () => {
45-
if (!inspireTheme) return;
47+
const getAutoFillValues = async (inspireID?: string) => {
48+
if (!inspireID) return;
4649
const response = await fetch(`/data/iso_themes`);
4750
const data = await response.json();
48-
const match = data.find((entry: IsoTheme) => entry.inspireID === inspireTheme);
51+
const match = data.find((entry: IsoTheme) => entry.inspireID === inspireID);
4952
if (!match) return;
5053
value = match.isoID;
5154
onChange(value);
@@ -61,17 +64,14 @@
6164
key={KEY}
6265
label={fieldConfig?.label}
6366
options={OPTIONS}
67+
disabled={!!inspireTheme}
6468
{value}
6569
{onChange}
6670
{validationResult}
6771
/>
6872
{/await}
6973
</Paper>
70-
<FieldTools key={KEY} bind:checkMarkAnmiationRunning={showCheckmark}>
71-
{#if inspireTheme}
72-
<AutoFillButton onclick={getAutoFillValues} />
73-
{/if}
74-
</FieldTools>
74+
<FieldTools key={KEY} bind:checkMarkAnmiationRunning={showCheckmark} />
7575
</div>
7676

7777
<style lang="scss">

‎src/lib/components/Form/Field/19_ContactsField.svelte

+11-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
let contacts = $state<ContactListEntry[]>([]);
1616
const valueFromData = $derived(getValue<Contacts>(KEY));
1717
$effect(() => {
18-
if (valueFromData) {
18+
if (valueFromData && valueFromData.length > 0) {
1919
contacts =
2020
valueFromData?.map((contact) => {
2121
const listId = (Math.floor(Math.random() * 1000000) + Date.now()).toString(36);
@@ -27,6 +27,16 @@
2727
email: contact.email || ''
2828
};
2929
}) || [];
30+
} else {
31+
contacts = [
32+
{
33+
listId: Date.now().toString(36),
34+
name: '',
35+
organisation: '',
36+
phone: '',
37+
email: ''
38+
}
39+
];
3040
}
3141
});
3242

‎src/lib/components/Form/Field/24_TermsOfUseField.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
disabled: !item.active
6262
})
6363
)}
64-
bind:value
64+
value={value.toString()}
6565
{onChange}
6666
{validationResult}
6767
/>

‎src/lib/components/Form/Field/30_ContentDescription.svelte

+19-105
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,48 @@
11
<script lang="ts">
2-
import IconButton from '@smui/icon-button';
2+
import TextInput from '$lib/components/Form/Inputs/TextInput.svelte';
3+
import Paper from '@smui/paper';
34
import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
4-
import TextInput from '../Inputs/TextInput.svelte';
55
import FieldTools from '../FieldTools.svelte';
6-
import type { ContentDescription } from '$lib/models/metadata';
76
8-
type ContentDescriptionListEntry = ContentDescription & { listId: string };
7+
const KEY = 'isoMetadata.contentDescription';
98
10-
const KEY = 'isoMetadata.UNKNOWN';
11-
12-
const valueFromData = $derived(getValue<ContentDescription[]>(KEY));
13-
let values = $state<ContentDescriptionListEntry[]>([]);
9+
const valueFromData = $derived(getValue<string>(KEY));
10+
let value = $state<string>('');
1411
$effect(() => {
1512
if (valueFromData) {
16-
values = valueFromData?.map((description) => {
17-
const listId = (Math.floor(Math.random() * 1000000) + Date.now()).toString(36);
18-
return {
19-
listId,
20-
url: description.url || '',
21-
description: description.description || '',
22-
code: 'information'
23-
};
24-
});
13+
value = valueFromData;
2514
}
2615
});
27-
2816
let showCheckmark = $state(false);
29-
const fieldConfig = getFieldConfig<ContentDescription[]>(KEY);
17+
const fieldConfig = getFieldConfig<string>(KEY);
3018
31-
const persist = async () => {
32-
const response = await persistValue(
33-
KEY,
34-
values.map(
35-
(contentDescription) =>
36-
({
37-
description: contentDescription.description,
38-
url: contentDescription.url,
39-
code: 'information'
40-
}) satisfies ContentDescription
41-
)
42-
);
19+
const onBlur = async () => {
20+
const response = await persistValue(KEY, value);
4321
if (response.ok) {
4422
showCheckmark = true;
4523
}
4624
};
47-
48-
const addItem = () => {
49-
const listId = Date.now().toString(36);
50-
values = [
51-
{
52-
listId,
53-
url: '',
54-
description: '',
55-
code: 'information'
56-
},
57-
...values
58-
];
59-
};
60-
61-
const removeItem = (listId: string) => {
62-
// TODO: add popconfirm
63-
values = values.filter((contentDescription) => contentDescription.listId !== listId);
64-
persist();
65-
};
6625
</script>
6726

68-
<div class="content-description-field">
69-
<fieldset>
70-
<legend
71-
>{fieldConfig?.label || 'TODO: Inhaltliche Beschreibung'}
72-
<IconButton
73-
class="material-icons"
74-
onclick={() => addItem()}
75-
size="button"
76-
title="Quelle hinzufügen"
77-
>
78-
add
79-
</IconButton>
80-
</legend>
81-
{#each values as contentDescription (contentDescription.listId)}
82-
<fieldset class="contentDescription">
83-
<legend>
84-
<IconButton
85-
class="material-icons"
86-
onclick={() => removeItem(contentDescription.listId)}
87-
size="button"
88-
title="Quelle entfernen"
89-
>
90-
delete
91-
</IconButton>
92-
</legend>
93-
<TextInput
94-
bind:value={contentDescription.url}
95-
key={KEY}
96-
label="URL (Dokument oder Website)"
97-
onblur={persist}
98-
/>
99-
<TextInput
100-
bind:value={contentDescription.description}
101-
key={KEY}
102-
label="Beschreibung der Quelle"
103-
onblur={persist}
104-
/>
105-
</fieldset>
106-
{/each}
107-
</fieldset>
27+
<div class="technical-description-field">
28+
<Paper>
29+
<TextInput
30+
bind:value
31+
label={fieldConfig?.label}
32+
onblur={onBlur}
33+
/>
34+
</Paper>
10835
<FieldTools key={KEY} bind:checkMarkAnmiationRunning={showCheckmark} />
10936
</div>
11037

11138
<style lang="scss">
112-
.content-description-field {
39+
.technical-description-field {
11340
position: relative;
11441
display: flex;
11542
gap: 0.25em;
11643
117-
fieldset {
44+
:global(.smui-paper) {
11845
flex: 1;
119-
border-radius: 4px;
120-
121-
> legend {
122-
display: flex;
123-
align-items: center;
124-
font-size: 0.75em;
125-
}
126-
}
127-
128-
.contentDescription {
129-
legend {
130-
text-align: right;
131-
}
13246
}
13347
13448
:global(.mdc-text-field) {

‎src/lib/components/Form/Field/31_TechnicalDescription.svelte

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
55
import FieldTools from '../FieldTools.svelte';
66
7-
const KEY = 'isoMetadata.UNKNOWN';
7+
const KEY = 'isoMetadata.technicalDescription';
88
9-
// TODO: check why this is a List on the server
10-
const valueFromData = $derived(getValue<string>(KEY)?.[0]);
9+
const valueFromData = $derived(getValue<string>(KEY));
1110
let value = $state<string>('');
1211
$effect(() => {
1312
if (valueFromData) {
@@ -29,7 +28,7 @@
2928
<Paper>
3029
<TextInput
3130
bind:value
32-
label={fieldConfig?.label || 'TODO: Technische Beschreibung'}
31+
label={fieldConfig?.label}
3332
onblur={onBlur}
3433
/>
3534
</Paper>

‎src/lib/components/Form/Field/32_Lineage.svelte

+21-13
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,31 @@
99
1010
type LineageListEntry = Lineage & { listId: string };
1111
12-
const KEY = 'isoMetadata.UNKNOWN';
12+
const KEY = 'isoMetadata.lineage';
1313
1414
const valueFromData = $derived(getValue<Lineage[]>(KEY));
1515
let lineages = $state<LineageListEntry[]>([]);
1616
1717
$effect(() => {
18-
if (valueFromData) {
18+
if (valueFromData && valueFromData.length > 0) {
1919
lineages = valueFromData?.map((lineage) => {
20-
const listId = (Math.floor(Math.random() * 1000000) + Date.now()).toString(36);
20+
const listId = Date.now().toString(36);
2121
return {
2222
listId,
2323
title: lineage.title || '',
24-
source: lineage.source || '',
25-
publishDate: lineage.publishDate || ''
24+
identifier: lineage.identifier || '',
25+
date: lineage.date ? new Date(lineage.date).toISOString().split('T')[0] : ''
2626
};
2727
});
28+
} else {
29+
lineages = [
30+
{
31+
listId: Date.now().toString(36),
32+
title: '',
33+
identifier: '',
34+
date: new Date().toISOString().split('T')[0]
35+
}
36+
];
2837
}
2938
});
3039
@@ -34,8 +43,8 @@
3443
const persistLineages = async () => {
3544
const value = lineages.map((lineage) => ({
3645
title: lineage.title,
37-
source: lineage.source,
38-
publishDate: lineage.publishDate
46+
identifier: lineage.identifier,
47+
date: lineage.date ? new Date(lineage.date).toISOString() : ''
3948
}));
4049
const response = await persistValue(KEY, value);
4150
if (response.ok) {
@@ -50,8 +59,8 @@
5059
{
5160
listId,
5261
title: '',
53-
source: '',
54-
publishDate: ''
62+
identifier: '',
63+
date: ''
5564
},
5665
...lineages
5766
];
@@ -77,7 +86,7 @@
7786
<div class="lineages-field">
7887
<fieldset>
7988
<legend
80-
>{fieldConfig?.label || 'TODO: Herkunft der Daten'}
89+
>{fieldConfig?.label}
8190
<IconButton
8291
class="material-icons"
8392
onclick={(evt) => addItem(evt)}
@@ -109,14 +118,14 @@
109118
<div class="inline-fields">
110119
<DateInput
111120
class="publish-date-field"
112-
bind:value={lineage.publishDate}
121+
bind:value={lineage.date}
113122
key={KEY}
114123
label="Veröffentlichungsdatum"
115124
onblur={persistLineages}
116125
/>
117126
<TextInput
118127
class="lineage-source-field"
119-
bind:value={lineage.source}
128+
bind:value={lineage.identifier}
120129
key={KEY}
121130
label="Identifier"
122131
onblur={persistLineages}
@@ -133,7 +142,6 @@
133142
.lineages-field {
134143
position: relative;
135144
display: flex;
136-
align-items: center;
137145
gap: 0.25em;
138146
139147
fieldset {

0 commit comments

Comments
 (0)