Merge pull request #196 from devforth/fix-translations

feat: integrate i18n for alert messages in various components

Author: ivictbor

adminforth/spa/src/renderers/CompactUUID.vue

@@ -16,7 +16,9 @@ import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
 import adminforth from '@/adminforth';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
@@ -33,7 +35,7 @@ const id = ref();
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
   adminforth.alert({
-    message: 'ID copied to clipboard',
+    message: t('ID copied to clipboard'),
     variant: 'success',
   })
 }

adminforth/spa/src/views/EditView.vue

@@ -81,7 +81,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import adminforth from '@/adminforth';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const coreStore = useCoreStore();
 
 const isValid = ref(false);
@@ -170,7 +172,7 @@ async function saveRecord() {
     showErrorTost(resp.error);
   } else {
     adminforth.alert({
-      message: 'Record updated successfully',
+      message: t('Record updated successfully'),
       variant: 'success',
       timeout: 400000
     });

dev-demo/custom/ApartsPie.vue

@@ -28,7 +28,9 @@
   import { PieChart } from '@/afcl';
   import { callApi } from '@/utils';
   import adminforth from '@/adminforth';
-  
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
   
   const data: Ref<any[]> = ref([]);
   
@@ -38,7 +40,7 @@
       data.value = await callApi({path: '/api/aparts-by-room-percentages', method: 'GET'});
     } catch (error) {
       adminforth.alert({
-        message: `Error fetching data: ${error.message}`,
+        message: `${t('Error fetching data:')} ${error.message}`,
         variant: 'danger',
         timeout: 'unlimited'
       });

dev-demo/custom/Dash.vue

@@ -303,7 +303,7 @@ onMounted(async () => {
     data.value = await callApi({path: '/api/dashboard/', method: 'GET'});
   } catch (error) {
     adminforth.alert({
-      message: `Error fetching data: ${error.message}`,
+      message: `${t('Error fetching data: ')} ${error.message}`,
       variant: 'danger',
     });
   }

live-demo/app/custom/Dashboard.vue

@@ -233,7 +233,7 @@ onMounted(async () => {
     data.value = await callApi({path: '/api/dashboard/', method: 'GET'});
   } catch (error) {
     adminforth.alert({
-      message: t(`Error fetching data: {message}`, { message: error.message }),
+      message: (t(`Error fetching data: {message}`), { message: error.message }),
       variant: 'danger',
     });
   }