Merge pull request '#7411 - addInfoOnVnCheckboxAndVnInput' (!1295) from 7411-addInfoOnVnCheckboxAndVnInput into dev

Reviewed-on: #1295
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/RefundInvoiceForm.vue

@@ -9,6 +9,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const $props = defineProps({
     invoiceOutData: {
@@ -131,15 +132,11 @@ const refund = async () => {
                         :required="true"
                     /> </VnRow
                 ><VnRow>
-                    <div>
+                    <VnCheckbox
-                        <QCheckbox
+                        v-model="invoiceParams.inheritWarehouse"
-                            :label="t('Inherit warehouse')"
+                        :label="t('Inherit warehouse')"
-                            v-model="invoiceParams.inheritWarehouse"
+                        :info="t('Inherit warehouse tooltip')"
-                        />
+                    />
-                        <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                            <QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
-                        </QIcon>
-                    </div>
                 </VnRow>
             </template>
         </FormPopup>

src/components/TransferInvoiceForm.vue

@@ -10,6 +10,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import VnCheckbox from './common/VnCheckbox.vue';
 
 const $props = defineProps({
     invoiceOutData: {
@@ -186,15 +187,11 @@ const makeInvoice = async () => {
                     />
                 </VnRow>
                 <VnRow>
-                    <div>
+                    <VnCheckbox
-                        <QCheckbox
+                        v-model="checked"
-                            :label="t('Bill destination client')"
+                        :label="t('Bill destination client')"
-                            v-model="checked"
+                        :info="t('transferInvoiceInfo')"
-                        />
+                    />
-                        <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                            <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
-                        </QIcon>
-                    </div>
                 </VnRow>
             </template>
         </FormPopup>

src/components/common/VnCheckbox.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { defineModel } from 'vue';
+
+const modelValue = defineModel({ type: Boolean, default: false });
+
+const $props = defineProps({
+    info: {
+        type: String,
+        default: null,
+    },
+});
+</script>
+
+<template>
+    <div>
+        <QCheckbox
+            v-bind="$attrs"
+            v-on="$attrs"
+            v-model="modelValue"
+        />
+        <QIcon 
+            v-if="info" 
+            v-bind="$attrs"
+            class="cursor-info q-ml-sm" 
+            name="info" 
+            size="sm"
+        >
+            <QTooltip>
+                {{ info }}
+            </QTooltip>
+        </QIcon>
+    </div>
+</template>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -12,6 +12,7 @@ import VnInputPassword from 'src/components/common/VnInputPassword.vue';
 import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const $props = defineProps({
     hasAccount: {
@@ -121,18 +122,14 @@ onMounted(() => {
         :promise="sync"
     >
         <template #customHTML>
-            {{ shouldSyncPassword }}
+            <VnCheckbox
-            <QCheckbox
-                :label="t('account.card.actions.sync.checkbox')"
                 v-model="shouldSyncPassword"
-                class="full-width"
+                :label="t('account.card.actions.sync.checkbox')"
+                :info="t('account.card.actions.sync.tooltip')"
                 clearable
                 clear-icon="close"
-            >
+                color="primary"
-                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
+            />
-                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
-                </QIcon></QCheckbox
-            >
             <VnInputPassword
                 v-if="shouldSyncPassword"
                 :label="t('login.password')"

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -110,14 +111,11 @@ function handleLocation(data, location) {
             </VnRow>
             <VnRow>
                 <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
-                <div>
+                <VnCheckbox
-                    <QCheckbox :label="t('globals.isVies')" v-model="data.isVies" />
+                    v-model="data.isVies"
-                    <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
+                    :label="t('globals.isVies')"
-                        <QTooltip>
+                    :info="t('whenActivatingIt')"    
-                            {{ t('whenActivatingIt') }}
+                />
-                        </QTooltip>
-                    </QIcon>
-                </div>
             </VnRow>
 
             <VnRow>
@@ -129,17 +127,11 @@ function handleLocation(data, location) {
             </VnRow>
 
             <VnRow>
-                <div>
+                <VnCheckbox                    
-                    <QCheckbox
+                    v-model="data.isEqualizated"
-                        :label="t('Is equalizated')"
+                    :label="t('Is equalizated')"
-                        v-model="data.isEqualizated"
+                    :info="t('inOrderToInvoice')"
-                    />
+                />
-                    <QIcon class="cursor-info q-ml-sm" name="info" size="sm">
-                        <QTooltip>
-                            {{ t('inOrderToInvoice') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
                 <QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
             </VnRow>
 

src/pages/Item/Card/ItemBasicData.vue

@@ -11,6 +11,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterItemForm from 'src/components/FilterItemForm.vue';
 import CreateIntrastatForm from './CreateIntrastatForm.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -208,30 +209,20 @@ const onIntrastatCreated = (response, formData) => {
                 />
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div>
+                <VnCheckbox
-                    <QCheckbox
+                    v-model="data.isFragile"
-                        v-model="data.isFragile"
+                    :label="t('item.basicData.isFragile')"
-                        :label="t('item.basicData.isFragile')"
+                    :info="t('item.basicData.isFragileTooltip')"
-                        class="q-mr-sm"
+                    class="q-mr-sm"
-                    />
+                    size="xs"
-                    <QIcon name="info" class="cursor-pointer" size="xs">
+                />
-                        <QTooltip max-width="300px">
+                <VnCheckbox
-                            {{ t('item.basicData.isFragileTooltip') }}
+                    v-model="data.isPhotoRequested"
-                        </QTooltip>
+                    :label="t('item.basicData.isPhotoRequested')"
-                    </QIcon>
+                    :info="t('item.basicData.isPhotoRequestedTooltip')"
-                </div>
+                    class="q-mr-sm"
-                <div>
+                    size="xs"
-                    <QCheckbox
+                />
-                        v-model="data.isPhotoRequested"
-                        :label="t('item.basicData.isPhotoRequested')"
-                        class="q-mr-sm"
-                    />
-                    <QIcon name="info" class="cursor-pointer" size="xs">
-                        <QTooltip>
-                            {{ t('item.basicData.isPhotoRequestedTooltip') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
             </VnRow>
             <VnRow>
                 <VnInput

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -182,18 +183,11 @@ function handleLocation(data, location) {
                         v-model="data.isTrucker"
                         :label="t('supplier.fiscalData.isTrucker')"
                     />
-                    <div class="row items-center">
+                    <VnCheckbox
-                        <QCheckbox v-model="data.isVies" :label="t('globals.isVies')" />
+                        v-model="data.isVies"
-                        <QIcon name="info" size="xs" class="cursor-pointer q-ml-sm">
+                        :label="t('globals.isVies')" 
-                            <QTooltip>
+                        :info="t('whenActivatingIt')" 
-                                {{
+                    />
-                                    t(
-                                        'When activating it, do not enter the country code in the ID field.'
-                                    )
-                                }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
                 </div>
             </VnRow>
         </template>
@@ -201,6 +195,8 @@ function handleLocation(data, location) {
 </template>
 
 <i18n>
+en:
+    whenActivatingIt: When activating it, do not enter the country code in the ID field.
 es:
-    When activating it, do not enter the country code in the ID field.: Al activarlo, no informar el código del país en el campo nif
+    whenActivatingIt: Al activarlo, no informar el código del país en el campo nif.
 </i18n>

src/pages/Ticket/Card/BasicData/TicketBasicData.vue

@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'filters/index';
 import { useRole } from 'src/composables/useRole';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 const haveNegatives = defineModel('have-negatives', { type: Boolean, required: true });
 const formData = defineModel({ type: Object, required: true });
@@ -182,22 +183,19 @@ onMounted(async () => {
         </QCard>
         <QCard
             v-if="haveNegatives"
-            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            class="q-pa-xs q-mb-md q-ma-md color-vn-text"
             bordered
             flat
             style="border-color: black"
         >
             <QCardSection horizontal class="flex row items-center">
-                <QCheckbox
+                <VnCheckbox
-                    :label="t('basicData.withoutNegatives')"
                     v-model="formData.withoutNegatives"
+                    :label="t('basicData.withoutNegatives')"
+                    :info="t('basicData.withoutNegativesInfo')"
                     :toggle-indeterminate="false"
+                    size="xs"
                 />
-                <QIcon name="info" size="xs" class="q-ml-sm">
-                    <QTooltip max-width="350px">
-                        {{ t('basicData.withoutNegativesInfo') }}
-                    </QTooltip>
-                </QIcon>
             </QCardSection>
         </QCard>
     </QDrawer>