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>
|
||||
<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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -551,9 +551,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}` });
|
||||
|
@ -648,15 +647,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]"
|
||||
|
@ -664,6 +662,7 @@ function cardClick(_, row) {
|
|||
:label="col?.labelAbbreviation ?? col?.label"
|
||||
:data-key="$attrs['data-key']"
|
||||
:search-url="searchUrl"
|
||||
:align="getColAlign(col)"
|
||||
/>
|
||||
</div>
|
||||
<VnFilter
|
||||
|
@ -1045,8 +1044,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 {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -199,7 +199,6 @@ const columns = computed(() => [
|
|||
optionValue: 'code',
|
||||
optionLabel: 'description',
|
||||
},
|
||||
cardVisible: true,
|
||||
width: '65px',
|
||||
format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue