feat: use new ticket payment dialog

src/pages/Ticket/TicketList.vue

@@ -14,8 +14,6 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 import TicketFilter from './TicketFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import FetchData from 'src/components/FetchData.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
@@ -25,6 +23,7 @@ import TicketProblems from 'src/components/TicketProblems.vue';
 import VnSection from 'src/components/common/VnSection.vue';
 import { getAddresses } from 'src/pages/Customer/composables/getAddresses';
 import { getAgencies } from 'src/pages/Route/Agency/composables/getAgencies';
+import TicketNewPayment from './components/TicketNewPayment.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -73,11 +72,6 @@ const initializeFromQuery = () => {
 
 const selectedRows = ref([]);
 const hasSelectedRows = computed(() => selectedRows.value.length > 0);
-const showForm = ref(false);
-const dialogData = ref();
-const companiesOptions = ref([]);
-const accountingOptions = ref([]);
-const amountToReturn = ref();
 const dataKey = 'TicketList';
 const formInitialData = ref({});
 
@@ -381,101 +375,22 @@ function openBalanceDialog(ticket) {
         description.value.push(ticketData.id);
     }
 
-    const balanceCreateDialog = ref({
+    const dialogData = ref({
         amountPaid: amountPaid.value,
         clientFk: clientFk.value,
         description: `Albaran: ${description.value.join(', ')}`,
     });
-    dialogData.value = balanceCreateDialog;
+    quasar.dialog({
-    showForm.value = true;
+        component: TicketNewPayment,
-}
+        componentProps: {
-
+            clientId: clientFk.value,
-async function onSubmit() {
+            formData: dialogData.value,
-    const { data: email } = await axios.get('Clients', {
-        params: {
-            filter: JSON.stringify({ where: { id: dialogData.value.value.clientFk } }),
         },
     });
-
-    const { data } = await axios.post(
-        `Clients/${dialogData.value.value.clientFk}/createReceipt`,
-        {
-            payed: dialogData.value.payed,
-            companyFk: dialogData.value.companyFk,
-            bankFk: dialogData.value.bankFk,
-            amountPaid: dialogData.value.value.amountPaid,
-            description: dialogData.value.value.description,
-            clientFk: dialogData.value.value.clientFk,
-            email: email[0].email,
-        },
-    );
-
-    if (data) notify('globals.dataSaved', 'positive');
-    showForm.value = false;
-}
-
-const setAmountToReturn = (newAmountGiven) => {
-    const amountPaid = dialogData.value.value.amountPaid;
-
-    amountToReturn.value = newAmountGiven - amountPaid;
-};
-
-function setReference(data) {
-    let newDescription = '';
-
-    switch (data) {
-        case 1:
-            newDescription = `${t(
-                'ticketList.creditCard',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 2:
-            newDescription = `${t(
-                'ticketList.cash',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 3:
-            newDescription = `${newDescription.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 4:
-            newDescription = `${t(
-                'ticketList.transfers',
-            )}, ${dialogData.value.value.description.replace(
-                /^(Credit Card, |Cash, |Transfers, )/,
-                '',
-            )}`;
-            break;
-        case 3317:
-            newDescription = '';
-            break;
-        default:
-            break;
-    }
-
-    dialogData.value.value.description = newDescription;
 }
 </script>
 
 <template>
-    <FetchData
-        url="Companies"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Accountings"
-        @on-fetch="(data) => (accountingOptions = data)"
-        auto-load
-    />
     <VnSection
         :data-key="dataKey"
         :columns="columns"
@@ -722,99 +637,6 @@ function setReference(data) {
             {{ t('ticketList.accountPayment') }}
         </QTooltip>
     </QPageSticky>
-    <QDialog ref="dialogRef" v-model="showForm">
-        <QCard class="q-pa-md q-mb-md">
-            <QForm @submit="onSubmit()" class="q-pa-sm">
-                {{ t('ticketList.addPayment') }}
-                <VnRow>
-                    <VnInputDate
-                        :label="t('ticketList.date')"
-                        v-model="dialogData.payed"
-                    />
-                    <VnSelect
-                        :label="t('ticketList.company')"
-                        v-model="dialogData.companyFk"
-                        :options="companiesOptions"
-                        option-label="code"
-                        hide-selected
-                    >
-                    </VnSelect>
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('ticketList.bank')"
-                        v-model="dialogData.bankFk"
-                        :options="accountingOptions"
-                        option-label="bank"
-                        hide-selected
-                        @update:model-value="setReference"
-                    />
-                    <VnInput
-                        :label="t('ticketList.amount')"
-                        v-model="dialogData.value.amountPaid"
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <span>
-                        {{ t('ticketList.cash') }}
-                    </span>
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <VnInput
-                        :label="t('ticketList.deliveredAmount')"
-                        v-model="dialogData.value.amountGiven"
-                        @update:model-value="setAmountToReturn"
-                        type="number"
-                    />
-                    <VnInput
-                        :label="t('ticketList.amountToReturn')"
-                        :model-value="amountToReturn"
-                        type="number"
-                        readonly
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 3 || dialogData.bankFk === 3117">
-                    <VnInput
-                        :label="t('ticketList.compensation')"
-                        v-model="dialogData.value.compensation"
-                        type="text"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInput
-                        :label="t('ticketList.reference')"
-                        v-model="dialogData.value.description"
-                        type="text"
-                    />
-                </VnRow>
-                <VnRow v-if="dialogData.bankFk === 2">
-                    <QCheckbox
-                        :label="t('ticketList.viewReceipt')"
-                        v-model="dialogData.value.viewReceipt"
-                        :toggle-indeterminate="false"
-                    />
-                    <QCheckbox
-                        :label="t('ticketList.sendEmail')"
-                        v-model="dialogData.value.senEmail"
-                        :toggle-indeterminate="false"
-                    />
-                </VnRow>
-                <div class="q-mt-lg row justify-end">
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        @click="onSubmit()"
-                    />
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                </div>
-            </QForm>
-        </QCard>
-    </QDialog>
     <QPageSticky v-if="hasSelectedRows" :offset="[20, 200]" style="z-index: 2">
         <QBtn
             @click="sendDocuware(selectedRows)"