Skip to content
GeoViewer 5

Source AddDataAdvancedOptions

Source AddDataAdvancedOptions

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.declaration.ts

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import type { WidgetInitializer } from '$lib/api/managers/widget/widget-registry';
import {
    type AddDataAdvancedOptionsWidget,
    addDataAdvancedOptionsConfigSchema,
} from './add-data-advanced-options.config';


export const declaration = {
    factory: () =>
        import('./AddDataAdvancedOptionsWidget.svelte').then((AddDataAdvancedOptionsWidget) =>
            widgetFactorySvelte(AddDataAdvancedOptionsWidget),
        ),
    schema: () => addDataAdvancedOptionsConfigSchema,
} satisfies WidgetInitializer;


export type AddDataAdvancedOptionsProps = WidgetProps<AddDataAdvancedOptionsWidget>;

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.config.ts

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom } from '$lib/api/managers/i18n/i18n.schema';
import { z } from 'zod';
import { addDataAdvancedOptionsI18n } from '$lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.i18n';
import { addDataFromFileConfigSchema } from '$lib/widgets/add-data/add-data-from-file/add-data-from-file.config';
import { addDataFromUrlConfigSchema } from '$lib/widgets/add-data/add-data-from-url/add-data-from-url-widget.config';


export const fileOptionEnumSchema = z.enum(['URL', 'FILE']);


export const addDataAdvancedOptionsConfigSchema = z
    .object({
        addDataFromFileConfig: addDataFromFileConfigSchema,
        addDataFromUrlConfig: addDataFromUrlConfigSchema,
        visibleOptions: z.array(fileOptionEnumSchema).default(['URL', 'FILE']),
        selectedOption: fileOptionEnumSchema.optional(),
    })
    .prefault({});
export type AddDataAdvancedOptionsConfig = z.infer<typeof addDataAdvancedOptionsConfigSchema>;


export const addDataAdvancedOptionsWidgetSchema = defineWidgetConfig({
    i18n: i18nSchemaFrom(addDataAdvancedOptionsI18n),
    title: addDataAdvancedOptionsI18n['add-data-advanced-options-title'],
    inToolbar: inToolbarSchemaFrom(false),
    config: addDataAdvancedOptionsConfigSchema,
});


export type AddDataAdvancedOptionsWidget = z.infer<typeof addDataAdvancedOptionsWidgetSchema>;

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.i18n.ts

packages/common/src/lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';
import { addDataFromUrlI18n } from '$lib/widgets/add-data/add-data-from-url/add-data-from-url.i18n';
import { addDataFromFileI18n } from '$lib/widgets/add-data/add-data-from-file/add-data-from-file.i18n';


export const addDataAdvancedOptionsI18n = {
    'add-data-advanced-options-title': {
        fr: 'Options avancées',
        nl: 'NL - Options avancées',
    },
    'advanced-options-url': {
        fr: "Depuis l'URL d'un service",
        nl: "NL - Depuis l'URL d'un service",
    },
    'advanced-options-file': {
        fr: 'Depuis un fichier',
        nl: 'NL - Depuis un fichier',
    },
    ...addDataFromUrlI18n,
    ...addDataFromFileI18n,
} satisfies I18nRegistry;


export type AddDataAdvancedOptionsI18n = I18nRegistry<keyof typeof addDataAdvancedOptionsI18n>;

packages/common/src/lib/widgets/add-data/add-data-advanced-options/AddDataAdvancedOptions.svelte

packages/common/src/lib/widgets/add-data/add-data-advanced-options/AddDataAdvancedOptions.svelte
<script lang="ts">
    import { getI18n } from '$lib/api/managers/i18n/i18n.manager.svelte';
    import AddDataFromUrl from '$lib/widgets/add-data/add-data-from-url/AddDataFromUrl.svelte';
    import AddDataFromFile from '$lib/widgets/add-data/add-data-from-file/AddDataFromFile.svelte';
    import type { ComponentItemListOption } from '$lib/components/component-item-list/component-item-list.model.js';
    import type { AddDataAdvancedOptionsConfig } from '$lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.config';
    import type { AddDataAdvancedOptionsI18n } from '$lib/widgets/add-data/add-data-advanced-options/add-data-advanced-options.i18n';
    import { ChevronLeft } from 'lucide-svelte';
    import ComponentItemList from '$lib/components/component-item-list/ComponentItemList.svelte';


    interface Props {
        config: AddDataAdvancedOptionsConfig;
        i18nRegistry: AddDataAdvancedOptionsI18n;
    }


    let { config, i18nRegistry }: Props = $props();


    const i18n = getI18n(i18nRegistry);


    let selectedItem = $state<ComponentItemListOption | undefined>();


    const addDataFromUrlOption: ComponentItemListOption<typeof AddDataFromUrl> = {
        label: i18n('advanced-options-url'),
        code: 'URL',
        icon: { lucide: 'Link' },
        component: AddDataFromUrl,
        props: { config: config.addDataFromUrlConfig, i18nRegistry: i18nRegistry },
    };


    const addDataFromFileOption: ComponentItemListOption<typeof AddDataFromFile> = {
        label: i18n('advanced-options-file'),
        code: 'FILE',
        icon: { lucide: 'File' },
        component: AddDataFromFile,
        props: { config: config.addDataFromFileConfig, i18nRegistry: i18nRegistry },
    };


    const advancedOptions: ComponentItemListOption[] = $derived.by(() => {
        const options = [];
        if (config.visibleOptions.indexOf('URL') > -1) {
            options.push(addDataFromUrlOption);
        }
        if (config.visibleOptions.indexOf('FILE') > -1) {
            options.push(addDataFromFileOption);
        }
        return options;
    });


    $effect(() => {
        if (config.selectedOption) {
            selectedItem = advancedOptions.find((x) => x.code === config.selectedOption);
        }
    });


    function onBack() {
        selectedItem = undefined;
    }
</script>


{#if selectedItem}
    <button class="gv-flex gv-font-bold -gv-ml-1" onclick={onBack} data-test-id="AddData-BackButton">
        <ChevronLeft class="gv-size-5 gv-text-primary" />
        <span>{i18n('common.back')}</span>
    </button>
    <selectedItem.component {...selectedItem.props} />
{:else}
    <ComponentItemList options={advancedOptions} onItemClick={(item) => (selectedItem = item)} />
{/if}

packages/common/src/lib/widgets/add-data/add-data-advanced-options/AddDataAdvancedOptionsWidget.svelte

packages/common/src/lib/widgets/add-data/add-data-advanced-options/AddDataAdvancedOptionsWidget.svelte
<script lang="ts">
    import AddDataAdvancedOptions from './AddDataAdvancedOptions.svelte';
    import type { AddDataAdvancedOptionsProps } from './add-data-advanced-options.declaration';


    let { fullConfig }: AddDataAdvancedOptionsProps = $props();
</script>


<AddDataAdvancedOptions config={fullConfig.config} i18nRegistry={fullConfig.i18n} />

Aller plus loin