From 12de073eafc9ecaa448cb368891cb9676a7bd387 Mon Sep 17 00:00:00 2001
From: Mathieu Massaviol <mathieu.massaviol@univ-amu.fr>
Date: Fri, 8 Nov 2024 12:11:41 +0100
Subject: [PATCH] Refactor searchResult and text truncate #29
---
src/components/OcBreadcrumb/OcBreadcrumb.vue | 15 +++-----
.../OcSearchResultCard/OcSearchResultCard.vue | 35 +++++++------------
src/helpers/text.ts | 7 ++++
3 files changed, 23 insertions(+), 34 deletions(-)
create mode 100644 src/helpers/text.ts
diff --git a/src/components/OcBreadcrumb/OcBreadcrumb.vue b/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 121a7ca..f2a3514 100644
--- a/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/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 [
diff --git a/src/components/Search/OcSearchResultCard/OcSearchResultCard.vue b/src/components/Search/OcSearchResultCard/OcSearchResultCard.vue
index 08ed9b3..a3d97c9 100644
--- a/src/components/Search/OcSearchResultCard/OcSearchResultCard.vue
+++ b/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
diff --git a/src/helpers/text.ts b/src/helpers/text.ts
new file mode 100644
index 0000000..cb84731
--- /dev/null
+++ b/src/helpers/text.ts
@@ -0,0 +1,7 @@
+export function truncateText(text: string, maxSize: number = 40) {
+ if (text.length > maxSize) {
+ return text.substring(0, maxSize) + ' ...'
+ } else {
+ return text
+ }
+}
--
GitLab