forked from verdnatura/salix-front
Merge pull request '#7671 - ItemFixedPrices dense rows' (!527) from 7671_dense_itemFixedPrices into dev
Reviewed-on: verdnatura/salix-front#527 Reviewed-by: Javi Gallego <jgallego@verdnatura.es>
This commit is contained in:
commit
eed844aeb5
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -159,8 +159,8 @@ const removeTag = (index, params, search) => {
|
|||
/>
|
||||
<VnFilterPanel
|
||||
:data-key="props.dataKey"
|
||||
:expr-builder="exprBuilder"
|
||||
:custom-tags="customTags"
|
||||
:expr-builder="props.exprBuilder"
|
||||
:custom-tags="props.customTags"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<strong v-if="tag.label === 'categoryFk'">
|
||||
|
|
|
|||
|
|
@ -49,6 +49,10 @@ const $props = defineProps({
|
|||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
createAsDialog: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
cardClass: {
|
||||
type: String,
|
||||
default: 'flex-one',
|
||||
|
|
@ -85,6 +89,10 @@ const $props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
crudModel: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
tableHeight: {
|
||||
type: String,
|
||||
default: '90vh',
|
||||
|
|
@ -284,10 +292,16 @@ function parseOrder(urlOrders) {
|
|||
|
||||
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
||||
defineExpose({
|
||||
create: createForm,
|
||||
reload,
|
||||
redirect: redirectFn,
|
||||
selected,
|
||||
});
|
||||
|
||||
function handleOnDataSaved(_, res) {
|
||||
if (_.onDataSaved) _.onDataSaved(this);
|
||||
else $props.create.onDataSaved(_);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer
|
||||
|
|
@ -374,6 +388,7 @@ defineExpose({
|
|||
@virtual-scroll="
|
||||
(event) =>
|
||||
event.index > rows.length - 2 &&
|
||||
($props.crudModel?.paginate ?? true) &&
|
||||
CrudModelRef.vnPaginateRef.paginate()
|
||||
"
|
||||
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
||||
|
|
@ -482,6 +497,7 @@ defineExpose({
|
|||
>
|
||||
<QBtn
|
||||
v-for="(btn, index) of col.actions"
|
||||
v-show="btn.show ? btn.show(row) : true"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
|
|
@ -616,8 +632,17 @@ defineExpose({
|
|||
</QTable>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
|
||||
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" shortcut="+" />
|
||||
<QPageSticky :offset="[20, 20]" style="z-index: 2">
|
||||
<QBtn
|
||||
@click="
|
||||
() =>
|
||||
createAsDialog ? (showForm = !showForm) : handleOnDataSaved(create)
|
||||
"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
shortcut="+"
|
||||
/>
|
||||
<QTooltip>
|
||||
{{ createForm.title }}
|
||||
</QTooltip>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ const mixinRules = [
|
|||
<slot name="prepend" />
|
||||
</template>
|
||||
<template #append>
|
||||
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
|
||||
<QIcon
|
||||
name="close"
|
||||
size="xs"
|
||||
|
|
@ -104,6 +103,7 @@ const mixinRules = [
|
|||
}
|
||||
"
|
||||
></QIcon>
|
||||
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
|
||||
<QIcon v-if="info" name="info">
|
||||
<QTooltip max-width="350px">
|
||||
{{ info }}
|
||||
|
|
@ -119,3 +119,8 @@ const mixinRules = [
|
|||
es:
|
||||
inputMin: Debe ser mayor a {value}
|
||||
</i18n>
|
||||
<style lang="scss">
|
||||
.q-field__append {
|
||||
padding-inline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ const $props = defineProps({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showEvent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
|
@ -94,6 +98,7 @@ watch(
|
|||
:class="{ required: $attrs.required }"
|
||||
:rules="$attrs.required ? [requiredFieldRule] : null"
|
||||
:clearable="false"
|
||||
@click="isPopupOpen = true"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon
|
||||
|
|
@ -111,6 +116,7 @@ watch(
|
|||
"
|
||||
/>
|
||||
<QIcon
|
||||
v-if="showEvent"
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
@click="isPopupOpen = !isPopupOpen"
|
||||
|
|
@ -130,6 +136,7 @@ watch(
|
|||
v-model="popupDate"
|
||||
:landscape="true"
|
||||
:today-btn="true"
|
||||
:options="$attrs.options"
|
||||
@update:model-value="
|
||||
(date) => {
|
||||
formattedDate = date;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<script setup>
|
||||
defineProps({ wrap: { type: Boolean, default: false } });
|
||||
</script>
|
||||
<template>
|
||||
<div class="vn-row q-gutter-md q-mb-md">
|
||||
<slot />
|
||||
|
|
@ -15,7 +18,9 @@
|
|||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.vn-row {
|
||||
&:not(.wrap) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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...
|
||||
|
|
@ -1298,6 +1300,7 @@ components:
|
|||
active: Is active
|
||||
visible: Is visible
|
||||
floramondo: Is floramondo
|
||||
showBadDates: Show future items
|
||||
userPanel:
|
||||
copyToken: Token copied to clipboard
|
||||
settings: Settings
|
||||
|
|
|
|||
|
|
@ -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...
|
||||
|
|
@ -1278,6 +1280,7 @@ components:
|
|||
active: Activo
|
||||
visible: Visible
|
||||
floramondo: Floramondo
|
||||
showBadDates: Ver items a futuro
|
||||
userPanel:
|
||||
copyToken: Token copiado al portapapeles
|
||||
settings: Configuración
|
||||
|
|
|
|||
|
|
@ -1,196 +1,190 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
|
||||
import { onMounted, ref, reactive, onUnmounted, nextTick, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
|
||||
import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { tMobile } from 'src/composables/tMobile';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { toDate } from 'src/filters';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { toCurrency } from 'filters/index';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import axios from 'axios';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import { isLower, isBigger } from 'src/filters/date.js';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import { QCheckbox } from 'quasar';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const state = useState();
|
||||
const { notify } = useNotify();
|
||||
|
||||
const tableRef = ref();
|
||||
const editTableCellDialogRef = ref(null);
|
||||
const user = state.getUser();
|
||||
const fixedPrices = ref([]);
|
||||
const fixedPricesOriginalData = ref([]);
|
||||
const warehousesOptions = ref([]);
|
||||
const rowsSelected = ref([]);
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'name':
|
||||
return { 'i.name': { like: `%${value}%` } };
|
||||
case 'itemFk':
|
||||
case 'warehouseFk':
|
||||
case 'rate2':
|
||||
case 'rate3':
|
||||
param = `fp.${param}`;
|
||||
return { [param]: value };
|
||||
case 'minPrice':
|
||||
param = `i.${param}`;
|
||||
return { [param]: value };
|
||||
}
|
||||
};
|
||||
const itemFixedPriceFilterRef = ref();
|
||||
|
||||
const params = reactive({});
|
||||
const arrayData = useArrayData('ItemFixedPrices', {
|
||||
url: 'FixedPrices/filter',
|
||||
userParams: params,
|
||||
order: ['name ASC', 'itemFk'],
|
||||
exprBuilder: exprBuilder,
|
||||
});
|
||||
const store = arrayData.store;
|
||||
|
||||
const fetchFixedPrices = async () => {
|
||||
await arrayData.fetch({ append: false });
|
||||
};
|
||||
|
||||
const onFixedPricesFetched = (data) => {
|
||||
fixedPrices.value = data;
|
||||
// el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
|
||||
fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
|
||||
};
|
||||
|
||||
watch(
|
||||
() => store.data,
|
||||
(data) => onFixedPricesFetched(data)
|
||||
);
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await arrayData.addFilter({ params });
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getColumnInputEvents = (col) => {
|
||||
return col.columnFilter.type === 'select'
|
||||
? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
: {
|
||||
'keyup.enter': () => applyColumnFilter(col),
|
||||
};
|
||||
};
|
||||
|
||||
const defaultColumnFilter = {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getColumnInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
};
|
||||
|
||||
const defaultColumnAttrs = {
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
params.warehouseFk = user.value.warehouseFk;
|
||||
});
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('item.fixedPrice.itemId'),
|
||||
name: 'itemId',
|
||||
field: 'itemFk',
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: {
|
||||
...defaultColumnFilter,
|
||||
isId: true,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnClass: 'shrink',
|
||||
},
|
||||
{
|
||||
label: t('globals.description'),
|
||||
label: t('globals.name'),
|
||||
field: 'name',
|
||||
name: 'description',
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: {
|
||||
...defaultColumnFilter,
|
||||
},
|
||||
create: true,
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.groupingPrice'),
|
||||
field: 'rate2',
|
||||
name: 'groupingPrice',
|
||||
name: 'rate2',
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: {
|
||||
...defaultColumnFilter,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.packingPrice'),
|
||||
field: 'rate3',
|
||||
name: 'packingPrice',
|
||||
name: 'rate3',
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: {
|
||||
...defaultColumnFilter,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
|
||||
{
|
||||
label: t('item.fixedPrice.minPrice'),
|
||||
field: 'minPrice',
|
||||
columnClass: 'shrink',
|
||||
name: 'minPrice',
|
||||
...defaultColumnAttrs,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnFilter: {
|
||||
...defaultColumnFilter,
|
||||
class: 'expand',
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.started'),
|
||||
field: 'started',
|
||||
name: 'started',
|
||||
format: ({ started }) => toDate(started),
|
||||
cardVisible: true,
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: null,
|
||||
columnField: {
|
||||
component: 'date',
|
||||
class: 'shrink',
|
||||
},
|
||||
columnFilter: {
|
||||
component: 'date',
|
||||
},
|
||||
columnClass: 'expand',
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.ended'),
|
||||
field: 'ended',
|
||||
name: 'ended',
|
||||
...defaultColumnAttrs,
|
||||
columnFilter: null,
|
||||
cardVisible: true,
|
||||
columnField: {
|
||||
component: 'date',
|
||||
class: 'shrink',
|
||||
},
|
||||
columnFilter: {
|
||||
component: 'date',
|
||||
},
|
||||
columnClass: 'expand',
|
||||
format: (row) => toDate(row.ended),
|
||||
},
|
||||
|
||||
{
|
||||
label: t('item.fixedPrice.warehouse'),
|
||||
field: 'warehouseFk',
|
||||
name: 'warehouse',
|
||||
name: 'warehouseFk',
|
||||
...defaultColumnAttrs,
|
||||
columnClass: 'shrink',
|
||||
columnFilter: {
|
||||
component: VnSelect,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getColumnInputEvents,
|
||||
component: 'select',
|
||||
},
|
||||
columnField: {
|
||||
component: 'select',
|
||||
class: 'expand',
|
||||
},
|
||||
attrs: {
|
||||
options: warehousesOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'name',
|
||||
dense: true,
|
||||
options: warehousesOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('delete'),
|
||||
icon: 'delete',
|
||||
action: (row) => confirmRemove(row),
|
||||
isPrimary: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ name: 'deleteAction', align: 'center' },
|
||||
]);
|
||||
|
||||
const editTableFieldsOptions = [
|
||||
|
|
@ -248,7 +242,6 @@ const editTableFieldsOptions = [
|
|||
},
|
||||
},
|
||||
];
|
||||
|
||||
const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
|
||||
return inputType === 'text'
|
||||
? {
|
||||
|
|
@ -258,91 +251,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
|
|||
: { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
|
||||
};
|
||||
|
||||
const validations = (row, rowIndex, col) => {
|
||||
const isNew = !row.id;
|
||||
// Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
|
||||
// Si isNew es falso no se checkea si el valor es igual a la original
|
||||
if (!isNew)
|
||||
if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field])
|
||||
return false;
|
||||
|
||||
const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
|
||||
return requiredFields.every(
|
||||
(field) => row[field] !== null && row[field] !== undefined
|
||||
);
|
||||
};
|
||||
|
||||
const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
|
||||
if (!validations(row, rowIndex, col)) return;
|
||||
|
||||
try {
|
||||
if (resetMinPrice) row.hasMinPrice = 0;
|
||||
|
||||
const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
|
||||
row = data;
|
||||
fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
|
||||
} catch (err) {
|
||||
console.error('Error editing price', err);
|
||||
}
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
if (!fixedPrices.value || fixedPrices.value.length === 0) {
|
||||
fixedPrices.value = [];
|
||||
|
||||
const today = Date.vnNew();
|
||||
const millisecsInDay = 86400000;
|
||||
const daysInWeek = 7;
|
||||
const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
|
||||
|
||||
const newPrice = {
|
||||
started: today,
|
||||
ended: nextWeek,
|
||||
hasMinPrice: 0,
|
||||
};
|
||||
|
||||
fixedPricesOriginalData.value.push({ ...newPrice });
|
||||
fixedPrices.value.push({ ...newPrice });
|
||||
return;
|
||||
}
|
||||
|
||||
const lastItemCopy = JSON.parse(
|
||||
JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
|
||||
);
|
||||
delete lastItemCopy.id;
|
||||
fixedPricesOriginalData.value.push(lastItemCopy);
|
||||
fixedPrices.value.push(lastItemCopy);
|
||||
};
|
||||
|
||||
const openEditTableCellDialog = () => {
|
||||
editTableCellDialogRef.value.show();
|
||||
};
|
||||
|
||||
const onEditCellDataSaved = async () => {
|
||||
rowsSelected.value = [];
|
||||
await fetchFixedPrices();
|
||||
};
|
||||
|
||||
const onWarehousesFetched = (data) => {
|
||||
warehousesOptions.value = data;
|
||||
// Actualiza las 'options' del elemento con field 'warehouseFk' en 'editTableFieldsOptions'.
|
||||
const warehouseField = editTableFieldsOptions.find(
|
||||
(field) => field.field === 'warehouseFk'
|
||||
);
|
||||
warehouseField.attrs.options = data;
|
||||
};
|
||||
|
||||
const removePrice = async (id, rowIndex) => {
|
||||
try {
|
||||
await axios.delete(`FixedPrices/${id}`);
|
||||
fixedPrices.value.splice(rowIndex, 1);
|
||||
fixedPricesOriginalData.value.splice(rowIndex, 1);
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error removing price', err);
|
||||
}
|
||||
};
|
||||
|
||||
const updateMinPrice = async (value, props) => {
|
||||
// El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
|
||||
// Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
|
||||
|
|
@ -354,64 +262,241 @@ const updateMinPrice = async (value, props) => {
|
|||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
params.warehouseFk = user.value.warehouseFk;
|
||||
await fetchFixedPrices();
|
||||
});
|
||||
const upsertPrice = async ({ row }, resetMinPrice = false) => {
|
||||
try {
|
||||
if (resetMinPrice) row.hasMinPrice = 0;
|
||||
row = await upsertFixedPrice(row);
|
||||
} catch (err) {
|
||||
console.error('Error editing price', err);
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
async function upsertFixedPrice(row) {
|
||||
try {
|
||||
const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error('Error editing price', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveOnRowChange(row) {
|
||||
if (rowsSelected.value.length > 1) return;
|
||||
if (rowsSelected.value[0]?.id === row.id) return;
|
||||
else if (rowsSelected.value.length === 1)
|
||||
await upsertFixedPrice(rowsSelected.value[0]);
|
||||
rowsSelected.value = [row];
|
||||
}
|
||||
|
||||
function checkLastVisibleRow() {
|
||||
let lastVisibleRow = null;
|
||||
|
||||
getTableRows().forEach((row, index) => {
|
||||
const rect = row.getBoundingClientRect();
|
||||
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
|
||||
lastVisibleRow = index;
|
||||
}
|
||||
});
|
||||
|
||||
return lastVisibleRow;
|
||||
}
|
||||
|
||||
const addRow = (original = null) => {
|
||||
let copy = null;
|
||||
if (!original) {
|
||||
const today = Date.vnNew();
|
||||
const millisecsInDay = 86400000;
|
||||
const daysInWeek = 7;
|
||||
const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
|
||||
|
||||
copy = {
|
||||
id: 0,
|
||||
started: today,
|
||||
ended: nextWeek,
|
||||
hasMinPrice: 0,
|
||||
$index: 0,
|
||||
};
|
||||
} 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(),
|
||||
};
|
||||
return { original, copy };
|
||||
};
|
||||
|
||||
const getTableRows = () =>
|
||||
document.getElementsByClassName('q-table')[0].querySelectorAll('tr.cursor-pointer');
|
||||
|
||||
function highlightNewRow({ $index: index }) {
|
||||
const row = getTableRows()[index];
|
||||
if (row) {
|
||||
row.classList.add('highlight');
|
||||
setTimeout(() => {
|
||||
row.classList.remove('highlight');
|
||||
}, 3000); // Duración de la animación en milisegundos
|
||||
}
|
||||
}
|
||||
const openEditTableCellDialog = () => {
|
||||
editTableCellDialogRef.value.show();
|
||||
};
|
||||
|
||||
const onEditCellDataSaved = async () => {
|
||||
rowsSelected.value = [];
|
||||
tableRef.value.reload();
|
||||
};
|
||||
|
||||
const removeFuturePrice = async () => {
|
||||
try {
|
||||
rowsSelected.value.forEach(({ id }) => {
|
||||
const rowIndex = fixedPrices.value.findIndex(({ id }) => id === id);
|
||||
removePrice(id, rowIndex);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error removing price', err);
|
||||
}
|
||||
};
|
||||
|
||||
function confirmRemove(item, isFuture) {
|
||||
const promise = async () =>
|
||||
isFuture ? removeFuturePrice(item.id) : removePrice(item.id);
|
||||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t('globals.rowWillBeRemoved'),
|
||||
message: t('globals.confirmDeletion'),
|
||||
promise,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const removePrice = async (id) => {
|
||||
try {
|
||||
await axios.delete(`FixedPrices/${id}`);
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
tableRef.value.reload({});
|
||||
} catch (err) {
|
||||
console.error('Error removing price', err);
|
||||
}
|
||||
};
|
||||
const dateStyle = (date) =>
|
||||
date
|
||||
? {
|
||||
'bg-color': 'warning',
|
||||
'is-outlined': true,
|
||||
}
|
||||
: {};
|
||||
|
||||
function handleOnDataSave({ CrudModelRef }) {
|
||||
const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
|
||||
if (original) {
|
||||
CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
|
||||
} else {
|
||||
CrudModelRef.insert(copy);
|
||||
}
|
||||
nextTick(() => {
|
||||
highlightNewRow(original ?? { $index: 0 });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Warehouses"
|
||||
:filter="{ order: ['name'] }"
|
||||
@on-fetch="(data) => (warehousesOptions = data)"
|
||||
auto-load
|
||||
@on-fetch="(data) => onWarehousesFetched(data)"
|
||||
url="Warehouses"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
/>
|
||||
<RightMenu>
|
||||
<template #right-panel>
|
||||
<ItemFixedPriceFilter
|
||||
data-key="ItemFixedPrices"
|
||||
:warehouses-options="warehousesOptions"
|
||||
ref="itemFixedPriceFilterRef"
|
||||
/>
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:rows="fixedPrices"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="rowsSelected"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
<QBtn
|
||||
v-if="rowsSelected.length"
|
||||
@click="openEditTableCellDialog()"
|
||||
color="primary"
|
||||
icon="edit"
|
||||
>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
<QTooltip>
|
||||
{{ t('Edit fixed price(s)') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
:label="tMobile('globals.remove')"
|
||||
color="primary"
|
||||
icon="delete"
|
||||
flat
|
||||
@click="(row) => confirmRemove(row, true)"
|
||||
:title="t('globals.remove')"
|
||||
v-if="rowsSelected.length"
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<QPage>
|
||||
<VnTable
|
||||
:default-remove="false"
|
||||
:default-reset="false"
|
||||
:default-save="false"
|
||||
data-key="ItemFixedPrices"
|
||||
url="FixedPrices/filter"
|
||||
:order="['name ASC', 'itemFk DESC']"
|
||||
save-url="FixedPrices/crud"
|
||||
:user-params="{ warehouseFk: user.warehouseFk }"
|
||||
ref="tableRef"
|
||||
dense
|
||||
:columns="columns"
|
||||
default-mode="table"
|
||||
auto-load
|
||||
:is-editable="true"
|
||||
:right-search="false"
|
||||
:table="{
|
||||
'row-key': 'id',
|
||||
selection: 'multiple',
|
||||
}"
|
||||
:crud-model="{
|
||||
paginate: false,
|
||||
}"
|
||||
v-model:selected="rowsSelected"
|
||||
:row-click="saveOnRowChange"
|
||||
:create-as-dialog="false"
|
||||
:create="{
|
||||
onDataSaved: handleOnDataSave,
|
||||
}"
|
||||
:use-model="true"
|
||||
:disable-option="{ card: true }"
|
||||
>
|
||||
<template #header-selection="scope">
|
||||
<QCheckbox v-model="scope.selected" />
|
||||
</template>
|
||||
<template #body-selection="scope">
|
||||
{{ scope }}
|
||||
<QCheckbox flat v-model="scope.selected" />
|
||||
</template>
|
||||
|
||||
<template #body-cell-itemId="props">
|
||||
<template #column-itemId="props">
|
||||
<QTd>
|
||||
<VnSelect
|
||||
style="max-width: 100px"
|
||||
url="Items/withName"
|
||||
hide-selected
|
||||
option-label="id"
|
||||
|
|
@ -430,18 +515,22 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</VnSelect>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-description="{ row }">
|
||||
<template #column-description="{ row }">
|
||||
<QTd class="col">
|
||||
<span class="link">
|
||||
{{ row.name }}
|
||||
</span>
|
||||
<ItemDescriptorProxy :id="row.itemFk" />
|
||||
<FetchedTags :item="row" />
|
||||
<FetchedTags
|
||||
style="width: max-content; max-width: 220px"
|
||||
:item="row"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-groupingPrice="props">
|
||||
<template #column-rate2="props">
|
||||
<QTd class="col">
|
||||
<VnInput
|
||||
mask="###.##"
|
||||
v-model.number="props.row.rate2"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
>
|
||||
|
|
@ -449,9 +538,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</VnInput>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-packingPrice="props">
|
||||
<template #column-rate3="props">
|
||||
<QTd class="col">
|
||||
<VnInput
|
||||
mask="###.##"
|
||||
v-model.number="props.row.rate3"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
>
|
||||
|
|
@ -459,56 +549,53 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</VnInput>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-minPrice="props">
|
||||
<template #column-minPrice="props">
|
||||
<QTd class="col">
|
||||
<div class="row">
|
||||
<div class="row" style="width: 115px">
|
||||
<QCheckbox
|
||||
class="col"
|
||||
:model-value="props.row.hasMinPrice"
|
||||
@update:model-value="updateMinPrice($event, props)"
|
||||
:false-value="0"
|
||||
:true-value="1"
|
||||
:toggle-indeterminate="false"
|
||||
/>
|
||||
<VnInput
|
||||
class="col"
|
||||
:disable="!props.row.hasMinPrice"
|
||||
mask="###.##"
|
||||
:disable="props.row.hasMinPrice === 1"
|
||||
v-model.number="props.row.minPrice"
|
||||
v-on="getRowUpdateInputEvents(props)"
|
||||
type="number"
|
||||
/>
|
||||
>
|
||||
<template #append>€</template>
|
||||
</VnInput>
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-started="props">
|
||||
<QTd class="col" style="min-width: 160px">
|
||||
<template #column-started="props">
|
||||
<QTd class="col">
|
||||
<VnInputDate
|
||||
class="vnInputDate"
|
||||
:show-event="true"
|
||||
v-model="props.row.started"
|
||||
v-on="getRowUpdateInputEvents(props, false, 'date')"
|
||||
v-bind="
|
||||
isBigger(props.row.started)
|
||||
? { 'bg-color': 'warning', 'is-outlined': true }
|
||||
: {}
|
||||
"
|
||||
v-bind="dateStyle(isBigger(props.row.started))"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-ended="props">
|
||||
<QTd class="col" style="min-width: 150px">
|
||||
<template #column-ended="props">
|
||||
<QTd class="col">
|
||||
<VnInputDate
|
||||
class="vnInputDate"
|
||||
:show-event="true"
|
||||
v-model="props.row.ended"
|
||||
v-on="getRowUpdateInputEvents(props, false, 'date')"
|
||||
v-bind="
|
||||
isLower(props.row.ended)
|
||||
? { 'bg-color': 'warning', 'is-outlined': true }
|
||||
: {}
|
||||
"
|
||||
v-bind="dateStyle(isLower(props.row.started))"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-warehouse="props">
|
||||
<template #column-warehouseFk="props">
|
||||
<QTd class="col">
|
||||
<VnSelect
|
||||
style="max-width: 150px"
|
||||
:options="warehousesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
|
|
@ -518,7 +605,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-deleteAction="{ row, rowIndex }">
|
||||
<template #column-deleteAction="{ row, rowIndex }">
|
||||
<QTd class="col">
|
||||
<QIcon
|
||||
name="delete"
|
||||
|
|
@ -527,40 +614,20 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
color="primary"
|
||||
@click.stop="
|
||||
openConfirmationModal(
|
||||
t('This row will be removed'),
|
||||
t('globals.rowWillBeRemoved'),
|
||||
t('Do you want to clone this item?'),
|
||||
() => removePrice(row.id, rowIndex)
|
||||
)
|
||||
"
|
||||
>
|
||||
<QTooltip class="text-no-wrap">
|
||||
{{ t('Delete') }}
|
||||
{{ t('globals.delete') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #bottom-row>
|
||||
<QTd align="center">
|
||||
<QIcon
|
||||
@click.stop="addRow()"
|
||||
class="fill-icon-on-hover"
|
||||
color="primary"
|
||||
name="add_circle"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add fixed price') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
<QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
|
||||
<QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
|
||||
<QTooltip>
|
||||
{{ t('Edit fixed price(s)') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</VnTable>
|
||||
|
||||
<QDialog ref="editTableCellDialogRef">
|
||||
<EditTableCellValueForm
|
||||
edit-url="FixedPrices/editFixedPrice"
|
||||
|
|
@ -571,12 +638,50 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</QDialog>
|
||||
</QPage>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.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: 90px;
|
||||
}
|
||||
& div.row {
|
||||
& .q-checkbox {
|
||||
& .q-checkbox__inner {
|
||||
position: relative !important;
|
||||
&.q-checkbox__inner--truthy {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.q-field__after,
|
||||
.q-field__append {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tbody tr.highlight .q-td {
|
||||
animation: highlight-animation 4s ease-in-out;
|
||||
}
|
||||
@keyframes highlight-animation {
|
||||
0% {
|
||||
background-color: $primary-light;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -9,18 +9,29 @@ import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
|
|||
|
||||
const { t } = useI18n();
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
warehousesOptions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const itemTypeWorkersOptions = ref([]);
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'name':
|
||||
return { 'i.name': { like: `%${value}%` } };
|
||||
case 'itemFk':
|
||||
case 'warehouseFk':
|
||||
case 'rate2':
|
||||
case 'rate3':
|
||||
param = `fp.${param}`;
|
||||
return { [param]: value };
|
||||
case 'minPrice':
|
||||
param = `i.${param}`;
|
||||
return { [param]: value };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -31,7 +42,7 @@ const itemTypeWorkersOptions = ref([]);
|
|||
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
|
||||
@on-fetch="(data) => (itemTypeWorkersOptions = data)"
|
||||
/>
|
||||
<ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
|
||||
<ItemsFilterPanel :data-key="props.dataKey" :custom-tags="['tags']">
|
||||
<template #body="{ params, searchFn }">
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
|
|
@ -52,9 +63,11 @@ const itemTypeWorkersOptions = ref([]);
|
|||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
url="Warehouses"
|
||||
auto-load
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
:label="t('components.itemsFilterPanel.warehouseFk')"
|
||||
v-model="params.warehouseFk"
|
||||
:options="warehousesOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
dense
|
||||
|
|
@ -93,8 +106,15 @@ const itemTypeWorkersOptions = ref([]);
|
|||
toggle-indeterminate
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection>
|
||||
|
||||
<QCheckbox
|
||||
v-model="params.showBadDates"
|
||||
:label="t(`components.itemsFilterPanel.showBadDates`)"
|
||||
toggle-indeterminate
|
||||
@update:model-value="searchFn()"
|
||||
>
|
||||
</QCheckbox>
|
||||
|
||||
<QCheckbox
|
||||
:label="t('components.itemsFilterPanel.hasMinPrice')"
|
||||
v-model="params.hasMinPrice"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ describe('Ticket descriptor', () => {
|
|||
|
||||
cy.login('developer');
|
||||
cy.visit(`/#/ticket/${ticketId}/summary`);
|
||||
cy.waitForElement('.q-page', 7000);
|
||||
});
|
||||
|
||||
it('should clone the ticket without warehouse', () => {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ describe('WagonTypeCreate', () => {
|
|||
cy.viewport(1920, 1080);
|
||||
cy.login('developer');
|
||||
cy.visit('/#/wagon/type/create');
|
||||
cy.waitForElement('.q-page', 6000);
|
||||
});
|
||||
|
||||
function chooseColor(color) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue