From b3df66b5666e78c7c9e0382c7802bcab203fdd17 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 25 Oct 2023 18:55:20 +0200
Subject: [PATCH] remove(div): refs #6118 unificar los divs en el componente

---
 src/components/FormModel.vue                  |  23 +-
 src/pages/Claim/Card/ClaimBasicData.vue       | 237 +++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue | 213 ++++++++--------
 3 files changed, 238 insertions(+), 235 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 61ad34ea4..e8a9e4c17 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -122,11 +122,24 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md" id="formModel">
-        <QCard>
-            <slot name="form" :data="formData" :validate="validate" :filter="filter" />
-        </QCard>
-    </QForm>
+    <div class="column items-center">
+        <QForm
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
+            <QCard>
+                <slot
+                    name="form"
+                    :data="formData"
+                    :validate="validate"
+                    :filter="filter"
+                />
+            </QCard>
+        </QForm>
+    </div>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index dd4fe2f88..94e447e13 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -91,126 +91,119 @@ const statesFilter = {
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-
-    <div class="column items-center">
-        <FormModel
-            :url="`Claims/${route.params.id}`"
-            :url-update="`Claims/updateClaim/${route.params.id}`"
-            :filter="claimFilter"
-            model="claim"
-        >
-            <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.client.name"
-                            :label="t('claim.basicData.customer')"
-                            disable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.created"
-                            mask="####-##-##"
-                            fill-mask="_"
-                            autofocus
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QSelect
-                            v-model="data.workerFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('claim.basicData.assignedTo')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, workerFilter)
-                            "
-                            :rules="validate('claim.claimStateFk')"
-                            :input-debounce="0"
-                        >
-                            <template #before>
-                                <QAvatar color="orange">
-                                    <QImg
-                                        v-if="data.workerFk"
-                                        :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </QAvatar>
-                            </template>
-                        </QSelect>
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.claimStateFk"
-                            :options="claimStates"
-                            option-value="id"
-                            option-label="description"
-                            emit-value
-                            :label="t('claim.basicData.state')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, statesFilter)
-                            "
-                            :rules="validate('claim.claimStateFk')"
-                            :input-debounce="0"
-                        >
-                        </QSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model.number="data.packages"
-                            :label="t('claim.basicData.packages')"
-                            :rules="validate('claim.packages')"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.rma"
-                            :label="t('claim.basicData.returnOfMaterial')"
-                            :rules="validate('claim.rma')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            v-model="data.hasToPickUp"
-                            :label="t('claim.basicData.picked')"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </div>
+    <FormModel
+        :url="`Claims/${route.params.id}`"
+        :url-update="`Claims/updateClaim/${route.params.id}`"
+        :filter="claimFilter"
+        model="claim"
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.client.name"
+                        :label="t('claim.basicData.customer')"
+                        disable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.created"
+                        mask="####-##-##"
+                        fill-mask="_"
+                        autofocus
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QSelect
+                        v-model="data.workerFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('claim.basicData.assignedTo')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, workerFilter)"
+                        :rules="validate('claim.claimStateFk')"
+                        :input-debounce="0"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </QSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.claimStateFk"
+                        :options="claimStates"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('claim.basicData.state')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, statesFilter)"
+                        :rules="validate('claim.claimStateFk')"
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model.number="data.packages"
+                        :label="t('claim.basicData.packages')"
+                        :rules="validate('claim.packages')"
+                        type="number"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.rma"
+                        :label="t('claim.basicData.returnOfMaterial')"
+                        :rules="validate('claim.rma')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.hasToPickUp"
+                        :label="t('claim.basicData.picked')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d8d3f3ece..f3abca2cc 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -59,112 +59,109 @@ const filterOptions = {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <div class="column items-center">
-        <FormModel :url="`Clients/${route.params.id}`" model="customer">
-            <template #form="{ data, validate, filter }">
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.socialName"
-                            :label="t('customer.basicData.socialName')"
-                            :rules="validate('client.socialName')"
-                            autofocus
-                        />
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.businessTypeFk"
-                            :options="businessTypes"
-                            option-value="code"
-                            option-label="description"
-                            emit-value
-                            :label="t('customer.basicData.businessType')"
-                            map-options
-                            :rules="validate('client.businessTypeFk')"
-                            :input-debounce="0"
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.contact"
-                            :label="t('customer.basicData.contact')"
-                            :rules="validate('client.contact')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.email"
-                            type="email"
-                            :label="t('customer.basicData.email')"
-                            :rules="validate('client.email')"
-                            clearable
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.phone"
-                            :label="t('customer.basicData.phone')"
-                            :rules="validate('client.phone')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.mobile"
-                            :label="t('customer.basicData.mobile')"
-                            :rules="validate('client.mobile')"
-                            clearable
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QSelect
-                            v-model="data.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('customer.basicData.salesPerson')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, filterOptions)
-                            "
-                            :rules="validate('client.salesPersonFk')"
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <QAvatar color="orange">
-                                    <QImg
-                                        v-if="data.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </QAvatar>
-                            </template>
-                        </QSelect>
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.contactChannelFk"
-                            :options="contactChannels"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('customer.basicData.contactChannel')"
-                            map-options
-                            :rules="validate('client.contactChannelFk')"
-                            :input-debounce="0"
-                        />
-                    </div>
-                </vnRow>
-            </template>
-        </FormModel>
-    </div>
+
+    <FormModel :url="`Clients/${route.params.id}`" model="customer">
+        <template #form="{ data, validate, filter }">
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.socialName"
+                        :label="t('customer.basicData.socialName')"
+                        :rules="validate('client.socialName')"
+                        autofocus
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.businessTypeFk"
+                        :options="businessTypes"
+                        option-value="code"
+                        option-label="description"
+                        emit-value
+                        :label="t('customer.basicData.businessType')"
+                        map-options
+                        :rules="validate('client.businessTypeFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.contact"
+                        :label="t('customer.basicData.contact')"
+                        :rules="validate('client.contact')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.email"
+                        type="email"
+                        :label="t('customer.basicData.email')"
+                        :rules="validate('client.email')"
+                        clearable
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.phone"
+                        :label="t('customer.basicData.phone')"
+                        :rules="validate('client.phone')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.mobile"
+                        :label="t('customer.basicData.mobile')"
+                        :rules="validate('client.mobile')"
+                        clearable
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QSelect
+                        v-model="data.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.salesPerson')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, filterOptions)"
+                        :rules="validate('client.salesPersonFk')"
+                        :input-debounce="0"
+                    >
+                        <template #prepend>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.salesPersonFk"
+                                    :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </QSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.contactChannelFk"
+                        :options="contactChannels"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.contactChannel')"
+                        map-options
+                        :rules="validate('client.contactChannelFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </vnRow>
+        </template>
+    </FormModel>
 </template>