From 07e4dca361e73486fb9cebaf4b5cf5ccf19cd5c6 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 14 Aug 2024 08:55:18 +0200
Subject: [PATCH] refactor(invoiceOutList): create dialog

---
 src/pages/InvoiceOut/InvoiceOutList.vue | 116 +++++++++---------------
 1 file changed, 43 insertions(+), 73 deletions(-)

diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 5d3d51225..822f6bb33 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.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 { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
-import { watchEffect } from 'vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -222,82 +221,53 @@ watchEffect(selectedRows);
             </span>
         </template>
         <template #more-create-dialog="{ data }">
-            <div class="create-dialog">
-                <div class="field-row">
-                    <VnSelect
-                        url="Tickets"
-                        v-model="data.ticketFk"
-                        :label="t('invoiceOutList.tableVisibleColumns.ticket')"
-                        :options="ticketsOptions"
-                        option-label="nickname"
-                        option-value="id"
-                    />
-                    <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 class="flex no-wrap flex-center">
+                <VnSelect
+                    url="Tickets"
+                    v-model="data.ticketFk"
+                    :label="t('invoiceOutList.tableVisibleColumns.ticket')"
+                    :options="ticketsOptions"
+                    option-label="nickname"
+                    option-value="id"
+                />
+                <span class="q-ml-md">O</span>
             </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>
     </VnTable>
 </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>
 en:
     searchInvoice: Search issued invoice