fix: refs #4774 create

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

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { useStateStore } from 'src/stores/useStateStore';
-import { computed, onMounted } 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';
@@ -15,18 +14,36 @@ const columns = computed(() => [
         align: 'left',
         name: primaryKey,
         label: t('primaryKey'),
+        create: true,
     },
     {
         align: 'left',
         name: field,
         label: t('defaultLang(en)'),
-        component: 'input',
+        create: true,
     },
     {
         align: 'left',
         name: 'secondLang',
         label: t('secondLang'),
         component: 'input',
+        isEditable: true,
+        attrs: {
+            clearable: false,
+        },
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'save',
+                action: (row) => upsertI18n(row),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 
@@ -39,13 +56,11 @@ const field = computed(() => table.value.field);
 const table = ref();
 const originalData = ref();
 const url = computed(() => table.value?.tableName + 's');
-// onMounted(() => {
-//     loadTable();
-// });
 
-async function loadTable() {
+async function loadTable(changeLang) {
+    console.log('table: ', tableRef.value.CrudModelRef.formData);
     const data = tableRef.value.CrudModelRef.formData;
-    if (!originalData.value) originalData.value = data;
+    if (!changeLang) originalData.value = data;
     if (!originalData.value) return;
     const en = originalData.value.filter((d) => d.lang === 'en');
     for (const translation of en) {
@@ -64,8 +79,22 @@ function resetOriginalData() {
     originalData.value = null;
 }
 
-function upsertI18n() {
-    axios.patch(url.value, {});
+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);
+}
+
+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);
 }
 </script>
 
@@ -93,7 +122,7 @@ function upsertI18n() {
                 :options="langs"
                 option-label="code"
                 option-value="code"
-                @update:model-value="loadTable()"
+                @update:model-value="loadTable(true)"
             />
         </template>
     </VnSubToolbar>
@@ -102,8 +131,13 @@ function upsertI18n() {
         data-key="translations"
         :url="url"
         :columns="columns"
+        :create="{
+            urlCreate: url,
+            title: 'Create translation',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { lang: 'en' },
+        }"
         :right-search="false"
-        :is-editable="true"
         @on-fetch="loadTable()"
         :save-fn="upsertI18n"
     />