Revert "Merge branch 'manage-translations' into 'master'"

This reverts commit cd99633d15, reversing
changes made to a9384bf734.

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js

@@ -1,6 +1,5 @@
 import { multiSelectMessages } from 'ChillMainAssets/vuejs/_js/i18n'
-// translations added to yaml file and used through symfony ux translator.
-// these can be deleted once everything is verified to work.
+
 const addressMessages = {
     fr: {
         add_an_address_title: 'Créer une adresse',

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

@@ -4,7 +4,7 @@
          <a class="nav-link" :class="{ active: isActive('person') }">
             <label for="person">
                <input type="radio" name="person" id="person" v-model="radioType" value="person">
-               {{ $trans('ONTHEFLY_CREATE_PERSON') }}
+               {{ $t('onthefly.create.person') }}
             </label>
          </a>
       </li>
@@ -37,61 +37,59 @@
    </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue';
+<script>
 import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
 
-// Define props
-const props = defineProps(['action', 'allowedTypes', 'query']);
-
-// Create a ref for type
-const type = ref(null);
-
-// Computed
-const radioType = computed({
-    get: () => type.value,
-    set(value) {
-        type.value = value;
-        console.log('## type:', value, ', action:', props.action);
-    }
-});
-
-// Mounted
-onMounted(() => {
-    type.value = (props.allowedTypes.length === 1 && props.allowedTypes.includes('thirdparty'))
-        ? 'thirdparty'
-        : 'person';
-});
-
-// Methods
-const isActive = (tab) => {
-    return type.value === tab;
-};
-
-const castDataByType = () => {
-    switch (radioType.value) {
-        case 'person':
-            return $refs.castPerson.$data.person;
-        case 'thirdparty':
-            let data = $refs.castThirdparty.$data.thirdparty;
-            if (data.address !== undefined && data.address !== null) {
-                data.address = { id: data.address.address_id };
-            } else {
-                data.address = null;
-            }
-            return data;
-        default:
-            throw Error('Invalid type of entity');
-    }
-};
-
-// Register components
-defineExpose({
-    isActive,
-    castDataByType
-});
+export default {
+   name: "OnTheFlyCreate",
+   props: ['action', 'allowedTypes', 'query'],
+   components: {
+      OnTheFlyPerson,
+      OnTheFlyThirdparty
+   },
+   data() {
+      return {
+         type: null
+      }
+   },
+   computed: {
+      radioType: {
+         set(type) {
+            this.type = type;
+            console.log('## type:', type, ', action:', this.action);
+         },
+         get() {
+            return this.type;
+         }
+      },
+   },
+   mounted() {
+      this.type = (this.allowedTypes.length === 1 && this.allowedTypes.includes('thirdparty')) ? 'thirdparty' : 'person'
+   },
+   methods: {
+      isActive(tab) {
+         return (this.type === tab) ? true : false;
+      },
+      castDataByType() {
+         switch (this.radioType) {
+            case 'person':
+               return this.$refs.castPerson.$data.person;
+            case 'thirdparty':
+               let data = this.$refs.castThirdparty.$data.thirdparty;
+               if (data.address !== undefined && data.address !== null) {
+                   data.address = { id: data.address.address_id }
+               } else {
+                   data.address = null;
+               }
 
+               return data;
+            default:
+               throw Error('Invalid type of entity')
+         }
+      }
+   }
+}
 </script>
 
 <style lang="css" scoped>

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">
-        {{ trans(PERSON) }}
+        {{ $t('person') }}
     </span>
 
     <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
         <template v-if="options.displayLong !== true">
-            {{ trans(THIRDPARTY)}}
+            {{ $t('thirdparty.thirdparty')}}
         </template>
 
         <i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
@@ -14,36 +14,41 @@
         <i class="fa fa-fw fa-user-md" v-else></i>
 
         <template v-if="options.displayLong === true">
-            <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>
+            <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>
         </template>
     </span>
 
     <span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
-        {{ trans(ACCEPTED_USERS)}}
+        {{ $t('user')}}
     </span>
 
     <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
-        {{ trans(HOUSEHOLD)}}
+        {{ $t('household')}}
     </span>
 
 
 </template>
 
-<script setup>
-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>
+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>

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

@@ -9,16 +9,23 @@
     </div>
 </template>
 
-<script setup>
-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>
+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>
 
 <style scoped lang='scss'>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -51,12 +51,12 @@
       <div v-if="useDatePane === true" class="address-more">
          <div v-if="address.validFrom">
             <span class="validFrom">
-               <b>{{ trans(ADDRESS_VALID_FROM) }}</b>: {{ $d(address.validFrom.date) }}
+               <b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
             </span>
          </div>
          <div v-if="address.validTo">
             <span class="validTo">
-               <b>{{ trans(ADDRESS_VALID_TO) }}</b>: {{ $d(address.validTo.date) }}
+               <b>{{ $t('validTo') }}</b>: {{ $d(address.validTo.date) }}
             </span>
          </div>
       </div>
@@ -64,47 +64,48 @@
    </component>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script>
+
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
-import { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO } from '../../../../../../../../../../../assets/translator'
 
-// Props
-const props = defineProps({
-    address: {
-        type: Object,
-    },
-    isMultiline: {
+export default {
+   name: 'AddressRenderBox',
+   components: {
+      Confidential,
+      AddressDetailsButton,
+   },
+   props: {
+      address: {
+         type: Object
+      },
+      isMultiline: {
+         default: true,
+         type: Boolean
+      },
+      useDatePane: {
+         default: false,
+         type: Boolean
+      },
+      showButtonDetails: {
         default: true,
-        type: Boolean,
-    },
-    useDatePane: {
-        default: false,
-        type: Boolean,
-    },
-    showButtonDetails: {
-        default: true,
-        type: Boolean,
-    },
-});
-
-// Components
-const components = {
-    Confidential,
-    AddressDetailsButton,
+        type: Boolean
+      }
+   },
+   computed: {
+      component() {
+         return this.isMultiline === true ? "div" : "span";
+      },
+      multiline() {
+         return this.isMultiline === true ? "multiline" : "";
+      },
+      isConfidential() {
+         return this.address.confidential;
+      }
+   }
 };
-
-// Computed
-const component = computed(() => (props.isMultiline ? 'div' : 'span'));
-
-const multiline = computed(() => (props.isMultiline ? 'multiline' : ''));
-
-const isConfidential = computed(() => props.address?.confidential);
-
 </script>
 
-
 <style lang="scss" scoped>
 p {
    &:after {

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue

@@ -5,6 +5,9 @@
 </span>
 </template>
 
-<script setup>
-    const props = defineProps(['user'])
+<script>
+export default {
+    name: "UserRenderBoxBadge",
+    props: ['user'],
+}
 </script>

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

@@ -2,30 +2,39 @@
     <div class="d-grid gap-2 my-3">
         <button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
             <i class="fa fa-check fa-fw"></i>
-            {{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
+            {{ $t('subscribe_final') }}
         </button>
         <button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
             <i class="fa fa-times fa-fw"></i>
-            {{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
+            {{ $t('unsubscribe_final') }}
         </button>
         <button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
             <i class="fa fa-check fa-fw"></i>
-            {{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
+            {{ $t('subscribe_all_steps') }}
         </button>
         <button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
             <i class="fa fa-times fa-fw"></i>
-            {{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
+            {{ $t('unsubscribe_all_steps') }}
         </button>
     </div>
 </template>
 
-<script setup>
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
-import { defineProps, defineEmits } from 'vue';
-import { trans, WORKFLOW_SUBSCRIBE_FINAL, WORKFLOW_UNSUBSCRIBE_FINAL, WORKFLOW_SUBSCRIBE_ALL_STEPS, WORKFLOW_UNSUBSCRIBE_ALL_STEPS } from '../../../../../../../../../../../assets/translator'
+<script>
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
-    // props
-    const props = defineProps({
+export default {
+    name: "EntityWorkflowVueSubscriber",
+    i18n: {
+       messages: {
+          fr: {
+             subscribe_final: "Recevoir une notification à l'étape finale",
+             unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
+             subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
+             unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
+          }
+       }
+    },
+    props: {
         entityWorkflowId: {
             type: Number,
             required: true,
@@ -38,22 +47,55 @@ import { trans, WORKFLOW_SUBSCRIBE_FINAL, WORKFLOW_UNSUBSCRIBE_FINAL, WORKFLOW_S
             type: Boolean,
             required: true,
         },
-    })
+    },
+    emits: ['subscriptionUpdated'],
+    methods: {
+        subscribeTo(step, to) {
+            let params = new URLSearchParams();
+            params.set('subscribe', to);
 
-    //methods
-    const subscribeTo = (step, to) => {
-        let params = new URLSearchParams();
-        params.set('subscribe', to);
+            const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
 
-        const url = `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` + params.toString();
+            makeFetch('POST', url).then(response => {
+                this.$emit('subscriptionUpdated', response);
+            });
+        }
+    },
+}
+/*
+*   ALTERNATIVES
+*
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="laststep">
+        <label class="form-check-label" for="laststep">{{ $t('subscribe_final') }}</label>
+    </div>
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="allsteps">
+        <label class="form-check-label" for="allsteps">{{ $t('subscribe_all_steps') }}</label>
+    </div>
 
-        makeFetch('POST', url).then(response => {
-            emit('subscriptionUpdated', response);
-        });
-    }
+    <div class="list-group my-3">
+        <label class="list-group-item">
+            <input class="form-check-input me-1" type="checkbox" value="">
+            {{ $t('subscribe_final') }}
+        </label>
+        <label class="list-group-item">
+            <input class="form-check-input me-1" type="checkbox" value="">
+            {{ $t('subscribe_all_steps') }}
+        </label>
+    </div>
 
-    // emit
-    const emit = defineEmits(['subscriptionUpdated'])
+    <div class="btn-group-vertical my-3" role="group">
+        <button type="button" class="btn btn-outline-primary">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_final') }}
+        </button>
+        <button type="button" class="btn btn-outline-primary">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_all_steps') }}
+        </button>
+    </div>
+*/
 </script>
 
 <style scoped></style>

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

@@ -38,24 +38,24 @@
                   </span>
                </template>
             </div>
-            <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ trans(WORKFLOW_ON_HOLD) }}</span>
+            <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ $t('on_hold') }}</span>
          </div>
 
          <div class="item-row">
             <div class="item-col flex-grow-1">
                <p v-if="isUserSubscribedToStep(w)">
                   <i class="fa fa-check fa-fw"></i>
-                  {{ trans(WORKFLOW_YOU_DESCRIBED_TO_ALL_STEPS) }}
+                  {{ $t('you_subscribed_to_all_steps') }}
                </p>
                <p v-if="isUserSubscribedToFinal(w)">
                   <i class="fa fa-check fa-fw"></i>
-                  {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
+                  {{ $t('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="trans(SEE)"></a>
+                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
                   </li>
                </ul>
             </div>
@@ -65,47 +65,76 @@
    </div>
 </template>
 
-<script setup>
+<script>
 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, WORKFLOW_ON_HOLD } from '../../../../../../../../../../../assets/translator'
 
-    // props
-    const props = defineProps({
+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",
+         on_hold: "En attente"
+      }
+   }
+}
+
+export default {
+   name: "ListWorkflow",
+   i18n: i18n,
+   props: {
       workflows: {
          type: Array,
          required: true,
       }
-    })
-
-    // 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>${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(() => {
+   },
+   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) {
+             if (step.transitionPreviousBy !== 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>`
+                     ;
+             } else {
+                 return `<ul class="small_in_title">
+                      <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() {
       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

@@ -1,5 +1,5 @@
 <template>
-   <Pick-workflow
+   <pick-workflow
       :relatedEntityClass="this.relatedEntityClass"
       :relatedEntityId="this.relatedEntityId"
       :workflowsAvailables="workflowsAvailables"
@@ -8,15 +8,15 @@
       :countExistingWorkflows="countWorkflows"
       @go-to-generate-workflow="goToGenerateWorkflow"
       @click-open-list="openModal"
-   ></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">{{ trans(WORKFLOW_LIST) }}</h2>
+            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
          </template>
 
          <template v-slot:body>
@@ -38,67 +38,89 @@
             ></pick-workflow>
          </template>
 
-      </Modal>
+      </modal>
    </teleport>
 </template>
 
-<script setup>
-import { ref, computed, defineProps, defineEmits } from 'vue';
+<script>
 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'
 
-// 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);
+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",
+         }
+      }
+   }
+}
 </script>
 
 <style scoped></style>

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

@@ -17,7 +17,7 @@
                 <slot name="body"></slot>
               </div>
               <div class="modal-footer" v-if="!hideFooter">
-                <button class="btn btn-cancel" @click="$emit('close')">{{ trans(MODAL_ACTION_CLOSE) }}</button>
+                <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
                 <slot name="footer"></slot>
               </div>
             </div>
@@ -28,7 +28,8 @@
    </transition>
 </template>
 
-<script setup>
+<script lang="ts">
+import {defineComponent} from "vue";
 /*
  *    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
@@ -38,24 +39,22 @@
  *    [+] using bootstrap css classes, the modal have a responsive behaviour,
  *    [+] modal design can be configured using css classes (size, scroll)
  */
-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,
-    },
+export default defineComponent({
+   name: 'Modal',
+   props: {
+      modalDialogClass: {
+         type: Object,
+         required: false,
+         default: {},
+      },
+      hideFooter: {
+         type: Boolean,
+         required: false,
+         default: false
+      }
+   },
+   emits: ['close']
 });
-
-const emit = defineEmits(['close']);
 </script>
 
 <style lang="scss">

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -1,30 +1,34 @@
 <template>
-    <div :class="{'btn-group btn-group-sm float-end': isButtonGroup }"
-         role="group" aria-label="Notification actions">
-
-        <button v-if="isRead"
-                class="btn"
-                :class="overrideClass"
-                type="button"
-                :title="trans(NOTIFICATION_MARK_AS_UNREAD)"
-                @click="markAsUnread"
-                >
+    <div
+        :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
+        role="group"
+        aria-label="Notification actions"
+    >
+        <button
+            v-if="isRead"
+            class="btn"
+            :class="overrideClass"
+            type="button"
+            :title="$t('markAsUnread')"
+            @click="markAsUnread"
+        >
             <i class="fa fa-sm fa-envelope-o"></i>
             <span v-if="!buttonNoText" class="ps-2">
-                {{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
+                {{ $t("markAsUnread") }}
             </span>
         </button>
 
-        <button v-if="!isRead"
-                class="btn"
-                :class="overrideClass"
-                type="button"
-                :title="trans(NOTIFICATION_MARK_AS_READ)"
-                @click="markAsRead"
-                >
+        <button
+            v-if="!isRead"
+            class="btn"
+            :class="overrideClass"
+            type="button"
+            :title="$t('markAsRead')"
+            @click="markAsRead"
+        >
             <i class="fa fa-sm fa-envelope-open-o"></i>
             <span v-if="!buttonNoText" class="ps-2">
-                {{ trans(NOTIFICATION_MARK_AS_READ) }}
+                {{ $t("markAsRead") }}
             </span>
         </button>
 
@@ -33,8 +37,8 @@
             type="button"
             class="btn btn-outline-primary"
             :href="showUrl"
-            :title="trans(SEE)"
-            >
+            :title="$t('action.show')"
+        >
             <i class="fa fa-sm fa-comment-o"></i>
         </a>
 
@@ -55,65 +59,90 @@
     </div>
 </template>
 
-<script setup>
-import { ref, computed } from 'vue';
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
-import { trans, NOTIFICATION_MARK_AS_READ, NOTIFICATION_MARK_AS_UNREAD, SEE } from '../../../../../../../../../../../assets/translator'
+<script>
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
 
-// Props
-const props = defineProps({
-    isRead: {
-        type: Boolean,
-        required: true,
-    },
-    notificationId: {
-        type: Number,
-        required: true,
-    },
-    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',
+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,
         },
     },
-});*/
+    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;
+        },
+    },
+    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,
+                });
+            });
+        },
+        markAllRead() {
+            makeFetch(
+                "POST",
+                `/api/1.0/main/notification/markallread`,
+                []
+            ).then((response) => {
+                this.$emit("markAllRead");
+            });
+        },
+    },
+    i18n: {
+        messages: {
+            fr: {
+                markAsUnread: "Marquer comme non-lu",
+                markAsRead: "Marquer comme lu",
+            },
+        },
+    },
+};
 </script>
 
 <style lang="scss"></style>

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

@@ -4,182 +4,216 @@
          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">
-         {{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}
+         {{ $t('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">
                      <span v-if="options.title">{{ options.title }}</span>
                   </span>
+                  <!--
+                  <a class="btn btn-outline-light">
+                     <i class="fa fa-save fa-fw"></i>
+                     {{ $t('save_and_quit') }}
+                  </a>
+                  -->
             </template>
-
+            
             <template v-slot:body>
                <div v-if="loading" class="loading">
-                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="trans(WOPI_LOADING)"></i>
+                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('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>{{ trans(WOPI_INVALID_TITLE) }}</h3>
+               <h3>{{ $t('invalid_title') }}</h3>
             </template>
             <template v-slot:body>
-               <div class="alert alert-warning">{{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}</div>
+               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
             </template>
-
-         </Modal>
+   
+         </modal>
       </div>
    </teleport>
 </template>
 
-<script setup>
-import { ref, computed } from 'vue';
+<script>
 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'
 
-
-// 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;
-};
+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.",
+         }
+      }
+   }
+}
 </script>
 
 <style lang="scss">