src/components/CrudModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';

src/pages/Worker/TranslationsVn.vue

@@ -4,12 +4,14 @@ 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';
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 const { openConfirmationModal } = useVnConfirm();
+useArrayData;
 
 const { t } = useI18n();
 const columns = computed(() => [
@@ -36,70 +38,51 @@ const columns = computed(() => [
         label: lang,
         component: 'input',
     },
-    {
-        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 lang = ref('ca');
 const table = ref();
 const originalData = ref([]);
-const url = computed(() => table.value?.tableName + 's');
+const selected = ref([]);
+const PRIMARY_LANG = 'en';
+
+const primaryKey = computed(() => table.value?.primaryKey);
+const field = computed(() => table.value.field);
+const url = computed(() => {
+    if (!table.value?.tableName) return;
+    const arrayData = useArrayData('translations');
+    if (arrayData) arrayData.reset(['skip', 'filter.skip', 'page']);
+
+    return table.value?.tableName + 's';
+});
 
 async function loadTable(data) {
-    console.log('data: ', data);
     if (data) originalData.value = data;
     if (!lang.value) return;
     const toFilter = JSON.parse(JSON.stringify(originalData.value));
-    console.log('toFilter: ', toFilter);
+    if (!toFilter) return;
 
     const filtered = [];
-    for (const translation of toFilter) {
-        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];
+    for (const row of toFilter) {
+        if (row.lang != PRIMARY_LANG) continue;
 
-        filtered.push(translation);
+        row.en = row[field.value];
+        const translation = originalData.value.find(
+            (o) => o.lang == lang.value && o[primaryKey.value] == row[primaryKey.value]
+        );
+
+        row[lang.value] = translation?.[field.value];
+        row.id = translation?.id;
+        filtered.push(row);
     }
 
-    tableRef.value.CrudModelRef.formData = filtered;
-
+    tableRef.value.CrudModelRef.resetData(filtered);
     // PENDIENTE
     /*
-        Borrar por id (nativo de crudModel) y poner mensaje para si se quiieren borrar todas la traducciones (confirmar con Javi)
+        Poner mensaje para si se quiieren borrar todas la traducciones (confirmar con Javi)
         Para guardar,  Setear el original data de crudmodel para saber cuando cambia
     */
 }
@@ -108,27 +91,25 @@ 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,
-    });
+async function save(data, changes) {
+    const { updates, creates } = changes();
 
-    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);
+    for (const update of updates ?? []) {
+        update.data[field.value] = update.data[lang.value];
+        delete update.data[lang.value];
     }
+
+    for (const create of creates ?? []) {
+        delete create['$index'];
+        delete create[PRIMARY_LANG];
+        create.lang = lang.value;
+        create[field.value] = create[lang.value];
+        delete create[lang.value];
+    }
+
+    await axios.post(url.value + '/crud', { updates, creates });
+    tableRef.value.reload();
+    tableRef.value.CrudModelRef.hasChanges = false;
 }
 </script>
 
@@ -161,9 +142,11 @@ async function removeLine(id) {
         </template>
     </VnSubToolbar>
     <VnTable
+        v-if="url"
         ref="tableRef"
         data-key="translations"
         :url="url"
+        :limit="0"
         :columns="columns"
         :create="{
             urlCreate: url,
@@ -173,18 +156,17 @@ async function removeLine(id) {
         }"
         :right-search="false"
         @on-fetch="(data) => loadTable(data)"
-        :save-fn="upsertI18n"
         :search-url="false"
         :is-editable="true"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
+        v-model:selected="selected"
+        :save-fn="save"
+        auto-load
     >
         <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>