feat: #6321 remove row

This commit is contained in:
Javier Segarra 2024-06-19 13:18:32 +02:00
parent 185160aeba
commit 86cfbace72
2 changed files with 125 additions and 94 deletions

View File

@ -14,7 +14,7 @@ const MATCH_VALUES = [5, 6, 7, 8];
const { t } = useI18n(); const { t } = useI18n();
const session = useSession(); const session = useSession();
const primaryColor = 'red'; const primaryColor = '#f5b351';
const colorSpacer = '#ecf0f1'; const colorSpacer = '#ecf0f1';
const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`; const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
const gradientStyle = (value) => const gradientStyle = (value) =>
@ -156,6 +156,7 @@ const columns = computed(() => [
field: 'located', field: 'located',
}, },
]); ]);
async function confirm() { async function confirm() {
// console.log(''); // console.log('');
// const response = { address: address.value }; // const response = { address: address.value };
@ -171,12 +172,12 @@ async function confirm() {
// } // }
// } // }
// onDialogOK({ data: true }); // onDialogOK({ data: true });
dialogRef.value.hide({ type: 'refresh', itemProposal: proposalSelected.value[0] }); emit('refreshData', { type: 'refresh', itemProposal: proposalSelected.value[0] });
} }
const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent(); const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
// Definir el emisor de eventos // Definir el emisor de eventos
const emit = defineEmits(['dialogClosed']); const emit = defineEmits(['dialogClosed', 'refreshData']);
function onDialogClose() { function onDialogClose() {
console.log('Dialog has been closed'); console.log('Dialog has been closed');

View File

@ -47,6 +47,7 @@ const session = useSession();
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue'; import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import VnRow from 'src/components/ui/VnRow.vue'; import VnRow from 'src/components/ui/VnRow.vue';
import { useArrayData } from 'src/composables/useArrayData';
const route = useRoute(); const route = useRoute();
const token = session.getTokenMultimedia(); const token = session.getTokenMultimedia();
const itemLack = ref(null); const itemLack = ref(null);
@ -308,6 +309,7 @@ function freeFirst({ alertLevel: a }, { alertLevel: b }) {
// En cualquier otro caso, no se cambia el orden // En cualquier otro caso, no se cambia el orden
return 0; return 0;
} }
const { store } = useArrayData(URL_KEY);
const handleRows = (rows) => { const handleRows = (rows) => {
if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0); if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
return rows.sort(freeFirst); return rows.sort(freeFirst);
@ -335,16 +337,23 @@ const itemProposalEvt = ({ itemProposal }) => {
itemProposalSelected.value = itemProposal; itemProposalSelected.value = itemProposal;
replaceItem(); replaceItem();
}; };
const tableRef = ref(null);
const itemProposalSelected = ref(null); const itemProposalSelected = ref(null);
const replaceItem = () => { const replaceItem = () => {
const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity); const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity);
for (const ticket of rows) { for (const ticket of rows) {
if (ticket.quantity > itemProposalSelected.value.available) continue; if (ticket.quantity > itemProposalSelected.value.available) continue;
originalRowDataCopy.value.splice(originalRowDataCopy.value.indexOf(ticket));
ticket.itemFk = itemProposalSelected.value.id; ticket.itemFk = itemProposalSelected.value.id;
ticket.quantity *= 2; ticket.quantity *= 2;
selectedRows.value.push({ ticketFk: ticket.ticketFk }); selectedRows.value.push({ ticketFk: ticket.ticketFk });
itemProposalSelected.value.available -= ticket.quantity; itemProposalSelected.value.available -= ticket.quantity;
itemLack.value.lack += ticket.quantity; itemLack.value.lack += ticket.quantity;
// tableRef.value.rows.pop();
console.log(store.data);
const index = store.data.findIndex((t) => t.ticketFk === ticket.ticketFk);
store.data.splice(index, 1);
console.log(ticket);
} }
}; };
</script> </script>
@ -442,6 +451,7 @@ const replaceItem = () => {
ref="proposalDialogRef" ref="proposalDialogRef"
:item="item" :item="item"
:tickets="selectedRows" :tickets="selectedRows"
@refresh-data="itemProposalEvt"
></ItemProposal> ></ItemProposal>
<QTooltip bottom anchor="bottom right"> <QTooltip bottom anchor="bottom right">
{{ t('itemProposal') }} {{ t('itemProposal') }}
@ -459,7 +469,7 @@ const replaceItem = () => {
:data-key="URL_KEY" :data-key="URL_KEY"
:url="`${URL_KEY}/${entityId}`" :url="`${URL_KEY}/${entityId}`"
ref="itemLackForm" ref="itemLackForm"
@on-fetch="copyOriginalRowsData($event)" @on-fetch="copyOriginalRowsData"
auto-load auto-load
> >
<!-- :rows="rows" --> <!-- :rows="rows" -->
@ -501,21 +511,22 @@ const replaceItem = () => {
<QIcon name="arrow_right" size="lg" /> <QIcon name="arrow_right" size="lg" />
<VnSelectDialog action-icon="call_split"></VnSelectDialog <VnSelectDialog action-icon="call_split"></VnSelectDialog
></VnRow> --> ></VnRow> -->
<QTable <TransitionGroup name="list" tag="div">
ref="tableRef" <QTable
:columns="columns" ref="tableRef"
:rows="handleRows(rows)" :columns="columns"
row-key="ticketFk" :rows="handleRows(rows)"
selection="multiple" row-key="ticketFk"
v-model:selected="selectedRows" selection="multiple"
@update:selected="rowsHasSelected" v-model:selected="selectedRows"
:grid="$q.screen.lt.md" @update:selected="rowsHasSelected"
hide-bottom :grid="$q.screen.lt.md"
> hide-bottom
<template #body="props"> >
<QTr> <template #body="props">
<QTd> <QTr>
<!-- <QIcon <QTd>
<!-- <QIcon
v-if="resultSplit.length > 0" v-if="resultSplit.length > 0"
:name="getIcon(props.key, 'name')" :name="getIcon(props.key, 'name')"
:color="getIcon(props.key, 'color')" :color="getIcon(props.key, 'color')"
@ -523,83 +534,91 @@ const replaceItem = () => {
size="xs" size="xs"
style="font-weight: bold" style="font-weight: bold"
/> --> /> -->
<QCheckbox v-model="props.selected" /> <QCheckbox v-model="props.selected" />
</QTd> </QTd>
<QTd v-for="col in props.cols" :key="col.name"> <QTd v-for="col in props.cols" :key="col.name">
<template <template
v-if="tableColumnComponents[col.name]?.component" v-if="
> tableColumnComponents[col.name]?.component
<component
:is="
tableColumnComponents[col.name].component
" "
v-bind="tableColumnComponents[col.name].props"
v-model="props.row[col.field]"
v-on="
tableColumnComponents[col.name].event(
col.field,
props
)
"
:style="tableColumnComponents[col.name].style"
> >
<template v-if="isComponentVn(col)">{{ <component
col.value :is="
}}</template> tableColumnComponents[col.name]
<template v-if="col.name === 'status'"> .component
<QIcon "
v-if="props.row.isRookie" v-bind="
name="vn:person" tableColumnComponents[col.name].props
size="xs" "
color="primary" v-model="props.row[col.field]"
class="cursor-pointer" v-on="
> tableColumnComponents[col.name].event(
<QTooltip>{{ col.field,
t('negative.detail.isRookie') props
}}</QTooltip> )
</QIcon> "
<QIcon :style="
v-if="props.row.peticionCompra" tableColumnComponents[col.name].style
name="vn:buyrequest" "
size="xs" >
color="primary" <template v-if="isComponentVn(col)">{{
class="cursor-pointer" col.value
> }}</template>
<QTooltip>{{ <template v-if="col.name === 'status'">
t( <QIcon
'negative.detail.peticionCompra' v-if="props.row.isRookie"
) name="vn:person"
}}</QTooltip> size="xs"
</QIcon> color="primary"
<QIcon class="cursor-pointer"
v-if="props.row.turno" >
name="vn:calendar" <QTooltip>{{
size="xs" t('negative.detail.isRookie')
color="primary" }}</QTooltip>
class="cursor-pointer" </QIcon>
> <QIcon
<QTooltip>{{ v-if="props.row.peticionCompra"
t('negative.detail.turno') name="vn:buyrequest"
}}</QTooltip> size="xs"
</QIcon> color="primary"
</template> class="cursor-pointer"
<template v-if="col.name === 'ticketFk'" >
>{{ col.value }} <QTooltip>{{
<ItemDescriptorProxy t(
:id="$props.entityId" 'negative.detail.peticionCompra'
/></template> )
<template v-if="col.name === 'zoneName'"> }}</QTooltip>
{{ col.value }} </QIcon>
<ZoneDescriptorProxy <QIcon
:id="props.row.zoneFk" v-if="props.row.turno"
/> name="vn:calendar"
</template> size="xs"
</component> color="primary"
</template> class="cursor-pointer"
</QTd> >
</QTr> <QTooltip>{{
</template> t('negative.detail.turno')
</QTable> }}</QTooltip>
</QIcon>
</template>
<template v-if="col.name === 'ticketFk'"
>{{ col.value }}
<ItemDescriptorProxy
:id="$props.entityId"
/></template>
<template v-if="col.name === 'zoneName'">
{{ col.value }}
<ZoneDescriptorProxy
:id="props.row.zoneFk"
/>
</template>
</component>
</template>
</QTd>
</QTr>
</template>
</QTable>
</TransitionGroup>
</template> </template>
</VnPaginate></div </VnPaginate></div
></QPage> ></QPage>
@ -611,3 +630,14 @@ const replaceItem = () => {
:tickets="resultSplit" :tickets="resultSplit"
></HandleSplited>--> ></HandleSplited>-->
</template> </template>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
background-color: $primary;
}
</style>