From 9c963a2122b99ee00f86b3413b9bbd82962866e3 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 24 Sep 2024 11:04:17 +0200
Subject: [PATCH] Implement translator in vue components and use script setup
 syntax

---
 .../public/vuejs/_components/BadgeEntity.vue  |  49 ++-
 .../public/vuejs/_components/Confidential.vue |  27 +-
 .../EntityWorkflow/ListWorkflow.vue           |  90 ++----
 .../EntityWorkflow/ListWorkflowModal.vue      | 142 ++++-----
 .../EntityWorkflow/PickWorkflow.vue           |  86 ++---
 .../public/vuejs/_components/Modal.vue        |  40 +--
 .../Notification/NotificationReadToggle.vue   | 120 ++++---
 .../public/vuejs/_components/OpenWopiLink.vue | 300 ++++++++----------
 .../translations/messages+intl-icu.fr.yaml    |   6 +
 .../translations/messages.fr.yml              |  12 +
 10 files changed, 400 insertions(+), 472 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
index 4e99b7fd3..c15f44564 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -1,12 +1,12 @@
 <template>
 
     <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
-        {{ $t('person') }}
+        {{ trans(PERSON) }}
     </span>
 
     <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
         <template v-if="options.displayLong !== true">
-            {{ $t('thirdparty.thirdparty')}}
+            {{ trans(THIRDPARTY)}}
         </template>
 
         <i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
@@ -14,41 +14,36 @@
         <i class="fa fa-fw fa-user-md" v-else></i>
 
         <template v-if="options.displayLong === true">
-            <span v-if="entity.kind === 'child'">{{ $t('thirdparty.child')}}</span>
-            <span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company')}}</span>
-            <span v-else>{{ $t('thirdparty.contact')}}</span>
+            <span v-if="entity.kind === 'child'">{{ trans(THIRDPARTY_CONTACT_OF)}}</span>
+            <span v-else-if="entity.kind === 'company'">{{ trans(THIRDPARTY_COMPANY)}}</span>
+            <span v-else>{{ trans(THIRDPARTY_A_CONTACT)}}</span>
         </template>
     </span>
 
     <span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
-        {{ $t('user')}}
+        {{ trans(ACCEPTED_USERS)}}
     </span>
 
     <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
-        {{ $t('household')}}
+        {{ trans(HOUSEHOLD)}}
     </span>
 
 
 </template>
 
-<script>
-export default {
-    name: "BadgeEntity",
-    props: ['options', 'entity'],
-    i18n: {
-        messages: {
-            fr: {
-                person: "Usager",
-                thirdparty: {
-                    thirdparty: "Tiers",
-                    child: "Personne de contact",
-                    company: "Personne morale",
-                    contact: "Personne physique",
-                },
-                user: 'TMS',
-                household: 'Ménage',
-            }
-        }
-    }
-}
+<script setup lang="ts">
+import {
+    trans,
+    HOUSEHOLD,
+    ACCEPTED_USERS,
+    THIRDPARTY_A_CONTACT,
+    THIRDPARTY_COMPANY,
+    THIRDPARTY_CONTACT_OF,
+    PERSON, THIRDPARTY
+} from '../../../../../../../../../../assets/translator'
+
+const props = defineProps({
+        options: Object,
+        entity: Object
+    })
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index 837440524..6afded7b5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -9,23 +9,16 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: "Confidential",
-    data() {
-        return {
-            isBlurred: true,
-            toggleIcon: 'fa-eye',
-        };
-    },
-    methods : {
-        toggleBlur() {
-            console.log(this.positionBtnFar);
-            this.isBlurred = !this.isBlurred;
-            this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
-        },
-    },
-}
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isBlurred = ref(true);
+const toggleIcon = ref('fa-eye');
+
+const toggleBlur = () => {
+    isBlurred.value = !isBlurred.value;
+    toggleIcon.value = isBlurred.value ? 'fa-eye' : 'fa-eye-slash';
+};
 </script>
 
 <style scoped lang='scss'>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
index 0e16b522f..d321f8e0d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
@@ -44,17 +44,17 @@
             <div class="item-col flex-grow-1">
                <p v-if="isUserSubscribedToStep(w)">
                   <i class="fa fa-check fa-fw"></i>
-                  {{ $t('you_subscribed_to_all_steps') }}
+                  {{ trans(WORKFLOW_YOU_DESCRIBED_TO_ALL_STEPS) }}
                </p>
                <p v-if="isUserSubscribedToFinal(w)">
                   <i class="fa fa-check fa-fw"></i>
-                  {{ $t('you_subscribed_to_final_step') }}
+                  {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
                </p>
             </div>
             <div class="item-col">
                <ul class="record_actions">
                   <li>
-                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
+                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="trans(SEE)"></a>
                   </li>
                </ul>
             </div>
@@ -64,69 +64,47 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Popover from 'bootstrap/js/src/popover';
+import { onMounted } from 'vue';
+import { trans, SEE, BY_USER, WORKFLOW_AT, WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS, WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP } from '../../../../../../../../../../../assets/translator'
 
-const i18n = {
-   messages: {
-      fr: {
-         you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
-         you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
-         by: "Par",
-         at: "Le"
-      }
-   }
-}
-
-export default {
-   name: "ListWorkflow",
-   i18n: i18n,
-   props: {
+    // props
+    const props = defineProps({
       workflows: {
          type: Array,
          required: true,
       }
-   },
-   methods: {
-      goToUrl(w) {
-         return `/fr/main/workflow/${w.id}/show`;
-      },
-      getPopTitle(step) {
-         if (step.transitionPrevious != null) {
-            //console.log(step.transitionPrevious.text);
-            let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
-            return `${freezed}${step.transitionPrevious.text}`;
-         }
-      },
-      getPopContent(step) {
-         if (step.transitionPrevious != null) {
-            return `<ul class="small_in_title">
-              <li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
-              <li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
-              </ul>`
-            ;
-         }
-      },
-      formatDate(datetime) {
-         return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
-      },
-      isUserSubscribedToStep(w) {
-         // todo
-         return false;
-      },
-      isUserSubscribedToFinal(w) {
-         // todo
-         return false;
-      },
-   },
-   mounted() {
+    })
+
+    // methods
+    const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
+    const getPopTitle = (step) => {
+     if (step.transitionPrevious != null) {
+        //console.log(step.transitionPrevious.text);
+        let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
+        return `${freezed}${step.transitionPrevious.text}`;
+     }
+    }
+    const getPopContent = (step) => {
+     if (step.transitionPrevious != null) {
+        return `<ul class="small_in_title">
+          <li><span class="item-key">{{ trans(BY_USER) }} : </span><b>${step.transitionPreviousBy.text}</b></li>
+          <li><span class="item-key">{{ trans(WORKFLOW_AT) }} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
+          </ul>`
+        ;
+     }
+    }
+    const formatDate = (datetime) => datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
+    const isUserSubscribedToStep = (w) => false;
+    const isUserSubscribedToFinal = (w) => false;
+
+    onMounted(() => {
       const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
       const popoverList = triggerList.map(function (el) {
-         //console.log('popover', el)
          return new Popover(el, {
             html: true,
          });
       });
-   }
-}
+    })
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
index 151bc06c7..2b98b7c81 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
@@ -4,26 +4,26 @@
       class="btn btn-primary"
       @click="openModal">
       <b>{{ countWorkflows }}</b>
-      <template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
-      <template v-else>{{ $t('workflow') }}</template>
+      <template v-if="countWorkflows > 1">{{ trans(WORKFLOW_ASSOCIATED, { aw: 'other' }) }}</template>
+      <template v-else>{{ trans(WORKFLOW_ASSOCIATED, { aw: 1 }) }}</template>
    </button>
 
-   <pick-workflow v-else-if="allowCreate"
+   <Pick-workflow v-else-if="allowCreate"
       :relatedEntityClass="this.relatedEntityClass"
       :relatedEntityId="this.relatedEntityId"
       :workflowsAvailables="workflowsAvailables"
       :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
       :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
       @go-to-generate-workflow="goToGenerateWorkflow"
-   ></pick-workflow>
+   ></Pick-workflow>
 
    <teleport to="body">
-      <modal v-if="modal.showModal"
+      <Modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
 
          <template v-slot:header>
-            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
+            <h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
          </template>
 
          <template v-slot:body>
@@ -43,89 +43,67 @@
             ></pick-workflow>
          </template>
 
-      </modal>
+      </Modal>
    </teleport>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, defineProps, defineEmits } from 'vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
 import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
+import { trans, WORKFLOW_ASSOCIATED, WORKFLOW_LIST } from '../../../../../../../../../../../assets/translator'
 
-export default {
-   name: "ListWorkflowModal",
-   components: {
-      Modal,
-      PickWorkflow,
-      ListWorkflowVue
-   },
-   emits: ['goToGenerateWorkflow'],
-   props: {
-      workflows: {
-         type: Array,
-         required: true,
-      },
-      allowCreate: {
-         type: Boolean,
-         required: true,
-      },
-      relatedEntityClass: {
-         type: String,
-         required: true,
-      },
-      relatedEntityId: {
-         type: Number,
-         required: false,
-      },
-      workflowsAvailables: {
-         type: Array,
-         required: true,
-      },
-      preventDefaultMoveToGenerate: {
-          type: Boolean,
-          required: false,
-          default: false,
-      },
-      goToGenerateWorkflowPayload: {
-         required: false,
-         default: {}
-      },
-   },
-    data() {
-      return {
-         modal: {
-            showModal: false,
-            modalDialogClass: "modal-dialog-scrollable modal-xl"
-         },
-      }
-   },
-   computed: {
-      countWorkflows() {
-         return this.workflows.length;
-      },
-      hasWorkflow() {
-         return this.countWorkflows > 0;
-      }
-   },
-   methods: {
-      openModal() {
-         this.modal.showModal = true;
-      },
-      goToGenerateWorkflow(data) {
-          console.log('go to generate workflow intercepted', data);
-          this.$emit('goToGenerateWorkflow', data);
-      }
-   },
-   i18n: {
-      messages: {
-         fr: {
-            workflow_list: "Liste des workflows associés",
-            workflow: " workflow associé",
-            workflows: " workflows associés",
-         }
-      }
-   }
-}
+// Define props
+const props = defineProps({
+    workflows: {
+        type: Array,
+        required: true,
+    },
+    allowCreate: {
+        type: Boolean,
+        required: true,
+    },
+    relatedEntityClass: {
+        type: String,
+        required: true,
+    },
+    relatedEntityId: {
+        type: Number,
+        required: false,
+    },
+    workflowsAvailables: {
+        type: Array,
+        required: true,
+    },
+    preventDefaultMoveToGenerate: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    goToGenerateWorkflowPayload: {
+        required: false,
+        default: () => ({}),
+    },
+});
+
+// Define emits
+const emit = defineEmits(['goToGenerateWorkflow']);
+
+// Reactive data
+const modal = ref({
+    showModal: false,
+    modalDialogClass: "modal-dialog-scrollable modal-xl"
+});
+
+// Computed properties
+const countWorkflows = computed(() => props.workflows.length);
+const hasWorkflow = computed(() => countWorkflows.value > 0);
+
+// Methods
+const openModal = () => modal.value.showModal = true;
+
+const goToGenerateWorkflow = (data) => emit('goToGenerateWorkflow', data);
 </script>
 
 <style scoped></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
index 9ed1ef6cc..54918aef6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
@@ -13,51 +13,57 @@
     </template>
 </template>
 
-<script>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { buildLinkCreate } from 'ChillMainAssets/lib/entity-workflow/api.js';
 
-import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
-
-export default {
-    name: "PickWorkflow",
-    props: {
-        relatedEntityClass: {
-            type: String,
-            required: true,
-        },
-        relatedEntityId: {
-            type: Number,
-            required: false,
-        },
-        workflowsAvailables: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        goToGenerateWorkflowPayload: {
-            required: false,
-            default: {}
-        },
+// Define props
+const props = defineProps({
+    relatedEntityClass: {
+        type: String,
+        required: true,
     },
-    emits: ['goToGenerateWorkflow'],
-    methods: {
-        makeLink(workflowName) {
-            return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
-        },
-        goToGenerateWorkflow(event, workflowName) {
-            console.log('goToGenerateWorkflow', event, workflowName);
+    relatedEntityId: {
+        type: Number,
+        required: false,
+    },
+    workflowsAvailables: {
+        type: Array,
+        required: true,
+    },
+    preventDefaultMoveToGenerate: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    goToGenerateWorkflowPayload: {
+        required: false,
+        default: () => ({}), // Use a function to return an object
+    },
+});
 
-            if (!this.$props.preventDefaultMoveToGenerate) {
-                console.log('to go generate');
-                window.location.assign(this.makeLink(workflowName));
-            }
+// Define emits
+const emit = defineEmits(['goToGenerateWorkflow']);
 
-            this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName), payload: this.goToGenerateWorkflowPayload});
-        }
+// Methods
+function makeLink(workflowName) {
+    return buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
+}
+
+function goToGenerateWorkflow(event, workflowName) {
+    console.log('goToGenerateWorkflow', event, workflowName);
+
+    if (!props.preventDefaultMoveToGenerate) {
+        console.log('to go generate');
+        window.location.assign(makeLink(workflowName));
     }
+
+    emit('goToGenerateWorkflow', {
+        event,
+        workflowName,
+        link: makeLink(workflowName),
+        payload: props.goToGenerateWorkflowPayload,
+    });
 }
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index f6546f554..e2589cfcb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -28,9 +28,7 @@
    </transition>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue";
-import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
+<script setup lang="ts">
 /*
  *    This Modal component is a mix between Vue3 modal implementation
  *    [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
@@ -40,28 +38,24 @@ import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/
  *    [+] using bootstrap css classes, the modal have a responsive behaviour,
  *    [+] modal design can be configured using css classes (size, scroll)
  */
-export default defineComponent({
-   name: 'Modal',
-   props: {
-      modalDialogClass: {
-         type: Object,
-         required: false,
-         default: {},
-      },
-      hideFooter: {
-         type: Boolean,
-         required: false,
-         default: false
-      }
-   },
-   emits: ['close'],
-    setup() {
-        return {
-            MODAL_ACTION_CLOSE,
-            trans
-        };
+import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
+import { defineProps, defineEmits } from 'vue';
+
+// Define the props
+const props = defineProps({
+    modalDialogClass: {
+        type: Object,
+        required: false,
+        default: {},
+    },
+    hideFooter: {
+        type: Boolean,
+        required: false,
+        default: false,
     },
 });
+
+const emit = defineEmits(['close']);
 </script>
 
 <style lang="scss">
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index 7f56e40d6..2bd906d7d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -6,12 +6,12 @@
                 class="btn"
                 :class="overrideClass"
                 type="button"
-                :title="$t('markAsUnread')"
+                :title="trans(NOTIFICATION_MARK_AS_UNREAD)"
                 @click="markAsUnread"
                 >
             <i class="fa fa-sm fa-envelope-o"></i>
             <span v-if="!buttonNoText" class="ps-2">
-                {{ $t('markAsUnread') }}
+                {{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
             </span>
         </button>
 
@@ -19,12 +19,12 @@
                 class="btn"
                 :class="overrideClass"
                 type="button"
-                :title="$t('markAsRead')"
+                :title="trans(NOTIFICATION_MARK_AS_READ)"
                 @click="markAsRead"
                 >
             <i class="fa fa-sm fa-envelope-open-o"></i>
             <span v-if="!buttonNoText" class="ps-2">
-                {{ $t('markAsRead') }}
+                {{ trans(NOTIFICATION_MARK_AS_READ) }}
             </span>
         </button>
 
@@ -40,71 +40,65 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
+import { trans, NOTIFICATION_MARK_AS_READ, NOTIFICATION_MARK_AS_UNREAD } from '../../../../../../../../../../../assets/translator'
 
-export default {
-    name: "NotificationReadToggle",
-    props: {
-        isRead: {
-            required: true,
-            type: Boolean,
-        },
-        notificationId: {
-            required: true,
-            type: Number,
-        },
-        // Optional
-        buttonClass: {
-            required: false,
-            type: String
-        },
-        buttonNoText: {
-            required: false,
-            type: Boolean,
-        },
-        showUrl: {
-            required: false,
-            type: String
-        }
+// Props
+const props = defineProps({
+    isRead: {
+        type: Boolean,
+        required: true,
     },
-    emits: ['markRead', 'markUnread'],
-    computed: {
-        /// [Option] override default button appearance (btn-misc)
-        overrideClass() {
-            return this.buttonClass ? this.buttonClass : 'btn-misc'
-        },
-        /// [Option] don't display text on button
-        buttonHideText() {
-            return this.buttonNoText;
-        },
-        /// [Option] showUrl is href for show page second button.
-        //  When passed, the component return a button-group with 2 buttons.
-        isButtonGroup() {
-            return this.showUrl;
-        }
+    notificationId: {
+        type: Number,
+        required: true,
     },
-    methods: {
-        markAsUnread() {
-           makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
-               this.$emit('markRead', { notificationId: this.notificationId });
-           })
-        },
-        markAsRead() {
-            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/read`, []).then(response => {
-                this.$emit('markUnread', { notificationId: this.notificationId });
-            })
+    buttonClass: {
+        type: String,
+        required: false,
+    },
+    buttonNoText: {
+        type: Boolean,
+        required: false,
+    },
+    showUrl: {
+        type: String,
+        required: false,
+    },
+});
+
+// Emits
+const emit = defineEmits(['markRead', 'markUnread']);
+
+// Computed
+const overrideClass = computed(() => props.buttonClass || 'btn-misc');
+const buttonHideText = computed(() => props.buttonNoText);
+const isButtonGroup = computed(() => props.showUrl);
+
+// Methods
+const markAsUnread = () => {
+    makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/unread`, []).then(() => {
+        emit('markRead', { notificationId: props.notificationId });
+    });
+};
+
+const markAsRead = () => {
+    makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/read`, []).then(() => {
+        emit('markUnread', { notificationId: props.notificationId });
+    });
+};
+
+// i18n setup
+/*const { t } = useI18n({
+    messages: {
+        fr: {
+            markAsUnread: 'Marquer comme non-lu',
+            markAsRead: 'Marquer comme lu',
         },
     },
-    i18n: {
-        messages: {
-            fr: {
-                markAsUnread: 'Marquer comme non-lu',
-                markAsRead: 'Marquer comme lu'
-            }
-        }
-    }
-}
+});*/
 </script>
 
 <style lang="scss">
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
index 5f8a85208..fa6bddab4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
@@ -4,21 +4,21 @@
          isChangeIcon ? 'change-icon' : '',
          isChangeClass ? options.changeClass : 'btn-wopilink' ]"
       @click="openModal">
-      
+
       <i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>
-      
+
       <span v-if="!noText">
-         {{ $t('online_edit_document') }}
+         {{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}
       </span>
    </a>
-   
+
    <teleport to="body">
       <div class="wopi-frame" v-if="isOpenDocument">
          <modal v-if="modal.showModal"
             :modalDialogClass="modal.modalDialogClass"
             :hideFooter=true
             @close="modal.showModal = false">
-            
+
             <template v-slot:header>
                <img class="logo" :src="logo" height="45"/>
                   <span class="ms-auto me-3">
@@ -31,189 +31,161 @@
                   </a>
                   -->
             </template>
-            
+
             <template v-slot:body>
                <div v-if="loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
+                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="trans(WOPI_LOADING)"></i>
                </div>
                <iframe
                   :src="this.wopiUrl"
                   @load="loaded"
                ></iframe>
             </template>
-            
+
          </modal>
       </div>
       <div v-else>
-         <modal v-if="modal.showModal"
+         <Modal v-if="modal.showModal"
             modalDialogClass="modal-sm"
             @close="modal.showModal = false">
-            
+
             <template v-slot:header>
-               <h3>{{ $t('invalid_title') }}</h3>
+               <h3>{{ trans(WOPI_INVALID_TITLE) }}</h3>
             </template>
             <template v-slot:body>
-               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
+               <div class="alert alert-warning">{{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}</div>
             </template>
-   
-         </modal>
+
+         </Modal>
       </div>
    </teleport>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
+import { useI18n } from 'vue-i18n';
+import { trans, WOPI_ONLINE_EDIT_DOCUMENT, WOPI_INVALID_TITLE, WOPI_LOADING } from '../../../../../../../../../../assets/translator'
 
-export default {
-   name: "OpenWopiLink",
-   components: {
-      Modal
-   },
-   props: {
-      wopiUrl: {
-         type: String,
-         required: true
-      },
-      type: {
-         type: String,
-         required: true
-      },
-      options: {
-         type: Object,
-         required: false
-      }
-   },
-   data() {
-      return {
-         modal: {
-            showModal: false,
-            modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
-         },
-         logo: logo,
-         loading: false,
-         mime: [
-            // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
-            'application/clarisworks',
-            'application/coreldraw',
-            'application/macwriteii',
-            'application/msword',
-            'application/pdf',
-            'application/vnd.lotus-1-2-3',
-            'application/vnd.ms-excel',
-            'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
-            'application/vnd.ms-excel.sheet.macroEnabled.12',
-            'application/vnd.ms-excel.template.macroEnabled.12',
-            'application/vnd.ms-powerpoint',
-            'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
-            'application/vnd.ms-powerpoint.template.macroEnabled.12',
-            'application/vnd.ms-visio.drawing',
-            'application/vnd.ms-word.document.macroEnabled.12',
-            'application/vnd.ms-word.template.macroEnabled.12',
-            'application/vnd.ms-works',
-            'application/vnd.oasis.opendocument.chart',
-            'application/vnd.oasis.opendocument.formula',
-            'application/vnd.oasis.opendocument.graphics',
-            'application/vnd.oasis.opendocument.graphics-flat-xml',
-            'application/vnd.oasis.opendocument.graphics-template',
-            'application/vnd.oasis.opendocument.presentation',
-            'application/vnd.oasis.opendocument.presentation-flat-xml',
-            'application/vnd.oasis.opendocument.presentation-template',
-            'application/vnd.oasis.opendocument.spreadsheet',
-            'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
-            'application/vnd.oasis.opendocument.spreadsheet-template',
-            'application/vnd.oasis.opendocument.text',
-            'application/vnd.oasis.opendocument.text-flat-xml',
-            'application/vnd.oasis.opendocument.text-master',
-            'application/vnd.oasis.opendocument.text-master-template',
-            'application/vnd.oasis.opendocument.text-template',
-            'application/vnd.oasis.opendocument.text-web',
-            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-            'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
-            'application/vnd.openxmlformats-officedocument.presentationml.template',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
-            'application/vnd.sun.xml.calc',
-            'application/vnd.sun.xml.calc.template',
-            'application/vnd.sun.xml.chart',
-            'application/vnd.sun.xml.draw',
-            'application/vnd.sun.xml.draw.template',
-            'application/vnd.sun.xml.impress',
-            'application/vnd.sun.xml.impress.template',
-            'application/vnd.sun.xml.math',
-            'application/vnd.sun.xml.writer',
-            'application/vnd.sun.xml.writer.global',
-            'application/vnd.sun.xml.writer.template',
-            'application/vnd.visio',
-            'application/vnd.visio2013',
-            'application/vnd.wordperfect',
-            'application/x-abiword',
-            'application/x-aportisdoc',
-            'application/x-dbase',
-            'application/x-dif-document',
-            'application/x-fictionbook+xml',
-            'application/x-gnumeric',
-            'application/x-hwp',
-            'application/x-iwork-keynote-sffkey',
-            'application/x-iwork-numbers-sffnumbers',
-            'application/x-iwork-pages-sffpages',
-            'application/x-mspublisher',
-            'application/x-mswrite',
-            'application/x-pagemaker',
-            'application/x-sony-bbeb',
-            'application/x-t602',
-         ]
-      }
-   },
-   computed: {
-      isOpenDocument() {
-         if (this.mime.indexOf(this.type) !== -1) {
-            return true;
-         }
-         return false;
-      },
-      noText() {
-         if (typeof this.options.noText !== 'undefined') {
-            return this.options.noText === true;
-         }
-         return false;
-      },
-      isChangeIcon() {
-         if (typeof this.options.changeIcon !== 'undefined') {
-            return (!(this.options.changeIcon === null || this.options.changeIcon === ''))
-         }
-         return false;
-      },
-      isChangeClass() {
-         if (typeof this.options.changeClass !== 'undefined') {
-            return (!(this.options.changeClass === null || this.options.changeClass === ''))
-         }
-         return false;
-      }
-   },
-   methods: {
-      openModal() {
-         this.loading = true;
-         this.modal.showModal = true;
-      },
-      loaded() {
-         this.loading = false;
-      }
-   },
-   i18n: {
-      messages: {
-         fr: {
-            online_edit_document: "Éditer en ligne",
-            save_and_quit: "Enregistrer et quitter",
-            loading: "Chargement de l'éditeur en ligne",
-            invalid_title: "Format incompatible",
-            invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
-         }
-      }
-   }
-}
+
+// Props
+const props = defineProps({
+    wopiUrl: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        required: true,
+    },
+    options: {
+        type: Object,
+        required: false,
+    },
+});
+
+// data
+const modal = ref({
+    showModal: false,
+    modalDialogClass: "modal-fullscreen",
+});
+const logoImg = logo;
+const loading = ref(false);
+
+// MIME types
+const mime = [
+    // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
+    'application/clarisworks',
+    'application/coreldraw',
+    'application/macwriteii',
+    'application/msword',
+    'application/pdf',
+    'application/vnd.lotus-1-2-3',
+    'application/vnd.ms-excel',
+    'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
+    'application/vnd.ms-excel.sheet.macroEnabled.12',
+    'application/vnd.ms-excel.template.macroEnabled.12',
+    'application/vnd.ms-powerpoint',
+    'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+    'application/vnd.ms-powerpoint.template.macroEnabled.12',
+    'application/vnd.ms-visio.drawing',
+    'application/vnd.ms-word.document.macroEnabled.12',
+    'application/vnd.ms-word.template.macroEnabled.12',
+    'application/vnd.ms-works',
+    'application/vnd.oasis.opendocument.chart',
+    'application/vnd.oasis.opendocument.formula',
+    'application/vnd.oasis.opendocument.graphics',
+    'application/vnd.oasis.opendocument.graphics-flat-xml',
+    'application/vnd.oasis.opendocument.graphics-template',
+    'application/vnd.oasis.opendocument.presentation',
+    'application/vnd.oasis.opendocument.presentation-flat-xml',
+    'application/vnd.oasis.opendocument.presentation-template',
+    'application/vnd.oasis.opendocument.spreadsheet',
+    'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
+    'application/vnd.oasis.opendocument.spreadsheet-template',
+    'application/vnd.oasis.opendocument.text',
+    'application/vnd.oasis.opendocument.text-flat-xml',
+    'application/vnd.oasis.opendocument.text-master',
+    'application/vnd.oasis.opendocument.text-master-template',
+    'application/vnd.oasis.opendocument.text-template',
+    'application/vnd.oasis.opendocument.text-web',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+    'application/vnd.openxmlformats-officedocument.presentationml.template',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+    'application/vnd.sun.xml.calc',
+    'application/vnd.sun.xml.calc.template',
+    'application/vnd.sun.xml.chart',
+    'application/vnd.sun.xml.draw',
+    'application/vnd.sun.xml.draw.template',
+    'application/vnd.sun.xml.impress',
+    'application/vnd.sun.xml.impress.template',
+    'application/vnd.sun.xml.math',
+    'application/vnd.sun.xml.writer',
+    'application/vnd.sun.xml.writer.global',
+    'application/vnd.sun.xml.writer.template',
+    'application/vnd.visio',
+    'application/vnd.visio2013',
+    'application/vnd.wordperfect',
+    'application/x-abiword',
+    'application/x-aportisdoc',
+    'application/x-dbase',
+    'application/x-dif-document',
+    'application/x-fictionbook+xml',
+    'application/x-gnumeric',
+    'application/x-hwp',
+    'application/x-iwork-keynote-sffkey',
+    'application/x-iwork-numbers-sffnumbers',
+    'application/x-iwork-pages-sffpages',
+    'application/x-mspublisher',
+    'application/x-mswrite',
+    'application/x-pagemaker',
+    'application/x-sony-bbeb',
+    'application/x-t602',
+]
+
+// Computed
+const isOpenDocument = computed(() => mime.includes(props.type));
+
+const noText = computed(() => props.options?.noText === true);
+
+const isChangeIcon = computed(() => !!props.options?.changeIcon);
+
+const isChangeClass = computed(() => !!props.options?.changeClass);
+
+// Methods
+const openModal = () => {
+    loading.value = true;
+    modal.value.showModal = true;
+};
+
+const loaded = () => {
+    loading.value = false;
+};
 </script>
 
 <style lang="scss">
diff --git a/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml b/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
index 96b2edd98..662ef0d10 100644
--- a/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
+++ b/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
@@ -45,6 +45,12 @@ workflow:
             few {# workflows}
             other {# workflows}
         }
+    associated: >-
+        {aw, plural,
+            =0 {Aucun workflow associé}
+            one {# Workflow associé}
+            other {# Workflows associés}
+        }
 
 duration:
     minute: >-
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 3f2cb49f3..c66a3e827 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -478,6 +478,8 @@ Follow workflow: Suivre la décision
 Workflow history: Historique de la décision
 
 workflow:
+    list: Liste des workflows associés
+    associated: workflow associé
     Created by: Créé par
     My decision: Ma décision
     Next step: Prochaine étape
@@ -525,6 +527,7 @@ workflow:
     Previous workflow transitionned help: Workflows où vous avez exécuté une action.
     For: Pour
     Cc: Cc
+    At: Le
     You must select a next step, pick another decision if no next steps are available: Il faut une prochaine étape. Choissisez une autre décision si nécessaire.
     An access key was also sent to those addresses: Un lien d'accès a été envoyé à ces adresses
     Those users are also granted to apply a transition by using an access key: Ces utilisateurs ont obtenu l'accès grâce au lien reçu par email
@@ -575,6 +578,8 @@ notification:
     dest by email help: Les adresses email mentionnées ici recevront un lien d'accès. Un compte utilisateur sera toujours nécessaire.
     Remove an email: Supprimer l'adresse email
     Email with access link: Adresse email ayant reçu un lien d'accès
+    mark_as_read: Marquer comme lu
+    mark_as_unread: Marquer comme non-lu
 
 export:
     address_helper:
@@ -708,4 +713,11 @@ news:
     read_more: Lire la suite
     show_details: Voir l'actualité
 
+wopi:
+    online_edit_document: Éditer en ligne
+    save_and_quit: Enregistrer et quitter
+    loading: Chargement de l'éditeur en ligne
+    invalid_title: Format incompatible
+    invalid_message: Désolé, ce format de document n'est pas éditable en ligne.
+