feat(VnTable): refs #6825 move to folder. fix checkboxs

src/components/VnTable/VnColumn.vue

@@ -61,9 +61,10 @@ const defaultComponents = {
         attrs: (prop) => {
             return {
                 disable: !$props.isEditable,
-                // 'true-value': 1,
-                // 'false-value': 0,
-                // 'model-value': Boolean(prop),
+                'true-value': 1,
+                'false-value': 0,
+                'model-value': Boolean(prop),
+                class: 'no-padding',
             };
         },
         forceAttrs: {

src/components/VnTable/VnFilter.vue

@@ -1,29 +1,3 @@
-<template>
-    <div
-        v-if="showTitle && column"
-        class="q-pt-sm q-px-sm ellipsis"
-        :class="`text-${column.align ?? 'left'}`"
-    >
-        {{ column.label }}
-    </div>
-    <div
-        v-if="columnFilter !== false && column.field != 'tableActions'"
-        class="row no-wrap"
-    >
-        <hr class="q-ma-none divisor-line" v-if="showTitle" />
-        <span class="full-width">
-            <VnTableColumn
-                :column="$props.column"
-                :row="{}"
-                default="input"
-                v-model="model"
-                :components="components"
-                component-prop="columnFilter"
-            />
-        </span>
-    </div>
-    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
-</template>
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QCheckbox } from 'quasar';
@@ -33,7 +7,7 @@ import { useArrayData } from 'composables/useArrayData';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnTableColumn from 'components/common/VnTableColumn.vue';
+import VnTableColumn from 'components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
     column: {
@@ -65,6 +39,7 @@ const components = {
         attrs: {
             class: 'q-px-sm q-pb-xs q-pt-none',
             dense: true,
+            filled: !$props.showTitle,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -73,14 +48,26 @@ const components = {
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
+        attrs: {
+            dense: true,
+            class: 'q-px-md q-pb-xs q-pt-none',
+        },
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
+        attrs: {
+            dense: true,
+            class: 'q-px-md q-pb-xs q-pt-none',
+        },
     },
     checkbox: {
         component: markRaw(QCheckbox),
         event: updateEvent,
+        attrs: {
+            dense: true,
+            class: 'q-pa-sm q-mt-md',
+        },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
         },
@@ -91,6 +78,7 @@ const components = {
         attrs: {
             class: 'q-px-md q-pb-xs q-pt-none',
             dense: true,
+            filled: !$props.showTitle,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -98,20 +86,6 @@ const components = {
     },
 };
 
-// async function addFilter() {
-//     const value = model.value == '' ? null : model.value;
-//     const prefix = columnFilter.value?.inWhere?.prefix;
-//     let field = columnFilter.value?.field ?? $props.column.field;
-//     field = prefix ? prefix + '.' + field : field;
-//     const toFilter = { [field]: value };
-//     const filter = columnFilter.value?.inWhere
-//         ? { filter: { where: toFilter } }
-//         : { params: toFilter };
-
-//     console.log('filter: ', filter);
-//     await arrayData.addFilter(filter);
-// }
-
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
     value = value == '' ? null : value;
@@ -120,4 +94,34 @@ async function addFilter(value) {
 
     await arrayData.addFilter({ params: toFilter });
 }
+
+function alignRow() {
+    if ($props.column.align == 'left') return 'justify-start';
+    if ($props.column.align == 'right') return 'justify-end';
+    return 'justify-center';
+}
 </script>
+<template>
+    <div
+        v-if="showTitle && column"
+        class="q-pt-sm q-px-sm ellipsis"
+        :class="`text-${column.align ?? 'left'}`"
+    >
+        {{ column.label }}
+    </div>
+    <div
+        v-if="columnFilter !== false && column.field != 'tableActions'"
+        class="row no-wrap full-width"
+        :class="alignRow()"
+    >
+        <VnTableColumn
+            :column="$props.column"
+            :row="{}"
+            default="input"
+            v-model="model"
+            :components="components"
+            component-prop="columnFilter"
+        />
+    </div>
+    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
+</template>

src/components/VnTable/VnTable.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 import { useStateStore } from 'stores/useStateStore';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -9,9 +10,9 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
-import VnTableColumn from 'components/common/VnTableColumn.vue';
-import VnTableFilter from 'components/common/VnTableFilter.vue';
-import VnTableChip from 'components/common/VnTableChip.vue';
+import VnTableColumn from 'components/VnTable/VnColumn.vue';
+import VnTableFilter from 'components/VnTable/VnFilter.vue';
+import VnTableChip from 'components/VnTable/VnChip.vue';
 
 const $props = defineProps({
     columns: {
@@ -22,10 +23,6 @@ const $props = defineProps({
         type: String,
         default: 'card', // 'table', 'card'
     },
-    responsive: {
-        type: Boolean,
-        default: true,
-    },
     columnSearch: {
         type: Boolean,
         default: true,
@@ -50,6 +47,7 @@ const $props = defineProps({
 const { t } = useI18n();
 const stateStore = useStateStore();
 const router = useRouter();
+const quasar = useQuasar();
 
 const mode = ref('card');
 const selected = ref([]);
@@ -72,7 +70,7 @@ const tableModes = [
 ];
 
 onMounted(() => {
-    mode.value = $props.defaultMode;
+    mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
     stateStore.rightDrawer = true;
 });
 
@@ -91,19 +89,10 @@ function splitColumns(columns) {
     };
 
     for (const col of columns) {
-        if (!col) continue;
-        if (col.field == 'tableActions') {
-            splittedColumns.value.actions = col;
-        }
-        if (col.chip) {
-            splittedColumns.value.chips.push(col);
-        }
-        if (col.isTitle) {
-            splittedColumns.value.title = col;
-        }
-        if (col.create) {
-            splittedColumns.value.create.push(col);
-        }
+        if (col.field == 'tableActions') splittedColumns.value.actions = col;
+        if (col.chip) splittedColumns.value.chips.push(col);
+        if (col.isTitle) splittedColumns.value.title = col;
+        if (col.create) splittedColumns.value.create.push(col);
         if (col.cardVisible) splittedColumns.value.visible.push(col);
         splittedColumns.value.columns.push(col);
     }
@@ -148,7 +137,13 @@ defineExpose({
 });
 </script>
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer
+        v-if="$props.rightSearch"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
         <QScrollArea class="fit">
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
@@ -180,7 +175,6 @@ defineExpose({
         :disable-infinite-scroll="mode == 'table'"
     >
         <template #body="{ rows }">
-            <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
                 :columns="splittedColumns.columns"
@@ -246,7 +240,7 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                    <QTd class="no-padding" :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn
                             :column="col"
                             :row="row"

src/components/common/VnComponent.vue

@@ -7,7 +7,6 @@
             v-on="mix(toComponent).event"
             v-model="model"
         />
-        <!-- @click="toComponent.event && toComponent.event(value)"  -->
     </span>
 </template>
 <script setup>

src/components/common/VnSelect.vue

@@ -26,10 +26,6 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    optionFilter: {
-        type: String,
-        default: null,
-    },
     url: {
         type: String,
         default: '',

src/components/common/VnTableFilterMore.vue

@@ -1,13 +0,0 @@
-<template>
-    <QSelect dense icon="filter_alt" flat size="xs" :options="filterOptions"> </QSelect>
-</template>
-<script setup>
-const model = defineModel();
-
-const filterOptions = [{ label: '%' }, { label: '<' }, { label: '>' }];
-
-async function encapsulate(field) {
-    // ejemplo
-    // si es % que te ponga {like: `%${field}%`}
-}
-</script>

src/components/common/VnTableObj.json

@@ -1,33 +0,0 @@
-//     {
-//         isId: Boolean
-//         align: 'left',
-//         field: 'hasFile',
-//         label: t('globals.original'),
-//         name: 'hasFile',
-//         component: QCheckbox ?? span,
-//         cardVisible: Boolean
-//         isId: 1/2
-//         color: function
-//         props: (prop) => ({
-//             disable: true,
-//             'model-value': Boolean(prop.value),
-//         }),
-//         tableActions:  {
-//     field: 'tableActions',
-//     name: 'tableActions',
-//     actions: [
-//         {
-//             title: t('Client ticket list'),
-//             icon: 'vn:ticket',
-//             action: redirectToCreateView,
-//             isPrimary: true,
-//         },
-//         {
-//             title: t('Client ticket list'),
-//             icon: 'preview',
-//             action: (row) => viewSummary(row.id, CustomerSummary),
-//         },
-//     ],
-// },
-//     },
-//      tableActions y hacer bucle

src/components/ui/VnFilterPanel.vue

@@ -89,14 +89,15 @@ const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
     isLoading.value = true;
-    const params = { ...userParams.value };
+    console.log('params.value: ', params.value);
+    const filter = { ...userParams.value, ...params.value };
     store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
-    const { params: newParams } = await arrayData.addFilter({ params });
+    const { params: newParams } = await arrayData.addFilter({ params: filter });
     userParams.value = newParams;
 
-    if (!props.showAll && !Object.values(params).length) store.data = [];
+    if (!props.showAll && !Object.values(filter).length) store.data = [];
 
     isLoading.value = false;
     emit('search');
@@ -128,6 +129,7 @@ async function clearFilters() {
     for (const key of removableFilters) {
         newParams[key] = userParams.value[key];
     }
+    params.value = {};
     userParams.value = { ...newParams }; // Actualizar los params con los removibles
     await arrayData.applyFilter({ params: userParams.value });
 
@@ -176,7 +178,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <QForm id="filterPanelForm">
+    <QForm @submit="search" id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnTable from 'components/common/VnTable.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import CustomerSummary from '../Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -303,12 +303,6 @@ const columns = computed(() => [
         isTitle: true,
         create: true,
     },
-    {
-        align: 'left',
-        field: 'socialName',
-        label: t('customer.extendedList.tableVisibleColumns.socialName'),
-        name: 'socialName',
-    },
     {
         align: 'left',
         field: 'fi',
@@ -455,18 +449,21 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'isVies',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'isTaxDataChecked',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -486,12 +483,14 @@ const columns = computed(() => [
             condition: (v, { isActive, isFreezed }) => isActive && isFreezed,
             icon: 'vn:frozen',
         },
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasToInvoice',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -505,24 +504,28 @@ const columns = computed(() => [
         field: 'isToBeMailed',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasLcr',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasCoreVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasSepaVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
+        component: 'checkbox',
     },
     {
         align: 'right',