Skip to content
GeoViewer 5

Source EditForm

Source EditForm

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/edit-form/main/edit-form-main.declaration.ts

packages/common/src/lib/widgets/edit-form/main/edit-form-main.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type EditFormMainFullConfig, editFormMainFullConfigSchema } from './edit-form-main.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./EditFormMain.svelte').then((EditFormMain) => widgetFactorySvelte(EditFormMain)),
    schema: () => editFormMainFullConfigSchema,
} satisfies WidgetDeclaration;


export type EditFormMainProps = WidgetProps<EditFormMainFullConfig>;

packages/common/src/lib/widgets/edit-form/main/edit-form-main.config.ts

packages/common/src/lib/widgets/edit-form/main/edit-form-main.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom } from '$lib/api/managers/i18n';
import type { z } from 'zod';
import { editFormI18n } from '$lib/widgets/edit-form/edit-form.i18n';
import { apiEditionConfigurationSchema } from '$lib/api/edition/configuration/api-edition-configuration.schema';


export const editFormMainFullConfigSchema = defineWidgetConfig({
    onActivate: {
        deactivate: {
            // TODO - probably missing some -> create reusable const with every map interactivity widget ?
            classes: ['MeasureDistance', 'AdvancedSearch', 'Report', 'Export', 'Identify', 'AddData', 'Draw'],
        },
    },
    active: true,
    inToolbar: inToolbarSchemaFrom(false),
    i18n: i18nSchemaFrom(editFormI18n),
    config: apiEditionConfigurationSchema,
});


export type EditFormMainFullConfig = z.infer<typeof editFormMainFullConfigSchema>;

packages/common/src/lib/widgets/edit-form/main/components/cancel-operation-dialog/EditFormCancelOperationDialog.svelte

packages/common/src/lib/widgets/edit-form/main/components/cancel-operation-dialog/EditFormCancelOperationDialog.svelte
<script lang="ts">
    import {
        Dialog,
        DialogContent,
        DialogFooter,
        DialogHeader,
        DialogTitle,
    } from '$lib/components/shadcn/ui/dialog/index.js';
    import { Icon as ApiIcon } from '$lib/components/icon';
    import { Button } from '$lib/components/shadcn/ui/button';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    const editionManager = getEditionManager();
    const geometryValidationProcessor = editionManager.operationManager.geometryValidationProcessor;
    const i18n = editionManager.getI18n();


    let open = $derived(geometryValidationProcessor?.showCancelOperationDialog ?? false);


    function close() {
        if (geometryValidationProcessor) {
            geometryValidationProcessor.onOperationCancelled();
        }
    }
</script>


<Dialog bind:open onOpenChange={close}>
    <DialogContent class="sm:max-w-[45vw]">
        <DialogHeader>
            <DialogTitle>
                <div class="gv-flex gv-gap-2">
                    <ApiIcon icon={{ lucide: 'ShieldAlert' }} class="gv-size-5" />
                    {i18n('form.cancel-operation.title')}
                </div>
            </DialogTitle>
        </DialogHeader>
        <div>
            <span class="gv-font-bold">{i18n('form.cancel-operation.message')}:</span>
            <ul class="gv-list-disc">
                {#each geometryValidationProcessor?.validationMessages as validationMessage, index (index)}
                    <li class="gv-ml-4">{validationMessage}</li>
                {/each}
            </ul>
        </div>
        <DialogFooter>
            <Button variant="secondary" onclick={() => geometryValidationProcessor?.onOperationCancelled()}
                >{i18n('form.cancel-operation.cancel-operation')}</Button
            >
            <Button onclick={() => geometryValidationProcessor?.onOperationConfirmed()}
                >{i18n('form.cancel-operation.confirm-operation')}</Button
            >
        </DialogFooter>
    </DialogContent>
</Dialog>

packages/common/src/lib/widgets/edit-form/main/components/delete-confirmation-dialog/EditFormDeleteConfirmationDialog.svelte

packages/common/src/lib/widgets/edit-form/main/components/delete-confirmation-dialog/EditFormDeleteConfirmationDialog.svelte
<script lang="ts">
    import {
        Dialog,
        DialogContent,
        DialogFooter,
        DialogHeader,
        DialogTitle,
    } from '$lib/components/shadcn/ui/dialog/index.js';
    import { Icon as ApiIcon } from '$lib/components/icon';
    import { Button } from '$lib/components/shadcn/ui/button';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    const editionManager = getEditionManager();
    const deleteManager = editionManager.deleteManager;
    const i18n = editionManager.getI18n();


    let open = $derived(deleteManager.showDeleteConfirmationPopup);


    function close() {
        deleteManager.showDeleteConfirmationPopup = false;
    }
</script>


<Dialog bind:open onOpenChange={close}>
    <DialogContent class="sm:max-w-[45vw]">
        <DialogHeader>
            <DialogTitle>
                <div class="gv-flex gv-gap-2">
                    <ApiIcon icon={{ lucide: 'Trash' }} class="gv-size-5" />
                    {i18n('form.delete.title')}
                </div>
            </DialogTitle>
        </DialogHeader>
        <div>
            {i18n('form.delete.message')}
        </div>
        <DialogFooter>
            <Button variant="secondary" onclick={() => deleteManager.onDeleteCancel()}>{i18n('common.cancel')}</Button>
            <Button onclick={() => deleteManager.onDeleteConfirm()}>{i18n('common.validate')}</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

packages/common/src/lib/widgets/edit-form/main/components/EditFormTemplatePicker.svelte

packages/common/src/lib/widgets/edit-form/main/components/EditFormTemplatePicker.svelte
<script lang="ts">
    import { Button } from '$lib/components/shadcn/ui/button';
    import EditFormServiceIcon from '../../shared/components/EditFormServiceIcon.svelte';
    import ServiceLoadingStatus from '$lib/components/service-loading-status/ServiceLoadingStatus.svelte';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    const editionManager = getEditionManager();
    const templateManager = editionManager.templateManager;
</script>


<div class="gv-p-1 gv-bg-gray-200 gv-rounded gv-flex">
    {#each templateManager.editionMapServices as editionService (editionService.id)}
        <Button
            class="gv-bg-gray-200 gv-text-foreground gv-h-fit hover:gv-bg-muted-400 data-active:gv-bg-white data-active:gv-shadow-3lg gv-rounded"
            data-state={editionService === templateManager.selectedEditionService ? 'active' : ''}
            size="sm"
            onclick={() => templateManager.selectService(editionService)}
        >
            <div class="gv-flex gv-flex-col gv-items-center gv-gap-0.5">
                <ServiceLoadingStatus service={editionService} iconClass="gv-size-5">
                    <EditFormServiceIcon
                        active={editionService === templateManager.selectedEditionService}
                        service={editionService}
                    ></EditFormServiceIcon>
                </ServiceLoadingStatus>
                <span>{editionService.label}</span>
            </div>
        </Button>
    {/each}
</div>

packages/common/src/lib/widgets/edit-form/main/components/EditFormToolPicker.svelte

packages/common/src/lib/widgets/edit-form/main/components/EditFormToolPicker.svelte
<script lang="ts">
    import { Button } from '$lib/components/shadcn/ui/button';
    import { Icon as ApiIcon } from '$lib/components/icon';
    import { getI18n } from '$lib/api/managers/i18n';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    const i18n = getI18n();
    const editionManager = getEditionManager();
    const toolManager = editionManager.toolManager;
</script>


<div class="gv-p-1 gv-rounded gv-flex gv-gap-0.5">
    {#each toolManager.tools as tool (tool)}
        <Button
            class="gv-bg-white gv-text-foreground gv-h-fit gv-rounded hover:gv-bg-muted-400 data-active:gv-text-white data-active:gv-bg-primary-500"
            data-state={tool.activated ? 'active' : ''}
            size="sm"
            onclick={() => toolManager.toggleTool(tool)}
        >
            <div class="gv-flex gv-flex-col gv-items-center gv-gap-0.5">
                <ApiIcon icon={tool.icon} class="gv-size-5" />
                <span>{i18n.translate(tool.label)}</span>
            </div>
        </Button>
    {/each}
</div>

packages/common/src/lib/widgets/edit-form/main/components/settings/copy-and-paste/EditFormSettingsCopyAndPaste.svelte

packages/common/src/lib/widgets/edit-form/main/components/settings/copy-and-paste/EditFormSettingsCopyAndPaste.svelte
<script lang="ts">
    import { type PropsWithChildren } from '$lib/api/utils';
    import type { ApiEditionMapService } from '$lib/api/mapservices/api-edition-map-service';
    import type { ApiEditionToolManager } from '$lib/api/edition/tools/api-edition-tool-manager.svelte';
    import { ApiEditionCopyAndPasteTool } from '$lib/api/edition/tools/copy-and-paste/api-edition-copy-and-paste-tool.svelte';
    import { Label } from '$lib/components/shadcn/ui/label';
    import { Item, RadioGroup } from '$lib/components/shadcn/ui/radio-group';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';
    import { getMapManager } from '$lib/api/map';


    interface Props {
        editionService: ApiEditionMapService | undefined;
        toolManager: ApiEditionToolManager;
    }


    let { editionService, toolManager }: PropsWithChildren<Props> = $props();


    const mapManager = getMapManager();
    const editionManager = getEditionManager();
    const i18n = editionManager.getI18n();


    const copyPasteConfigured = $derived.by(() => editionService && !!editionService.config.tools.copyAndPaste);
    const copyAndPasteTool = $derived.by(() =>
        toolManager.tools.find((tool) => tool instanceof ApiEditionCopyAndPasteTool),
    );
    const availableCopyServices = $derived.by(() =>
        copyAndPasteTool && copyAndPasteTool.availableCopyServices ? copyAndPasteTool.availableCopyServices : [],
    );
    const displayConfig = $derived(copyPasteConfigured && availableCopyServices.length > 0);
</script>


{#if displayConfig && copyAndPasteTool}
    <div class="gv-flex gv-flex-col gv-gap-2">
        <div class="gv-font-bold">{i18n('settings.copy-paste')}</div>
        <div>
            <RadioGroup bind:value={copyAndPasteTool.selectedCopyServiceId} class="gv-flex gv-flex-col gv-w-full">
                {#each availableCopyServices as featureLayer (featureLayer.id)}
                    <div class="gv-flex gv-gap-2">
                        <Item
                            on:click={() => mapManager.closePopup()}
                            data-test-id="Export-extension-{featureLayer.id}"
                            value={featureLayer.id}
                            id={featureLayer.id}
                        />
                        <Label class="gv-cursor-pointer" for={featureLayer.id}>{featureLayer.label}</Label>
                    </div>
                {/each}
            </RadioGroup>
        </div>
    </div>
{/if}

packages/common/src/lib/widgets/edit-form/main/components/settings/EditFormSettingsDialog.svelte

packages/common/src/lib/widgets/edit-form/main/components/settings/EditFormSettingsDialog.svelte
<script lang="ts">
    import type { PropsWithChildren } from '$lib/api/utils';
    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '$lib/components/shadcn/ui/dialog';
    import EditFormSettingsCopyAndPaste from '$lib/widgets/edit-form/main/components/settings/copy-and-paste/EditFormSettingsCopyAndPaste.svelte';
    import { Icon as ApiIcon } from '$lib/components/icon';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    interface Props {
        open?: boolean;
    }


    let { open = $bindable(false) }: PropsWithChildren<Props> = $props();


    const editionManager = getEditionManager();
    const i18n = editionManager.getI18n();
</script>


<Dialog bind:open>
    <DialogContent class="sm:max-w-[45vw]">
        <DialogHeader>
            <DialogTitle>
                <div class="gv-flex gv-gap-2">
                    <ApiIcon icon={{ lucide: 'Settings' }} class="gv-size-5" />
                    {i18n('settings.title')}
                </div>
            </DialogTitle>
        </DialogHeader>
        <div>
            <EditFormSettingsCopyAndPaste
                editionService={editionManager.templateManager.selectedEditionService}
                toolManager={editionManager.toolManager}
            />
        </div>
    </DialogContent>
</Dialog>

packages/common/src/lib/widgets/edit-form/main/EditFormMain.svelte

packages/common/src/lib/widgets/edit-form/main/EditFormMain.svelte
<script lang="ts">
    import type { EditFormMainProps } from './edit-form-main.declaration';
    import EditFormTemplatePicker from '$lib/widgets/edit-form/main/components/EditFormTemplatePicker.svelte';
    import EditFormToolPicker from '$lib/widgets/edit-form/main/components/EditFormToolPicker.svelte';
    import { Button } from '$lib/components/shadcn/ui/button';
    import { Icon as ApiIcon } from '$lib/components/icon';
    import { getI18n } from '$lib/api/managers/i18n';
    import EditFormAttributesFormDialog from '$lib/widgets/edit-form/attributes-form/EditFormAttributesFormDialog.svelte';
    import EditFormSettingsDialog from '$lib/widgets/edit-form/main/components/settings/EditFormSettingsDialog.svelte';
    import EditFormDeleteConfirmationDialog from '$lib/widgets/edit-form/main/components/delete-confirmation-dialog/EditFormDeleteConfirmationDialog.svelte';
    import EditFormCancelOperationDialog from '$lib/widgets/edit-form/main/components/cancel-operation-dialog/EditFormCancelOperationDialog.svelte';
    import MapInteractionOverlay from '$lib/components/map-interaction-overlay/MapInteractionOverlay.svelte';
    import type { ApiEditionMapService } from '$lib/api/mapservices/api-edition-map-service';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';
    import { getMapManager } from '$lib/api/map';


    const { fullConfig }: EditFormMainProps = $props();
    const { config } = fullConfig;
    const i18n = getI18n(fullConfig.i18n);


    const editionManager = getEditionManager();
    const mapManager = getMapManager();
    const mapInteractionManager = mapManager.mapInteractionManager;


    editionManager.setI18n(i18n);
    editionManager.initialize(config);


    let settingsDialogOpen = $state<boolean>(false);


    let previouslySelectedEditionService: ApiEditionMapService | undefined;


    function onMapInteractionLost() {
        previouslySelectedEditionService = editionManager.templateManager.selectedEditionService;
        editionManager.templateManager.selectService(editionManager.templateManager.selectedEditionService);
    }


    function onMapInteractionResume() {
        editionManager.templateManager.selectService(previouslySelectedEditionService);
    }


    mapInteractionManager.takeInteraction(fullConfig.widgetId);
</script>


<div class="gv-flex gv-justify-self-center gv-bg-white gv-px-2.5 gv-py-1.5 gv-gap-2.5 gv-rounded">
    <MapInteractionOverlay
        class="gv-inline-flex"
        {onMapInteractionResume}
        {onMapInteractionLost}
        widgetId={fullConfig.widgetId}
    >
        <EditFormTemplatePicker />


        {#if editionManager.templateManager.selectedEditionService}
            <EditFormToolPicker />


            <div class="gv-border gv-border-muted-300 gv-my-2"></div>


            <!--        Validate and Cancel Buttons are not shown for the time being-->
            <!--        <div class="gv-p-1 gv-rounded gv-flex gv-gap-0.5">-->
            <!--            <Button-->
            <!--                class="gv-bg-white gv-text-foreground gv-h-fit gv-rounded hover:gv-bg-muted-400"-->
            <!--                onclick={() => editionManager.writer.write(editionManager.templateManager.selectedEditionService!)}-->
            <!--            >-->
            <!--                <div class="gv-flex gv-flex-col gv-items-center gv-gap-0.5">-->
            <!--                    <ApiIcon icon={{ lucide: 'CircleCheck' }} class="gv-size-5" />-->
            <!--                    <span>{i18n('common.validate')}</span>-->
            <!--                </div>-->
            <!--            </Button>-->
            <!--            <Button class="gv-bg-white gv-text-foreground gv-h-fit gv-rounded hover:gv-bg-muted-400" onclick={() => {}}>-->
            <!--                <div class="gv-flex gv-flex-col gv-items-center gv-gap-0.5">-->
            <!--                    <ApiIcon icon={{ lucide: 'CircleX' }} class="gv-size-5" />-->
            <!--                    <span>{i18n('common.cancel')}</span>-->
            <!--                </div>-->
            <!--            </Button>-->
            <!--        </div>-->


            <!--        <div class="gv-border gv-border-muted-300 gv-my-2"></div>-->


            <div class="gv-p-1 gv-rounded gv-flex gv-items-center gv-gap-0.5">
                <Button
                    class="gv-bg-white gv-text-foreground gv-h-full gv-rounded hover:gv-bg-muted-400"
                    onclick={() => {
                        settingsDialogOpen = true;
                    }}
                >
                    <ApiIcon icon={{ lucide: 'Settings' }} class="gv-size-5" />
                </Button>
            </div>
        {/if}
    </MapInteractionOverlay>
</div>


<EditFormAttributesFormDialog></EditFormAttributesFormDialog>
<EditFormSettingsDialog bind:open={settingsDialogOpen} />
<EditFormDeleteConfirmationDialog />
<EditFormCancelOperationDialog />

Aller plus loin