verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 87 Releases Wiki Activity

fix: #8349 fixed ItemFixedPrice crashing and it's e2e test not working #1289

Open
provira wants to merge 18 commits from 8349-e2eItemFixedPrice into dev
pull from: 8349-e2eItemFixedPrice
merge into: verdnatura:dev
Conversation 0 Commits 18 Files Changed 2 +9580 -4454
249 changed files with 9580 additions and 4454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 35d8a8730f - Show all commits

3095
CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

15
cypress.config.js
View File

@ -14,8 +14,8 @@ export default defineConfig({
downloadsFolder: 'test/cypress/downloads',
video: false,
specPattern: 'test/cypress/integration/**/*.spec.js',
experimentalRunAllSpecs: true,
watchForFileChanges: true,
experimentalRunAllSpecs: false,
watchForFileChanges: false,
reporter: 'cypress-mochawesome-reporter',
reporterOptions: {
charts: true,
@ -34,6 +34,17 @@ export default defineConfig({
const plugin = await import('cypress-mochawesome-reporter/plugin');
plugin.default(on);
const fs = await import('fs');
on('task', {
deleteFile(filePath) {
if (fs.existsSync(filePath)) {
fs.unlinkSync(filePath);
return true;
}
return false;
},
});
return config;
},
viewportWidth: 1280,

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "salix-front",
"version": "25.08.0",
"version": "25.10.0",
"description": "Salix frontend",
"productName": "Salix",
"author": "Verdnatura",
@ -71,4 +71,4 @@
"vite": "^6.0.11",
"vitest": "^0.31.1"
}
}
}

1
quasar.config.js
View File

@ -30,7 +30,6 @@ export default configure(function (/* ctx */) {
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'],

23
src/boot/qformMixin.js
View File

@ -9,19 +9,19 @@ export default {
if (!form) return;
try {
const inputsFormCard = form.querySelectorAll(
`input:not([disabled]):not([type="checkbox"])`
`input:not([disabled]):not([type="checkbox"])`,
);
if (inputsFormCard.length) {
focusFirstInput(inputsFormCard[0]);
}
const textareas = document.querySelectorAll(
'textarea:not([disabled]), [contenteditable]:not([disabled])'
'textarea:not([disabled]), [contenteditable]:not([disabled])',
);
if (textareas.length) {
focusFirstInput(textareas[textareas.length - 1]);
}
const inputs = document.querySelectorAll(
'form#formModel input:not([disabled]):not([type="checkbox"])'
'form#formModel input:not([disabled]):not([type="checkbox"])',
);
const input = inputs[0];
if (!input) return;
@ -30,22 +30,5 @@ export default {
} catch (error) {
console.error(error);
}
form.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter' && !that.$attrs['prevent-submit']) {
const input = evt.target;
if (input.type == 'textarea' && evt.shiftKey) {
evt.preventDefault();
let { selectionStart, selectionEnd } = input;
input.value =
input.value.substring(0, selectionStart) +
'\n' +
input.value.substring(selectionEnd);
selectionStart = selectionEnd = selectionStart + 1;
return;
}
evt.preventDefault();
that.onSubmit();
}
});
},
};

1
src/boot/quasar.js
View File

@ -51,4 +51,5 @@ export default boot(({ app }) => {
await useCau(response, message);
};
app.provide('app', app);
});

48
src/components/CreateNewPostcodeForm.vue
View File

@ -2,7 +2,6 @@
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectProvince from 'src/components/VnSelectProvince.vue';
@ -21,14 +20,11 @@ const postcodeFormData = reactive({
provinceFk: null,
townFk: null,
});
const townsFetchDataRef = ref(false);
const townFilter = ref({});
const countriesRef = ref(false);
const provincesOptions = ref([]);
const townsOptions = ref([]);
const town = ref({});
const countryFilter = ref({});
function onDataSaved(formData) {
const newPostcode = {
@ -51,7 +47,6 @@ async function setCountry(countryFk, data) {
data.townFk = null;
data.provinceFk = null;
data.countryFk = countryFk;
await fetchTowns();
}
// Province
@ -60,22 +55,11 @@ async function setProvince(id, data) {
const newProvince = provincesOptions.value.find((province) => province.id == id);
if (newProvince) data.countryFk = newProvince.countryFk;
postcodeFormData.provinceFk = id;
await fetchTowns();
}
async function onProvinceCreated(data) {
postcodeFormData.provinceFk = data.id;
}
function provinceByCountry(countryFk = postcodeFormData.countryFk) {
return provincesOptions.value
.filter((province) => province.countryFk === countryFk)
.map(({ id }) => id);
}
// Town
async function handleTowns(data) {
townsOptions.value = data;
}
function setTown(newTown, data) {
town.value = newTown;
data.provinceFk = newTown?.provinceFk ?? newTown;
@ -88,18 +72,6 @@ async function onCityCreated(newTown, formData) {
formData.townFk = newTown;
setTown(newTown, formData);
}
async function fetchTowns(countryFk = postcodeFormData.countryFk) {
if (!countryFk) return;
const provinces = postcodeFormData.provinceFk
? [postcodeFormData.provinceFk]
: provinceByCountry();
townFilter.value.where = {
provinceFk: {
inq: provinces,
},
};
await townsFetchDataRef.value?.fetch();
}
async function filterTowns(name) {
if (name !== '') {
@ -108,22 +80,11 @@ async function filterTowns(name) {
like: `%${name}%`,
},
};
await townsFetchDataRef.value?.fetch();
}
}
</script>
<template>
<FetchData
ref="townsFetchDataRef"
:sort-by="['name ASC']"
:limit="30"
:filter="townFilter"
@on-fetch="handleTowns"
auto-load
url="Towns/location"
/>
<FormModelPopup
url-create="postcodes"
model="postcode"
@ -149,14 +110,13 @@ async function filterTowns(name) {
@filter="filterTowns"
:tooltip="t('Create city')"
v-model="data.townFk"
:options="townsOptions"
option-label="name"
option-value="id"
url="Towns/location"
:rules="validate('postcode.city')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:emit-value="false"
required
data-cy="locationTown"
sort-by="name ASC"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
@ -197,16 +157,12 @@ async function filterTowns(name) {
/>
<VnSelect
ref="countriesRef"
:limit="30"
:filter="countryFilter"
:sort-by="['name ASC']"
auto-load
url="Countries"
required
:label="t('Country')"
hide-selected
option-label="name"
option-value="id"
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
@update:model-value="(value) => setCountry(value, data)"

5
src/components/CreateNewProvinceForm.vue
View File

@ -62,12 +62,9 @@ const where = computed(() => {
auto-load
:where="where"
url="Autonomies/location"
:sort-by="['name ASC']"
:limit="30"
sort-by="name ASC"
:label="t('Autonomy')"
hide-selected
option-label="name"
option-value="id"
v-model="data.autonomyFk"
:rules="validate('province.autonomyFk')"
>

16
src/components/CrudModel.vue
View File

@ -64,6 +64,10 @@ const $props = defineProps({
type: Function,
default: null,
},
beforeSaveFn: {
type: Function,
default: null,
},
goTo: {
type: String,
default: '',
@ -176,7 +180,11 @@ async function saveChanges(data) {
hasChanges.value = false;
return;
}
const changes = data || getChanges();
let changes = data || getChanges();
if ($props.beforeSaveFn) {
changes = await $props.beforeSaveFn(changes, getChanges);
}
try {
await axios.post($props.saveUrl || $props.url + '/crud', changes);
} finally {
@ -229,12 +237,12 @@ async function remove(data) {
componentProps: {
title: t('globals.confirmDeletion'),
message: t('globals.confirmDeletionMessage'),
newData,
data: { deletes: ids },
ids,
promise: saveChanges,
},
})
.onOk(async () => {
await saveChanges({ deletes: ids });
newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
fetch(newData);
});
@ -374,6 +382,8 @@ watch(formUrl, async () => {
@click="onSubmit"
:disable="!hasChanges"
:title="t('globals.save')"
v-shortcut="'s'"
shortcut="s"
data-cy="crudModelDefaultSaveBtn"
/>
<slot name="moreAfterActions" />

21
src/components/FilterItemForm.vue
View File

@ -42,7 +42,6 @@ const itemFilter = {
const itemFilterParams = reactive({});
const closeButton = ref(null);
const isLoading = ref(false);
const producersOptions = ref([]);
const ItemTypesOptions = ref([]);
const InksOptions = ref([]);
const tableRows = ref([]);
@ -121,23 +120,17 @@ const selectItem = ({ id }) => {
</script>
<template>
<FetchData
url="Producers"
@on-fetch="(data) => (producersOptions = data)"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
auto-load
/>
<FetchData
url="ItemTypes"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
order="name"
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
order="name ASC"
@on-fetch="(data) => (ItemTypesOptions = data)"
auto-load
/>
<FetchData
url="Inks"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
order="name"
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
order="name ASC"
@on-fetch="(data) => (InksOptions = data)"
auto-load
/>
@ -152,11 +145,11 @@ const selectItem = ({ id }) => {
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
<VnSelect
:label="t('globals.producer')"
:options="producersOptions"
hide-selected
option-label="name"
option-value="id"
v-model="itemFilterParams.producerFk"
url="Producers"
:fields="['id', 'name']"
sort-by="name ASC"
/>
<VnSelect
:label="t('globals.type')"

6
src/components/FilterTravelForm.vue
View File

@ -124,7 +124,7 @@ const selectTravel = ({ id }) => {
<FetchData
url="AgencyModes"
@on-fetch="(data) => (agenciesOptions = data)"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
auto-load
/>
<FetchData
@ -181,6 +181,7 @@ const selectTravel = ({ id }) => {
color="primary"
:disabled="isLoading"
:loading="isLoading"
data-cy="save-filter-travel-form"
/>
</div>
<QTable
@ -191,9 +192,10 @@ const selectTravel = ({ id }) => {
:no-data-label="t('Enter a new search')"
class="q-mt-lg"
@row-click="(_, row) => selectTravel(row)"
data-cy="table-filter-travel-form"
>
<template #body-cell-id="{ row }">
<QTd auto-width @click.stop>
<QTd auto-width @click.stop data-cy="travelFk-travel-form">
<QBtn flat color="blue">{{ row.id }}</QBtn>
<TravelDescriptorProxy :id="row.id" />
</QTd>

46
src/components/FormModel.vue
View File

@ -1,6 +1,6 @@
<script setup>
import axios from 'axios';
import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
import { onMounted, onUnmounted, computed, ref, watch, nextTick, useAttrs } from 'vue';
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
@ -22,6 +22,7 @@ const { validate } = useValidator();
const { notify } = useNotify();
const route = useRoute();
const myForm = ref(null);
const attrs = useAttrs();
const $props = defineProps({
url: {
type: String,
@ -106,14 +107,14 @@ const isLoading = ref(false);
const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges);
const originalData = computed(() => state.get(modelValue));
const formData = ref({});
const formData = ref();
const defaultButtons = computed(() => ({
save: {
dataCy: 'saveDefaultBtn',
color: 'primary',
icon: 'save',
label: 'globals.save',
click: () => myForm.value.submit(),
click: async () => await save(),
type: 'submit',
},
reset: {
@ -134,7 +135,8 @@ onMounted(async () => {
if (!$props.formInitialData) {
if ($props.autoLoad && $props.url) await fetch();
else if (arrayData.store.data) updateAndEmit('onFetch', arrayData.store.data);
else if (arrayData.store.data)
updateAndEmit('onFetch', { val: arrayData.store.data });
}
if ($props.observeFormChanges) {
watch(
@ -154,7 +156,7 @@ onMounted(async () => {
if (!$props.url)
watch(
() => arrayData.store.data,
(val) => updateAndEmit('onFetch', val),
(val) => updateAndEmit('onFetch', { val }),
);
watch(
@ -200,7 +202,7 @@ async function fetch() {
});
if (Array.isArray(data)) data = data[0] ?? {};
updateAndEmit('onFetch', data);
updateAndEmit('onFetch', { val: data });
} catch (e) {
state.set(modelValue, {});
throw e;
@ -227,7 +229,11 @@ async function save() {
if ($props.urlCreate) notify('globals.dataCreated', 'positive');
updateAndEmit('onDataSaved', formData.value, response?.data);
updateAndEmit('onDataSaved', {
val: formData.value,
res: response?.data,
old: originalData.value,
});
if ($props.reload) await arrayData.fetch({});
hasChanges.value = false;
} finally {
@ -242,7 +248,7 @@ async function saveAndGo() {
function reset() {
formData.value = JSON.parse(JSON.stringify(originalData.value));
updateAndEmit('onFetch', originalData.value);
updateAndEmit('onFetch', { val: originalData.value });
if ($props.observeFormChanges) {
hasChanges.value = false;
isResetting.value = true;
@ -264,11 +270,11 @@ function filter(value, update, filterOptions) {
);
}
function updateAndEmit(evt, val, res) {
function updateAndEmit(evt, { val, res, old } = { val: null, res: null, old: null }) {
state.set(modelValue, val);
if (!$props.url) arrayData.store.data = val;
emit(evt, state.get(modelValue), res);
emit(evt, state.get(modelValue), res, old);
}
function trimData(data) {
@ -279,6 +285,22 @@ function trimData(data) {
return data;
}
async function onKeyup(evt) {
if (evt.key === 'Enter' && !('prevent-submit' in attrs)) {
const input = evt.target;
if (input.type == 'textarea' && evt.shiftKey) {
let { selectionStart, selectionEnd } = input;
input.value =
input.value.substring(0, selectionStart) +
'\n' +
input.value.substring(selectionEnd);
selectionStart = selectionEnd = selectionStart + 1;
return;
}
await save();
}
}
defineExpose({
save,
isLoading,
@ -293,12 +315,12 @@ defineExpose({
<QForm
ref="myForm"
v-if="formData"
@submit="save"
@submit.prevent
@keyup.prevent="onKeyup"
@reset="reset"
class="q-pa-md"
:style="maxWidth ? 'max-width: ' + maxWidth : ''"
id="formModel"
:prevent-submit="$attrs['prevent-submit']"
>
<QCard>
<slot

38
src/components/FormModelPopup.vue
View File

@ -15,23 +15,35 @@ defineProps({
type: String,
default: '',
},
showSaveAndContinueBtn: {
type: Boolean,
default: false,
},
});
const { t } = useI18n();
const formModelRef = ref(null);
const closeButton = ref(null);
const isSaveAndContinue = ref(false);
const onDataSaved = (formData, requestResponse) => {
if (closeButton.value) closeButton.value.click();
if (closeButton.value && !isSaveAndContinue.value) closeButton.value.click();
emit('onDataSaved', formData, requestResponse);
};
const onClick = async (saveAndContinue) => {
isSaveAndContinue.value = saveAndContinue;
await formModelRef.value.save();
};
const isLoading = computed(() => formModelRef.value?.isLoading);
const reset = computed(() => formModelRef.value?.reset);
defineExpose({
isLoading,
onDataSaved,
isSaveAndContinue,
reset,
});
</script>
@ -59,15 +71,19 @@ defineExpose({
flat
:disabled="isLoading"
:loading="isLoading"
@click="emit('onDataCanceled')"
v-close-popup
data-cy="FormModelPopup_cancel"
v-close-popup
z-max
@click="
isSaveAndContinue = false;
emit('onDataCanceled');
"
/>
<QBtn
:flat="showSaveAndContinueBtn"
:label="t('globals.save')"
:title="t('globals.save')"
type="submit"
@click="onClick(false)"
color="primary"
class="q-ml-sm"
:disabled="isLoading"
@ -75,6 +91,18 @@ defineExpose({
data-cy="FormModelPopup_save"
z-max
/>
<QBtn
v-if="showSaveAndContinueBtn"
:label="t('globals.isSaveAndContinue')"
:title="t('globals.isSaveAndContinue')"
color="primary"
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
data-cy="FormModelPopup_isSaveAndContinue"
z-max
@click="onClick(true)"
/>
</div>
</template>
</FormModel>

23
src/components/ItemsFilterPanel.vue
View File

@ -121,23 +121,25 @@ const removeTag = (index, params, search) => {
applyTags(params, search);
};
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
categoryList.value = (data || []).map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
fetchItemTypes();
};
</script>
<template>
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<FetchData
url="ItemCategories"
auto-load
@on-fetch="setCategoryList"
:where="{ display: { neq: 0 } }"
/>
<FetchData
url="Tags"
:filter="{ fields: ['id', 'name', 'isFree'] }"
auto-load
limit="30"
@on-fetch="(data) => (tagOptions = data)"
/>
<VnFilterPanel
@ -195,8 +197,6 @@ const setCategoryList = (data) => {
:label="t('components.itemsFilterPanel.typeFk')"
v-model="params.typeFk"
:options="itemTypesOptions"
option-value="id"
option-label="name"
dense
outlined
rounded
@ -234,7 +234,6 @@ const setCategoryList = (data) => {
:label="t('globals.tag')"
v-model="value.selectedTag"
:options="tagOptions"
option-label="name"
dense
outlined
rounded
@ -328,7 +327,6 @@ en:
active: Is active
visible: Is visible
floramondo: Is floramondo
salesPersonFk: Buyer
categoryFk: Category
es:
@ -339,7 +337,6 @@ es:
active: Activo
visible: Visible
floramondo: Floramondo
salesPersonFk: Comprador
categoryFk: Categoría
Plant: Planta natural
Flower: Flor fresca

1
src/components/LeftMenuItem.vue
View File

@ -26,6 +26,7 @@ const itemComputed = computed(() => {
:to="{ name: itemComputed.name }"
clickable
v-ripple
:data-cy="`${itemComputed.name}-menu-item`"
>
<QItemSection avatar v-if="itemComputed.icon">
<QIcon :name="itemComputed.icon" />

15
src/components/RefundInvoiceForm.vue
View File

@ -9,6 +9,7 @@ import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
const $props = defineProps({
invoiceOutData: {
@ -131,15 +132,11 @@ const refund = async () => {
:required="true"
/> </VnRow
><VnRow>
<div>
<QCheckbox
:label="t('Inherit warehouse')"
v-model="invoiceParams.inheritWarehouse"
/>
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>{{ t('Inherit warehouse tooltip') }}</QTooltip>
</QIcon>
</div>
<VnCheckbox
v-model="invoiceParams.inheritWarehouse"
:label="t('Inherit warehouse')"
:info="t('Inherit warehouse tooltip')"
/>
</VnRow>
</template>
</FormPopup>

19
src/components/TicketProblems.vue
View File

@ -1,8 +1,22 @@
<script setup>
import { toCurrency } from 'src/filters';
defineProps({ row: { type: Object, required: true } });
</script>
<template>
<span class="q-gutter-x-xs">
<router-link
v-if="row.claim?.claimFk"
:to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
class="link"
>
<QIcon name="vn:claims" size="xs">
<QTooltip>
{{ t('ticketSale.claim') }}:
{{ row.claim?.claimFk }}
</QTooltip>
</QIcon>
</router-link>
<QIcon
v-if="row?.risk"
name="vn:risk"
@ -10,7 +24,8 @@ defineProps({ row: { type: Object, required: true } });
size="xs"
>
<QTooltip>
{{ $t('salesTicketsTable.risk') }}: {{ row.risk - row.credit }}
{{ $t('salesTicketsTable.risk') }}:
{{ toCurrency(row.risk - row.credit) }}
</QTooltip>
</QIcon>
<QIcon
@ -53,7 +68,7 @@ defineProps({ row: { type: Object, required: true } });
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
</QIcon>
<QIcon
v-if="!row?.isTaxDataChecked === 0"
v-if="row?.isTaxDataChecked !== 0"
name="vn:no036"
color="primary"
size="xs"

15
src/components/TransferInvoiceForm.vue
View File

@ -10,6 +10,7 @@ import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import VnCheckbox from './common/VnCheckbox.vue';
const $props = defineProps({
invoiceOutData: {
@ -186,15 +187,11 @@ const makeInvoice = async () => {
/>
</VnRow>
<VnRow>
<div>
<QCheckbox
:label="t('Bill destination client')"
v-model="checked"
/>
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
</QIcon>
</div>
<VnCheckbox
v-model="checked"
:label="t('Bill destination client')"
:info="t('transferInvoiceInfo')"
/>
</VnRow>
</template>
</FormPopup>

51
src/components/VnTable/VnColumn.vue
View File

@ -1,9 +1,8 @@
<script setup>
import { markRaw, computed } from 'vue';
import { QIcon, QCheckbox } from 'quasar';
import { QIcon, QToggle } from 'quasar';
import { dashIfEmpty } from 'src/filters';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
import VnSelectCache from 'components/common/VnSelectCache.vue';
import VnInput from 'components/common/VnInput.vue';
@ -12,8 +11,11 @@ import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnComponent from 'components/common/VnComponent.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';
import VnSelectEnum from '../common/VnSelectEnum.vue';
import VnCheckbox from '../common/VnCheckbox.vue';
const model = defineModel(undefined, { required: true });
const emit = defineEmits(['blur']);
const $props = defineProps({
column: {
type: Object,
@ -39,10 +41,18 @@ const $props = defineProps({
type: Object,
default: null,
},
autofocus: {
type: Boolean,
default: false,
},
showLabel: {
type: Boolean,
default: null,
},
eventHandlers: {
type: Object,
default: null,
},
});
const defaultSelect = {
@ -99,7 +109,8 @@ const defaultComponents = {
},
},
checkbox: {
component: markRaw(QCheckbox),
ref: 'checkbox',
component: markRaw(VnCheckbox),
attrs: ({ model }) => {
const defaultAttrs = {
disable: !$props.isEditable,
@ -115,6 +126,10 @@ const defaultComponents = {
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
autofocus: true,
},
events: {
blur: () => emit('blur'),
},
},
select: {
@ -125,12 +140,19 @@ const defaultComponents = {
component: markRaw(VnSelect),
...defaultSelect,
},
selectEnum: {
component: markRaw(VnSelectEnum),
...defaultSelect,
},
icon: {
component: markRaw(QIcon),
},
userLink: {
component: markRaw(VnUserLink),
},
toggle: {
component: markRaw(QToggle),
},
};
const value = computed(() => {
@ -160,7 +182,28 @@ const col = computed(() => {
return newColumn;
});
const components = computed(() => $props.components ?? defaultComponents);
const components = computed(() => {
const sourceComponents = $props.components ?? defaultComponents;
return Object.keys(sourceComponents).reduce((acc, key) => {
const component = sourceComponents[key];
if (!component || typeof component !== 'object') {
acc[key] = component;
return acc;
}
acc[key] = {
...component,
attrs: {
...(component.attrs || {}),
autofocus: $props.autofocus,
},
event: { ...component?.event, ...$props?.eventHandlers },
};
return acc;
}, {});
});
</script>
<template>
<div class="row no-wrap">

58
src/components/VnTable/VnFilter.vue
View File

@ -1,14 +1,12 @@
<script setup>
import { markRaw, computed } from 'vue';
import { QCheckbox } from 'quasar';
import { QCheckbox, QToggle } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue';
import VnColumn from 'components/VnTable/VnColumn.vue';
const $props = defineProps({
column: {
@ -27,6 +25,10 @@ const $props = defineProps({
type: String,
default: 'table',
},
customClass: {
type: String,
default: '',
},
});
defineExpose({ addFilter, props: $props });
@ -34,7 +36,7 @@ defineExpose({ addFilter, props: $props });
const model = defineModel(undefined, { required: true });
const arrayData = useArrayData(
$props.dataKey,
$props.searchUrl ? { searchUrl: $props.searchUrl } : null
$props.searchUrl ? { searchUrl: $props.searchUrl } : null,
);
const columnFilter = computed(() => $props.column?.columnFilter);
@ -46,19 +48,18 @@ const enterEvent = {
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-xs q-pb-xs q-pt-none fit',
dense: true,
};
const forceAttrs = {
label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
label: $props.showTitle ? '' : (columnFilter.value?.label ?? $props.column.label),
};
const selectComponent = {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none fit',
class: `q-pt-none fit ${$props.customClass}`,
dense: true,
filled: !$props.showTitle,
},
@ -109,14 +110,24 @@ const components = {
component: markRaw(QCheckbox),
event: updateEvent,
attrs: {
dense: true,
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
class: $props.showTitle ? 'q-py-sm' : 'q-px-md q-py-xs fit',
'toggle-indeterminate': true,
size: 'sm',
},
forceAttrs,
},
select: selectComponent,
rawSelect: selectComponent,
toggle: {
component: markRaw(QToggle),
event: updateEvent,
attrs: {
class: $props.showTitle ? 'q-py-sm' : 'q-px-md q-py-xs fit',
'toggle-indeterminate': true,
size: 'sm',
},
forceAttrs,
},
};
async function addFilter(value, name) {
@ -132,19 +143,8 @@ async function addFilter(value, name) {
await arrayData.addFilter({ params: { [field]: value } });
}
function alignRow() {
switch ($props.column.align) {
case 'left':
return 'justify-start items-start';
case 'right':
return 'justify-end items-end';
default:
return 'flex-center';
}
}
const showFilter = computed(
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
() => $props.column?.columnFilter !== false && $props.column.name != 'tableActions',
);
const onTabPressed = async () => {
@ -152,13 +152,8 @@ const onTabPressed = async () => {
};
</script>
<template>
<div
v-if="showFilter"
class="full-width"
:class="alignRow()"
style="max-height: 45px; overflow: hidden"
>
<VnTableColumn
<div v-if="showFilter" class="full-width" style="overflow: hidden">
<VnColumn
:column="$props.column"
default="input"
v-model="model"
@ -168,3 +163,8 @@ const onTabPressed = async () => {
/>
</div>
</template>
<style lang="scss" scoped>
label.vn-label-padding > .q-field__inner > .q-field__control {
padding: inherit !important;
}
</style>

101
src/components/VnTable/VnOrder.vue
View File

@ -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 });
@ -41,55 +45,78 @@ async function orderBy(name, direction) {
break;
}
if (!direction) return await arrayData.deleteOrder(name);
await arrayData.addOrder(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"
class="items-center no-wrap cursor-pointer title"
:style="textAlignToFlex(align)"
>
<span :title="label">{{ label }}</span>
<QChip
v-if="name"
:label="!vertical ? model?.index : ''"
:icon="
(model?.index || hover) && !vertical
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: undefined
"
:size="vertical ? '' : 'sm'"
:class="[
model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '',
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 40px"
>
<div
class="column flex-center"
v-if="vertical"
:style="!model?.index && 'color: #5d5d5d'"
<div v-if="name && model?.index">
<QChip
:label="!vertical ? model?.index : ''"
:icon="
(model?.index || hover) && !vertical
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: undefined
"
:size="vertical ? '' : 'sm'"
:class="[
model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '',
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 40px; max-height: 30px"
>
{{ model?.index }}
<QIcon
:name="
model?.index
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: 'swap_vert'
"
size="xs"
/>
</div>
</QChip>
<div
class="column flex-center"
v-if="vertical"
:style="!model?.index && 'color: #5d5d5d'"
>
{{ model?.index }}
<QIcon
:name="
model?.index
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: 'swap_vert'
"
size="xs"
/>
</div>
</QChip>
</div>
</div>
</template>
<style lang="scss" scoped>
.title {
display: flex;
align-items: center;
height: 30px;
width: 100%;
color: var(--vn-label-color);
white-space: nowrap;
}
</style>

596
src/components/VnTable/VnTable.vue
View File

@ -1,22 +1,38 @@
<script setup>
import { ref, onBeforeMount, onMounted, computed, watch, useAttrs } from 'vue';
import {
ref,
onBeforeMount,
onMounted,
onUnmounted,
computed,
watch,
h,
render,
inject,
useAttrs,
nextTick,
} from 'vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useQuasar, date } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { useFilterParams } from 'src/composables/useFilterParams';
import { dashIfEmpty, toDate } from 'src/filters';
import CrudModel from 'src/components/CrudModel.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue';
import VnColumn from 'components/VnTable/VnColumn.vue';
import VnFilter from 'components/VnTable/VnFilter.vue';
import VnTableChip from 'components/VnTable/VnChip.vue';
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
import VnTableFilter from './VnTableFilter.vue';
import { getColAlign } from 'src/composables/getColAlign';
const arrayData = useArrayData(useAttrs()['data-key']);
const $props = defineProps({
columns: {
type: Array,
@ -42,10 +58,6 @@ const $props = defineProps({
type: [Function, Boolean],
default: null,
},
rowCtrlClick: {
type: [Function, Boolean],
default: null,
},
redirect: {
type: String,
default: null,
@ -114,7 +126,19 @@ const $props = defineProps({
type: Boolean,
default: false,
},
withFilters: {
type: Boolean,
default: true,
},
overlay: {
type: Boolean,
default: false,
},
createComplement: {
type: Object,
},
});
const { t } = useI18n();
const stateStore = useStateStore();
const route = useRoute();
@ -132,10 +156,17 @@ const showForm = ref(false);
const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkipped = ref();
const createForm = ref();
const createRef = ref(null);
const tableRef = ref();
const params = ref(useFilterParams($attrs['data-key']).params);
const orders = ref(useFilterParams($attrs['data-key']).orders);
const app = inject('app');
const editingRow = ref(null);
const editingField = ref(null);
const isTableMode = computed(() => mode.value == TABLE_MODE);
const selectRegex = /select/;
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
const tableModes = [
{
icon: 'view_column',
@ -156,7 +187,8 @@ onBeforeMount(() => {
hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
});
onMounted(() => {
onMounted(async () => {
if ($props.isEditable) document.addEventListener('click', clickHandler);
mode.value =
quasar.platform.is.mobile && !$props.disableOption?.card
? CARD_MODE
@ -178,14 +210,25 @@ onMounted(() => {
}
});
onUnmounted(async () => {
if ($props.isEditable) document.removeEventListener('click', clickHandler);
});
watch(
() => $props.columns,
(value) => splitColumns(value),
{ immediate: true },
);
const isTableMode = computed(() => mode.value == TABLE_MODE);
const showRightIcon = computed(() => $props.rightSearch || $props.rightSearchIcon);
defineExpose({
create: createForm,
reload,
redirect: redirectFn,
selected,
CrudModelRef,
params,
tableRef,
});
function splitColumns(columns) {
splittedColumns.value = {
@ -231,16 +274,6 @@ const rowClickFunction = computed(() => {
return () => {};
});
const rowCtrlClickFunction = computed(() => {
if ($props.rowCtrlClick != undefined) return $props.rowCtrlClick;
if ($props.redirect)
return (evt, { id }) => {
stopEventPropagation(evt);
window.open(`/#/${$props.redirect}/${id}`, '_blank');
};
return () => {};
});
function redirectFn(id) {
router.push({ path: `/${$props.redirect}/${id}` });
}
@ -262,21 +295,6 @@ function columnName(col) {
return name;
}
function getColAlign(col) {
return 'text-' + (col.align ?? 'left');
}
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
defineExpose({
create: createForm,
reload,
redirect: redirectFn,
selected,
CrudModelRef,
params,
tableRef,
});
function handleOnDataSaved(_) {
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
else $props.create.onDataSaved(_);
@ -304,6 +322,241 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
}
}
}
function isEditableColumn(column) {
const isEditableCol = column?.isEditable ?? true;
const isVisible = column?.visible ?? true;
const hasComponent = column?.component;
return $props.isEditable && isVisible && hasComponent && isEditableCol;
}
function hasEditableFormat(column) {
if (isEditableColumn(column)) return 'editable-text';
}
const clickHandler = async (event) => {
const clickedElement = event.target.closest('td');
const isDateElement = event.target.closest('.q-date');
const isTimeElement = event.target.closest('.q-time');
const isQselectDropDown = event.target.closest('.q-select__dropdown-icon');
if (isDateElement || isTimeElement || isQselectDropDown) return;
if (clickedElement === null) {
await destroyInput(editingRow.value, editingField.value);
return;
}
const rowIndex = clickedElement.getAttribute('data-row-index');
const colField = clickedElement.getAttribute('data-col-field');
const column = $props.columns.find((col) => col.name === colField);
if (editingRow.value !== null && editingField.value !== null) {
if (editingRow.value == rowIndex && editingField.value == colField) return;
await destroyInput(editingRow.value, editingField.value);
}
if (isEditableColumn(column)) {
await renderInput(Number(rowIndex), colField, clickedElement);
}
};
async function handleTabKey(event, rowIndex, colField) {
if (editingRow.value == rowIndex && editingField.value == colField)
await destroyInput(editingRow.value, editingField.value);
const direction = event.shiftKey ? -1 : 1;
const { nextRowIndex, nextColumnName } = await handleTabNavigation(
rowIndex,
colField,
direction,
);
if (nextRowIndex < 0 || nextRowIndex >= arrayData.store.data.length) return;
event.preventDefault();
await renderInput(nextRowIndex, nextColumnName, null);
}
async function renderInput(rowId, field, clickedElement) {
editingField.value = field;
editingRow.value = rowId;
const originalColumn = $props.columns.find((col) => col.name === field);
const column = { ...originalColumn, ...{ label: '' } };
const row = CrudModelRef.value.formData[rowId];
const oldValue = CrudModelRef.value.formData[rowId][column?.name];
if (!clickedElement)
clickedElement = document.querySelector(
`[data-row-index="${rowId}"][data-col-field="${field}"]`,
);
Array.from(clickedElement.childNodes).forEach((child) => {
child.style.visibility = 'hidden';
child.style.position = 'relative';
});
const isSelect = selectRegex.test(column?.component);
if (isSelect) column.attrs = { ...column.attrs, 'emit-value': false };
const node = h(VnColumn, {
row: row,
class: 'temp-input',
column: column,
modelValue: row[column.name],
componentProp: 'columnField',
autofocus: true,
focusOnMount: true,
eventHandlers: {
'update:modelValue': async (value) => {
if (isSelect && value) {
row[column.name] = value[column.attrs?.optionValue ?? 'id'];
row[column?.name + 'TextValue'] =
value[column.attrs?.optionLabel ?? 'name'];
await column?.cellEvent?.['update:modelValue']?.(
value,
oldValue,
row,
);
} else row[column.name] = value;
await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row);
},
keyup: async (event) => {
if (event.key === 'Enter')
await destroyInput(rowIndex, field, clickedElement);
},
keydown: async (event) => {
switch (event.key) {
case 'Tab':
await handleTabKey(event, rowId, field);
event.stopPropagation();
break;
case 'Escape':
await destroyInput(rowId, field, clickedElement);
break;
default:
break;
}
},
click: (event) => {
column?.cellEvent?.['click']?.(event, row);
},
},
});
node.appContext = app._context;
render(node, clickedElement);
if (['toggle'].includes(column?.component))
node.el?.querySelector('span > div').focus();
if (['checkbox', undefined].includes(column?.component))
node.el?.querySelector('span > div > div').focus();
}
async function destroyInput(rowIndex, field, clickedElement) {
if (!clickedElement)
clickedElement = document.querySelector(
`[data-row-index="${rowIndex}"][data-col-field="${field}"]`,
);
if (clickedElement) {
await nextTick();
render(null, clickedElement);
Array.from(clickedElement.childNodes).forEach((child) => {
child.style.visibility = 'visible';
child.style.position = '';
});
}
if (editingRow.value !== rowIndex || editingField.value !== field) return;
editingRow.value = null;
editingField.value = null;
}
async function handleTabNavigation(rowIndex, colName, direction) {
const columns = $props.columns;
const totalColumns = columns.length;
let currentColumnIndex = columns.findIndex((col) => col.name === colName);
let iterations = 0;
let newColumnIndex = currentColumnIndex;
do {
iterations++;
newColumnIndex = (newColumnIndex + direction + totalColumns) % totalColumns;
if (isEditableColumn(columns[newColumnIndex])) break;
} while (iterations < totalColumns);
if (iterations >= totalColumns + 1) return;
if (direction === 1 && newColumnIndex <= currentColumnIndex) {
rowIndex++;
} else if (direction === -1 && newColumnIndex >= currentColumnIndex) {
rowIndex--;
}
return { nextRowIndex: rowIndex, nextColumnName: columns[newColumnIndex].name };
}
function getCheckboxIcon(value) {
switch (typeof value) {
case 'boolean':
return value ? 'check' : 'close';
case 'number':
return value === 0 ? 'close' : 'check';
case 'undefined':
return 'indeterminate_check_box';
default:
return 'indeterminate_check_box';
}
}
function getToggleIcon(value) {
if (value === null) return 'help_outline';
return value ? 'toggle_on' : 'toggle_off';
}
function formatColumnValue(col, row, dashIfEmpty) {
if (col?.format) {
if (selectRegex.test(col?.component) && row[col?.name + 'TextValue']) {
return dashIfEmpty(row[col?.name + 'TextValue']);
} else {
return col.format(row, dashIfEmpty);
}
}
if (col?.component === 'date') return dashIfEmpty(toDate(row[col?.name]));
if (col?.component === 'time')
return row[col?.name] >= 5
? dashIfEmpty(date.formatDate(new Date(row[col?.name]), 'HH:mm'))
: row[col?.name];
if (selectRegex.test(col?.component) && $props.isEditable) {
const { find, url } = col.attrs;
const urlRelation = url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
if (col?.attrs.options) {
const find = col?.attrs.options.find((option) => option.id === row[col.name]);
if (!col.attrs?.optionLabel || !find) return dashIfEmpty(row[col?.name]);
return dashIfEmpty(find[col.attrs?.optionLabel ?? 'name']);
}
if (typeof row[urlRelation] == 'object') {
if (typeof find == 'object')
return dashIfEmpty(row[urlRelation][find?.label ?? 'name']);
return dashIfEmpty(row[urlRelation][col?.attrs.optionLabel ?? 'name']);
}
if (typeof row[urlRelation] == 'string') return dashIfEmpty(row[urlRelation]);
}
return dashIfEmpty(row[col?.name]);
}
function cardClick(_, row) {
if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
}
</script>
<template>
<QDrawer
@ -311,7 +564,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
v-model="stateStore.rightDrawer"
side="right"
:width="256"
show-if-above
:overlay="$props.overlay"
>
<QScrollArea class="fit">
<VnTableFilter
@ -332,7 +585,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
<CrudModel
v-bind="$attrs"
:class="$attrs['class'] ?? 'q-px-md'"
:limit="$attrs['limit'] ?? 20"
:limit="$attrs['limit'] ?? 100"
ref="CrudModelRef"
@on-fetch="(...args) => emit('onFetch', ...args)"
:search-url="searchUrl"
@ -348,8 +601,12 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
<QTable
ref="tableRef"
v-bind="table"
class="vnTable"
:class="{ 'last-row-sticky': $props.footer }"
:class="[
'vnTable',
table ? 'selection-cell' : '',
$props.footer ? 'last-row-sticky' : '',
]"
wrap-cells
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
@ -363,11 +620,13 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
@selection="(details) => handleSelection(details, rows)"
:hide-selected-banner="true"
>
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
<slot name="top-left"> </slot>
</template>
<template #top-right v-if="!$props.withoutHeader">
<slot name="top-right"></slot>
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
@ -381,43 +640,43 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
dense
:options="tableModes.filter((mode) => !mode.disable)"
/>
<QBtn
v-if="showRightIcon"
icon="filter_alt"
class="bg-vn-section-color q-ml-sm"
dense
@click="stateStore.toggleRightDrawer()"
/>
</template>
<template #header-cell="{ col }">
<QTh
v-if="col.visible ?? true"
:style="col.headerStyle"
:class="col.headerClass"
v-bind:class="col.headerClass"
class="body-cell"
:style="col?.width ? `max-width: ${col?.width}` : ''"
>
<div
class="column ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
class="no-padding"
:style="[
withFilters && $props.columnSearch ? 'height: 75px' : '',
]"
>
<div class="row items-center no-wrap" style="height: 30px">
<div style="height: 30px">
<QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:label="col?.labelAbbreviation ?? col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:align="getColAlign(col)"
/>
</div>
<VnFilter
v-if="$props.columnSearch"
v-if="
$props.columnSearch &&
col.columnSearch !== false &&
withFilters
"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
class="full-width"
customClass="header-filter"
/>
</div>
</QTh>
@ -435,32 +694,67 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
</QTd>
</template>
<template #body-cell="{ col, row, rowIndex }">
<!-- Columns -->
<QTd
auto-width
class="no-margin"
:class="[getColAlign(col), col.columnClass]"
:style="col.style"
class="no-margin q-px-xs"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
"
:style="{
'max-width': col?.width ?? false,
position: 'relative',
}"
:class="[
col.columnClass,
'body-cell no-margin no-padding',
getColAlign(col),
]"
:data-row-index="rowIndex"
:data-col-field="col?.name"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="rowIndex"
<div
class="no-padding no-margin peter"
style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
<VnTableColumn
:column="col"
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
</slot>
:row-index="rowIndex"
>
<QIcon
v-if="col?.component === 'toggle'"
:name="
col?.getIcon
? col.getIcon(row[col?.name])
: getToggleIcon(row[col?.name])
"
style="color: var(--vn-text-color)"
:class="hasEditableFormat(col)"
size="14px"
/>
<QIcon
v-else-if="col?.component === 'checkbox'"
:name="getCheckboxIcon(row[col?.name])"
style="color: var(--vn-text-color)"
:class="hasEditableFormat(col)"
size="14px"
/>
<span
v-else
:class="hasEditableFormat(col)"
:style="
typeof col?.style == 'function'
? col.style(row)
: col?.style
"
style="bottom: 0"
>
{{ formatColumnValue(col, row, dashIfEmpty) }}
</span>
</slot>
</div>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
@ -481,7 +775,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
flat
dense
:class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
btn.isPrimary ? 'text-primary-light' : 'color-vn-label'
"
:style="`visibility: ${
((btn.show && btn.show(row)) ?? true)
@ -489,23 +783,19 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
: 'hidden'
}`"
@click="btn.action(row)"
:data-cy="btn?.name ?? `tableAction-${index}`"
/>
</QTd>
</template>
<template #item="{ row, colsMap }">
<component
:is="$props.redirect ? 'router-link' : 'span'"
:to="`/${$props.redirect}/` + row.id"
v-bind:is="'div'"
@click="(event) => cardClick(event, row)"
>
<QCard
bordered
flat
class="row no-wrap justify-between cursor-pointer q-pa-sm"
@click="
(_, row) => {
$props.rowClick && $props.rowClick(row);
}
"
style="height: 100%"
>
<QCardSection
@ -542,7 +832,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
</QCardSection>
<!-- Fields -->
<QCardSection
class="q-pl-sm q-pr-lg q-py-xs"
class="q-pl-sm q-py-xs"
:class="$props.cardClass"
>
<div
@ -563,7 +853,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
:row="row"
:row-index="index"
>
<VnTableColumn
<VnColumn
:column="col"
:row="row"
:is-editable="false"
@ -589,13 +879,14 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
:key="index"
:title="btn.title"
:icon="btn.icon"
data-cy="cardBtn"
class="q-pa-xs"
flat
:class="
btn.isPrimary
? 'text-primary-light'
: 'color-vn-text '
: 'color-vn-label'
"
flat
@click="btn.action(row)"
/>
</QCardSection>
@ -603,14 +894,17 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
</component>
</template>
<template #bottom-row="{ cols }" v-if="$props.footer">
<QTr v-if="rows.length" style="height: 30px">
<QTr v-if="rows.length" style="height: 45px">
<QTh v-if="table.selection" />
<QTh
v-for="col of cols.filter((cols) => cols.visible ?? true)"
:key="col?.id"
class="text-center"
:class="getColAlign(col)"
>
<slot :name="`column-footer-${col.name}`" />
<slot
:name="`column-footer-${col.name}`"
:isEditableColumn="isEditableColumn(col)"
/>
</QTh>
</QTr>
</template>
@ -654,32 +948,53 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
{{ createForm?.title }}
</QTooltip>
</QPageSticky>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<QDialog
v-model="showForm"
transition-show="scale"
transition-hide="scale"
:full-width="createComplement?.isFullWidth ?? false"
@before-hide="
() => {
if (createRef.isSaveAndContinue) {
showForm = true;
createForm.formInitialData = { ...create.formInitialData };
}
}
"
data-cy="vn-table-create-dialog"
>
<FormModelPopup
ref="createRef"
v-bind="createForm"
:model="$attrs['data-key'] + 'Create'"
@on-data-saved="(_, res) => createForm.onDataSaved(res)"
>
<template #form-inputs="{ data }">
<div class="grid-create">
<slot
v-for="column of splittedColumns.create"
:key="column.name"
:name="`column-create-${column.name}`"
:data="data"
:column-name="column.name"
:label="column.label"
>
<VnTableColumn
:column="column"
:row="{}"
default="input"
v-model="data[column.name]"
:show-label="true"
component-prop="columnCreate"
/>
</slot>
<slot name="more-create-dialog" :data="data" />
<div :style="createComplement?.containerStyle">
<div>
<slot name="previous-create-dialog" :data="data" />
</div>
<div class="grid-create" :style="createComplement?.columnGridStyle">
<slot
v-for="column of splittedColumns.create"
:key="column.name"
:name="`column-create-${column.name}`"
:data="data"
:column-name="column.name"
:label="column.label"
>
<VnColumn
:column="column"
:row="{}"
default="input"
v-model="data[column.name]"
:show-label="true"
component-prop="columnCreate"
:data-cy="`${column.name}-create-popup`"
/>
</slot>
<slot name="more-create-dialog" :data="data" />
</div>
</div>
</template>
</FormModelPopup>
@ -697,6 +1012,42 @@ es:
</i18n>
<style lang="scss">
.selection-cell {
table td:first-child {
padding: 0px;
}
}
.side-padding {
padding-left: 1px;
padding-right: 1px;
}
.editable-text:hover {
border-bottom: 1px dashed var(--q-primary);
@extend .side-padding;
}
.editable-text {
border-bottom: 1px dashed var(--vn-label-color);
@extend .side-padding;
}
.cell-input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 0px !important;
}
.q-field--labeled .q-field__native,
.q-field--labeled .q-field__prefix,
.q-field--labeled .q-field__suffix {
padding-top: 20px;
}
.body-cell {
padding-left: 4px !important;
padding-right: 4px !important;
position: relative;
}
.bg-chip-secondary {
background-color: var(--vn-page-color);
color: var(--vn-text-color);
@ -713,8 +1064,8 @@ es:
.grid-three {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
max-width: 100%;
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
width: 100%;
grid-gap: 20px;
margin: 0 auto;
}
@ -722,7 +1073,6 @@ es:
.grid-create {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
max-width: 100%;
grid-gap: 20px;
margin: 0 auto;
}
@ -738,7 +1088,9 @@ es:
}
}
}
.q-table tbody tr td {
position: relative;
}
.q-table {
th {
padding: 0;
@ -787,6 +1139,7 @@ es:
.vn-label-value {
display: flex;
flex-direction: row;
align-items: center;
color: var(--vn-text-color);
.value {
overflow: hidden;
@ -838,4 +1191,15 @@ es:
.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
background-color: var(--vn-section-color);
}
.temp-input {
top: 0;
position: absolute;
width: 100%;
height: 100%;
display: flex;
}
label.header-filter > .q-field__inner > .q-field__control {
padding: inherit;
}
</style>

54
src/components/VnTable/VnTableFilter.vue
View File

@ -29,25 +29,29 @@ function columnName(col) {
<VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
<template #body="{ params, orders, searchFn }">
<div
class="row no-wrap flex-center"
class="container"
v-for="col of columns.filter((c) => c.columnFilter ?? true)"
:key="col.id"
>
<VnFilter
ref="tableFilterRef"
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<VnTableOrder
v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
/>
<div class="filter">
<VnFilter
ref="tableFilterRef"
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
</div>
<div class="order">
<VnTableOrder
v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
/>
</div>
</div>
<slot
name="moreFilterPanel"
@ -68,3 +72,21 @@ function columnName(col) {
</template>
</VnFilterPanel>
</template>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 45px;
gap: 10px;
}
.filter {
width: 70%;
height: 40px;
text-align: center;
}
.order {
width: 10%;
}
</style>

19
src/components/VnTable/VnVisibleColumn.vue
View File

@ -32,16 +32,21 @@ const areAllChecksMarked = computed(() => {
function setUserConfigViewData(data, isLocal) {
if (!data) return;
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
if (!isLocal) localColumns.value = [];
// Array to Object
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
for (let column of columns.value) {
const { label, name } = column;
const { label, name, labelAbbreviation } = column;
if (skippeds[name]) continue;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
if (!isLocal)
localColumns.value.push({
name,
label,
labelAbbreviation,
visible: column.visible,
});
}
}
@ -152,7 +157,11 @@ onMounted(async () => {
<QCheckbox
v-for="col in localColumns"
:key="col.name"
:label="col.label ?? col.name"
:label="
col?.labelAbbreviation
? col.labelAbbreviation + ` (${col.label ?? col.name})`
: (col.label ?? col.name)
"
v-model="col.visible"
/>
</div>

7
src/components/__tests__/FormModel.spec.js
View File

@ -57,6 +57,7 @@ describe('FormModel', () => {
vm.state.set(model, formInitialData);
expect(vm.hasChanges).toBe(false);
await vm.$nextTick();
vm.formData.mockKey = 'newVal';
await vm.$nextTick();
expect(vm.hasChanges).toBe(true);
@ -94,8 +95,12 @@ describe('FormModel', () => {
it('should call axios.patch with the right data', async () => {
const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
const { vm } = mount({ propsData: { url, model } });
vm.formData.mockKey = 'newVal';
vm.formData = {};
await vm.$nextTick();
vm.formData = { mockKey: 'newVal' };
await vm.$nextTick();
await vm.save();
expect(spy).toHaveBeenCalled();
vm.formData.mockKey = 'mockVal';

100
src/components/__tests__/UserPanel.spec.js
View File

@ -1,61 +1,65 @@
import { vi, describe, expect, it, beforeEach, beforeAll, afterEach } from 'vitest';
import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import UserPanel from 'src/components/UserPanel.vue';
import axios from 'axios';
import { useState } from 'src/composables/useState';
vi.mock('src/utils/quasarLang', () => ({
default: vi.fn(),
}));
describe('UserPanel', () => {
let wrapper;
let vm;
let state;
let wrapper;
let vm;
let state;
beforeEach(() => {
wrapper = createWrapper(UserPanel, {});
state = useState();
state.setUser({
id: 115,
name: 'itmanagement',
nickname: 'itManagementNick',
lang: 'en',
darkMode: false,
companyFk: 442,
warehouseFk: 1,
});
wrapper = wrapper.wrapper;
vm = wrapper.vm;
beforeEach(() => {
wrapper = createWrapper(UserPanel, {});
state = useState();
state.setUser({
id: 115,
name: 'itmanagement',
nickname: 'itManagementNick',
lang: 'en',
darkMode: false,
companyFk: 442,
warehouseFk: 1,
});
wrapper = wrapper.wrapper;
vm = wrapper.vm;
});
afterEach(() => {
vi.clearAllMocks();
});
afterEach(() => {
vi.clearAllMocks();
});
it('should fetch warehouses data on mounted', async () => {
const fetchData = wrapper.findComponent({ name: 'FetchData' });
expect(fetchData.props('url')).toBe('Warehouses');
expect(fetchData.props('autoLoad')).toBe(true);
});
it('should fetch warehouses data on mounted', async () => {
const fetchData = wrapper.findComponent({ name: 'FetchData' });
expect(fetchData.props('url')).toBe('Warehouses');
expect(fetchData.props('autoLoad')).toBe(true);
});
it('should toggle dark mode correctly and update preferences', async () => {
await vm.saveDarkMode(true);
expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
expect(vm.user.darkMode).toBe(true);
vm.updatePreferences();
expect(vm.darkMode).toBe(true);
});
it('should toggle dark mode correctly and update preferences', async () => {
await vm.saveDarkMode(true);
expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
expect(vm.user.darkMode).toBe(true);
await vm.updatePreferences();
expect(vm.darkMode).toBe(true);
});
it('should change user language and update preferences', async () => {
const userLanguage = 'es';
await vm.saveLanguage(userLanguage);
expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
expect(vm.user.lang).toBe(userLanguage);
vm.updatePreferences();
expect(vm.locale).toBe(userLanguage);
});
it('should change user language and update preferences', async () => {
const userLanguage = 'es';
await vm.saveLanguage(userLanguage);
expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
expect(vm.user.lang).toBe(userLanguage);
await vm.updatePreferences();
expect(vm.locale).toBe(userLanguage);
});
it('should update user data', async () => {
const key = 'name';
const value = 'itboss';
await vm.saveUserData(key, value);
expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', { [key]: value });
});
});
it('should update user data', async () => {
const key = 'name';
const value = 'itboss';
await vm.saveUserData(key, value);
expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', { [key]: value });
});
});

10
src/components/common/VnCardBeta.vue
View File

@ -39,6 +39,13 @@ onBeforeMount(async () => {
});
onBeforeRouteUpdate(async (to, from) => {
if (hasRouteParam(to.params)) {
const { matched } = router.currentRoute.value;
const { name } = matched.at(-3);
if (name) {
router.push({ name, params: to.params });
}
}
const id = to.params.id;
if (id !== from.params.id) await fetch(id, true);
});
@ -50,6 +57,9 @@ async function fetch(id, append = false) {
else arrayData.store.url = props.url.replace(regex, `/${id}`);
await arrayData.fetch({ append, updateRouter: false });
}
function hasRouteParam(params, valueToCheck = ':addressId') {
return Object.values(params).includes(valueToCheck);
}
</script>
<template>
<Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">

43
src/components/common/VnCheckbox.vue Normal file
View File

@ -0,0 +1,43 @@
<script setup>
import { computed } from 'vue';
const model = defineModel({ type: [Number, Boolean] });
const $props = defineProps({
info: {
type: String,
default: null,
},
});
const checkboxModel = computed({
get() {
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>
<template>
<div>
<QCheckbox v-bind="$attrs" v-on="$attrs" v-model="checkboxModel" />
<QIcon
v-if="info"
v-bind="$attrs"
class="cursor-info q-ml-sm"
name="info"
size="sm"
>
<QTooltip>
{{ info }}
</QTooltip>
</QIcon>
</div>
</template>

32
src/components/common/VnColor.vue Normal file
View File

@ -0,0 +1,32 @@
<script setup>
const $props = defineProps({
colors: {
type: String,
default: '{"value": []}',
},
});
const colorArray = JSON.parse($props.colors)?.value;
const maxHeight = 30;
const colorHeight = maxHeight / colorArray?.length;
</script>
<template>
<div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
<div
v-for="(color, index) in colorArray"
:key="index"
:style="{
backgroundColor: `#${color}`,
height: `${colorHeight}px`,
}"
>
&nbsp;
</div>
</div>
</template>
<style scoped>
.color-div {
display: flex;
flex-direction: column;
}
</style>

6
src/components/common/VnComponent.vue
View File

@ -17,6 +17,8 @@ const $props = defineProps({
},
});
const emit = defineEmits(['blur']);
const componentArray = computed(() => {
if (typeof $props.prop === 'object') return [$props.prop];
return $props.prop;
@ -46,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"
@ -54,6 +57,7 @@ function toValueAttrs(attrs) {
v-bind="mix(toComponent).attrs"
v-on="mix(toComponent).event ?? {}"
v-model="model"
@blur="emit('blur')"
/>
</span>
</template>

22
src/components/common/VnInput.vue
View File

@ -11,6 +11,7 @@ const emit = defineEmits([
'update:options',
'keyup.enter',
'remove',
'blur',
]);
const $props = defineProps({
@ -136,6 +137,7 @@ const handleUppercase = () => {
:type="$attrs.type"
:class="{ required: isRequired }"
@keyup.enter="emit('keyup.enter')"
@blur="emit('blur')"
@keydown="handleKeydown"
:clearable="false"
:rules="mixinRules"
@ -143,7 +145,7 @@ const handleUppercase = () => {
hide-bottom-space
:data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
>
<template #prepend>
<template #prepend v-if="$slots.prepend">
<slot name="prepend" />
</template>
<template #append>
@ -168,11 +170,11 @@ const handleUppercase = () => {
}
"
></QIcon>
<QIcon
name="match_case"
size="xs"
v-if="!$attrs.disabled && !($attrs.readonly) && $props.uppercase"
v-if="!$attrs.disabled && !$attrs.readonly && $props.uppercase"
@click="handleUppercase"
class="uppercase-icon"
>
@ -180,7 +182,7 @@ const handleUppercase = () => {
{{ t('Convert to uppercase') }}
</QTooltip>
</QIcon>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon v-if="info" name="info">
<QTooltip max-width="350px">
@ -194,13 +196,15 @@ const handleUppercase = () => {
<style>
.uppercase-icon {
transition: color 0.3s, transform 0.2s;
cursor: pointer;
transition:
color 0.3s,
transform 0.2s;
cursor: pointer;
}
.uppercase-icon:hover {
color: #ed9937;
transform: scale(1.2);
color: #ed9937;
transform: scale(1.2);
}
</style>
<i18n>
@ -214,4 +218,4 @@ const handleUppercase = () => {
maxLength: El valor excede los {value} carácteres
inputMax: Debe ser menor a {value}
Convert to uppercase: Convertir a mayúsculas
</i18n>
</i18n>

9
src/components/common/VnInputDate.vue
View File

@ -42,7 +42,7 @@ const formattedDate = computed({
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
'YYYY-MM-DDTHH:mm:ss.SSSZ',
);
}
const [year, month, day] = value.split('-').map((e) => parseInt(e));
@ -55,7 +55,7 @@ const formattedDate = computed({
orgDate.getHours(),
orgDate.getMinutes(),
orgDate.getSeconds(),
orgDate.getMilliseconds()
orgDate.getMilliseconds(),
);
}
}
@ -64,7 +64,7 @@ const formattedDate = computed({
});
const popupDate = computed(() =>
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
);
onMounted(() => {
// fix quasar bug
@ -73,7 +73,7 @@ onMounted(() => {
watch(
() => model.value,
(val) => (formattedDate.value = val),
{ immediate: true }
{ immediate: true },
);
const styleAttrs = computed(() => {
@ -107,6 +107,7 @@ const manageDate = (date) => {
@click="isPopupOpen = !isPopupOpen"
@keydown="isPopupOpen = false"
hide-bottom-space
:data-cy="$attrs.dataCy ?? $attrs.label + '_inputDate'"
>
<template #append>
<QIcon

2
src/components/common/VnInputNumber.vue
View File

@ -8,6 +8,7 @@ defineProps({
});
const model = defineModel({ type: [Number, String] });
const emit = defineEmits(['blur']);
</script>
<template>
<VnInput
@ -24,5 +25,6 @@ const model = defineModel({ type: [Number, String] });
model = parseFloat(val).toFixed(decimalPlaces);
}
"
@blur="emit('blur')"
/>
</template>

1
src/components/common/VnLocation.vue
View File

@ -85,6 +85,7 @@ const handleModelValue = (data) => {
:tooltip="t('Create new location')"
:rules="mixinRules"
:lazy-rules="true"
required
>
<template #form>
<CreateNewPostcode

38
src/components/common/VnPopupProxy.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup>
import { ref } from 'vue';
defineProps({
label: {
type: String,
default: '',
},
icon: {
type: String,
required: true,
default: null,
},
color: {
type: String,
default: 'primary',
},
tooltip: {
type: String,
default: null,
},
});
const popupProxyRef = ref(null);
</script>
<template>
<QBtn :color="$props.color" :icon="$props.icon" :label="$t($props.label)">
<template #default>
<slot name="extraIcon"></slot>
<QPopupProxy ref="popupProxyRef" style="max-width: none">
<QCard>
<slot :popup="popupProxyRef"></slot>
</QCard>
</QPopupProxy>
<QTooltip>{{ $t($props.tooltip) }}</QTooltip>
</template>
</QBtn>
</template>

15
src/components/common/VnSelect.vue
View File

@ -171,7 +171,8 @@ onMounted(() => {
});
const arrayDataKey =
$props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);
$props.dataKey ??
($props.url?.length > 0 ? $props.url : ($attrs.name ?? $attrs.label));
const arrayData = useArrayData(arrayDataKey, {
url: $props.url,
@ -220,7 +221,7 @@ async function fetchFilter(val) {
optionFilterValue.value ??
(new RegExp(/\d/g).test(val)
? optionValue.value
: optionFilter.value ?? optionLabel.value);
: (optionFilter.value ?? optionLabel.value));
let defaultWhere = {};
if ($props.filterOptions.length) {
@ -239,7 +240,7 @@ async function fetchFilter(val) {
const { data } = await arrayData.applyFilter(
{ filter: filterOptions },
{ updateRouter: false }
{ updateRouter: false },
);
setOptions(data);
return data;
@ -272,7 +273,7 @@ async function filterHandler(val, update) {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
}
},
);
}
@ -308,7 +309,7 @@ function handleKeyDown(event) {
if (inputValue) {
const matchingOption = myOptions.value.find(
(option) =>
option[optionLabel.value].toLowerCase() === inputValue.toLowerCase()
option[optionLabel.value].toLowerCase() === inputValue.toLowerCase(),
);
if (matchingOption) {
@ -320,11 +321,11 @@ function handleKeyDown(event) {
}
const focusableElements = document.querySelectorAll(
'a:not([disabled]), button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])'
'a:not([disabled]), button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])',
);
const currentIndex = Array.prototype.indexOf.call(
focusableElements,
event.target
event.target,
);
if (currentIndex >= 0 && currentIndex < focusableElements.length - 1) {
focusableElements[currentIndex + 1].focus();

4
src/components/common/VnSelectCache.vue
View File

@ -14,7 +14,7 @@ const $props = defineProps({
},
});
const options = ref([]);
const emit = defineEmits(['blur']);
onBeforeMount(async () => {
const { url, optionValue, optionLabel } = useAttrs();
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
@ -35,5 +35,5 @@ onBeforeMount(async () => {
});
</script>
<template>
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" @blur="emit('blur')" />
</template>

2
src/components/common/VnSelectDialog.vue
View File

@ -37,7 +37,6 @@ const isAllowedToCreate = computed(() => {
defineExpose({ vnSelectDialogRef: select });
</script>
<template>
<VnSelect
ref="select"
@ -67,7 +66,6 @@ defineExpose({ vnSelectDialogRef: select });
</template>
</VnSelect>
</template>
<style lang="scss" scoped>
.default-icon {
cursor: pointer;

6
src/components/common/VnSelectSupplier.vue
View File

@ -1,9 +1,7 @@
<script setup>
import { computed } from 'vue';
import VnSelect from 'components/common/VnSelect.vue';
const model = defineModel({ type: [String, Number, Object] });
const url = 'Suppliers';
</script>
<template>
@ -11,11 +9,13 @@ const url = 'Suppliers';
:label="$t('globals.supplier')"
v-bind="$attrs"
v-model="model"
:url="url"
url="Suppliers"
option-value="id"
option-label="nickname"
:fields="['id', 'name', 'nickname', 'nif']"
:filter-options="['id', 'name', 'nickname', 'nif']"
sort-by="name ASC"
data-cy="vnSupplierSelect"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">

50
src/components/common/VnSelectTravelExtended.vue Normal file
View File

@ -0,0 +1,50 @@
<script setup>
import VnSelectDialog from './VnSelectDialog.vue';
import FilterTravelForm from 'src/components/FilterTravelForm.vue';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
const { t } = useI18n();
const $props = defineProps({
data: {
type: Object,
required: true,
},
onFilterTravelSelected: {
type: Function,
required: true,
},
});
</script>
<template>
<VnSelectDialog
:label="t('entry.basicData.travel')"
v-bind="$attrs"
url="Travels/filter"
:fields="['id', 'warehouseInName']"
option-value="id"
option-label="warehouseInName"
map-options
hide-selected
:required="true"
action-icon="filter_alt"
:roles-allowed-to-create="['buyer']"
>
<template #form>
<FilterTravelForm @travel-selected="onFilterTravelSelected(data, $event)" />
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.agencyModeName }} -
{{ scope.opt?.warehouseInName }}
({{ toDate(scope.opt?.shipped) }}) →
{{ scope.opt?.warehouseOutName }}
({{ toDate(scope.opt?.landed) }})
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectDialog>
</template>

47
src/components/ui/CardDescriptor.vue
View File

@ -6,6 +6,7 @@ import { useArrayData } from 'composables/useArrayData';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useState } from 'src/composables/useState';
import { useRoute } from 'vue-router';
import { useClipboard } from 'src/composables/useClipboard';
import VnMoreOptions from './VnMoreOptions.vue';
const $props = defineProps({
@ -29,10 +30,6 @@ const $props = defineProps({
type: String,
default: null,
},
module: {
type: String,
default: null,
},
summary: {
type: Object,
default: null,
@ -46,6 +43,7 @@ const $props = defineProps({
const state = useState();
const route = useRoute();
const { t } = useI18n();
const { copyText } = useClipboard();
const { viewSummary } = useSummaryDialog();
let arrayData;
let store;
@ -57,7 +55,7 @@ defineExpose({ getData });
onBeforeMount(async () => {
arrayData = useArrayData($props.dataKey, {
url: $props.url,
filter: $props.filter,
userFilter: $props.filter,
skip: 0,
oneRecord: true,
});
@ -103,6 +101,14 @@ function getValueFromPath(path) {
return current;
}
function copyIdText(id) {
copyText(id, {
component: {
copyValue: id,
},
});
}
const emit = defineEmits(['onFetch']);
const iconModule = computed(() => route.matched[1].meta.icon);
@ -148,7 +154,9 @@ const toModule = computed(() =>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
<RouterLink
:to="{ name: `${dataKey}Summary`, params: { id: entity.id } }"
>
<QBtn
class="link"
color="white"
@ -184,10 +192,25 @@ const toModule = computed(() =>
</slot>
</div>
</QItemLabel>
<QItem dense>
<QItemLabel class="subtitle" caption>
<QItem>
<QItemLabel class="subtitle">
#{{ getValueFromPath(subtitle) ?? entity.id }}
</QItemLabel>
<QBtn
round
flat
dense
size="sm"
icon="content_copy"
color="primary"
@click.stop="copyIdText(entity.id)"
>
<QTooltip>
{{ t('globals.copyId') }}
</QTooltip>
</QBtn>
<!-- </QItemLabel> -->
</QItem>
</QList>
<div class="list-box q-mt-xs">
@ -294,3 +317,11 @@ const toModule = computed(() =>
}
}
</style>
<i18n>
en:
globals:
copyId: Copy ID
es:
globals:
copyId: Copiar ID
</i18n>

65
src/components/ui/SkeletonDescriptor.vue
View File

@ -1,53 +1,32 @@
<script setup>
defineProps({
hasImage: {
type: Boolean,
default: false,
},
});
</script>
<template>
<div id="descriptor-skeleton">
<div id="descriptor-skeleton" class="bg-vn-page">
<div class="row justify-between q-pa-sm">
<QSkeleton square size="40px" />
<QSkeleton square size="40px" />
<QSkeleton square height="40px" width="20px" />
<QSkeleton square size="30px" v-for="i in 3" :key="i" />
</div>
<div class="col justify-between q-pa-sm q-gutter-y-xs">
<QSkeleton square height="40px" width="150px" />
<QSkeleton square height="30px" width="70px" />
<div class="q-pa-xs" v-if="hasImage">
<QSkeleton square height="200px" width="100%" />
</div>
<div class="col q-pl-sm q-pa-sm q-mb-md">
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
<div class="col justify-between q-pa-md q-gutter-y-xs">
<QSkeleton square height="25px" width="150px" />
<QSkeleton square height="15px" width="70px" />
</div>
<div class="q-pl-sm q-pa-sm q-mb-md">
<div class="row q-gutter-x-sm q-pa-none q-ma-none" v-for="i in 5" :key="i">
<QSkeleton type="text" square height="20px" width="30%" />
<QSkeleton type="text" square height="20px" width="60%" />
</div>
</div>
<QCardActions>
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QCardActions class="q-gutter-x-sm justify-between">
<QSkeleton size="40px" v-for="i in 5" :key="i" />
</QCardActions>
</div>
</template>
<style lang="scss" scoped>
#descriptor-skeleton .q-card__actions {
justify-content: space-between;
}
</style>

3
src/components/ui/VnConfirm.vue
View File

@ -82,7 +82,7 @@ function cancel() {
@click="cancel()"
/>
</QCardSection>
<QCardSection class="q-pb-none">
<QCardSection class="q-pb-none" data-cy="VnConfirm_message">
<span v-if="message !== false" v-html="message" />
</QCardSection>
<QCardSection class="row items-center q-pt-none">
@ -95,6 +95,7 @@ function cancel() {
:disable="isLoading"
flat
@click="cancel()"
data-cy="VnConfirm_cancel"
/>
<QBtn
:label="t('globals.confirm')"

3
src/components/ui/VnFilterPanel.vue
View File

@ -293,6 +293,9 @@ const getLocale = (label) => {
/>
</template>
<style scoped lang="scss">
.q-field__label.no-pointer-events.absolute.ellipsis {
margin-left: 6px !important;
}
.list {
width: 256px;
}

2
src/components/ui/VnMoreOptions.vue
View File

@ -11,7 +11,7 @@
<QTooltip>
{{ $t('components.cardDescriptor.moreOptions') }}
</QTooltip>
<QMenu ref="menuRef">
<QMenu ref="menuRef" data-cy="descriptor-more-opts-menu">
<QList>
<slot name="menu" :menu-ref="$refs.menuRef" />
</QList>

7
src/components/ui/VnNotes.vue
View File

@ -18,7 +18,12 @@ import VnInput from 'components/common/VnInput.vue';
const emit = defineEmits(['onFetch']);
const $attrs = useAttrs();
const originalAttrs = useAttrs();
const $attrs = computed(() => {
const { style, ...rest } = originalAttrs;
return rest;
});
const isRequired = computed(() => {
return Object.keys($attrs).includes('required')

41
src/components/ui/VnStockValueDisplay.vue Normal file
View File

@ -0,0 +1,41 @@
<script setup>
import { toPercentage } from 'filters/index';
import { computed } from 'vue';
const props = defineProps({
value: {
type: Number,
required: true,
},
});
const valueClass = computed(() =>
props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative',
);
const iconName = computed(() =>
props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward',
);
const formattedValue = computed(() => props.value);
</script>
<template>
<span :class="valueClass">
<QIcon :name="iconName" size="sm" class="value-icon" />
{{ toPercentage(formattedValue) }}
</span>
</template>
<style lang="scss" scoped>
.positive {
color: $secondary;
}
.negative {
color: $negative;
}
.neutral {
color: $primary;
}
.value-icon {
margin-right: 4px;
}
</style>

5
src/components/ui/VnUsesMana.vue
View File

@ -53,3 +53,8 @@ const manaCode = ref(props.manaCode);
/>
</div>
</template>
<i18n>
es:
Promotion mana: Maná promoción
Claim mana: Maná reclamación
</i18n>

66
src/composables/__tests__/useRequired.spec.js Normal file
View File

@ -0,0 +1,66 @@
import { describe, it, expect, vi } from 'vitest';
import { useRequired } from '../useRequired';
vi.mock('../useValidator', () => ({
useValidator: () => ({
validations: () => ({
required: vi.fn((isRequired, val) => {
if (!isRequired) return true;
return val !== null && val !== undefined && val !== '';
}),
}),
}),
}));
describe('useRequired', () => {
it('should detect required when attr is boolean true', () => {
const attrs = { required: true };
const { isRequired } = useRequired(attrs);
expect(isRequired).toBe(true);
});
it('should detect required when attr is boolean false', () => {
const attrs = { required: false };
const { isRequired } = useRequired(attrs);
expect(isRequired).toBe(false);
});
it('should detect required when attr exists without value', () => {
const attrs = { required: '' };
const { isRequired } = useRequired(attrs);
expect(isRequired).toBe(true);
});
it('should return false when required attr does not exist', () => {
const attrs = { someOtherAttr: 'value' };
const { isRequired } = useRequired(attrs);
expect(isRequired).toBe(false);
});
describe('requiredFieldRule', () => {
it('should validate required field with value', () => {
const attrs = { required: true };
const { requiredFieldRule } = useRequired(attrs);
expect(requiredFieldRule('some value')).toBe(true);
});
it('should validate required field with empty value', () => {
const attrs = { required: true };
const { requiredFieldRule } = useRequired(attrs);
expect(requiredFieldRule('')).toBe(false);
});
it('should pass validation when field is not required', () => {
const attrs = { required: false };
const { requiredFieldRule } = useRequired(attrs);
expect(requiredFieldRule('')).toBe(true);
});
it('should handle null and undefined values', () => {
const attrs = { required: true };
const { requiredFieldRule } = useRequired(attrs);
expect(requiredFieldRule(null)).toBe(false);
expect(requiredFieldRule(undefined)).toBe(false);
});
});
});

65
src/composables/checkEntryLock.js Normal file
View File

@ -0,0 +1,65 @@
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import VnConfirm from 'components/ui/VnConfirm.vue';
export async function checkEntryLock(entryFk, userFk) {
const { t } = useI18n();
const quasar = useQuasar();
const { push } = useRouter();
const { data } = await axios.get(`Entries/${entryFk}`, {
params: {
filter: JSON.stringify({
fields: ['id', 'locked', 'lockerUserFk'],
include: { relation: 'user', scope: { fields: ['id', 'nickname'] } },
}),
},
});
const entryConfig = await axios.get('EntryConfigs/findOne');
if (data?.lockerUserFk && data?.locked) {
const now = new Date(Date.vnNow()).getTime();
const lockedTime = new Date(data.locked).getTime();
const timeDiff = (now - lockedTime) / 1000;
const isMaxTimeLockExceeded = entryConfig.data.maxLockTime > timeDiff;
if (data?.lockerUserFk !== userFk && isMaxTimeLockExceeded) {
quasar
.dialog({
component: VnConfirm,
componentProps: {
'data-cy': 'entry-lock-confirm',
title: t('entry.lock.title'),
message: t('entry.lock.message', {
userName: data?.user?.nickname,
time: timeDiff / 60,
}),
},
})
.onOk(
async () =>
await axios.patch(`Entries/${entryFk}`, {
locked: Date.vnNow(),
lockerUserFk: userFk,
}),
)
.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',
group: false,
}),
);
}
}

22
src/composables/getColAlign.js Normal file
View File

@ -0,0 +1,22 @@
export function getColAlign(col) {
let align;
switch (col.component) {
case 'time':
case 'date':
case 'select':
align = 'left';
break;
case 'number':
align = 'right';
break;
case 'checkbox':
align = 'center';
break;
default:
align = col?.align;
}
if (/^is[A-Z]/.test(col.name) || /^has[A-Z]/.test(col.name)) align = 'center';
return 'text-' + (align ?? 'center');
}

6
src/composables/useCau.js
View File

@ -11,6 +11,7 @@ export async function useCau(res, message) {
const { config, headers, request, status, statusText, data } = res || {};
const { params, url, method, signal, headers: confHeaders } = config || {};
const { message: resMessage, code, name } = data?.error || {};
delete confHeaders?.Authorization;
const additionalData = {
path: location.hash,
@ -40,7 +41,7 @@ export async function useCau(res, message) {
handler: async () => {
const locale = i18n.global.t;
const reason = ref(
code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : ''
code == 'ACCESS_DENIED' ? locale('cau.askPrivileges') : '',
);
openConfirmationModal(
locale('cau.title'),
@ -59,10 +60,9 @@ export async function useCau(res, message) {
'onUpdate:modelValue': (val) => (reason.value = val),
label: locale('cau.inputLabel'),
class: 'full-width',
required: true,
autofocus: true,
},
}
},
);
},
},

12
src/composables/useRequired.js
View File

@ -2,14 +2,10 @@ import { useValidator } from 'src/composables/useValidator';
export function useRequired($attrs) {
const { validations } = useValidator();
const hasRequired = Object.keys($attrs).includes('required');
let isRequired = false;
if (hasRequired) {
const required = $attrs['required'];
if (typeof required === 'boolean') {
isRequired = required;
}
}
const isRequired =
typeof $attrs['required'] === 'boolean'
? $attrs['required']
: Object.keys($attrs).includes('required');
const requiredFieldRule = (val) => validations().required(isRequired, val);
return {

10
src/composables/useRole.js
View File

@ -27,6 +27,15 @@ export function useRole() {
return false;
}
function likeAny(roles) {
const roleStore = state.getRoles();
for (const role of roles) {
if (!roleStore.value.findIndex((rs) => rs.startsWith(role)) !== -1)
return true;
}
return false;
}
function isEmployee() {
return hasAny(['employee']);
}
@ -35,6 +44,7 @@ export function useRole() {
isEmployee,
fetch,
hasAny,
likeAny,
state,
};
}

28
src/css/app.scss
View File

@ -21,7 +21,10 @@ body.body--light {
.q-header .q-toolbar {
color: var(--vn-text-color);
}
--vn-color-negative: $negative;
}
body.body--dark {
--vn-header-color: #5d5d5d;
--vn-page-color: #222;
@ -37,6 +40,8 @@ body.body--dark {
--vn-text-color-contrast: black;
background-color: var(--vn-page-color);
--vn-color-negative: $negative;
}
a {
@ -75,7 +80,6 @@ a {
text-decoration: underline;
}
// Removes chrome autofill background
input:-webkit-autofill,
select:-webkit-autofill {
color: var(--vn-text-color);
@ -149,11 +153,6 @@ select:-webkit-autofill {
cursor: pointer;
}
.vn-table-separation-row {
height: 16px !important;
background-color: var(--vn-section-color) !important;
}
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
@ -230,10 +229,12 @@ input::-webkit-inner-spin-button {
max-width: 100%;
}
.q-table__container {
/* ===== Scrollbar CSS ===== /
/ Firefox */
.remove-bg {
filter: brightness(1.1);
mix-blend-mode: multiply;
}
.q-table__container {
* {
scrollbar-width: auto;
scrollbar-color: var(--vn-label-color) transparent;
@ -274,8 +275,6 @@ input::-webkit-inner-spin-button {
font-size: 11pt;
}
td {
font-size: 11pt;
border-top: 1px solid var(--vn-page-color);
border-collapse: collapse;
}
}
@ -319,9 +318,6 @@ input::-webkit-inner-spin-button {
max-width: fit-content;
}
.row > .column:has(.q-checkbox) {
max-width: fit-content;
}
.q-field__inner {
.q-field__control {
min-height: auto !important;
@ -339,3 +335,7 @@ input::-webkit-inner-spin-button {
border: 1px solid;
box-shadow: 0 4px 6px #00000000;
}
.containerShrinked {
width: 80%;
}

6
src/css/quasar.variables.scss
View File

@ -13,7 +13,7 @@
// Tip: Use the "Theme Builder" on Quasar's documentation website.
// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
$primary: #ec8916;
$secondary: $primary;
$secondary: #89be34;
$positive: #c8e484;
$negative: #fb5252;
$info: #84d0e2;
@ -30,7 +30,9 @@ $color-spacer: #7979794d;
$border-thin-light: 1px solid $color-spacer-light;
$primary-light: #f5b351;
$dark-shadow-color: black;
$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
$layout-shadow-dark:
0 0 10px 2px #00000033,
0 0px 10px #0000003d;
$spacing-md: 16px;
$color-font-secondary: #777;
$width-xs: 400px;

11
src/filters/toDate.js
View File

@ -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());
}

107
src/i18n/locale/en.yml
View File

@ -33,6 +33,7 @@ globals:
reset: Reset
close: Close
cancel: Cancel
isSaveAndContinue: Save and continue
clone: Clone
confirm: Confirm
assign: Assign
@ -48,6 +49,7 @@ globals:
rowRemoved: Row removed
pleaseWait: Please wait...
noPinnedModules: You don't have any pinned modules
enterToConfirm: Press Enter to confirm
summary:
basicData: Basic data
daysOnward: Days onward
@ -155,6 +157,7 @@ globals:
changeState: Change state
raid: 'Raid {daysInForward} days'
isVies: Vies
noData: No data available
pageTitles:
logIn: Login
addressEdit: Update address
@ -167,6 +170,7 @@ globals:
workCenters: Work centers
modes: Modes
zones: Zones
negative: Negative
zonesList: List
deliveryDays: Delivery days
upcomingDeliveries: Upcoming deliveries
@ -174,6 +178,7 @@ globals:
alias: Alias
aliasUsers: Users
subRoles: Subroles
myAccount: Mi cuenta
inheritedRoles: Inherited Roles
customers: Customers
customerCreate: New customer
@ -406,6 +411,106 @@ cau:
subtitle: By sending this ticket, all the data related to the error, the section, the user, etc., are already sent.
inputLabel: Explain why this error should not appear
askPrivileges: Ask for privileges
entry:
list:
newEntry: New entry
tableVisibleColumns:
isExcludedFromAvailable: Exclude from inventory
isOrdered: Ordered
isConfirmed: Ready to label
isReceived: Received
isRaid: Raid
landed: Date
supplierFk: Supplier
reference: Ref/Alb/Guide
invoiceNumber: Invoice
agencyModeId: Agency
isBooked: Booked
companyFk: Company
evaNotes: Notes
warehouseOutFk: Origin
warehouseInFk: Destiny
entryTypeDescription: Entry type
invoiceAmount: Import
travelFk: Travel
summary:
invoiceAmount: Amount
commission: Commission
currency: Currency
invoiceNumber: Invoice number
ordered: Ordered
booked: Booked
excludedFromAvailable: Inventory
travelReference: Reference
travelAgency: Agency
travelShipped: Shipped
travelDelivered: Delivered
travelLanded: Landed
travelReceived: Received
buys: Buys
stickers: Stickers
package: Package
packing: Pack.
grouping: Group.
buyingValue: Buying value
import: Import
pvp: PVP
basicData:
travel: Travel
currency: Currency
commission: Commission
observation: Observation
booked: Booked
excludedFromAvailable: Inventory
buys:
observations: Observations
packagingFk: Box
color: Color
printedStickers: Printed stickers
notes:
observationType: Observation type
latestBuys:
tableVisibleColumns:
image: Picture
itemFk: Item ID
weightByPiece: Weight/Piece
isActive: Active
family: Family
entryFk: Entry
freightValue: Freight value
comissionValue: Commission value
packageValue: Package value
isIgnored: Is ignored
price2: Grouping
price3: Packing
minPrice: Min
ektFk: Ekt
packingOut: Package out
landing: Landing
isExcludedFromAvailable: Exclude from inventory
isRaid: Raid
invoiceNumber: Invoice
reference: Ref/Alb/Guide
params:
isExcludedFromAvailable: Excluir del inventario
isOrdered: Pedida
isConfirmed: Lista para etiquetar
isReceived: Recibida
isRaid: Redada
landed: Fecha
supplierFk: Proveedor
invoiceNumber: Nº Factura
reference: Ref/Alb/Guía
agencyModeId: Agencia
isBooked: Asentado
companyFk: Empresa
travelFk: Envio
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeDescription: Tipo entrada
invoiceAmount: Importe
dated: Fecha
ticket:
params:
ticketFk: Ticket ID
@ -726,6 +831,8 @@ travel:
CloneTravelAndEntries: Clone travel and his entries
deleteTravel: Delete travel
AddEntry: Add entry
availabled: Availabled
availabledHour: Availabled hour
thermographs: Thermographs
hb: HB
basicData:

222
src/i18n/locale/es.yml
View File

@ -33,9 +33,11 @@ globals:
reset: Restaurar
close: Cerrar
cancel: Cancelar
isSaveAndContinue: Guardar y continuar
clone: Clonar
confirm: Confirmar
assign: Asignar
replace: Sustituir
back: Volver
yes: Si
no: No
@ -48,6 +50,8 @@ globals:
rowRemoved: Fila eliminada
pleaseWait: Por favor espera...
noPinnedModules: No has fijado ningún módulo
split: Split
enterToConfirm: Pulsa Enter para confirmar
summary:
basicData: Datos básicos
daysOnward: Días adelante
@ -55,8 +59,8 @@ globals:
today: Hoy
yesterday: Ayer
dateFormat: es-ES
microsip: Abrir en MicroSIP
noSelectedRows: No tienes ninguna línea seleccionada
microsip: Abrir en MicroSIP
downloadCSVSuccess: Descarga de CSV exitosa
reference: Referencia
agency: Agencia
@ -76,8 +80,10 @@ globals:
requiredField: Campo obligatorio
class: clase
type: Tipo
reason: motivo
reason: Motivo
removeSelection: Eliminar selección
noResults: Sin resultados
results: resultados
system: Sistema
notificationSent: Notificación enviada
warehouse: Almacén
@ -155,6 +161,7 @@ globals:
changeState: Cambiar estado
raid: 'Redada {daysInForward} días'
isVies: Vies
noData: Datos no disponibles
pageTitles:
logIn: Inicio de sesión
addressEdit: Modificar consignatario
@ -166,6 +173,7 @@ globals:
agency: Agencia
workCenters: Centros de trabajo
modes: Modos
negative: Tickets negativos
zones: Zonas
zonesList: Listado
deliveryDays: Días de entrega
@ -286,9 +294,9 @@ globals:
buyRequest: Peticiones de compra
wasteBreakdown: Deglose de mermas
itemCreate: Nuevo artículo
tax: 'IVA'
botanical: 'Botánico'
barcode: 'Código de barras'
tax: IVA
botanical: Botánico
barcode: Código de barras
itemTypeCreate: Nueva familia
family: Familia
lastEntries: Últimas entradas
@ -352,7 +360,7 @@ globals:
from: Desde
to: Hasta
supplierFk: Proveedor
supplierRef: Ref. proveedor
supplierRef: Nº factura
serial: Serie
amount: Importe
awbCode: AWB
@ -397,6 +405,87 @@ cau:
subtitle: Al enviar este cau ya se envían todos los datos relacionados con el error, la sección, el usuario, etc
inputLabel: Explique el motivo por el que no deberia aparecer este fallo
askPrivileges: Solicitar permisos
entry:
list:
newEntry: Nueva entrada
tableVisibleColumns:
isExcludedFromAvailable: Excluir del inventario
isOrdered: Pedida
isConfirmed: Lista para etiquetar
isReceived: Recibida
isRaid: Redada
landed: Fecha
supplierFk: Proveedor
invoiceNumber: Nº Factura
reference: Ref/Alb/Guía
agencyModeId: Agencia
isBooked: Asentado
companyFk: Empresa
travelFk: Envio
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeDescription: Tipo entrada
invoiceAmount: Importe
summary:
invoiceAmount: Importe
commission: Comisión
currency: Moneda
invoiceNumber: Núm. factura
ordered: Pedida
booked: Contabilizada
excludedFromAvailable: Inventario
travelReference: Referencia
travelAgency: Agencia
travelShipped: F. envio
travelWarehouseOut: Alm. salida
travelDelivered: Enviada
travelLanded: F. entrega
travelReceived: Recibida
buys: Compras
stickers: Etiquetas
package: Embalaje
packing: Pack.
grouping: Group.
buyingValue: Coste
import: Importe
pvp: PVP
basicData:
travel: Envío
currency: Moneda
observation: Observación
commission: Comisión
booked: Asentado
excludedFromAvailable: Inventario
buys:
observations: Observaciónes
packagingFk: Embalaje
color: Color
printedStickers: Etiquetas impresas
notes:
observationType: Tipo de observación
latestBuys:
tableVisibleColumns:
image: Foto
itemFk: Id Artículo
weightByPiece: Peso (gramos)/tallo
isActive: Activo
family: Familia
entryFk: Entrada
freightValue: Porte
comissionValue: Comisión
packageValue: Embalaje
isIgnored: Ignorado
price2: Grouping
price3: Packing
minPrice: Min
ektFk: Ekt
packingOut: Embalaje envíos
landing: Llegada
isExcludedFromAvailable: Excluir del inventario
isRaid: Redada
invoiceNumber: Nº Factura
reference: Ref/Alb/Guía
ticket:
params:
ticketFk: ID de ticket
@ -410,6 +499,38 @@ ticket:
freightItemName: Nombre
packageItemName: Embalaje
longName: Descripción
pageTitles:
tickets: Tickets
list: Listado
ticketCreate: Nuevo ticket
summary: Resumen
basicData: Datos básicos
boxing: Encajado
sms: Sms
notes: Notas
sale: Lineas del pedido
dms: Gestión documental
negative: Tickets negativos
volume: Volumen
observation: Notas
ticketAdvance: Adelantar tickets
futureTickets: Tickets a futuro
expedition: Expedición
purchaseRequest: Petición de compra
weeklyTickets: Tickets programados
saleTracking: Líneas preparadas
services: Servicios
tracking: Estados
components: Componentes
pictures: Fotos
packages: Bultos
list:
nickname: Alias
state: Estado
shipped: Enviado
landed: Entregado
salesPerson: Comercial
total: Total
card:
customerId: ID cliente
customerCard: Ficha del cliente
@ -456,15 +577,11 @@ ticket:
consigneeStreet: Dirección
create:
address: Dirección
order:
field:
salesPersonFk: Comercial
form:
clientFk: Cliente
addressFk: Dirección
agencyModeFk: Agencia
list:
newOrder: Nuevo Pedido
invoiceOut:
card:
issued: Fecha emisión
customerCard: Ficha del cliente
ticketList: Listado de tickets
summary:
issued: Fecha
dued: Fecha límite
@ -475,6 +592,71 @@ order:
fee: Cuota
tickets: Tickets
totalWithVat: Importe
globalInvoices:
errors:
chooseValidClient: Selecciona un cliente válido
chooseValidCompany: Selecciona una empresa válida
chooseValidPrinter: Selecciona una impresora válida
chooseValidSerialType: Selecciona una tipo de serie válida
fillDates: La fecha de la factura y la fecha máxima deben estar completas
invoiceDateLessThanMaxDate: La fecha de la factura no puede ser menor que la fecha máxima
invoiceWithFutureDate: Existe una factura con una fecha futura
noTicketsToInvoice: No existen tickets para facturar
criticalInvoiceError: Error crítico en la facturación proceso detenido
invalidSerialTypeForAll: El tipo de serie debe ser global cuando se facturan todos los clientes
table:
addressId: Id dirección
streetAddress: Dirección fiscal
statusCard:
percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
negativeBases:
clientId: Id cliente
base: Base
active: Activo
hasToInvoice: Facturar
verifiedData: Datos comprobados
comercial: Comercial
errors:
downloadCsvFailed: Error al descargar CSV
order:
field:
salesPersonFk: Comercial
form:
clientFk: Cliente
addressFk: Dirección
agencyModeFk: Agencia
list:
newOrder: Nuevo Pedido
summary:
basket: Cesta
notConfirmed: No confirmada
created: Creado
createdFrom: Creado desde
address: Dirección
total: Total
vat: IVA
state: Estado
alias: Alias
items: Artículos
orderTicketList: Tickets del pedido
amount: Monto
confirm: Confirmar
confirmLines: Confirmar lineas
shelving:
list:
parking: Parking
priority: Prioridad
newShelving: Nuevo Carro
summary:
recyclable: Reciclable
parking:
pickingOrder: Orden de recogida
row: Fila
column: Columna
searchBar:
info: Puedes buscar por código de parking
label: Buscar parking...
department:
chat: Chat
bossDepartment: Jefe de departamento
@ -635,8 +817,8 @@ wagon:
volumeNotEmpty: El volumen no puede estar vacío
typeNotEmpty: El tipo no puede estar vacío
maxTrays: Has alcanzado el número máximo de bandejas
minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
maxWagonHeight: 'La altura máxima del vagón es '
minHeightBetweenTrays: La distancia mínima entre bandejas es
maxWagonHeight: La altura máxima del vagón es
uncompleteTrays: Hay bandejas sin completar
params:
label: Etiqueta
@ -653,12 +835,12 @@ supplier:
tableVisibleColumns:
nif: NIF/CIF
account: Cuenta
summary:
responsible: Responsable
verified: Verificado
isActive: Está activo
billingData: Forma de pago
financialData: Datos financieros
payDeadline: Plazo de pago
payDay: Día de pago
account: Cuenta
@ -736,6 +918,8 @@ travel:
deleteTravel: Eliminar envío
AddEntry: Añadir entrada
thermographs: Termógrafos
availabled: F. Disponible
availabledHour: Hora Disponible
hb: HB
basicData:
daysInForward: Desplazamiento automatico (redada)
@ -784,7 +968,7 @@ components:
cardDescriptor:
mainList: Listado principal
summary: Resumen
moreOptions: 'Más opciones'
moreOptions: Más opciones
leftMenu:
addToPinned: Añadir a fijados
removeFromPinned: Eliminar de fijados

1
src/pages/Account/Alias/Card/AliasDescriptor.vue
View File

@ -51,7 +51,6 @@ const removeAlias = () => {
<CardDescriptor
ref="descriptor"
:url="`MailAliases/${entityId}`"
module="Alias"
data-key="Alias"
title="alias"
>

3
src/pages/Account/Card/AccountDescriptor.vue
View File

@ -23,8 +23,7 @@ onMounted(async () => {
<CardDescriptor
ref="descriptor"
:url="`VnUsers/preview`"
:filter="filter"
module="Account"
:filter="{ ...filter, where: { id: entityId } }"
data-key="Account"
title="nickname"
>

40
src/pages/Account/Card/AccountDescriptorMenu.vue
View File

@ -12,6 +12,7 @@ import VnInputPassword from 'src/components/common/VnInputPassword.vue';
import VnChangePassword from 'src/components/common/VnChangePassword.vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
const $props = defineProps({
hasAccount: {
@ -34,6 +35,12 @@ account.value.hasAccount = hasAccount.value;
const entityId = computed(() => +route.params.id);
const hasitManagementAccess = ref();
const hasSysadminAccess = ref();
const isHimself = computed(() => user.value.id === account.value.id);
const url = computed(() =>
isHimself.value
? 'Accounts/change-password'
: `Accounts/${entityId.value}/setPassword`
);
async function updateStatusAccount(active) {
if (active) {
@ -106,11 +113,8 @@ onMounted(() => {
:ask-old-pass="askOldPass"
:submit-fn="
async (newPassword, oldPassword) => {
await axios.patch(`Accounts/change-password`, {
userId: entityId,
newPassword,
oldPassword,
});
const body = isHimself ? { userId: entityId, oldPassword } : {};
await axios.patch(url, { ...body, newPassword });
}
"
/>
@ -121,18 +125,14 @@ onMounted(() => {
:promise="sync"
>
<template #customHTML>
{{ shouldSyncPassword }}
<QCheckbox
:label="t('account.card.actions.sync.checkbox')"
<VnCheckbox
v-model="shouldSyncPassword"
class="full-width"
:label="t('account.card.actions.sync.checkbox')"
:info="t('account.card.actions.sync.tooltip')"
clearable
clear-icon="close"
>
<QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
<QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
</QIcon></QCheckbox
>
color="primary"
/>
<VnInputPassword
v-if="shouldSyncPassword"
:label="t('login.password')"
@ -158,16 +158,10 @@ onMounted(() => {
>
<QItemSection>{{ t('globals.delete') }}</QItemSection>
</QItem>
<QItem
v-if="hasSysadminAccess"
v-ripple
clickable
@click="user.id === account.id ? onChangePass(true) : onChangePass(false)"
>
<QItemSection v-if="user.id === account.id">
{{ t('globals.changePass') }}
<QItem v-if="hasSysadminAccess || isHimself" v-ripple clickable>
<QItemSection @click="onChangePass(isHimself)">
{{ isHimself ? t('globals.changePass') : t('globals.setPass') }}
</QItemSection>
<QItemSection v-else>{{ t('globals.setPass') }}</QItemSection>
</QItem>
<QItem
v-if="!account.hasAccount && hasSysadminAccess"

1
src/pages/Account/Role/Card/RoleDescriptor.vue
View File

@ -35,7 +35,6 @@ const removeRole = async () => {
<CardDescriptor
url="VnRoles"
:filter="{ where: { id: entityId } }"
module="Role"
data-key="Role"
:summary="$props.summary"
>

6
src/pages/Claim/Card/ClaimDescriptor.vue
View File

@ -46,7 +46,6 @@ onMounted(async () => {
<CardDescriptor
:url="`Claims/${entityId}`"
:filter="filter"
module="Claim"
title="client.name"
data-key="Claim"
>
@ -86,7 +85,7 @@ onMounted(async () => {
/>
</template>
</VnLv>
<VnLv :label="t('claim.zone')">
<VnLv v-if="entity.ticket?.zone?.id" :label="t('claim.zone')">
<template #value>
<span class="link">
{{ entity.ticket?.zone?.name }}
@ -98,11 +97,10 @@ onMounted(async () => {
:label="t('claim.province')"
:value="entity.ticket?.address?.province?.name"
/>
<VnLv :label="t('claim.ticketId')">
<VnLv v-if="entity.ticketFk" :label="t('claim.ticketId')">
<template #value>
<span class="link">
{{ entity.ticketFk }}
<TicketDescriptorProxy :id="entity.ticketFk" />
</span>
</template>

2
src/pages/Claim/Card/ClaimLines.vue
View File

@ -190,7 +190,7 @@ async function saveWhenHasChanges() {
ref="claimLinesForm"
:url="`Claims/${route.params.id}/lines`"
save-url="ClaimBeginnings/crud"
:filter="linesFilter"
:user-filter="linesFilter"
@on-fetch="onFetch"
v-model:selected="selected"
:default-save="false"

3
src/pages/Claim/Card/ClaimNotes.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { computed, useAttrs } from 'vue';
import { useRoute } from 'vue-router';
import { useState } from 'src/composables/useState';
import VnNotes from 'src/components/ui/VnNotes.vue';
@ -7,6 +7,7 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
const route = useRoute();
const state = useState();
const user = state.getUser();
const $attrs = useAttrs();
const $props = defineProps({
id: { type: [Number, String], default: null },

1
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -156,7 +156,6 @@ function onDrag() {
url="Claims"
:filter="claimDmsFilter"
@on-fetch="([data]) => setClaimDms(data)"
limit="20"
auto-load
ref="claimDmsRef"
/>

11
src/pages/Claim/ClaimFilter.vue
View File

@ -1,8 +1,6 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
@ -14,15 +12,14 @@ const props = defineProps({
type: String,
required: true,
},
states: {
type: Array,
default: () => [],
},
});
const states = ref([]);
defineExpose({ states });
</script>
<template>
<FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">

13
src/pages/Claim/ClaimList.vue
View File

@ -10,12 +10,13 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ZoneDescriptorProxy from '../Zone/Card/ZoneDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
import FetchData from 'src/components/FetchData.vue';
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ClaimList';
const claimFilterRef = ref();
const states = ref([]);
const columns = computed(() => [
{
align: 'left',
@ -81,8 +82,7 @@ const columns = computed(() => [
align: 'left',
label: t('claim.state'),
format: ({ stateCode }) =>
claimFilterRef.value?.states.find(({ code }) => code === stateCode)
?.description,
states.value?.find(({ code }) => code === stateCode)?.description,
name: 'stateCode',
chip: {
condition: () => true,
@ -92,7 +92,7 @@ const columns = computed(() => [
name: 'claimStateFk',
component: 'select',
attrs: {
options: claimFilterRef.value?.states,
options: states.value,
optionLabel: 'description',
},
},
@ -125,17 +125,18 @@ const STATE_COLOR = {
</script>
<template>
<FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="claim"
:array-data-props="{
url: 'Claims/filter',
order: ['cs.priority ASC', 'created ASC'],
order: 'cs.priority ASC, created ASC',
}"
>
<template #advanced-menu>
<ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
<ClaimFilter :data-key ref="claimFilterRef" :states />
</template>
<template #body>
<VnTable

6
src/pages/Customer/Card/CustomerAddress.vue
View File

@ -117,7 +117,7 @@ const toCustomerAddressEdit = (addressId) => {
data-key="CustomerAddresses"
order="id DESC"
ref="vnPaginateRef"
:user-filter="addressFilter"
:filter="addressFilter"
:url="`Clients/${route.params.id}/addresses`"
/>
<div class="full-width flex justify-center">
@ -189,11 +189,11 @@ const toCustomerAddressEdit = (addressId) => {
<QSeparator
class="q-mx-lg"
v-if="item.observations.length"
v-if="item?.observations?.length"
vertical
/>
<div v-if="item.observations.length">
<div v-if="item?.observations?.length">
<div
:key="obIndex"
class="flex q-mb-sm"

3
src/pages/Customer/Card/CustomerBillingData.vue
View File

@ -17,8 +17,7 @@ const bankEntitiesRef = ref(null);
const filter = {
fields: ['id', 'bic', 'name'],
order: 'bic ASC',
limit: 30,
order: 'bic ASC'
};
const getBankEntities = (data, formData) => {

91
src/pages/Customer/Card/CustomerConsumption.vue
View File

@ -61,6 +61,23 @@ const columns = computed(() => [
columnFilter: false,
cardVisible: true,
},
{
align: 'left',
name: 'buyerId',
label: t('customer.params.buyerId'),
component: 'select',
attrs: {
url: 'TicketRequests/getItemTypeWorker',
optionLabel: 'nickname',
optionValue: 'id',
fields: ['id', 'nickname'],
sortBy: ['nickname ASC'],
optionFilter: 'firstName',
},
cardVisible: false,
visible: false,
},
{
name: 'description',
align: 'left',
@ -74,6 +91,7 @@ const columns = computed(() => [
name: 'quantity',
label: t('globals.quantity'),
cardVisible: true,
visible: true,
columnFilter: {
inWhere: true,
},
@ -138,11 +156,11 @@ const updateDateParams = (value, params) => {
const campaign = campaignList.value.find((c) => c.id === value);
if (!campaign) return;
const { dated, previousDays, scopeDays } = campaign;
const _date = new Date(dated);
const [from, to] = dateRange(_date);
params.from = new Date(from.setDate(from.getDate() - previousDays)).toISOString();
params.to = new Date(to.setDate(to.getDate() + scopeDays)).toISOString();
const { dated, scopeDays } = campaign;
const from = new Date(dated);
from.setDate(from.getDate() - scopeDays);
params.from = from;
params.to = dated;
return params;
};
</script>
@ -200,29 +218,60 @@ const updateDateParams = (value, params) => {
<div v-if="row.subName" class="subName">
{{ row.subName }}
</div>
<FetchedTags :item="row" :max-length="3" />
<FetchedTags :item="row" />
</template>
<template #moreFilterPanel="{ params }">
<div class="column no-wrap flex-center q-gutter-y-md q-mt-xs q-pr-xl">
<VnSelect
:filled="true"
class="q-px-sm q-pt-none fit"
url="ItemTypes"
v-model="params.typeId"
:label="t('item.list.typeName')"
:fields="['id', 'name', 'categoryFk']"
:include="'category'"
:sortBy="'name ASC'"
dense
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption>{{
scope.opt?.category?.name
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:filled="true"
class="q-px-sm q-pt-none fit"
url="ItemCategories"
v-model="params.categoryId"
:label="t('item.list.category')"
:fields="['id', 'name']"
:sortBy="'name ASC'"
dense
/>
<VnSelect
v-model="params.campaign"
:options="campaignList"
:label="t('globals.campaign')"
:filled="true"
class="q-px-sm q-pt-none fit"
dense
option-label="code"
:option-label="(opt) => t(opt.code)"
:fields="['id', 'code', 'dated', 'scopeDays']"
@update:model-value="(data) => updateDateParams(data, params)"
dense
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.code }}
{{
new Date(scope.opt?.dated).getFullYear()
}}</QItemLabel
>
<QItemLabel> {{ t(scope.opt?.code) }} </QItemLabel>
<QItemLabel caption>
{{ new Date(scope.opt?.dated).getFullYear() }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
@ -247,7 +296,21 @@ const updateDateParams = (value, params) => {
</template>
<i18n>
en:
valentinesDay: Valentine's Day
mothersDay: Mother's Day
allSaints: All Saints' Day
frenchMothersDay: Mother's Day in France
es:
Enter a new search: Introduce una nueva búsqueda
Group by items: Agrupar por artículos
valentinesDay: Día de San Valentín
mothersDay: Día de la Madre
allSaints: Día de Todos los Santos
frenchMothersDay: (Francia) Día de la Madre
Campaign consumption: Consumo campaña
Campaign: Campaña
From: Desde
To: Hasta
</i18n>

17
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -55,7 +55,6 @@ const debtWarning = computed(() => {
<template>
<CardDescriptor
module="Customer"
:url="`Clients/${entityId}/getCard`"
:summary="$props.summary"
data-key="Customer"
@ -110,7 +109,21 @@ const debtWarning = computed(() => {
>
<QTooltip>{{ t('customer.card.isDisabled') }}</QTooltip>
</QIcon>
<QIcon v-if="entity.isFreezed" name="vn:frozen" size="xs" color="primary">
<QIcon
v-if="entity?.substitutionAllowed"
name="help"
size="xs"
color="primary"
>
<QTooltip>{{ t('Allowed substitution') }}</QTooltip>
</QIcon>
<QIcon
v-if="customer?.isFreezed"
name="vn:frozen"
size="xs"
color="primary"
>
<QTooltip>{{ t('customer.card.isFrozen') }}</QTooltip>
</QIcon>
<QIcon

17
src/pages/Customer/Card/CustomerDescriptorMenu.vue
View File

@ -61,6 +61,16 @@ const openCreateForm = (type) => {
.join('&');
useOpenURL(`/#/${type}/list?${params}`);
};
const updateSubstitutionAllowed = async () => {
try {
await axios.patch(`Clients/${route.params.id}`, {
substitutionAllowed: !$props.customer.substitutionAllowed,
});
notify('globals.notificationSent', 'positive');
} catch (error) {
notify(error.message, 'positive');
}
};
</script>
<template>
@ -69,6 +79,13 @@ const openCreateForm = (type) => {
{{ t('globals.pageTitles.createTicket') }}
</QItemSection>
</QItem>
<QItem v-ripple clickable>
<QItemSection @click="updateSubstitutionAllowed()">{{
$props.customer.substitutionAllowed
? t('Disable substitution')
: t('Allow substitution')
}}</QItemSection>
</QItem>
<QItem v-ripple clickable>
<QItemSection @click="showSmsDialog()">{{ t('Send SMS') }}</QItemSection>
</QItem>

74
src/pages/Customer/Card/CustomerFiscalData.vue
View File

@ -2,16 +2,24 @@
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
import { getDifferences, getUpdatedValues } from 'src/filters';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
const quasar = useQuasar();
const { t } = useI18n();
const route = useRoute();
const { notify } = useNotify();
const typesTaxes = ref([]);
const typesTransactions = ref([]);
@ -23,6 +31,37 @@ function handleLocation(data, location) {
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
function onBeforeSave(formData, originalData) {
return getUpdatedValues(
Object.keys(getDifferences(formData, originalData)),
formData,
);
}
async function checkEtChanges(data, _, originalData) {
const equalizatedHasChanged = originalData.isEqualizated != data.isEqualizated;
const hasToInvoiceByAddress =
originalData.hasToInvoiceByAddress || data.hasToInvoiceByAddress;
if (equalizatedHasChanged && hasToInvoiceByAddress) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('You changed the equalization tax'),
message: t('Do you want to spread the change?'),
promise: () => acceptPropagate(data),
},
});
} else if (equalizatedHasChanged) {
await acceptPropagate(data);
}
}
async function acceptPropagate({ isEqualizated }) {
await axios.patch(`Clients/${route.params.id}/addressesPropagateRe`, {
isEqualizated,
});
notify(t('Equivalent tax spreaded'), 'warning');
}
</script>
<template>
@ -36,6 +75,9 @@ function handleLocation(data, location) {
:url-update="`Clients/${route.params.id}/updateFiscalData`"
auto-load
model="Customer"
:mapper="onBeforeSave"
observe-form-changes
@on-data-saved="checkEtChanges"
>
<template #form="{ data, validate }">
<VnRow>
@ -110,14 +152,11 @@ function handleLocation(data, location) {
</VnRow>
<VnRow>
<QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
<div>
<QCheckbox :label="t('globals.isVies')" v-model="data.isVies" />
<QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>
{{ t('whenActivatingIt') }}
</QTooltip>
</QIcon>
</div>
<VnCheckbox
v-model="data.isVies"
:label="t('globals.isVies')"
:info="t('whenActivatingIt')"
/>
</VnRow>
<VnRow>
@ -129,17 +168,11 @@ function handleLocation(data, location) {
</VnRow>
<VnRow>
<div>
<QCheckbox
:label="t('Is equalizated')"
v-model="data.isEqualizated"
/>
<QIcon class="cursor-info q-ml-sm" name="info" size="sm">
<QTooltip>
{{ t('inOrderToInvoice') }}
</QTooltip>
</QIcon>
</div>
<VnCheckbox
v-model="data.isEqualizated"
:label="t('Is equalizated')"
:info="t('inOrderToInvoice')"
/>
<QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
</VnRow>
@ -180,6 +213,9 @@ es:
whenActivatingIt: Al activarlo, no informar el código del país en el campo nif
inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar
Daily invoice: Facturación diaria
Equivalent tax spreaded: Recargo de equivalencia propagado
You changed the equalization tax: Has cambiado el recargo de equivalencia
Do you want to spread the change?: ¿Deseas propagar el cambio a sus consignatarios?
en:
onlyLetters: Only letters, numbers and spaces can be used
whenActivatingIt: When activating it, do not enter the country code in the ID field

2
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -270,7 +270,7 @@ const sumRisk = ({ clientRisks }) => {
<VnTitle
target="_blank"
:url="`${grafanaUrl}/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
:text="t('customer.summary.payMethodFk')"
:text="t('customer.summary.financialData')"
icon="vn:grafana"
/>
<VnLv

7
src/pages/Customer/CustomerFilter.vue
View File

@ -1,4 +1,3 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
@ -52,11 +51,7 @@ const exprBuilder = (param, value) => {
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('globals.name')"
v-model="params.name"
is-outlined
/>
<VnInput :label="t('Name')" v-model="params.name" is-outlined />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">

4
src/pages/Customer/CustomerList.vue
View File

@ -264,6 +264,7 @@ const columns = computed(() => [
align: 'left',
name: 'isActive',
label: t('customer.summary.isActive'),
component: 'checkbox',
chip: {
color: null,
condition: (value) => !value,
@ -302,6 +303,7 @@ const columns = computed(() => [
align: 'left',
name: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
component: 'checkbox',
chip: {
color: null,
condition: (value) => value,
@ -419,7 +421,7 @@ function handleLocation(data, location) {
<VnTable
ref="tableRef"
:data-key="dataKey"
url="Clients/filter"
url="Clients/extendedListFilter"
:create="{
urlCreate: 'Clients/createWithUser',
title: t('globals.pageTitles.customerCreate'),

2
src/pages/Customer/Defaulter/CustomerDefaulter.vue
View File

@ -9,7 +9,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { useArrayData } from 'src/composables/useArrayData';

2
src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
View File

@ -87,7 +87,7 @@ onMounted(async () => {
<FetchData
url="Campaigns/latest"
@on-fetch="(data) => (campaignsOptions = data)"
:filter="{ fields: ['id', 'code', 'dated'], order: 'code ASC', limit: 30 }"
:filter="{ fields: ['id', 'code', 'dated'], order: 'code ASC' }"
auto-load
/>
<FetchData

1
src/pages/Customer/components/CustomerAddressCreate.vue
View File

@ -98,7 +98,6 @@ function onAgentCreated({ id, fiscalName }, data) {
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.location"
:required="true"
@update:model-value="(location) => handleLocation(data, location)"
/>

9
src/pages/Customer/components/CustomerAddressEdit.vue
View File

@ -96,11 +96,11 @@ const updateObservations = async (payload) => {
await axios.post('AddressObservations/crud', payload);
notes.value = [];
deletes.value = [];
toCustomerAddress();
};
async function updateAll({ data, payload }) {
await updateObservations(payload);
await updateAddress(data);
toCustomerAddress();
}
function getPayload() {
return {
@ -137,15 +137,12 @@ async function handleDialog(data) {
.onOk(async () => {
await updateAddressTicket();
await updateAll(body);
toCustomerAddress();
})
.onCancel(async () => {
await updateAll(body);
toCustomerAddress();
});
} else {
updateAll(body);
toCustomerAddress();
await updateAll(body);
}
}
@ -236,7 +233,7 @@ function handleLocation(data, location) {
postcode: data.postalCode,
city: data.city,
province: data.province,
country: data.province.country,
country: data.province?.country,
}"
@update:model-value="(location) => handleLocation(data, location)"
></VnLocation>

6
src/pages/Customer/components/CustomerNewPayment.vue
View File

@ -84,7 +84,7 @@ function setPaymentType(accounting) {
viewReceipt.value = isCash.value;
if (accountingType.value.daysInFuture)
initialData.payed.setDate(
initialData.payed.getDate() + accountingType.value.daysInFuture
initialData.payed.getDate() + accountingType.value.daysInFuture,
);
maxAmount.value = accountingType.value && accountingType.value.maxAmount;
@ -114,7 +114,7 @@ function onBeforeSave(data) {
if (isCash.value && shouldSendEmail.value && !data.email)
return notify(t('There is no assigned email for this client'), 'negative');
data.bankFk = data.bankFk.id;
data.bankFk = data.bankFk?.id;
return data;
}
@ -189,7 +189,7 @@ async function getAmountPaid() {
:url-create="urlCreate"
:mapper="onBeforeSave"
@on-data-saved="onDataSaved"
:prevent-submit="true"
prevent-submit
>
<template #form="{ data, validate }">
<span ref="closeButton" class="row justify-end close-icon" v-close-popup>

3
src/pages/Customer/locale/en.yml
View File

@ -107,6 +107,9 @@ customer:
defaulterSinced: Defaulted Since
hasRecovery: Has Recovery
socialName: Social name
typeId: Type
buyerId: Buyer
categoryId: Category
city: City
phone: Phone
postcode: Postcode

3
src/pages/Customer/locale/es.yml
View File

@ -108,6 +108,9 @@ customer:
hasRecovery: Tiene recobro
socialName: Razón social
campaign: Campaña
typeId: Familia
buyerId: Comprador
categoryId: Reino
city: Ciudad
phone: Teléfono
postcode: Código postal

63
src/pages/Entry/Card/EntryBasicData.vue
View File

@ -1,30 +1,32 @@
<script setup>
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useRole } from 'src/composables/useRole';
import { useState } from 'src/composables/useState';
import { checkEntryLock } from 'src/composables/checkEntryLock';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FilterTravelForm from 'src/components/FilterTravelForm.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import { toDate } from 'src/filters';
import VnSelectTravelExtended from 'src/components/common/VnSelectTravelExtended.vue';
import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
const route = useRoute();
const { t } = useI18n();
const { hasAny } = useRole();
const isAdministrative = () => hasAny(['administrative']);
const state = useState();
const user = state.getUser().fn();
const companiesOptions = ref([]);
const currenciesOptions = ref([]);
const onFilterTravelSelected = (formData, id) => {
formData.travelFk = id;
};
onMounted(() => {
checkEntryLock(route.params.id, user.id);
});
</script>
<template>
@ -52,46 +54,24 @@ const onFilterTravelSelected = (formData, id) => {
>
<template #form="{ data }">
<VnRow>
<VnSelectTravelExtended
:data="data"
v-model="data.travelFk"
:onFilterTravelSelected="(data, result) => (data.travelFk = result)"
/>
<VnSelectSupplier
v-model="data.supplierFk"
hide-selected
:required="true"
map-options
/>
<VnSelectDialog
:label="t('entry.basicData.travel')"
v-model="data.travelFk"
url="Travels/filter"
:fields="['id', 'warehouseInName']"
option-value="id"
option-label="warehouseInName"
map-options
hide-selected
:required="true"
action-icon="filter_alt"
>
<template #form>
<FilterTravelForm
@travel-selected="onFilterTravelSelected(data, $event)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.agencyModeName }} -
{{ scope.opt?.warehouseInName }}
({{ toDate(scope.opt?.shipped) }}) →
{{ scope.opt?.warehouseOutName }}
({{ toDate(scope.opt?.landed) }})
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectDialog>
</VnRow>
<VnRow>
<VnInput v-model="data.reference" :label="t('globals.reference')" />
<VnInputNumber
v-model="data.invoiceAmount"
:label="t('entry.summary.invoiceAmount')"
:positive="false"
/>
</VnRow>
<VnRow>
<VnInput
@ -113,8 +93,7 @@ const onFilterTravelSelected = (formData, id) => {
<VnInputNumber
:label="t('entry.summary.commission')"
v-model="data.commission"
step="1"
autofocus
:step="1"
:positive="false"
/>
<VnSelect
@ -161,7 +140,7 @@ const onFilterTravelSelected = (formData, id) => {
:label="t('entry.summary.excludedFromAvailable')"
/>
<QCheckbox
v-if="isAdministrative()"
:disable="!isAdministrative()"
v-model="data.isBooked"
:label="t('entry.basicData.booked')"
/>

1232
src/pages/Entry/Card/EntryBuys.vue
View File

File diff suppressed because it is too large Load Diff

158
src/pages/Entry/Card/EntryDescriptor.vue
View File

@ -1,12 +1,19 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { toDate } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import EntryDescriptorMenu from './EntryDescriptorMenu.vue';
import { useQuasar } from 'quasar';
import { usePrintService } from 'composables/usePrintService';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import axios from 'axios';
const quasar = useQuasar();
const { push } = useRouter();
const { openReport } = usePrintService();
const $props = defineProps({
id: {
@ -83,12 +90,63 @@ const getEntryRedirectionFilter = (entry) => {
to,
});
};
function showEntryReport() {
openReport(`Entries/${entityId.value}/entry-order-pdf`);
}
function showNotification(type, message) {
quasar.notify({
type: type,
message: t(message),
});
}
async function recalculateRates(entity) {
try {
const entryConfig = await axios.get('EntryConfigs/findOne');
if (entryConfig.data?.inventorySupplierFk === entity.supplierFk) {
showNotification(
'negative',
'Cannot recalculate prices because this is an inventory entry',
);
return;
}
await axios.post(`Entries/${entityId.value}/recalcEntryPrices`);
showNotification('positive', 'Entry prices recalculated');
} catch (error) {
showNotification('negative', 'Failed to recalculate rates');
console.error(error);
}
}
async function cloneEntry() {
try {
const response = await axios.post(`Entries/${entityId.value}/cloneEntry`);
push({ path: `/entry/${response.data}` });
showNotification('positive', 'Entry cloned');
} catch (error) {
showNotification('negative', 'Failed to clone entry');
console.error(error);
}
}
async function deleteEntry() {
try {
await axios.post(`Entries/${entityId.value}/deleteEntry`);
push({ path: `/entry/list` });
showNotification('positive', 'Entry deleted');
} catch (error) {
showNotification('negative', 'Failed to delete entry');
console.error(error);
}
}
</script>
<template>
<CardDescriptor
ref="entryDescriptorRef"
module="Entry"
:url="`Entries/${entityId}`"
:userFilter="entryFilter"
title="supplier.nickname"
@ -96,15 +154,56 @@ const getEntryRedirectionFilter = (entry) => {
width="lg-width"
>
<template #menu="{ entity }">
<EntryDescriptorMenu :id="entity.id" />
<QItem
v-ripple
clickable
@click="showEntryReport(entity)"
data-cy="show-entry-report"
>
<QItemSection>{{ t('Show entry report') }}</QItemSection>
</QItem>
<QItem
v-ripple
clickable
@click="recalculateRates(entity)"
data-cy="recalculate-rates"
>
<QItemSection>{{ t('Recalculate rates') }}</QItemSection>
</QItem>
<QItem v-ripple clickable @click="cloneEntry(entity)" data-cy="clone-entry">
<QItemSection>{{ t('Clone') }}</QItemSection>
</QItem>
<QItem v-ripple clickable @click="deleteEntry(entity)" data-cy="delete-entry">
<QItemSection>{{ t('Delete') }}</QItemSection>
</QItem>
</template>
<template #body="{ entity }">
<VnLv :label="t('globals.agency')" :value="entity.travel?.agency?.name" />
<VnLv :label="t('shipped')" :value="toDate(entity.travel?.shipped)" />
<VnLv :label="t('landed')" :value="toDate(entity.travel?.landed)" />
<VnLv :label="t('Travel')">
<template #value>
<span class="link" v-if="entity?.travelFk">
{{ entity.travel?.agency?.name }}
{{ entity.travel?.warehouseOut?.code }} &rarr;
{{ entity.travel?.warehouseIn?.code }}
<TravelDescriptorProxy :id="entity?.travelFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('globals.warehouseOut')"
:value="entity.travel?.warehouseOut?.name"
:label="t('entry.summary.travelShipped')"
:value="toDate(entity.travel?.shipped)"
/>
<VnLv
:label="t('entry.summary.travelLanded')"
:value="toDate(entity.travel?.landed)"
/>
<VnLv :label="t('entry.summary.currency')" :value="entity?.currency?.code" />
<VnLv
:label="t('entry.summary.invoiceAmount')"
:value="entity?.invoiceAmount"
/>
<VnLv
:label="t('entry.summary.entryType')"
:value="entity?.entryType?.description"
/>
</template>
<template #icons="{ entity }">
@ -131,6 +230,14 @@ const getEntryRedirectionFilter = (entry) => {
}}</QTooltip
>
</QIcon>
<QIcon
v-if="!entity?.travelFk"
name="vn:deletedTicket"
size="xs"
color="primary"
>
<QTooltip>{{ t('This entry is deleted') }}</QTooltip>
</QIcon>
</QCardActions>
</template>
<template #actions="{ entity }">
@ -143,21 +250,6 @@ const getEntryRedirectionFilter = (entry) => {
>
<QTooltip>{{ t('Supplier card') }}</QTooltip>
</QBtn>
<QBtn
:to="{
name: 'TravelMain',
query: {
params: JSON.stringify({
agencyModeFk: entity.travel?.agencyModeFk,
}),
},
}"
size="md"
icon="local_airport"
color="primary"
>
<QTooltip>{{ t('All travels with current agency') }}</QTooltip>
</QBtn>
<QBtn
:to="{
name: 'EntryMain',
@ -177,10 +269,24 @@ const getEntryRedirectionFilter = (entry) => {
</template>
<i18n>
es:
Travel: Envío
Supplier card: Ficha del proveedor
All travels with current agency: Todos los envíos con la agencia actual
All entries with current supplier: Todas las entradas con el proveedor actual
Show entry report: Ver informe del pedido
Inventory entry: Es inventario
Virtual entry: Es una redada
shipped: Enviado
landed: Recibido
This entry is deleted: Esta entrada está eliminada
Cannot recalculate prices because this is an inventory entry: No se pueden recalcular los precios porque es una entrada de inventario
Entry deleted: Entrada eliminada
Entry cloned: Entrada clonada
Entry prices recalculated: Precios de la entrada recalculados
Failed to recalculate rates: No se pudieron recalcular las tarifas
Failed to clone entry: No se pudo clonar la entrada
Failed to delete entry: No se pudo eliminar la entrada
Recalculate rates: Recalcular tarifas
Clone: Clonar
Delete: Eliminar
</i18n>

4
src/pages/Entry/Card/EntryDescriptorMenu.vue
View File

@ -54,8 +54,8 @@ const transferEntry = async () => {
<i18n>
en:
transferEntryDialog: The entries will be transferred to the next day
transferEntry: Transfer Entry
transferEntry: Partial delay
es:
transferEntryDialog: Se van a transferir las compras al dia siguiente
transferEntry: Transferir Entrada
transferEntry: Retraso parcial
</i18n>

17
src/pages/Entry/Card/EntryFilter.js
View File

@ -9,6 +9,7 @@ export default {
'shipped',
'agencyModeFk',
'warehouseOutFk',
'warehouseInFk',
'daysInForward',
],
include: [
@ -21,13 +22,13 @@ export default {
{
relation: 'warehouseOut',
scope: {
fields: ['name'],
fields: ['name', 'code'],
},
},
{
relation: 'warehouseIn',
scope: {
fields: ['name'],
fields: ['name', 'code'],
},
},
],
@ -39,5 +40,17 @@ export default {
fields: ['id', 'nickname'],
},
},
{
relation: 'currency',
scope: {
fields: ['id', 'code'],
},
},
{
relation: 'entryType',
scope: {
fields: ['code', 'description'],
},
},
],
};

388
src/pages/Entry/Card/EntrySummary.vue
View File

@ -2,19 +2,17 @@
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import { toDate, toCurrency, toCelsius } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import VnToSummary from 'src/components/ui/VnToSummary.vue';
import EntryDescriptorMenu from './EntryDescriptorMenu.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import EntryBuys from './EntryBuys.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';
const route = useRoute();
const { t } = useI18n();
@ -33,117 +31,6 @@ const entry = ref();
const entryBuys = ref([]);
const entryUrl = ref();
onMounted(async () => {
entryUrl.value = (await getUrl('entry/')) + entityId.value;
});
const tableColumnComponents = {
quantity: {
component: () => 'span',
props: () => {},
},
stickers: {
component: () => 'span',
props: () => {},
event: () => {},
},
packagingFk: {
component: () => 'span',
props: () => {},
event: () => {},
},
weight: {
component: () => 'span',
props: () => {},
event: () => {},
},
packing: {
component: () => 'span',
props: () => {},
event: () => {},
},
grouping: {
component: () => 'span',
props: () => {},
event: () => {},
},
buyingValue: {
component: () => 'span',
props: () => {},
event: () => {},
},
amount: {
component: () => 'span',
props: () => {},
event: () => {},
},
pvp: {
component: () => 'span',
props: () => {},
event: () => {},
},
};
const entriesTableColumns = computed(() => {
return [
{
label: t('globals.quantity'),
field: 'quantity',
name: 'quantity',
align: 'left',
},
{
label: t('entry.summary.stickers'),
field: 'stickers',
name: 'stickers',
align: 'left',
},
{
label: t('entry.summary.package'),
field: 'packagingFk',
name: 'packagingFk',
align: 'left',
},
{
label: t('globals.weight'),
field: 'weight',
name: 'weight',
align: 'left',
},
{
label: t('entry.summary.packing'),
field: 'packing',
name: 'packing',
align: 'left',
},
{
label: t('entry.summary.grouping'),
field: 'grouping',
name: 'grouping',
align: 'left',
},
{
label: t('entry.summary.buyingValue'),
field: 'buyingValue',
name: 'buyingValue',
align: 'left',
format: (value) => toCurrency(value),
},
{
label: t('entry.summary.import'),
name: 'amount',
align: 'left',
format: (_, row) => toCurrency(row.buyingValue * row.quantity),
},
{
label: t('entry.summary.pvp'),
name: 'pvp',
align: 'left',
format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
},
];
});
async function setEntryData(data) {
if (data) entry.value = data;
await fetchEntryBuys();
@ -153,14 +40,18 @@ const fetchEntryBuys = async () => {
const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
if (data) entryBuys.value = data;
};
</script>
onMounted(async () => {
entryUrl.value = (await getUrl('entry/')) + entityId.value;
});
</script>
<template>
<CardSummary
ref="summaryRef"
:url="`Entries/${entityId}/getEntry`"
@on-fetch="(data) => setEntryData(data)"
data-key="EntrySummary"
data-cy="entry-summary"
>
<template #header-left>
<VnToSummary
@ -173,159 +64,154 @@ const fetchEntryBuys = async () => {
<template #header>
<span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
</template>
<template #menu="{ entity }">
<EntryDescriptorMenu :id="entity.id" />
</template>
<template #body>
<QCard class="vn-one">
<VnTitle
:url="`#/entry/${entityId}/basic-data`"
:text="t('globals.summary.basicData')"
/>
<VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
<VnLv
:label="t('entry.summary.currency')"
:value="entry.currency?.name"
/>
<VnLv :label="t('globals.company')" :value="entry.company.code" />
<VnLv :label="t('globals.reference')" :value="entry.reference" />
<VnLv
:label="t('entry.summary.invoiceNumber')"
:value="entry.invoiceNumber"
/>
<VnLv
:label="t('entry.basicData.initialTemperature')"
:value="toCelsius(entry.initialTemperature)"
/>
<VnLv
:label="t('entry.basicData.finalTemperature')"
:value="toCelsius(entry.finalTemperature)"
/>
<div class="card-group">
<div class="card-content">
<VnLv
:label="t('entry.summary.commission')"
:value="entry?.commission"
/>
<VnLv
:label="t('entry.summary.currency')"
:value="entry?.currency?.name"
/>
<VnLv
:label="t('globals.company')"
:value="entry?.company?.code"
/>
<VnLv :label="t('globals.reference')" :value="entry?.reference" />
<VnLv
:label="t('entry.summary.invoiceNumber')"
:value="entry?.invoiceNumber"
/>
</div>
<div class="card-content">
<VnCheckbox
:label="t('entry.summary.ordered')"
v-model="entry.isOrdered"
:disable="true"
size="xs"
/>
<VnCheckbox
:label="t('globals.confirmed')"
v-model="entry.isConfirmed"
:disable="true"
size="xs"
/>
<VnCheckbox
:label="t('entry.summary.booked')"
v-model="entry.isBooked"
:disable="true"
size="xs"
/>
<VnCheckbox
:label="t('entry.summary.excludedFromAvailable')"
v-model="entry.isExcludedFromAvailable"
:disable="true"
size="xs"
/>
</div>
</div>
</QCard>
<QCard class="vn-one">
<QCard class="vn-one" v-if="entry?.travelFk">
<VnTitle
:url="`#/entry/${entityId}/basic-data`"
:text="t('globals.summary.basicData')"
:url="`#/travel/${entry.travel.id}/summary`"
:text="t('Travel')"
/>
<VnLv :label="t('entry.summary.travelReference')">
<template #value>
<span class="link">
{{ entry.travel.ref }}
<TravelDescriptorProxy :id="entry.travel.id" />
</span>
</template>
</VnLv>
<VnLv
:label="t('entry.summary.travelAgency')"
:value="entry.travel.agency?.name"
/>
<VnLv
:label="t('globals.shipped')"
:value="toDate(entry.travel.shipped)"
/>
<VnLv
:label="t('globals.warehouseOut')"
:value="entry.travel.warehouseOut?.name"
/>
<VnLv
:label="t('entry.summary.travelDelivered')"
:value="entry.travel.isDelivered"
/>
<VnLv :label="t('globals.landed')" :value="toDate(entry.travel.landed)" />
<VnLv
:label="t('globals.warehouseIn')"
:value="entry.travel.warehouseIn?.name"
/>
<VnLv
:label="t('entry.summary.travelReceived')"
:value="entry.travel.isReceived"
/>
</QCard>
<QCard class="vn-one">
<VnTitle :url="`#/travel/${entityId}/summary`" :text="t('Travel data')" />
<VnRow class="block">
<VnLv :label="t('entry.summary.ordered')" :value="entry.isOrdered" />
<VnLv :label="t('globals.confirmed')" :value="entry.isConfirmed" />
<VnLv :label="t('entry.summary.booked')" :value="entry.isBooked" />
<VnLv
:label="t('entry.summary.excludedFromAvailable')"
:value="entry.isExcludedFromAvailable"
/>
</VnRow>
<div class="card-group">
<div class="card-content">
<VnLv :label="t('entry.summary.travelReference')">
<template #value>
<span class="link">
{{ entry.travel.ref }}
<TravelDescriptorProxy :id="entry.travel.id" />
</span>
</template>
</VnLv>
<VnLv
:label="t('entry.summary.travelAgency')"
:value="entry.travel.agency?.name"
/>
<VnLv
:label="t('entry.summary.travelShipped')"
:value="toDate(entry.travel.shipped)"
/>
<VnLv
:label="t('globals.warehouseOut')"
:value="entry.travel.warehouseOut?.name"
/>
<VnLv
:label="t('entry.summary.travelLanded')"
:value="toDate(entry.travel.landed)"
/>
<VnLv
:label="t('globals.warehouseIn')"
:value="entry.travel.warehouseIn?.name"
/>
</div>
<div class="card-content">
<VnCheckbox
:label="t('entry.summary.travelDelivered')"
v-model="entry.travel.isDelivered"
:disable="true"
size="xs"
/>
<VnCheckbox
:label="t('entry.summary.travelReceived')"
v-model="entry.travel.isReceived"
:disable="true"
size="xs"
/>
</div>
</div>
</QCard>
<QCard class="vn-max">
<VnTitle
:url="`#/entry/${entityId}/buys`"
:text="t('entry.summary.buys')"
/>
<QTable
:rows="entryBuys"
:columns="entriesTableColumns"
row-key="index"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
>
<template #body="{ cols, row, rowIndex }">
<QTr no-hover>
<QTd v-for="col in cols" :key="col?.name">
<component
:is="tableColumnComponents[col?.name].component()"
v-bind="tableColumnComponents[col?.name].props()"
@click="tableColumnComponents[col?.name].event()"
class="col-content"
>
<template
v-if="
col?.name !== 'observation' &&
col?.name !== 'isConfirmed'
"
>{{ col.value }}</template
>
<QTooltip v-if="col.toolTip">{{
col.toolTip
}}</QTooltip>
</component>
</QTd>
</QTr>
<QTr no-hover>
<QTd>
<span>{{ row.item.itemType.code }}</span>
</QTd>
<QTd>
<span>{{ row.item.id }}</span>
</QTd>
<QTd>
<span>{{ row.item.size }}</span>
</QTd>
<QTd>
<span>{{ toCurrency(row.item.minPrice) }}</span>
</QTd>
<QTd colspan="6">
<span>{{ row.item.concept }}</span>
<span v-if="row.item.subName" class="subName">
{{ row.item.subName }}
</span>
<FetchedTags :item="row.item" />
</QTd>
</QTr>
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
<QTr v-if="rowIndex !== entryBuys.length - 1">
<QTd colspan="10" class="vn-table-separation-row" />
</QTr>
</template>
</QTable>
<EntryBuys
v-if="entityId"
:id="Number(entityId)"
:editable-mode="false"
table-height="49vh"
/>
</QCard>
</template>
</CardSummary>
</template>
<style lang="scss" scoped>
.separation-row {
background-color: var(--vn-section-color) !important;
.card-group {
display: flex;
flex-direction: column;
}
.card-content {
display: flex;
flex-direction: column;
text-overflow: ellipsis;
> div {
max-height: 24px;
}
}
@media (min-width: 1010px) {
.card-group {
flex-direction: row;
}
.card-content {
flex: 1;
margin-right: 16px;
}
}
</style>
<i18n>
es:
Travel data: Datos envío
Travel: Envío
InvoiceIn data: Datos factura
</i18n>

257
src/pages/Entry/EntryFilter.vue
View File

@ -19,6 +19,7 @@ const props = defineProps({
const currenciesOptions = ref([]);
const companiesOptions = ref([]);
const entryFilterPanel = ref();
</script>
<template>
@ -38,7 +39,7 @@ const companiesOptions = ref([]);
@on-fetch="(data) => (currenciesOptions = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel ref="entryFilterPanel" :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`entryFilter.params.${tag.label}`) }}: </strong>
@ -48,70 +49,65 @@ const companiesOptions = ref([]);
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnInput
v-model="params.search"
:label="t('entryFilter.params.search')"
is-outlined
/>
<QCheckbox
:label="t('params.isExcludedFromAvailable')"
v-model="params.isExcludedFromAvailable"
toggle-indeterminate
>
<QTooltip>
{{ t('params.isExcludedFromAvailable') }}
</QTooltip>
</QCheckbox>
</QItemSection>
<QItemSection>
<QCheckbox
:label="t('params.isOrdered')"
v-model="params.isOrdered"
toggle-indeterminate
>
<QTooltip>
{{ t('entry.list.tableVisibleColumns.isOrdered') }}
</QTooltip>
</QCheckbox>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.reference"
:label="t('entryFilter.params.reference')"
is-outlined
/>
<QCheckbox
:label="t('params.isReceived')"
v-model="params.isReceived"
toggle-indeterminate
>
<QTooltip>
{{ t('entry.list.tableVisibleColumns.isReceived') }}
</QTooltip>
</QCheckbox>
</QItemSection>
<QItemSection>
<QCheckbox
:label="t('entry.list.tableVisibleColumns.isConfirmed')"
v-model="params.isConfirmed"
toggle-indeterminate
>
<QTooltip>
{{ t('entry.list.tableVisibleColumns.isConfirmed') }}
</QTooltip>
</QCheckbox>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.invoiceNumber"
:label="t('entryFilter.params.invoiceNumber')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.travelFk"
:label="t('entryFilter.params.travelFk')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('entryFilter.params.companyFk')"
v-model="params.companyFk"
<VnInputDate
:label="t('params.landed')"
v-model="params.landed"
@update:model-value="searchFn()"
:options="companiesOptions"
option-value="id"
option-label="code"
hide-selected
dense
outlined
rounded
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('entryFilter.params.currencyFk')"
v-model="params.currencyFk"
@update:model-value="searchFn()"
:options="currenciesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
<VnInput v-model="params.id" label="Id" is-outlined />
</QItemSection>
</QItem>
<QItem>
@ -125,62 +121,165 @@ const companiesOptions = ref([]);
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('entryFilter.params.created')"
v-model="params.created"
@update:model-value="searchFn()"
<VnInput
v-model="params.invoiceNumber"
:label="t('params.invoiceNumber')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('entryFilter.params.from')"
v-model="params.from"
@update:model-value="searchFn()"
<VnInput
v-model="params.reference"
:label="t('entry.list.tableVisibleColumns.reference')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('entryFilter.params.to')"
v-model="params.to"
<VnSelect
:label="t('params.agencyModeId')"
v-model="params.agencyModeId"
@update:model-value="searchFn()"
url="AgencyModes"
:fields="['id', 'name']"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.evaNotes"
:label="t('params.evaNotes')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
:label="t('entryFilter.params.isBooked')"
v-model="params.isBooked"
toggle-indeterminate
/>
</QItemSection>
<QItemSection>
<QCheckbox
:label="t('entryFilter.params.isConfirmed')"
v-model="params.isConfirmed"
toggle-indeterminate
<VnSelect
:label="t('params.warehouseOutFk')"
v-model="params.warehouseOutFk"
@update:model-value="searchFn()"
url="Warehouses"
:fields="['id', 'name']"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
:label="t('entryFilter.params.isOrdered')"
v-model="params.isOrdered"
toggle-indeterminate
<VnSelect
:label="t('params.warehouseInFk')"
v-model="params.warehouseInFk"
@update:model-value="searchFn()"
url="Warehouses"
:fields="['id', 'name']"
hide-selected
dense
outlined
rounded
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.name }}
</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt?.id} , ${scope.opt?.nickname}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.invoiceNumber"
:label="t('params.invoiceNumber')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('params.entryTypeCode')"
v-model="params.entryTypeCode"
@update:model-value="searchFn()"
url="EntryTypes"
:fields="['code', 'description']"
option-value="code"
option-label="description"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.evaNotes"
:label="t('params.evaNotes')"
is-outlined
/>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
isExcludedFromAvailable: Inventory
isOrdered: Ordered
isReceived: Received
isConfirmed: Confirmed
isRaid: Raid
landed: Date
id: Id
supplierFk: Supplier
invoiceNumber: Invoice number
reference: Ref/Alb/Guide
agencyModeId: Agency mode
evaNotes: Notes
warehouseOutFk: Origin
warehouseInFk: Destiny
entryTypeCode: Entry type
hasToShowDeletedEntries: Show deleted entries
es:
params:
isExcludedFromAvailable: Inventario
isOrdered: Pedida
isConfirmed: Confirmado
isReceived: Recibida
isRaid: Raid
landed: Fecha
id: Id
supplierFk: Proveedor
invoiceNumber: Núm. factura
reference: Ref/Alb/Guía
agencyModeId: Modo agencia
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeCode: Tipo de entrada
hasToShowDeletedEntries: Mostrar entradas eliminadas
</i18n>

20
src/pages/Entry/EntryLatestBuysFilter.vue
View File

@ -1,8 +1,6 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';
import VnSelect from 'components/common/VnSelect.vue';
@ -18,18 +16,10 @@ defineProps({
},
});
const itemTypeWorkersOptions = ref([]);
const tagValues = ref([]);
</script>
<template>
<FetchData
url="TicketRequests/getItemTypeWorker"
limit="30"
auto-load
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
@on-fetch="(data) => (itemTypeWorkersOptions = data)"
/>
<ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
<template #body="{ params, searchFn }">
<QItem class="q-my-md">
@ -37,9 +27,10 @@ const tagValues = ref([]);
<VnSelect
:label="t('components.itemsFilterPanel.salesPersonFk')"
v-model="params.salesPersonFk"
:options="itemTypeWorkersOptions"
option-value="id"
url="TicketRequests/getItemTypeWorker"
option-label="nickname"
:fields="['id', 'nickname']"
sort-by="nickname ASC"
dense
outlined
rounded
@ -52,8 +43,9 @@ const tagValues = ref([]);
<QItemSection>
<VnSelectSupplier
v-model="params.supplierFk"
@update:model-value="searchFn()"
hide-selected
url="Suppliers"
:fields="['id', 'name', 'nickname']"
sort-by="name ASC"
dense
outlined
rounded

368
src/pages/Entry/EntryList.vue
View File

@ -1,21 +1,25 @@
<script setup>
import axios from 'axios';
import VnSection from 'src/components/common/VnSection.vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { onBeforeMount } from 'vue';
import EntryFilter from './EntryFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { toCelsius, toDate } from 'src/filters';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import EntrySummary from './Card/EntrySummary.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
import VnSelectTravelExtended from 'src/components/common/VnSelectTravelExtended.vue';
import { toDate } from 'src/filters';
const { t } = useI18n();
const tableRef = ref();
const defaultEntry = ref({});
const state = useState();
const user = state.getUser();
const dataKey = 'EntryList';
const { viewSummary } = useSummaryDialog();
const entryFilter = {
const entryQueryFilter = {
include: [
{
relation: 'suppliers',
@ -40,44 +44,58 @@ const entryFilter = {
const columns = computed(() => [
{
name: 'status',
columnFilter: false,
labelAbbreviation: 'Ex',
label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
toolTip: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
name: 'isExcludedFromAvailable',
component: 'checkbox',
width: '35px',
},
{
align: 'left',
label: t('globals.id'),
name: 'id',
isId: true,
chip: {
condition: () => true,
},
labelAbbreviation: 'Pe',
label: t('entry.list.tableVisibleColumns.isOrdered'),
toolTip: t('entry.list.tableVisibleColumns.isOrdered'),
name: 'isOrdered',
component: 'checkbox',
width: '35px',
},
{
align: 'left',
label: t('globals.reference'),
name: 'reference',
isTitle: true,
component: 'input',
columnField: {
component: null,
},
create: true,
cardVisible: true,
labelAbbreviation: 'LE',
label: t('entry.list.tableVisibleColumns.isConfirmed'),
toolTip: t('entry.list.tableVisibleColumns.isConfirmed'),
name: 'isConfirmed',
component: 'checkbox',
width: '35px',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.created'),
name: 'created',
create: true,
cardVisible: true,
labelAbbreviation: 'Re',
label: t('entry.list.tableVisibleColumns.isReceived'),
toolTip: t('entry.list.tableVisibleColumns.isReceived'),
name: 'isReceived',
component: 'checkbox',
width: '35px',
},
{
label: t('entry.list.tableVisibleColumns.landed'),
name: 'landed',
component: 'date',
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.created)),
format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
width: '105px',
},
{
label: t('globals.id'),
name: 'id',
isId: true,
component: 'number',
chip: {
condition: () => true,
},
width: '50px',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.supplierFk'),
name: 'supplierFk',
create: true,
@ -86,165 +104,213 @@ const columns = computed(() => [
attrs: {
url: 'suppliers',
fields: ['id', 'name'],
},
columnField: {
component: null,
where: { order: 'name DESC' },
},
format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
width: '110px',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isBooked'),
name: 'isBooked',
label: t('entry.list.tableVisibleColumns.invoiceNumber'),
name: 'invoiceNumber',
component: 'input',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.reference'),
name: 'reference',
isTitle: true,
component: 'input',
columnField: {
component: null,
},
cardVisible: true,
create: true,
component: 'checkbox',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isConfirmed'),
name: 'isConfirmed',
label: 'AWB',
name: 'awbCode',
component: 'input',
width: '100px',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.agencyModeId'),
name: 'agencyModeId',
cardVisible: true,
create: true,
component: 'checkbox',
component: 'select',
attrs: {
url: 'agencyModes',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.agencyModeName),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isOrdered'),
name: 'isOrdered',
label: t('entry.list.tableVisibleColumns.evaNotes'),
name: 'evaNotes',
component: 'input',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.warehouseOutFk'),
name: 'warehouseOutFk',
cardVisible: true,
create: true,
component: 'checkbox',
component: 'select',
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseOutName),
width: '65px',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.companyFk'),
label: t('entry.list.tableVisibleColumns.warehouseInFk'),
name: 'warehouseInFk',
cardVisible: true,
component: 'select',
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseInName),
width: '65px',
},
{
align: 'left',
labelAbbreviation: t('Type'),
label: t('entry.list.tableVisibleColumns.entryTypeDescription'),
toolTip: t('entry.list.tableVisibleColumns.entryTypeDescription'),
name: 'entryTypeCode',
component: 'select',
attrs: {
url: 'entryTypes',
fields: ['code', 'description'],
optionValue: 'code',
optionLabel: 'description',
},
width: '65px',
format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
},
{
name: 'companyFk',
label: t('entry.list.tableVisibleColumns.companyFk'),
cardVisible: false,
visible: false,
create: true,
component: 'select',
attrs: {
url: 'companies',
fields: ['id', 'code'],
optionValue: 'id',
optionLabel: 'code',
optionValue: 'id',
url: 'Companies',
},
columnField: {
component: null,
},
create: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.companyCode),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.travelFk'),
name: 'travelFk',
component: 'select',
attrs: {
url: 'travels',
fields: ['id', 'ref'],
optionLabel: 'ref',
optionValue: 'id',
},
columnField: {
component: null,
},
label: t('entry.list.tableVisibleColumns.travelFk'),
cardVisible: false,
visible: false,
create: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.invoiceAmount'),
name: 'invoiceAmount',
cardVisible: true,
},
{
align: 'left',
name: 'initialTemperature',
label: t('entry.basicData.initialTemperature'),
field: 'initialTemperature',
format: (row) => toCelsius(row.initialTemperature),
},
{
align: 'left',
name: 'finalTemperature',
label: t('entry.basicData.finalTemperature'),
field: 'finalTemperature',
format: (row) => toCelsius(row.finalTemperature),
},
{
label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
name: 'isExcludedFromAvailable',
columnFilter: {
inWhere: true,
},
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('components.smartCard.viewSummary'),
icon: 'preview',
action: (row) => viewSummary(row.id, EntrySummary),
isPrimary: true,
},
],
},
]);
function getBadgeAttrs(row) {
const date = row.landed;
let today = Date.vnNew();
today.setHours(0, 0, 0, 0);
let timeTicket = new Date(date);
timeTicket.setHours(0, 0, 0, 0);
let timeDiff = today - timeTicket;
if (timeDiff > 0) return { color: 'info', 'text-color': 'black' };
if (timeDiff < 0) return { color: 'warning', 'text-color': 'black' };
switch (row.entryTypeCode) {
case 'regularization':
case 'life':
case 'internal':
case 'inventory':
if (!row.isOrdered || !row.isConfirmed)
return { color: 'negative', 'text-color': 'black' };
break;
case 'product':
case 'packaging':
case 'devaluation':
case 'payment':
case 'transport':
if (
row.invoiceAmount === null ||
(row.invoiceNumber === null && row.reference === null) ||
!row.isOrdered ||
!row.isConfirmed
)
return { color: 'negative', 'text-color': 'black' };
break;
default:
break;
}
return { color: 'transparent' };
}
onBeforeMount(async () => {
defaultEntry.value = (await axios.get('EntryConfigs/findOne')).data;
});
</script>
<template>
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="entry"
url="Entries/filter"
:array-data-props="{
url: 'Entries/filter',
order: 'id DESC',
userFilter: entryFilter,
order: 'landed DESC',
userFilter: EntryFilter,
}"
>
<template #advanced-menu>
<EntryFilter data-key="EntryList" />
<EntryFilter :data-key="dataKey" />
</template>
<template #body>
<VnTable
v-if="defaultEntry.defaultSupplierFk"
ref="tableRef"
:data-key="dataKey"
url="Entries/filter"
:filter="entryQueryFilter"
order="landed DESC"
:create="{
urlCreate: 'Entries',
title: t('entry.list.newEntry'),
title: t('Create entry'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
formInitialData: {
supplierFk: defaultEntry.defaultSupplierFk,
dated: Date.vnNew(),
companyFk: user?.companyFk,
},
}"
:columns="columns"
redirect="entry"
:right-search="false"
>
<template #column-status="{ row }">
<div class="row q-gutter-xs">
<QIcon
v-if="!!row.isExcludedFromAvailable"
name="vn:inventory"
color="primary"
>
<QTooltip>{{
t(
'entry.list.tableVisibleColumns.isExcludedFromAvailable',
)
}}</QTooltip>
</QIcon>
<QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
<QTooltip>
{{
t('globals.raid', {
daysInForward: row.daysInForward,
})
}}</QTooltip
>
</QIcon>
</div>
<template #column-landed="{ row }">
<QBadge
v-if="row?.travelFk"
v-bind="getBadgeAttrs(row)"
class="q-pa-sm"
style="font-size: 14px"
>
{{ toDate(row.landed) }}
</QBadge>
</template>
<template #column-supplierFk="{ row }">
<span class="link" @click.stop>
@ -252,13 +318,27 @@ const columns = computed(() => [
<SupplierDescriptorProxy :id="row.supplierFk" />
</span>
</template>
<template #column-travelFk="{ row }">
<span class="link" @click.stop>
{{ row.travelRef }}
<TravelDescriptorProxy :id="row.travelFk" />
</span>
<template #column-create-travelFk="{ data }">
<VnSelectTravelExtended
:data="data"
v-model="data.travelFk"
:onFilterTravelSelected="
(data, result) => (data.travelFk = result)
"
data-cy="entry-travel-select"
/>
</template>
</VnTable>
</template>
</VnSection>
</template>
<i18n>
es:
Inventory entry: Es inventario
Virtual entry: Es una redada
Search entries: Buscar entradas
You can search by entry reference: Puedes buscar por referencia de la entrada
Create entry: Crear entrada
Type: Tipo
</i18n>

18
src/pages/Entry/EntryStockBought.vue
View File

@ -34,18 +34,20 @@ const columns = computed(() => [
label: t('entryStockBought.buyer'),
isTitle: true,
component: 'select',
isEditable: false,
cardVisible: true,
create: true,
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
fields: ['id', 'name', 'nickname'],
where: { role: 'buyer' },
optionFilter: 'firstName',
optionLabel: 'name',
optionLabel: 'nickname',
optionValue: 'id',
useLike: false,
},
columnFilter: false,
width: '70px',
},
{
align: 'center',
@ -55,6 +57,7 @@ const columns = computed(() => [
create: true,
component: 'number',
summation: true,
width: '50px',
},
{
align: 'center',
@ -78,6 +81,7 @@ const columns = computed(() => [
actions: [
{
title: t('entryStockBought.viewMoreDetails'),
name: 'searchBtn',
icon: 'search',
isPrimary: true,
action: (row) => {
@ -91,6 +95,7 @@ const columns = computed(() => [
},
},
],
'data-cy': 'table-actions',
},
]);
@ -158,7 +163,7 @@ function round(value) {
@on-fetch="
(data) => {
travel = data.find(
(data) => data.warehouseIn?.code.toLowerCase() === 'vnh'
(data) => data.warehouseIn?.code.toLowerCase() === 'vnh',
);
}
"
@ -179,6 +184,7 @@ function round(value) {
@click="openDialog()"
:title="t('entryStockBought.editTravel')"
color="primary"
data-cy="edit-travel"
/>
</div>
</VnRow>
@ -239,10 +245,11 @@ function round(value) {
table-height="80vh"
auto-load
:column-search="false"
:without-header="true"
>
<template #column-workerFk="{ row }">
<span class="link" @click.stop>
{{ row?.worker?.user?.name }}
{{ row?.worker?.user?.nickname }}
<WorkerDescriptorProxy :id="row?.workerFk" />
</span>
</template>
@ -279,10 +286,11 @@ function round(value) {
justify-content: center;
}
.column {
min-width: 40%;
margin-top: 5%;
display: flex;
flex-direction: column;
align-items: center;
min-width: 35%;
}
.text-negative {
color: $negative !important;

22
src/pages/Entry/EntryStockBoughtDetail.vue
View File

@ -21,7 +21,7 @@ const $props = defineProps({
const customUrl = `StockBoughts/getStockBoughtDetail?workerFk=${$props.workerFk}&dated=${$props.dated}`;
const columns = [
{
align: 'left',
align: 'right',
label: t('Entry'),
name: 'entryFk',
isTitle: true,
@ -29,7 +29,7 @@ const columns = [
columnFilter: false,
},
{
align: 'left',
align: 'right',
name: 'itemFk',
label: t('Item'),
columnFilter: false,
@ -44,21 +44,21 @@ const columns = [
cardVisible: true,
},
{
align: 'left',
align: 'right',
name: 'volume',
label: t('Volume'),
columnFilter: false,
cardVisible: true,
},
{
align: 'left',
align: 'right',
label: t('Packaging'),
name: 'packagingFk',
columnFilter: false,
cardVisible: true,
},
{
align: 'left',
align: 'right',
label: 'Packing',
name: 'packing',
columnFilter: false,
@ -73,12 +73,14 @@ const columns = [
ref="tableRef"
data-key="StockBoughtsDetail"
:url="customUrl"
order="itemName DESC"
order="volume DESC"
:columns="columns"
:right-search="false"
:disable-infinite-scroll="true"
:disable-option="{ card: true }"
:limit="0"
:without-header="true"
:with-filters="false"
auto-load
>
<template #column-entryFk="{ row }">
@ -99,16 +101,14 @@ const columns = [
</template>
<style lang="css" scoped>
.container {
max-width: 50vw;
max-width: 100%;
width: 50%;
overflow: auto;
justify-content: center;
align-items: center;
margin: auto;
background-color: var(--vn-section-color);
padding: 4px;
}
.container > div > div > .q-table__top.relative-position.row.items-center {
background-color: red !important;
padding: 2%;
}
</style>
<i18n>

84
src/pages/Entry/locale/en.yml
View File

@ -1,21 +1,36 @@
entry:
lock:
title: Lock entry
message: This entry has been locked by {userName} for {time} minutes. Do you want to unlock it?
success: The entry has been locked successfully
list:
newEntry: New entry
tableVisibleColumns:
created: Creation
supplierFk: Supplier
isBooked: Booked
isConfirmed: Confirmed
isExcludedFromAvailable: Exclude from inventory
isOrdered: Ordered
isConfirmed: Ready to label
isReceived: Received
isRaid: Raid
landed: Date
supplierFk: Supplier
reference: Ref/Alb/Guide
invoiceNumber: Invoice
agencyModeId: Agency
isBooked: Booked
companyFk: Company
travelFk: Travel
isExcludedFromAvailable: Inventory
evaNotes: Notes
warehouseOutFk: Origin
warehouseInFk: Destiny
entryTypeDescription: Entry type
invoiceAmount: Import
travelFk: Travel
dated: Dated
inventoryEntry: Inventory entry
summary:
commission: Commission
currency: Currency
invoiceNumber: Invoice number
invoiceAmount: Invoice amount
ordered: Ordered
booked: Booked
excludedFromAvailable: Inventory
@ -33,6 +48,7 @@ entry:
buyingValue: Buying value
import: Import
pvp: PVP
entryType: Entry type
basicData:
travel: Travel
currency: Currency
@ -69,17 +85,55 @@ entry:
landing: Landing
isExcludedFromAvailable: Es inventory
params:
toShipped: To
fromShipped: From
daysOnward: Days onward
daysAgo: Days ago
warehouseInFk: Warehouse in
isExcludedFromAvailable: Exclude from inventory
isOrdered: Ordered
isConfirmed: Ready to label
isReceived: Received
isIgnored: Ignored
isRaid: Raid
landed: Date
supplierFk: Supplier
reference: Ref/Alb/Guide
invoiceNumber: Invoice
agencyModeId: Agency
isBooked: Booked
companyFk: Company
evaNotes: Notes
warehouseOutFk: Origin
warehouseInFk: Destiny
entryTypeDescription: Entry type
invoiceAmount: Import
travelFk: Travel
dated: Dated
itemFk: Item id
hex: Color
name: Item name
size: Size
stickers: Stickers
packagingFk: Packaging
weight: Kg
groupingMode: Grouping selector
grouping: Grouping
quantity: Quantity
buyingValue: Buying value
price2: Package
price3: Box
minPrice: Minumum price
hasMinPrice: Has minimum price
packingOut: Packing out
comment: Comment
subName: Supplier name
tags: Tags
company_name: Company name
itemTypeFk: Item type
workerFk: Worker id
search: Search entries
searchInfo: You can search by entry reference
descriptorMenu:
showEntryReport: Show entry report
entryFilter:
params:
isExcludedFromAvailable: Exclude from inventory
invoiceNumber: Invoice number
travelFk: Travel
companyFk: Company
@ -91,8 +145,16 @@ entryFilter:
isBooked: Booked
isConfirmed: Confirmed
isOrdered: Ordered
isReceived: Received
search: General search
reference: Reference
landed: Landed
id: Id
agencyModeId: Agency
evaNotes: Notes
warehouseOutFk: Origin
warehouseInFk: Destiny
entryTypeCode: Entry type
myEntries:
id: ID
landed: Landed

107
src/pages/Entry/locale/es.yml
View File

@ -1,21 +1,36 @@
entry:
lock:
title: Entrada bloqueada
message: Esta entrada ha sido bloqueada por {userName} hace {time} minutos. ¿Quieres desbloquearla?
success: La entrada ha sido bloqueada correctamente
list:
newEntry: Nueva entrada
tableVisibleColumns:
created: Creación
supplierFk: Proveedor
isBooked: Asentado
isConfirmed: Confirmado
isExcludedFromAvailable: Excluir del inventario
isOrdered: Pedida
isConfirmed: Lista para etiquetar
isReceived: Recibida
isRaid: Redada
landed: Fecha
supplierFk: Proveedor
invoiceNumber: Nº Factura
reference: Ref/Alb/Guía
agencyModeId: Agencia
isBooked: Asentado
companyFk: Empresa
travelFk: Envio
isExcludedFromAvailable: Inventario
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeDescription: Tipo entrada
invoiceAmount: Importe
dated: Fecha
inventoryEntry: Es inventario
summary:
commission: Comisión
currency: Moneda
invoiceNumber: Núm. factura
invoiceAmount: Importe
ordered: Pedida
booked: Contabilizada
excludedFromAvailable: Inventario
@ -34,12 +49,13 @@ entry:
buyingValue: Coste
import: Importe
pvp: PVP
entryType: Tipo entrada
basicData:
travel: Envío
currency: Moneda
observation: Observación
commission: Comisión
booked: Asentado
booked: Contabilizada
excludedFromAvailable: Inventario
initialTemperature: Ini °C
finalTemperature: Fin °C
@ -69,31 +85,70 @@ entry:
packingOut: Embalaje envíos
landing: Llegada
isExcludedFromAvailable: Es inventario
params:
toShipped: Hasta
fromShipped: Desde
warehouseInFk: Alm. entrada
daysOnward: Días adelante
daysAgo: Días atras
descriptorMenu:
showEntryReport: Ver informe del pedido
search: Buscar entradas
searchInfo: Puedes buscar por referencia de entrada
params:
isExcludedFromAvailable: Excluir del inventario
isOrdered: Pedida
isConfirmed: Lista para etiquetar
isReceived: Recibida
isRaid: Redada
isIgnored: Ignorado
landed: Fecha
supplierFk: Proveedor
invoiceNumber: Nº Factura
reference: Ref/Alb/Guía
agencyModeId: Agencia
isBooked: Asentado
companyFk: Empresa
travelFk: Envio
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeDescription: Tipo entrada
invoiceAmount: Importe
dated: Fecha
itemFk: Id artículo
hex: Color
name: Nombre artículo
size: Medida
stickers: Etiquetas
packagingFk: Embalaje
weight: Kg
groupinMode: Selector de grouping
grouping: Grouping
quantity: Quantity
buyingValue: Precio de compra
price2: Paquete
price3: Caja
minPrice: Precio mínimo
hasMinPrice: Tiene precio mínimo
packingOut: Packing out
comment: Referencia
subName: Nombre proveedor
tags: Etiquetas
company_name: Nombre empresa
itemTypeFk: Familia
workerFk: Comprador
entryFilter:
params:
invoiceNumber: Núm. factura
travelFk: Envío
companyFk: Empresa
currencyFk: Moneda
supplierFk: Proveedor
from: Desde
to: Hasta
created: Fecha creación
isBooked: Asentado
isConfirmed: Confirmado
isExcludedFromAvailable: Inventario
isOrdered: Pedida
search: Búsqueda general
reference: Referencia
isConfirmed: Confirmado
isReceived: Recibida
isRaid: Raid
landed: Fecha
id: Id
supplierFk: Proveedor
invoiceNumber: Núm. factura
reference: Ref/Alb/Guía
agencyModeId: Modo agencia
evaNotes: Notas
warehouseOutFk: Origen
warehouseInFk: Destino
entryTypeCode: Tipo de entrada
hasToShowDeletedEntries: Mostrar entradas eliminadas
myEntries:
id: ID
landed: F. llegada

4
src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
View File

@ -125,7 +125,7 @@ function deleteFile(dmsFk) {
<VnInput
clearable
clear-icon="close"
:label="t('Supplier ref')"
:label="t('invoiceIn.supplierRef')"
v-model="data.supplierRef"
/>
</VnRow>
@ -149,6 +149,7 @@ function deleteFile(dmsFk) {
option-value="id"
option-label="id"
:filter-options="['id', 'name']"
data-cy="UnDeductibleVatSelect"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -310,7 +311,6 @@ function deleteFile(dmsFk) {
supplierFk: Supplier
es:
supplierFk: Proveedor
Supplier ref: Ref. proveedor
Expedition date: Fecha expedición
Operation date: Fecha operación
Undeductible VAT: Iva no deducible

1
src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
View File

@ -90,7 +90,6 @@ async function setInvoiceCorrection(id) {
<template>
<CardDescriptor
ref="cardDescriptorRef"
module="InvoiceIn"
data-key="InvoiceIn"
:url="`InvoiceIns/${entityId}`"
:filter="filter"

Some files were not shown because too many files have changed in this diff Show More