refactor: refs #6897 update VnCheckbox component for improved model handling and replace QCheckbox

This commit is contained in:
Pablo Natek 2025-02-05 07:35:06 +01:00
parent 568f523e36
commit dc8612fc73
5 changed files with 60 additions and 21 deletions

View File

@ -962,8 +962,6 @@ const checkbox = ref(null);
component-prop="columnCreate" component-prop="columnCreate"
/> />
</slot> </slot>
</div>
<div>
<slot name="more-create-dialog" :data="data" /> <slot name="more-create-dialog" :data="data" />
</div> </div>
</div> </div>
@ -1035,7 +1033,7 @@ es:
.grid-three { .grid-three {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, max-content)); grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
max-width: 100%; max-width: 100%;
grid-gap: 20px; grid-gap: 20px;
margin: 0 auto; margin: 0 auto;

View File

@ -1,11 +1,25 @@
<script setup> <script setup>
import { computed } from 'vue';
const model = defineModel({ type: [Number, Boolean] }); const model = defineModel({ type: [Number, Boolean] });
if (typeof model.value === 'number') {
if (model.value === null) model.value = null; const checkboxModel = computed({
if (model.value !== 0) model.value = true; get() {
else model.value = false; if (typeof model.value === 'number') {
} return model.value !== 0;
}
return model.value;
},
set(value) {
if (typeof model.value === 'number') {
model.value = value ? 1 : 0;
} else {
model.value = value;
}
},
});
</script> </script>
<template> <template>
<QCheckbox v-bind="$attrs" v-model="model" /> <QCheckbox v-bind="$attrs" v-model="checkboxModel" />
</template> </template>

View File

@ -42,7 +42,22 @@ export async function checkEntryLock(entryFk, userFk) {
lockerUserFk: userFk, lockerUserFk: userFk,
}), }),
) )
.onCancel(() => push({ path: `summary` })); .onCancel(() => {
push({ path: `summary` });
});
} }
} else {
await axios
.patch(`Entries/${entryFk}`, {
locked: Date.vnNow(),
lockerUserFk: userFk,
})
.then(
quasar.notify({
message: t('entry.lock.success'),
color: 'positive',
position: 'top',
}),
);
} }
} }

View File

@ -214,10 +214,12 @@ const columns = [
{ {
align: 'center', align: 'center',
labelAbbreviation: 'GM', labelAbbreviation: 'GM',
label: t('Grouping selector'),
toolTip: t('Grouping selector'), toolTip: t('Grouping selector'),
name: 'groupingMode', name: 'groupingMode',
component: 'toggle', component: 'toggle',
attrs: { attrs: {
label: '',
'toggle-indeterminate': true, 'toggle-indeterminate': true,
trueValue: 'grouping', trueValue: 'grouping',
falseValue: 'packing', falseValue: 'packing',

View File

@ -11,6 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue'; import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import EntryBuys from './EntryBuys.vue'; import EntryBuys from './EntryBuys.vue';
import VnTitle from 'src/components/common/VnTitle.vue'; import VnTitle from 'src/components/common/VnTitle.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
import VnToSummary from 'src/components/ui/VnToSummary.vue'; import VnToSummary from 'src/components/ui/VnToSummary.vue';
const route = useRoute(); const route = useRoute();
@ -65,7 +66,7 @@ onMounted(async () => {
<template #body> <template #body>
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle <VnTitle
:url="`#/entry/{{ entityId }}/basicData`" :url="`#/entry/${entityId}/basic-data`"
:text="t('globals.summary.basicData')" :text="t('globals.summary.basicData')"
/> />
<div class="card-group"> <div class="card-group">
@ -89,33 +90,37 @@ onMounted(async () => {
/> />
</div> </div>
<div class="card-content"> <div class="card-content">
<QCheckbox <VnCheckbox
:label="t('entry.summary.ordered')" :label="t('entry.summary.ordered')"
v-model="entry.isOrdered" v-model="entry.isOrdered"
:disable="true" :disable="true"
size="xs"
/> />
<QCheckbox <VnCheckbox
:label="t('globals.confirmed')" :label="t('globals.confirmed')"
v-model="entry.isConfirmed" v-model="entry.isConfirmed"
:disable="true" :disable="true"
size="xs"
/> />
<QCheckbox <VnCheckbox
:label="t('entry.summary.booked')" :label="t('entry.summary.booked')"
v-model="entry.isBooked" v-model="entry.isBooked"
:disable="true" :disable="true"
size="xs"
/> />
<QCheckbox <VnCheckbox
:label="t('entry.summary.excludedFromAvailable')" :label="t('entry.summary.excludedFromAvailable')"
v-model="entry.isExcludedFromAvailable" v-model="entry.isExcludedFromAvailable"
:disable="true" :disable="true"
size="xs"
/> />
</div> </div>
</div> </div>
</QCard> </QCard>
<QCard class="vn-one" v-if="entry?.travelFk"> <QCard class="vn-one" v-if="entry?.travelFk">
<VnTitle <VnTitle
:url="`#/travel/{{ entry.travel.id }}/summary`" :url="`#/travel/${entry.travel.id}/summary`"
:text="t('globals.summary.basicData')" :text="t('Travel')"
/> />
<div class="card-group"> <div class="card-group">
<div class="card-content"> <div class="card-content">
@ -149,22 +154,24 @@ onMounted(async () => {
/> />
</div> </div>
<div class="card-content"> <div class="card-content">
<QCheckbox <VnCheckbox
:label="t('entry.summary.travelDelivered')" :label="t('entry.summary.travelDelivered')"
v-model="entry.travel.isDelivered" v-model="entry.travel.isDelivered"
:disable="true" :disable="true"
size="xs"
/> />
<QCheckbox <VnCheckbox
:label="t('entry.summary.travelReceived')" :label="t('entry.summary.travelReceived')"
v-model="entry.travel.isReceived" v-model="entry.travel.isReceived"
:disable="true" :disable="true"
size="xs"
/> />
</div> </div>
</div> </div>
</QCard> </QCard>
<QCard class="vn-max"> <QCard class="vn-max">
<VnTitle <VnTitle
:url="`#/entry/{{ entityId }}/buys`" :url="`#/entry/${entityId}/buys`"
:text="t('entry.summary.buys')" :text="t('entry.summary.buys')"
/> />
<EntryBuys <EntryBuys
@ -188,6 +195,9 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-overflow: ellipsis; text-overflow: ellipsis;
> div {
max-height: 24px;
}
} }
@media (min-width: 1010px) { @media (min-width: 1010px) {
@ -202,6 +212,6 @@ onMounted(async () => {
</style> </style>
<i18n> <i18n>
es: es:
Travel data: Datos envío Travel: Envío
InvoiceIn data: Datos factura InvoiceIn data: Datos factura
</i18n> </i18n>