Merge branch 'test' of https://gitea.verdnatura.es/verdnatura/salix-front into dev
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Alex Moreno 2025-02-21 07:38:35 +01:00
commit 794da6d1e6
11 changed files with 81 additions and 56 deletions

View File

@ -152,7 +152,7 @@ const onTabPressed = async () => {
}; };
</script> </script>
<template> <template>
<div v-if="showFilter" class="full-width flex-center" style="overflow: hidden"> <div v-if="showFilter" class="full-width" style="overflow: hidden">
<VnColumn <VnColumn
:column="$props.column" :column="$props.column"
default="input" default="input"

View File

@ -23,6 +23,10 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
align: {
type: String,
default: 'end',
},
}); });
const hover = ref(); const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl }); const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
@ -46,16 +50,27 @@ async function orderBy(name, direction) {
} }
defineExpose({ orderBy }); defineExpose({ orderBy });
function textAlignToFlex(textAlign) {
return `justify-content: ${
{
'text-center': 'center',
'text-left': 'start',
'text-right': 'end',
}[textAlign] || 'start'
};`;
}
</script> </script>
<template> <template>
<div <div
@mouseenter="hover = true" @mouseenter="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
@click="orderBy(name, model?.direction)" @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> <span :title="label">{{ label }}</span>
<sup v-if="name && model?.index"> <div v-if="name && model?.index">
<QChip <QChip
:label="!vertical ? model?.index : ''" :label="!vertical ? model?.index : ''"
:icon=" :icon="
@ -92,20 +107,16 @@ defineExpose({ orderBy });
/> />
</div> </div>
</QChip> </QChip>
</sup> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
height: 30px; height: 30px;
width: 100%; width: 100%;
color: var(--vn-label-color); color: var(--vn-label-color);
} white-space: nowrap;
sup {
vertical-align: super; /* Valor predeterminado */
/* También puedes usar otros valores como "baseline", "top", "text-top", etc. */
} }
</style> </style>

View File

@ -551,9 +551,8 @@ function formatColumnValue(col, row, dashIfEmpty) {
return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']); return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']);
} }
if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]); if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]);
} else {
return dashIfEmpty(row[col?.name]);
} }
return dashIfEmpty(row[col?.name]);
} }
function cardClick(_, row) { function cardClick(_, row) {
if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` }); if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
@ -648,15 +647,14 @@ function cardClick(_, row) {
v-bind:class="col.headerClass" v-bind:class="col.headerClass"
class="body-cell" class="body-cell"
:style="col?.width ? `max-width: ${col?.width}` : ''" :style="col?.width ? `max-width: ${col?.width}` : ''"
style="padding: inherit"
> >
<div <div
class="no-padding" class="no-padding"
:style=" :style="[
withFilters && $props.columnSearch ? 'height: 75px' : '' withFilters && $props.columnSearch ? 'height: 75px' : '',
" ]"
> >
<div class="text-center" style="height: 30px"> <div style="height: 30px">
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip> <QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
<VnTableOrder <VnTableOrder
v-model="orders[col.orderBy ?? col.name]" v-model="orders[col.orderBy ?? col.name]"
@ -664,6 +662,7 @@ function cardClick(_, row) {
:label="col?.labelAbbreviation ?? col?.label" :label="col?.labelAbbreviation ?? col?.label"
:data-key="$attrs['data-key']" :data-key="$attrs['data-key']"
:search-url="searchUrl" :search-url="searchUrl"
:align="getColAlign(col)"
/> />
</div> </div>
<VnFilter <VnFilter
@ -1045,8 +1044,8 @@ es:
} }
.body-cell { .body-cell {
padding-left: 2px !important; padding-left: 4px !important;
padding-right: 2px !important; padding-right: 4px !important;
position: relative; position: relative;
} }
.bg-chip-secondary { .bg-chip-secondary {

View File

@ -48,7 +48,8 @@ function toValueAttrs(attrs) {
<span <span
v-for="toComponent of componentArray" v-for="toComponent of componentArray"
:key="toComponent.name" :key="toComponent.name"
class="column flex-center fit" class="column fit"
:class="toComponent?.component == 'checkbox' ? 'flex-center' : ''"
> >
<component <component
v-if="toComponent?.component" v-if="toComponent?.component"

View File

@ -1,14 +1,14 @@
export function getColAlign(col) { export function getColAlign(col) {
let align; let align;
switch (col.component) { switch (col.component) {
case 'time':
case 'date':
case 'select': case 'select':
align = 'left'; align = 'left';
break; break;
case 'number': case 'number':
align = 'right'; align = 'right';
break; break;
case 'time':
case 'date':
case 'checkbox': case 'checkbox':
align = 'center'; align = 'center';
break; break;

View File

@ -3,6 +3,8 @@ import { useI18n } from 'vue-i18n';
export default function (value, options = {}) { export default function (value, options = {}) {
if (!value) return; if (!value) return;
if (!isValidDate(value)) return null;
if (!options.dateStyle && !options.timeStyle) { if (!options.dateStyle && !options.timeStyle) {
options.day = '2-digit'; options.day = '2-digit';
options.month = '2-digit'; options.month = '2-digit';
@ -10,7 +12,12 @@ export default function (value, options = {}) {
} }
const { locale } = useI18n(); 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());
} }

View File

@ -16,7 +16,6 @@ import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
import axios from 'axios'; import axios from 'axios';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue'; import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import { checkEntryLock } from 'src/composables/checkEntryLock'; import { checkEntryLock } from 'src/composables/checkEntryLock';
import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -103,7 +102,7 @@ const columns = [
name: 'itemFk', name: 'itemFk',
component: 'number', component: 'number',
isEditable: false, isEditable: false,
width: '40px', width: '35px',
}, },
{ {
labelAbbreviation: '', labelAbbreviation: '',
@ -111,7 +110,7 @@ const columns = [
name: 'hex', name: 'hex',
columnSearch: false, columnSearch: false,
isEditable: false, isEditable: false,
width: '5px', width: '9px',
component: 'select', component: 'select',
attrs: { attrs: {
url: 'Inks', url: 'Inks',
@ -181,6 +180,7 @@ const columns = [
url: 'packagings', url: 'packagings',
fields: ['id'], fields: ['id'],
optionLabel: 'id', optionLabel: 'id',
optionValue: 'id',
}, },
create: true, create: true,
width: '40px', width: '40px',
@ -192,7 +192,7 @@ const columns = [
component: 'number', component: 'number',
create: true, create: true,
width: '35px', width: '35px',
format: (row, dashIfEmpty) => parseFloat(row['weight']).toFixed(1), format: (row) => parseFloat(row['weight']).toFixed(1),
}, },
{ {
labelAbbreviation: 'P', labelAbbreviation: 'P',
@ -330,6 +330,25 @@ const columns = [
create: true, create: true,
format: (row) => parseFloat(row['price3']).toFixed(2), 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', align: 'center',
labelAbbreviation: 'Min.', labelAbbreviation: 'Min.',
@ -350,25 +369,6 @@ const columns = [
}, },
format: (row) => parseFloat(row['minPrice']).toFixed(2), 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', align: 'center',
labelAbbreviation: t('P.Sen'), labelAbbreviation: t('P.Sen'),
@ -378,6 +378,9 @@ const columns = [
component: 'number', component: 'number',
isEditable: false, isEditable: false,
width: '40px', width: '40px',
style: () => {
return { color: 'var(--vn-label-color)' };
},
}, },
{ {
align: 'center', align: 'center',
@ -417,6 +420,9 @@ const columns = [
component: 'input', component: 'input',
isEditable: false, isEditable: false,
width: '35px', width: '35px',
style: () => {
return { color: 'var(--vn-label-color)' };
},
}, },
]; ];
@ -644,8 +650,8 @@ onMounted(() => {
:is-editable="editableMode" :is-editable="editableMode"
:without-header="!editableMode" :without-header="!editableMode"
:with-filters="editableMode" :with-filters="editableMode"
:right-search="false" :right-search="true"
:right-search-icon="false" :right-search-icon="true"
:row-click="false" :row-click="false"
:columns="columns" :columns="columns"
:beforeSaveFn="beforeSave" :beforeSaveFn="beforeSave"

View File

@ -199,7 +199,6 @@ const columns = computed(() => [
optionValue: 'code', optionValue: 'code',
optionLabel: 'description', optionLabel: 'description',
}, },
cardVisible: true,
width: '65px', width: '65px',
format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription), format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
}, },

View File

@ -57,7 +57,7 @@ const columns = computed(() => [
create: true, create: true,
component: 'number', component: 'number',
summation: true, summation: true,
width: '60px', width: '50px',
}, },
{ {
align: 'center', align: 'center',
@ -286,7 +286,7 @@ function round(value) {
justify-content: center; justify-content: center;
} }
.column { .column {
min-width: 30%; min-width: 40%;
margin-top: 5%; margin-top: 5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -101,7 +101,8 @@ const columns = [
</template> </template>
<style lang="css" scoped> <style lang="css" scoped>
.container { .container {
max-width: 50vw; max-width: 100%;
width: 50%;
overflow: auto; overflow: auto;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -109,9 +110,6 @@ const columns = [
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
padding: 2%; padding: 2%;
} }
.container > div > div > .q-table__top.relative-position.row.items-center {
background-color: red !important;
}
</style> </style>
<i18n> <i18n>
es: es:

View File

@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue'; import VnTable from 'components/VnTable/VnTable.vue';
import { dashIfEmpty } from 'src/filters';
const tableRef = ref(); const tableRef = ref();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -44,9 +45,12 @@ const columns = [
create: true, create: true,
component: 'select', component: 'select',
attrs: { attrs: {
url: 'centers', url: 'medicalCenters',
fields: ['id', 'name'], fields: ['id', 'name'],
}, },
format: (row, dashIfEmpty) => {
return dashIfEmpty(row.center?.name);
},
}, },
{ {
align: 'left', align: 'left',