Merge remote-tracking branch 'origin/master' into ticket-app-master

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 "";
+}

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss

@@ -11,15 +11,14 @@
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 
 // 4. Include any default map overrides here
 @import "custom/_maps";
-@import "bootstrap/scss/maps";
 
 // 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/root";
-
-
+@import "bootstrap/scss/utilities";
 

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss

@@ -1,8 +1,8 @@
 // Some Bootstrap variables and configuration files are shared with chill entrypoint
 @import "shared";
 
-// 6. Optionally include any other parts as needed
-@import "bootstrap/scss/utilities";
+// 6. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets
+@import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -32,10 +32,12 @@
 @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/placeholders";
 
 // 7. Optionally include utilities API last to generate classes based on the Sass map in
 @import "bootstrap/scss/utilities/api";
+// Helpers
+@import "bootstrap/scss/helpers";
 
 // 8. Add additional custom code here
 @import "custom";

src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts

@@ -15,7 +15,7 @@ ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
 
     createApp({
         components: { CommentEditor },
-        template: `<comment-editor v-model="content" @input="handleInput"></comment-editor>`,
+        template: `<comment-editor v-model="content" @update:modelValue="handleInput"></comment-editor>`,
         data() {
             return {
                 content,

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;

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);

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}`;
         },

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

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;

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

@@ -24,7 +24,6 @@ const toggleButtonClass = computed(() => {
 });
 
 const toggleEditor = () => {
-    console.log("toggleEditor");
     let newValue;
 
     newValue = kind.value === "simple" ? "rich" : "simple";
@@ -32,8 +31,6 @@ const toggleEditor = () => {
     window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
 
     window.dispatchEvent(new Event("toggleEditorKind"));
-
-    console.log("new storage", window.localStorage.getItem(EDITOR_MODE_KEY));
 };
 
 const onKindChange = function (/* event: StorageEvent | Event */) {
@@ -96,6 +93,8 @@ onUnmounted(function () {
 </template>
 
 <style scoped lang="scss">
+@import "ChillMainAssets/module/bootstrap/bootstrap";
+
 .toggle-button {
     background: white;
     border: none;
@@ -103,15 +102,17 @@ onUnmounted(function () {
     color: #069;
     cursor: pointer;
 
-    &.onEditor {
-        position: relative;
-        left: 1rem;
-        top: -1.5rem;
-    }
-    &.onSimple {
-        position: relative;
-        top: -0.75rem;
-        left: 1rem;
+    @include media-breakpoint-up(md) {
+        &.onEditor {
+            position: relative;
+            left: 1rem;
+            top: -1.5rem;
+        }
+        &.onSimple {
+            position: relative;
+            top: -0.75rem;
+            left: 1rem;
+        }
     }
 }
 

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,

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>
 

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>