Merge branch 'dev' into 8402-AddNewFilter
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
commit
5928b7a05c
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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());
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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),
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue