Add geo specific display on OGC service resources (#609)

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Add geo specific display on OGC service resources [#609](https://github.com/datagouv/udata-front/pull/609)
 
 ## 6.0.5 (2024-11-29)
 

udata_front/theme/gouvfr/datagouv-components/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Add geo specific display on OGC service resources [#609](https://github.com/datagouv/udata-front/pull/609)
 
 ## 2.0.2 (2024-11-19)
 

udata_front/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.stories.ts

@@ -179,6 +179,19 @@ export const ResourceBinary: StoryObj<typeof meta> = {
 };
 
 
+export const ResourceOGCService: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { ResourceAccordion },
+    setup() {
+      return { args };
+    },
+    template: '<ResourceAccordion v-bind="args" />',
+  }),
+  args: { ...argsWithSchema, resource: { ...argsWithSchema.resource, format: "ogc:wms", title: "point_eau_qualito",
+  } },
+};
+
+
 export const ResourceUrl: StoryObj<typeof meta> = {
   render: (args) => ({
     components: { ResourceAccordion },

udata_front/theme/gouvfr/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -52,6 +52,23 @@
             {{ $t('Visit') }}
           </a>
         </p>
+        <p class="fr-col-auto fr-ml-3v fr-m-0 z-2" v-else-if="ogcService">
+          <button
+            :id="resource.id + '-copy'"
+            :data-clipboard-text="resource.url"
+            class="fr-btn fr-btn--sm"
+          >
+            <span>
+                <OhVueIcon
+                  :height="16"
+                  :width="16"
+                  name="ri-file-copy-line"
+                  class="copy-icon fr-mr-2v"
+                />
+            </span> 
+            {{ t('Copy link') }}
+          </button>
+        </p>
         <p class="fr-col-auto fr-ml-3v fr-m-0" v-else>
           <a
             :href="resource.latest"
@@ -171,6 +188,9 @@ import TabPanel from "../Tabs/TabPanel.vue";
 import { trackEvent } from "../../helpers/matomo";
 import CopyButton from "../CopyButton/CopyButton.vue";
 import { getResourceFormatIconSvg } from "../../helpers/resources";
+import { OhVueIcon } from 'oh-vue-icons';
+
+const OGC_SERVICES_FORMATS = ['ogc:wfs', 'ogc:wms', 'wfs', 'wms'];
 
 const props = withDefaults(defineProps<{
   datasetId: string,
@@ -197,6 +217,8 @@ const hasPreview = computed(() => {
 
 const format = computed(() => getResourceFormatIconSvg(props.resource) ? props.resource.format : t("File"))
 
+const ogcService = computed(() => OGC_SERVICES_FORMATS.includes(props.resource.format))
+
 const open = ref(props.expandedOnMount);
 const toggle = () => {
   open.value = ! open.value;

udata_front/theme/gouvfr/datagouv-components/src/helpers/resources.ts

@@ -4,6 +4,8 @@ import archive from '../../../templates/svg/resources/archive.svg';
 import documentation from '../../../templates/svg/resources/documentation.svg';
 import link from '../../../templates/svg/resources/link.svg';
 import table from '../../../templates/svg/resources/table.svg';
+import map from '../../../templates/svg/resources/map.svg';
+import globe from '../../../templates/svg/resources/globe.svg';
 
 export function getResourceFormatIconSvg(resource: Resource): string | null {
     switch (resource.format?.trim()?.toLowerCase()) {
@@ -25,7 +27,6 @@ export function getResourceFormatIconSvg(resource: Resource): string | null {
         case 'gpx':
         case 'shx':
         case 'ovr':
-        case 'geojson':
         case 'gpkg':
         case 'grib2':
         case 'dbf':
@@ -60,6 +61,13 @@ export function getResourceFormatIconSvg(resource: Resource): string | null {
         case 'xlsx':
         case 'parquet':
             return table;
+        case 'geojson':
+            return map;
+        case 'ogc:wfs':
+        case 'ogc:wms':
+        case 'wfs':
+        case 'wms':
+            return globe;
         default:
             return null;
     }