src/components/VnTable/VnTable.vue

@@ -288,7 +288,7 @@ defineExpose({
                     <template #top-left v-if="!$props.withoutHeader">
                         <slot name="top-left"></slot>
                     </template>
-                    <template #top-right>
+                    <template #top-right v-if="!$props.withoutHeader">
                         <TableVisibleColumns
                             v-if="isTableMode"
                             v-model="splittedColumns.columns"

src/pages/Monitor/SalesClientsTable.vue

@@ -3,21 +3,17 @@ import { ref, computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 
 import { toDateFormat } from 'src/filters/date.js';
-import { dashIfEmpty } from 'src/filters';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 
 const paginateRef = ref(null);
 const workersActiveOptions = ref([]);
 const clientsOptions = ref([]);
-const showHeaderFilters = ref(true);
 
 const from = ref(Date.vnNew());
 const to = ref(Date.vnNew());
@@ -56,25 +52,15 @@ function exprBuilder(param, value) {
 
 const params = reactive({});
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
 const columns = computed(() => [
     {
         label: t('salesClientsTable.date'),
-        name: 'date',
+        name: 'dated',
         field: 'dated',
         align: 'left',
         columnFilter: null,
         sortable: true,
-        format: (val) => toDateFormat(val),
+        format: (row) => toDateFormat(row.dated),
     },
     {
         label: t('salesClientsTable.hour'),
@@ -89,19 +75,9 @@ const columns = computed(() => [
         field: 'salesPerson',
         align: 'left',
         sortable: true,
-        columnFilter: {
+        columnField: {
-            component: VnSelect,
+            component: null,
-            filterParamKey: 'salesPersonFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: workersActiveOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
         },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('salesClientsTable.client'),
@@ -109,19 +85,9 @@ const columns = computed(() => [
         name: 'client',
         align: 'left',
         sortable: true,
-        columnFilter: {
+        columnField: {
-            component: VnSelect,
+            component: null,
-            filterParamKey: 'clientFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: clientsOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
         },
-        format: (val) => dashIfEmpty(val),
     },
 ]);
 </script>
@@ -147,7 +113,7 @@ const columns = computed(() => [
         @on-fetch="(data) => (clientsOptions = data)"
     />
     <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnPaginate
+        <VnTable
             ref="paginateRef"
             data-key="SalesMonitorClients"
             url="SalesMonitors/clientsFilter"
@@ -158,77 +124,24 @@ const columns = computed(() => [
             :filter="filter"
             :offset="50"
             auto-load
+            :columns="columns"
+            :right-search="false"
+            default-mode="table"
+            dense
+            :without-header="true"
         >
-            <template #body="{ rows }">
+            <template #column-salesPerson="{ row }">
-                <QTable
+                <QTd>
-                    :rows="rows"
+                    <span class="link">{{ row.salesPerson }}</span>
-                    :columns="columns"
+                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                    row-key="id"
+                </QTd>
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #top>
-                        <div class="full-width row justify-between">
-                            <div class="row">
-                                <VnInputDate
-                                    :label="t('salesClientsTable.from')"
-                                    dense
-                                    emit-date-format
-                                    v-model="from"
-                                    class="q-mr-lg"
-                                    style="width: 150px"
-                                />
-                                <VnInputDate
-                                    :label="t('salesClientsTable.to')"
-                                    dense
-                                    emit-date-format
-                                    v-model="to"
-                                    style="width: 150px"
-                                />
-                            </div>
-                            <div class="row q-gutter-x-sm">
-                                <QBtn
-                                    color="primary"
-                                    icon="search"
-                                    @click="showHeaderFilters = !showHeaderFilters"
-                                />
-                                <QBtn color="primary" icon="replay" @click="refetch()" />
-                            </div>
-                        </div>
-                    </template>
-                    <template v-if="showHeaderFilters" #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <VnSelect
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    @update:model-value="applyColumnFilter(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template>
-                    <template #body-cell-salesPerson="{ row }">
-                        <QTd>
-                            <span class="link">{{ row.salesPerson }}</span>
-                            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                        </QTd>
-                    </template>
-                    <template #body-cell-client="{ row }">
-                        <QTd>
-                            <span class="link">{{ row.clientName }}</span>
-                            <CustomerDescriptorProxy :id="row.clientFk" />
-                        </QTd>
-                    </template>
-                </QTable>
             </template>
-        </VnPaginate>
+            <template #column-client="{ row }">
+                <QTd>
+                    <span class="link">{{ row.clientName }}</span>
+                    <CustomerDescriptorProxy :id="row.clientFk" />
+                </QTd>
+            </template>
+        </VnTable>
     </QCard>
 </template>