Source AddDataCatalog
Source AddDataCatalog
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-catalog/add-data-catalog.declaration.tspackages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog.config.tspackages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog-state.svelte.tspackages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog.i18n.tspackages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalog.sveltepackages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalogServiceList.sveltepackages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalogWidget.svelte
packages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';import { type AddDataCatalogWidgetConfig, addDataCatalogWidgetConfigSchema } from './add-data-catalog.config';import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';
export const declaration = { factory: () => import('./AddDataCatalogWidget.svelte').then((AddDataCatalogWidget) => widgetFactorySvelte(AddDataCatalogWidget), ), schema: () => addDataCatalogWidgetConfigSchema,} satisfies WidgetDeclaration;
export type AddDataCatalogProps = WidgetProps<AddDataCatalogWidgetConfig>;packages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog.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 { type I18nData, i18nDataSchema, i18nSchemaFrom } from '$lib/api/managers/i18n/i18n.schema';import { z } from 'zod';import { addDataPresetsI18n } from '$lib/widgets/add-data/add-data-presets/add-data-presets.i18n';import { addDataCatalogI18n } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.i18n';import { type Icon, iconSchema } from '$lib/api/icons';import { type MapServiceConfiguration } from '$lib/api/managers/configuration';
export type AddDataCatalog = { code: string; label: I18nData; icon: Icon; mapServiceConfigs?: MapServiceConfiguration[];};
export const catalogConfigSchema = z.lazy(() => z.object({ code: z.string(), label: i18nDataSchema, icon: iconSchema, mapServiceConfigs: z.array(z.custom<MapServiceConfiguration>()).optional().default([]), }),) as z.Schema<AddDataCatalog>;
export const addDataCatalogConfigSchema = z .object({ catalogs: z.array(catalogConfigSchema).default([]), }) .prefault({});export type AddDataCatalogConfig = z.infer<typeof addDataCatalogConfigSchema>;
export const addDataCatalogWidgetConfigSchema = defineWidgetConfig({ i18n: i18nSchemaFrom(addDataPresetsI18n), title: addDataCatalogI18n['add-data-catalog-title'], inToolbar: inToolbarSchemaFrom(false),});
export type AddDataCatalogWidgetConfig = z.infer<typeof addDataCatalogWidgetConfigSchema>;packages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog-state.svelte.ts
import { type MapServiceConfiguration, mapServiceConfigWithDefaults } from '$lib/api/managers/configuration';import { getContext, setContext } from 'svelte';import { highlightServiceInToc } from '$lib/widgets/toc/toc.utils';import { type MapManager } from '$lib/api/map';import type { AddDataConfig } from '$lib/widgets/add-data/add-data.config';import type WidgetManager from '$lib/api/managers/widget/widget.manager.svelte';import type { TopicManager } from '$lib/api/managers/topic';
export class AddDataCatalogState { private _selectedMapServiceConfigs = $state<MapServiceConfiguration[]>([]); public selectionCount = $derived.by(() => this._selectedMapServiceConfigs.length);
private closeWidgetOnServiceAdded = $derived.by(() => this.addDataFullConfig.config.closeOnMapServiceAdded); private openTocOnServiceAdded = $derived.by(() => this.addDataFullConfig.config.openTocOnMapServiceAdded);
constructor( private mapManager: MapManager, private widgetManager: WidgetManager, private addDataFullConfig: AddDataConfig, private topicManager: TopicManager, ) {}
public toggleRecord(config: MapServiceConfiguration, toggle: boolean): void { if (toggle) { this._selectedMapServiceConfigs.push(config); } else { this._selectedMapServiceConfigs = this._selectedMapServiceConfigs.filter((x) => x.id !== config.id); } }
public emptySelection() { this._selectedMapServiceConfigs = []; }
public addSelectedData() { this._selectedMapServiceConfigs.forEach((config) => { try { const mapServiceConfig = mapServiceConfigWithDefaults({ ...config, }); const mapService = this.mapManager.addMapService(mapServiceConfig); this.topicManager.publish({ type: 'AddData-add-mapService-from-catalog', layer: mapService, }); if (mapService && this.openTocOnServiceAdded) { highlightServiceInToc(mapService.id, this.widgetManager, this.mapManager); } } catch (error) { console.log(`Error while adding map service ${config.id} on map`, error); } }); this.emptySelection(); if (this.closeWidgetOnServiceAdded) { this.closeWidget(); } }
public closeWidget() { const reference = this.widgetManager.getReference(this.addDataFullConfig.widgetId); reference.deactivate(); }
public get selectedMapServiceConfigs(): MapServiceConfiguration[] { return this._selectedMapServiceConfigs; }}
const ADD_DATA_CATALOG_CONTEXT_KEY = 'ADD_DATA_CATALOG_CONTEXT_KEY';
export function setAddDataCatalogContext(addData: AddDataCatalogState) { setContext(ADD_DATA_CATALOG_CONTEXT_KEY, addData); return getAddDataCatalog();}
export function getAddDataCatalog(): AddDataCatalogState { const addData = getContext<AddDataCatalogState>(ADD_DATA_CATALOG_CONTEXT_KEY); if (!addData) { throw new Error('AddDataCatalog not found in context.'); } return addData;}packages/common/src/lib/widgets/add-data/add-data-catalog/add-data-catalog.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';
export const addDataCatalogI18n = { 'add-data-catalog-title': { fr: 'Catalogue de données', nl: 'NL - Catalogue de données', }, ADD: { fr: 'Ajouter les données sélectionnées', nl: 'NL - Ajouter les données sélectionnées', }, EMPTY: { fr: 'Vider', nl: 'NL - Vider', },} satisfies I18nRegistry;
export type AddDataCatalogI18n = I18nRegistry<keyof typeof addDataCatalogI18n>;packages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalog.svelte
<script lang="ts"> import { type AddDataCatalog } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.config'; import type { AddDataCatalogI18n } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.i18n'; import { getI18n } from '$lib/api/managers/i18n'; import ComponentItemList from '$lib/components/component-item-list/ComponentItemList.svelte'; import AddDataBackButton from '$lib/widgets/add-data/card-list/AddDataBackButton.svelte'; import AddDataCatalogServiceList from '$lib/widgets/add-data/add-data-catalog/AddDataCatalogServiceList.svelte'; import { AddDataCatalogState, setAddDataCatalogContext, } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog-state.svelte'; import AddDataBottomButtons from '$lib/widgets/add-data/card-list/AddDataBottomButtons.svelte'; import { getMapManager } from '$lib/api/map'; import { getWidgetManager } from '$lib/api/managers/widget'; import type { AddDataConfig } from '$lib/widgets/add-data/add-data.config'; import { getTopicManager } from '$lib/api/managers/topic';
interface Props { addDataConfig: AddDataConfig; i18nRegistry: AddDataCatalogI18n; }
let { addDataConfig, i18nRegistry }: Props = $props(); const { addDataCatalogConfig } = addDataConfig.config; const i18n = getI18n(i18nRegistry); const mapManager = getMapManager(); const widgetManager = getWidgetManager(); const topicManager = getTopicManager(); const addDataContext = setAddDataCatalogContext( new AddDataCatalogState(mapManager, widgetManager, addDataConfig, topicManager), );
let currentCatalog = $state<AddDataCatalog | undefined>();</script>
{#if !currentCatalog} <div class="gv-max-h-[55vh] gv-overflow-y-auto gv-flex gv-flex-col"> <ComponentItemList options={addDataCatalogConfig.catalogs} onItemClick={(option) => (currentCatalog = option)} i18nData={i18nRegistry} /> </div>{:else} <AddDataBackButton {i18nRegistry} onclick={() => (currentCatalog = undefined)} /> <div class="gv-pb-3 gv-pt-2 gv-font-bold gv-text-2xl">{i18n.translate(currentCatalog.label)}</div> <div class="gv-max-h-[55vh] gv-overflow-y-auto gv-flex gv-flex-col"> <AddDataCatalogServiceList catalog={currentCatalog} {i18nRegistry} /> </div>
<div class="gv-pt-5"> <AddDataBottomButtons selectionCount={addDataContext.selectionCount} emptyButtonLabel={i18n('EMPTY')} addButtonLabel={i18n('ADD')} onAddClicked={() => addDataContext.addSelectedData()} onEmptyClicked={() => addDataContext.emptySelection()} /> </div>{/if}packages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalogServiceList.svelte
<script lang="ts"> import { type AddDataCatalog } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.config'; import type { AddDataCatalogI18n } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.i18n'; import { getI18n } from '$lib/api/managers/i18n'; import NoResult from '$lib/components/common/NoResult.svelte'; import type { MapServiceConfiguration } from '$lib/api/managers/configuration'; import { getMapManager } from '$lib/api/map'; import { cn } from '$lib/components/shadcn/utils'; import { Checkbox } from '$lib/components/shadcn/ui/checkbox'; import { getAddDataCatalog } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog-state.svelte';
interface Props { catalog: AddDataCatalog; i18nRegistry: AddDataCatalogI18n; }
let { catalog, i18nRegistry }: Props = $props();
const addDataContext = getAddDataCatalog(); const mapManager = getMapManager(); const i18n = getI18n(i18nRegistry); const mapServiceConfigs = $derived.by(() => catalog.mapServiceConfigs ?? []); let checkboxRefs = $state<Checkbox[]>([]);
$effect(() => { const selectedIds = addDataContext.selectedMapServiceConfigs.map((serviceConfig) => serviceConfig.id); mapServiceConfigs.forEach((mapServiceConfig, index) => { if (!mapServiceConfig.id) { return; } const checkbox = checkboxRefs[index]; if (checkbox) { checkbox.checked = selectedIds.indexOf(mapServiceConfig.id) > -1; } }); });
function toggleIndex(config: MapServiceConfiguration, index: number) { const checkbox = checkboxRefs[index]; const active = checkbox.checked; checkbox.checked = !active; addDataContext.toggleRecord(config, !active); }
function mapServiceAlreadyOnMap(id: string) { return !!mapManager.layerList.list.find((layer) => layer.id === id); }</script>
<div class="gv-w-full gv-h-full gv-overflow-y-auto"> {#if !catalog || !catalog.mapServiceConfigs || catalog.mapServiceConfigs?.length === 0} <NoResult /> {/if} {#each mapServiceConfigs as mapServiceConfig, index} {@const alreadyOnMap = mapServiceAlreadyOnMap(mapServiceConfig.id)} <div title={alreadyOnMap ? i18n('common.already-on-map') : i18n('common.add-xxx-to-map', { label: mapServiceConfig.label })} class={cn( 'gv-flex gv-w-full gv-items-center gv-p-2 gv-border-b-[0.5px] gv-border-grey-300', alreadyOnMap ? '' : 'hover:gv-bg-primary/10', )} > <div class="gv-w-[5%] gv-mt-[1px] gv-flex gv-items-center"> {#if alreadyOnMap} <Checkbox title={i18n('common.select-data')} disabled={true} checked={true} data-test-id={`AddData-Catalog-${mapServiceConfig.label}-Checkbox`} /> {:else} <Checkbox title={i18n('common.select-data')} data-test-id={`AddData-${mapServiceConfig.label}-Checkbox`} bind:this={checkboxRefs[index]} onCheckedChange={() => toggleIndex(mapServiceConfig, index)} /> {/if} </div> <div class="gv-w-[95%] gv-flex gv-justify-start"> <button class={cn('gv-w-full gv-text-left', alreadyOnMap ? 'gv-opacity-50' : '')} onclick={() => !alreadyOnMap && toggleIndex(mapServiceConfig, index)} > {mapServiceConfig.label} </button> </div> </div> {/each}</div>packages/common/src/lib/widgets/add-data/add-data-catalog/AddDataCatalogWidget.svelte
<script lang="ts"> import AddDataCatalog from '$lib/widgets/add-data/add-data-catalog/AddDataCatalog.svelte'; import type { AddDataCatalogProps } from '$lib/widgets/add-data/add-data-catalog/add-data-catalog.declaration';
let { fullConfig }: AddDataCatalogProps = $props();</script>
<AddDataCatalog i18nRegistry={fullConfig.i18n} />