0
0
Fork 0

refactor(invoiceOutList): create dialog

This commit is contained in:
Alex Moreno 2024-08-14 08:55:18 +02:00
parent 4401a6108f
commit 07e4dca361
1 changed files with 43 additions and 73 deletions

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, onUnmounted, ref, computed } from 'vue'; import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
@ -12,7 +12,6 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import { toCurrency, toDate } from 'src/filters/index'; import { toCurrency, toDate } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { QBtn } from 'quasar'; import { QBtn } from 'quasar';
import { watchEffect } from 'vue';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -222,82 +221,53 @@ watchEffect(selectedRows);
</span> </span>
</template> </template>
<template #more-create-dialog="{ data }"> <template #more-create-dialog="{ data }">
<div class="create-dialog"> <div class="flex no-wrap flex-center">
<div class="field-row"> <VnSelect
<VnSelect url="Tickets"
url="Tickets" v-model="data.ticketFk"
v-model="data.ticketFk" :label="t('invoiceOutList.tableVisibleColumns.ticket')"
:label="t('invoiceOutList.tableVisibleColumns.ticket')" :options="ticketsOptions"
:options="ticketsOptions" option-label="nickname"
option-label="nickname" option-value="id"
option-value="id" />
/> <span class="q-ml-md">O</span>
<span class="separator">O</span>
<VnSelect
url="Clients"
v-model="data.clientFk"
:label="t('invoiceOutModule.customer')"
:options="customerOptions"
option-label="name"
option-value="id"
/>
</div>
<div class="field-row">
<VnSelect
url="InvoiceOutSerials"
v-model="data.invoiceOutSerial"
:label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
:options="invoiceOutSerialsOptions"
option-label="description"
option-value="code"
/>
<VnInputDate
:label="t('invoiceOutList.tableVisibleColumns.dueDate')"
v-model="data.maxShipped"
/>
</div>
<div class="field-row">
<VnSelect
url="TaxAreas"
v-model="data.area"
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:options="taxAreasOptions"
option-label="code"
option-value="code"
/>
<QInput
v-model="data.reference"
:label="t('invoiceOutList.tableVisibleColumns.ref')"
/>
</div>
</div> </div>
<VnSelect
url="Clients"
v-model="data.clientFk"
:label="t('invoiceOutModule.customer')"
:options="customerOptions"
option-label="name"
option-value="id"
/>
<VnSelect
url="InvoiceOutSerials"
v-model="data.invoiceOutSerial"
:label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
:options="invoiceOutSerialsOptions"
option-label="description"
option-value="code"
/>
<VnInputDate
:label="t('invoiceOutList.tableVisibleColumns.dueDate')"
v-model="data.maxShipped"
/>
<VnSelect
url="TaxAreas"
v-model="data.area"
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:options="taxAreasOptions"
option-label="code"
option-value="code"
/>
<QInput
v-model="data.reference"
:label="t('invoiceOutList.tableVisibleColumns.ref')"
/>
</template> </template>
</VnTable> </VnTable>
</template> </template>
<style scoped lang="scss">
.create-dialog {
display: flex;
flex-direction: column;
gap: 16px;
}
.field-row {
display: flex;
gap: 16px;
align-items: flex-end;
> * {
flex: 1;
}
.separator {
flex: 0 0 auto;
align-self: center;
padding: 0 8px;
}
}
</style>
<i18n> <i18n>
en: en:
searchInvoice: Search issued invoice searchInvoice: Search issued invoice