Implement trans() in activity vue components

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue

@@ -22,8 +22,8 @@
       <ul class="record_actions">
          <li class="add-persons">
             <add-persons
-               buttonTitle="activity.add_persons"
+               :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
-               modalTitle="activity.add_persons"
+               :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
                v-bind:key="addPersons.key"
                v-bind:options="addPersonsOptions"
                @addNewPersons="addNewPersons"
@@ -40,6 +40,20 @@ import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+import {
+    ACTIVITY_BLOC_PERSONS,
+    ACTIVITY_BLOC_PERSONS_ASSOCIATED,
+    ACTIVITY_BLOC_PERSONS_NOT_ASSOCIATED,
+    ACTIVITY_BLOC_THIRDPARTY,
+    ACTIVITY_BLOC_USERS,
+    ACTIVITY_ADD_PERSONS,
+    ACTIVITY_LOCATION,
+    ACTIVITY_CHOOSE_LOCATION,
+    MULTISELECT_SELECT_LABEL,
+    MULTISELECT_DESELECT_LABEL,
+    MULTISELECT_SELECTED_LABEL,
+    trans,
+} from "../../../../../../../../../../../assets/translator";
 
 export default {
    name: "ConcernedGroups",
@@ -48,16 +62,22 @@ export default {
       PersonsBloc,
       PersonText
    },
+    setup() {
+        return {
+            trans,
+            ACTIVITY_ADD_PERSONS
+        };
+    },
    data() {
       return {
          personsBlocs: [
             {  key: 'persons',
-               title: 'activity.bloc_persons',
+               title: trans(ACTIVITY_BLOC_PERSONS),
                persons: [],
                included: false
             },
             {  key: 'personsAssociated',
-               title: 'activity.bloc_persons_associated',
+               title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
                persons: [],
                included: window.activity ? window.activity.activityType.personsVisible !== 0 : true
             },
@@ -67,12 +87,12 @@ export default {
                included: window.activity ? window.activity.activityType.personsVisible !== 0 : true
             },
             {  key: 'thirdparty',
-               title: 'activity.bloc_thirdparty',
+               title: trans(ACTIVITY_BLOC_THIRDPARTY),
                persons: [],
                included: window.activity ? window.activity.activityType.thirdPartiesVisible !== 0 : true
             },
             {  key: 'users',
-               title: 'activity.bloc_users',
+               title: trans(ACTIVITY_BLOC_USERS),
                persons: [],
                included: window.activity ? window.activity.activityType.usersVisible !== 0 : true
             },

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -2,7 +2,7 @@
     <teleport to="#location">
         <div class="mb-3 row">
             <label :class="locationClassList">
-                {{ $t("activity.location") }}
+                {{ trans(ACTIVITY_LOCATION) }}
             </label>
             <div class="col-sm-8">
                 <VueMultiselect
@@ -13,11 +13,11 @@
                     open-direction="top"
                     :multiple="false"
                     :searchable="true"
-                    :placeholder="$t('activity.choose_location')"
+                    :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
                     :custom-label="customLabel"
-                    :select-label="$t('multiselect.select_label')"
+                    :select-label="trans(MULTISELECT_SELECT_LABEL)"
-                    :deselect-label="$t('multiselect.deselect_label')"
+                    :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-                    :selected-label="$t('multiselect.selected_label')"
+                    :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
                     :options="availableLocations"
                     group-values="locations"
                     group-label="locationGroup"
@@ -34,6 +34,14 @@
 import { mapState, mapGetters } from "vuex";
 import VueMultiselect from "vue-multiselect";
 import NewLocation from "./Location/NewLocation.vue";
+import {
+    trans,
+    ACTIVITY_LOCATION,
+    ACTIVITY_CHOOSE_LOCATION,
+    MULTISELECT_SELECT_LABEL,
+    MULTISELECT_DESELECT_LABEL,
+    MULTISELECT_SELECTED_LABEL
+} from '../../../../../../../../../../../assets/translator'
 
 export default {
     name: "Location",
@@ -41,6 +49,16 @@ export default {
         NewLocation,
         VueMultiselect,
     },
+    setup() {
+        return {
+            trans,
+            ACTIVITY_LOCATION,
+            ACTIVITY_CHOOSE_LOCATION,
+            MULTISELECT_SELECT_LABEL,
+            MULTISELECT_DESELECT_LABEL,
+            MULTISELECT_SELECTED_LABEL
+        };
+    },
     data() {
         return {
             locationClassList:

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue

@@ -3,7 +3,7 @@
         <ul class="record_actions">
             <li>
                 <a class="btn btn-sm btn-create" @click="openModal">
-                    {{ $t('activity.create_new_location') }}
+                    {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
                 </a>
             </li>
         </ul>
@@ -14,7 +14,7 @@
                 @close="modal.showModal = false">
 
                 <template v-slot:header>
-                    <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
+                    <h3 class="modal-title">{{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}</h3>
                 </template>
                 <template v-slot:body>
                     <form>
@@ -26,17 +26,17 @@
 
                         <div class="form-floating mb-3">
                             <select class="form-select form-select-lg" id="type" required v-model="selectType">
-                                <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
+                                <option selected disabled value="">{{ trans(ACTIVITY_CHOOSE_LOCATION_TYPE) }}</option>
                                 <option v-for="t in locationTypes" :value="t" :key="t.id">
                                     {{ t.title.fr }}
                                 </option>
                             </select>
-                            <label>{{ $t('activity.location_fields.type') }}</label>
+                            <label>{{ trans(ACTIVITY_LOCATION_FIELDS_TYPE) }}</label>
                         </div>
 
                         <div class="form-floating mb-3">
                             <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
-                            <label for="name">{{ $t('activity.location_fields.name') }}</label>
+                            <label for="name">{{ trans(ACTIVITY_LOCATION_FIELDS_NAME) }}</label>
                         </div>
 
                         <add-address
@@ -49,15 +49,15 @@
 
                         <div class="form-floating mb-3" v-if="showContactData">
                             <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
-                            <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
+                            <label for="phonenumber1">{{ trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER1) }}</label>
                         </div>
                         <div class="form-floating mb-3" v-if="hasPhonenumber1">
                             <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
-                            <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
+                            <label for="phonenumber2">{{ trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER2) }}</label>
                         </div>
                         <div class="form-floating mb-3" v-if="showContactData">
                             <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
-                            <label for="email">{{ $t('activity.location_fields.email') }}</label>
+                            <label for="email">{{ trans(ACTIVITY_LOCATION_FIELDS_EMAIL) }}</label>
                         </div>
 
                     </form>
@@ -66,7 +66,7 @@
                     <button class="btn btn-save"
                         @click.prevent="saveNewLocation"
                     >
-                        {{ $t('action.save') }}
+                        {{ trans(SAVE) }}
                     </button>
                 </template>
 
@@ -81,6 +81,13 @@ import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue"
 import { mapState } from "vuex";
 import { getLocationTypes } from "../../api";
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import {
+    SAVE,
+    ACTIVITY_LOCATION_FIELDS_EMAIL, ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+    ACTIVITY_LOCATION_FIELDS_PHONENUMBER2, ACTIVITY_LOCATION_FIELDS_NAME,
+    ACTIVITY_LOCATION_FIELDS_TYPE, ACTIVITY_CHOOSE_LOCATION_TYPE, ACTIVITY_CREATE_NEW_LOCATION,
+    trans
+} from "../../../../../../../../../../../../assets/translator";
 
 export default {
     name: "NewLocation",
@@ -88,6 +95,19 @@ export default {
         Modal,
         AddAddress,
     },
+    setup() {
+        return {
+            trans,
+            SAVE,
+            ACTIVITY_LOCATION_FIELDS_EMAIL,
+            ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+            ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
+            ACTIVITY_LOCATION_FIELDS_NAME,
+            ACTIVITY_LOCATION_FIELDS_TYPE,
+            ACTIVITY_CHOOSE_LOCATION_TYPE,
+            ACTIVITY_CREATE_NEW_LOCATION,
+        };
+    },
     props: ['availableLocations'],
     data() {
         return {

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -3,7 +3,7 @@
 
       <div class="mb-3 row">
          <div class="col-4">
-            <label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
+            <label :class="socialIssuesClassList">{{ trans(ACTIVITY_SOCIAL_ISSUES) }}</label>
          </div>
          <div class="col-8">
 
@@ -31,7 +31,7 @@
                :allow-empty="true"
                :show-labels="false"
                :loading="issueIsLoading"
-               :placeholder="$t('activity.choose_other_social_issue')"
+               :placeholder="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
                :options="socialIssuesOther"
                @select="addIssueInList">
             </VueMultiselect>
@@ -42,7 +42,7 @@
 
       <div class="mb-3 row">
          <div class="col-4">
-            <label :class="socialActionsClassList">{{ $t('activity.social_actions') }}</label>
+            <label :class="socialActionsClassList">{{ trans(ACTIVITY_SOCIAL_ACTIONS) }}</label>
          </div>
          <div class="col-8">
 
@@ -51,7 +51,7 @@
             </div>
 
             <span v-else-if="socialIssuesSelected.length === 0" class="inline-choice chill-no-data-statement mt-3">
-               {{ $t('activity.select_first_a_social_issue') }}
+               {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
             </span>
 
             <template v-else-if="socialActionsList.length > 0">
@@ -66,7 +66,7 @@
             </template>
 
             <span v-else-if="actionAreLoaded && socialActionsList.length === 0" class="inline-choice chill-no-data-statement mt-3">
-               {{ $t('activity.social_action_list_empty') }}
+               {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
             </span>
 
 
@@ -81,6 +81,11 @@ import VueMultiselect from 'vue-multiselect';
 import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
 import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
 import { getSocialIssues, getSocialActionByIssue } from '../api.js';
+import {
+    ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+    ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE, ACTIVITY_SOCIAL_ACTIONS,
+    ACTIVITY_SOCIAL_ISSUES, ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE, trans
+} from "../../../../../../../../../../../assets/translator";
 
 export default {
    name: "SocialIssuesAcc",
@@ -89,6 +94,16 @@ export default {
       CheckSocialAction,
       VueMultiselect
    },
+    setup() {
+        return {
+            trans,
+            ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+            ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+            ACTIVITY_SOCIAL_ACTIONS,
+            ACTIVITY_SOCIAL_ISSUES,
+            ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE
+        };
+    },
    data() {
       return {
          issueIsLoading: false,