feat: refs #7409 add dialog with validations

src/pages/Worker/Card/WorkerBalance.vue

@@ -4,10 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInputNumber from 'src/components/common/VnInputNumber.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 const tableRef = ref();
 const payrollComponents = ref([]);
 const { t } = useI18n();
@@ -18,6 +14,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'paymentDate',
         label: t('worker.balance.tableVisibleColumns.paymentDate'),
+        create: true,
+        columnCreate: {
+            required: true,
+        },
         component: 'date',
         field: 'paymentDate',
         cardVisible: true,
@@ -26,6 +26,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'incomeTypeFk',
         label: t('worker.balance.tableVisibleColumns.incomeType'),
+        create: true,
+        columnCreate: {
+            required: true,
+        },
         component: 'select',
         attrs: {
             options: payrollComponents,
@@ -38,6 +42,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'debit',
         label: t('worker.balance.tableVisibleColumns.debit'),
+        create: true,
+        columnCreate: {
+            required: true,
+        },
         component: 'input',
         field: 'debit',
         cardVisible: true,
@@ -46,6 +54,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'credit',
         label: t('worker.balance.tableVisibleColumns.credit'),
+        create: true,
+        columnCreate: {
+            required: true,
+        },
         component: 'input',
         field: 'credit',
         cardVisible: true,
@@ -54,6 +66,7 @@ const columns = computed(() => [
         align: 'left',
         name: 'concept',
         label: t('worker.balance.tableVisibleColumns.concept'),
+        create: true,
         component: 'input',
         field: 'concept',
         cardVisible: true,
@@ -106,37 +119,7 @@ const columns = computed(() => [
         :use-model="true"
         :default-remove="false"
         search-url="balance"
-    >
+    />
-        <template #more-create-dialog="{ data }">
-            <VnInputDate
-                v-model="data.paymentDate"
-                :label="$t('worker.balance.tableVisibleColumns.paymentDate')"
-                :is-required="true"
-            />
-            <VnSelect
-                v-model="data.incomeTypeFk"
-                :options="payrollComponents"
-                option-value="id"
-                option-label="name"
-                :label="$t('worker.balance.tableVisibleColumns.incomeType')"
-                :is-required="true"
-            />
-            <VnInputNumber
-                v-model="data.debit"
-                :label="$t('worker.balance.tableVisibleColumns.debit')"
-                :is-required="true"
-            />
-            <VnInputNumber
-                v-model="data.credit"
-                :label="$t('worker.balance.tableVisibleColumns.credit')"
-                :is-required="true"
-            />
-            <VnInput
-                v-model="data.concept"
-                :label="$t('worker.balance.tableVisibleColumns.concept')"
-            />
-        </template>
-    </VnTable>
 </template>
 <i18n>
     es: