From 4e957ed8a7ef2c09d4e3af99922c510088055f63 Mon Sep 17 00:00:00 2001
From: jgallego <jgallego@verdnatura.es>
Date: Tue, 29 Oct 2024 17:23:45 +0100
Subject: [PATCH] feat: refs #7346 style radioButton

---
 src/components/common/VnRadio.vue       |   9 +-
 src/components/ui/VnRow.vue             |   8 +-
 src/pages/InvoiceOut/InvoiceOutList.vue | 248 ++++++++++--------------
 3 files changed, 117 insertions(+), 148 deletions(-)

diff --git a/src/components/common/VnRadio.vue b/src/components/common/VnRadio.vue
index 4eeb9dbe9..69b1501a2 100644
--- a/src/components/common/VnRadio.vue
+++ b/src/components/common/VnRadio.vue
@@ -2,5 +2,12 @@
 const model = defineModel({ type: Boolean, required: true });
 </script>
 <template>
-    <QRadio v-model="model" v-bind="$attrs" dense :dark="true" class="q-mr-sm" />
+    <QRadio
+        v-model="model"
+        v-bind="$attrs"
+        dense
+        :dark="true"
+        class="q-mr-sm"
+        size="xs"
+    />
 </template>
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index 16bcfab7d..b57489a98 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,8 +1,5 @@
-<script setup>
-defineProps({ wrap: { type: Boolean, default: false } });
-</script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md">
+    <div class="vn-row q-gutter-md">
         <slot />
     </div>
 </template>
@@ -21,6 +18,9 @@ defineProps({ wrap: { type: Boolean, default: false } });
         &:not(.wrap) {
             flex-direction: column;
         }
+        &[fixed] {
+            flex-direction: row;
+        }
     }
 }
 </style>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 9fb2fc5f5..205f67cd4 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -15,6 +15,9 @@ import { QBtn } from 'quasar';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnRadio from 'src/components/common/VnRadio.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -39,13 +42,9 @@ const columns = computed(() => [
         align: 'center',
         name: 'id',
         label: t('invoiceOutList.tableVisibleColumns.id'),
-        chip: {
-            condition: () => true,
-        },
+        chip: { condition: () => true },
         isId: true,
-        columnFilter: {
-            name: 'search',
-        },
+        columnFilter: { name: 'search' },
     },
     {
         align: 'left',
@@ -53,14 +52,8 @@ const columns = computed(() => [
         label: t('invoiceOutList.tableVisibleColumns.ref'),
         isTitle: true,
         component: 'select',
-        attrs: {
-            url: MODEL,
-            optionLabel: 'ref',
-            optionValue: 'id',
-        },
-        columnField: {
-            component: null,
-        },
+        attrs: { url: MODEL, optionLabel: 'ref', optionValue: 'id' },
+        columnField: { component: null },
     },
     {
         align: 'left',
@@ -68,9 +61,7 @@ const columns = computed(() => [
         label: t('invoiceOutList.tableVisibleColumns.issued'),
         component: 'date',
         format: (row) => toDate(row.issued),
-        columnField: {
-            component: null,
-        },
+        columnField: { component: null },
     },
     {
         align: 'left',
@@ -78,13 +69,8 @@ const columns = computed(() => [
         label: t('invoiceOutModule.customer'),
         cardVisible: true,
         component: 'select',
-        attrs: {
-            url: 'Clients',
-            fields: ['id', 'name'],
-        },
-        columnField: {
-            component: null,
-        },
+        attrs: { url: 'Clients', fields: ['id', 'name'] },
+        columnField: { component: null },
     },
     {
         align: 'left',
@@ -92,14 +78,8 @@ const columns = computed(() => [
         label: t('invoiceOutModule.company'),
         cardVisible: true,
         component: 'select',
-        attrs: {
-            url: 'Companies',
-            optionLabel: 'code',
-            optionValue: 'id',
-        },
-        columnField: {
-            component: null,
-        },
+        attrs: { url: 'Companies', optionLabel: 'code', optionValue: 'id' },
+        columnField: { component: null },
     },
     {
         align: 'left',
@@ -113,9 +93,7 @@ const columns = computed(() => [
         name: 'created',
         label: t('invoiceOutList.tableVisibleColumns.created'),
         component: 'date',
-        columnField: {
-            component: null,
-        },
+        columnField: { component: null },
         format: (row) => toDate(row.created),
     },
     {
@@ -123,9 +101,7 @@ const columns = computed(() => [
         name: 'dued',
         label: t('invoiceOutList.tableVisibleColumns.dueDate'),
         component: 'date',
-        columnField: {
-            component: null,
-        },
+        columnField: { component: null },
         format: (row) => toDate(row.dued),
     },
     {
@@ -216,9 +192,7 @@ watchEffect(selectedRows);
             urlCreate: 'InvoiceOuts/createManualInvoice',
             title: t('createManualInvoice'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {
-                active: true,
-            },
+            formInitialData: { active: true },
         }"
         :right-search="false"
         v-model:selected="selectedRows"
@@ -232,92 +206,84 @@ watchEffect(selectedRows);
         }"
     >
         <template #more-create-dialog="{ data }">
-            <div class="row q-col-gutter-md">
+            <div class="row q-col-gutter-xs">
                 <div class="col-12">
-                    <div class="q-gutter-sm q-col-gutter-xs">
-                        <div class="row q-m-none">
-                            <div class="col-auto">
-                                <QRadio
-                                    v-model="selectedOption"
-                                    val="ticket"
-                                    label="Ticket"
-                                    class="q-my-none q-mr-md"
-                                />
-                            </div>
-                            <div class="col">
-                                <QInput
-                                    v-if="selectedOption === 'ticket'"
-                                    v-model="data.ticketFk"
-                                    label="Ticket ID"
-                                />
-                            </div>
-                        </div>
-
-                        <div class="row m-xs">
-                            <div class="col-auto">
-                                <QRadio
-                                    v-model="selectedOption"
-                                    val="cliente"
-                                    label="Cliente"
-                                    class="q-my-none q-mr-md"
-                                />
-                            </div>
-                            <div class="col">
-                                <VnSelect
-                                    v-if="selectedOption === 'cliente'"
-                                    v-model="data.clientFk"
-                                    label="Cliente"
-                                    url="Clients"
-                                    :options="customerOptions"
-                                    option-label="name"
-                                    option-value="id"
-                                    @update:model-value="fetchClientAddress"
-                                />
-                            </div>
-                        </div>
-
-                        <div class="row m-xs">
-                            <div class="col-auto">
-                                <QRadio
-                                    v-model="selectedOption"
-                                    val="consignatario"
-                                    label="Consignatario"
-                                    class="q-my-none q-mr-md"
-                                />
-                            </div>
-                            <div class="col">
-                                <div
-                                    v-if="selectedOption === 'consignatario'"
-                                    class="row q-col-gutter-md"
-                                >
-                                    <div class="col">
-                                        <VnSelect
-                                            v-model="data.clientFk"
-                                            label="Cliente"
-                                            url="Clients"
-                                            :options="customerOptions"
-                                            option-label="name"
-                                            option-value="id"
-                                            @update:model-value="fetchClientAddress"
-                                        />
-                                    </div>
-                                    <div class="col">
-                                        <VnSelect
-                                            v-model="data.addressFk"
-                                            label="Consignatario"
-                                            :options="addressOptions"
-                                            option-label="nickname"
-                                            option-value="id"
-                                            :disable="!data.clientFk"
-                                        />
-                                    </div>
+                    <div class="q-col-gutter-xs">
+                        <VnRow fixed>
+                            <VnRadio
+                                v-model="selectedOption"
+                                val="ticket"
+                                label="Ticket"
+                                class="q-my-none q-mr-md"
+                            />
+                            <VnInput
+                                :disable="selectedOption !== 'ticket'"
+                                v-model="data.ticketFk"
+                                label="Ticket ID"
+                                style="flex: 1"
+                            />
+                        </VnRow>
+                        <VnRow fixed>
+                            <VnRadio
+                                v-model="selectedOption"
+                                val="cliente"
+                                label="Cliente"
+                                class="q-my-none q-mr-md"
+                            />
+                            <VnSelect
+                                :disable="selectedOption !== 'cliente'"
+                                v-model="data.clientFk"
+                                label="Cliente"
+                                url="Clients"
+                                :options="customerOptions"
+                                option-label="name"
+                                option-value="id"
+                                @update:model-value="fetchClientAddress"
+                                style="flex: 1"
+                            />
+                        </VnRow>
+                        <VnRow fixed>
+                            <VnRadio
+                                v-model="selectedOption"
+                                val="consignatario"
+                                label="Consignatario"
+                                class="q-my-none q-mr-md"
+                            />
+                            <div
+                                :disable="selectedOption !== 'consignatario'"
+                                class="row q-col-gutter-xs q-ml-none"
+                            >
+                                <div class="col">
+                                    <VnSelect
+                                        v-model="data.clientFk"
+                                        label="Cliente"
+                                        url="Clients"
+                                        :options="customerOptions"
+                                        option-label="name"
+                                        option-value="id"
+                                        @update:model-value="fetchClientAddress"
+                                        :disable="selectedOption !== 'consignatario'"
+                                    />
+                                </div>
+                                <div class="col">
+                                    <VnSelect
+                                        v-model="data.addressFk"
+                                        label="Consignatario"
+                                        :options="addressOptions"
+                                        option-label="nickname"
+                                        option-value="id"
+                                        :disable="
+                                            !data.clientFk ||
+                                            selectedOption !== 'consignatario'
+                                        "
+                                    />
                                 </div>
                             </div>
-                        </div>
+                        </VnRow>
                     </div>
                 </div>
-                <div class="q-gutter-md">
-                    <div class="row q-gutter-md">
+                <div class="full-width">
+                    <VnRow class="row q-col-gutter-xs">
                         <VnSelect
                             url="InvoiceOutSerials"
                             v-model="data.serial"
@@ -332,8 +298,8 @@ watchEffect(selectedRows);
                             :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
                             v-model="data.maxShipped"
                         />
-                    </div>
-                    <div class="row q-gutter-md">
+                    </VnRow>
+                    <VnRow class="row q-col-gutter-xs">
                         <VnSelect
                             url="TaxAreas"
                             v-model="data.taxArea"
@@ -342,31 +308,27 @@ watchEffect(selectedRows);
                             option-label="code"
                             option-value="code"
                         />
-                        <QInput
+                        <VnInput
                             v-model="data.reference"
                             :label="t('invoiceOutList.tableVisibleColumns.ref')"
                         />
-                    </div>
+                    </VnRow>
                 </div>
             </div>
         </template>
     </VnTable>
 </template>
 
-<i18n>
-    en:
-        searchInvoice: Search issued invoice
-        fileDenied: Browser denied file download...
-        fileAllowed: Successful download of CSV file
-        youCanSearchByInvoiceReference: You can search by invoice reference
-        createInvoice: Make invoice
-        createManualInvoice: Create manual invoice
-
-    es:
-        searchInvoice: Buscar factura emitida
-        fileDenied: El navegador denegó la descarga de archivos...
-        fileAllowed: Descarga exitosa de archivo CSV
-        youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
-        createInvoice: Crear factura
-        createManualInvoice: Crear factura manual
-    </i18n>
+<style lang="scss" scoped>
+#formModel .vn-row {
+    min-height: 45px;
+}
+#formModel .vn-row .q-radio {
+    align-self: flex-end;
+    flex: 0.3;
+}
+#formModel .vn-row > .q-input,
+#formModel .vn-row > .q-select {
+    flex: 0.75;
+}
+</style>