verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Item list view
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
William Buezas 2024-04-09 08:18:18 -03:00
parent 64ff5e4446
commit e51ea9996b
7 changed files with 239 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ui/VnPaginate.vue
View File

@ -61,7 +61,6 @@ const props = defineProps({
}); });
const emit = defineEmits(['onFetch', 'onPaginate']); const emit = defineEmits(['onFetch', 'onPaginate']);
defineExpose({ fetch });
const isLoading = ref(false); const isLoading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: props.order, sortBy: props.order,
@ -91,6 +90,10 @@ watch(
} }
); );
const addFilter = async (filter, params) => {
await arrayData.addFilter({ filter, params });
};
async function fetch() { async function fetch() {
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) { if (!arrayData.hasMoreData.value) {
@ -140,6 +143,8 @@ async function onLoad(index, done) {
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value; if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
done(isDone); done(isDone);
} }
defineExpose({ fetch, addFilter });
</script> </script>
<template> <template>

2
src/composables/useArrayData.js
View File

@ -145,6 +145,8 @@ export function useArrayData(key, userOptions) {
store.userParams = userParams; store.userParams = userParams;
store.skip = 0; store.skip = 0;
store.filter.skip = 0; store.filter.skip = 0;
page.value = 1;
await fetch({ append: false }); await fetch({ append: false });
return { filter, params }; return { filter, params };
} }

2
src/i18n/en/index.js
View File

@ -1208,6 +1208,7 @@ export default {
list: 'List', list: 'List',
diary: 'Diary', diary: 'Diary',
tags: 'Tags', tags: 'Tags',
create: 'Create',
}, },
descriptor: { descriptor: {
item: 'Item', item: 'Item',
@ -1229,6 +1230,7 @@ export default {
category: 'Category', category: 'Category',
type: 'Type', type: 'Type',
intrastat: 'Intrastat', intrastat: 'Intrastat',
isActive: 'Active',
size: 'Size', size: 'Size',
origin: 'Origin', origin: 'Origin',
userName: 'Buyer', userName: 'Buyer',

2
src/i18n/es/index.js
View File

@ -1207,6 +1207,7 @@ export default {
list: 'Listado', list: 'Listado',
diary: 'Histórico', diary: 'Histórico',
tags: 'Etiquetas', tags: 'Etiquetas',
create: 'Crear',
}, },
descriptor: { descriptor: {
item: 'Artículo', item: 'Artículo',
@ -1228,6 +1229,7 @@ export default {
category: 'Reino', category: 'Reino',
type: 'Tipo', type: 'Tipo',
intrastat: 'Intrastat', intrastat: 'Intrastat',
isActive: 'Activo',
size: 'Medida', size: 'Medida',
origin: 'Origen', origin: 'Origen',
weightByPiece: 'Peso (gramos)/tallo', weightByPiece: 'Peso (gramos)/tallo',

1
src/pages/Item/ItemCreate.vue Normal file
View File

@ -0,0 +1 @@
<template>Item create view</template>

443
src/pages/Item/ItemList.vue
View File

@ -14,10 +14,9 @@ import ItemSummary from '../Item/Card/ItemSummary.vue';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate, toCurrency } from 'src/filters'; import { toDateFormat } from 'src/filters/date.js';
import { useSession } from 'composables/useSession'; import { useSession } from 'composables/useSession';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useVnConfirm } from 'composables/useVnConfirm'; import { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios'; import axios from 'axios';
@ -30,11 +29,12 @@ const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm(); const { openConfirmationModal } = useVnConfirm();
const paginateRef = ref(null);
const itemTypesOptions = ref([]); const itemTypesOptions = ref([]);
const originsOptions = ref([]); const originsOptions = ref([]);
const itemFamiliesOptions = ref([]); const buyersOptions = ref([]);
// const intrastatOptions = ref([]); const intrastatOptions = ref([]);
const packagingsOptions = ref([]); const itemCategoriesOptions = ref([]);
const visibleColumns = ref([]); const visibleColumns = ref([]);
const allColumnNames = ref([]); const allColumnNames = ref([]);
@ -71,19 +71,30 @@ const exprBuilder = (param, value) => {
const params = reactive({}); const params = reactive({});
// const getInputEvents = (col) => { const applyColumnFilter = async (col) => {
// return col.columnFilter.type === 'select' try {
// ? { 'update:modelValue': () => applyColumnFilter(col) } const paramKey = col.columnFilter?.filterParamKey || col.field;
// : { params[paramKey] = col.columnFilter.filterValue;
// 'keyup.enter': () => applyColumnFilter(col), await paginateRef.value.addFilter(null, params);
// }; } catch (err) {
// }; console.error('Error applying column filter', err);
}
};
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const columns = computed(() => [ const columns = computed(() => [
{ {
label: '', label: '',
name: 'picture', name: 'picture',
align: 'left', align: 'left',
columnFilter: null,
}, },
{ {
label: t('item.list.id'), label: t('item.list.id'),
@ -91,15 +102,15 @@ const columns = computed(() => [
field: 'id', field: 'id',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.list.grouping'), label: t('item.list.grouping'),
@ -107,15 +118,15 @@ const columns = computed(() => [
name: 'grouping', name: 'grouping',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -124,33 +135,32 @@ const columns = computed(() => [
name: 'packing', name: 'packing',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('globals.description'), label: t('globals.description'),
field: 'description', field: 'name',
name: 'description', name: 'description',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
// format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('item.list.stems'), label: t('item.list.stems'),
@ -158,15 +168,15 @@ const columns = computed(() => [
name: 'stems', name: 'stems',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.list.size'), label: t('item.list.size'),
@ -174,15 +184,15 @@ const columns = computed(() => [
name: 'size', name: 'size',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.list.type'), label: t('item.list.type'),
@ -190,18 +200,19 @@ const columns = computed(() => [
name: 'typeName', name: 'typeName',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnSelectFilter, component: VnSelectFilter,
// type: 'select', filterParamKey: 'typeFk',
// filterValue: null, type: 'select',
// event: getInputEvents, filterValue: null,
// attrs: { event: getInputEvents,
// options: itemTypesOptions.value, attrs: {
// 'option-value': 'code', options: itemTypesOptions.value,
// 'option-label': 'code', 'option-value': 'id',
// dense: true, 'option-label': 'name',
// }, dense: true,
// }, },
},
}, },
{ {
@ -210,18 +221,18 @@ const columns = computed(() => [
name: 'category', name: 'category',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnSelectFilter, component: VnSelectFilter,
// type: 'select', type: 'select',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// options: intrastatOptions.value, options: itemCategoriesOptions.value,
// 'option-value': 'description', 'option-value': 'name',
// 'option-label': 'description', 'option-label': 'name',
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
@ -230,18 +241,18 @@ const columns = computed(() => [
name: 'intrastat', name: 'intrastat',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnSelectFilter, component: VnSelectFilter,
// type: 'select', type: 'select',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// options: originsOptions.value, options: intrastatOptions.value,
// 'option-value': 'code', 'option-value': 'description',
// 'option-label': 'code', 'option-label': 'description',
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.list.origin'), label: t('item.list.origin'),
@ -249,15 +260,18 @@ const columns = computed(() => [
name: 'origin', name: 'origin',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnSelectFilter,
// type: 'text', type: 'select',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, options: originsOptions.value,
// }, 'option-value': 'code',
// }, 'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('item.list.userName'), label: t('item.list.userName'),
@ -265,18 +279,19 @@ const columns = computed(() => [
name: 'userName', name: 'userName',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnSelectFilter, component: VnSelectFilter,
// type: 'select', filterParamKey: 'buyerFk',
// filterValue: null, type: 'select',
// event: getInputEvents, filterValue: null,
// attrs: { event: getInputEvents,
// options: itemFamiliesOptions.value, attrs: {
// 'option-value': 'code', options: buyersOptions.value,
// 'option-label': 'code', 'option-value': 'id',
// dense: true, 'option-label': 'nickname',
// }, dense: true,
// }, },
},
}, },
{ {
label: t('item.list.weightByPiece'), label: t('item.list.weightByPiece'),
@ -284,15 +299,15 @@ const columns = computed(() => [
name: 'weightByPiece', name: 'weightByPiece',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -301,32 +316,24 @@ const columns = computed(() => [
name: 'stemMultiplier', name: 'stemMultiplier',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.isActive'), label: t('item.list.isActive'),
field: 'isActive', field: 'isActive',
name: 'isActive', name: 'isActive',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: null,
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getInputEvents,
// attrs: {
// dense: true,
// },
// },
}, },
{ {
label: t('item.list.producer'), label: t('item.list.producer'),
@ -334,15 +341,15 @@ const columns = computed(() => [
name: 'producer', name: 'producer',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getInputEvents, event: getInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -351,44 +358,27 @@ const columns = computed(() => [
name: 'landed', name: 'landed',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { format: (val) => dashIfEmpty(toDateFormat(val)),
// component: VnInput, columnFilter: null,
// type: 'text',
// filterValue: null,
// event: getInputEvents,
// attrs: {
// dense: true,
// },
// },
format: (val) => dashIfEmpty(toDate(val)),
}, },
{ {
label: '', label: '',
name: 'actions', name: 'actions',
align: 'left', align: 'left',
columnFilter: null,
}, },
]); ]);
const redirectToItemCreate = () => { const redirectToItemCreate = () => {
// router.push({ name: 'EntryBuys', params: { id: entryFk } }); router.push({ name: 'ItemCreate' });
}; };
const redirectToItemSummary = (id) => { const redirectToItemSummary = (id) => {
router.push({ name: 'ItemSummary', params: { id } }); router.push({ name: 'ItemSummary', params: { id } });
}; };
// const applyColumnFilter = async (col) => {
// try {
// params[col.field] = col.columnFilter.filterValue;
// await arrayData.addFilter({ params });
// } catch (err) {
// console.error('Error applying column filter', err);
// }
// };
const cloneItem = async (itemFk) => { const cloneItem = async (itemFk) => {
try { try {
console.log('cloneRow: ', itemFk);
const { data } = await axios.post(`Items/${itemFk}/clone`); const { data } = await axios.post(`Items/${itemFk}/clone`);
if (!data) return; if (!data) return;
router.push({ name: 'ItemTags', params: { id: data.id } }); router.push({ name: 'ItemTags', params: { id: data.id } });
@ -397,10 +387,6 @@ const cloneItem = async (itemFk) => {
} }
}; };
const test = (ev) => {
console.log('test: ', ev);
};
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
const filteredColumns = columns.value.filter((col) => col.name !== 'picture'); const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
@ -411,30 +397,37 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script> </script>
<template> <template>
<!-- <FetchData <FetchData
url="ItemTypes" url="ItemTypes"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }" :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
auto-load auto-load
@on-fetch="(data) => (itemTypesOptions = data)" @on-fetch="(data) => (itemTypesOptions = data)"
/> --> />
<!-- <FetchData <FetchData
url="ItemCategories"
:filter="{ fields: ['name'], order: 'name ASC' }"
auto-load
@on-fetch="(data) => (itemCategoriesOptions = data)"
/>
<FetchData
url="Intrastats"
:filter="{ fields: ['description'], order: 'description ASC' }"
auto-load
@on-fetch="(data) => (intrastatOptions = data)"
/>
<FetchData
url="Origins" url="Origins"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }" :filter="{ fields: ['code'], order: 'code ASC' }"
auto-load auto-load
@on-fetch="(data) => (originsOptions = data)" @on-fetch="(data) => (originsOptions = data)"
/> --> />
<!-- <FetchData <FetchData
url="ItemFamilies" url="TicketRequests/getItemTypeWorker"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }" :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
auto-load auto-load
@on-fetch="(data) => (itemFamiliesOptions = data)" @on-fetch="(data) => (buyersOptions = data)"
/> --> />
<!-- <FetchData
url="Packagings"
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (packagingsOptions = data)"
/> -->
<QToolbar class="bg-vn-dark justify-end"> <QToolbar class="bg-vn-dark justify-end">
<div id="st-data"> <div id="st-data">
<TableVisibleColumns <TableVisibleColumns
@ -449,10 +442,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QToolbar> </QToolbar>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnPaginate <VnPaginate
ref="paginateRef"
data-key="ItemList" data-key="ItemList"
url="Items/filter" url="Items/filter"
:order="['isActive DESC', 'name', 'id']" :order="['isActive DESC', 'name', 'id']"
:limit="12" :limit="12"
:expr-builder="exprBuilder"
:user-params="params"
:offset="50" :offset="50"
auto-load auto-load
> >
@ -465,29 +461,26 @@ onUnmounted(() => (stateStore.rightDrawer = false));
class="full-width q-mt-md" class="full-width q-mt-md"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:no-data-label="t('globals.noResults')" :no-data-label="t('globals.noResults')"
virtual-scroll
@virtual-scroll="test"
@row-click="(_, row) => redirectToItemSummary(row.id)" @row-click="(_, row) => redirectToItemSummary(row.id)"
> >
<!-- <template #top-row="{ cols }"> <template #top-row="{ cols }">
<QTr> <QTr>
<QTd /> <QTd
<QTd v-for="(col, index) in cols"
v-for="(col, index) in cols" :key="index"
:key="index" style="max-width: 100px"
style="max-width: 100px" >
> <component
<component :is="col.columnFilter.component"
:is="col.columnFilter.component" v-if="col.columnFilter"
v-if="col.name !== 'picture'" v-model="col.columnFilter.filterValue"
v-model="col.columnFilter.filterValue" v-bind="col.columnFilter.attrs"
v-bind="col.columnFilter.attrs" v-on="col.columnFilter.event(col)"
v-on="col.columnFilter.event(col)" dense
dense />
/> </QTd>
</QTd> </QTr>
</QTr> </template>
</template> -->
<template #body-cell-picture="{ row }"> <template #body-cell-picture="{ row }">
<QTd> <QTd>
<QImg <QImg

8
src/router/modules/item.js
View File

@ -29,6 +29,14 @@ export default {
}, },
component: () => import('src/pages/Item/ItemList.vue'), component: () => import('src/pages/Item/ItemList.vue'),
}, },
{
path: 'create',
name: 'ItemCreate',
meta: {
title: 'create',
},
component: () => import('src/pages/Item/ItemCreate.vue'),
},
], ],
}, },
{ {