diff --git a/frontend/messages/en.json b/frontend/messages/en.json index cc483ffa53..4aa336c57e 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -2759,6 +2759,7 @@ "doraAttributes": "DORA Attributes", "doraAssessment": "DORA Assessment", "moreOnTerminologiesHelpText": "Hint: more options can be defined through terminologies", + "selectPlaceholder": "Select...", "updated": "Updated", "deleted": "Deleted", "ebiosRmSyncModalTitle": "Risk Assessment Options", diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json index a1cc4461ef..f4f1fc7633 100644 --- a/frontend/messages/fr.json +++ b/frontend/messages/fr.json @@ -2755,6 +2755,7 @@ "webhookSecret": "Secret webhook", "webhookSecretAlreadySetHelpText": "Le secret webhook est déjà défini.", "webhookUrl": "URL webhook", + "selectPlaceholder": "Sélectionner...", "ebiosRmSyncModalTitle": "Options d'analyse de risque", "ebiosRmSyncModalBody": "Une analyse de risque existe déjà pour cette étude EBIOS RM : \"{name}\"\n\nQue souhaitez-vous faire :", "ebiosRmSyncExisting": "Synchroniser l'existante", diff --git a/frontend/src/lib/components/Forms/AutocompleteSelect.svelte b/frontend/src/lib/components/Forms/AutocompleteSelect.svelte index 81cc99b705..448d7da0f2 100644 --- a/frontend/src/lib/components/Forms/AutocompleteSelect.svelte +++ b/frontend/src/lib/components/Forms/AutocompleteSelect.svelte @@ -40,6 +40,7 @@ disabled?: boolean; hidden?: boolean; translateOptions?: boolean; + placeholder?: string | null; options?: Option[]; optionsEndpoint?: string; optionsDetailedUrlParameters?: [string, string][]; @@ -88,6 +89,7 @@ disabled = false, hidden = false, translateOptions = true, + placeholder = m.selectPlaceholder(), options = [], optionsEndpoint = '', optionsDetailedUrlParameters = [], @@ -371,7 +373,7 @@ cachedOptions = selected; }); - run(() => { + $effect(() => { // Only update value after options are loaded if (!isInternalUpdate && optionsLoaded && !arraysEqual(selectedValues, $value)) { isInternalUpdate = true; @@ -457,6 +459,8 @@ duplicates={false} key={JSON.stringify} filterFunc={fastFilter} + {placeholder} + --sms-placeholder-color="#9ca3af" > {#snippet option({ option })} {#if optionSnippet} @@ -552,3 +556,9 @@

{helpText}

{/if} + + diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte index bb0fc0de04..87eab2d49c 100644 --- a/frontend/src/lib/components/ModelTable/ModelTable.svelte +++ b/frontend/src/lib/components/ModelTable/ModelTable.svelte @@ -228,6 +228,9 @@ const rows = handler.getRows(); let invalidateTable = $state(false); + // Hide search field when table is empty to avoid user confusion + let showSearch = $derived(search && $rows.length > 0); + $tableHandlers[baseEndpoint] = handler; handler.onChange((state: State) => @@ -251,7 +254,6 @@ featureFlags: page.data?.featureflags }) ); - onMount(() => { if (orderBy) { orderBy.direction === 'asc' @@ -499,7 +501,7 @@ {/snippet} {/if} - {#if search} + {#if showSearch} {/if} {#if pagination && rowsPerPage} diff --git a/frontend/src/lib/components/ModelTable/Search.svelte b/frontend/src/lib/components/ModelTable/Search.svelte index 58373fa2ec..bec605a2ec 100644 --- a/frontend/src/lib/components/ModelTable/Search.svelte +++ b/frontend/src/lib/components/ModelTable/Search.svelte @@ -28,3 +28,10 @@ bind:value oninput={search} /> + +