fix(translation): fix translation stored in const, to also be changed using language change button (#1403)

Author: LaurentMag

yaki_admin/src/assets/translations/en.json

@@ -57,7 +57,7 @@
     "statistics": "Statistics"
   },
   "popups": {
-    "irreversible": "tThis action is irreversible !",
+    "irreversible": "This action is irreversible !",
     "deletionConfirmation": "Are you sure you want to ",
     "fileHandling": {
       "tooLarge": "The file is too large",

yaki_admin/src/assets/translations/fr.json

@@ -60,7 +60,7 @@
     "irreversible": "Cette action est irréversible !",
     "deletionConfirmation": "Êtes-vous sûr de vouloir ",
     "fileHandling": {
-      "tooLarge": "Le fichier est trop volumineux",
+      "tooLarge": "Fichier trop volumineux",
       "select": "Sélectionner un fichier",
       "sizeLimit": "sous 500kb",
       "wrongFormat": "Le format du fichier est incorrect"

yaki_admin/src/ui/components/modals/ModalCreateEditTeam.vue

@@ -8,7 +8,7 @@ import pencilIcon from "@/assets/icons_svg/Edit.svg";
 import deleteIcon from "@/assets/icons_svg/CrossClose.svg";
 import defaultTeamImage from "@/assets/images/teamDefaultImg2.svg";
 
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { BUTTONCOLORS } from "@/constants/componentsSettings.enum";
 import { useModalStore } from "@/stores/modalStore";
@@ -20,14 +20,15 @@ const isMissingTeamNameError = ref<boolean>(false);
 
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
-const createEditTranslation = {
+
+const createEditTranslation = computed(() => ({
   modalTitleEditText: t("popups.teamEdition.title"),
   modalDescriptionEditText: t("popups.teamEdition.description"),
   modaleTitleCreateText: t("popups.teamCreation.title"),
   modalDescriptionCreateText: t("popups.teamCreation.description"),
   modalValidateButtonText: t("buttons.validate"),
   modalEditButtonText: t("buttons.modify"),
-};
+}));
 
 const teamLogoStore = useTeamLogoStore();
 
@@ -65,7 +66,7 @@ watch(
   [() => modalStore.getMode, () => modalStore.getIsShow],
   ([newMode, newIsShow]) => {
     teamLogoStore.setTeamLogoToDisplay(newIsShow, newMode);
-    modalStore.setModalHeaderText(newIsShow, newMode, createEditTranslation);
+    modalStore.setModalHeaderText(newIsShow, newMode, createEditTranslation.value);
 
     onModalOpenLogo.value = teamLogoStore.getLogoDisplayed;
   },

yaki_admin/src/ui/components/modals/ModalDelete.vue

@@ -15,34 +15,34 @@ const teamStore = useTeamStore();
 
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
-const translation = {
+const translation = computed(() => ({
   remove: t("buttons.remove"),
   delete: t("buttons.delete"),
   userRemove: t("popups.teamRemoveUser.title"),
   captainRemove: t("popups.captainRemoval.title"),
   teamDelete: t("popups.teamDeletion.title"),
-};
+}));
 
 const title = computed(() => {
   switch (modalStore.getMode) {
     case MODALMODE.userDelete:
-      return translation.userRemove;
+      return translation.value.userRemove;
     case MODALMODE.captainDelete:
-      return translation.captainRemove;
+      return translation.value.captainRemove;
     case MODALMODE.teamDelete:
-      return translation.teamDelete;
+      return translation.value.teamDelete;
   }
   return "";
 });
 
 const action = computed(() => {
   switch (modalStore.getMode) {
     case MODALMODE.userDelete:
-      return translation.remove;
+      return translation.value.remove;
     case MODALMODE.captainDelete:
-      return translation.remove;
+      return translation.value.remove;
     case MODALMODE.teamDelete:
-      return translation.delete;
+      return translation.value.delete;
   }
   return "";
 });