0
0
Fork 0

feat: handle create row

This commit is contained in:
Javier Segarra 2024-09-06 13:14:46 +02:00
parent e592a76946
commit 9bb298bbeb
7 changed files with 84 additions and 51 deletions

View File

@ -189,11 +189,11 @@ async function saveChanges(data) {
});
}
async function insert() {
async function insert(pushData = $props.dataRequired) {
const $index = formData.value.length
? formData.value[formData.value.length - 1].$index + 1
: 0;
formData.value.push(Object.assign({ $index }, $props.dataRequired));
formData.value.push(Object.assign({ $index }, pushData));
hasChanges.value = true;
}

View File

@ -89,6 +89,10 @@ const $props = defineProps({
type: Object,
default: () => ({}),
},
crudModel: {
type: Object,
default: () => ({}),
},
tableHeight: {
type: String,
default: '90vh',
@ -369,6 +373,7 @@ function handleOnDataSaved(_, res) {
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #body="{ rows }">
{{ rows }}
<QTable
v-bind="table"
class="vnTable"
@ -384,6 +389,7 @@ function handleOnDataSaved(_, res) {
@virtual-scroll="
(event) =>
event.index > rows.length - 2 &&
($props.crudModel?.paginate ?? true) &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"

View File

@ -40,6 +40,8 @@ globals:
noChanges: No changes to save
changesToSave: You have changes pending to save
confirmRemove: You are about to delete this row. Are you sure?
rowWillBeRemoved: This row will be removed
sureToContinue: Are you sure you want to continue?
rowAdded: Row added
rowRemoved: Row removed
pleaseWait: Please wait...

View File

@ -39,6 +39,8 @@ globals:
noChanges: Sin cambios que guardar
changesToSave: Tienes cambios pendientes de guardar
confirmRemove: Vas a eliminar este registro. ¿Continuar?
rowWillBeRemoved: Esta linea se eliminará
sureToContinue: ¿Seguro que quieres continuar?
rowAdded: Fila añadida
rowRemoved: Fila eliminada
pleaseWait: Por favor espera...

View File

@ -55,14 +55,12 @@ const exprBuilder = (param, value) => {
const params = reactive({});
const defaultColumnAttrs = {
align: 'left',
sortable: true,
align: 'right',
sortable: false,
};
const columns = computed(() => [
{
sortable: true,
align: 'left',
label: t('item.fixedPrice.itemId'),
name: 'itemId',
...defaultColumnAttrs,
@ -72,6 +70,7 @@ const columns = computed(() => [
component: 'input',
type: 'number',
},
columnClass: 'shrink',
},
{
label: t('globals.name'),
@ -98,8 +97,8 @@ const columns = computed(() => [
{
label: t('item.fixedPrice.minPrice'),
class: 'expand',
field: 'minPrice',
columnClass: 'shrink',
name: 'minPrice',
...defaultColumnAttrs,
cardVisible: true,
@ -116,17 +115,23 @@ const columns = computed(() => [
format: ({ started }) => toDate(started),
cardVisible: true,
...defaultColumnAttrs,
component: 'date',
columnClass: 'shrink',
columnField: {
component: 'date',
class: 'shrink',
},
columnClass: 'expand',
},
{
label: t('item.fixedPrice.ended'),
field: 'ended',
name: 'ended',
...defaultColumnAttrs,
columnClass: 'shrink',
cardVisible: true,
component: 'date',
columnField: {
component: 'date',
class: 'shrink',
},
columnClass: 'expand',
format: (row) => toDate(row.ended),
},
@ -135,7 +140,14 @@ const columns = computed(() => [
field: 'warehouseFk',
name: 'warehouseFk',
...defaultColumnAttrs,
component: 'select',
columnClass: 'shrink',
columnFilter: {
component: 'select',
},
columnField: {
component: 'select',
class: 'expand',
},
attrs: {
options: warehousesOptions,
},
@ -230,8 +242,8 @@ function checkLastVisibleRow() {
if (lastVisibleRow) {
console.log('Última fila visible:', lastVisibleRow);
return lastVisibleRow;
}
return lastVisibleRow;
}
const addRow = (original = null) => {
// const original = checkLastVisibleRow();
@ -262,33 +274,34 @@ const addRow = (original = null) => {
// lastItem.value = {
copy = {
id: 0,
started: today,
ended: nextWeek,
hasMinPrice: 0,
$index: 0,
};
// return;
}
copy = {
$index: original.$index - 1,
itemFk: original.itemFk,
name: original.name,
subName: original.subName,
value5: original.value5,
value6: original.value6,
value7: original.value7,
value8: original.value8,
value9: original.value9,
value10: original.value10,
warehouseFk: original.warehouseFk,
rate2: original.rate2,
rate3: original.rate3,
hasMinPrice: original.hasMinPrice,
minPrice: original.minPrice,
started: Date.vnNew(),
ended: Date.vnNew(),
};
} else
copy = {
$index: original.$index - 1,
itemFk: original.itemFk,
name: original.name,
subName: original.subName,
value5: original.value5,
value6: original.value6,
value7: original.value7,
value8: original.value8,
value9: original.value9,
value10: original.value10,
warehouseFk: original.warehouseFk,
rate2: original.rate2,
rate3: original.rate3,
hasMinPrice: original.hasMinPrice,
minPrice: original.minPrice,
started: Date.vnNew(),
ended: Date.vnNew(),
};
// lastItem.value = lastItemCopy;
// tableRef.value.create.onDataSaved(lastItem);
// nextTick(() => {
@ -330,13 +343,14 @@ const removeFuturePrice = async () => {
const quasar = useQuasar();
import VnConfirm from 'components/ui/VnConfirm.vue';
import FetchData from 'src/components/FetchData.vue';
import CrudModel from 'src/components/CrudModel.vue';
function confirmRemove(item) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('This row will be removed'),
message: t('Do you want to remove?'),
title: t('globals.rowWillBeRemoved'),
message: t('globals.confirmDeletion'),
promise: async () => removePrice(item.id),
},
});
@ -345,8 +359,8 @@ function confirmRemoveFuturePrice(item) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('This row will be removed'),
message: t('Do you want to remove?'),
title: t('globals.rowWillBeRemoved'),
message: t('globals.confirmDeletion'),
promise: async () => removeFuturePrice(item.id),
},
});
@ -369,9 +383,14 @@ onMounted(async () => {
function handleOnDataSave({ CrudModelRef }) {
const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
// CrudModelRef.formData.unshift(roww);
CrudModelRef.formData.splice(original.$index, 0, copy);
if (original) {
CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
} else {
CrudModelRef.insert(copy);
// CrudModelRef.reload();
}
nextTick(() => {
highlightNewRow(original);
highlightNewRow(original ?? { $index: 0 });
});
}
onUnmounted(() => (stateStore.rightDrawer = false));
@ -436,6 +455,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
'row-key': 'id',
selection: 'multiple',
}"
:crud-model="{
paginate: false,
}"
v-model:selected="rowsSelected"
:row-click="saveOnRowChange"
:create-as-dialog="false"
@ -511,7 +533,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</template>
<template #column-minPrice="props">
<QTd class="col">
<div class="row" style="width: 130px">
<div class="row" style="width: 115px">
<QCheckbox
:model-value="props.row.hasMinPrice"
@update:model-value="updateMinPrice($event, props)"
@ -567,8 +589,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QTd>
</template>
<template #column-warehouseFk="props">
<QTd class="col" style="max-width: 180px">
<QTd class="col">
<VnSelect
style="max-width: 150px"
:options="warehousesOptions"
hide-selected
option-label="name"
@ -615,13 +638,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
.q-table th,
.q-table td {
padding-inline: 5px !important;
// text-align: -webkit-right;
}
.q-table tbody td {
max-width: none;
.q-td.col {
& .vnInputDate {
min-width: 130px;
min-width: 90px;
}
& div.row {
& .q-checkbox {
@ -656,7 +680,6 @@ tbody tr.highlight .q-td {
es:
Add fixed price: Añadir precio fijado
Edit fixed price(s): Editar precio(s) fijado(s)
This row will be removed: Esta linea se eliminará
Are you sure you want to continue?: ¿Seguro que quieres continuar?
Delete: Eliminar
</i18n>

View File

@ -14,10 +14,6 @@ defineProps({
type: String,
required: true,
},
warehousesOptions: {
type: Array,
default: () => [],
},
});
import { useRoute } from 'vue-router';
const route = useRoute();
@ -39,6 +35,12 @@ const pushParam = (param) => ({
</script>
<template>
<FetchData
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
url="Warehouses"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
/>
<FetchData
url="TicketRequests/getItemTypeWorker"
limit="30"

View File

@ -23,7 +23,7 @@ function confirmRemove() {
.dialog({
component: VnConfirm,
componentProps: {
title: t('confirmDeletion'),
title: t('globals.confirmDeletion'),
message: t('confirmDeletionMessage'),
promise: remove,
},
@ -52,12 +52,10 @@ async function remove() {
<i18n>
en:
deleteOrder: Delete order
confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order?
es:
deleteOrder: Eliminar pedido
confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
</i18n>