diff --git a/src/frontend/src/lib/components/docs/DocForm.svelte b/src/frontend/src/lib/components/docs/DocForm.svelte index 68af8f8a8..ee1e1910a 100644 --- a/src/frontend/src/lib/components/docs/DocForm.svelte +++ b/src/frontend/src/lib/components/docs/DocForm.svelte @@ -6,7 +6,7 @@ import { toasts } from '$lib/stores/toasts.store'; import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context'; import { createEventDispatcher, getContext } from 'svelte'; - import { isNullish } from '$lib/utils/utils'; + import { isNullish, nonNullish } from '$lib/utils/utils'; import { i18n } from '$lib/stores/i18n.store'; import { nanoid } from 'nanoid'; import { @@ -15,6 +15,8 @@ type DataContext } from '$lib/types/data.context'; import type Doc from './Doc.svelte'; + import IconAutoRenew from '$lib/components/icons/IconAutoRenew.svelte'; + import { fade } from 'svelte/transition'; const { store, reload }: RulesContext = getContext(RULES_CONTEXT_KEY); const { store: docsStore }: DataContext = getContext>(DATA_CONTEXT_KEY); @@ -28,29 +30,22 @@ let key: string | undefined; $: key = $docsStore?.key; - let fields: DocField[] = [ - { - name: '', - fieldType: DocFieldTypeEnum.STRING, - value: '' - } - ]; - - const onAddFieldButtonPressed = () => { - fields = [ - ...fields, - { - name: '', - fieldType: DocFieldTypeEnum.STRING, - value: '' - } - ]; + const EMPTY_FIELD: DocField = { + name: '', + fieldType: DocFieldTypeEnum.STRING, + value: '' }; + let fields: DocField[] = [EMPTY_FIELD]; + + const onAddFieldButtonPressed = () => (fields = [...fields, EMPTY_FIELD]); + const onDeleteFieldPressed = (index: number) => { - if (fields.length > 1) { - fields = fields.filter((_, i) => i !== index); + if (fields.length <= 1) { + return; } + + fields = fields.filter((_, i) => i !== index); }; let isFormValid = false; @@ -58,11 +53,7 @@ !isNullish(key) && !isNullish( fields.find( - (field) => - !isNullish(field.name) && - field.name !== '' && - !isNullish(field.value) && - field.value !== '' + ({ name, value }) => nonNullish(name) && name !== '' && nonNullish(value) && value !== '' ) ); @@ -99,10 +90,16 @@ $: isActive = action === 'create' || action === 'edit'; -

{isActive ? $i18n.document.title_add_new_document : ''}

+

+ {#if isActive} + {$i18n.document.title_add_new_document} + {:else} + ​ + {/if} +

{#if isActive} -
+
@@ -111,22 +108,28 @@ -
+ {#each fields as field, i (i)} 1} - onDeleteFieldPressed={() => onDeleteFieldPressed(i)} + deleteButton={fields.length > 1} + on:junoDelete={() => onDeleteFieldPressed(i)} /> {/each} @@ -137,7 +140,7 @@
- +
diff --git a/src/frontend/src/lib/components/docs/DocFormField.svelte b/src/frontend/src/lib/components/docs/DocFormField.svelte index b9bcc6f92..c4c6f1c56 100644 --- a/src/frontend/src/lib/components/docs/DocFormField.svelte +++ b/src/frontend/src/lib/components/docs/DocFormField.svelte @@ -2,12 +2,14 @@ import { i18n } from '$lib/stores/i18n.store'; import { DocFieldTypeEnum } from '$lib/types/doc-form'; import IconDelete from '../icons/IconDelete.svelte'; + import { createEventDispatcher } from 'svelte'; - export let name: string = ''; + export let name = ''; export let fieldType: DocFieldTypeEnum = DocFieldTypeEnum.STRING; export let value: string | boolean | number = ''; - export let isShowDeleteButton: boolean = false; - export let onDeleteFieldPressed = () => {}; + export let deleteButton = false; + + const dispatch = createEventDispatcher();
@@ -21,6 +23,7 @@ bind:value={name} />
+
+
@@ -43,14 +47,14 @@ {/if} {#if fieldType === DocFieldTypeEnum.BOOLEAN} - {/if} - {#if isShowDeleteButton} - {/if} @@ -64,7 +68,7 @@ display: flex; flex-direction: row; align-items: center; - gap: 16px; + gap: var(--padding-1_5x); margin-bottom: var(--padding-2x); } @@ -76,7 +80,6 @@ .value-input-wrapper { display: flex; - flex-direction: row; align-items: center; justify-content: center; } diff --git a/src/frontend/src/lib/components/docs/Docs.svelte b/src/frontend/src/lib/components/docs/Docs.svelte index 1641d9ee0..e6d87faa7 100644 --- a/src/frontend/src/lib/components/docs/Docs.svelte +++ b/src/frontend/src/lib/components/docs/Docs.svelte @@ -17,6 +17,7 @@ import type { ListParams } from '$lib/types/list'; import { compare } from 'semver'; import { listDocs008 } from '$lib/api/satellites.deprecated.api'; + import IconNew from '$lib/components/icons/IconNew.svelte'; const { store }: RulesContext = getContext(RULES_CONTEXT_KEY); @@ -94,6 +95,18 @@ class:data-nullish={isNullish($paginationStore.items)} > {#if nonNullish($paginationStore.items)} + {#if empty} + + {$i18n.document.no_match} + + {/if} + + + {#each $paginationStore.items as [key, doc]}
{/if} diff --git a/src/frontend/src/lib/components/icons/IconAutoRenew.svelte b/src/frontend/src/lib/components/icons/IconAutoRenew.svelte new file mode 100644 index 000000000..0ce98a56d --- /dev/null +++ b/src/frontend/src/lib/components/icons/IconAutoRenew.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/src/frontend/src/lib/components/icons/IconNew.svelte b/src/frontend/src/lib/components/icons/IconNew.svelte index 6f5e4714d..40fb0c2eb 100644 --- a/src/frontend/src/lib/components/icons/IconNew.svelte +++ b/src/frontend/src/lib/components/icons/IconNew.svelte @@ -3,7 +3,12 @@ export let size = '24px'; - { - key: string; - data: T; - action?: DataStoreAction; + key: string | undefined; + data: T | undefined; + action: DataStoreAction; } export type DataStoreData = DataStore | undefined | null;