Merge branch 'dev' into 6769-itemDiary

src/components/VnTable/VnFilter.vue

@@ -138,7 +138,12 @@ const showFilter = computed(
 );
 </script>
 <template>
-    <div v-if="showFilter" class="full-width" :class="alignRow()">
+    <div
+        v-if="showFilter"
+        class="full-width"
+        :class="alignRow()"
+        style="max-height: 45px; overflow: hidden"
+    >
         <VnTableColumn
             :column="$props.column"
             default="input"

src/components/VnTable/VnOrder.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+const model = defineModel({ type: Object, required: true });
+const $props = defineProps({
+    name: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: undefined,
+    },
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    searchUrl: {
+        type: String,
+        default: 'params',
+    },
+    vertical: {
+        type: Boolean,
+        default: false,
+    },
+});
+const hover = ref();
+const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
+
+async function orderBy(name, direction) {
+    if (!name) return;
+    switch (direction) {
+        case 'DESC':
+            direction = undefined;
+            break;
+        case undefined:
+            direction = 'ASC';
+            break;
+        case 'ASC':
+            direction = 'DESC';
+            break;
+    }
+    if (!direction) return await arrayData.deleteOrder(name);
+    await arrayData.addOrder(name, direction);
+}
+
+defineExpose({ orderBy });
+</script>
+<template>
+    <div
+        @mouseenter="hover = true"
+        @mouseleave="hover = false"
+        @click="orderBy(name, model?.direction)"
+        class="row items-center no-wrap cursor-pointer"
+    >
+        <span>{{ label }}</span>
+        <QChip
+            v-if="name"
+            :label="!vertical && model?.index"
+            :icon="
+                (model?.index || hover) && !vertical
+                    ? model?.direction == 'DESC'
+                        ? 'arrow_downward'
+                        : 'arrow_upward'
+                    : undefined
+            "
+            :size="vertical ? '' : 'sm'"
+            :class="[
+                model?.index ? 'color-vn-text' : 'bg-transparent',
+                vertical ? 'q-px-none' : '',
+            ]"
+            class="no-box-shadow q-mr-lg"
+            :clickable="true"
+        >
+            <div
+                class="column flex-center"
+                v-if="vertical"
+                :style="!model?.index && 'color: #5d5d5d'"
+            >
+                {{ model?.index }}
+                <QIcon
+                    :name="
+                        model?.index
+                            ? model?.direction == 'DESC'
+                                ? 'arrow_downward'
+                                : 'arrow_upward'
+                            : 'swap_vert'
+                    "
+                    size="xs"
+                />
+            </div>
+        </QChip>
+    </div>
+</template>

src/components/VnTable/VnTable.vue

@@ -13,7 +13,8 @@ import VnLv from 'components/ui/VnLv.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
 import VnTableFilter from 'components/VnTable/VnFilter.vue';
 import VnTableChip from 'components/VnTable/VnChip.vue';
-import TableVisibleColumns from 'src/components/VnTable/VnVisibleColumn.vue';
+import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
+import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 
 const $props = defineProps({
     columns: {
@@ -22,7 +23,7 @@ const $props = defineProps({
     },
     defaultMode: {
         type: String,
-        default: 'card', // 'table', 'card'
+        default: 'table', // 'table', 'card'
     },
     columnSearch: {
         type: Boolean,
@@ -93,6 +94,7 @@ const mode = ref(DEFAULT_MODE);
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
+const orders = ref(parseOrder(routeQuery.filter?.order));
 const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
@@ -135,16 +137,24 @@ const rowClickFunction = computed(() => {
 });
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);
+const columnsVisibilitySkiped = computed(() => [
+    ...splittedColumns.value.columns.filter((c) => c.visible == false).map((c) => c.name),
+    ...['tableActions'],
+]);
 
 function setUserParams(watchedParams) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
-    const where = JSON.parse(watchedParams?.filter)?.where;
+    const filter = JSON.parse(watchedParams?.filter);
+    const where = filter?.where;
+    const order = filter?.order;
+
     watchedParams = { ...watchedParams, ...where };
     delete watchedParams.filter;
     delete params.value?.filter;
     params.value = { ...params.value, ...watchedParams };
+    orders.value = parseOrder(order);
 }
 
 function splitColumns(columns) {
@@ -176,6 +186,7 @@ function splitColumns(columns) {
                 label: t('status'),
                 name: 'tableStatus',
                 columnFilter: false,
+                orderBy: false,
             });
     }
 }
@@ -204,6 +215,17 @@ function getColAlign(col) {
     return 'text-' + (col.align ?? 'left');
 }
 
+function parseOrder(urlOrders) {
+    const orderObject = {};
+    if (!urlOrders) return orderObject;
+    if (typeof urlOrders == 'string') urlOrders = [urlOrders];
+    for (const [index, orders] of urlOrders.entries()) {
+        const [name, direction] = orders.split(' ');
+        orderObject[name] = { direction, index: index + 1 };
+    }
+    return orderObject;
+}
+
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
     reload,
@@ -229,20 +251,31 @@ defineExpose({
                 :redirect="!!redirect"
             >
                 <template #body>
-                    <VnTableFilter
+                    <div
-                        :column="col"
+                        class="row no-wrap flex-center"
-                        :data-key="$attrs['data-key']"
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
-                        v-model="params[columnName(col)]"
+                    >
-                        :search-url="searchUrl"
+                        <VnTableFilter
+                            :column="col"
+                            :data-key="$attrs['data-key']"
+                            v-model="params[columnName(col)]"
+                            :search-url="searchUrl"
+                        />
+                        <VnTableOrder
+                            v-model="orders[col.name]"
+                            :name="col.orderBy ?? col.name"
+                            :data-key="$attrs['data-key']"
+                            :search-url="searchUrl"
+                            :vertical="true"
+                        />
+                    </div>
+                    <slot
+                        name="moreFilterPanel"
+                        :params="params"
+                        :columns="splittedColumns.columns"
                     />
                 </template>
-                <slot
-                    name="moreFilterPanel"
-                    :params="params"
-                    :columns="splittedColumns.columns"
-                />
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
@@ -289,10 +322,11 @@ defineExpose({
                         <slot name="top-left"></slot>
                     </template>
                     <template #top-right>
-                        <TableVisibleColumns
+                        <VnVisibleColumn
                             v-if="isTableMode"
                             v-model="splittedColumns.columns"
                             :table-code="tableCode ?? route.name"
+                            :skip="columnsVisibilitySkiped"
                         />
                         <QBtnToggle
                             v-model="mode"
@@ -317,24 +351,31 @@ defineExpose({
                             style="min-width: 100px"
                         >
                             <div
-                                class="q-pt-sm q-px-sm ellipsis"
+                                class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
-                                :style="
+                                style="height: 75px"
-                                    $props.columnSearch && col.columnFilter == false
-                                        ? { 'min-height': 72 + 'px' }
-                                        : ''
-                                "
                             >
-                                {{ col?.label }}
+                                <div
+                                    class="row items-center no-wrap"
+                                    style="height: 30px"
+                                >
+                                    <VnTableOrder
+                                        v-model="orders[col.name]"
+                                        :name="col.orderBy ?? col.name"
+                                        :label="col?.label"
+                                        :data-key="$attrs['data-key']"
+                                        :search-url="searchUrl"
+                                    />
+                                </div>
+                                <VnTableFilter
+                                    v-if="$props.columnSearch"
+                                    :column="col"
+                                    :show-title="true"
+                                    :data-key="$attrs['data-key']"
+                                    v-model="params[columnName(col)]"
+                                    :search-url="searchUrl"
+                                />
                             </div>
-                            <VnTableFilter
-                                v-if="$props.columnSearch"
-                                :column="col"
-                                :show-title="true"
-                                :data-key="$attrs['data-key']"
-                                v-model="params[columnName(col)]"
-                                :search-url="searchUrl"
-                            />
                         </QTh>
                     </template>
                     <template #header-cell-tableActions>
@@ -561,6 +602,10 @@ es:
     color: var(--vn-text-color);
 }
 
+.color-vn-text {
+    color: var(--vn-text-color);
+}
+
 .q-table--dark .q-table__bottom,
 .q-table--dark thead,
 .q-table--dark tr,

src/components/VnTable/VnVisibleColumn.vue

@@ -12,6 +12,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    skip: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const { notify } = useNotify();
@@ -30,8 +34,12 @@ function setUserConfigViewData(data, isLocal) {
     if (!data) return;
     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
     if (!isLocal) localColumns.value = [];
+    // Array to Object
+    const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
+
     for (let column of columns.value) {
         const { label, name } = column;
+        if (skippeds[name]) continue;
         column.visible = data[name] ?? true;
         if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
     }
@@ -127,7 +135,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md" dense>
+    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
                 <QIcon name="info" size="sm" class="info-icon">

src/composables/useArrayData.js

@@ -24,10 +24,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         const searchUrl = store.searchUrl;
         if (query[searchUrl]) {
             const params = JSON.parse(query[searchUrl]);
-            const filter = params?.filter;
+            const filter = params?.filter && JSON.parse(params?.filter ?? '{}');
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
-            store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
+            store.userFilter = { ...filter, ...store.userFilter };
+            if (filter.order) store.order = filter.order;
         }
     });
 
@@ -69,7 +70,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         canceller = new AbortController();
 
         const filter = {
-            order: store.order,
             limit: store.limit,
         };
 
@@ -94,6 +94,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
         Object.assign(params, userParams);
         params.filter.skip = store.skip;
+        if (store.order && store.order.length) params.filter.order = store.order;
+        else delete params.filter.order;
 
         params.filter = JSON.stringify(params.filter);
         store.currentFilter = params;
@@ -147,7 +149,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.filter = {};
         if (params) store.userParams = { ...params };
 
-        const response = await fetch({ append: false });
+        const response = await fetch({});
         return response;
     }
 
@@ -160,7 +162,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.userParams = userParams;
         arrayDataStore.reset(['skip', 'filter.skip', 'page']);
 
-        await fetch({ append: false });
+        await fetch({});
         return { filter, params };
     }
 
@@ -171,6 +173,37 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         await addFilter({ filter: { where } });
     }
 
+    async function addOrder(field, direction = 'ASC') {
+        const newOrder = field + ' ' + direction;
+        let order = store.order ?? [];
+        if (typeof order == 'string') order = [order];
+
+        let index = order.findIndex((o) => o.split(' ')[0] === field);
+        if (index > -1) {
+            order[index] = newOrder;
+        } else {
+            index = order.length;
+            order.push(newOrder);
+        }
+
+        store.order = order;
+        fetch({});
+        index++;
+
+        return { index, order };
+    }
+
+    async function deleteOrder(field) {
+        let order = store.order ?? [];
+        if (typeof order == 'string') order = [order];
+
+        const index = order.findIndex((o) => o.split(' ')[0] === field);
+        if (index > -1) order.splice(index, 1);
+
+        store.order = order;
+        fetch({});
+    }
+
     function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
@@ -198,7 +231,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function refresh() {
-        if (Object.values(store.userParams).length) await fetch({ append: false });
+        if (Object.values(store.userParams).length) await fetch({});
     }
 
     function updateStateParams() {
@@ -240,6 +273,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         applyFilter,
         addFilter,
         addFilterWhere,
+        addOrder,
+        deleteOrder,
         refresh,
         destroy,
         loadMore,

src/pages/Claim/Card/ClaimSummary.vue

@@ -211,7 +211,7 @@ async function changeState(value) {
             >
                 <QList>
                     <QVirtualScroll
-                        style="max-height: 300px"
+                        class="max-container-height"
                         :items="ClaimStates"
                         separator
                         v-slot="{ item, index }"
@@ -279,13 +279,13 @@ async function changeState(value) {
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
-                    style="max-height: 300px"
+                    class="max-container-height"
                     order="created ASC"
                 />
             </QCard>
-            <QCard class="vn-two" v-if="claimDms.length > 0">
+            <QCard class="vn-two" v-if="claimDms?.length">
                 <VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
-                <div class="container">
+                <div class="container max-container-height" style="overflow: auto">
                     <div
                         class="multimedia-container"
                         v-for="(media, index) of claimDms"
@@ -302,7 +302,10 @@ async function changeState(value) {
                             >
                                 <QTooltip>Video</QTooltip>
                             </QIcon>
-                            <QCard class="multimedia relative-position">
+                            <QCard
+                                class="multimedia relative-position"
+                                style="max-height: 128px"
+                            >
                                 <QImg
                                     :src="media.url"
                                     class="rounded-borders cursor-pointer fit"
@@ -322,7 +325,7 @@ async function changeState(value) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-two" v-if="salesClaimed.length > 0">
+            <QCard class="vn-max" v-if="salesClaimed.length > 0">
                 <VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
                 <QTable
                     :columns="detailsColumns"
@@ -361,7 +364,7 @@ async function changeState(value) {
                     </template>
                 </QTable>
             </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
+            <QCard class="vn-max" v-if="developments.length > 0">
                 <VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
                 <QTable
                     :columns="developmentColumns"
@@ -458,7 +461,7 @@ async function changeState(value) {
     gap: 15px;
 }
 .multimedia-container {
-    flex: 1 0 21%;
+    flex: 0 0 128px;
 }
 .multimedia {
     transition: all 0.5s;
@@ -491,4 +494,8 @@ async function changeState(value) {
 .change-state {
     width: 10%;
 }
+
+.max-container-height {
+    max-height: 300px;
+}
 </style>

src/pages/Claim/Card/ClaimSummaryAction.vue

@@ -71,7 +71,6 @@ const columns = [
     <VnTable
         data-key="ClaimEndsTable"
         url="ClaimEnds/filter"
-        default-mode="table"
         :right-search="false"
         :column-search="false"
         :disable-option="{ card: true, table: true }"

src/pages/Claim/ClaimFilter.vue

@@ -17,6 +17,8 @@ const props = defineProps({
 });
 
 const states = ref([]);
+
+defineExpose({ states });
 </script>
 
 <template>

src/pages/Claim/ClaimList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'filters/index';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -14,6 +14,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 
+const claimFilterRef = ref();
 const columns = computed(() => [
     {
         align: 'left',
@@ -29,18 +30,38 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'clientName',
         isTitle: true,
+        visible: false,
     },
     {
         align: 'left',
         label: t('claim.customer'),
         name: 'clientFk',
         cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
         align: 'left',
         label: t('claim.attendedBy'),
         name: 'attendedBy',
         cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
+        },
     },
     {
         align: 'left',
@@ -48,6 +69,9 @@ const columns = computed(() => [
         name: 'created',
         format: ({ created }) => toDate(created),
         cardVisible: true,
+        columnFilter: {
+            component: 'date',
+        },
     },
     {
         align: 'left',
@@ -57,6 +81,14 @@ const columns = computed(() => [
             condition: () => true,
             color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
         },
+        columnFilter: {
+            name: 'claimStateFk',
+            component: 'select',
+            attrs: {
+                options: claimFilterRef.value?.states,
+                optionLabel: 'description',
+            },
+        },
     },
     {
         align: 'right',
@@ -86,7 +118,7 @@ const STATE_COLOR = {
     />
     <RightMenu>
         <template #right-panel>
-            <ClaimFilter data-key="ClaimList" />
+            <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
     </RightMenu>
     <VnTable
@@ -116,4 +148,9 @@ const STATE_COLOR = {
 es:
     Search claim: Buscar reclamación
     You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+    params:
+        stateCode: Estado
+en:
+    params:
+        stateCode: State
 </i18n>

src/pages/Customer/CustomerList.vue

@@ -405,7 +405,6 @@ function handleLocation(data, location) {
         }"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         redirect="customer"
         auto-load
     >

src/pages/Entry/EntryLatestBuys.vue

@@ -191,7 +191,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        default-mode="table"
         auto-load
         :right-search="false"
     />

src/pages/Entry/EntryList.vue

@@ -199,7 +199,6 @@ onMounted(async () => {
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        default-mode="table"
         auto-load
         :right-search="false"
     />

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -207,7 +207,6 @@ watchEffect(selectedRows);
         v-model:selected="selectedRows"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         redirect="invoice-out"
         auto-load
         :table="{

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -164,7 +164,6 @@ const downloadCSV = async () => {
         "
         :limit="0"
         :columns="columns"
-        default-mode="table"
         auto-load
         :is-editable="false"
         :use-model="true"

src/pages/Order/OrderLines.vue

@@ -249,7 +249,6 @@ async function confirmOrder() {
                 data-key="OrderLines"
                 url="OrderRows"
                 :columns="columns"
-                default-mode="table"
                 :right-search="false"
                 :use-model="true"
                 auto-load

src/pages/Order/OrderList.vue

@@ -154,7 +154,6 @@ async function fetchClientAddress(id, data) {
             },
         }"
         :columns="columns"
-        default-mode="table"
         redirect="order"
         auto-load
     >

src/pages/Route/Agency/AgencyList.vue

@@ -78,6 +78,7 @@ const columns = computed(() => [
         :columns="columns"
         :right-search="false"
         :use-model="true"
+        default-mode="card"
     />
 </template>
 <i18n>

src/pages/Route/Cmr/CmrList.vue

@@ -117,6 +117,7 @@ function downloadPdfs() {
         :columns="columns"
         :right-search="true"
         :use-model="true"
+        default-mode="card"
     />
 </template>
 <style lang="scss" scoped>

src/pages/Route/RouteList.vue

@@ -237,7 +237,6 @@ const openTicketsDialog = (id) => {
         url="Routes/filter"
         :columns="columns"
         :right-search="true"
-        default-mode="table"
         :is-editable="true"
         :create="{
             urlCreate: 'Routes',

src/pages/Supplier/SupplierList.vue

@@ -99,7 +99,6 @@ const columns = computed(() => [
         }"
         order="id ASC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :use-model="true"

src/pages/Travel/TravelList.vue

@@ -198,7 +198,6 @@ const columns = computed(() => [
         }"
         order="landed DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         redirect="travel"
         :is-editable="false"

src/pages/Worker/Card/WorkerBalance.vue

@@ -77,7 +77,6 @@ const columns = computed(() => [
         }"
         order="paymentDate DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :is-editable="true"

src/pages/Worker/Card/WorkerFormation.vue

@@ -116,7 +116,6 @@ const columns = computed(() => [
         }"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :is-editable="true"

test/vitest/__tests__/composables/useArrayData.spec.js

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import * as vueRouter from 'vue-router';
 
 describe('useArrayData', () => {
-    const filter = '{"order":"","limit":10,"skip":0}';
+    const filter = '{"limit":10,"skip":0}';
     const params = { supplierFk: 2 };
     beforeEach(() => {
         vi.spyOn(useRouter(), 'replace');