fix: refs #4774 finalize

src/components/CrudModel.vue

@@ -95,6 +95,7 @@ defineExpose({
     getChanges,
     formData,
     vnPaginateRef,
+    resetData,
 });
 
 onBeforeRouteLeave((to, from, next) => {

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/i18n/locale/en.yml

@@ -277,6 +277,7 @@ globals:
         medical: Mutual
         RouteExtendedList: Router
         wasteRecalc: Waste recaclulate
+        translations: Translations
         operator: Operator
     supplier: Supplier
     created: Created

src/i18n/locale/es.yml

@@ -281,6 +281,7 @@ globals:
         serial: Facturas por serie
         medical: Mutua
         wasteRecalc: Recalcular mermas
+        translations: Traducciones
         operator: Operario
     supplier: Proveedor
     created: Fecha creación

src/pages/Customer/Card/CustomerBasicData.vue

@@ -93,12 +93,14 @@ const exprBuilder = (param, value) => {
                     :label="t('customer.basicData.phone')"
                     :rules="validate('client.phone')"
                     clearable
+                    type="number"
                     v-model="data.phone"
                 />
                 <VnInput
                     :label="t('customer.basicData.mobile')"
                     :rules="validate('client.mobile')"
                     clearable
+                    type="number"
                     v-model="data.mobile"
                 />
             </VnRow>

src/pages/Worker/TranslationsVn.vue

@@ -0,0 +1,182 @@
+<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';
+
+const { t } = useI18n();
+const columns = computed(() => [
+    {
+        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,
+            },
+        ],
+    },
+]);
+
+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) {
+        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];
+        }
+
+        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;
+}
+
+async function upsertI18n(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;
+}
+</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"
+        :filter="{ limit: 50 }"
+        :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/router/modules/index.js

@@ -22,6 +22,7 @@ import Account from './account';
 import Monitor from './monitor';
 import MailAlias from './mailAlias';
 import Role from './role';
+import TranslationsVn from './translationsVn.js';
 
 export default [
     Item,
@@ -48,4 +49,5 @@ export default [
     MailAlias,
     Monitor,
     Role,
+    TranslationsVn,
 ];

src/router/modules/translationsVn.js

@@ -0,0 +1,16 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/translations',
+    name: 'Translations',
+    meta: {
+        title: 'translations',
+        icon: 'history_edu',
+        moduleName: 'Translations',
+    },
+    component: RouterView,
+    menus: {
+        main: [],
+        card: [],
+    },
+};

src/router/modules/worker.js

@@ -12,7 +12,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WorkerMain' },
     menus: {
-        main: ['WorkerList', 'WorkerDepartment'],
+        main: ['WorkerList', 'WorkerDepartment', 'TranslationsVn'],
         card: [
             'WorkerBasicData',
             'WorkerNotes',
@@ -55,6 +55,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/WorkerDepartment.vue'),
                 },
+                {
+                    path: 'translations',
+                    name: 'TranslationsVn',
+                    meta: {
+                        title: 'translations',
+                        icon: 'history_edu',
+                    },
+                    component: () => import('src/pages/Worker/TranslationsVn.vue'),
+                },
                 {
                     path: 'create',
                     name: 'WorkerCreate',

src/router/routes.js

@@ -22,6 +22,7 @@ import zone from 'src/router/modules/zone';
 import account from './modules/account';
 import monitor from 'src/router/modules/monitor';
 import mailAlias from './modules/mailAlias';
+import translationsVn from './modules/translationsVn';
 
 const routes = [
     {
@@ -97,6 +98,7 @@ const routes = [
             account,
             role,
             mailAlias,
+            translationsVn,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',