Refactor searchResult and text truncate #29

src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -5,11 +5,11 @@
       <h1>{{ index }}</h1>
       <OcLink v-if="!!item.to" :to="item.to">
         <span v-if="item.icon" :class="item.icon" class="text-gray-400 text-xs mr-1" />
-        <span class="text-gray-400 text-xs" :title="item.label">{{ truncateLabel(item.label) }}</span>
+        <span class="text-gray-400 text-xs" :title="item.label">{{ truncateText(item.label) }}</span>
       </OcLink>
       <span v-else>
         <span v-if="item.icon" :class="item.icon" class="text-gray-400 text-xs mr-1" />
-        <span class="text-gray-400 text-xs" :title="item.label">{{ truncateLabel(item.label) }}</span>
+        <span class="text-gray-400 text-xs" :title="item.label">{{ truncateText(item.label) }}</span>
       </span>
     </template>
   </Breadcrumb>
@@ -21,7 +21,8 @@ import type { MenuItem } from 'primevue/menuitem'
 import type { OcBreadcrumbItem } from '@/declarations'
 import { iconsDict } from '@/helpers/icons'
 import { computed } from 'vue'
-import OcLink from '../OcLink.vue'
+import OcLink from '@/components/OcLink.vue'
+import { truncateText } from '@/helpers/text'
 
 const props = defineProps<{
   items: OcBreadcrumbItem[]
@@ -43,14 +44,6 @@ function ocBreadcrumbItem2menuItem(item: OcBreadcrumbItem): MenuItem {
   }
 }
 
-function truncateLabel(label:string, maxSize: number=40){
-  if (label.length > maxSize){
-    return label.substring(0,maxSize) + '...'
-  } else {
-    return label
-  }
-}
-
 const formattedItems = computed(() => {
   if (props.items.length > 4){
     return [

src/components/Search/OcSearchResultCard/OcSearchResultCard.vue

@@ -2,8 +2,8 @@
   <div
     class="rounded-md shadow-md border bg-gray-100"
   >
-  <div class="px-4 pt-4">
-    <div id="title" class="font-semibold text-2xl mb-2">
+  <div class="p-4">
+    <div id="title" class="font-semibold text-xl mb-3">
       <i :class="iconsDict[dcatType] ?? ''" :title="t('resourceType.'+dcatType)" class="fa-lg fa-fw"></i>
       <OcVisibilityIcon
         v-if="visibility !== 'public'"
@@ -12,7 +12,7 @@
         :color="props.community.color"
       />
       <OcLink
-        class="ml-1"
+        class="ml-2"
         :to="{
           name: 'community.resource',
           params: {
@@ -22,26 +22,17 @@
           }
         }"
       >
-        {{ title }}
+        {{ translateValue(props.searchResult.title) }}
       </OcLink>
     </div>
-    <div id="subtitle" class="text-sm text-gray-600">
+    <div id="subtitle" class="text-sm text-gray-600 mb-4">
       <span>{{ t('search.searchResult.id') + ': ' + props.searchResult.identifier }}</span>
       <span v-if="props.searchResult.version"> | {{ t('search.searchResult.version') + ': ' + props.searchResult.version }}</span>
     </div>
-    <div v-if="creators" id="creators" class="mt-1 mb-1">{{ creators }}</div>
-    <div v-if="description" id="description">
-      <p class="font-medium">{{ t('search.searchResult.description') }}</p>
-      <ScrollPanel 
-        style="width: 100%; max-height: 150px;"
-        :dt="{
-          bar: {
-            background: `black`
-          }
-        }"
-      >
-        <p class="text-justify text-sm">{{ description }}</p>
-      </ScrollPanel>
+    <div v-if="creators" id="creators" class="mb-4">{{ creators }}</div>
+    <div v-if="props.searchResult.description" id="description">
+      <p class="font-medium mb-1">{{ t('search.searchResult.description') }}</p>
+      <p class="text-justify text-sm">{{ truncateText(translateValue(props.searchResult.description), 500) }}</p>
     </div>
   </div>
   <div id="footer" class="pl-4 pr-4 pt-2 pb-2 bg-gray-200 rounded-b-md text-sm flex flex-row gap-2 justify-between">
@@ -104,8 +95,8 @@ import { computed, ref, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n';
 import OcLink from '@/components/OcLink.vue';
 import { getResourceVisibility } from '@/helpers/resourceVisibility';
+import { truncateText } from '@/helpers/text'
 import OcVisibilityIcon from '@/components/OcVisibilityIcon/OcVisibilityIcon.vue';
-import ScrollPanel from 'primevue/scrollpanel';
 import Popover from 'primevue/popover';
 import Button from 'primevue/button';
 
@@ -127,7 +118,6 @@ const props = defineProps({
   }
 })
 
-const title = computed(() => translateValue(props.searchResult.title))
 const dcatType = getResourceTypeFromAtType(props.searchResult['@type'])
 
 const visibility = getResourceVisibility(props.community, props.searchResult, props.userPrivateGraph)
@@ -147,14 +137,13 @@ const creatorName = (creator: OcPerson | OcOrganization) => {
   else if (Object.keys(creator).length === 1){ return creator['@id'] }
 
   else if (creator.name){
-    return translateValue(creator.name)
+    if (typeof creator.name === 'string'){ return creator.name }
+    else { return translateValue(creator.name) }
   } else {
     return creator.familyName + ' ' + (creator.firstName ?? creator.givenName ?? '')
   }
 }
 
-const description = computed(() => translateValue(props.searchResult.description))
-
 const catalogues = props.searchResult.catalog?.length ?? 0
 const datasets = props.searchResult.dataset?.length ?? 0
 const distributions = props.searchResult.distribution?.length ?? 0

src/helpers/text.ts

+export function truncateText(text: string, maxSize: number = 40) {
+  if (text.length > maxSize) {
+    return text.substring(0, maxSize) + ' ...'
+  } else {
+    return text
+  }
+}