refactor: refs #6564 hide problems column in TicketAdvance.vue and update localization files

src/components/TicketProblems.vue

@@ -1,12 +1,22 @@
 <script setup>
 import { toCurrency } from 'src/filters';
+import { getValueFromPath } from 'src/composables/getValueFromPath';
 
-defineProps({ row: { type: Object, required: true } });
+const { row, visibleProblems = null } = defineProps({
+    row: { type: Object, required: true },
+    visibleProblems: { type: Array },
+});
+
+function showProblem(problem) {
+    const val = getValueFromPath(row, problem);
+    if (!visibleProblems) return val;
+    return !!(visibleProblems?.includes(problem) && val);
+}
 </script>
 <template>
     <span class="q-gutter-x-xs">
         <router-link
-            v-if="row.claim?.claimFk"
+            v-if="showProblem('claim.claimFk')"
             :to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
             class="link"
         >
@@ -18,7 +28,7 @@ defineProps({ row: { type: Object, required: true } });
             </QIcon>
         </router-link>
         <QIcon
-            v-if="row?.reserved"
+            v-if="showProblem('reserved')"
             color="primary"
             name="vn:reserva"
             size="xs"
@@ -29,7 +39,7 @@ defineProps({ row: { type: Object, required: true } });
             </QTooltip>
         </QIcon>
         <QIcon
-            v-if="row?.isDeleted"
+            v-if="showProblem('isDeleted')"
             color="primary"
             name="vn:deletedTicket"
             size="xs"
@@ -40,7 +50,7 @@ defineProps({ row: { type: Object, required: true } });
             </QTooltip>
         </QIcon>
         <QIcon
-            v-if="row?.hasRisk"
+            v-if="showProblem('hasRisk')"
             name="vn:risk"
             :color="row.hasHighRisk ? 'negative' : 'primary'"
             size="xs"
@@ -51,51 +61,76 @@ defineProps({ row: { type: Object, required: true } });
             </QTooltip>
         </QIcon>
         <QIcon
-            v-if="row?.hasComponentLack"
+            v-if="showProblem('hasComponentLack')"
             name="vn:components"
             color="primary"
             size="xs"
         >
             <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
         </QIcon>
-        <QIcon v-if="row?.hasItemDelay" color="primary" size="xs" name="vn:hasItemDelay">
+        <QIcon
+            v-if="showProblem('hasItemDelay')"
+            color="primary"
+            size="xs"
+            name="vn:hasItemDelay"
+        >
             <QTooltip>
                 {{ $t('ticket.summary.hasItemDelay') }}
             </QTooltip>
         </QIcon>
-        <QIcon v-if="row?.hasItemLost" color="primary" size="xs" name="vn:hasItemLost">
+        <QIcon
+            v-if="showProblem('hasItemLost')"
+            color="primary"
+            size="xs"
+            name="vn:hasItemLost"
+        >
             <QTooltip>
                 {{ $t('salesTicketsTable.hasItemLost') }}
             </QTooltip>
         </QIcon>
         <QIcon
-            v-if="row?.hasItemShortage"
+            v-if="showProblem('hasItemShortage')"
             name="vn:unavailable"
             color="primary"
             size="xs"
         >
             <QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
         </QIcon>
-        <QIcon v-if="row?.hasRounding" color="primary" name="sync_problem" size="xs">
+        <QIcon
+            v-if="showProblem('hasRounding')"
+            color="primary"
+            name="sync_problem"
+            size="xs"
+        >
             <QTooltip>
                 {{ $t('ticketList.rounding') }}
             </QTooltip>
         </QIcon>
         <QIcon
-            v-if="row?.hasTicketRequest"
+            v-if="showProblem('hasTicketRequest')"
             name="vn:buyrequest"
             color="primary"
             size="xs"
         >
             <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
         </QIcon>
-        <QIcon v-if="row?.isTaxDataChecked" name="vn:no036" color="primary" size="xs">
+        <QIcon
+            v-if="showProblem('isTaxDataChecked')"
+            name="vn:no036"
+            color="primary"
+            size="xs"
+        >
             <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
         </QIcon>
-        <QIcon v-if="row?.isFreezed" name="vn:frozen" color="primary" size="xs">
+        <QIcon v-if="showProblem('isFreezed')" name="vn:frozen" color="primary" size="xs">
             <QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
         </QIcon>
-        <QIcon v-if="row?.isTooLittle" name="vn:isTooLittle" color="primary" size="xs">
+        <QIcon
+            v-if="showProblem('isTooLittle')"
+            name="vn:isTooLittle"
+            color="primary"
+            size="xs"
+        >
             <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
         </QIcon>
     </span>

src/components/VnTable/VnOrder.vue

@@ -70,7 +70,7 @@ function textAlignToFlex(textAlign) {
         :style="textAlignToFlex(align)"
     >
         <span :title="label">{{ label }}</span>
-        <div v-if="name">
+        <div v-if="name && model?.index">
             <QChip
                 :label="!vertical ? model?.index : ''"
                 :icon="
@@ -83,14 +83,14 @@ function textAlignToFlex(textAlign) {
                 :size="vertical ? '' : 'sm'"
                 :class="[
                     model?.index ? 'color-vn-text' : 'bg-transparent',
-                    vertical ? 'q-mx-none q-py-lg' : '',
+                    vertical ? 'q-px-none' : '',
                 ]"
                 class="no-box-shadow"
                 :clickable="true"
                 style="min-width: 40px; max-height: 30px"
             >
                 <div
-                    class="column justify-center text-center"
+                    class="column flex-center"
                     v-if="vertical"
                     :style="!model?.index && 'color: #5d5d5d'"
                 >

src/components/VnTable/VnTableFilter.vue

@@ -26,12 +26,7 @@ function columnName(col) {
 }
 </script>
 <template>
-    <VnFilterPanel
-        v-bind="$attrs"
-        :search-button="true"
-        :disable-submit-event="true"
-        :search-url
-    >
+    <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
         <template #body="{ params, orders, searchFn }">
             <div
                 class="container"
@@ -39,20 +34,13 @@ function columnName(col) {
                 :key="col.id"
             >
                 <div class="filter">
-                    <slot
-                        :name="`filter-${col.name}`"
-                        :params="params"
-                        :column-name="columnName(col)"
-                        :search-fn
-                    >
-                        <VnFilter
-                            ref="tableFilterRef"
-                            :column="col"
-                            :data-key="$attrs['data-key']"
-                            v-model="params[columnName(col)]"
-                            :search-url="searchUrl"
-                        />
-                    </slot>
+                    <VnFilter
+                        ref="tableFilterRef"
+                        :column="col"
+                        :data-key="$attrs['data-key']"
+                        v-model="params[columnName(col)]"
+                        :search-url="searchUrl"
+                    />
                 </div>
                 <div class="order">
                     <VnTableOrder
@@ -89,13 +77,13 @@ function columnName(col) {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 45px;
+    height: 45px;
     gap: 10px;
 }
 
 .filter {
     width: 70%;
-    min-height: 40px;
+    height: 40px;
     text-align: center;
 }
 .order {

src/components/__tests__/UserPanel.spec.js

@@ -1,65 +1,63 @@
-import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { vi, describe, expect, it, beforeEach, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import UserPanel from 'src/components/UserPanel.vue';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 
-vi.mock('src/utils/quasarLang', () => ({
-  default: vi.fn(),
-}));
-
 describe('UserPanel', () => {
-  let wrapper;
-  let vm;
-  let state;
+    let wrapper;
+    let vm;
+    let state;
 
-  beforeEach(() => {
-    wrapper = createWrapper(UserPanel, {});
-    state = useState();
-    state.setUser({
-      id: 115,
-      name: 'itmanagement',
-      nickname: 'itManagementNick',
-      lang: 'en',
-      darkMode: false,
-      companyFk: 442,
-      warehouseFk: 1,
+    beforeEach(() => {
+        wrapper = createWrapper(UserPanel, {});
+        state = useState();
+        state.setUser({
+            id: 115,
+            name: 'itmanagement',
+            nickname: 'itManagementNick',
+            lang: 'en',
+            darkMode: false,
+            companyFk: 442,
+            warehouseFk: 1,
+        });
+        wrapper = wrapper.wrapper;
+        vm = wrapper.vm;
     });
-    wrapper = wrapper.wrapper;
-    vm = wrapper.vm;
-  });
 
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
 
-  it('should fetch warehouses data on mounted', async () => {
-    const fetchData = wrapper.findComponent({ name: 'FetchData' });
-    expect(fetchData.props('url')).toBe('Warehouses');
-    expect(fetchData.props('autoLoad')).toBe(true);
-  });
+    it('should fetch warehouses data on mounted', async () => {
+        const fetchData = wrapper.findComponent({ name: 'FetchData' });
+        expect(fetchData.props('url')).toBe('Warehouses');
+        expect(fetchData.props('autoLoad')).toBe(true);
+    });
 
-  it('should toggle dark mode correctly and update preferences', async () => {
-    await vm.saveDarkMode(true);
-    expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
-    expect(vm.user.darkMode).toBe(true);
-    await vm.updatePreferences();
-    expect(vm.darkMode).toBe(true);
-  });
+    it('should toggle dark mode correctly and update preferences', async () => {
+        await vm.saveDarkMode(true);
+        expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
+        expect(vm.user.darkMode).toBe(true);
+        vm.updatePreferences();
+        expect(vm.darkMode).toBe(true);
+    });
 
-  it('should change user language and update preferences', async () => {
-    const userLanguage = 'es';
-    await vm.saveLanguage(userLanguage);
-    expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
-    expect(vm.user.lang).toBe(userLanguage);
-    await vm.updatePreferences();
-    expect(vm.locale).toBe(userLanguage);
-  });
+    it('should change user language and update preferences', async () => {
+        const userLanguage = 'es';
+        await vm.saveLanguage(userLanguage);
+        expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
+        expect(vm.user.lang).toBe(userLanguage);
+        vm.updatePreferences();
+        expect(vm.locale).toBe(userLanguage);
+    });
 
-  it('should update user data', async () => {
-    const key = 'name';
-    const value = 'itboss';
-    await vm.saveUserData(key, value);
-    expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', { [key]: value });
-  });
+    it('should update user data', async () => {
+        const key = 'name';
+        const value = 'itboss';
+        await vm.saveUserData(key, value);
+        expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', {
+            [key]: value,
+        });
+    });
 });

src/components/common/VnLog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
@@ -11,11 +11,11 @@ import { useCapitalize } from 'src/composables/useCapitalize';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnLogValue from './VnLogValue.vue';
+import FetchData from '../FetchData.vue';
+import VnSelect from './VnSelect.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 import VnPaginate from '../ui/VnPaginate.vue';
-import VnLogFilter from 'src/components/common/VnLogFilter.vue';
 import RightMenu from './RightMenu.vue';
-import { useFilterParams } from 'src/composables/useFilterParams';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -72,8 +72,39 @@ const filter = {
 };
 
 const paginate = ref();
-const dataKey = computed(() => `${props.model}Log`);
-const userParams = ref(useFilterParams(dataKey.value).params);
+const actions = ref();
+const changeInput = ref();
+const searchInput = ref();
+const userRadio = ref();
+const userSelect = ref();
+const dateFrom = ref();
+const dateFromDialog = ref(false);
+const dateTo = ref();
+const dateToDialog = ref(false);
+const selectedFilters = ref({});
+const userTypes = [
+    { label: 'All', value: undefined },
+    { label: 'User', value: { neq: null } },
+    { label: 'System', value: null },
+];
+const checkboxOptions = ref({
+    insert: {
+        label: 'Creates',
+        selected: false,
+    },
+    update: {
+        label: 'Edits',
+        selected: false,
+    },
+    delete: {
+        label: 'Deletes',
+        selected: false,
+    },
+    select: {
+        label: 'Accesses',
+        selected: false,
+    },
+});
 
 let validations = models;
 let pointRecord = ref(null);
@@ -215,54 +246,131 @@ async function setLogTree(data) {
 function filterByRecord(modelLog) {
     byRecord.value = true;
     const { id, model } = modelLog;
-    applyFilter({ changedModelId: id, changedModel: model });
+
+    searchInput.value = id;
+    selectedFilters.value.changedModelId = id;
+    selectedFilters.value.changedModel = model;
+    applyFilter();
 }
 
-async function applyFilter(params = {}) {
-    paginate.value.arrayData.applyFilter({
-        filter: {},
-        params: { originFk: route.params.id, ...params },
-    });
+async function applyFilter() {
+    filter.where = { and: [] };
+    if (
+        !selectedFilters.value.changedModel ||
+        (!selectedFilters.value.changedModelValue &&
+            !selectedFilters.value.changedModelId)
+    )
+        byRecord.value = false;
+
+    if (!byRecord.value) filter.where.and.push({ originFk: route.params.id });
+
+    if (Object.keys(selectedFilters.value).length) {
+        filter.where.and.push(selectedFilters.value);
+    }
+
+    paginate.value.fetch({ filter });
 }
 
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'changedModelValue':
-            return { [param]: { like: `%${value}%` } };
-        case 'change':
-            if (value)
-                return {
-                    or: [
-                        { oldJson: { like: `%${value}%` } },
-                        { newJson: { like: `%${value}%` } },
-                        { description: { like: `%${value}%` } },
-                    ],
-                };
-            break;
-        case 'action':
-            if (value?.length) return { [param]: { inq: value } };
-            break;
+function setDate(type) {
+    let from = dateFrom.value
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : undefined;
+    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
+
+    let to = dateTo.value
+        ? date.formatDate(dateTo.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD');
+    to = date.adjustDate(
+        to,
+        { hour: 21, minute: 59, second: 59, millisecond: 999 },
+        true,
+    );
+
+    switch (type) {
         case 'from':
-            return { creationDate: { gte: value } };
-        case 'to':
-            return { creationDate: { lte: value } };
-        case 'userType':
-            if (value === 'User') return { userFk: { neq: null } };
-            if (value === 'System') return { userFk: null };
-            break;
-        default:
-            return { [param]: value };
+            return { between: [from, to] };
+        case 'to': {
+            if (dateFrom.value) {
+                return {
+                    between: [from, to],
+                };
+            }
+            return { lte: to };
+        }
     }
 }
 
+function selectFilter(type, dateType) {
+    const filter = {};
+    const actions = { inq: [] };
+    let reload = true;
+
+    if (type === 'search') {
+        if (/^\s*[0-9]+\s*$/.test(searchInput.value) || props.byRecord) {
+            selectedFilters.value.changedModelId = searchInput.value.trim();
+        } else if (!searchInput.value) {
+            selectedFilters.value.changedModelId = undefined;
+            selectedFilters.value.changedModelValue = undefined;
+        } else {
+            selectedFilters.value.changedModelValue = { like: `%${searchInput.value}%` };
+        }
+    }
+    if (type === 'action' && selectedFilters.value.changedModel === null) {
+        selectedFilters.value.changedModel = undefined;
+    }
+    if (type === 'userRadio') {
+        selectedFilters.value.userFk = userRadio.value;
+    }
+    if (type === 'change') {
+        if (changeInput.value)
+            selectedFilters.value.or = [
+                { oldJson: { like: `%${changeInput.value}%` } },
+                { newJson: { like: `%${changeInput.value}%` } },
+                { description: { like: `%${changeInput.value}%` } },
+            ];
+        else selectedFilters.value.or = undefined;
+    }
+    if (type === 'userSelect') {
+        selectedFilters.value.userFk =
+            userSelect.value !== null ? userSelect.value : undefined;
+    }
+    if (type === 'date') {
+        if (!dateFrom.value && !dateTo.value) {
+            selectedFilters.value.creationDate = undefined;
+        } else if (dateType === 'to') {
+            selectedFilters.value.creationDate = setDate('to');
+        } else if (dateType === 'from') {
+            selectedFilters.value.creationDate = setDate('from');
+        }
+    }
+
+    Object.keys(checkboxOptions.value).forEach((key) => {
+        if (checkboxOptions.value[key].selected) actions.inq.push(key);
+    });
+    selectedFilters.value.action = actions.inq.length ? actions : undefined;
+
+    Object.keys(selectedFilters.value).forEach((key) => {
+        if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
+    });
+
+    if (reload) applyFilter(filter);
+}
+
 async function clearFilter() {
+    selectedFilters.value = {};
     byRecord.value = false;
+    userSelect.value = undefined;
+    searchInput.value = undefined;
+    changeInput.value = undefined;
+    dateFrom.value = undefined;
+    dateTo.value = undefined;
+    userRadio.value = undefined;
+    Object.keys(checkboxOptions.value).forEach(
+        (opt) => (checkboxOptions.value[opt].selected = false),
+    );
     await applyFilter();
 }
 
-onMounted(() => {
-    stateStore.rightDrawerChangeValue(true);
-});
 onUnmounted(() => {
     stateStore.rightDrawer = false;
 });
@@ -275,18 +383,32 @@ watch(
 );
 </script>
 <template>
+    <FetchData
+        :url="`${props.model}Logs/${route.params.id}/models`"
+        :filter="{ order: ['changedModel'] }"
+        @on-fetch="
+            (data) =>
+                (actions = data.map((item) => {
+                    const changedModel = item.changedModel;
+                    return {
+                        locale: useCapitalize(
+                            validations[changedModel]?.locale?.name ?? changedModel,
+                        ),
+                        value: changedModel,
+                    };
+                }))
+        "
+        auto-load
+    />
     <VnPaginate
         ref="paginate"
-        :data-key
-        :url="dataKey + 's'"
+        :data-key="`${model}Log`"
+        :url="`${model}Logs`"
         :user-filter="filter"
         :skeleton="false"
         auto-load
         @on-fetch="setLogTree"
-        @on-change="setLogTree"
         search-url="logs"
-        :exprBuilder
-        :order="['creationDate DESC', 'id DESC']"
     >
         <template #body>
             <div
@@ -345,7 +467,6 @@ watch(
                                             backgroundColor: useColor(modelLog.model),
                                         }"
                                         :title="`${modelLog.model} #${modelLog.id}`"
-                                        data-cy="vnLog-model-chip"
                                     >
                                         {{ t(modelLog.modelI18n) }}
                                     </QChip>
@@ -459,7 +580,6 @@ watch(
                                                             }`,
                                                         )
                                                     "
-                                                    data-cy="vnLog-action-icon"
                                                 />
                                             </div>
                                         </QItem>
@@ -577,12 +697,181 @@ watch(
     </VnPaginate>
     <RightMenu>
         <template #right-panel>
-            <VnLogFilter :data-key />
+            <QList dense>
+                <QSeparator />
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.search')"
+                        v-model="searchInput"
+                        class="full-width"
+                        clearable
+                        filled
+                        clear-icon="close"
+                        @keyup.enter="() => selectFilter('search')"
+                        @focusout="() => selectFilter('search')"
+                        @clear="() => selectFilter('search')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{ t('tooltips.search') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem>
+                    <VnSelect
+                        class="full-width"
+                        :label="t('globals.entity')"
+                        v-model="selectedFilters.changedModel"
+                        option-label="locale"
+                        option-value="value"
+                        filled
+                        :options="actions"
+                        @update:model-value="selectFilter('action')"
+                        hide-selected
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QOptionGroup
+                        size="sm"
+                        v-model="userRadio"
+                        :options="userTypes"
+                        color="primary"
+                        @update:model-value="selectFilter('userRadio')"
+                        right-label
+                    >
+                        <template #label="{ label }">
+                            {{ t(`Users.${label}`) }}
+                        </template>
+                    </QOptionGroup>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QItemSection v-if="userRadio !== null">
+                        <VnSelect
+                            class="full-width"
+                            :label="t('globals.user')"
+                            v-model="userSelect"
+                            filled
+                            :url="`${model}Logs/${route.params.id}/editors`"
+                            :fields="['id', 'nickname', 'name', 'image']"
+                            sort-by="nickname"
+                            @update:model-value="selectFilter('userSelect')"
+                            hide-selected
+                        >
+                            <template #option="{ opt, itemProps }">
+                                <QItem
+                                    v-bind="itemProps"
+                                    class="q-pa-xs row items-center"
+                                >
+                                    <QItemSection class="col-3 items-center">
+                                        <VnAvatar :worker-id="opt.id" />
+                                    </QItemSection>
+                                    <QItemSection class="col-9 justify-center">
+                                        <span>{{ opt.name }}</span>
+                                        <span class="text-grey">{{ opt.nickname }}</span>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        :label="t('globals.changes')"
+                        v-model="changeInput"
+                        class="full-width"
+                        filled
+                        clearable
+                        clear-icon="close"
+                        @keyup.enter="selectFilter('change')"
+                        @focusout="selectFilter('change')"
+                        @clear="selectFilter('change')"
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip max-width="250px">{{
+                                    t('tooltips.changes')
+                                }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </QItem>
+                <QItem
+                    :class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
+                    v-for="(checkboxOption, index) in checkboxOptions"
+                    :key="index"
+                >
+                    <QCheckbox
+                        size="sm"
+                        v-model="checkboxOption.selected"
+                        :label="t(`actions.${checkboxOption.label}`)"
+                        @update:model-value="selectFilter"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('globals.date')"
+                        @click="dateFromDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'to')"
+                        v-model="dateFrom"
+                        clearable
+                        filled
+                        clear-icon="close"
+                    />
+                </QItem>
+                <QItem class="q-mt-sm">
+                    <QInput
+                        class="full-width"
+                        :label="t('globals.to')"
+                        @click="dateToDialog = true"
+                        @focus="(evt) => evt.target.blur()"
+                        @clear="selectFilter('date', 'from')"
+                        v-model="dateTo"
+                        clearable
+                        filled
+                        clear-icon="close"
+                    />
+                </QItem>
+            </QList>
         </template>
     </RightMenu>
+    <QDialog v-model="dateFromDialog">
+        <QDate
+            :years-in-month-view="false"
+            v-model="dateFrom"
+            dense
+            flat
+            minimal
+            filled
+            @update:model-value="
+                (value) => {
+                    dateFromDialog = false;
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
+                    selectFilter('date', 'from');
+                }
+            "
+        />
+    </QDialog>
+    <QDialog v-model="dateToDialog">
+        <QDate
+            v-model="dateTo"
+            dense
+            flat
+            minimal
+            @update:model-value="
+                (value) => {
+                    dateToDialog = false;
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
+                    selectFilter('date', 'to');
+                }
+            "
+        />
+    </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn
-            v-if="Object.keys(userParams).some((filter) => filter !== 'originFk')"
+            v-if="Object.values(selectedFilters).some((filter) => filter !== undefined)"
             color="primary"
             icon="filter_alt_off"
             size="md"

src/components/common/VnLogFilter.vue

@@ -1,249 +1,77 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import VnTableFilter from '../VnTable/VnTableFilter.vue';
-import VnSelect from './VnSelect.vue';
-import { useRoute } from 'vue-router';
-import VnInput from './VnInput.vue';
-import { ref, computed, watch } from 'vue';
-import VnInputDate from './VnInputDate.vue';
-import { useFilterParams } from 'src/composables/useFilterParams';
-import FetchData from '../FetchData.vue';
-import { useValidator } from 'src/composables/useValidator';
-import { useCapitalize } from 'src/composables/useCapitalize';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
-const $props = defineProps({
+const { t } = useI18n();
+const props = defineProps({
     dataKey: {
         type: String,
-        default: null,
+        required: true,
     },
 });
 
-const { t } = useI18n();
-const route = useRoute();
-const validationsStore = useValidator();
-const { models } = validationsStore;
-const entities = ref([]);
-const editors = ref([]);
-const userParams = ref(useFilterParams($props.dataKey).params);
-let validations = models;
-const userTypes = [
-    { value: 'All', label: t(`Users.All`) },
-    { value: 'User', label: t(`Users.User`) },
-    { value: 'System', label: t(`Users.System`) },
-];
-const checkboxOptions = ref([
-    { name: 'insert', label: 'Creates', selected: false },
-    { name: 'update', label: 'Edits', selected: false },
-    { name: 'delete', label: 'Deletes', selected: false },
-    { name: 'select', label: 'Accesses', selected: false },
-]);
-const columns = computed(() => [
-    { name: 'changedModelValue' },
-    { name: 'changedModel' },
-    { name: 'userType', orderBy: false },
-    { name: 'userFk' },
-    { name: 'change', orderBy: false },
-    { name: 'action' },
-    { name: 'from', orderBy: 'creationDate' },
-    { name: 'to', orderBy: 'creationDate' },
-]);
-
-const userParamsWatcher = watch(
-    () => userParams.value,
-    (params) => {
-        if (params.action) {
-            params.action.forEach((option) => {
-                checkboxOptions.value.find((o) => o.name === option).selected = true;
-            });
-            userParamsWatcher();
-        }
-    },
-);
-
-function getActions() {
-    const actions = checkboxOptions.value
-        .filter((option) => option.selected)
-        ?.map((o) => o.name);
-    return actions.length ? actions : null;
-}
+const workers = ref();
 </script>
 
 <template>
     <FetchData
-        :url="`${dataKey}s/${route.params.id}/models`"
-        :filter="{ order: ['changedModel'] }"
-        @on-fetch="
-            (data) =>
-                (entities = data.map((item) => {
-                    const changedModel = item.changedModel;
-                    return {
-                        locale: useCapitalize(
-                            validations[changedModel]?.locale?.name ?? changedModel,
-                        ),
-                        value: changedModel,
-                    };
-                }))
-        "
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <FetchData
-        :url="`${dataKey}s/${route.params.id}/editors`"
-        :filter="{ fields: ['id', 'nickname', 'name', 'image'] }"
-        sort-by="nickname"
-        @on-fetch="(data) => (editors = data)"
-        auto-load
-    />
-    <VnTableFilter
-        v-if="dataKey"
-        :data-key
-        :columns="columns"
-        :redirect="false"
-        :hiddenTags="['originFk', 'creationDate']"
-        :exprBuilder
-        search-url="logs"
-        :showTagChips="false"
-    >
-        <template #filter-changedModelValue="{ params, columnName, searchFn }">
-            <VnInput
-                :label="t('globals.search')"
-                v-model="params[columnName]"
-                @keyup.enter="searchFn"
-                @blur="searchFn"
-                @remove="searchFn"
-                :info="t('tooltips.search')"
-                dense
-                filled
-                data-cy="vnLog-search"
-            />
-        </template>
-        <template #filter-changedModel="{ params, columnName, searchFn }">
-            <VnSelect
-                :label="t('globals.entity')"
-                v-model="params[columnName]"
-                option-label="locale"
-                option-value="value"
-                :options="entities"
-                @update:model-value="() => searchFn()"
-                dense
-                filled
-                data-cy="vnLog-entity"
-            />
-        </template>
-        <template #filter-userType="{ params, columnName, searchFn }">
-            <QOptionGroup
-                class="text-left"
-                size="sm"
-                v-model="params[columnName]"
-                :options="userTypes"
-                color="primary"
-                @update:model-value="
-                    () => {
-                        params.userFk = null;
-                        searchFn();
-                    }
-                "
-            />
-        </template>
-        <template #filter-userFk="{ params, columnName, searchFn }">
-            <VnSelect
-                :label="t('globals.user')"
-                v-model="params[columnName]"
-                :options="editors"
-                @update:modelValue="() => searchFn()"
-                :disable="params.userType === 'System'"
-                dense
-                filled
-            >
-                <template #option="{ opt, itemProps }">
-                    <QItem v-bind="itemProps" class="q-pa-xs row items-center">
-                        <QItemSection class="col-3 items-center">
-                            <VnAvatar :worker-id="opt.id" />
-                        </QItemSection>
-                        <QItemSection class="col-9 justify-center">
-                            <span>{{ opt.name }}</span>
-                            <span class="text-grey">{{ opt.nickname }}</span>
-                        </QItemSection>
-                    </QItem>
-                </template>
-            </VnSelect>
-        </template>
-        <template #filter-change="{ params, columnName, searchFn }">
-            <VnInput
-                :label="t('globals.changes')"
-                v-model="params[columnName]"
-                @keyup.enter="searchFn"
-                @blur="searchFn"
-                @remove="searchFn"
-                :info="t('tooltips.changes')"
-                dense
-                filled
-            />
-        </template>
-        <template #filter-action="{ searchFn }">
-            <div class="column">
-                <QCheckbox
-                    v-for="checkboxOption in checkboxOptions"
-                    :key="checkboxOption"
-                    size="sm"
-                    v-model="checkboxOption.selected"
-                    :label="t(`actions.${checkboxOption.label}`)"
-                    @update:model-value="
-                        () => searchFn(undefined, 'action', getActions())
-                    "
-                    data-cy="vnLog-checkbox"
-                />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #filter-from="{ params, columnName, searchFn }">
-            <VnInputDate
-                :label="t('globals.from')"
-                v-model="params[columnName]"
+        <template #body="{ params, searchFn }">
+            <QDate
+                v-model="params.created"
+                @update:model-value="searchFn()"
                 dense
-                filled
-                @update:modelValue="() => searchFn()"
-            />
+                flat
+                minimal
+            >
+            </QDate>
+            <QSeparator />
+            <QItem>
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <QSelect
+                        :label="t('User')"
+                        v-model="params.userFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
         </template>
-        <template #filter-to="{ params, columnName, searchFn }">
-            <VnInputDate
-                :label="t('globals.to')"
-                v-model="params[columnName]"
-                dense
-                filled
-                @update:modelValue="() => searchFn()"
-            />
-        </template>
-    </VnTableFilter>
+    </VnFilterPanel>
 </template>
-<i18n>
-es:
-    tooltips:
-        search: Buscar por identificador o concepto
-        changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
-    actions:
-        Creates: Crea
-        Edits: Modifica
-        Deletes: Elimina
-        Accesses: Accede
-    Users:
-        User: Usuario
-        All: Todo
-        System: Sistema
-    params:
-        changedModel: Entity
 
+<i18n>
 en:
-    tooltips:
-        search: Search by identifier or concept
-        changes: Search by changes. Attributes must be searched by their internal name, to get it place the cursor over the attribute.
-    actions:
-        Creates: Creates
-        Edits: Edits
-        Deletes: Deletes
-        Accesses: Accesses
-    Users:
-        User: User
-        All: All
-        System: System
     params:
-        changedModel: Entidad
+        search: Contains
+        userFk: User
+        created: Created
+es:
+    params:
+        search: Contiene
+        userFk: Usuario
+        created: Creada
+    User: Usuario
 </i18n>

src/components/common/__tests__/VnLog.spec.js

@@ -108,4 +108,27 @@ describe('VnLog', () => {
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
+
+    it('should correctly set the selectedFilters when filtering', () => {
+        vm.searchInput = '1';
+        vm.userSelect = '21';
+        vm.checkboxOptions.insert.selected = true;
+        vm.checkboxOptions.update.selected = true;
+
+        vm.selectFilter('search');
+        vm.selectFilter('userSelect');
+
+        expect(vm.selectedFilters.changedModelId).toEqual('1');
+        expect(vm.selectedFilters.userFk).toEqual('21');
+        expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
+    });
+
+    it('should correctly set the date from', () => {
+        vm.dateFrom = '18-09-2023';
+        vm.selectFilter('date', 'from');
+        expect(vm.selectedFilters.creationDate.between).toEqual([
+            new Date('2023-09-18T00:00:00.000Z'),
+            new Date('2023-09-18T21:59:59.999Z'),
+        ]);
+    });
 });

src/components/common/__tests__/VnLogFilter.spec.js

@@ -1,28 +0,0 @@
-import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper } from 'app/test/vitest/helper';
-import VnLogFilter from 'src/components/common/VnLogFilter.vue';
-
-describe('VnLogFilter', () => {
-    let vm;
-    beforeAll(async () => {
-        vm = createWrapper(VnLogFilter, {
-            props: {
-                dataKey: 'ClaimLog',
-            },
-        }).vm;
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it('should getActions selected', async () => {
-        vm.checkboxOptions.find((o) => o.name == 'insert').selected = true;
-        vm.checkboxOptions.find((o) => o.name == 'update').selected = true;
-
-        const actions = vm.getActions();
-
-        expect(actions.length).toEqual(2);
-        expect(actions).toEqual(['insert', 'update']);
-    });
-});

src/components/common/__tests__/VnNotes.spec.js

@@ -1,6 +1,16 @@
-import { describe, it, expect, vi, afterEach, beforeEach, afterAll } from 'vitest';
+import {
+    describe,
+    it,
+    expect,
+    vi,
+    beforeAll,
+    afterEach,
+    beforeEach,
+    afterAll,
+} from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import VnNotes from 'src/components/ui/VnNotes.vue';
+import vnDate from 'src/boot/vnDate';
 
 describe('VnNotes', () => {
     let vm;
@@ -8,7 +18,6 @@ describe('VnNotes', () => {
     let spyFetch;
     let postMock;
     let patchMock;
-    let deleteMock;
     let expectedInsertBody;
     let expectedUpdateBody;
     const defaultOptions = {
@@ -48,7 +57,6 @@ describe('VnNotes', () => {
     beforeEach(() => {
         postMock = vi.spyOn(axios, 'post');
         patchMock = vi.spyOn(axios, 'patch');
-        deleteMock = vi.spyOn(axios, 'delete');
     });
 
     afterEach(() => {
@@ -145,16 +153,4 @@ describe('VnNotes', () => {
             );
         });
     });
-
-    describe('delete', () => {
-        it('Should call axios.delete with url and vnPaginateRef.fetch', async () => {
-            generateWrapper();
-            createSpyFetch();
-
-            await vm.deleteNote({ id: 1 });
-
-            expect(deleteMock).toHaveBeenCalledWith(`${vm.$props.url}/1`);
-            expect(spyFetch).toHaveBeenCalled();
-        });
-    });
 });

src/components/ui/VnDescriptor.vue

@@ -6,6 +6,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useRoute, useRouter } from 'vue-router';
 import { useClipboard } from 'src/composables/useClipboard';
 import VnMoreOptions from './VnMoreOptions.vue';
+import { getValueFromPath } from 'src/composables/getValueFromPath';
 
 const entity = defineModel({ type: Object, default: null });
 const $props = defineProps({
@@ -56,18 +57,6 @@ const routeName = computed(() => {
     return `${routeName}Summary`;
 });
 
-function getValueFromPath(path) {
-    if (!path) return;
-    const keys = path.toString().split('.');
-    let current = entity.value;
-
-    for (const key of keys) {
-        if (current[key] === undefined) return undefined;
-        else current = current[key];
-    }
-    return current;
-}
-
 function copyIdText(id) {
     copyText(id, {
         component: {
@@ -170,10 +159,10 @@ const toModule = computed(() => {
                         <div class="title">
                             <span
                                 v-if="title"
-                                :title="getValueFromPath(title)"
+                                :title="getValueFromPath(entity, title)"
                                 :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_title`"
                             >
-                                {{ getValueFromPath(title) ?? title }}
+                                {{ getValueFromPath(entity, title) ?? title }}
                             </span>
                             <slot v-else name="description" :entity="entity">
                                 <span
@@ -189,7 +178,7 @@ const toModule = computed(() => {
                             class="subtitle"
                             :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_subtitle`"
                         >
-                            #{{ getValueFromPath(subtitle) ?? entity.id }}
+                            #{{ getValueFromPath(entity, subtitle) ?? entity.id }}
                         </QItemLabel>
                         <QBtn
                             round

src/components/ui/VnFilterPanel.vue

@@ -61,10 +61,6 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    showTagChips: {
-        type: Boolean,
-        default: true,
-    },
 });
 
 const emit = defineEmits([
@@ -92,14 +88,13 @@ const userOrders = ref(useFilterParams($props.dataKey).orders);
 defineExpose({ search, params: userParams, remove });
 
 const isLoading = ref(false);
-async function search(evt, name, value) {
+async function search(evt) {
     try {
         if (evt && $props.disableSubmitEvent) return;
 
         store.filter.where = {};
         isLoading.value = true;
         const filter = { ...userParams.value, ...$props.modelValue };
-        if (name) filter[name] = value;
         store.userParamsChanged = true;
         await arrayData.addFilter({
             params: filter,
@@ -219,7 +214,7 @@ const getLocale = (label) => {
         </QTooltip>
     </QBtn>
     <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
-        <QList dense v-if="showTagChips">
+        <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>
                     <QItemLabel header lines="1" class="text-uppercase q-py-xs q-px-none">

src/components/ui/VnNotes.vue

@@ -18,10 +18,10 @@ import VnInput from 'components/common/VnInput.vue';
 
 const emit = defineEmits(['onFetch']);
 
-const originalAttrs = useAttrs();
-const $attrs = computed(() => {
-    const { required, deletable, ...rest } = originalAttrs;
-    return rest;
+const $attrs = useAttrs();
+
+const isRequired = computed(() => {
+    return Object.keys($attrs).includes('required');
 });
 
 const $props = defineProps({
@@ -53,11 +53,6 @@ function handleClick(e) {
     else insert();
 }
 
-async function deleteNote(e) {
-    await axios.delete(`${$props.url}/${e.id}`);
-    await vnPaginateRef.value.fetch();
-}
-
 async function insert() {
     if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
 
@@ -162,7 +157,7 @@ const handleObservationTypes = (data) => {
                     v-model="newNote.observationTypeFk"
                     option-label="description"
                     style="flex: 0.15"
-                    :required="'required' in originalAttrs"
+                    :required="isRequired"
                     @keyup.enter.stop="insert"
                 />
                 <VnInput
@@ -170,10 +165,11 @@ const handleObservationTypes = (data) => {
                     type="textarea"
                     :label="$props.justInput && newNote.text ? '' : t('Add note here...')"
                     filled
+                    size="lg"
                     autogrow
                     autofocus
                     @keyup.enter.stop="handleClick"
-                    :required="'required' in originalAttrs"
+                    :required="isRequired"
                     clearable
                 >
                     <template #append>
@@ -243,21 +239,6 @@ const handleObservationTypes = (data) => {
                                 </QBadge>
                             </div>
                             <span v-text="toDateHourMin(note.created)" />
-                            <div>
-                                <QIcon
-                                    v-if="'deletable' in originalAttrs"
-                                    name="delete"
-                                    size="sm"
-                                    class="cursor-pointer"
-                                    color="primary"
-                                    @click="deleteNote(note)"
-                                    data-cy="notesRemoveNoteBtn"
-                                >
-                                    <QTooltip>
-                                        {{ t('ticketNotes.removeNote') }}
-                                    </QTooltip>
-                                </QIcon>
-                            </div>
                         </div>
                     </QCardSection>
                     <QCardSection class="q-pa-xs q-my-none q-py-none">

src/components/ui/VnPaginate.vue

@@ -215,7 +215,6 @@ defineExpose({
     paginate,
     userParams: arrayData.store.userParams,
     currentFilter: arrayData.store.currentFilter,
-    arrayData,
 });
 </script>
 

src/composables/getValueFromPath.js

@@ -0,0 +1,11 @@
+export function getValueFromPath(root, path) {
+    if (!root || !path) return;
+    const keys = path.toString().split('.');
+    let current = root;
+
+    for (const key of keys) {
+        if (current[key] === undefined) return undefined;
+        else current = current[key];
+    }
+    return current;
+}

src/composables/useArrayData.js

@@ -189,7 +189,7 @@ export function useArrayData(key, userOptions) {
 
         store.order = order;
         resetPagination();
-        await fetch({});
+        fetch({});
         index++;
 
         return { index, order };

src/composables/useFilterParams.js

@@ -14,7 +14,7 @@ export function useFilterParams(key) {
     watch(
         () => arrayData.value.store?.currentFilter,
         (val, oldValue) => (val || oldValue) && setUserParams(val),
-        { immediate: true, deep: true },
+        { immediate: true, deep: true }
     );
 
     function parseOrder(urlOrders) {
@@ -54,7 +54,7 @@ export function useFilterParams(key) {
                     Object.assign(params, item);
                 });
                 delete params[key];
-            } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+            } else if (value && typeof value === 'object') {
                 const param = Object.values(value)[0];
                 if (typeof param == 'string') params[key] = param.replaceAll('%', '');
             }

src/i18n/locale/en.yml

@@ -370,11 +370,6 @@ globals:
         countryCodeFk: Country
         companyFk: Company
         nickname: Alias
-        changedModel: Entity
-        changedModelValue: Search
-        changedModelId: Entity id
-        userFk: User
-        action: Action
     model: Model
     fuel: Fuel
     active: Active

src/i18n/locale/es.yml

@@ -371,11 +371,6 @@ globals:
         countryCodeFk: País
         companyFk: Empresa
         nickname: Alias
-        changedModel: Entidad
-        changedModelValue: Buscar
-        changedModelId: Id de entidad
-        userFk: Usuario
-        action: Acción
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/Claim/ClaimList.vue

@@ -134,7 +134,7 @@ const columns = computed(() => [
 
 const STATE_COLOR = {
     pending: 'bg-warning',
-    loses: 'bg-negative',
+    managed: 'bg-info',
     resolved: 'bg-positive',
 };
 </script>

src/pages/Customer/Card/CustomerBalance.vue

@@ -20,7 +20,6 @@ import VnFilter from 'components/VnTable/VnFilter.vue';
 
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { openConfirmationModal } = useVnConfirm();
 const { sendEmail, openReport } = usePrintService();
@@ -90,7 +89,15 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('Employee'),
-        name: 'workerFk',
+        columnField: {
+            component: 'userLink',
+            attrs: ({ row }) => {
+                return {
+                    workerId: row.workerFk,
+                    name: row.userName,
+                };
+            },
+        },
         cardVisible: true,
     },
     {
@@ -124,6 +131,7 @@ const columns = computed(() => [
         align: 'left',
         name: 'balance',
         label: t('Balance'),
+        format: ({ balance }) => toCurrency(balance),
         cardVisible: true,
     },
     {
@@ -138,14 +146,12 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('globals.downloadPdf'),
-                isPrimary: true,
                 icon: 'cloud_download',
                 show: (row) => row.isInvoice,
                 action: (row) => showBalancePdf(row),
             },
             {
                 title: t('Send compensation'),
-                isPrimary: true,
                 icon: 'outgoing_mail',
                 show: (row) => !!row.isCompensation,
                 action: ({ id }) =>
@@ -250,12 +256,6 @@ const showBalancePdf = ({ id }) => {
         <template #column-balance="{ rowIndex }">
             {{ toCurrency(balances[rowIndex]?.balance) }}
         </template>
-        <template #column-workerFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row.userName }}
-                <WorkerDescriptorProxy :id="row.workerFk" />
-            </span>
-        </template>
         <template #column-description="{ row }">
             <span class="link" v-if="row.isInvoice" @click.stop>
                 {{ t('bill', { ref: row.description }) }}

src/pages/Customer/components/CustomerNewPayment.vue

@@ -3,20 +3,18 @@ import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { useDialogPluginComponent } from 'quasar';
-
 import { getClientRisk } from '../composables/getClientRisk';
+import { useDialogPluginComponent } from 'quasar';
+import FormModelPopup from 'components/FormModelPopup.vue';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
-
-import FormModelPopup from 'components/FormModelPopup.vue';
 import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputNumber from 'components/common/VnInputNumber.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -50,7 +48,7 @@ const maxAmount = ref();
 const accountingType = ref({});
 const isCash = ref(false);
 const formModelRef = ref(false);
-const amountToReturn = ref();
+
 const filterBanks = {
     fields: ['id', 'bank', 'accountingTypeFk'],
     include: { relation: 'accountingType' },
@@ -92,7 +90,7 @@ function setPaymentType(data, accounting) {
     let descriptions = [];
     if (accountingType.value.receiptDescription)
         descriptions.push(accountingType.value.receiptDescription);
-    if (data.description > 0) descriptions.push(data.description);
+    if (data.description) descriptions.push(data.description);
     data.description = descriptions.join(', ');
 }
 
@@ -102,7 +100,7 @@ const calculateFromAmount = (event) => {
 };
 
 const calculateFromDeliveredAmount = (event) => {
-    amountToReturn.value = event - initialData.amountPaid;
+    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
 };
 
 function onBeforeSave(data) {
@@ -123,16 +121,17 @@ async function onDataSaved(formData, { id }) {
                 recipient: formData.email,
             });
 
-        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`, {}, '_blank');
+        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`);
     } finally {
         if ($props.promise) $props.promise();
         if (closeButton.value) closeButton.value.click();
     }
 }
 
-async function getSupplierClientReferences(value) {
+async function accountShortToStandard({ target: { value } }) {
     if (!value) return (initialData.description = '');
-    const params = { bankAccount: value };
+    initialData.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    const params = { bankAccount: initialData.compensationAccount };
     const { data } = await axios(`Clients/getClientOrSupplierReference`, { params });
     if (!data.clientId) {
         initialData.description = t('Supplier Compensation Reference', {
@@ -242,16 +241,17 @@ async function getAmountPaid() {
                         @update:model-value="getAmountPaid()"
                     />
                 </VnRow>
-                <div v-if="accountingType.code == 'compensation'">
+
+                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
                     <div class="text-h6">
                         {{ t('Compensation') }}
                     </div>
                     <VnRow>
-                        <VnAccountNumber
+                        <VnInputNumber
                             :label="t('Compensation account')"
                             clearable
                             v-model="data.compensationAccount"
-                            @blur="getSupplierClientReferences(data.compensationAccount)"
+                            @blur="accountShortToStandard"
                         />
                     </VnRow>
                 </div>
@@ -261,7 +261,8 @@ async function getAmountPaid() {
                     clearable
                     v-model="data.description"
                 />
-                <div v-if="accountingType.code == 'cash'">
+
+                <div v-if="data.bankFk?.accountingType?.code == 'cash'">
                     <div class="text-h6">{{ t('Cash') }}</div>
                     <VnRow>
                         <VnInputNumber
@@ -273,7 +274,7 @@ async function getAmountPaid() {
                         <VnInputNumber
                             :label="t('Amount to return')"
                             disable
-                            v-model="amountToReturn"
+                            v-model="data.amountToReturn"
                         />
                     </VnRow>
                     <VnRow>

src/pages/Route/RouteRoadmap.vue

@@ -213,7 +213,7 @@ function exprBuilder(param, value) {
         }"
     >
         <template #advanced-menu>
-            <RoadmapFilter :data-key />
+            <RoadmapFilter :dataKey />
         </template>
         <template #body>
             <VnTable

src/pages/Route/Vehicle/Card/VehicleNotes.vue

@@ -1,35 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
-import VnNotes from 'src/components/ui/VnNotes.vue';
-
-const route = useRoute();
-const state = useState();
-const user = state.getUser();
-const vehicleId = computed(() => route.params.id);
-
-const noteFilter = computed(() => {
-    return {
-        order: 'created DESC',
-        where: { vehicleFk: vehicleId.value },
-    };
-});
-
-const body = {
-    vehicleFk: vehicleId.value,
-    workerFk: user.value.id,
-};
-</script>
-
-<template>
-    <VnNotes
-        url="vehicleObservations"
-        :add-note="true"
-        :filter="noteFilter"
-        :body="body"
-        style="overflow-y: auto"
-        required
-        deletable
-    />
-</template>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -46,7 +46,7 @@ async function getClaims() {
     originalTicket.value = data[0]?.originalTicketFk;
 }
 async function getProblems() {
-    const { data } = await axios.get(`Tickets/${entityId.value}/getTicketProblems`);
+    const { data } = await axios.get(`Tickets/getTicketProblems`, {params: { ids: [entityId.value] }});
     if (!data) return;
     problems.value = data[0];
 }

src/pages/Ticket/Card/TicketSale.vue

@@ -377,12 +377,10 @@ const newOrderFromTicket = async () => {
 const goToLog = (saleId) => {
     router.push({
         name: 'TicketLog',
-        query: {
-            logs: JSON.stringify({
-                originFk: route.params.id,
-                changedModel: 'Sale',
-                changedModelId: saleId,
-            }),
+        params: {
+            originId: route.params.id,
+            changedModel: 'Sale',
+            changedModelId: saleId,
         },
     });
 };

src/pages/Ticket/TicketAdvance.vue

@@ -14,6 +14,8 @@ import { useState } from 'src/composables/useState';
 import { toDateFormat } from 'src/filters/date.js';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import { QTable } from 'quasar';
+import TicketProblems from 'src/components/TicketProblems.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -27,6 +29,16 @@ const selectedTickets = ref([]);
 const vnTableRef = ref({});
 const originElRef = ref(null);
 const destinationElRef = ref(null);
+const actions = {
+    advance: {
+        title: t('advanceTickets.advanceTickets'),
+        cb: moveTicketsAdvance,
+    },
+    advanceWithoutNegative: {
+        title: t('advanceTickets.advanceTicketsWithoutNegatives'),
+        cb: splitTickets,
+    },
+};
 let today = Date.vnNew().toISOString();
 const tomorrow = new Date(today);
 tomorrow.setDate(tomorrow.getDate() + 1);
@@ -78,6 +90,15 @@ const ticketColumns = computed(() => [
         headerClass: 'horizontal-separator',
         hidden: true,
     },
+    {
+        label: t('globals.agency'),
+        name: 'agency',
+        field: 'agency',
+        align: 'left',
+        sortable: true,
+        headerClass: 'horizontal-separator',
+        columnFilter: false,
+    },
     {
         label: t('advanceTickets.preparation'),
         name: 'preparation',
@@ -85,7 +106,6 @@ const ticketColumns = computed(() => [
         align: 'left',
         sortable: true,
         headerClass: 'horizontal-separator',
-        columnFilter: false,
     },
     {
         align: 'left',
@@ -110,10 +130,17 @@ const ticketColumns = computed(() => [
     },
     {
         align: 'left',
-        label: t('advanceTickets.futureId'),
-        name: 'futureId',
+        label: '',
+        name: 'problems',
         headerClass: 'vertical-separator horizontal-separator',
         columnClass: 'vertical-separator',
+        hidden: true,
+    },
+    {
+        align: 'left',
+        label: t('advanceTickets.futureId'),
+        name: 'futureId',
+        headerClass: 'horizontal-separator',
     },
     {
         align: 'left',
@@ -242,7 +269,7 @@ const requestComponentUpdate = async (ticket, isWithoutNegatives) => {
     return { query, params };
 };
 
-const moveTicketsAdvance = async () => {
+async function moveTicketsAdvance() {
     let ticketsToMove = [];
     for (const ticket of selectedTickets.value) {
         if (!ticket.id) {
@@ -267,7 +294,7 @@ const moveTicketsAdvance = async () => {
     vnTableRef.value.reload();
     selectedTickets.value = [];
     if (ticketsToMove.length) notify(t('advanceTickets.moveTicketSuccess'), 'positive');
-};
+}
 
 const progressLength = ref(0);
 const progressPercentage = computed(() => {
@@ -290,7 +317,7 @@ const progressAdd = () => {
     }
 };
 
-const splitTickets = async () => {
+async function splitTickets() {
     try {
         showProgressDialog.value = true;
         for (const ticket of selectedTickets.value) {
@@ -310,7 +337,7 @@ const splitTickets = async () => {
     } finally {
         vnTableRef.value.reload();
     }
-};
+}
 
 const resetProgressData = () => {
     if (cancelProgress.value) cancelProgress.value = false;
@@ -326,6 +353,32 @@ const handleCloseProgressDialog = () => {
 
 const handleCancelProgress = () => (cancelProgress.value = true);
 
+const confirmAction = (action) => {
+    openConfirmationModal(actions[action].title, false, actions[action].cb, null, {
+        component: QTable,
+        props: {
+            columns: [
+                {
+                    align: 'left',
+                    label: t('advanceTickets.destination'),
+                    name: 'id',
+                    field: (row) => row.id,
+                },
+                {
+                    align: 'left',
+                    label: t('advanceTickets.origin'),
+                    name: 'futureId',
+                    field: (row) => row.futureId,
+                },
+            ],
+            rows: selectedTickets.value,
+            class: 'full-width',
+            dense: true,
+            flat: true,
+        },
+    });
+};
+
 watch(
     () => vnTableRef.value.tableRef?.$el,
     ($el) => {
@@ -399,15 +452,7 @@ watch(
                 color="primary"
                 class="q-mr-sm"
                 :disable="!selectedTickets.length"
-                @click.stop="
-                    openConfirmationModal(
-                        t('advanceTickets.advanceTicketTitle'),
-                        t(`advanceTickets.advanceTitleSubtitle`, {
-                            selectedTickets: selectedTickets.length,
-                        }),
-                        moveTicketsAdvance,
-                    )
-                "
+                @click.stop="confirmAction('advance')"
             >
                 <QTooltip>
                     {{ t('advanceTickets.advanceTickets') }}
@@ -417,15 +462,7 @@ watch(
                 icon="alt_route"
                 color="primary"
                 :disable="!selectedTickets.length"
-                @click.stop="
-                    openConfirmationModal(
-                        t('advanceTickets.advanceWithoutNegativeTitle'),
-                        t(`advanceTickets.advanceWithoutNegativeSubtitle`, {
-                            selectedTickets: selectedTickets.length,
-                        }),
-                        splitTickets,
-                    )
-                "
+                @click.stop="confirmAction('advanceWithoutNegative')"
             >
                 <QTooltip>
                     {{ t('advanceTickets.advanceTicketsWithoutNegatives') }}
@@ -454,7 +491,7 @@ watch(
             }"
             v-model:selected="selectedTickets"
             :pagination="{ rowsPerPage: 0 }"
-            :no-data-label="t('globals.noResults')"
+            :no-data-label="$t('globals.noResults')"
             :right-search="false"
             :order="['futureTotalWithVat ASC']"
             auto-load
@@ -522,6 +559,9 @@ watch(
                     {{ toCurrency(row.totalWithVat || 0) }}
                 </QBadge>
             </template>
+            <template #column-problems="{ row }">
+                <TicketProblems :row="row.problems" :visible-problems="['hasRisk']" />
+            </template>
             <template #column-futureId="{ row }">
                 <QBtn flat class="link" dense>
                     {{ row.futureId }}

src/pages/Ticket/TicketAdvanceFilter.vue

@@ -10,7 +10,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import axios from 'axios';
 import { onMounted } from 'vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
-
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 const { t, te } = useI18n();
 const props = defineProps({
     dataKey: {
@@ -122,18 +122,20 @@ onMounted(async () => await getItemPackingTypes());
                 <QItemSection>
                     <VnInputNumber
                         v-model="params.scopeDays"
-                        :label="t('Days onward')"
+                        :label="t('globals.daysOnward')"
                         filled
+                        :step="0"
                     />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <QCheckbox
+                    <VnCheckbox
                         :label="t('params.isFullMovable')"
                         v-model="params.isFullMovable"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
+                        dense
                     />
                 </QItemSection>
             </QItem>
@@ -166,11 +168,12 @@ onMounted(async () => await getItemPackingTypes());
             </QItem>
             <QItem>
                 <QItemSection>
-                    <QCheckbox
+                    <VnCheckbox
                         toggle-indeterminate
-                        label="only with destination"
+                        :label="t('params.onlyWithDestination')"
                         v-model="params.onlyWithDestination"
                         @update:model-value="searchFn()"
+                        dense
                     />
                 </QItemSection>
             </QItem>
@@ -194,8 +197,8 @@ es:
     Vertical: Vertical
     iptInfo: Encajado
     params:
-        dateFuture: fecha origen
-        dateToAdvance: Fecha destino
+        dateFuture: F. origen
+        dateToAdvance: F. destino
         futureIpt: IPT Origen
         ipt: IPT destino
         isFullMovable: 100% movible

src/pages/Travel/ExtraCommunity.vue

@@ -182,6 +182,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: false,
         sortable: true,
+        style: 'min-width: 170px;',
     },
     {
         label: t('globals.packages'),
@@ -505,7 +506,6 @@ watch(route, () => {
                         :props="props"
                         @click="stopEventPropagation($event, col)"
                         :style="col.style"
-                        style="padding-left: 5px"
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
@@ -629,11 +629,7 @@ watch(route, () => {
 }
 
 :deep(.q-table) {
-    table-layout: auto;
-    width: 100%;
     border-collapse: collapse;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
     tbody tr td {
         &:nth-child(1) {

src/router/modules/route.js

@@ -166,7 +166,7 @@ const vehicleCard = {
     component: () => import('src/pages/Route/Vehicle/Card/VehicleCard.vue'),
     redirect: { name: 'VehicleSummary' },
     meta: {
-        menu: ['VehicleBasicData', 'VehicleNotes'],
+        menu: ['VehicleBasicData'],
     },
     children: [
         {
@@ -187,15 +187,6 @@ const vehicleCard = {
             },
             component: () => import('src/pages/Route/Vehicle/Card/VehicleBasicData.vue'),
         },
-        {
-            name: 'VehicleNotes',
-            path: 'notes',
-            meta: {
-                title: 'notes',
-                icon: 'vn:notes',
-            },
-            component: () => import('src/pages/Route/Vehicle/Card/VehicleNotes.vue'),
-        }
     ],
 };
 

test/cypress/integration/route/vehicle/vehicleNotes.spec.js

@@ -1,28 +0,0 @@
-describe('Vehicle Notes', () => {
-    const selectors = {
-        addNoteInput: 'Add note here..._input',
-        saveNoteBtn: 'saveNote',
-        deleteNoteBtn: 'notesRemoveNoteBtn',
-        noteCard: '.column.full-width > :nth-child(1) > .q-card__section--vert',
-    };
-
-    const noteText = 'Golpe parachoques trasero';
-    const newNoteText = 'probando';
-
-    beforeEach(() => {
-        cy.viewport(1920, 1080);
-        cy.login('developer');
-        cy.visit(`/#/route/vehicle/1/notes`);
-    });
-
-    it('Should add new note', () => {
-        cy.dataCy(selectors.addNoteInput).should('be.visible').type(newNoteText);
-        cy.dataCy(selectors.saveNoteBtn).click();
-        cy.validateContent(selectors.noteCard, newNoteText);
-    });
-
-    it('Should delete note', () => {
-        cy.dataCy(selectors.deleteNoteBtn).first().should('be.visible').click();
-        cy.get(selectors.noteCard).first().should('have.text', noteText);
-    });
-});

test/cypress/integration/vnComponent/VnLog.spec.js

@@ -1,23 +1,26 @@
 /// <reference types="cypress" />
 describe('VnLog', () => {
+    const chips = [
+        ':nth-child(1) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+        ':nth-child(2) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+    ];
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
+        cy.openRightMenu();
     });
 
     it('should filter by insert actions', () => {
-        cy.get('[data-cy="vnLog-checkbox"]').eq(0).click();
-        cy.get('[data-cy="vnLog-action-icon"]').each(($el) => {
-            cy.wrap($el).should('have.attr', 'title', 'Creates');
-        });
+        cy.checkOption(':nth-child(7) > .q-checkbox');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Document');
+        cy.validateContent(chips[1], 'Beginning');
     });
 
     it('should filter by entity', () => {
-        const entity = 'Document';
-        cy.selectOption('[data-cy="vnLog-entity"]', entity);
-        cy.get('[data-cy="vnLog-model-chip"]').each(($el) => {
-            cy.wrap($el).should('have.text', entity);
-        });
+        cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Beginning');
     });
 
     it('should show claimDescriptor', () => {