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

EntryLatestBuysFilters #226

Merged
jsegarra merged 12 commits from :EntryLatestBuysFilters into dev 2024-03-08 12:08:57 +00:00
Conversation 2 Commits 12 Files Changed 3 +416 -9
1 changed files with 416 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bf66d4ec99 - Show all commits

425
src/pages/Entry/EntryLatestBuys.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, computed } from 'vue';
import { onMounted, ref, computed, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
@ -8,11 +8,14 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate, toCurrency } from 'src/filters';
import { useSession } from 'composables/useSession';
import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
const router = useRouter();
const session = useSession();
@ -21,11 +24,72 @@ const stateStore = useStateStore();
const { t } = useI18n();
const rowsFetchDataRef = ref(null);
const itemTypesOptions = ref([]);
const originsOptions = ref([]);
const itemFamiliesOptions = ref([]);
const intrastatOptions = ref([]);
const packagingsOptions = ref([]);
const editTableCellDialogRef = ref(null);
const visibleColumns = ref([]);
const allColumnNames = ref([]);
const rows = ref([]);
const exprBuilder = (param, value) => {
switch (param) {
case 'id':
case 'size':
case 'weightByPiece':
case 'isActive':
case 'family':
case 'minPrice':
case 'packingOut':
return { [`i.${param}`]: value };
case 'name':
case 'description':
return { [`i.${param}`]: { like: `%${value}%` } };
case 'code':
return { 'it.code': value };
case 'intrastat':
return { 'intr.description': value };
case 'origin':
return { 'ori.code': value };
case 'landing':
return { [`lb.${param}`]: value };
case 'packing':
case 'grouping':
case 'quantity':
case 'entryFk':
case 'buyingValue':
case 'freightValue':
case 'comissionValue':
case 'packageValue':
case 'isIgnored':
case 'price2':
case 'price3':
case 'ektFk':
case 'weight':
case 'packagingFk':
return { [`b.${param}`]: value };
}
};
const params = reactive({});
const arrayData = useArrayData('EntryLatestBuys', {
url: 'Buys/latestBuysFilter',
order: ['itemFk DESC'],
exprBuilder: exprBuilder,
});
const store = arrayData.store;
const rows = computed(() => store.data);
const rowsSelected = ref([]);
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
jsegarra commented 2024-03-06 09:10:53 +00:00
Review
Copy Link

Probando, diría que sería mas usable (UX) añadir el evento de tab.
He probado añadiendo keydown.tab.prevent o keydown.enter.tab , y no me ha ido

Probando, diría que sería mas usable (UX) añadir el evento de tab. He probado añadiendo keydown.tab.prevent o keydown.enter.tab , y no me ha ido
wbuezas commented 2024-03-06 20:59:56 +00:00
Review
Copy Link

Mmmm.. Probe un poco y tampoco me funciono

Mmmm.. Probe un poco y tampoco me funciono
jsegarra commented 2024-03-07 06:22:18 +00:00
Review
Copy Link

Como no se encuentra en salix, lo dejamos como está. lo apuntamos para nuestro lado.

Como **no se encuentra en salix**, **lo dejamos como está**. lo apuntamos para nuestro lado.
};
const columns = computed(() => [
{
jsegarra commented 2024-03-06 09:04:59 +00:00
Outdated
Review
Copy Link

Siguiendo en la línea de otras tareas, añadiría clearable a los inputs. Lo he probado, pero clearable:true no limpia el input
Otro enfoque es el que hemos seguido aqui #198

Siguiendo en la línea de otras tareas, añadiría clearable a los inputs. Lo he probado, pero clearable:true no limpia el input Otro enfoque es el que hemos seguido aqui https://gitea.verdnatura.es/verdnatura/salix-front/pulls/198
wbuezas commented 2024-03-06 22:09:55 +00:00
Outdated
Review
Copy Link

Como esto no se encuentra en salix, si realmente queremos agregarlo, te parece que lo saquemos en una PR aparte como una feature aparte?

Como esto no se encuentra en salix, si realmente queremos agregarlo, te parece que lo saquemos en una PR aparte como una feature aparte?
jsegarra commented 2024-03-07 06:22:04 +00:00
Outdated
Review
Copy Link

Como no se encuentra en salix, lo dejamos como está. lo apuntamos para nuestro lado.

Como **no se encuentra en salix**, **lo dejamos como está**. lo apuntamos para nuestro lado.
jsegarra commented 2024-03-07 08:24:36 +00:00
Outdated
Review
Copy Link

Si que hay una solución a este caso, que es mergear la rama #198 en esta y modificar getInputEvents para que 'update:modelValue' no sea exclusivo del tipo select.

Quizás podríamos ver si podemos evitar duplicar la línea de update:modelValue

Te lo dejo como TIP, sin embargo lo vamos a abordar en la tarea #6998

Si que hay una solución a este caso, que es mergear la rama https://gitea.verdnatura.es/verdnatura/salix-front/pulls/198 en esta y modificar getInputEvents para que 'update:modelValue' no sea exclusivo del tipo select. Quizás podríamos ver si podemos evitar duplicar la línea de update:modelValue Te lo dejo como TIP, sin embargo lo vamos a abordar en la tarea #6998
label: t('entry.latestBuys.picture'),
@ -37,12 +101,32 @@ const columns = computed(() => [
name: 'itemFk',
field: 'itemFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.packing'),
field: 'packing',
name: 'packing',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -50,6 +134,16 @@ const columns = computed(() => [
field: 'grouping',
name: 'grouping',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -57,12 +151,32 @@ const columns = computed(() => [
field: 'quantity',
name: 'quantity',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.description'),
field: 'description',
name: 'description',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -70,35 +184,104 @@ const columns = computed(() => [
field: 'size',
name: 'size',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.tags'),
name: 'tags',
align: 'left',
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.type'),
field: 'code',
name: 'type',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemTypesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
},
{
label: t('entry.latestBuys.intrastat'),
field: 'intrastat',
name: 'intrastat',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: intrastatOptions.value,
'option-value': 'description',
'option-label': 'description',
dense: true,
},
},
},
{
label: t('entry.latestBuys.origin'),
field: 'origin',
name: 'origin',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: originsOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
},
{
label: t('entry.latestBuys.weightByPiece'),
field: 'weightByPiece',
name: 'weightByPiece',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -106,24 +289,67 @@ const columns = computed(() => [
field: 'isActive',
name: 'isActive',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.family'),
field: 'family',
name: 'family',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemFamiliesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
},
{
label: t('entry.latestBuys.entryFk'),
field: 'entryFk',
name: 'entryFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.buyingValue'),
field: 'buyingValue',
name: 'buyingValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -131,6 +357,16 @@ const columns = computed(() => [
field: 'freightValue',
name: 'freightValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -138,6 +374,16 @@ const columns = computed(() => [
field: 'comissionValue',
name: 'comissionValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -145,6 +391,16 @@ const columns = computed(() => [
field: 'packageValue',
name: 'packageValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -152,12 +408,33 @@ const columns = computed(() => [
field: 'isIgnored',
name: 'isIgnored',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.price2'),
field: 'price2',
name: 'price2',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -165,6 +442,16 @@ const columns = computed(() => [
field: 'price3',
name: 'price3',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -172,6 +459,16 @@ const columns = computed(() => [
field: 'minPrice',
name: 'minPrice',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -179,6 +476,16 @@ const columns = computed(() => [
field: 'ektFk',
name: 'ektFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -186,18 +493,51 @@ const columns = computed(() => [
field: 'weight',
name: 'weight',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('entry.latestBuys.packagingFk'),
field: 'packagingFk',
name: 'packagingFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: packagingsOptions.value,
'option-value': 'id',
'option-label': 'id',
dense: true,
},
},
},
{
label: t('entry.latestBuys.packingOut'),
field: 'packingOut',
name: 'packingOut',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
@ -205,6 +545,16 @@ const columns = computed(() => [
field: 'landing',
name: 'landing',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toDate(val),
},
]);
@ -234,20 +584,58 @@ const redirectToEntryBuys = (entryFk) => {
router.push({ name: 'EntryBuys', params: { id: entryFk } });
};
const applyColumnFilter = async (col) => {
try {
if (!col.columnFilter.filterValue) {
delete params[col.field];
} else {
params[col.field] = col.columnFilter.filterValue;
}
await arrayData.applyFilter({ params });
} catch (err) {
console.error('Error applying column filter', err);
}
};
onMounted(async () => {
stateStore.rightDrawer = true;
const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
allColumnNames.value = filteredColumns.map((col) => col.name);
await arrayData.fetch({ append: false });
});
</script>
<template>
<FetchData
ref="rowsFetchDataRef"
url="Buys/latestBuysFilter"
:filter="{ order: 'itemFk DESC', limit: 20 }"
@on-fetch="(data) => (rows = data)"
url="ItemTypes"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (itemTypesOptions = data)"
/>
<FetchData
url="Origins"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (originsOptions = data)"
/>
<FetchData
url="ItemFamilies"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (itemFamiliesOptions = data)"
/>
<FetchData
url="Packagings"
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (packagingsOptions = data)"
/>
<FetchData
url="Intrastats"
:filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (intrastatOptions = data)"
/>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data">
@ -265,15 +653,34 @@ onMounted(async () => {
<QTable
:rows="rows"
:columns="columns"
hide-bottom
selection="multiple"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:visible-columns="visibleColumns"
v-model:selected="rowsSelected"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
>
<template #top-row="{ cols }">
<QTr>
<QTd />
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<component
:is="col.columnFilter.component"
v-if="col.name !== 'picture'"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-picture="{ row }">
<QTd>
<QImg
@ -288,7 +695,7 @@ onMounted(async () => {
</template>
<template #body-cell-itemFk="{ row }">
<QTd @click.stop>
<QBtn flat color="blue">
<QBtn flat color="primary">
{{ row.itemFk }}
</QBtn>
</QTd>
@ -300,7 +707,7 @@ onMounted(async () => {
</template>
<template #body-cell-entryFk="{ row }">
<QTd @click.stop>
<QBtn flat color="blue">
<QBtn flat color="primary">
<EntryDescriptorProxy :id="row.entryFk" />
{{ row.entryFk }}
</QBtn>