fix boolean values in grid

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue'; */
 import invoiceOutService from 'src/services/InvoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { exportFile } from 'quasar';
+import { QBadge, QCheckbox, exportFile } from 'quasar';
 
 const rows = ref([]);
 const { t } = useI18n();
@@ -31,6 +31,53 @@ const filter = ref({
     comercial: null,
 });
 
+const tableColumnComponents = {
+    company: {
+        component: 'span',
+        props: {},
+    },
+    country: {
+        component: 'span',
+        props: {},
+    },
+    clientId: {
+        component: 'a',
+        props: { href: '#' },
+    },
+    client: {
+        component: 'span',
+        props: {},
+    },
+    amount: {
+        component: 'span',
+        props: {},
+    },
+    base: {
+        component: 'span',
+        props: {},
+    },
+    ticketId: {
+        component: 'span',
+        props: {},
+    },
+    active: {
+        component: 'span',
+        props: { type: 'boolean' },
+    },
+    hasToInvoice: {
+        component: 'span',
+        props: { type: 'boolean' },
+    },
+    verifiedData: {
+        component: 'span',
+        props: { type: 'boolean' },
+    },
+    comercial: {
+        component: 'a',
+        props: { href: '#' },
+    },
+};
+
 const columns = ref([
     {
         label: 'company',
@@ -135,17 +182,23 @@ const exportTable = () => {
 };
 
 const search = async () => {
+    const and = [];
+    Object.keys(filter.value).forEach((key) => {
+        if (filter.value[key]) {
+            and.push({
+                [key]: filter.value[key],
+            });
+        }
+    });
+
     const params = {
         ...payload.value,
         filter: {
             limit: 20,
-            where: {
-                ...filter.value,
-            },
+            where: { and },
         },
     };
-    console.log(params);
-    rows.value = await invoiceOutService.getNegativeBases(payload.value);
+    rows.value = await invoiceOutService.getNegativeBases(params);
 };
 
 const refresh = () => {
@@ -153,6 +206,19 @@ const refresh = () => {
         from: new Date('2001-01-01'),
         to: new Date('2001-01-31'),
     };
+    filter.value = {
+        company: null,
+        country: null,
+        clientId: null,
+        client: null,
+        amount: null,
+        base: null,
+        ticketId: null,
+        active: null,
+        hasToInvoice: null,
+        verifiedData: null,
+        comercial: null,
+    };
     search();
 };
 
@@ -178,7 +244,7 @@ onMounted(async () => {
                         v-model="payload.from"
                         type="date"
                         mask="date"
-                        class="q-mr-sm q"
+                        class="q-mr-md q"
                         :label="t('invoiceOut.negativeBases.from')"
                     />
                     <QInput
@@ -241,15 +307,31 @@ onMounted(async () => {
                     </QTh>
                 </QTr>
             </template>
-            <!--             <template #body-cell="props">
+            <template #body-cell="props">
                 <QTd :props="props">
                     <component
                         :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
                         v-bind="tableColumnComponents[props.col.name].props"
                         @click="tableColumnComponents[props.col.name].event(props)"
-                        class="col-content"
                     >
-                        {{ props.value }}
+                        <span
+                            v-if="
+                                tableColumnComponents[props.col.name].props.type !=
+                                'boolean'
+                            "
+                        >
+                            {{ props.value }}
+                        </span>
+                        <span v-else>
+                            <QBadge v-if="props.value" color="grey">
+                                <QIcon name="check" size="xs" />
+                            </QBadge>
+
+                            <QBadge v-else color="grey" outline>
+                                <QIcon name="" size="xs" />
+                            </QBadge>
+                        </span>
                         <QPopupProxy>
                             <CustomerDescriptor
                                 v-if="selectedCustomerId === props.value"
@@ -258,7 +340,7 @@ onMounted(async () => {
                         </QPopupProxy>
                     </component>
                 </QTd>
-            </template> -->
+            </template>
         </QTable>
     </QPage>
 </template>