From 91f317dfe67b87bdf860dbf485e8c53f72e559f9 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Tue, 11 Feb 2025 23:31:43 +0100 Subject: [PATCH 1/6] style: refs #7347 updates --- src/css/app.scss | 8 +- .../Supplier/Card/SupplierConsumption.vue | 332 +++++++++++++++--- src/pages/Zone/ZoneUpcoming.vue | 26 +- 3 files changed, 310 insertions(+), 56 deletions(-) diff --git a/src/css/app.scss b/src/css/app.scss index 2a60830bf..4c4a556a7 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -320,8 +320,12 @@ input::-webkit-inner-spin-button { .q-item > .q-item__section:has(.q-checkbox) { max-width: fit-content; } - -.row > .column:has(.q-checkbox) { +.vn-row > * .q-checkbox r { + min-width: 80%; + display: flex; + justify-content: space-between; +} +.vn-row > .q-checkbox.row.items-center { max-width: fit-content; } .q-field__inner { diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue index 718de95dd..25ac773f0 100644 --- a/src/pages/Supplier/Card/SupplierConsumption.vue +++ b/src/pages/Supplier/Card/SupplierConsumption.vue @@ -8,8 +8,9 @@ import SendEmailDialog from 'components/common/SendEmailDialog.vue'; import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; -import { dateRange, toDate } from 'src/filters'; -import { dashIfEmpty } from 'src/filters'; +import { dateRange, toCurrency, 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 axios from 'axios'; @@ -31,7 +32,81 @@ const arrayData = useArrayData('SupplierConsumption', { order: ['itemTypeFk', 'itemName', 'itemSize'], userFilter: { where: { supplierFk: route.params.id } }, }); +const headerColumns = computed(() => [ + { + name: 'id', + label: t('globals.entry'), + align: 'left', + field: 'id', + sortable: true, + }, + { + name: 'invoiceNumber', + label: t('globals.subItem'), + align: 'left', + field: 'invoiceNumber', + sortable: true, + }, + { + name: 'quantity', + label: t('globals.quantity'), + align: 'left', + field: 'quantity', + sortable: true, + }, + { + name: 'total', + label: t('globals.quantity'), + align: 'left', + field: 'total', + sortable: true, + }, + { + name: 'shipped', + label: t('globals.quantity'), + align: 'left', + field: 'shipped', + sortable: true, + }, +]); +const columns = computed(() => [ + { + name: 'itemName', + label: t('globals.item'), + align: 'left', + field: 'itemName', + sortable: true, + }, + { + name: 'subName', + label: t('globals.subItem'), + align: 'left', + field: 'subName', + sortable: true, + }, + { + name: 'quantity', + label: t('globals.quantity'), + align: 'left', + field: 'quantity', + sortable: true, + }, + { + name: 'price', + label: t('globals.price'), + align: 'left', + field: 'price', + sortable: true, + }, + { + name: 'total', + label: t('globals.total'), + align: 'left', + field: 'total', + sortable: true, + }, +]); const store = arrayData.store; onUnmounted(() => state.unset('SupplierConsumption')); @@ -122,13 +197,17 @@ const totalEntryPrice = (rows) => { totalQuantity = totalQuantity + quantity; } totalRows.value = { totalPrice, totalQuantity }; + // expanded.value = rows.map((r) => r.id); return rows; }; - +const tableRef = ref(null); onMounted(async () => { stateStore.rightDrawer = true; await getSupplierConsumptionData(); }); + +const expanded = ref([]); +// const initialExpanded = rows.filter((r, i) => i % 3 === 0).map((r) => r.index); - - + diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue index c74ae6078..1b5ed87cf 100644 --- a/src/pages/Zone/ZoneUpcoming.vue +++ b/src/pages/Zone/ZoneUpcoming.vue @@ -61,11 +61,27 @@ onMounted(() => weekdayStore.initStore()); v-for="(detail, index) in details" :key="index" class="full-width flex q-mb-lg" + style="flex-direction: column" > - - {{ getHeaderTitle(detail.shipped) }} - - +
+
+ + {{ getHeaderTitle(detail.shipped) }} + + + {{ getHeaderTitle(detail.shipped) }} + + + {{ getHeaderTitle(detail.shipped) }} + +
+ +
@@ -73,7 +89,7 @@ onMounted(() => weekdayStore.initStore()); From 9611ea47cf5b735b2c9e4aca53390b60e9ced320 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Tue, 29 Apr 2025 13:13:21 +0200 Subject: [PATCH 3/6] feat: refs #7347 updates --- src/filters/index.js | 2 + src/filters/toNumber.js | 8 + src/i18n/locale/en.yml | 1 + src/i18n/locale/es.yml | 1 + .../Supplier/Card/SupplierConsumption.vue | 251 +++++++++++++----- 5 files changed, 203 insertions(+), 60 deletions(-) create mode 100644 src/filters/toNumber.js diff --git a/src/filters/index.js b/src/filters/index.js index bf1429aee..4360559d1 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -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, diff --git a/src/filters/toNumber.js b/src/filters/toNumber.js new file mode 100644 index 000000000..0fa892c1f --- /dev/null +++ b/src/filters/toNumber.js @@ -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); +} diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml index 3c1c80954..4729ca7fc 100644 --- a/src/i18n/locale/en.yml +++ b/src/i18n/locale/en.yml @@ -122,6 +122,7 @@ globals: producer: Producer origin: Origin state: State + total: Total subtotal: Subtotal visible: Visible price: Price diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml index 518985831..05a210036 100644 --- a/src/i18n/locale/es.yml +++ b/src/i18n/locale/es.yml @@ -126,6 +126,7 @@ globals: producer: Productor origin: Origen state: Estado + total: Total subtotal: Subtotal visible: Visible price: Precio diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue index 5249e464e..5407af1df 100644 --- a/src/pages/Supplier/Card/SupplierConsumption.vue +++ b/src/pages/Supplier/Card/SupplierConsumption.vue @@ -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); @@ -240,14 +313,14 @@ const expanded = ref([]);
{{ t('Total entries') }}: - {{ totalRows.totalPrice }} € + {{ toCurrency(totalRows.totalPrice) }}
{{ t('Total stems entries') }}: - {{ totalRows.totalQuantity }} + {{ toNumber(totalRows.totalQuantity) }}
@@ -258,34 +331,63 @@ const expanded = ref([]); +
+ + +
-