wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge branch '6825-vnTable' of https://gitea.verdnatura.es/verdnatura/salix-front into 6553-workerBusiness

This commit is contained in:
Carlos Satorres 2024-06-20 13:57:59 +02:00
parent 9c5620f340 e8296d0edd
commit 0e7abe5fa4
12 changed files with 117 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/VnTable/VnChip.vue
View File

@ -16,10 +16,11 @@ function stopEventPropagation(event) {
}
</script>
<template>
<slot name="beforeChip" :row="row"></slot>
<span
v-for="col of columns"
:key="col.name"
@click="stopEventPropagation($event)"
@click="stopEventPropagation"
class="cursor-text"
>
<QChip

4
src/components/VnTable/VnColumn.vue
View File

@ -9,7 +9,7 @@ import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnComponent from 'components/common/VnComponent.vue';
const model = defineModel();
const model = defineModel(undefined, { required: true });
const $props = defineProps({
column: {
type: Object,
@ -17,7 +17,7 @@ const $props = defineProps({
},
row: {
type: Object,
required: true,
default: () => {},
},
default: {
type: [Object, String],

75
src/components/VnTable/VnFilter.vue
View File

@ -27,7 +27,7 @@ const $props = defineProps({
default: 'params',
},
});
const model = defineModel();
const model = defineModel(undefined, { required: true });
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
const columnFilter = computed(() => $props.column?.columnFilter);
@ -36,45 +36,44 @@ const enterEvent = {
'keyup.enter': () => addFilter(model.value),
remove: () => addFilter(null),
};
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-sm q-pb-xs q-pt-none',
dense: true,
};
const forceAttrs = {
label: $props.showTitle ? '' : $props.column.label,
};
const components = {
input: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none',
dense: true,
filled: !$props.showTitle,
...defaultAttrs,
clearable: true,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
number: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
dense: true,
class: 'q-px-sm q-pb-xs q-pt-none',
...defaultAttrs,
clearable: true,
filled: !$props.showTitle,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
date: {
component: markRaw(VnInputDate),
event: updateEvent,
attrs: {
dense: true,
class: 'q-px-sm q-pb-xs q-pt-none',
filled: !$props.showTitle,
...defaultAttrs,
style: 'min-width: 150px',
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
checkbox: {
component: markRaw(QCheckbox),
@ -84,9 +83,7 @@ const components = {
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
'toggle-indeterminate': true,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
select: {
component: markRaw(VnSelect),
@ -96,9 +93,7 @@ const components = {
dense: true,
filled: !$props.showTitle,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
};
@ -116,32 +111,36 @@ async function addFilter(value) {
}
function alignRow() {
if ($props.column.align == 'left') return 'justify-start items-start';
if ($props.column.align == 'right') return 'justify-end items-end';
return 'flex-center';
switch ($props.column.align) {
case 'left':
return 'justify-start items-start';
case 'right':
return 'justify-end items-end';
default:
return 'flex-center';
}
}
const showFilter = computed(
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
);
</script>
<template>
<div
v-if="showTitle && column"
v-if="showTitle"
class="q-pt-sm q-px-sm ellipsis"
:class="`text-${column.align ?? 'left'}`"
:class="`text-${column?.align ?? 'left'}`"
:style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
>
{{ column.label }}
{{ column?.label }}
</div>
<div
v-if="columnFilter !== false && column.name != 'tableActions'"
class="full-width"
:class="alignRow()"
>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<VnTableColumn
:column="$props.column"
:row="{}"
default="input"
v-model="model"
:components="components"
component-prop="columnFilter"
/>
</div>
<div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
</template>

25
src/components/VnTable/VnTable.vue
View File

@ -66,7 +66,9 @@ const route = useRoute();
const router = useRouter();
const quasar = useQuasar();
const mode = ref('card');
const DEFAULT_MODE = 'card';
const TABLE_MODE = 'table';
const mode = ref(DEFAULT_MODE);
const selected = ref([]);
const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
@ -77,17 +79,17 @@ const tableModes = [
{
icon: 'view_column',
title: t('table view'),
value: 'table',
value: TABLE_MODE,
},
{
icon: 'grid_view',
title: t('grid view'),
value: 'card',
value: DEFAULT_MODE,
},
];
onMounted(() => {
mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
stateStore.rightDrawer = true;
setUserParams(route.query[$props.searchUrl]);
});
@ -172,6 +174,9 @@ function columnName(col) {
return name;
}
function getColAlign(col) {
return 'text-' + (col.align ?? 'left')
}
defineExpose({
reload,
redirect: redirectFn,
@ -218,7 +223,7 @@ defineExpose({
:limit="20"
ref="CrudModelRef"
:search-url="searchUrl"
:disable-infinite-scroll="mode == 'table'"
:disable-infinite-scroll="mode == TABLE_MODE"
@save-changes="reload"
:has-subtoolbar="isEditable"
>
@ -229,11 +234,11 @@ defineExpose({
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="mode != 'table'"
:grid="mode != TABLE_MODE"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="mode == 'table' && 'max-height: 90vh'"
:style="mode == TABLE_MODE && 'max-height: 90vh'"
virtual-scroll
@virtual-scroll="
(event) =>
@ -287,7 +292,7 @@ defineExpose({
<QTh auto-width class="sticky" />
</template>
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
<QTd auto-width :class="getColAlign(col)">
<VnTableChip
:columns="splittedColumns.columnChips"
:row="row"
@ -303,7 +308,7 @@ defineExpose({
<QTd
auto-width
class="no-margin q-px-xs"
:class="`text-${col.align ?? 'left'}`"
:class="getColAlign(col)"
>
<VnTableColumn
:column="col"
@ -317,7 +322,7 @@ defineExpose({
<template #body-cell-tableActions="{ col, row }">
<QTd
auto-width
:class="`text-${col.align ?? 'left'}`"
:class="getColAlign(col)"
class="sticky no-padding"
@click="stopEventPropagation($event)"
>

9
src/components/common/VnCard.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { onBeforeMount, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
@ -32,10 +32,15 @@ const url = computed(() => {
return props.customUrl;
});
useArrayData(props.dataKey, {
const arrayData = useArrayData(props.dataKey, {
url: url.value,
filter: props.filter,
});
onBeforeMount(async () => {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false });
});
</script>
<template>
<QDrawer

2
src/components/common/VnComponent.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { computed, defineModel } from 'vue';
const model = defineModel();
const model = defineModel(undefined, { required: true });
const $props = defineProps({
prop: {
type: Object,

2
src/pages/Customer/Card/CustomerCard.vue
View File

@ -10,7 +10,7 @@ import CustomerFilter from '../CustomerFilter.vue';
:descriptor="CustomerDescriptor"
:filter-panel="CustomerFilter"
search-data-key="CustomerList"
search-url="Clients/filter"
search-url="Clients/extendedListFilter"
searchbar-label="Search customer"
searchbar-info="You can search by customer id or name"
/>

2
src/pages/Customer/CustomerFilter.vue
View File

@ -29,7 +29,7 @@ const zones = ref();
@on-fetch="(data) => (workers = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>

8
src/pages/Customer/CustomerList.vue
View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CustomerSummary from './Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@ -382,9 +383,14 @@ function handleLocation(data, location) {
</script>
<template>
<VnSearchbar
:info="t('You can search by customer id or name')"
:label="t('Search customer')"
data-key="Customer"
/>
<VnTable
ref="tableRef"
data-key="CustomerExtendedList"
data-key="Customer"
url="Clients/extendedListFilter"
:create="{
urlCreate: 'Clients/createWithUser',

3
src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
View File

@ -10,8 +10,10 @@ import FetchData from 'src/components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnCurrency from 'src/components/common/VnCurrency.vue';
import { toCurrency } from 'src/filters';
import useNotify from 'src/composables/useNotify.js';
const route = useRoute();
const { notify } = useNotify();
const { t } = useI18n();
const arrayData = useArrayData();
const invoiceIn = computed(() => arrayData.store.data);
@ -69,6 +71,7 @@ const isNotEuro = (code) => code != 'EUR';
async function insert() {
await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
await invoiceInFormRef.value.reload();
notify(t('globals.dataSaved'), 'positive');
}
const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount, 0);
</script>

2
test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
View File

@ -22,7 +22,7 @@ describe('InvoiceInDueDay', () => {
cy.waitForElement('thead');
cy.get(addBtn).click();
cy.saveCard();
cy.get('tbody > :nth-child(1)').should('exist');
cy.get('.q-notification__message').should('have.text', 'Data saved');
});
});

63
test/vitest/__tests__/composables/useArrayData.spec.js
View File

@ -1,10 +1,13 @@
import { describe, expect, it, beforeAll, afterEach, vi } from 'vitest';
import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
import { axios, flushPromises } from 'app/test/vitest/helper';
import { useArrayData } from 'composables/useArrayData';
import { useRouter } from 'vue-router';
import * as vueRouter from 'vue-router';
describe('useArrayData', () => {
beforeAll(() => {
const filter = '{"order":"","limit":10,"skip":0}';
const params = { supplierFk: 2 };
beforeEach(() => {
vi.spyOn(useRouter(), 'replace');
vi.spyOn(useRouter(), 'push');
});
@ -18,8 +21,6 @@ describe('useArrayData', () => {
const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
const filter = '{"order":"","limit":10,"skip":0}';
const params = { supplierFk: 2 };
arrayData.store.userParams = params;
arrayData.fetch({});
@ -41,8 +42,6 @@ describe('useArrayData', () => {
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
const filter = '{"order":"","limit":10,"skip":0}';
const params = { supplierFk: 2 };
arrayData.store.userParams = params;
arrayData.fetch({});
@ -57,25 +56,43 @@ describe('useArrayData', () => {
expect(routerPush.query).toBeUndefined();
});
// it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
// vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
// const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
matched: [],
query: {},
params: {},
meta: { moduleName: 'mockName' },
path: 'mockName/1',
});
vi.spyOn(vueRouter, 'useRouter').mockReturnValue({
push: vi.fn(),
replace: vi.fn(),
currentRoute: {
value: {
params: {
id: 1,
},
meta: { moduleName: 'mockName' },
matched: [{ path: 'mockName/:id' }],
},
},
});
// const filter = '{"order":"","limit":10,"skip":0}';
// const params = { supplierFk: 2 };
// arrayData.store.userParams = params;
// arrayData.fetch({});
const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
// await flushPromises();
// const routerPush = useRouter().push.mock.calls[0][0];
// console.log('routerPush: ', routerPush);
arrayData.store.userParams = params;
arrayData.fetch({});
// expect(axios.get.mock.calls[0][1].params).toEqual({
// filter,
// supplierFk: 2,
// });
// expect(routerPush.path).toEqual('mockName/1');
// expect(routerPush.query).toBeUndefined();
// });
await flushPromises();
const routerPush = useRouter().push.mock.calls[0][0];
expect(axios.get.mock.calls[0][1].params).toEqual({
filter,
supplierFk: 2,
});
expect(routerPush.path).toEqual('mockName/');
expect(routerPush.query.params).toBeDefined();
});
});