fix: refs #4774 fix translation front

src/pages/Worker/TranslationsVn copy.vue

@@ -0,0 +1,220 @@
+<script setup>
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import axios from 'axios';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
+const { openConfirmationModal } = useVnConfirm();
+
+const { t } = useI18n();
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        visible: false,
+    },
+    {
+        align: 'left',
+        name: primaryKey,
+        label: t('primaryKey'),
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'en',
+        label: t('defaultLang(en)'),
+    },
+    {
+        align: 'left',
+        name: lang,
+        label: lang,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'save',
+                action: (row) => upsertI18n(row),
+                isPrimary: true,
+                disable: (row) => !row.hasChanges,
+            },
+            {
+                title: t('globals.delete'),
+                icon: 'delete',
+                isPrimary: true,
+                action: (row) =>
+                    openConfirmationModal(
+                        t('You are going to delete this ticket purchase request'),
+                        t(
+                            'This ticket will be removed from ticket purchase requests! Continue anyway?'
+                        ),
+                        () => removeLine(row.id)
+                    ),
+
+                disable: (row) => row.id,
+            },
+        ],
+    },
+]);
+
+const tableRef = ref({});
+const langs = ref([]);
+const tables = ref([]);
+const lang = ref('es');
+const primaryKey = computed(() => table.value.primaryKey);
+const field = computed(() => table.value.field);
+const table = ref();
+const originalData = ref([]);
+const url = computed(() => table.value?.tableName + 's');
+
+async function loadTable(data) {
+    if (data) {
+        console.log('data: ', data);
+        originalData.value = [];
+        tableRef.value.CrudModelRef.formData = [];
+        const newData = {};
+        for (const translation of data) {
+            if (!newData[translation[primaryKey.value]])
+                newData[translation[primaryKey.value]] = {};
+            newData[translation[primaryKey.value]][translation.lang] =
+                translation[field.value];
+        }
+
+        console.log('newData: ', newData);
+        for (const currentData in newData) {
+            originalData.value.push({
+                [primaryKey.value]: currentData,
+                ...newData[currentData],
+            });
+            tableRef.value.CrudModelRef.formData.push({
+                [primaryKey.value]: currentData,
+                ...newData[currentData],
+            });
+        }
+        console.log(
+            'tableRef.value.CrudModelRef.formData: ',
+            tableRef.value.CrudModelRef.formData
+        );
+        console.log('newData: ', newData);
+        return;
+    }
+    tableRef.value.CrudModelRef.formData = JSON.parse(JSON.stringify(originalData.value));
+}
+
+function resetOriginalData() {
+    originalData.value = null;
+}
+
+async function upsertI18n(data) {
+    console.log('data: ', data);
+    await axios.patch(url.value, {
+        [field.value]: data[lang.value],
+        [primaryKey.value]: data[primaryKey.value],
+        lang: lang.value,
+    });
+
+    const index = originalData.value.findIndex(
+        (t) => t[primaryKey.value] == data[primaryKey.value]
+    );
+    originalData.value[index] = data;
+    data.hasChanges = false;
+}
+
+async function removeLine(id) {
+    try {
+        console.log({ id }, 'eliminado');
+    } catch (err) {
+        console.error('Error ', err);
+    }
+}
+</script>
+
+<template>
+    <FetchData url="Languages" @on-fetch="(data) => (langs = data)" auto-load />
+    <FetchData
+        url="Applications/get-i18n-tables"
+        @on-fetch="(data) => (tables = data)"
+        auto-load
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <VnSelect
+                :label="t('table')"
+                v-model="table"
+                :options="tables"
+                option-label="tableName"
+                option-value="tableName"
+                @update:model-value="resetOriginalData()"
+                :emit-value="false"
+            />
+            <VnSelect
+                :label="t('lang')"
+                v-model="lang"
+                :options="langs"
+                option-label="code"
+                option-value="code"
+                @update:model-value="loadTable()"
+            />
+        </template>
+    </VnSubToolbar>
+    <VnTable
+        ref="tableRef"
+        data-key="translations"
+        :url="url"
+        :columns="columns"
+        :create="{
+            urlCreate: url,
+            title: 'Create translation',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { lang: 'en' },
+        }"
+        :right-search="false"
+        @on-fetch="(data) => loadTable(data)"
+        :save-fn="upsertI18n"
+        :search-url="false"
+    >
+        <template #[`column-${lang}`]="{ row }">
+            <VnInput
+                v-model="row[lang]"
+                :clearable="false"
+                @keyup.enter="upsertI18n(row)"
+                @update:model-value="
+                    (value) => {
+                        row.hasChanges =
+                            value !=
+                            originalData.find((o) => o[primaryKey] == row[primaryKey])?.[
+                                lang
+                            ];
+                    }
+                "
+            />
+        </template>
+        <template #more-create-dialog="{ data }">
+            <VnInput v-model="data[field]" :label="field" />
+        </template>
+    </VnTable>
+</template>
+
+<i18n>
+    es:
+        primaryKey: Clave primaria
+        defaultLang(en): Idioma por defecto(Eng)
+        secondLang: Idioma secundario
+        table: Tabla
+        lang: Idioma
+    en:
+        primaryKey: Primary key
+        defaultLang(en): Default language(Eng)
+        secondLang: Second language
+        table: Table
+        lang: Language
+</i18n>

src/pages/Worker/TranslationsVn.vue

@@ -22,7 +22,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: primaryKey,
-        label: t('primaryKey'),
+        label: primaryKey,
         create: true,
     },
     {
@@ -34,6 +34,7 @@ const columns = computed(() => [
         align: 'left',
         name: lang,
         label: lang,
+        component: 'input',
     },
     {
         align: 'right',
@@ -77,30 +78,30 @@ const originalData = ref([]);
 const url = computed(() => table.value?.tableName + 's');
 
 async function loadTable(data) {
-    if (data) {
+    console.log('data: ', data);
-        originalData.value = [];
+    if (data) originalData.value = data;
-        tableRef.value.CrudModelRef.formData = [];
+    if (!lang.value) return;
-        const newData = {};
+    const toFilter = JSON.parse(JSON.stringify(originalData.value));
-        for (const translation of data) {
+    console.log('toFilter: ', toFilter);
-            if (!newData[translation[primaryKey.value]])
+
-                newData[translation[primaryKey.value]] = {};
+    const filtered = [];
-            newData[translation[primaryKey.value]][translation.lang] =
+    for (const translation of toFilter) {
-                translation[field.value];
+        if (translation.lang != lang.value) continue;
+        translation[lang.value] = translation[field.value];
+        translation.en = originalData.value.find(
+            (o) => o.lang == 'en' && o[primaryKey.value] == translation[primaryKey.value]
+        )[field.value];
+
+        filtered.push(translation);
     }
 
-        for (const currentData in newData) {
+    tableRef.value.CrudModelRef.formData = filtered;
-            originalData.value.push({
+
-                [primaryKey.value]: currentData,
+    // PENDIENTE
-                ...newData[currentData],
+    /*
-            });
+        Borrar por id (nativo de crudModel) y poner mensaje para si se quiieren borrar todas la traducciones (confirmar con Javi)
-            tableRef.value.CrudModelRef.formData.push({
+        Para guardar,  Setear el original data de crudmodel para saber cuando cambia
-                [primaryKey.value]: currentData,
+    */
-                ...newData[currentData],
-            });
-        }
-        return;
-    }
-    tableRef.value.CrudModelRef.formData = JSON.parse(JSON.stringify(originalData.value));
 }
 
 function resetOriginalData() {
@@ -108,6 +109,7 @@ function resetOriginalData() {
 }
 
 async function upsertI18n(data) {
+    console.log('data: ', data);
     await axios.patch(url.value, {
         [field.value]: data[lang.value],
         [primaryKey.value]: data[primaryKey.value],
@@ -163,7 +165,6 @@ async function removeLine(id) {
         data-key="translations"
         :url="url"
         :columns="columns"
-        :filter="{ limit: 50 }"
         :create="{
             urlCreate: url,
             title: 'Create translation',
@@ -174,24 +175,16 @@ async function removeLine(id) {
         @on-fetch="(data) => loadTable(data)"
         :save-fn="upsertI18n"
         :search-url="false"
+        :is-editable="true"
     >
-        <template #[`column-${lang}`]="{ row }">
-            <VnInput
-                v-model="row[lang]"
-                :clearable="false"
-                @keyup.enter="upsertI18n(row)"
-                @update:model-value="
-                    (value) => {
-                        row.hasChanges =
-                            value !=
-                            originalData.find((o) => o[primaryKey] == row[primaryKey])?.[
-                                lang
-                            ];
-                    }
-                "
-            />
-        </template>
         <template #more-create-dialog="{ data }">
+            <VnSelect
+                :label="t('lang')"
+                v-model="data.lang"
+                :options="langs"
+                option-label="code"
+                option-value="code"
+            />
             <VnInput v-model="data[field]" :label="field" />
         </template>
     </VnTable>