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

feat: refs #7347 updates
gitea/salix-front/pipeline/pr-dev This commit is unstable Details

This commit is contained in:
Javier Segarra 2025-04-29 13:13:21 +02:00
parent 408bd274b4
commit 9611ea47cf
5 changed files with 203 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/filters/index.js
View File

@ -6,6 +6,7 @@ import toDateHourMinSec from './toDateHourMinSec';
import toRelativeDate from './toRelativeDate';
import toCurrency from './toCurrency';
import toPercentage from './toPercentage';
import toNumber from './toNumber';
import toLowerCamel from './toLowerCamel';
import dashIfEmpty from './dashIfEmpty';
import dateRange from './dateRange';
@ -34,6 +35,7 @@ export {
toRelativeDate,
toCurrency,
toPercentage,
toNumber,
dashIfEmpty,
dateRange,
getParamWhere,

8
src/filters/toNumber.js Normal file
View File

@ -0,0 +1,8 @@
export default function (value, fractionSize = 2) {
if (isNaN(value)) return value;
return new Intl.NumberFormat('es-ES', {
style: 'decimal',
minimumFractionDigits: 0,
maximumFractionDigits: fractionSize,
}).format(value);
}

1
src/i18n/locale/en.yml
View File

@ -122,6 +122,7 @@ globals:
producer: Producer
origin: Origin
state: State
total: Total
subtotal: Subtotal
visible: Visible
price: Price

1
src/i18n/locale/es.yml
View File

@ -126,6 +126,7 @@ globals:
producer: Productor
origin: Origen
state: Estado
total: Total
subtotal: Subtotal
visible: Visible
price: Precio

251
src/pages/Supplier/Card/SupplierConsumption.vue
View File

@ -7,16 +7,18 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import { dateRange, toCurrency, toDate } from 'src/filters';
import { dateRange, toCurrency, toNumber, toDate } from 'src/filters';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js';
import useNotify from 'src/composables/useNotify';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore';
import { useState } from 'src/composables/useState';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
import { toDateHourMin } from 'src/filters';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
const state = useState();
const stateStore = useStateStore();
@ -28,7 +30,7 @@ const { notify } = useNotify();
const totalRows = ref({});
const arrayData = useArrayData('SupplierConsumption', {
url: 'Suppliers/consumption',
order: ['itemTypeFk', 'itemName', 'itemSize'],
order: ['itemTypeFk', 'item', 'itemSize'],
userFilter: { where: { supplierFk: route.params.id } },
});
const headerColumns = computed(() => [
@ -41,30 +43,33 @@ const headerColumns = computed(() => [
},
{
name: 'invoiceNumber',
label: t('globals.subItem'),
label: t('globals.params.supplierRef'),
align: 'left',
field: 'invoiceNumber',
sortable: true,
},
{
name: 'shipped',
label: t('globals.shipped'),
align: 'center',
field: 'shipped',
format: toDateHourMin,
sortable: true,
},
{
name: 'quantity',
label: t('globals.quantity'),
align: 'left',
label: t('item.list.stems'),
align: 'center',
field: 'quantity',
format: (value) => toNumber(value),
sortable: true,
},
{
name: 'total',
label: t('globals.quantity'),
align: 'left',
label: t('globals.total'),
align: 'center',
field: 'total',
sortable: true,
},
{
name: 'shipped',
label: t('globals.quantity'),
align: 'left',
field: 'shipped',
format: (value) => toCurrency(value),
sortable: true,
},
]);
@ -79,7 +84,6 @@ const columns = computed(() => [
},
{
name: 'subName',
label: t('globals.subItem'),
align: 'left',
field: 'subName',
sortable: true,
@ -87,22 +91,25 @@ const columns = computed(() => [
{
name: 'quantity',
label: t('globals.quantity'),
align: 'left',
align: 'right',
field: 'quantity',
format: (value) => toNumber(value),
sortable: true,
},
{
name: 'price',
label: t('globals.price'),
align: 'left',
align: 'right',
field: 'price',
format: (value) => toCurrency(value),
sortable: true,
},
{
name: 'total',
label: t('globals.total'),
align: 'left',
align: 'right',
field: 'total',
format: (value) => toCurrency(value),
sortable: true,
},
]);
@ -204,7 +211,73 @@ onMounted(async () => {
stateStore.rightDrawer = true;
await getSupplierConsumptionData();
});
const lastAction = ref(null);
const isAction = (action) => {
if (lastAction.value === action) {
lastAction.value = null;
return true;
}
lastAction.value = action;
return false;
};
const isActionExpand = (action) => {
if (action === 'expand_all') {
return isAction('expand_all');
}
if (action === 'unfold_all') {
return isAction('unfold_all');
}
};
const isActionExpandAll = computed(() => {
return isActionExpand('expand_all');
});
const isActionUnfoldAll = computed(() => {
return isActionExpand('unfold_all');
});
const isActionExpandAllIcon = computed(() => {
return isActionExpandAll.value ? 'unfold_less' : 'expand_more';
});
const isActionUnfoldAllIcon = computed(() => {
return isActionUnfoldAll.value ? 'expand_more' : 'unfold_less';
});
const isActionExpandAllLabel = computed(() => {
return isActionExpandAll.value ? t('globals.unfold_all') : t('globals.expand_all');
});
const isActionUnfoldAllLabel = computed(() => {
return isActionUnfoldAll.value ? t('globals.expand_all') : t('globals.unfold_all');
});
const isActionExpandAllDisabled = computed(() => {
return !rows.value.length;
});
const isActionUnfoldAllDisabled = computed(() => {
return !rows.value.length;
});
const isActionExpandAllTooltip = computed(() => {
return isActionExpandAll.value ? t('globals.unfold_all') : t('globals.expand_all');
});
const isActionUnfoldAllTooltip = computed(() => {
return isActionUnfoldAll.value ? t('globals.expand_all') : t('globals.unfold_all');
});
const isActionExpandAllIconClass = computed(() => {
return isActionExpandAll.value ? 'vn:unfold_less' : 'vn:expand_more';
});
const isActionUnfoldAllIconClass = computed(() => {
return isActionUnfoldAll.value ? 'vn:expand_more' : 'vn:unfold_less';
});
const isActionExpandAllIconClassColor = computed(() => {
return isActionExpandAll.value ? 'primary' : 'grey-4';
});
const isActionUnfoldAllIconClassColor = computed(() => {
return isActionUnfoldAll.value ? 'primary' : 'grey-4';
});
const actions = (action) => {
if (action === 'expand_all') {
expanded.value = rows.value.map((r) => r.id);
} else if (action === 'unfold_all') {
expanded.value = [];
}
lastAction.value = action;
};
const expanded = ref([]);
// const initialExpanded = rows.filter((r, i) => i % 3 === 0).map((r) => r.index);
</script>
@ -240,14 +313,14 @@ const expanded = ref([]);
<div>
{{ t('Total entries') }}:
<QChip :dense="$q.screen.lt.sm" text-color="white">
{{ totalRows.totalPrice }} €
{{ toCurrency(totalRows.totalPrice) }}
</QChip>
</div>
<QSeparator dark vertical />
<div>
{{ t('Total stems entries') }}:
<QChip :dense="$q.screen.lt.sm" text-color="white">
{{ totalRows.totalQuantity }}
{{ toNumber(totalRows.totalQuantity) }}
</QChip>
</div>
</div>
@ -258,34 +331,63 @@ const expanded = ref([]);
</template>
</RightMenu>
<QCard class="full-width q-pa-md">
<div class="row">
<QBtn
v-if="lastAction && lastAction === 'expand_all'"
name="expand_all"
flat
color="primary"
icon="expand_all"
@click.stop="actions('expand_all')"
/>
<QBtn
v-if="lastAction && lastAction === 'unfold_all'"
name="unfold_all"
flat
color="primary"
icon="unfold_less"
@click.stop="actions('unfold_all')"
/>
</div>
<QTable
flat
bordered
ref="tableRef"
:rows="rows"
:columns="headerColumns"
:table-colspan="9"
row-key="id"
virtual-scroll
:virtual-scroll-item-size="48"
:pagination="{
rowsPerPage: 0,
}"
:rows-per-page-options="[0]"
v-model:expanded="expanded"
:grid="$q.screen.lt.md"
>
<template v-slot:header="props">
<template #header="props">
<QTr :props="props">
<QTh auto-width />
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ col.label }}
<span v-text="col.label" />
</QTh>
</QTr>
</template>
<template v-slot:body="props">
<QTr :props="props" :key="`m_${props.row.id}`" class="bg-travel">
<!-- Template especial para la columna 'id' -->
<template #body-cell-id="{ value }">
<div class="custom-id"><strong>ID:</strong> {{ value }}</div>
</template>
<!-- Template especial para la columna 'invoiceNumber' -->
<template #body-cell-invoiceNumber="{ value }">
<div class="custom-invoice">
<span class="label">Invoice:</span>
<span class="value">{{ value }}</span>
</div>
</template>
<template #body="props">
<QTr
:props="props"
:key="`movement_${props.row.id}`"
class="bg-travel cursor-pointer"
@click="props.expand = !props.expand"
>
<QTd auto-width>
<QToggle
v-model="props.expand"
@ -295,55 +397,66 @@ const expanded = ref([]);
</QTd>
<QTd v-for="col in props.cols" :key="col.name" :props="props">
{{ col.value }}
<span @click.stop class="link" v-if="col.name === 'id'">
{{ col.value }}
<EntryDescriptorProxy :id="col.value" />
</span>
<span v-else v-text="col.value" />
</QTd>
</QTr>
<QTr
v-show="props.expand"
:props="props"
:key="`e_${props.row.id}`"
class="q-virtual-scroll--with-prev"
:key="`expedition_${props.row.id}`"
>
<QTd colspan="100%">
<QTd colspan="12" style="padding: 1px 0">
<QTable
flat
bordered
color="secondary"
card-class="bg-travel text-white"
card-class="bg-travel text-white "
style-class="height: 30px"
table-header-class=" text-white"
ref="tableRef"
:rows="props.row.buys"
:columns="columns"
hide-header
:table-colspan="9"
row-key="id"
virtual-scroll
:virtual-scroll-item-size="48"
:pagination="{
rowsPerPage: 0,
}"
:rows-per-page-options="[0]"
v-model:expanded="expanded"
>
<template v-slot:header="props">
<QTr :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.label }}
</QTh>
</QTr>
</template>
<template v-slot:body="props">
<QTr :props="props" :key="`m_${props.row.id}`">
<template #body="props">
<!-- <QTr
v-if="props.rowIndex === 0"
:key="`rowHeader_${props.row.id}`"
:props="props"
>
<QTd
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.value }}
<span v-text="col.label" />
</QTd>
</QTr> -->
<QTr :props="props" :key="`m_${props.row.id}`">
<QTd
v-for="col in props.cols"
:key="col.name"
:title="col.label"
:props="props"
>
<!-- <div class="grid-container">
<div class="grid-item name" :title="col.name">
{{ col.name }}
</div>
<div
class="grid-item value"
v-text="col.value"
></div>
</div> -->
<span v-text="col.value"></span>
</QTd>
</QTr>
</template>
@ -453,6 +566,24 @@ const expanded = ref([]);
background-color: var(--vn-page-color);
border-bottom: 2px solid $primary;
}
.grid-container {
display: grid;
grid-template-rows: auto auto; /* Dos filas: una para el nombre y otra para el valor */
gap: 4px; /* Espaciado entre filas */
}
.grid-item.name {
font-weight: bold; /* Estilo para el nombre */
color: var(--vn-label-color); /* Cambia el color según tu diseño */
}
.grid-item.value {
color: var(--vn-text-color); /* Estilo para el valor */
}
.q-table thead tr,
.q-table tbody td {
height: 30px;
}
</style>
<i18n>