From 484ceb709a46821709bfee1c0e4d4dadfa93350e Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 20 Feb 2025 20:51:15 +0100
Subject: [PATCH 1/3] feat: refs #6896 enhance VnTable components with
alignment options and improve styling
---
src/components/VnTable/VnFilter.vue | 2 +-
src/components/VnTable/VnOrder.vue | 27 +++++++----
src/components/VnTable/VnTable.vue | 17 ++++---
src/components/common/VnComponent.vue | 3 +-
src/composables/getColAlign.js | 4 +-
src/filters/toDate.js | 11 ++++-
src/pages/Entry/Card/EntryBuys.vue | 56 ++++++++++++----------
src/pages/Entry/EntryList.vue | 1 -
src/pages/Entry/EntryStockBought.vue | 4 +-
src/pages/Entry/EntryStockBoughtDetail.vue | 6 +--
10 files changed, 76 insertions(+), 55 deletions(-)
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 2dad8fe52..0de3834ea 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -152,7 +152,7 @@ const onTabPressed = async () => {
};
</script>
<template>
- <div v-if="showFilter" class="full-width flex-center" style="overflow: hidden">
+ <div v-if="showFilter" class="full-width" style="overflow: hidden">
<VnColumn
:column="$props.column"
default="input"
diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index e3795cc4b..47ed9acf4 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -23,6 +23,10 @@ const $props = defineProps({
type: Boolean,
default: false,
},
+ align: {
+ type: String,
+ default: 'end',
+ },
});
const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
@@ -46,16 +50,27 @@ async function orderBy(name, direction) {
}
defineExpose({ orderBy });
+
+function textAlignToFlex(textAlign) {
+ return `justify-content: ${
+ {
+ 'text-center': 'center',
+ 'text-left': 'start',
+ 'text-right': 'end',
+ }[textAlign] || 'start'
+ };`;
+}
</script>
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
@click="orderBy(name, model?.direction)"
- class="row items-center no-wrap cursor-pointer title"
+ class="items-center no-wrap cursor-pointer title"
+ :style="textAlignToFlex(align)"
>
<span :title="label">{{ label }}</span>
- <sup v-if="name && model?.index">
+ <div v-if="name && model?.index">
<QChip
:label="!vertical ? model?.index : ''"
:icon="
@@ -92,20 +107,16 @@ defineExpose({ orderBy });
/>
</div>
</QChip>
- </sup>
+ </div>
</div>
</template>
<style lang="scss" scoped>
.title {
display: flex;
- justify-content: center;
align-items: center;
height: 30px;
width: 100%;
color: var(--vn-label-color);
-}
-sup {
- vertical-align: super; /* Valor predeterminado */
- /* También puedes usar otros valores como "baseline", "top", "text-top", etc. */
+ white-space: nowrap;
}
</style>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index d7ed2ea27..e17c76e03 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -552,9 +552,8 @@ function formatColumnValue(col, row, dashIfEmpty) {
return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']);
}
if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]);
- } else {
- return dashIfEmpty(row[col?.name]);
}
+ return dashIfEmpty(row[col?.name]);
}
function cardClick(_, row) {
if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
@@ -657,15 +656,14 @@ function cardClick(_, row) {
v-bind:class="col.headerClass"
class="body-cell"
:style="col?.width ? `max-width: ${col?.width}` : ''"
- style="padding: inherit"
>
<div
class="no-padding"
- :style="
- withFilters && $props.columnSearch ? 'height: 75px' : ''
- "
+ :style="[
+ withFilters && $props.columnSearch ? 'height: 75px' : '',
+ ]"
>
- <div class="text-center" style="height: 30px">
+ <div style="height: 30px">
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
@@ -673,6 +671,7 @@ function cardClick(_, row) {
:label="col?.labelAbbreviation ?? col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
+ :align="getColAlign(col)"
/>
</div>
<VnFilter
@@ -1053,8 +1052,8 @@ es:
}
.body-cell {
- padding-left: 2px !important;
- padding-right: 2px !important;
+ padding-left: 4px !important;
+ padding-right: 4px !important;
position: relative;
}
.bg-chip-secondary {
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index d9d1ea26b..a9e1c8cff 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -48,7 +48,8 @@ function toValueAttrs(attrs) {
<span
v-for="toComponent of componentArray"
:key="toComponent.name"
- class="column flex-center fit"
+ class="column fit"
+ :class="toComponent?.component == 'checkbox' ? 'flex-center' : ''"
>
<component
v-if="toComponent?.component"
diff --git a/src/composables/getColAlign.js b/src/composables/getColAlign.js
index 6e963b437..a930fd7d8 100644
--- a/src/composables/getColAlign.js
+++ b/src/composables/getColAlign.js
@@ -1,14 +1,14 @@
export function getColAlign(col) {
let align;
switch (col.component) {
+ case 'time':
+ case 'date':
case 'select':
align = 'left';
break;
case 'number':
align = 'right';
break;
- case 'time':
- case 'date':
case 'checkbox':
align = 'center';
break;
diff --git a/src/filters/toDate.js b/src/filters/toDate.js
index 8fe8f3836..002797af5 100644
--- a/src/filters/toDate.js
+++ b/src/filters/toDate.js
@@ -3,6 +3,8 @@ import { useI18n } from 'vue-i18n';
export default function (value, options = {}) {
if (!value) return;
+ if (!isValidDate(value)) return null;
+
if (!options.dateStyle && !options.timeStyle) {
options.day = '2-digit';
options.month = '2-digit';
@@ -10,7 +12,12 @@ export default function (value, options = {}) {
}
const { locale } = useI18n();
- const date = new Date(value);
+ const newDate = new Date(value);
- return new Intl.DateTimeFormat(locale.value, options).format(date);
+ return new Intl.DateTimeFormat(locale.value, options).format(newDate);
+}
+// handle 0000-00-00
+function isValidDate(date) {
+ const parsedDate = new Date(date);
+ return parsedDate instanceof Date && !isNaN(parsedDate.getTime());
}
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index f3b73cb04..81578c609 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -16,7 +16,6 @@ import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
import axios from 'axios';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import { checkEntryLock } from 'src/composables/checkEntryLock';
-import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
const $props = defineProps({
id: {
@@ -103,7 +102,7 @@ const columns = [
name: 'itemFk',
component: 'number',
isEditable: false,
- width: '40px',
+ width: '35px',
},
{
labelAbbreviation: '',
@@ -111,7 +110,7 @@ const columns = [
name: 'hex',
columnSearch: false,
isEditable: false,
- width: '5px',
+ width: '9px',
component: 'select',
attrs: {
url: 'Inks',
@@ -181,6 +180,7 @@ const columns = [
url: 'packagings',
fields: ['id'],
optionLabel: 'id',
+ optionValue: 'id',
},
create: true,
width: '40px',
@@ -192,7 +192,7 @@ const columns = [
component: 'number',
create: true,
width: '35px',
- format: (row, dashIfEmpty) => parseFloat(row['weight']).toFixed(1),
+ format: (row) => parseFloat(row['weight']).toFixed(1),
},
{
labelAbbreviation: 'P',
@@ -330,6 +330,25 @@ const columns = [
create: true,
format: (row) => parseFloat(row['price3']).toFixed(2),
},
+ {
+ align: 'center',
+ labelAbbreviation: 'CM',
+ label: t('Check min price'),
+ toolTip: t('Check min price'),
+ name: 'hasMinPrice',
+ attrs: {
+ toggleIndeterminate: false,
+ },
+ component: 'checkbox',
+ cellEvent: {
+ 'update:modelValue': async (value, oldValue, row) => {
+ await axios.patch(`Items/${row['itemFk']}`, {
+ hasMinPrice: value,
+ });
+ },
+ },
+ width: '25px',
+ },
{
align: 'center',
labelAbbreviation: 'Min.',
@@ -350,25 +369,6 @@ const columns = [
},
format: (row) => parseFloat(row['minPrice']).toFixed(2),
},
- {
- align: 'center',
- labelAbbreviation: 'CM',
- label: t('Check min price'),
- toolTip: t('Check min price'),
- name: 'hasMinPrice',
- attrs: {
- toggleIndeterminate: false,
- },
- component: 'checkbox',
- cellEvent: {
- 'update:modelValue': async (value, oldValue, row) => {
- await axios.patch(`Items/${row['itemFk']}`, {
- hasMinPrice: value,
- });
- },
- },
- width: '25px',
- },
{
align: 'center',
labelAbbreviation: t('P.Sen'),
@@ -378,6 +378,9 @@ const columns = [
component: 'number',
isEditable: false,
width: '40px',
+ style: () => {
+ return { color: 'var(--vn-label-color)' };
+ },
},
{
align: 'center',
@@ -417,6 +420,9 @@ const columns = [
component: 'input',
isEditable: false,
width: '35px',
+ style: () => {
+ return { color: 'var(--vn-label-color)' };
+ },
},
];
@@ -644,8 +650,8 @@ onMounted(() => {
:is-editable="editableMode"
:without-header="!editableMode"
:with-filters="editableMode"
- :right-search="false"
- :right-search-icon="false"
+ :right-search="true"
+ :right-search-icon="true"
:row-click="false"
:columns="columns"
:beforeSaveFn="beforeSave"
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index d50f6b219..3c96a2302 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -199,7 +199,6 @@ const columns = computed(() => [
optionValue: 'code',
optionLabel: 'description',
},
- cardVisible: true,
width: '65px',
format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
},
diff --git a/src/pages/Entry/EntryStockBought.vue b/src/pages/Entry/EntryStockBought.vue
index da8557828..4bd0fe640 100644
--- a/src/pages/Entry/EntryStockBought.vue
+++ b/src/pages/Entry/EntryStockBought.vue
@@ -57,7 +57,7 @@ const columns = computed(() => [
create: true,
component: 'number',
summation: true,
- width: '60px',
+ width: '50px',
},
{
align: 'center',
@@ -286,7 +286,7 @@ function round(value) {
justify-content: center;
}
.column {
- min-width: 30%;
+ min-width: 40%;
margin-top: 5%;
display: flex;
flex-direction: column;
diff --git a/src/pages/Entry/EntryStockBoughtDetail.vue b/src/pages/Entry/EntryStockBoughtDetail.vue
index 9d382f23a..1a37994d9 100644
--- a/src/pages/Entry/EntryStockBoughtDetail.vue
+++ b/src/pages/Entry/EntryStockBoughtDetail.vue
@@ -101,7 +101,8 @@ const columns = [
</template>
<style lang="css" scoped>
.container {
- max-width: 50vw;
+ max-width: 100%;
+ width: 50%;
overflow: auto;
justify-content: center;
align-items: center;
@@ -109,9 +110,6 @@ const columns = [
background-color: var(--vn-section-color);
padding: 2%;
}
-.container > div > div > .q-table__top.relative-position.row.items-center {
- background-color: red !important;
-}
</style>
<i18n>
es:
From ea6874c0db2d3629ac97bcff1505abdd1715be9a Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 21 Feb 2025 07:24:11 +0100
Subject: [PATCH 2/3] feat: refs #6896 add dashIfEmpty filter for medical
center name in WorkerMedical component
---
src/pages/Worker/Card/WorkerMedical.vue | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/pages/Worker/Card/WorkerMedical.vue b/src/pages/Worker/Card/WorkerMedical.vue
index b3a599af7..c04f6496b 100644
--- a/src/pages/Worker/Card/WorkerMedical.vue
+++ b/src/pages/Worker/Card/WorkerMedical.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue';
+import { dashIfEmpty } from 'src/filters';
const tableRef = ref();
const { t } = useI18n();
const route = useRoute();
@@ -44,9 +45,12 @@ const columns = [
create: true,
component: 'select',
attrs: {
- url: 'centers',
+ url: 'medicalCenters',
fields: ['id', 'name'],
},
+ format: (row, dashIfEmpty) => {
+ return dashIfEmpty(row.center?.name);
+ },
},
{
align: 'left',
From 58cf8ab29dfcb5f8e23092ce18c509dbbb8f3de5 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 21 Feb 2025 08:50:57 +0100
Subject: [PATCH 3/3] feat: refs #8402 added lost filters from Salix
---
src/pages/Item/ItemRequestFilter.vue | 38 +++++++++++++++++++++++-----
1 file changed, 32 insertions(+), 6 deletions(-)
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index af48f7f5c..c2a63ddd9 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -8,6 +8,7 @@ import VnInput from 'src/components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
import { useArrayData } from 'src/composables/useArrayData';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
@@ -52,7 +53,7 @@ onMounted(async () => {
name: key,
value,
selectedField: { name: key, label: t(`params.${key}`) },
- })
+ }),
);
}
exprBuilder('state', arrayData.store?.userParams?.state);
@@ -157,6 +158,32 @@ onMounted(async () => {
/>
</QItemSection>
</QItem>
+ <QItem>
+ <QItemSection>
+ <VnInputDate
+ v-model="params.from"
+ :label="t('params.from')"
+ is-outlined
+ />
+ </QItemSection>
+ <QItemSection>
+ <VnInputDate
+ v-model="params.to"
+ :label="t('params.to')"
+ is-outlined
+ />
+ </QItemSection>
+ </QItem>
+ <QItem>
+ <QItemSection>
+ <VnInput
+ :label="t('params.daysOnward')"
+ v-model="params.daysOnward"
+ lazy-rules
+ is-outlined
+ />
+ </QItemSection>
+ </QItem>
<QItem>
<QItemSection>
<VnSelect
@@ -175,11 +202,10 @@ onMounted(async () => {
</QItem>
<QItem>
<QItemSection>
- <VnInput
- :label="t('params.daysOnward')"
- v-model="params.daysOnward"
- lazy-rules
- is-outlined
+ <QCheckbox
+ :label="t('params.mine')"
+ v-model="params.mine"
+ :toggle-indeterminate="false"
/>
</QItemSection>
</QItem>