@datagouv/components-next 1.0.2-dev.0 → 1.0.2-dev.2

package/dist/{vue3-xml-viewer.common-BjA4LdSC.js → vue3-xml-viewer.common-BRxsqI9j.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-CrSRA2X-.js";
+import { b as Ke } from "./main-B2kXxWRG.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.0",
+  "version": "1.0.2-dev.2",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -228,6 +228,52 @@
                     />
                   </dd>
                 </template>
+                <template v-if="wfsFormats.length">
+                  <dt class="font-bold fr-text--sm fr-mb-0">
+                    <div class="flex gap-1 items-center">
+                      {{ t('Formats exportés depuis le service WFS') }}
+                      <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
+                      <Tooltip>
+                        <RiInformationLine
+                          class="flex-none size-4"
+                          :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
+                          aria-hidden="true"
+                        />
+                        <template #tooltip>
+                          <p class="text-sm font-normal mb-0">
+                            {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
+                          </p>
+                          <p class="text-sm font-normal mb-0">
+                            {{ t(`Le nombre de features téléchargées peut être limité.`) }}
+                          </p>
+                        </template>
+                      </Tooltip>
+                    </div>
+                  </dt>
+                  <dd
+                    v-for="wfsFormat in wfsFormats"
+                    :key="wfsFormat.format"
+                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+                  >
+                    <span>
+                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+                      <a
+                        :href="wfsFormat.url"
+                        class="fr-link"
+                        rel="ugc nofollow noopener"
+                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
+                      >
+                        <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
+                      </a>
+                    </span>
+                    <CopyButton
+                      :label="t('Copier le lien')"
+                      :copied-label="t('Lien copié !')"
+                      :text="wfsFormat.url"
+                      class="relative"
+                    />
+                  </dd>
+                </template>
               </dl>
             </div>
             <div v-if="tab.key === 'swagger'">
@@ -251,7 +297,7 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
+import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
@@ -263,6 +309,7 @@ import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
+import Tooltip from '../Tooltip.vue'
 import Preview from '../ResourceAccordion/Preview.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
@@ -316,6 +363,8 @@ const {
   ogcService,
   ogcWms,
   generatedFormats,
+  wfsFormats,
+  defaultWfsProjection,
   isResourceUrl,
   tabsOptions,
 } = useResourceCapabilities(() => props.resource, () => props.dataset)

package/src/composables/useResourceCapabilities.ts

@@ -4,8 +4,9 @@ import { useTranslation } from './useTranslation'
 import { useHasTabularData } from './useHasTabularData'
 import { detectOgcService } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
-import type { Resource } from '../types/resources'
+import type { Resource, WfsMetadata } from '../types/resources'
 import type { Dataset, DatasetV2 } from '../types/datasets'
+import { getWfsExportFormats } from '../functions/resourceCapabilities'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
@@ -67,6 +68,17 @@ export function useResourceCapabilities(
     return formats
   })
 
+  const wfsFormats = computed(() => {
+    return getWfsExportFormats(toValue(resource))
+  })
+
+  const defaultWfsProjection = computed<string | null>(() => {
+    const r = toValue(resource)
+    const wfsMetadata = r.extras['analysis:parsing:ogc_metadata'] as WfsMetadata | null
+    if (!wfsMetadata || wfsMetadata.format !== `wfs`) return null
+    return wfsMetadata?.detected_layer?.default_crs ?? null
+  })
+
   const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
 
   const tabsOptions = computed(() => {
@@ -111,6 +123,8 @@ export function useResourceCapabilities(
     ogcService,
     ogcWms,
     generatedFormats,
+    wfsFormats,
+    defaultWfsProjection,
     isResourceUrl,
     tabsOptions,
   }

package/src/functions/api.ts

@@ -1,9 +1,17 @@
-import { ref, toValue, watchEffect, onMounted, type ComputedRef, type Ref } from 'vue'
+import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
+function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
+  const val = toValue(obj)
+  if (!val || typeof val !== 'object') return val
+  return Object.fromEntries(
+    Object.entries(val).map(([k, v]) => [k, toValue(v as MaybeRefOrGetter<unknown>)]),
+  )
+}
+
 export async function useFetch<DataT, ErrorT = never>(
   url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
   options?: UseFetchOptions<DataT>,
@@ -23,8 +31,8 @@ export async function useFetch<DataT, ErrorT = never>(
   const execute = async () => {
     const urlValue = toValue(url)
     if (!urlValue) return
-    const params = toValue(options?.params)
-    const query = toValue(options?.query)
+    const params = deepToValue(options?.params)
+    const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
       data.value = await ofetch<DataT | null>(urlValue, {

package/src/functions/resourceCapabilities.ts

@@ -0,0 +1,55 @@
+import type { Resource, WfsMetadata, OgcLayerInfo } from '../types/resources'
+
+const WFS_EXPORT_FORMATS = [
+  {
+    name: 'csv',
+    mimetype: 'csv',
+  },
+  {
+    name: 'json',
+    mimetype: 'application/json',
+  },
+  {
+    name: 'shp',
+    mimetype: 'SHAPE-ZIP',
+  },
+  {
+    name: 'gml',
+    mimetype: 'application/gml+xml',
+  },
+  {
+    name: 'kml',
+    mimetype: 'KML',
+  },
+  {
+    name: 'gpkg',
+    mimetype: 'application/geopackage+sqlite3',
+  },
+]
+
+function buildWfsDownloadUrl(baseUrl: string, wfsMetadata: WfsMetadata, format: { name: string, mimetype: string }, layer: OgcLayerInfo) {
+  const version = wfsMetadata.version
+  const query = new URLSearchParams({
+    SERVICE: 'WFS',
+    REQUEST: 'GetFeature',
+    VERSION: version,
+    ...(Number(version.split('.')[0]) >= 2 ? { TYPENAMES: layer.name } : { TYPENAME: layer.name }),
+    OUTPUTFORMAT: format.mimetype,
+    ...(layer.default_crs ? { SRSNAME: layer.default_crs } : {}),
+  })
+  return `${baseUrl.split('?')[0]}?${query.toString()}`
+}
+
+export function getWfsExportFormats(resource: Pick<Resource, 'extras' | 'url'>) {
+  const wfsMetadata = resource.extras['analysis:parsing:ogc_metadata'] as WfsMetadata | null
+  if (!wfsMetadata || wfsMetadata.format !== `wfs`) return []
+  const outputFormats = wfsMetadata.output_formats.map((format: string) => format.toLowerCase())
+  const layer = wfsMetadata.detected_layer
+  if (!layer) return []
+  const formats = WFS_EXPORT_FORMATS.filter(format => outputFormats.includes(format.mimetype.toLowerCase()))
+    .map(format => ({
+      url: buildWfsDownloadUrl(resource.url, wfsMetadata, format, layer),
+      format: format.name,
+    }))
+  return formats
+}

package/src/types/resources.ts

@@ -41,3 +41,13 @@ export interface ResourceGroup {
   total: number
   items: Resource[]
 }
+
+export type OgcLayerInfo = { name: string, default_crs: string | null }
+
+export type WfsMetadata = {
+  format: string
+  layers: Array<OgcLayerInfo>
+  version: string
+  detected_layer: OgcLayerInfo | null
+  output_formats: Array<string>
+}

package/dist/Swagger.client-B-2Q16qa.js

@@ -1,4 +0,0 @@
-import { i as f } from "./main-CrSRA2X-.js";
-export {
-  f as default
-};