Implement translator in vue components and use script setup syntax

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-if="entity.kind === 'child'">{{ trans(THIRDPARTY_CONTACT_OF)}}</span>
-            <span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company')}}</span>
+            <span v-else-if="entity.kind === 'company'">{{ trans(THIRDPARTY_COMPANY)}}</span>
-            <span v-else>{{ $t('thirdparty.contact')}}</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>
+<script setup lang="ts">
-export default {
+import {
-    name: "BadgeEntity",
+    trans,
-    props: ['options', 'entity'],
+    HOUSEHOLD,
-    i18n: {
+    ACCEPTED_USERS,
-        messages: {
+    THIRDPARTY_A_CONTACT,
-            fr: {
+    THIRDPARTY_COMPANY,
-                person: "Usager",
+    THIRDPARTY_CONTACT_OF,
-                thirdparty: {
+    PERSON, THIRDPARTY
-                    thirdparty: "Tiers",
+} from '../../../../../../../../../../assets/translator'
-                    child: "Personne de contact",
+
-                    company: "Personne morale",
+const props = defineProps({
-                    contact: "Personne physique",
+        options: Object,
-                },
+        entity: Object
-                user: 'TMS',
+    })
-                household: 'Ménage',
-            }
-        }
-    }
-}
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

@@ -9,23 +9,16 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref } from 'vue';
-    name: "Confidential",
+
-    data() {
+const isBlurred = ref(true);
-        return {
+const toggleIcon = ref('fa-eye');
-            isBlurred: true,
+
-            toggleIcon: 'fa-eye',
+const toggleBlur = () => {
+    isBlurred.value = !isBlurred.value;
+    toggleIcon.value = isBlurred.value ? 'fa-eye' : 'fa-eye-slash';
 };
-    },
-    methods : {
-        toggleBlur() {
-            console.log(this.positionBtnFar);
-            this.isBlurred = !this.isBlurred;
-            this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
-        },
-    },
-}
 </script>
 
 <style scoped lang='scss'>

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 = {
+    // props
-   messages: {
+    const props = defineProps({
-      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: {
       workflows: {
          type: Array,
          required: true,
       }
-   },
+    })
-   methods: {
+
-      goToUrl(w) {
+    // methods
-         return `/fr/main/workflow/${w.id}/show`;
+    const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
-      },
+    const getPopTitle = (step) => {
-      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) {
+    const 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">{{ trans(BY_USER) }} : </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>
+          <li><span class="item-key">{{ trans(WORKFLOW_AT) }} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
           </ul>`
         ;
      }
-      },
+    }
-      formatDate(datetime) {
+    const formatDate = (datetime) => datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
-         return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
+    const isUserSubscribedToStep = (w) => false;
-      },
+    const isUserSubscribedToFinal = (w) => false;
-      isUserSubscribedToStep(w) {
+
-         // todo
+    onMounted(() => {
-         return false;
-      },
-      isUserSubscribedToFinal(w) {
-         // todo
-         return false;
-      },
-   },
-   mounted() {
       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>

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-if="countWorkflows > 1">{{ trans(WORKFLOW_ASSOCIATED, { aw: 'other' }) }}</template>
-      <template v-else>{{ $t('workflow') }}</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,24 +43,19 @@
             ></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 {
+// Define props
-   name: "ListWorkflowModal",
+const props = defineProps({
-   components: {
-      Modal,
-      PickWorkflow,
-      ListWorkflowVue
-   },
-   emits: ['goToGenerateWorkflow'],
-   props: {
     workflows: {
         type: Array,
         required: true,
@@ -88,44 +83,27 @@ export default {
     },
     goToGenerateWorkflowPayload: {
         required: false,
-         default: {}
+        default: () => ({}),
     },
-   },
+});
-    data() {
+
-      return {
+// Define emits
-         modal: {
+const emit = defineEmits(['goToGenerateWorkflow']);
+
+// Reactive data
+const modal = ref({
     showModal: false,
     modalDialogClass: "modal-dialog-scrollable modal-xl"
-         },
+});
-      }
+
-   },
+// Computed properties
-   computed: {
+const countWorkflows = computed(() => props.workflows.length);
-      countWorkflows() {
+const hasWorkflow = computed(() => countWorkflows.value > 0);
-         return this.workflows.length;
+
-      },
+// Methods
-      hasWorkflow() {
+const openModal = () => modal.value.showModal = true;
-         return this.countWorkflows > 0;
+
-      }
+const goToGenerateWorkflow = (data) => emit('goToGenerateWorkflow', data);
-   },
-   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",
-         }
-      }
-   }
-}
 </script>
 
 <style scoped></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue

@@ -13,13 +13,12 @@
     </template>
 </template>
 
-<script>
+<script setup>
-
+import { defineProps, defineEmits } from 'vue';
 import { buildLinkCreate } from 'ChillMainAssets/lib/entity-workflow/api.js';
 
-export default {
+// Define props
-    name: "PickWorkflow",
+const props = defineProps({
-    props: {
     relatedEntityClass: {
         type: String,
         required: true,
@@ -39,25 +38,32 @@ export default {
     },
     goToGenerateWorkflowPayload: {
         required: false,
-            default: {}
+        default: () => ({}), // Use a function to return an object
     },
-    },
+});
-    emits: ['goToGenerateWorkflow'],
+
-    methods: {
+// Define emits
-        makeLink(workflowName) {
+const emit = defineEmits(['goToGenerateWorkflow']);
-            return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
+
-        },
+// Methods
-        goToGenerateWorkflow(event, workflowName) {
+function makeLink(workflowName) {
+    return buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
+}
+
+function goToGenerateWorkflow(event, workflowName) {
     console.log('goToGenerateWorkflow', event, workflowName);
 
-            if (!this.$props.preventDefaultMoveToGenerate) {
+    if (!props.preventDefaultMoveToGenerate) {
         console.log('to go generate');
-                window.location.assign(this.makeLink(workflowName));
+        window.location.assign(makeLink(workflowName));
     }
 
-            this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName), payload: this.goToGenerateWorkflowPayload});
+    emit('goToGenerateWorkflow', {
-        }
+        event,
-    }
+        workflowName,
+        link: makeLink(workflowName),
+        payload: props.goToGenerateWorkflowPayload,
+    });
 }
 </script>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -28,9 +28,7 @@
    </transition>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from "vue";
-import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
 /*
  *    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,9 +38,11 @@ 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({
+import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
-   name: 'Modal',
+import { defineProps, defineEmits } from 'vue';
-   props: {
+
+// Define the props
+const props = defineProps({
     modalDialogClass: {
         type: Object,
         required: false,
@@ -51,17 +51,11 @@ export default defineComponent({
     hideFooter: {
         type: Boolean,
         required: false,
-         default: false
+        default: false,
-      }
-   },
-   emits: ['close'],
-    setup() {
-        return {
-            MODAL_ACTION_CLOSE,
-            trans
-        };
     },
 });
+
+const emit = defineEmits(['close']);
 </script>
 
 <style lang="scss">

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 {
+// Props
-    name: "NotificationReadToggle",
+const props = defineProps({
-    props: {
     isRead: {
-            required: true,
         type: Boolean,
+        required: true,
     },
     notificationId: {
-            required: true,
         type: Number,
+        required: true,
     },
-        // Optional
     buttonClass: {
+        type: String,
         required: false,
-            type: String
     },
     buttonNoText: {
-            required: false,
         type: Boolean,
+        required: false,
     },
     showUrl: {
+        type: String,
         required: false,
-            type: String
-        }
     },
-    emits: ['markRead', 'markUnread'],
+});
-    computed: {
+
-        /// [Option] override default button appearance (btn-misc)
+// Emits
-        overrideClass() {
+const emit = defineEmits(['markRead', 'markUnread']);
-            return this.buttonClass ? this.buttonClass : 'btn-misc'
+
-        },
+// Computed
-        /// [Option] don't display text on button
+const overrideClass = computed(() => props.buttonClass || 'btn-misc');
-        buttonHideText() {
+const buttonHideText = computed(() => props.buttonNoText);
-            return this.buttonNoText;
+const isButtonGroup = computed(() => props.showUrl);
-        },
+
-        /// [Option] showUrl is href for show page second button.
+// Methods
-        //  When passed, the component return a button-group with 2 buttons.
+const markAsUnread = () => {
-        isButtonGroup() {
+    makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/unread`, []).then(() => {
-            return this.showUrl;
+        emit('markRead', { notificationId: props.notificationId });
-        }
+    });
-    },
+};
-    methods: {
+
-        markAsUnread() {
+const markAsRead = () => {
-           makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
+    makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/read`, []).then(() => {
-               this.$emit('markRead', { notificationId: this.notificationId });
+        emit('markUnread', { notificationId: props.notificationId });
-           })
+    });
-        },
+};
-        markAsRead() {
+
-            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/read`, []).then(response => {
+// i18n setup
-                this.$emit('markUnread', { notificationId: this.notificationId });
+/*const { t } = useI18n({
-            })
-        },
-    },
-    i18n: {
     messages: {
         fr: {
             markAsUnread: 'Marquer comme non-lu',
-                markAsRead: 'Marquer comme lu'
+            markAsRead: 'Marquer comme lu',
-            }
+        },
-        }
+    },
-    }
+});*/
-}
 </script>
 
 <style lang="scss">

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue

@@ -8,7 +8,7 @@
       <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>
 
@@ -34,7 +34,7 @@
 
             <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"
@@ -45,54 +45,56 @@
          </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",
+// Props
-   components: {
+const props = defineProps({
-      Modal
-   },
-   props: {
     wopiUrl: {
         type: String,
-         required: true
+        required: true,
     },
     type: {
         type: String,
-         required: true
+        required: true,
     },
     options: {
         type: Object,
-         required: false
+        required: false,
-      }
     },
-   data() {
+});
-      return {
+
-         modal: {
+// data
+const modal = ref({
     showModal: false,
-            modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
+    modalDialogClass: "modal-fullscreen",
-         },
+});
-         logo: logo,
+const logoImg = logo;
-         loading: false,
+const loading = ref(false);
-         mime: [
+
+// MIME types
+const mime = [
     // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
     'application/clarisworks',
     'application/coreldraw',
@@ -165,55 +167,25 @@ export default {
     'application/x-sony-bbeb',
     'application/x-t602',
 ]
-      }
+
-   },
+// Computed
-   computed: {
+const isOpenDocument = computed(() => mime.includes(props.type));
-      isOpenDocument() {
+
-         if (this.mime.indexOf(this.type) !== -1) {
+const noText = computed(() => props.options?.noText === true);
-            return true;
+
-         }
+const isChangeIcon = computed(() => !!props.options?.changeIcon);
-         return false;
+
-      },
+const isChangeClass = computed(() => !!props.options?.changeClass);
-      noText() {
+
-         if (typeof this.options.noText !== 'undefined') {
+// Methods
-            return this.options.noText === true;
+const openModal = () => {
-         }
+    loading.value = true;
-         return false;
+    modal.value.showModal = true;
-      },
+};
-      isChangeIcon() {
+
-         if (typeof this.options.changeIcon !== 'undefined') {
+const loaded = () => {
-            return (!(this.options.changeIcon === null || this.options.changeIcon === ''))
+    loading.value = false;
-         }
+};
-         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.",
-         }
-      }
-   }
-}
 </script>
 
 <style lang="scss">

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: >-

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.
+