Resolve "Finish handling of internationalization in vuejs: handling translation of "translatable string""

2025-08-24 16:43:48 +00:00 · 2025-05-28 14:40:26 +00:00
parent dc44c46667
commit 649ad26721
22 changed files with 118 additions and 464 deletions
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
@@ -33,6 +33,7 @@
 import { mapState, mapGetters } from "vuex";
 import VueMultiselect from "vue-multiselect";
 import NewLocation from "./Location/NewLocation.vue";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
    trans,
    ACTIVITY_LOCATION,
@@ -77,15 +78,15 @@ export default {
    },
    methods: {
        labelAccompanyingCourseLocation(value) {
-            return `${value.address.text} (${value.locationType.title.fr})`;
+            return `${value.address.text} (${localizeString(value.locationType.title)})`;
        },
        customLabel(value) {
            return value.locationType
                ? value.name
                    ? value.name === "__AccompanyingCourseLocation__"
                        ? this.labelAccompanyingCourseLocation(value)
-                        : `${value.name} (${value.locationType.title.fr})`
-                    : value.locationType.title.fr
+                        : `${value.name} (${localizeString(value.locationType.title)})`
+                    : localizeString(value.locationType.title)
                : "";
        },
    },
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
@@ -44,7 +44,7 @@
                                    :value="t"
                                    :key="t.id"
                                >
-                                    {{ t.title.fr }}
+                                    {{ localizeString(t.title) }}
                                </option>
                            </select>
                            <label>{{
@@ -126,6 +126,7 @@ 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 { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
    SAVE,
    ACTIVITY_LOCATION_FIELDS_EMAIL,
@@ -270,6 +271,7 @@ export default {
        this.getLocationTypesList();
    },
    methods: {
+        localizeString,
        checkForm() {
            let cond = true;
            this.errors = [];
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
+++ b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
@@ -20,7 +20,10 @@
                                </option>
                                <template v-for="t in templates" :key="t.id">
                                    <option :value="t.id">
-                                        {{ t.name.fr || "Aucun nom défini" }}
+                                        {{
+                                            localizeString(t.name) ||
+                                            "Aucun nom défini"
+                                        }}
                                    </option>
                                </template>
                            </select>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -41,7 +41,7 @@
                >
                    <option value="" selected disabled>Zoom</option>
                    <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
-                        {{ z.label.fr }}
+                        {{ localizeString(z.label) }}
                    </option>
                </select>
                <template v-if="pageCount > 1">
@@ -173,7 +173,7 @@
                >
                    <option value="" selected disabled>Zoom</option>
                    <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
-                        {{ z.label.fr }}
+                        {{ localizeString(z.label) }}
                    </option>
                </select>
                <template v-if="pageCount > 1">
@@ -395,6 +395,7 @@ import {
    SIGNATURES_GO_TO_SIGNATURE_UNIQUE,
    trans,
 } from "translator";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 // @ts-ignore incredible but the console.log is needed
 import * as PdfWorker from "pdfjs-dist/build/pdf.worker.mjs";
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
@@ -0,0 +1,41 @@
+import { TranslatableString } from "ChillMainAssets/types";
+
+/**
+ * Localizes a translatable string object based on the current locale.
+ * A fallback logic is implemented in case no translation is available for the current locale.
+ *
+ * @param translatableString Object containing translations for different locales
+ * @param locale defaults to browser locale
+ * @returns The localized string or null if no translation is available
+ */
+export function localizeString(
+    translatableString: TranslatableString | null | undefined,
+    locale?: string,
+): string {
+    if (!translatableString || Object.keys(translatableString).length === 0) {
+        return "";
+    }
+
+    const currentLocale = locale || navigator.language.split("-")[0] || "fr";
+
+    if (translatableString[currentLocale]) {
+        return translatableString[currentLocale];
+    }
+
+    // Define fallback locales
+    const fallbackLocales: string[] = ["fr", "en"];
+
+    for (const fallbackLocale of fallbackLocales) {
+        if (translatableString[fallbackLocale]) {
+            return translatableString[fallbackLocale];
+        }
+    }
+
+    // No fallback translation found, use the first available
+    const availableLocales = Object.keys(translatableString);
+    if (availableLocales.length > 0) {
+        return translatableString[availableLocales[0]];
+    }
+
+    return "";
+}
--- a/src/Bundle/ChillMainBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -66,10 +66,7 @@ export interface UserAssociatedInterface {
    id: number;
 }

-export interface TranslatableString {
-    fr?: string;
-    nl?: string;
-}
+export type TranslatableString = Record<string, string>;

 export interface Postcode {
    id: number;
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
@@ -22,6 +22,7 @@

 <script>
 import VueMultiselect from "vue-multiselect";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
    name: "CountrySelection",
@@ -68,7 +69,7 @@ export default {
            )[0];
        },
        transName({ name }) {
-            return name.fr; //TODO multilang
+            return localizeString(name);
        },
        selectCountry(value) {
            //console.log('select country', value);
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -32,7 +32,7 @@
                        class="chill-entity entity-social-issue"
                    >
                        <span class="badge bg-chill-l-gray text-dark">
-                            {{ i.title.fr }}
+                            {{ localizeString(i.title) }}
                        </span>
                    </span>
                </td>
@@ -77,6 +77,7 @@
 import { mapState, mapGetters } from "vuex";
 import TabTable from "./TabTable";
 import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
    name: "MyAccompanyingCourses",
@@ -96,6 +97,7 @@ export default {
        },
    },
    methods: {
+        localizeString,
        getUrl(c) {
            return `/fr/parcours/${c.id}`;
        },
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -26,7 +26,7 @@
                >
                    <td>{{ $d(e.maxDate.datetime, "short") }}</td>
                    <td>
-                        {{ e.evaluation.title.fr }}
+                        {{ localizeString(e.evaluation.title) }}
                    </td>
                    <td>
                        <span class="chill-entity entity-social-issue">
@@ -97,6 +97,7 @@
 import { mapState, mapGetters } from "vuex";
 import TabTable from "./TabTable";
 import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
+import { localizeString } from "../../lib/localizationHelper/localizationHelper";

 export default {
    name: "MyEvaluations",
@@ -116,6 +117,7 @@ export default {
        },
    },
    methods: {
+        localizeString,
        getUrl(e) {
            switch (e.type) {
                case "accompanying_period_work_evaluation":
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
@@ -1,6 +1,6 @@
 <template>
    <template v-for="(container, index) in data.containers" :key="index">
-        <h4>{{ container.layer.name.fr }}</h4>
+        <h4>{{ localizeString(container.layer.name) }}</h4>
        <ul>
            <li v-for="(unit, index) in container.units" :key="index">
                {{ unit.unitName }} ({{ unit.unitRefId }})
@@ -20,6 +20,7 @@ import {
    getAllGeographicalUnitLayers,
 } from "../../../../lib/api/address";
 import { onMounted, reactive } from "vue";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export interface AddressDetailsGeographicalLayersProp {
    address: Address;
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -30,7 +30,7 @@
                                {{ address.postcode.name }}
                            </p>
                            <p v-if="null !== address.country" class="country">
-                                {{ address.country.name.fr }}
+                                {{ localizeString(address.country.name) }}
                            </p>
                        </div>
                    </template>
@@ -84,9 +84,11 @@
 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 "translator";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
    name: "AddressRenderBox",
+    methods: { localizeString },
    components: {
        Confidential,
        AddressDetailsButton,
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { UserGroup } from "../../../types";
 import { computed } from "vue";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 interface UserGroupRenderBoxProps {
    userGroup: UserGroup;
@@ -18,7 +19,7 @@ const styles = computed<{ color: string; "background-color": string }>(() => {

 <template>
    <span class="badge-user-group" :style="styles">{{
-        userGroup.label.fr
+        localizeString(userGroup.label)
    }}</span>
 </template>

--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
@@ -2,10 +2,10 @@
    <span class="chill-entity entity-user">
        {{ user.label }}
        <span class="user-job" v-if="user.user_job !== null"
-            >({{ user.user_job.label.fr }})</span
+            >({{ localizeString(user.user_job.label) }})</span
        >
        <span class="main-scope" v-if="user.main_scope !== null"
-            >({{ user.main_scope.name.fr }})</span
+            >({{ localizeString(user.main_scope.name) }})</span
        >
        <span
            v-if="user.isAbsent"
@@ -17,8 +17,15 @@
 </template>

 <script>
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 export default {
    name: "UserRenderBoxBadge",
+    methods: {
+        localizeString() {
+            return localizeString;
+        },
+    },
    props: ["user"],
 };
 </script>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
@@ -11,7 +11,7 @@
          :value="s"
        />
        <label class="form-check-label">
-          {{ s.name.fr }}
+          {{ localizeString(s.name) }}
        </label>
      </div>
    </div>
@@ -24,6 +24,7 @@

 <script>
 import { mapState, mapGetters } from "vuex";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
  name: "Scopes",
@@ -48,6 +49,7 @@ export default {
    },
  },
  methods: {
+    localizeString,
    restore() {
      console.log("restore");
    },
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -78,7 +78,7 @@
      <!-- results which **are** attached to an objective -->
      <div v-for="g in goalsPicked" :key="g.goal.id">
        <div class="item-title" @click="removeGoal(g)">
-          <span class="removable">{{ g.goal.title.fr }}</span>
+          <span class="removable">{{ localizeString(g.goal.title) }}</span>
        </div>
        <div>
          <add-result :goal="g.goal" destination="goal"></add-result>
@@ -122,7 +122,7 @@
                  @click="addGoal(g)"
                  :key="g.id"
                >
-                  <span>{{ g.title.fr }}</span>
+                  <span>{{ localizeString(g.title) }}</span>
                </li>
              </ul>
            </template>
@@ -167,7 +167,7 @@
              @click="addEvaluation(e)"
              :key="e.id"
            >
-              <span>{{ e.title.fr }}</span>
+              <span>{{ localizeString(e.title) }}</span>
            </li>
          </ul>
        </div>
@@ -472,6 +472,7 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
 import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 const i18n = {
  messages: {
@@ -673,6 +674,7 @@ export default {
    },
  },
  methods: {
+    localizeString,
    toggleSelect() {
      this.isExpanded = !this.isExpanded;
    },
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -2,7 +2,7 @@
  <div>
    <a id="evaluations"></a>
    <div class="item-title" :title="evaluation.id || 'no id yet'">
-      <span>{{ evaluation.evaluation.title.fr }}</span>
+      <span>{{ localizeString(evaluation.evaluation.title) }}</span>
    </div>

    <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
@@ -69,6 +69,7 @@ import FormEvaluation from "./FormEvaluation.vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue";
 import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 const i18n = {
  messages: {
@@ -129,17 +130,18 @@ export default {
    },
  },
  methods: {
+    localizeString,
    removeEvaluation(e) {
      this.$store.commit("removeEvaluation", e);
      return;
    },
-    toggleEditEvaluation(e) {
+    toggleEditEvaluation() {
      this.$store.commit("toggleEvaluationEdit", { key: this.evaluation.key });
    },
    submitForm() {
      this.toggleEditEvaluation();
    },
-    goToGenerateWorkflow({ event, link, workflowName }) {
+    goToGenerateWorkflow({ workflowName }) {
      const callback = (data) => {
        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
          (e) => e.key === this.evaluation.key,
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
@@ -7,7 +7,7 @@
    <ul class="list-suggest remove-items">
      <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
        <span>
-          {{ r.title.fr }}
+          {{ localizeString(r.title) }}
        </span>
      </li>
    </ul>
@@ -50,7 +50,7 @@
                @click="addResult(r)"
                :key="r.id"
              >
-                <span>{{ r.title.fr }}</span>
+                <span>{{ localizeString(r.title) }}</span>
              </li>
            </ul>
          </template>
@@ -66,6 +66,8 @@
 </template>

 <script>
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 const i18n = {
  messages: {
    fr: {
@@ -124,6 +126,7 @@ export default {
    },
  },
  methods: {
+    localizeString,
    toggleSelect() {
      this.isExpanded = !this.isExpanded;
    },
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
@@ -28,7 +28,7 @@
            :key="t.id"
            :value="t.id"
          >
-            {{ t.label.fr }}
+            {{ localizeString(t.label) }}
          </option>
        </select>
      </div>
@@ -83,9 +83,11 @@
 <script>
 import CurrentHousehold from "./CurrentHousehold";
 import { mapGetters, mapState } from "vuex";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
  name: "Dates",
+  methods: { localizeString },
  components: {
    CurrentHousehold,
  },
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -38,7 +38,7 @@
            }"
            @click="moveToPosition(conc.person.id, position.id)"
          >
-            {{ position.label.fr }}
+            {{ localizeString(position.label) }}
          </button>
        </div>
      </div>
@@ -57,6 +57,7 @@ import { mapGetters, mapState } from "vuex";
 import CurrentHousehold from "./CurrentHousehold";
 import PersonComment from "./PersonComment";
 import PersonText from "../../_components/Entity/PersonText.vue";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
  name: "Positioning",
@@ -79,7 +80,7 @@ export default {
        this.$store.getters.concUnpositionned.length === 0
      );
    },
-    allowHolderForConcerned: (app) => (conc) => {
+    allowHolderForConcerned: () => (conc) => {
      console.log("allow holder for concerned", conc);
      if (conc.position === null) {
        return false;
@@ -89,6 +90,7 @@ export default {
    },
  },
  methods: {
+    localizeString,
    moveToPosition(person_id, position_id) {
      this.$store.dispatch("markPosition", { person_id, position_id });
    },
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -79,7 +79,7 @@
        :value="personAltNamesLabels[i]"
        @input="onAltNameInput"
      />
-      <label :for="a.key">{{ a.labels.fr }}</label>
+      <label :for="a.key">{{ localizeString(a.labels) }}</label>
    </div>

    <!--  TODO fix placeholder if undefined
@@ -117,7 +117,7 @@
          {{ $t("person.civility.placeholder") }}
        </option>
        <option v-for="c in config.civilities" :value="c.id" :key="c.id">
-          {{ c.name.fr }}
+          {{ localizeString(c.name) }}
        </option>
      </select>
      <label>{{ $t("person.civility.title") }}</label>
@@ -219,6 +219,7 @@ import {
 } from "../../_api/OnTheFly";
 import PersonRenderBox from "../Entity/PersonRenderBox.vue";
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
  name: "OnTheFlyPerson",
@@ -427,7 +428,8 @@ export default {
    }
  },
  methods: {
-    checkErrors(e) {
+    localizeString,
+    checkErrors() {
      this.errors = [];
      if (this.person.lastName === "") {
        this.errors.push("Le nom ne doit pas être vide.");
@@ -445,7 +447,7 @@ export default {
    loadData() {
      getPerson(this.id).then(
        (person) =>
-          new Promise((resolve, reject) => {
+          new Promise((resolve) => {
            this.person = person;
            //console.log('get person', this.person);
            resolve();
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -102,7 +102,7 @@
                            :key="civility.id"
                            :value="civility"
                        >
-                            {{ civility.name.fr }}
+                            {{ localizeString(civility.name) }}
                        </option>
                    </select>
                </div>
@@ -257,6 +257,7 @@ import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress";
 import { getThirdparty } from "../../_api/OnTheFly";
 import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

 export default {
    name: "OnTheFlyThirdParty",
@@ -339,6 +340,7 @@ export default {
        },
    },
    methods: {
+        localizeString,
        loadData() {
            return getThirdparty(this.id).then(
                (thirdparty) =>