feat: add i18n

ICIJ · Jul 26, 2024 · cb90c54 · cb90c54
1 parent 521b0a0
commit cb90c54
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 16 deletions.
diff --git a/src/components/Document/DocumentUserActions/DocumentUserActions.vue b/src/components/Document/DocumentUserActions/DocumentUserActions.vue
@@ -1,28 +1,22 @@
 <template>
   <b-button-group class="document-user-actions">
-    <document-user-actions-entry v-if="showTags" :hide-label="hideLabels" icon="tag" label="Tags" value="3+" />
     <document-user-actions-entry
-      v-if="showComments"
+      v-for="action in actionsDisplayed"
+      :key="action.name"
       :hide-label="hideLabels"
-      icon="chats-teardrop"
-      label="Comments"
-      value="3+"
+      :icon="action.icon"
+      :label="action.label"
+      :value="action.value"
     />
-    <document-user-actions-entry
-      v-if="showRecommended"
-      :hide-label="hideLabels"
-      icon="user-gear"
-      label="Recommended by"
-      value="3+"
-    />
-    <document-user-actions-entry v-if="showFolders" :hide-label="hideLabels" icon="folder" label="Folder" value="3+" />
-    <document-user-actions-entry v-if="showNotes" :hide-label="hideLabels" icon="note-blank" label="Notes" value="3+" />
   </b-button-group>
 </template>
 <script setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+
 import DocumentUserActionsEntry from '@/components/Document/DocumentUserActions/DocumentUserActionsEntry'
 defineOptions({ name: 'DocumentUserActions' })
-defineProps({
+const props = defineProps({
   showTags: {
     type: Boolean,
     default: true
@@ -46,6 +40,67 @@ defineProps({
   hideLabels: {
     type: Boolean,
     default: false
+  },
+  tags: {
+    type: Number,
+    default: 0
+  },
+  comments: {
+    type: Number,
+    default: 0
+  },
+  recommended: {
+    type: Number,
+    default: 0
+  },
+  folders: {
+    type: Number,
+    default: 0
+  },
+  notes: {
+    type: Number,
+    default: 0
+  }
+})
+const { t } = useI18n()
+const actions = [
+  {
+    name: 'tags',
+    show: props.showTags,
+    label: t('documentUserActions.tags'),
+    value: props.tags.toString(),
+    icon: 'tag'
+  },
+  {
+    name: 'comments',
+    show: props.showComments,
+    label: t('documentUserActions.comments'),
+    value: props.comments.toString(),
+    icon: 'chats-teardrop'
+  },
+  {
+    name: 'recommended',
+    show: props.showRecommended,
+    label: t('documentUserActions.recommended'),
+    value: props.recommended.toString(),
+    icon: 'user-gear'
+  },
+  {
+    name: 'folders',
+    show: props.showFolders,
+    label: t('documentUserActions.folders'),
+    value: props.folders.toString(),
+    icon: 'folder'
+  },
+  {
+    name: 'notes',
+    show: props.showNotes,
+    label: t('documentUserActions.notes'),
+    value: props.notes.toString(),
+    icon: 'note-blank'
   }
+]
+const actionsDisplayed = computed(() => {
+  return actions.filter((action) => action.show === true)
 })
 </script>
diff --git a/src/lang/en.json b/src/lang/en.json
@@ -178,6 +178,13 @@
     "previous": "Previous",
     "next": "Next"
   },
+  "documentUserActions": {
+    "tags":"Tags",
+    "comments":"Comments",
+    "recommended":"Recommended by",
+    "folders":"Folders",
+    "notes":"Notes"
+  },
   "documentMetadataActions": {
     "copy": "Copy this metadata value",
     "search": "Search this metadata value",

diff --git a/src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js b/src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js
@@ -21,6 +21,11 @@ export const Complete = {
     showComments: true,
     showRecommended: true,
     showFolders: true,
-    showNotes: true
+    showNotes: true,
+    tags: '3',
+    comments: '4',
+    recommended: '0',
+    folders: '5',
+    notes: '3'
   }
 }