Merge pull request #219 from gdi-be/26828

Remove hints and update field layout

Author: KaiVolland

bun.lock

@@ -8,7 +8,7 @@
   import { page } from '$app/state';
   import { invalidateAll } from '$app/navigation';
   import { getContext, onMount } from 'svelte';
-  import { popconfirm } from '$lib/context/PopConfirmContext.svelte';
+  import { getPopconfirm } from '$lib/context/PopConfirmContext.svelte';
   import { FORMSTATE_CONTEXT, type FormState } from '$lib/context/FormContext.svelte';
   import { toast } from 'svelte-french-toast';
   import { getAccessToken } from '$lib/context/TokenContext.svelte';
@@ -28,6 +28,8 @@
   let inputRows = $derived(Math.min(value.split('\n').length, 4));
   let helpActive = $state(false);
 
+  const popconfirm = $derived(getPopconfirm());
+
   onMount(() => {
     scrollToBottom();
   });
@@ -67,7 +69,7 @@
   async function onDelete(id: string, evt: MouseEvent) {
     const targetEl = evt.currentTarget as HTMLElement;
     evt.preventDefault();
-    popconfirm(
+    popconfirm.open(
       targetEl,
       async () => {
         const metadataId = metadata?.metadataId;

src/lib/components/Form/CommentsPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import IconButton from '@smui/icon-button';
   import { Icon } from '@smui/button';
-  import { getValue } from '$lib/context/FormContext.svelte';
+  import { getFormContext, getExtraParams } from '$lib/context/FormContext.svelte';
   import type { FieldKey } from '$lib/models/form';
   import type { FullFieldConfig } from './FieldsConfig';
   import toast from 'svelte-french-toast';
@@ -16,6 +16,7 @@
   let { key, fieldConfig, value: valueFromProps }: CopyButtonProps = $props();
 
   const t = $derived(page.data.t);
+  const { formState, getValue } = getFormContext();
   const value = $derived(valueFromProps ?? getValue(key));
   let copied = $state(false);
   let copyFailed = $state(false);
@@ -26,7 +27,10 @@
 
       if (fieldConfig?.getCopyValue) {
         try {
-          text = await fieldConfig.getCopyValue(value);
+          const extraParams = formState.metadata
+            ? getExtraParams(fieldConfig, formState.metadata)
+            : undefined;
+          text = await fieldConfig.getCopyValue(value, extraParams);
         } catch {
           toast.error(t('copybutton.copyError'));
           return;

src/lib/components/Form/CopyButton.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import TextInput from '$lib/components/Form/Inputs/TextInput.svelte';
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import FieldTools from '../FieldTools.svelte';
   import { page } from '$app/state';
   const t = $derived(page.data.t);
 
   const KEY = 'isoMetadata.title';
 
-  const valueFromData = $derived(getValue<string>(KEY));
+  const formContext = $derived(getFormContext());
+  const valueFromData = $derived(formContext.getValue<string>(KEY));
   let value = $state('');
   $effect(() => {
     value = valueFromData || '';

src/lib/components/Form/Field/01_TitleField.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { ValidationResult } from '../FieldsConfig';
   import FieldTools from '../FieldTools.svelte';
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import TextAreaInput from '../Inputs/TextAreaInput.svelte';
   import { page } from '$app/state';
   const t = $derived(page.data.t);
 
   const KEY = 'isoMetadata.description';
 
+  const { getValue } = getFormContext();
   const valueFromData = $derived(getValue<string>(KEY));
   let value = $state('');
   $effect(() => {

src/lib/components/Form/Field/02_DescriptionField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import FieldTools from '../FieldTools.svelte';
   import RadioInput from '../Inputs/RadioInput.svelte';
   import type { ValidationResult } from '../FieldsConfig';
@@ -12,6 +12,7 @@
   const KEY = 'isoMetadata.privacy';
   const TERMS_OF_USE_KEY = 'isoMetadata.termsOfUseId';
 
+  const { getValue } = getFormContext();
   const valueFromData = $derived(getValue<string>(KEY));
   let value = $state('');
   $effect(() => {

src/lib/components/Form/Field/04_PrivacyField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import FieldTools from '../FieldTools.svelte';
   import SelectInput from '../Inputs/SelectInput.svelte';
   import type { MetadataProfile } from '$lib/models/metadata';
@@ -27,6 +27,7 @@
     }
   ]);
 
+  const { getValue } = getFormContext();
   const valueFromData = $derived(getValue<MetadataProfile>(KEY));
   let value = $state('');
   $effect(() => {

src/lib/components/Form/Field/05_MetadataProfileField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import FieldTools from '../FieldTools.svelte';
   import Switch from '@smui/switch';
   import type { Option } from '$lib/models/form';
@@ -14,6 +14,8 @@
   const CHECKED_KEY = 'isoMetadata.highValueDataset';
   const CATEGORY_KEY = 'isoMetadata.highValueDataCategory';
 
+  const { getValue } = getFormContext();
+
   const checkedValueFromData = $derived(getValue<boolean>(CHECKED_KEY));
   let checkedValue = $state(false);
   $effect(() => {

src/lib/components/Form/Field/06_HighValueDatasetField.svelte

@@ -2,7 +2,7 @@
   import {
     FORMSTATE_CONTEXT,
     getFieldConfig,
-    getValue,
+    getFormContext,
     persistValue,
     type FormState
   } from '$lib/context/FormContext.svelte';
@@ -26,6 +26,7 @@
   const formState = getContext<FormState>(FORMSTATE_CONTEXT);
   const metadata = $derived(formState.metadata);
 
+  const { getValue } = getFormContext();
   let metadataProfile = $derived(getValue<MetadataProfile>(PROFILE_KEY, metadata));
 
   const valueFromData = $derived(getValue<string[]>(KEY));

src/lib/components/Form/Field/07_AnnexThemeField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getFieldConfig, getValue, persistValue } from '$lib/context/FormContext.svelte';
+  import { getFieldConfig, getFormContext, persistValue } from '$lib/context/FormContext.svelte';
   import FieldTools from '../FieldTools.svelte';
   import DateInput from '../Inputs/DateInput.svelte';
   import { page } from '$app/state';
@@ -8,6 +8,7 @@
   const t = $derived(page.data.t);
   const KEY = 'isoMetadata.created';
 
+  const { getValue } = getFormContext();
   const valueFromData = $derived(getValue<string>(KEY));
   let value = $state('');
   $effect(() => {