Create a OcSearchResultCard component #29

src/components/OcSearchResultCard/OcSearchResultCard.stories.ts

+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import OcSearchResultCard from './OcSearchResultCard.vue'
+
+const meta: Meta<typeof OcSearchResultCard> = {
+  component: OcSearchResultCard
+}
+
+export default meta
+type Story = StoryObj<typeof OcSearchResultCard>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { OcSearchResultCard },
+    setup() {
+      return { args }
+    },
+    template: '<OcSearchResultCard v-bind="args" />'
+  }),
+  args: {
+    searchResult: {
+      '@id': 'urn:testdataset:nakala:6d79f9ed-e10e-4eea-8bfe-93c0bdf370dc',
+      '@type': ['http://www.w3.org/ns/dcat#Dataset'],
+      identifier: 'test-6d79f9ed-e10e-4eea-8bfe-93c0bdf370dc',
+      creator: [
+        {
+          '@id': 'urn:testdataset:nakala:benedictemadon',
+          familyName: 'Madon',
+          givenName: 'Bénédicte',
+          mbox: 'mailto:benedicte.madon@gmail.com',
+          name: 'Madon, Bénédicte'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:eliearnaud',
+          familyName: 'Arnaud',
+          givenName: 'Elie',
+          mbox: 'mailto:elie.arnaud@mnhn.fr',
+          name: 'Arnaud, Elie'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:emilielerigoleur',
+          familyName: 'Lerigoleur',
+          givenName: 'Emilie',
+          mbox: 'mailto:emilie.lerigoleur@univ-tlse2.fr',
+          name: 'Lerigoleur, Emilie'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:ericfoulquier',
+          familyName: 'Foulquier',
+          givenName: 'Eric',
+          mbox: 'mailto:eric.foulquier@univ-brest.fr',
+          name: 'Foulquier, Eric'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:etiennejeannesson',
+          familyName: 'Jeannesson',
+          givenName: 'Etienne',
+          mbox: 'mailto:etienne.jeannesson@ofb.gouv.fr',
+          name: 'Jeannesson, Etienne'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:iwanleberre',
+          familyName: 'Le Berre',
+          givenName: 'Iwan',
+          mbox: 'mailto:iwan.leberre@univ-brest.fr',
+          name: 'Le Berre, Iwan'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:jeanlucjung',
+          familyName: 'Jung',
+          givenName: 'Jean-Luc',
+          mbox: 'mailto:jean-luc.jung@mnhn.fr',
+          name: 'Jung, Jean-Luc'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:juliensananikone',
+          familyName: 'Sananikone',
+          givenName: 'Julien',
+          mbox: 'mailto:julien.sananikone@mnhn.fr',
+          name: 'Sananikone, Julien'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:laurentbouveret',
+          familyName: 'Bouveret',
+          givenName: 'Laurent',
+          mbox: 'mailto:laurent.bouveret@gmail.com',
+          name: 'Bouveret, Laurent'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:lorrainecoche',
+          familyName: 'Coché',
+          givenName: 'Lorraine',
+          mbox: 'mailto:lorraine.coche@gmail.com',
+          name: 'Coché, Lorraine'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:maximesebe',
+          familyName: 'Sèbe',
+          givenName: 'Maxime',
+          mbox: 'mailto:maxime.sebe@gmail.com',
+          name: 'Sèbe, Maxime'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:nadegegandilhon',
+          familyName: 'Gandilhon',
+          givenName: 'Nadège',
+          mbox: 'mailto:ngandilhon75@gmail.com',
+          name: 'Gandilhon, Nadège'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:pascaljeanlopez',
+          familyName: 'Lopez',
+          givenName: 'Pascal Jean',
+          mbox: 'mailto:pjlopez@mnhn.fr',
+          name: 'Lopez, Pascal Jean'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:romaindavid',
+          familyName: 'David',
+          givenName: 'Romain',
+          mbox: 'mailto:david.romain@gmail.com',
+          name: 'David, Romain'
+        },
+        {
+          '@id': 'urn:testdataset:nakala:yvanlebras',
+          familyName: 'Le Bras',
+          givenName: 'Yvan',
+          mbox: 'mailto:yvan.le-bras@mnhn.fr',
+          name: 'Le Bras, Yvan'
+        }
+      ],
+      description: {
+        fr: "Base de données collectée dans le cadre du stage de master 2 Lorraine Coché \"Inventaire et structuration des données d'observation des mammifères marins autour de la Guadeloupe\" en 2020 (Master Écosystèmes marins tropicaux de l'Université des Antilles). Cette base de données a été constituée dans un esprit de science participative. Elle centralise et harmonise les données d'observation collectées par l'équipe du Sanctuaire Agoa (Aire Marine Protégée), l'OMMAG (Observatoire des Mammifères Marins de l'Archipel Guadeloupéen), BREACH Antilles, et les sociétés de whale-watching Cétacés Caraïbes, Guadeloupe Evasion Découverte et Aventures Marines.",
+        en: "Database collected as part of Lorraine Coché's Master 2 course entitled \"Inventory and structuring of marine mammal observation data around Guadeloupe\" in 2020 (Master's degree in Tropical Marine Ecosystems at the University of the West Indies). This database has been set up in the spirit of participatory science. It centralises and harmonises the observation data collected by the Agoa Sanctuary team (Marine Protected Area), OMMAG (Observatoire des Mammifères Marins de l'Archipel Guadeloupéen), BREACH Antilles, and the whale-watching companies Cétacés Caraïbes, Guadeloupe Evasion Découverte and Aventures Marines."
+      },
+      title: {
+        fr: "KAKILA, Base de données d'observation des mammifères marins autour de l'archipel de la Guadeloupe dans le sanctuaire AGOA - Antilles françaises",
+        en: 'KAKILA, Marine mammal observation database around the Guadeloupe archipelago in the AGOA sanctuary - French West Indies'
+      },
+      distribution: [
+        'urn:testdistribution:nakala:kakila-database',
+        'urn:testdistribution:dataindores:kakila-database'
+      ],
+      parentCatalog:{
+        '@id': "https://data.driihm.fr/catalogs/driihm2",
+        '@type': ['http://www.w3.org/ns/dcat#Catalog'],
+        'identifier': "2af4cfa0-9f3b-11ee-a39a-d6e96336453a",
+        'title': {"fr":"LabEx DRIIHM 2","en":"DRIIHM LabEx 2"},
+        'graph': ["ex:sandbox2"]
+      }
+    }
+  }
+}

src/components/OcSearchResultCard/OcSearchResultCard.vue

+<template>
+  <div
+    class="rounded-md shadow-oc"
+  >
+  <div class="p-4">
+    <div id="title" class="font-semibold text-2xl">
+      <i :class="icon" :title="t('resourceType.'+dcatType)" class="mr-1"></i>
+      {{ title }}
+    </div>
+    <div id="subtitle" class="text-sm text-gray-600">{{ subtitle }}</div>
+    <div id="creators" class="mt-1 mb-1">{{ creators }}</div>
+    <div id="description">
+      <p class="font-medium">{{ t('search.searchResult.description') }}</p>
+      <p class="text-justify text-sm">{{ description }}</p>
+    </div>
+  </div>
+  <div id="footer" class="pl-4 pr-4 pt-2 pb-2 bg-gray-100 rounded-b-md text-sm flex flex-row gap-2 justify-between">
+    <span v-if="dcatType===ResourceType.DATASET">{{ distributions +' '+  t('search.searchResult.distributions')}}</span>
+    <span v-if="parentCatalogueTitle">{{ t('search.searchResult.parentCatalogue') + ' : ' + parentCatalogueTitle }}</span>
+  </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useTranslateValue } from '@/composables/useTranslateValue'
+import type { OcSearchResult } from '@/declarations';
+import { iconsDict } from '@/helpers/icons';
+import { ResourceType, type2ResourceType } from '@/helpers/resourceType';
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n()
+const { translateValue } = useTranslateValue()
+
+const props = defineProps({
+  searchResult: {
+    type: Object as PropType<OcSearchResult>,
+    required: true
+  }
+})
+
+const title = computed(() => translateValue(props.searchResult.title))
+const dcatType = computed(() => {
+  const compatibleTypes = props.searchResult['@type'].filter((type) => type in type2ResourceType)
+  return type2ResourceType[compatibleTypes[0]] ?? ResourceType.UNKNOWN
+})
+const icon = computed(() => {
+  return iconsDict[dcatType.value as string] ?? ''
+})
+const subtitle = computed(() => {
+  return props.searchResult.identifier + " / Version " + "1.0.0"
+})
+const creators = computed(() => props.searchResult.creator?.map((creator) => creator.name).join('; '))
+const description = computed(() => translateValue(props.searchResult.description))
+const parentCatalogueTitle = computed(() => translateValue(props.searchResult.parentCatalog?.title))
+const parentCatalogueIdentifier = computed(() => props.searchResult.parentCatalog?.identifier)
+const distributions = computed(() => props.searchResult.distribution?.length ?? 0)
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/declarations.ts

@@ -130,6 +130,17 @@ export type OcDistributionSummary = OcResource & {
   license?: string
 }
 
+/** 
+ * A representation of a search result used
+ * for search page results cards
+ */
+export type OcSearchResult = OcResource & {
+  version?: string,
+  creator?: Array<OcPerson | OcOrganization>
+  distribution?: string[]
+  parentCatalog?: OcCatalog
+}
+
 export type OcTreeNode = OcResource & {
   children: Array<OcTreeNode>
   catalog?: Array<OcTreeNode | string>

src/locales/en.ts

@@ -342,5 +342,19 @@ Greetings,
         'An error has occurred while updating your catalog. Please try again later or contact the site administrator.',
       seeCatalogPage: 'Go back to the catalog page',
     }
+  },
+  search: {
+    searchResult: {
+      description: "Description",
+      distributions: "Distributions",
+      parentCatalogue: "Parent catalogue"
+    }
+  },
+  resourceType: {
+    'catalog': 'catalogue',
+    'dataset': 'dataset',
+    'distribution': 'distribution',
+    'service': 'service',
+    'unknown': 'unknown',
   }
 }

src/locales/fr.ts

@@ -357,5 +357,19 @@ Cordialement,
         'Une erreur est survenue lors de la mise à jour de votre catalogue. Merci de réessayer plus tard ou bien de contacter l\'administrateur du site.',
       seeCatalogPage: 'Retourner à la page du catalogue',
     },
+  },
+  search: {
+    searchResult: {
+      description: "Description",
+      distributions: "Distributions",
+      parentCatalogue: "Catalogue parent"
+    }
+  },
+  resourceType: {
+    'catalog': 'catalogue',
+    'dataset': 'jeu de données',
+    'distribution': 'distribution',
+    'service': 'service',
+    'unknown': 'inconnu',
   }
 }