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

refactor: refs #6897 update component props and improve UI handling in Entry pages
gitea/salix-front/pipeline/pr-test There was a failure building this commit Details

This commit is contained in:
Pablo Natek 2025-02-28 12:55:15 +01:00
parent 3a559d37b5
commit 8cf4d36f47
6 changed files with 72 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/Entry/Card/EntryBuys.vue
View File

@ -61,9 +61,10 @@ const columns = [
name: 'workerFk', name: 'workerFk',
component: 'select', component: 'select',
attrs: { attrs: {
url: 'Workers/search', url: 'TicketRequests/getItemTypeWorker',
fields: ['id', 'nickname'], fields: ['id', 'nickname'],
optionLabel: 'nickname', optionLabel: 'nickname',
sortBy: 'nickname ASC',
optionValue: 'id', optionValue: 'id',
}, },
visible: false, visible: false,

2
src/pages/Entry/EntryFilter.vue
View File

@ -248,7 +248,7 @@ const entryFilterPanel = ref();
<i18n> <i18n>
en: en:
params: params:
isExcludedFromAvailable: Inventory isExcludedFromAvailable: Is excluded
isOrdered: Ordered isOrdered: Ordered
isReceived: Received isReceived: Received
isConfirmed: Confirmed isConfirmed: Confirmed

46
src/pages/Entry/EntryStockBought.vue
View File

@ -19,6 +19,7 @@ const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
const state = useState(); const state = useState();
const user = state.getUser(); const user = state.getUser();
const footer = ref({ bought: 0, reserve: 0 });
const columns = computed(() => [ const columns = computed(() => [
{ {
align: 'left', align: 'left',
@ -38,16 +39,14 @@ const columns = computed(() => [
cardVisible: true, cardVisible: true,
create: true, create: true,
attrs: { attrs: {
url: 'Workers/activeWithInheritedRole', url: 'TicketRequests/getItemTypeWorker',
fields: ['id', 'name', 'nickname'], fields: ['id', 'nickname'],
where: { role: 'buyer' },
optionFilter: 'firstName',
optionLabel: 'nickname', optionLabel: 'nickname',
sortBy: 'nickname ASC',
optionValue: 'id', optionValue: 'id',
useLike: false,
}, },
columnFilter: false, columnFilter: false,
width: '70px', width: '50px',
}, },
{ {
align: 'center', align: 'center',
@ -58,6 +57,7 @@ const columns = computed(() => [
component: 'number', component: 'number',
summation: true, summation: true,
width: '50px', width: '50px',
format: ({ reserve }, dashIfEmpty) => dashIfEmpty(round(reserve)),
}, },
{ {
align: 'center', align: 'center',
@ -65,6 +65,7 @@ const columns = computed(() => [
name: 'bought', name: 'bought',
summation: true, summation: true,
cardVisible: true, cardVisible: true,
style: ({ reserve, bought }) => boughtStyle(bought, reserve),
columnFilter: false, columnFilter: false,
}, },
{ {
@ -95,7 +96,6 @@ const columns = computed(() => [
}, },
}, },
], ],
'data-cy': 'table-actions',
}, },
]); ]);
@ -137,20 +137,20 @@ function openDialog() {
} }
function setFooter(data) { function setFooter(data) {
const footer = { footer.value = { bought: 0, reserve: 0 };
bought: 0,
reserve: 0,
};
data.forEach((row) => { data.forEach((row) => {
footer.bought += row?.bought; footer.value.bought += row?.bought;
footer.reserve += row?.reserve; footer.value.reserve += row?.reserve;
}); });
tableRef.value.footer = footer;
} }
function round(value) { function round(value) {
return Math.round(value * 100) / 100; return Math.round(value * 100) / 100;
} }
function boughtStyle(bought, reserve) {
return reserve < bought ? { color: 'var(--q-negative)' } : '';
}
</script> </script>
<template> <template>
<VnSubToolbar> <VnSubToolbar>
@ -253,24 +253,14 @@ function round(value) {
<WorkerDescriptorProxy :id="row?.workerFk" /> <WorkerDescriptorProxy :id="row?.workerFk" />
</span> </span>
</template> </template>
<template #column-bought="{ row }">
<span :class="{ 'text-negative': row.reserve < row.bought }">
{{ row?.bought }}
</span>
</template>
<template #column-footer-reserve> <template #column-footer-reserve>
<span> <span>
{{ round(tableRef.footer.reserve) }} {{ round(footer.reserve) }}
</span> </span>
</template> </template>
<template #column-footer-bought> <template #column-footer-bought>
<span <span :style="boughtStyle(footer?.bought, footer?.reserve)">
:class="{ {{ round(footer.bought) }}
'text-negative':
tableRef.footer.reserve < tableRef.footer.bought,
}"
>
{{ round(tableRef.footer.bought) }}
</span> </span>
</template> </template>
</VnTable> </VnTable>
@ -286,7 +276,7 @@ function round(value) {
justify-content: center; justify-content: center;
} }
.column { .column {
min-width: 40%; min-width: 35%;
margin-top: 5%; margin-top: 5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
src/pages/Entry/EntryStockBoughtDetail.vue
View File

@ -14,7 +14,7 @@ const $props = defineProps({
required: true, required: true,
}, },
dated: { dated: {
type: Date, type: [Date, String],
required: true, required: true,
}, },
}); });

12
src/pages/Item/Card/ItemDiary.vue
View File

@ -12,7 +12,7 @@ import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
import { toDateFormat } from 'src/filters/date.js'; import { toDateTimeFormat } from 'src/filters/date.js';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
import { date } from 'quasar'; import { date } from 'quasar';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
@ -143,7 +143,12 @@ onMounted(async () => {
const fetchItemBalances = async () => await arrayDataItemBalances.fetch({}); const fetchItemBalances = async () => await arrayDataItemBalances.fetch({});
const getBadgeAttrs = (_date) => { const getBadgeAttrs = (_date) => {
const isSameDate = date.isSameDate(today, _date); let today = Date.vnNew();
today.setHours(0, 0, 0, 0);
let timeTicket = new Date(_date);
timeTicket.setHours(0, 0, 0, 0);
const isSameDate = date.isSameDate(today, timeTicket);
const attrs = { const attrs = {
'text-color': isSameDate ? 'black' : 'white', 'text-color': isSameDate ? 'black' : 'white',
color: isSameDate ? 'warning' : 'transparent', color: isSameDate ? 'warning' : 'transparent',
@ -153,6 +158,7 @@ const getBadgeAttrs = (_date) => {
const scrollToToday = async () => { const scrollToToday = async () => {
await nextTick(); await nextTick();
console.log('today.toISOString(): ', today.toISOString());
const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`); const todayCell = document.querySelector(`td[data-date="${today.toISOString()}"]`);
if (todayCell) { if (todayCell) {
todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' }); todayCell.scrollIntoView({ behavior: 'smooth', block: 'center' });
@ -244,7 +250,7 @@ async function updateWarehouse(warehouseFk) {
dense dense
style="font-size: 14px" style="font-size: 14px"
> >
{{ toDateFormat(row.shipped) }} {{ toDateTimeFormat(row.shipped) }}
</QBadge> </QBadge>
</QTd> </QTd>
</template> </template>

57
src/pages/Item/Card/ItemLastEntries.vue
View File

@ -11,7 +11,6 @@ import { toCurrency } from 'filters/index';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue'; import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const from = ref(); const from = ref();
@ -41,7 +40,7 @@ const itemLastEntries = ref([]);
const columns = computed(() => [ const columns = computed(() => [
{ {
label: 'Nv', label: 'NV',
name: 'ig', name: 'ig',
align: 'center', align: 'center',
}, },
@ -70,6 +69,7 @@ const columns = computed(() => [
field: 'reference', field: 'reference',
align: 'center', align: 'center',
format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3), format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
style: (row) => highlightedRow(row),
}, },
{ {
label: t('lastEntries.printedStickers'), label: t('lastEntries.printedStickers'),
@ -84,6 +84,7 @@ const columns = computed(() => [
field: 'stickers', field: 'stickers',
align: 'center', align: 'center',
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
style: (row) => highlightedRow(row),
}, },
{ {
label: 'Packing', label: 'Packing',
@ -102,12 +103,14 @@ const columns = computed(() => [
name: 'stems', name: 'stems',
field: 'stems', field: 'stems',
align: 'center', align: 'center',
style: (row) => highlightedRow(row),
}, },
{ {
label: t('lastEntries.quantity'), label: t('lastEntries.quantity'),
name: 'quantity', name: 'quantity',
field: 'quantity', field: 'quantity',
align: 'center', align: 'center',
style: (row) => highlightedRow(row),
}, },
{ {
label: t('lastEntries.cost'), label: t('lastEntries.cost'),
@ -120,12 +123,14 @@ const columns = computed(() => [
name: 'weight', name: 'weight',
field: 'weight', field: 'weight',
align: 'center', align: 'center',
style: (row) => highlightedRow(row),
}, },
{ {
label: t('lastEntries.cube'), label: t('lastEntries.cube'),
name: 'cube', name: 'cube',
field: 'packagingFk', field: 'packagingFk',
align: 'center', align: 'center',
style: (row) => highlightedRow(row),
}, },
{ {
label: t('lastEntries.supplier'), label: t('lastEntries.supplier'),
@ -203,11 +208,28 @@ onMounted(async () => {
if (nTo && nTo != oTo) nTo = getDate(new Date(nTo), 'to'); if (nTo && nTo != oTo) nTo = getDate(new Date(nTo), 'to');
updateFilter(); updateFilter();
}); });
const rows = document.querySelectorAll('tr');
console.log('rows: ', rows);
rows.forEach((row) => {
const td = row.querySelector('td[data-is-inventory="1"]');
if (td) {
row.classList.add('inventory-row');
}
});
}); });
function getBadgeClass(groupingMode, expectedGrouping) { function getBadgeClass(groupingMode, expectedGrouping) {
return groupingMode === expectedGrouping ? 'accent-badge' : 'simple-badge'; return groupingMode === expectedGrouping ? 'accent-badge' : 'simple-badge';
} }
function highlightedRow(row) {
return row?.isInventorySupplier
? {
'background-color': 'var(--vn-section-hover-color)',
}
: '';
}
</script> </script>
<template> <template>
<VnSubToolbar> <VnSubToolbar>
@ -236,7 +258,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
:no-data-label="t('globals.noResults')" :no-data-label="t('globals.noResults')"
> >
<template #body-cell-ig="{ row }"> <template #body-cell-ig="{ row }">
<QTd class="text-center"> <QTd class="text-center" :style="highlightedRow(row)">
<QIcon <QIcon
:name="row.isIgnored ? 'check_box' : 'check_box_outline_blank'" :name="row.isIgnored ? 'check_box' : 'check_box_outline_blank'"
style="color: var(--vn-label-color)" style="color: var(--vn-label-color)"
@ -245,38 +267,38 @@ function getBadgeClass(groupingMode, expectedGrouping) {
</QTd> </QTd>
</template> </template>
<template #body-cell-warehouse="{ row }"> <template #body-cell-warehouse="{ row }">
<QTd> <QTd :style="highlightedRow(row)">
<span>{{ row.warehouse }}</span> <span>{{ row.warehouse }}</span>
</QTd> </QTd>
</template> </template>
<template #body-cell-date="{ row }"> <template #body-cell-date="{ row }">
<QTd class="text-center"> <QTd class="text-center" :style="highlightedRow(row)">
<VnDateBadge :date="row.landed" /> <VnDateBadge :date="row.landed" />
</QTd> </QTd>
</template> </template>
<template #body-cell-entry="{ row }"> <template #body-cell-entry="{ row }">
<QTd @click.stop> <QTd @click.stop :style="highlightedRow(row)">
<div class="full-width flex justify-center"> <div class="full-width flex justify-center">
<EntryDescriptorProxy :id="row.entryFk" class="q-ma-none" dense /> <EntryDescriptorProxy :id="row.entryFk" class="q-ma-none" dense />
<span class="link">{{ row.entryFk }}</span> <span class="link">{{ row.entryFk }}</span>
</div> </div>
</QTd> </QTd>
</template> </template>
<template #body-cell-pvp="{ value }"> <template #body-cell-pvp="{ row, value }">
<QTd @click.stop class="text-center"> <QTd @click.stop class="text-center" :style="highlightedRow(row)">
<span> {{ value }}</span> <span> {{ value }}</span>
<QTooltip> {{ t('lastEntries.grouping') }}/Packing </QTooltip></QTd <QTooltip> {{ t('lastEntries.grouping') }}/Packing </QTooltip>
> </QTd>
</template> </template>
<template #body-cell-printedStickers="{ row }"> <template #body-cell-printedStickers="{ row }">
<QTd @click.stop class="text-center"> <QTd @click.stop class="text-center" :style="highlightedRow(row)">
<span style="color: var(--vn-label-color)"> <span style="color: var(--vn-label-color)">
{{ row.printedStickers }}</span {{ row.printedStickers }}</span
> >
</QTd> </QTd>
</template> </template>
<template #body-cell-packing="{ row }"> <template #body-cell-packing="{ row }">
<QTd @click.stop> <QTd @click.stop :style="highlightedRow(row)">
<QBadge <QBadge
class="center-content" class="center-content"
:class="getBadgeClass(row.groupingMode, 'packing')" :class="getBadgeClass(row.groupingMode, 'packing')"
@ -288,7 +310,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
</QTd> </QTd>
</template> </template>
<template #body-cell-grouping="{ row }"> <template #body-cell-grouping="{ row }">
<QTd @click.stop> <QTd @click.stop :style="highlightedRow(row)">
<QBadge <QBadge
class="center-content" class="center-content"
:class="getBadgeClass(row.groupingMode, 'grouping')" :class="getBadgeClass(row.groupingMode, 'grouping')"
@ -300,7 +322,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
</QTd> </QTd>
</template> </template>
<template #body-cell-cost="{ row }"> <template #body-cell-cost="{ row }">
<QTd @click.stop class="text-center"> <QTd @click.stop class="text-center" :style="highlightedRow(row)">
<span> <span>
{{ toCurrency(row.cost, 'EUR', 3) }} {{ toCurrency(row.cost, 'EUR', 3) }}
<QTooltip> <QTooltip>
@ -319,7 +341,7 @@ function getBadgeClass(groupingMode, expectedGrouping) {
</QTd> </QTd>
</template> </template>
<template #body-cell-supplier="{ row }"> <template #body-cell-supplier="{ row }">
<QTd @click.stop> <QTd @click.stop :style="highlightedRow(row)">
<div class="full-width flex justify-left"> <div class="full-width flex justify-left">
<QBadge <QBadge
:class=" :class="
@ -341,6 +363,10 @@ function getBadgeClass(groupingMode, expectedGrouping) {
Hide inventory supplier: Ocultar proveedor inventario Hide inventory supplier: Ocultar proveedor inventario
</i18n> </i18n>
<style lang="scss" scoped> <style lang="scss" scoped>
.inventory-row {
background-color: #f0f0f0; /* Cambia el color de fondo o cualquier otro estilo */
}
.q-badge--rounded { .q-badge--rounded {
border-radius: 50%; border-radius: 50%;
} }
@ -354,7 +380,6 @@ function getBadgeClass(groupingMode, expectedGrouping) {
.th :first-child { .th :first-child {
.td { .td {
text-align: center; text-align: center;
background-color: red;
} }
} }
.accent-badge { .accent-badge {