Skip to content
GeoViewer 5

Source AddDataPopulars

Source AddDataPopulars

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-populars/add-data-populars.declaration.ts

packages/common/src/lib/widgets/add-data/add-data-populars/add-data-populars.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type AddDataPopularsWidgetConfig, addDataPopularsWidgetConfigSchema } from './add-data-populars.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


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


export type AddDataPopularsProps = WidgetProps<AddDataPopularsWidgetConfig>;

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

packages/common/src/lib/widgets/add-data/add-data-populars/add-data-populars.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 { addDataPopularsI18n } from '$lib/widgets/add-data/add-data-populars/add-data-populars.i18n';
import { mapServiceConfigurationSchema } from '$lib/api/managers/configuration';


const geoportailServiceConfigSchema = z.object({
    id: z.string().optional(),
    type: z.literal('METADATA'),
    metadataId: z.string().trim(),
    label: z.string().optional(),
});


export const addDataPopularsConfigSchema = z
    .object({
        popularServices: z.array(z.union([mapServiceConfigurationSchema, geoportailServiceConfigSchema])).default([]),
        trendingServices: z.array(z.union([mapServiceConfigurationSchema, geoportailServiceConfigSchema])).default([]),
    })
    .prefault({});
export type AddDataPopularsConfig = z.infer<typeof addDataPopularsConfigSchema>;
export type PopularConfigItem = AddDataPopularsConfig['popularServices'][number];


export const addDataPopularsWidgetConfigSchema = defineWidgetConfig({
    i18n: i18nSchemaFrom(addDataPopularsI18n),
    title: addDataPopularsI18n['add-data-populars-title'],
    inToolbar: inToolbarSchemaFrom(false),
    config: addDataPopularsConfigSchema,
});


export type AddDataPopularsWidgetConfig = z.infer<typeof addDataPopularsWidgetConfigSchema>;

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

packages/common/src/lib/widgets/add-data/add-data-populars/add-data-populars.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';


export const addDataPopularsI18n = {
    'add-data-populars-title': {
        fr: 'Données populaires',
        nl: 'NL - Données populaires',
    },
    'trending-data': {
        fr: "Données d'actualité",
        nl: "NL - Données d'actualité",
    },
} satisfies I18nRegistry;


export type AddDataPopularsI18n = I18nRegistry<keyof typeof addDataPopularsI18n>;

packages/common/src/lib/widgets/add-data/add-data-populars/AddDataPopulars.svelte

packages/common/src/lib/widgets/add-data/add-data-populars/AddDataPopulars.svelte
<script lang="ts">
    import { type MapServiceConfiguration } from '$lib/api/managers/configuration';
    import type { AddDataPopularsI18n } from '$lib/widgets/add-data/add-data-populars/add-data-populars.i18n';
    import type { AddDataPopularsConfig } from '$lib/widgets/add-data/add-data-populars/add-data-populars.config';
    import { getMapManager } from '$lib/api/map';
    import CardList from '$lib/widgets/add-data/card-list/CardList.svelte';
    import { cn } from '$lib/components/shadcn/utils';
    import { getI18n } from '$lib/api/managers/i18n';
    import { highlightServiceInToc } from '$lib/widgets/toc/toc.utils';
    import { getWidgetManager } from '$lib/api/managers/widget';
    import { getTopicManager } from '$lib/api/managers/topic';


    interface Props {
        config: AddDataPopularsConfig;
        i18nRegistry: AddDataPopularsI18n;
        class?: string;
    }


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


    const i18n = getI18n(i18nRegistry);
    const mapManager = getMapManager();
    const widgetManager = getWidgetManager();
    const topic = getTopicManager();


    function onItemClick(service: MapServiceConfiguration, source: 'populars' | 'trending') {
        if (!mapManager.layerList.findById(service.id)) {
            const layer = mapManager.addMapService(service);
            topic.publish({
                type: 'AddData-add-mapService-from-populars',
                layer,
                source,
            });
        }
        highlightServiceInToc(service.id, widgetManager, mapManager);
    }
</script>


<div class={cn('gv-max-h-[55vh] gv-overflow-y-auto gv-flex gv-flex-col gv-gap-5 gv-pb-0.5', className)}>
    <CardList
        items={config.popularServices}
        onItemClick={(service) => onItemClick(service, 'populars')}
        {i18nRegistry}
        dataTestIdPrefix="popular-"
    />


    {#if config.trendingServices.length}
        <div class="gv-flex gv-flex-col gv-gap-1">
            <span class="gv-font-bold gv-text-lg">{i18n('trending-data')}</span>
            <CardList
                items={config.trendingServices}
                onItemClick={(service) => onItemClick(service, 'trending')}
                {i18nRegistry}
                dataTestIdPrefix="trending-"
            />
        </div>
    {/if}
</div>

packages/common/src/lib/widgets/add-data/add-data-populars/AddDataPopularsWidget.svelte

packages/common/src/lib/widgets/add-data/add-data-populars/AddDataPopularsWidget.svelte
<script lang="ts">
    import AddDataPopulars from './AddDataPopulars.svelte';
    import type { AddDataPopularsProps } from './add-data-populars.declaration';


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


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

Aller plus loin