fix: refs #4774 finalize

src/components/VnTable/VnTable.vue

@@ -183,6 +183,12 @@ watch(
     { immediate: true }
 );
 
+watch(
+    () => $props.create,
+    (value) => (createForm.value = value),
+    { immediate: true }
+);
+
 watch(
     () => route.query[$props.searchUrl],
     (val) => setUserParams(val)
@@ -535,6 +541,7 @@ function handleScroll() {
                         <QBtn
                             v-for="(btn, index) of col.actions"
                             v-show="btn.show ? btn.show(row) : true"
+                            v-bind="row.attrs"
                             :key="index"
                             :title="btn.title"
                             :icon="btn.icon"
@@ -548,6 +555,7 @@ function handleScroll() {
                                 (btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
                             }`"
                             @click="btn.action(row)"
+                            :disable="btn.disable ? btn.disable(row) : true"
                         />
                     </QTd>
                 </template>

src/components/ui/VnPaginate.vue

@@ -128,7 +128,7 @@ const addFilter = async (filter, params) => {
 
 async function fetch(params) {
     useArrayData(props.dataKey, params);
-    arrayData.reset(['filter.skip', 'skip']);
+    arrayData.reset(['filter.skip', 'skip', 'page']);
     await arrayData.fetch({ append: false });
     if (!store.hasMoreData) isLoading.value = false;
 

src/pages/Worker/TranslationsVn.vue

@@ -7,6 +7,7 @@ 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';
 
 const { t } = useI18n();
 const columns = computed(() => [
@@ -18,19 +19,13 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: field,
+        name: 'en',
         label: t('defaultLang(en)'),
-        create: true,
     },
     {
         align: 'left',
-        name: 'secondLang',
-        label: t('secondLang'),
-        component: 'input',
-        isEditable: true,
-        attrs: {
-            clearable: false,
-        },
+        name: lang,
+        label: lang,
     },
     {
         align: 'right',
@@ -42,6 +37,7 @@ const columns = computed(() => [
                 icon: 'save',
                 action: (row) => upsertI18n(row),
                 isPrimary: true,
+                disable: (row) => !row.hasChanges,
             },
         ],
     },
@@ -54,47 +50,52 @@ const lang = ref('es');
 const primaryKey = computed(() => table.value.primaryKey);
 const field = computed(() => table.value.field);
 const table = ref();
-const originalData = ref();
+const originalData = ref([]);
 const url = computed(() => table.value?.tableName + 's');
 
-async function loadTable(changeLang) {
-    console.log('table: ', tableRef.value.CrudModelRef.formData);
-    const data = tableRef.value.CrudModelRef.formData;
-    if (!changeLang) originalData.value = data;
-    if (!originalData.value) return;
-    const en = originalData.value.filter((d) => d.lang === 'en');
-    for (const translation of en) {
-        translation['secondLang'] = originalData.value.find(
-            (d) =>
-                d[primaryKey.value] == translation[primaryKey.value] &&
-                d['lang'] == lang.value
-        )?.[field.value];
-    }
-    console.log('data: ', en);
+async function loadTable(data) {
+    if (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];
+        }
 
-    await tableRef.value.CrudModelRef.resetData(en);
+        for (const currentData in newData) {
+            originalData.value.push({
+                [primaryKey.value]: currentData,
+                ...newData[currentData],
+            });
+            tableRef.value.CrudModelRef.formData.push({
+                [primaryKey.value]: currentData,
+                ...newData[currentData],
+            });
+        }
+        return;
+    }
+    tableRef.value.CrudModelRef.formData = JSON.parse(JSON.stringify(originalData.value));
 }
 
 function resetOriginalData() {
     originalData.value = null;
 }
 
-function upsertI18n(data) {
-    const newData = { ...data };
-    newData[field.value] = newData.secondLang;
-    newData.lang = lang.value;
-    delete newData.secondLang;
-    delete newData.$index;
-    axios.patch(url.value, newData);
-}
+async function upsertI18n(data) {
+    await axios.patch(url.value, {
+        [field.value]: data[lang.value],
+        [primaryKey.value]: data[primaryKey.value],
+        lang: lang.value,
+    });
 
-function deleteI18n(data) {
-    // const newData = { ...data };
-    // newData[field.value] = newData.secondLang;
-    // newData.lang = lang.value;
-    // delete newData.secondLang;
-    // delete newData.$index;
-    // axios.deleteById(url.value, newData);
+    const index = originalData.value.findIndex(
+        (t) => t[primaryKey.value] == data[primaryKey.value]
+    );
+    originalData.value[index] = data;
+    data.hasChanges = false;
 }
 </script>
 
@@ -122,7 +123,7 @@ function deleteI18n(data) {
                 :options="langs"
                 option-label="code"
                 option-value="code"
-                @update:model-value="loadTable(true)"
+                @update:model-value="loadTable()"
             />
         </template>
     </VnSubToolbar>
@@ -131,6 +132,7 @@ function deleteI18n(data) {
         data-key="translations"
         :url="url"
         :columns="columns"
+        :filter="{ limit: 50 }"
         :create="{
             urlCreate: url,
             title: 'Create translation',
@@ -138,9 +140,30 @@ function deleteI18n(data) {
             formInitialData: { lang: 'en' },
         }"
         :right-search="false"
-        @on-fetch="loadTable()"
+        @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>