Merge branch 'translate-value-as-composable-2' into 'main'

translateValue as composable

See merge request !13

src/components/OcCardCommunity/OcCardCommunity.vue

@@ -5,20 +5,16 @@
     <p class="m-0 font-bold line-clamp-5">
       {{ description }}
     </p>
-    <OcLink
-      :title="t('home.goToCommunity', { label: title })"
-      :to="'/community/' + community.name"
-      class="absolute top-0 left-0 h-full w-full"
-    />
+    <OcLink :title="t('home.goToCommunity', { label: title })" :to="'/community/' + community.name"
+      class="absolute top-0 left-0 h-full w-full" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, type PropType } from 'vue';
 import { type OcCommunity } from '../../declarations';
-import { useI18n } from 'vue-i18n';
 import OcLink from '@/components/OcLink.vue';
-import { translateValue } from '@/helpers/i18n';
+import { useTranslateValue } from '@/composables/translateValue';
 
 const props = defineProps({
   community: {
@@ -27,10 +23,10 @@ const props = defineProps({
   }
 })
 
-const { locale, fallbackLocale, t } = useI18n()
+const { translateValue } = useTranslateValue()
 
-const title = computed(() => translateValue(props.community.title, locale.value, fallbackLocale.value) ?? '')
-const description = computed(() => translateValue(props.community.description, locale.value, fallbackLocale.value) ?? '')
+const title = computed(() => translateValue(props.community.title))
+const description = computed(() => translateValue(props.community.description))
 const logoUrl = computed(() => props.community.logo ?? null)
 const color = computed(() => props.community.color ?? 'olivine')
-</script>
\ No newline at end of file
+</script>

src/components/OcTree/OcTree.vue

@@ -2,20 +2,20 @@
   <div :class="`p-4 bg-${props.color}-300`">
     <h3 v-if="props.title" class="font-title text-4xl uppercase font-bold text-white mb-4">{{ props.title }}</h3>
     <Tree id="tree" :class="`bg-${props.color}-300`" :value="formattedNodes" v-model:selection-keys="selectedKey"
-      selection-mode="single" @node-select="node => $emit('nodeSelect', node)" @node-expand="node => $emit('nodeExpand', node)" class="pl-0"></Tree>
+      selection-mode="single" @node-select="node => $emit('nodeSelect', node)"
+      @node-expand="node => $emit('nodeExpand', node)" class="pl-0"></Tree>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Tree from 'primevue/tree';
-import type { OcTreeNode } from '@/declarations';
-import type { TreeNode } from 'primevue/treenode';
+import { computed, ref } from 'vue'
+import Tree from 'primevue/tree'
+import type { OcTreeNode } from '@/declarations'
+import type { TreeNode } from 'primevue/treenode'
 import { type2IconsDict } from '@/helpers/icons'
-import { translateValue } from '@/helpers/i18n';
+import { useTranslateValue } from '@/composables/translateValue'
 
-const { locale, fallbackLocale } = useI18n()
+const { translateValue } = useTranslateValue()
 
 const props = defineProps({
   nodes: {
@@ -43,7 +43,7 @@ defineEmits<{
 function OcTreeNode2PrimeVueTreeNode(node: OcTreeNode): TreeNode {
   return {
     key: node.identifier,
-    label: translateValue(node.title, locale.value, fallbackLocale.value) ?? '',
+    label: translateValue(node.title),
     icon: type2IconsDict[node.type as keyof typeof type2IconsDict] ?? '',
     children: node.children.map((childnode) => OcTreeNode2PrimeVueTreeNode(childnode))
   }

src/composables/translateValue.ts

+import type { LocalizedProperty } from "@/declarations"
+import { useI18n } from "vue-i18n"
+
+export function useTranslateValue() {
+
+  const { locale, fallbackLocale } = useI18n()
+
+  const translateValue = (localizedProperty: LocalizedProperty): string => {
+    // In our context, `fallbackLocale` is a string
+    // @see i18n configuration in `src/i18n.tssrc/i18n.ts`
+    return localizedProperty?.[locale.value] ?? localizedProperty?.[fallbackLocale.value as string] ?? localizedProperty?.['@none'] ?? ''
+  }
+
+  return { translateValue }
+}
\ No newline at end of file

src/declarations.ts

@@ -4,8 +4,8 @@ export type OcCommunity = {
   '@id': string
   identifier: string
   name: string,
-  title: undefined | { [locale: string]: string }
-  description: undefined | { [locale: string]: string }
+  title: LocalizedProperty
+  description: LocalizedProperty
   logo: undefined | string
   color: undefined | string
   isSpaceOf: undefined | string
@@ -38,7 +38,7 @@ export type OcTreeNode = {
   uri: string
   identifier: string
   title: { [locale: string]: string }
-  description: undefined | { [locale: string]: string }
+  description: LocalizedProperty
   type: string
   children: Array<OcTreeNode>
 }
@@ -52,3 +52,5 @@ export type HttpResponse = {
   status: number
   data: string
 }
+
+export type LocalizedProperty = undefined | { [locale: string]: string }

src/helpers/i18n.ts

-import type { FallbackLocale } from "vue-i18n"
-
-/**
- * Translate a value from a object compacted by
- * JsonLdProcessor with a `"@container": "@language"`
- * context.
- */
-export function translateValue(
-  localizedProperty: { [locale: string]: string } | undefined,
-  locale: string,
-  fallbackLocale: FallbackLocale
-): string | undefined {
-  // In our context, `fallbackLocale` is a string
-  // @see i18n configuration in `src/i18n.tssrc/i18n.ts`
-  return localizedProperty?.[locale] ?? localizedProperty?.[fallbackLocale as string] ?? localizedProperty?.['@none'] ?? undefined
-}
\ No newline at end of file

src/layout/OcLayoutBiColumn/OcLayoutBiColumn.vue

@@ -22,8 +22,8 @@
 
 <script setup lang="ts">
 import OcTopBar from '@/components/OcTopBar/OcTopBar.vue';
+import { useTranslateValue } from '@/composables/translateValue';
 import type { OcCommunity } from '@/declarations';
-import { translateValue } from '@/helpers/i18n';
 import { computed, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -37,7 +37,8 @@ const props = defineProps({
   }
 })
 
-const { locale, fallbackLocale, t } = useI18n()
+const { t } = useI18n()
+const { translateValue } = useTranslateValue()
 
 const firstColTitle = computed(() => {
   const defaultTitle = 'Open Common'
@@ -45,7 +46,7 @@ const firstColTitle = computed(() => {
     return defaultTitle
   }
 
-  return translateValue(props.community.title, locale.value, fallbackLocale.value) ?? defaultTitle
+  return translateValue(props.community.title)
 })
 
 const firstColDescription = computed(() => {
@@ -54,7 +55,7 @@ const firstColDescription = computed(() => {
     return defaultDescription
   }
 
-  return translateValue(props.community.description, locale.value, fallbackLocale.value) ?? defaultDescription
+  return translateValue(props.community.description)
 })
 
 const color = computed(() => props.community ? props.community.color ?? 'olivine' : 'primary')