Skip to content
GeoViewer 5

Source EditFormDetail

Source EditFormDetail

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

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


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


export type EditFormDetailProps = WidgetProps<EditFormDetailFullConfig>;

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

packages/common/src/lib/widgets/edit-form/detail/edit-form-detail.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { z } from 'zod';
import type { ApiEditionMapService } from '$lib/api/mapservices/api-edition-map-service';


export type EditFormDetailConfig = {
    service: ApiEditionMapService;
};


export const editFormDetailFullConfigSchema = defineWidgetConfig({
    title: {
        fr: 'Détail',
        nl: 'NL - Détail',
    },
    active: true,
    inToolbar: inToolbarSchemaFrom(false),
    container: {
        id: 'right',
        closable: true,
    },
    config: z.custom<EditFormDetailConfig>().optional(),
});


export type EditFormDetailFullConfig = z.infer<typeof editFormDetailFullConfigSchema>;

packages/common/src/lib/widgets/edit-form/detail/EditFormDetail.svelte

packages/common/src/lib/widgets/edit-form/detail/EditFormDetail.svelte
<script lang="ts">
    import type { EditFormDetailProps } from './edit-form-detail.declaration';
    import EditFormBaseAttributesForm from '$lib/widgets/edit-form/attributes-form/components/EditFormBaseAttributesForm.svelte';
    import EditFormDetailList from '$lib/widgets/edit-form/detail/list/EditFormDetailList.svelte';
    import type { BaseFeature, FeatureAttributes } from '$lib/api/feature';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';


    const { fullConfig }: EditFormDetailProps = $props();
    const config = fullConfig.config;
    const editionMapService = config!.service;
    const fields = editionMapService.config.fields;


    const editionManager = getEditionManager();
    const detailSession = editionManager.detailSession;


    let selectedFeature = $state<BaseFeature>();


    function onValidate(attributes: FeatureAttributes) {
        detailSession.updateAttributes(editionMapService, selectedFeature!, attributes);
    }


    export function selectFeature(feature: BaseFeature) {
        selectedFeature = feature;
    }
</script>


<div class="gv-p-3 gv-flex gv-flex-col gv-gap-3">
    <EditFormDetailList service={editionMapService}></EditFormDetailList>


    {#if selectedFeature?.attributes && fields}
        <EditFormBaseAttributesForm
            {fields}
            attributes={selectedFeature.attributes}
            {onValidate}
            handleEditAttributesButton={true}
        ></EditFormBaseAttributesForm>
    {/if}
</div>

packages/common/src/lib/widgets/edit-form/detail/list/EditFormDetailList.svelte

packages/common/src/lib/widgets/edit-form/detail/list/EditFormDetailList.svelte
<script lang="ts">
    import type { ApiEditionMapService } from '$lib/api/mapservices/api-edition-map-service';
    import Pagination from '../../../../components/pagination/Pagination.svelte';
    import EditFormServiceIcon from '$lib/widgets/edit-form/shared/components/EditFormServiceIcon.svelte';
    import { Icon, Icon as ApiIcon } from '$lib/components/icon';
    import { Button } from '$lib/components/shadcn/ui/button';


    import { ApiSimpleTooltip } from '$lib/components/api-simple-tooltip';
    import { getI18n } from '$lib/api/managers/i18n';
    import type { ApiEditionFeature } from '$lib/api/edition/feature/api-edition-feature.model';
    import { getEditionManager } from '$lib/api/edition/api-edition.manager';
    import { showToast } from '$lib/components/toast/toast.utils';


    interface Props {
        service: ApiEditionMapService;
    }


    let { service }: Props = $props();


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


    const deleteToolConfig = $derived(service.config.detail.list.actions.delete);


    let pageIndex = $state(0);
    let pageSize = 5;
    let features = $derived(service.features.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize));


    function zoom(feature: ApiEditionFeature) {
        detailSession.zoomToFeature(feature);
    }


    function edit(feature: ApiEditionFeature) {
        showToast({ level: 'info', message: 'WORK IN PROGRESS' });
    }


    function remove(feature: ApiEditionFeature) {
        deleteManager.processSelectedFeature(feature, service, deleteToolConfig.showDeleteConfirmationDialog);
    }


    function onMouseOver(feature: ApiEditionFeature) {
        detailSession.highlightFeature(feature, service);
    }


    function onMouseOut(feature: ApiEditionFeature) {
        detailSession.unhighlightFeature(feature, service);
    }
</script>


{#if features.length}
    <div class="gv-flex gv-flex-col gv-gap-2">
        <!--    Buttons-->
        <!--    <div>-->


        <!--    </div>-->
        <div class="gv-flex gv-flex-col gv-gap-1.5">
            {#each features as feature, index (index)}
                <div
                    class="gv-grid gv-grid-cols-[auto_1fr_auto] gv-items-center gv-gap-2 gv-p-2.5 gv-border-2 gv-border-muted-300"
                    onmouseover={() => onMouseOver(feature)}
                    onfocus={() => onMouseOver(feature)}
                    onmouseout={() => onMouseOut(feature)}
                    onblur={() => onMouseOut(feature)}
                    role="presentation"
                >
                    <EditFormServiceIcon {service} active={true}></EditFormServiceIcon>
                    <span>{feature.displayName}</span>
                    <div class="gv-flex gv-gap-1.5">
                        <ApiSimpleTooltip text={i18n('common.zoom')}>
                            <Button variant="secondary" size="icon-sm" onclick={() => zoom(feature)}>
                                <Icon icon={{ lucide: 'Search' }} class="gv-size-4" />
                            </Button>
                        </ApiSimpleTooltip>
                        <ApiSimpleTooltip text={i18n('common.edit')}>
                            <Button variant="secondary" size="icon-sm" onclick={() => edit(feature)}>
                                <Icon icon={{ lucide: 'Pencil' }} class="gv-size-4" />
                            </Button>
                        </ApiSimpleTooltip>
                        <ApiSimpleTooltip text={i18n.translate(deleteToolConfig.label)}>
                            <Button variant="secondary" size="icon-sm" onclick={() => remove(feature)}>
                                <ApiIcon icon={deleteToolConfig.icon} class="gv-size-4" />
                            </Button>
                        </ApiSimpleTooltip>
                    </div>
                </div>
            {/each}
        </div>


        <Pagination count={service.features.length} perPage={pageSize} bind:page={pageIndex} size="sm" />
    </div>
{/if}

Aller plus loin