From 611261c863a85f64018cb88f0f4fbd88b3bb87f0 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 Sep 2024 16:48:44 +0200
Subject: [PATCH] Example usage of translation keys from yaml files within vue
 component

---
 .../Resources/public/vuejs/_components/Modal.vue      | 11 +++++++++--
 .../ChillMainBundle/translations/messages.fr.yml      |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index 11bb9db2f..720f91c5d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/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')">{{ $t('action.close') }}</button>
+                <button class="btn btn-cancel" @click="$emit('close')">{{ closeKey }}</button>
                 <slot name="footer"></slot>
               </div>
             </div>
@@ -30,6 +30,7 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
+import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
 /*
  *    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
@@ -53,7 +54,13 @@ export default defineComponent({
          default: false
       }
    },
-   emits: ['close']
+   emits: ['close'],
+    computed: {
+       closeKey() {
+           console.log('close key', trans(MODAL_ACTION_CLOSE))
+           return trans(MODAL_ACTION_CLOSE)
+       }
+    }
 });
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 421cac473..3f2cb49f3 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -1,3 +1,7 @@
+modal:
+    action:
+        close: Fermer
+
 "This program is free software: you can redistribute it and/or modify it under the terms of the <strong>GNU Affero General Public License</strong>": "Ce programme est un logiciel libre: vous pouvez le redistribuer et/ou le modifier selon les termes de la licence <strong>GNU Affero GPL</strong>"
 User manual: Manuel d'utilisation
 Search: Rechercher