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.tspackages/common/src/lib/widgets/edit-form/main/edit-form-main.config.tspackages/common/src/lib/widgets/edit-form/main/components/delete-confirmation-dialog/EditFormDeleteConfirmationDialog.sveltepackages/common/src/lib/widgets/edit-form/main/components/EditFormServiceIcon.sveltepackages/common/src/lib/widgets/edit-form/main/components/EditFormTemplatePicker.sveltepackages/common/src/lib/widgets/edit-form/main/components/EditFormToolPicker.sveltepackages/common/src/lib/widgets/edit-form/main/components/settings/copy-and-paste/EditFormSettingsCopyAndPaste.sveltepackages/common/src/lib/widgets/edit-form/main/components/settings/EditFormSettingsDialog.sveltepackages/common/src/lib/widgets/edit-form/main/EditFormMain.svelte
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
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/delete-confirmation-dialog/EditFormDeleteConfirmationDialog.svelte
<script lang="ts"> import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '$lib/components/shadcn/ui/dialog/index.js'; import { getLayoutManager } from '$lib/api/managers/layout/index.js'; import type { MapManager } from '$lib/api/map'; import { Icon as ApiIcon } from '$lib/components/icon'; import type { PropsWithChildren } from '$lib/api/utils'; import { Button } from '$lib/components/shadcn/ui/button'; import { ApiEditionDeleteTool } from '$lib/api/edition/tools/delete/api-edition-delete-tool.svelte';
interface Props { mapManager: MapManager; }
let { mapManager }: PropsWithChildren<Props> = $props();
const layoutManager = getLayoutManager(); const editionManager = mapManager.editionManager; const i18n = editionManager.getI18n();
const deleteTool = $derived.by(() => editionManager.toolManager.tools.find((tool) => tool instanceof ApiEditionDeleteTool), );
let open = $derived(deleteTool?.showDeleteConfirmation ?? false);
function close() { if (deleteTool) { deleteTool.showDeleteConfirmation = false; } }</script>
<Dialog bind:open onOpenChange={close} portal={layoutManager.layout.root}> <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={() => deleteTool?.onDeleteCancel()}>{i18n('common.cancel')}</Button> <Button onclick={() => deleteTool?.onDeleteConfirm()}>{i18n('common.validate')}</Button> </DialogFooter> </DialogContent></Dialog>packages/common/src/lib/widgets/edit-form/main/components/EditFormServiceIcon.svelte
<script lang="ts"> import type { ApiEditionMapService } from '$lib/api/mapservices/api-edition-map-service'; import { toString } from '$lib/api/utils'; import PointSymbolPreview from '$lib/components/api-symbol-editor/point/PointSymbolPreview.svelte'; import PolylineSymbolPreview from '$lib/components/api-symbol-editor/polyline/PolylineSymbolPreview.svelte'; import PolygonSymbolPreview from '$lib/components/api-symbol-editor/polygon/PolygonSymbolPreview.svelte';
type Props = { service: ApiEditionMapService; active: boolean; };
let { service, active }: Props = $props();
const geometryType = service.config.geometryType;</script>
<div class="gv-size-5"> {#if service.config.geometryType === 'point'} {@const point = service.config.symbol} <PointSymbolPreview fillColor={toString(point.color)} borderColor={point.border ? toString(point.border?.color) : ''} size={point.size} style={point.style} grayscale={!active} /> {:else if geometryType === 'polyline'} {@const polyline = service.config.symbol} <PolylineSymbolPreview borderColor={toString(polyline.color)} size={polyline.width} style={polyline.style} grayscale={!active} /> {:else if geometryType === 'polygon'} {@const polygon = service.config.symbol} <PolygonSymbolPreview fillColor={toString(polygon.color)} borderColor={toString(polygon.border.color)} size={polygon.border.width} grayscale={!active} /> {/if}</div>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 '$lib/widgets/edit-form/main/components/EditFormServiceIcon.svelte'; import { getMapManager } from '$lib/api/map'; import ServiceLoadingStatus from '$lib/components/service-loading-status/ServiceLoadingStatus.svelte';
const mapManager = getMapManager(); const editionManager = mapManager.editionManager;
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 data-active:gv-rounded" data-state={editionService === templateManager.selectedEditionService ? 'active' : ''} 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
<script lang="ts"> import { Button } from '$lib/components/shadcn/ui/button'; import { Icon as ApiIcon } from '$lib/components/icon'; import { getMapManager } from '$lib/api/map'; import { getI18n } from '$lib/api/managers/i18n';
const i18n = getI18n(); const mapManager = getMapManager(); const editionManager = mapManager.editionManager;
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' : ''} 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
<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 type { MapManager } from '$lib/api/map';
interface Props { editionService: ApiEditionMapService | undefined; toolManager: ApiEditionToolManager; mapManager: MapManager; }
let { editionService, toolManager, mapManager }: PropsWithChildren<Props> = $props();
const i18n = mapManager.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
<script lang="ts"> import { type PropsWithChildren } from '$lib/api/utils'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '$lib/components/shadcn/ui/dialog'; import { getLayoutManager } from '$lib/api/managers/layout'; import EditFormSettingsCopyAndPaste from '$lib/widgets/edit-form/main/components/settings/copy-and-paste/EditFormSettingsCopyAndPaste.svelte'; import { Icon as ApiIcon } from '$lib/components/icon'; import type { MapManager } from '$lib/api/map';
interface Props { open?: boolean; mapManager: MapManager; }
let { open = $bindable(false), mapManager }: PropsWithChildren<Props> = $props();
const layoutManager = getLayoutManager(); const editionManager = mapManager.editionManager; const i18n = editionManager.getI18n();</script>
<Dialog bind:open portal={layoutManager.layout.root}> <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 {mapManager} editionService={editionManager.templateManager.selectedEditionService} toolManager={editionManager.toolManager} /> </div> </DialogContent></Dialog>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 { getMapManager } from '$lib/api/map'; 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';
const { fullConfig }: EditFormMainProps = $props(); const { config } = fullConfig; const i18n = getI18n(fullConfig.i18n);
const mapManager = getMapManager(); const editionManager = mapManager.editionManager;
editionManager.setI18n(i18n); editionManager.initialize(config);
let settingsDialogOpen = $state<boolean>(false);</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"> <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}</div>
<EditFormAttributesFormDialog></EditFormAttributesFormDialog><EditFormSettingsDialog {mapManager} bind:open={settingsDialogOpen} /><EditFormDeleteConfirmationDialog {mapManager} />