Merge branch 'test' of https://gitea.verdnatura.es/verdnatura/salix-front into 8315-devToTest
gitea/salix-front/pipeline/pr-test This commit looks good Details

This commit is contained in:
Alex Moreno 2024-12-18 11:26:38 +01:00
commit 8bf4eaa39a
20 changed files with 276 additions and 254 deletions

View File

@ -74,6 +74,10 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
mapKey: {
type: String,
default: '',
},
}); });
const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']); const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
@ -96,6 +100,7 @@ const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder, exprBuilder: props.exprBuilder,
keepOpts: props.keepOpts, keepOpts: props.keepOpts,
searchUrl: props.searchUrl, searchUrl: props.searchUrl,
mapKey: props.mapKey,
}); });
const store = arrayData.store; const store = arrayData.store;

View File

@ -49,6 +49,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
'exprBuilder', 'exprBuilder',
'searchUrl', 'searchUrl',
'navigate', 'navigate',
'mapKey',
]; ];
if (typeof userOptions === 'object') { if (typeof userOptions === 'object') {
for (const option in userOptions) { for (const option in userOptions) {
@ -119,17 +120,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const { limit } = filter; const { limit } = filter;
store.hasMoreData = limit && response.data.length >= limit; store.hasMoreData = limit && response.data.length >= limit;
if (append) { processData(response.data, { map: !!store.mapKey, append });
if (!store.data) store.data = []; if (!append && !isDialogOpened()) updateRouter && updateStateParams();
for (const row of response.data) store.data.push(row);
} else {
store.data = response.data;
if (!isDialogOpened()) updateRouter && updateStateParams();
}
store.isLoading = false; store.isLoading = false;
canceller = null; canceller = null;
return response; return response;
} }
@ -288,6 +284,31 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
router.replace(newUrl); router.replace(newUrl);
} }
function processData(data, { map = true, append = true }) {
if (!append) {
store.data = [];
store.map = new Map();
}
if (!Array.isArray(data)) store.data = data;
else if (!map && append) for (const row of data) store.data.push(row);
else
for (const row of data) {
const key = row[store.mapKey];
const val = { ...row, key };
if (store.map.has(key)) {
const { position } = store.map.get(key);
val.position = position;
store.map.set(key, val);
store.data[position] = val;
} else {
val.position = store.map.size;
store.map.set(key, val);
store.data.push(val);
}
}
}
const totalRows = computed(() => (store.data && store.data.length) || 0); const totalRows = computed(() => (store.data && store.data.length) || 0);
const isLoading = computed(() => store.isLoading || false); const isLoading = computed(() => store.isLoading || false);

View File

@ -361,7 +361,7 @@ function handleOnDataSave({ CrudModelRef }) {
@on-fetch="(data) => (warehousesOptions = data)" @on-fetch="(data) => (warehousesOptions = data)"
auto-load auto-load
url="Warehouses" url="Warehouses"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }" :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
/> />
<RightMenu> <RightMenu>
<template #right-panel> <template #right-panel>
@ -394,191 +394,186 @@ function handleOnDataSave({ CrudModelRef }) {
/> />
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<QPage> <VnTable
<VnTable @on-fetch="
@on-fetch=" (data) =>
(data) => data.forEach((item) => {
data.forEach((item) => { item.hasMinPrice = `${item.hasMinPrice !== 0}`;
item.hasMinPrice = `${item.hasMinPrice !== 0}`; })
}) "
" :default-remove="false"
:default-remove="false" :default-reset="false"
:default-reset="false" :default-save="false"
:default-save="false" data-key="ItemFixedPrices"
data-key="ItemFixedPrices" url="FixedPrices/filter"
url="FixedPrices/filter" :order="['itemFk DESC', 'name DESC']"
:order="['itemFk DESC', 'name DESC']" save-url="FixedPrices/crud"
save-url="FixedPrices/crud" ref="tableRef"
ref="tableRef" dense
dense :filter="{
:filter="{ where: {
where: { warehouseFk: user.warehouseFk,
warehouseFk: user.warehouseFk, },
}, }"
}" :columns="columns"
:columns="columns" default-mode="table"
default-mode="table" auto-load
auto-load :is-editable="true"
:is-editable="true" :right-search="false"
:right-search="false" :table="{
:table="{ 'row-key': 'id',
'row-key': 'id', selection: 'multiple',
selection: 'multiple', }"
}" :use-model="true"
:crud-model="{ v-model:selected="rowsSelected"
disableInfiniteScroll: true, :create-as-dialog="false"
}" :create="{
v-model:selected="rowsSelected" onDataSaved: handleOnDataSave,
:create-as-dialog="false" }"
:create="{ :disable-option="{ card: true }"
onDataSaved: handleOnDataSave, >
}" <template #header-selection="scope">
:use-model="true" <QCheckbox v-model="scope.selected" />
:disable-option="{ card: true }" </template>
> <template #body-selection="scope">
<template #header-selection="scope"> {{ scope }}
<QCheckbox v-model="scope.selected" /> <QCheckbox flat v-model="scope.selected" />
</template> </template>
<template #body-selection="scope">
{{ scope }}
<QCheckbox flat v-model="scope.selected" />
</template>
<template #column-itemFk="props"> <template #column-itemFk="props">
<VnSelect <VnSelect
style="max-width: 100px" style="max-width: 100px"
url="Items/withName" url="Items/withName"
hide-selected hide-selected
option-label="id" option-label="id"
option-value="id" option-value="id"
v-model="props.row.itemFk" v-model="props.row.itemFk"
v-on="getRowUpdateInputEvents(props, true, 'select')" v-on="getRowUpdateInputEvents(props, true, 'select')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
<QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</template>
<template #column-name="{ row }">
<span class="link">
{{ row.name }}
</span>
<span class="subName">{{ row.subName }}</span>
<ItemDescriptorProxy :id="row.itemFk" />
<FetchedTags :item="row" />
</template>
<template #column-rate2="props">
<QTd class="col">
<VnInput
type="currency"
style="width: 75px"
v-model.number="props.row.rate2"
v-on="getRowUpdateInputEvents(props)"
> >
<template #option="scope"> <template #append></template>
<QItem v-bind="scope.itemProps"> </VnInput>
<QItemSection> </QTd>
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel> </template>
<QItemLabel caption>{{ scope.opt?.name }}</QItemLabel> <template #column-rate3="props">
</QItemSection> <QTd class="col">
</QItem> <VnInput
</template> style="width: 75px"
</VnSelect> type="currency"
</template> v-model.number="props.row.rate3"
<template #column-name="{ row }"> v-on="getRowUpdateInputEvents(props)"
<span class="link"> >
{{ row.name }} <template #append></template>
</span> </VnInput>
<span class="subName">{{ row.subName }}</span> </QTd>
<ItemDescriptorProxy :id="row.itemFk" /> </template>
<FetchedTags :item="row" /> <template #column-minPrice="props">
</template> <QTd class="col">
<template #column-rate2="props"> <div class="row" style="align-items: center">
<QTd class="col"> <QCheckbox
<VnInput :model-value="props.row.hasMinPrice"
type="currency" @update:model-value="updateMinPrice($event, props)"
style="width: 75px" :false-value="'false'"
v-model.number="props.row.rate2" :true-value="'true'"
v-on="getRowUpdateInputEvents(props)"
>
<template #append></template>
</VnInput>
</QTd>
</template>
<template #column-rate3="props">
<QTd class="col">
<VnInput
style="width: 75px"
type="currency"
v-model.number="props.row.rate3"
v-on="getRowUpdateInputEvents(props)"
>
<template #append></template>
</VnInput>
</QTd>
</template>
<template #column-minPrice="props">
<QTd class="col">
<div class="row" style="align-items: center">
<QCheckbox
:model-value="props.row.hasMinPrice"
@update:model-value="updateMinPrice($event, props)"
:false-value="'false'"
:true-value="'true'"
/>
<VnInput
class="col"
type="currency"
mask="###.##"
:disable="props.row.hasMinPrice === 1"
v-model.number="props.row.minPrice"
v-on="getRowUpdateInputEvents(props)"
>
<template #append></template>
</VnInput>
</div>
</QTd>
</template>
<template #column-started="props">
<VnInputDate
class="vnInputDate"
:show-event="true"
v-model="props.row.started"
v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isBigger(props.row.started))"
/>
</template>
<template #column-ended="props">
<VnInputDate
class="vnInputDate"
:show-event="true"
v-model="props.row.ended"
v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isLower(props.row.ended))"
/>
</template>
<template #column-warehouseFk="props">
<QTd class="col">
<VnSelect
style="max-width: 150px"
:options="warehousesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="props.row.warehouseFk"
v-on="getRowUpdateInputEvents(props, false, 'select')"
/> />
</QTd> <VnInput
</template> class="col"
<template #column-deleteAction="{ row, rowIndex }"> type="currency"
<QIcon mask="###.##"
name="delete" :disable="props.row.hasMinPrice === 1"
size="sm" v-model.number="props.row.minPrice"
class="cursor-pointer fill-icon-on-hover" v-on="getRowUpdateInputEvents(props)"
color="primary" >
@click.stop=" <template #append></template>
openConfirmationModal( </VnInput>
t('globals.rowWillBeRemoved'), </div>
t('Do you want to clone this item?'), </QTd>
() => removePrice(row.id, rowIndex) </template>
) <template #column-started="props">
" <VnInputDate
> class="vnInputDate"
<QTooltip class="text-no-wrap"> :show-event="true"
{{ t('globals.delete') }} v-model="props.row.started"
</QTooltip> v-on="getRowUpdateInputEvents(props, false, 'date')"
</QIcon> v-bind="dateStyle(isBigger(props.row.started))"
</template>
</VnTable>
<QDialog ref="editTableCellDialogRef">
<EditTableCellValueForm
edit-url="FixedPrices/editFixedPrice"
:rows="rowsSelected"
:fields-options="editTableFieldsOptions"
@on-data-saved="onEditCellDataSaved()"
/> />
</QDialog> </template>
</QPage> <template #column-ended="props">
<VnInputDate
class="vnInputDate"
:show-event="true"
v-model="props.row.ended"
v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isLower(props.row.ended))"
/>
</template>
<template #column-warehouseFk="props">
<QTd class="col">
<VnSelect
style="max-width: 150px"
:options="warehousesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="props.row.warehouseFk"
v-on="getRowUpdateInputEvents(props, false, 'select')"
/>
</QTd>
</template>
<template #column-deleteAction="{ row, rowIndex }">
<QIcon
name="delete"
size="sm"
class="cursor-pointer fill-icon-on-hover"
color="primary"
@click.stop="
openConfirmationModal(
t('globals.rowWillBeRemoved'),
t('Do you want to clone this item?'),
() => removePrice(row.id, rowIndex)
)
"
>
<QTooltip class="text-no-wrap">
{{ t('globals.delete') }}
</QTooltip>
</QIcon>
</template>
</VnTable>
<QDialog ref="editTableCellDialogRef">
<EditTableCellValueForm
edit-url="FixedPrices/editFixedPrice"
:rows="rowsSelected"
:fields-options="editTableFieldsOptions"
@on-data-saved="onEditCellDataSaved()"
/>
</QDialog>
</template> </template>
<style lang="scss"> <style lang="scss">
.q-table th, .q-table th,

View File

@ -29,7 +29,7 @@ const exprBuilder = (param, value) => {
return { 'a.supplierName': value }; return { 'a.supplierName': value };
case 'routeFk': case 'routeFk':
return { 'a.routeFk': value }; return { 'a.routeFk': value };
case 'created': case 'dated':
case 'agencyFk': case 'agencyFk':
case 'packages': case 'packages':
case 'm3': case 'm3':
@ -145,7 +145,7 @@ const exprBuilder = (param, value) => {
<QItem class="q-my-sm"> <QItem class="q-my-sm">
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.created" v-model="params.dated"
:label="t('Date')" :label="t('Date')"
is-outlined is-outlined
/> />

View File

@ -28,7 +28,7 @@ const filter = {
'id', 'id',
'workerFk', 'workerFk',
'agencyModeFk', 'agencyModeFk',
'created', 'dated',
'm3', 'm3',
'warehouseFk', 'warehouseFk',
'description', 'description',
@ -78,7 +78,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
@on-fetch="setData" @on-fetch="setData"
> >
<template #body="{ entity }"> <template #body="{ entity }">
<VnLv :label="t('Date')" :value="toDate(entity?.created)" /> <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
<VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" /> <VnLv :label="t('Agency')" :value="entity?.agencyMode?.name" />
<VnLv :label="t('Zone')" :value="entity?.zone?.name" /> <VnLv :label="t('Zone')" :value="entity?.zone?.name" />
<VnLv <VnLv

View File

@ -20,7 +20,7 @@ const shelvingId = ref(route.params?.id || null);
const isNew = Boolean(!shelvingId.value); const isNew = Boolean(!shelvingId.value);
const defaultInitialData = { const defaultInitialData = {
agencyModeFk: null, agencyModeFk: null,
created: null, dated: null,
description: '', description: '',
vehicleFk: null, vehicleFk: null,
workerFk: null, workerFk: null,
@ -33,7 +33,7 @@ const routeFilter = {
'id', 'id',
'workerFk', 'workerFk',
'agencyModeFk', 'agencyModeFk',
'created', 'dated',
'm3', 'm3',
'warehouseFk', 'warehouseFk',
'description', 'description',
@ -116,7 +116,7 @@ const onSave = (data, response) => {
option-label="name" option-label="name"
:input-debounce="0" :input-debounce="0"
/> />
<VnInputDate v-model="data.created" :label="t('Created')" /> <VnInputDate v-model="data.dated" :label="t('Dated')" />
</VnRow> </VnRow>
<template v-if="!isNew"> <template v-if="!isNew">
<VnRow> <VnRow>
@ -170,7 +170,7 @@ es:
Hour finished: Hora fin Hour finished: Hora fin
Description: Descripción Description: Descripción
Is served: Se ha servido Is served: Se ha servido
Created: Creado Dated: Fecha
The km can not exceed: La distancia debe ser inferior a {maxDistance} The km can not exceed: La distancia debe ser inferior a {maxDistance}
en: en:
The km can not exceed: Distance must be lesser than {maxDistance} The km can not exceed: Distance must be lesser than {maxDistance}

View File

@ -139,7 +139,7 @@ const ticketColumns = ref([
<QCard class="vn-one"> <QCard class="vn-one">
<VnLv <VnLv
:label="t('route.summary.date')" :label="t('route.summary.date')"
:value="toDate(entity?.route.created)" :value="toDate(entity?.route.dated)"
/> />
<VnLv <VnLv
:label="t('route.summary.agency')" :label="t('route.summary.agency')"

View File

@ -46,10 +46,10 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
name: 'created', name: 'dated',
label: t('Date'), label: t('Date'),
columnFilter: false, columnFilter: false,
format: ({ created }) => toDate(created), format: ({ dated }) => toDate(dated),
}, },
{ {
align: 'left', align: 'left',

View File

@ -111,7 +111,7 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
name: 'created', name: 'dated',
label: t('route.Date'), label: t('route.Date'),
columnFilter: false, columnFilter: false,
cardVisible: true, cardVisible: true,

View File

@ -45,7 +45,7 @@ const columns = computed(() => [
columnFilter: { columnFilter: {
inWhere: true, inWhere: true,
}, },
format: ({ created }) => toDate(created), format: ({ dated }) => toDate(dated),
cardVisible: true, cardVisible: true,
}, },
{ {

View File

@ -109,7 +109,7 @@ const ticketList = ref([]);
const cloneRoutes = () => { const cloneRoutes = () => {
axios.post('Routes/clone', { axios.post('Routes/clone', {
created: startingDate.value, dated: startingDate.value,
ids: selectedRows.value.map((row) => row?.id), ids: selectedRows.value.map((row) => row?.id),
}); });
refreshKey.value++; refreshKey.value++;

View File

@ -5,7 +5,7 @@ route:
Description: Description Description: Description
hourStarted: H.Start hourStarted: H.Start
hourFinished: H.End hourFinished: H.End
createRoute: Create route dated: Dated
From: From From: From
To: To To: To
Date: Date Date: Date

View File

@ -23,13 +23,13 @@ const countriesOptions = ref([]);
<template> <template>
<FetchData <FetchData
url="Provinces" url="Provinces"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }" :filter="{ fields: ['id', 'name'], order: 'name ASC'}"
@on-fetch="(data) => (provincesOptions = data)" @on-fetch="(data) => (provincesOptions = data)"
auto-load auto-load
/> />
<FetchData <FetchData
url="countries" url="countries"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }" :filter="{ fields: ['id', 'name'], order: 'name ASC'}"
@on-fetch="(data) => (countriesOptions = data)" @on-fetch="(data) => (countriesOptions = data)"
auto-load auto-load
/> />

View File

@ -442,6 +442,7 @@ watch(
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnTable <VnTable
data-key="advanceTickets" data-key="advanceTickets"
:map-key="false"
ref="vnTableRef" ref="vnTableRef"
url="Tickets/getTicketsAdvance" url="Tickets/getTicketsAdvance"
search-url="advanceTickets" search-url="advanceTickets"

View File

@ -8,7 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue'; import VnTitle from 'src/components/common/VnTitle.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue'; import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import { toDate, toCurrency } from 'src/filters'; import { toDate, toCurrency } from 'src/filters';
import axios from 'axios'; import axios from 'axios';
@ -256,16 +256,20 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
:label="t('globals.warehouseOut')" :label="t('globals.warehouseOut')"
:value="travel.warehouseOut?.name" :value="travel.warehouseOut?.name"
/> />
<QCheckbox <VnRow>
:label="t('travel.basicData.isRaid')" <QCheckbox
v-model="travel.isRaid" :label="t('travel.basicData.isRaid')"
:disable="true" v-model="travel.isRaid"
/> :disable="true"
<QCheckbox />
:label="t('travel.summary.delivered')" </VnRow>
v-model="travel.isDelivered" <VnRow>
:disable="true" <QCheckbox
/> :label="t('travel.summary.delivered')"
v-model="travel.isDelivered"
:disable="true"
/>
</VnRow>
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
@ -320,7 +324,6 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
<QTd> <QTd>
<QCheckbox <QCheckbox
v-if="col.name === 'isConfirmed'" v-if="col.name === 'isConfirmed'"
:label="t('travel.summary.received')"
:true-value="1" :true-value="1"
:false-value="0" :false-value="0"
v-model="row[col.name]" v-model="row[col.name]"

View File

@ -77,7 +77,6 @@ defineExpose({ states });
:label="t('travel.shipped')" :label="t('travel.shipped')"
v-model="params.shipped" v-model="params.shipped"
@update:model-value="searchFn()" @update:model-value="searchFn()"
dense
outlined outlined
rounded rounded
/> />
@ -153,7 +152,7 @@ es:
Id: Id Id: Id
ref: Referencia ref: Referencia
agency: Agencia agency: Agencia
warehouseInFk: Alm.Salida warehouseInFk: Alm.Entrada
shipped: F.Envío shipped: F.Envío
shipmentHour: Hora de envío shipmentHour: Hora de envío
warehouseOut: Alm.Entrada warehouseOut: Alm.Entrada

View File

@ -54,7 +54,9 @@ const columns = computed(() => [
name: 'id', name: 'id',
label: t('globals.id'), label: t('globals.id'),
isId: true, isId: true,
cardVisible: true, chip: {
condition: () => true,
},
}, },
{ {
align: 'left', align: 'left',
@ -64,7 +66,7 @@ const columns = computed(() => [
columnField: { columnField: {
component: null, component: null,
}, },
cardVisible: true, isTitle: true,
create: true, create: true,
}, },
{ {
@ -103,14 +105,14 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
name: 'shipped',
label: t('globals.shipped'), label: t('globals.shipped'),
name: 'shipped',
create: true,
cardVisible: true,
component: 'date', component: 'date',
columnField: { columnField: {
component: null, component: null,
}, },
cardVisible: true,
create: true,
format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.shipped)), format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.shipped)),
}, },
{ {
@ -201,7 +203,7 @@ const columns = computed(() => [
/> />
<RightMenu> <RightMenu>
<template #right-panel> <template #right-panel>
<TravelFilter data-key="TravelList" ref="travelFilterRef" /> <TravelFilter data-key="TravelList" />
</template> </template>
</RightMenu> </RightMenu>
<VnTable <VnTable

View File

@ -103,9 +103,12 @@ const formattedWeekTotalHours = computed(() =>
const onInputChange = async (date) => { const onInputChange = async (date) => {
if (!date) return; if (!date) return;
const { year, month, day } = date.scope.timestamp; const { timestamp, outside } = date.scope;
const { year, month, day } = timestamp;
const _date = new Date(year, month - 1, day); const _date = new Date(year, month - 1, day);
setDate(_date); setDate(_date);
if (outside) getMailStates(_date);
}; };
const setDate = async (date) => { const setDate = async (date) => {

View File

@ -17,6 +17,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
searchUrl: 'params', searchUrl: 'params',
navigate: null, navigate: null,
page: 1, page: 1,
mapKey: 'id',
}; };
function get(key) { function get(key) {
@ -46,6 +47,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
function getDefaultState() { function getDefaultState() {
return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), { return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
data: ref(), data: ref(),
map: ref(new Map()),
}); });
} }

View File

@ -4,7 +4,11 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
describe('VnPaginate', () => { describe('VnPaginate', () => {
const expectedUrl = '/api/customers'; const expectedUrl = '/api/customers';
const defaultData = [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
let vm; let vm;
beforeAll(() => { beforeAll(() => {
const options = { const options = {
@ -28,11 +32,7 @@ describe('VnPaginate', () => {
describe('paginate()', () => { describe('paginate()', () => {
it('should call to the paginate() method and set the data on the rows property', async () => { it('should call to the paginate() method and set the data on the rows property', async () => {
vi.spyOn(vm.arrayData, 'loadMore'); vi.spyOn(vm.arrayData, 'loadMore');
vm.store.data = [ vm.store.data = defaultData;
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
await vm.paginate(); await vm.paginate();
@ -42,26 +42,25 @@ describe('VnPaginate', () => {
it('should call to the paginate() method and then call it again to paginate', async () => { it('should call to the paginate() method and then call it again to paginate', async () => {
vi.spyOn(axios, 'get').mockResolvedValue({ vi.spyOn(axios, 'get').mockResolvedValue({
data: [ data: defaultData,
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
],
}); });
vm.store.hasMoreData = true; vm.store.hasMoreData = true;
await vm.$nextTick(); await vm.$nextTick();
vm.store.data = [ vm.store.data = defaultData;
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
await vm.paginate(); await vm.paginate();
expect(vm.store.skip).toEqual(3); expect(vm.store.skip).toEqual(3);
expect(vm.store.data.length).toEqual(6); expect(vm.store.data.length).toEqual(6);
vi.spyOn(axios, 'get').mockResolvedValue({
data: [
{ id: 4, name: 'Peter Parker' },
{ id: 5, name: 'Clark Kent' },
{ id: 6, name: 'Barry Allen' },
],
});
await vm.paginate(); await vm.paginate();
expect(vm.store.skip).toEqual(6); expect(vm.store.skip).toEqual(6);
@ -85,11 +84,7 @@ describe('VnPaginate', () => {
const index = 1; const index = 1;
const done = vi.fn(); const done = vi.fn();
vm.store.data = [ vm.store.data = defaultData;
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
await vm.onLoad(index, done); await vm.onLoad(index, done);
@ -105,11 +100,7 @@ describe('VnPaginate', () => {
], ],
}); });
vm.store.data = [ vm.store.data = defaultData;
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
];
expect(vm.pagination.page).toEqual(1); expect(vm.pagination.page).toEqual(1);