wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge branch 'dev' into 6769-itemDiary

This commit is contained in:
Guillermo Bonet 2024-07-10 12:05:26 +02:00
parent 7fae6b92a1 36fc988df2
commit f701b6387a
80 changed files with 3201 additions and 1473 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/boot/axios.js
View File

@ -55,10 +55,10 @@ const onResponseError = (error) => {
}
if (session.isLoggedIn() && response?.status === 401) {
session.destroy();
session.destroy(false);
const hash = window.location.hash;
const url = hash.slice(1);
Router.push({ path: url });
Router.push(`/login?redirect=${url}`);
} else if (!session.isLoggedIn()) {
return Promise.reject(error);
}

25
src/components/CreateManualInvoiceForm.vue
View File

@ -46,22 +46,6 @@ const onDataSaved = async (formData, requestResponse) => {
@on-fetch="(data) => (taxAreasOptions = data)"
auto-load
/>
<FetchData
url="Tickets"
:filter="{
fields: ['id', 'nickname'],
where: { refFk: null },
order: 'shipped DESC',
}"
@on-fetch="(data) => (ticketsOptions = data)"
auto-load
/>
<FetchData
url="Clients"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (clientsOptions = data)"
auto-load
/>
<FormModelPopup
ref="formModelPopupRef"
:title="t('Create manual invoice')"
@ -84,6 +68,10 @@ const onDataSaved = async (formData, requestResponse) => {
option-value="id"
v-model="data.ticketFk"
@update:model-value="data.clientFk = null"
url="Tickets"
:where="{ refFk: null }"
:fields="['id', 'nickname']"
:filter-options="{ order: 'shipped DESC' }"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -105,6 +93,9 @@ const onDataSaved = async (formData, requestResponse) => {
option-value="id"
v-model="data.clientFk"
@update:model-value="data.ticketFk = null"
url="Clients"
:fields="['id', 'name']"
:filter-options="{ order: 'name ASC' }"
/>
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
</VnRow>
@ -116,7 +107,6 @@ const onDataSaved = async (formData, requestResponse) => {
option-label="description"
option-value="code"
v-model="data.serial"
:required="true"
/>
<VnSelect
:label="t('Area')"
@ -125,7 +115,6 @@ const onDataSaved = async (formData, requestResponse) => {
option-label="code"
option-value="code"
v-model="data.taxArea"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">

1
src/components/CrudModel.vue
View File

@ -10,7 +10,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import SkeletonTable from 'components/ui/SkeletonTable.vue';
import { tMobile } from 'src/composables/tMobile';
import VnSubToolbar from './ui/VnSubToolbar.vue';
const { push } = useRouter();
const quasar = useQuasar();

164
src/components/TransferInvoiceForm.vue
View File

@ -8,7 +8,7 @@ import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue';
import { useDialogPluginComponent } from 'quasar';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
@ -18,7 +18,7 @@ const $props = defineProps({
default: () => {},
},
});
const { dialogRef } = useDialogPluginComponent();
const quasar = useQuasar();
const { t } = useI18n();
const router = useRouter();
@ -116,90 +116,92 @@ const makeInvoice = async () => {
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
auto-load
/>
<FormPopup
<QDialog ref="dialogRef">
<FormPopup
@on-submit="makeInvoice()"
:title="t('Transfer invoice')"
:custom-submit-button-label="t('Transfer client')"
:default-cancel-button="false"
>
>
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Client')"
:options="clientsOptions"
hide-selected
option-label="name"
option-value="id"
v-model="transferInvoiceParams.newClientFk"
:required="true"
url="Clients"
:fields="['id', 'name', 'hasToInvoiceByAddress']"
auto-load
>
<template #option="scope">
<QItem
v-bind="scope.itemProps"
@click="selectedClient(scope.opt)"
>
<QItemSection>
<QItemLabel>
#{{ scope.opt?.id }} - {{ scope.opt?.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:label="t('Rectificative type')"
:options="rectificativeTypeOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.cplusRectificationTypeFk"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Class')"
:options="siiTypeInvoiceOutsOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
:required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.code }} -
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:label="t('Type')"
:options="invoiceCorrectionTypesOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<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>
</VnRow>
</template>
</FormPopup>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Client')"
:options="clientsOptions"
hide-selected
option-label="name"
option-value="id"
v-model="transferInvoiceParams.newClientFk"
:required="true"
url="Clients"
:fields="['id', 'name', 'hasToInvoiceByAddress']"
auto-load
>
<template #option="scope">
<QItem
v-bind="scope.itemProps"
@click="selectedClient(scope.opt)"
>
<QItemSection>
<QItemLabel>
#{{ scope.opt?.id }} - {{ scope.opt?.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:label="t('Rectificative type')"
:options="rectificativeTypeOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.cplusRectificationTypeFk"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Class')"
:options="siiTypeInvoiceOutsOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
:required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.code }} -
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:label="t('Type')"
:options="invoiceCorrectionTypesOptions"
hide-selected
option-label="description"
option-value="id"
v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<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>
</VnRow>
</template>
</FormPopup>
</QDialog>
</template>
<i18n>

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

@ -40,7 +40,7 @@ const enterEvent = {
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-sm q-pb-xs q-pt-none fit',
class: 'q-px-xs q-pb-xs q-pt-none fit',
dense: true,
};
@ -101,7 +101,7 @@ const components = {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-md q-pb-xs q-pt-none fit',
class: 'q-px-sm q-pb-xs q-pt-none fit',
dense: true,
filled: !$props.showTitle,
},
@ -138,14 +138,6 @@ const showFilter = computed(
);
</script>
<template>
<div
v-if="showTitle"
class="q-pt-sm q-px-sm ellipsis"
:class="`text-${column?.align ?? 'left'}`"
:style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
>
{{ column?.label }}
</div>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<VnTableColumn
:column="$props.column"

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

@ -13,6 +13,7 @@ import VnLv from 'components/ui/VnLv.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue';
import VnTableFilter from 'components/VnTable/VnFilter.vue';
import VnTableChip from 'components/VnTable/VnChip.vue';
import TableVisibleColumns from 'src/components/VnTable/VnVisibleColumn.vue';
const $props = defineProps({
columns: {
@ -67,6 +68,18 @@ const $props = defineProps({
type: Object,
default: () => ({ card: false, table: false }),
},
withoutHeader: {
type: Boolean,
default: false,
},
tableCode: {
type: String,
default: null,
},
table: {
type: Object,
default: () => ({}),
},
});
const { t } = useI18n();
const stateStore = useStateStore();
@ -115,6 +128,14 @@ watch(
(val) => setUserParams(val)
);
const rowClickFunction = computed(() => {
if ($props.rowClick) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {};
});
const isTableMode = computed(() => mode.value == TABLE_MODE);
function setUserParams(watchedParams) {
if (!watchedParams) return;
@ -122,6 +143,7 @@ function setUserParams(watchedParams) {
const where = JSON.parse(watchedParams?.filter)?.where;
watchedParams = { ...watchedParams, ...where };
delete watchedParams.filter;
delete params.value?.filter;
params.value = { ...params.value, ...watchedParams };
}
@ -130,7 +152,7 @@ function splitColumns(columns) {
columns: [],
chips: [],
create: [],
visible: [],
cardVisible: [],
};
for (const col of columns) {
@ -138,7 +160,7 @@ function splitColumns(columns) {
if (col.chip) splittedColumns.value.chips.push(col);
if (col.isTitle) splittedColumns.value.title = col;
if (col.create) splittedColumns.value.create.push(col);
if (col.cardVisible) splittedColumns.value.visible.push(col);
if (col.cardVisible) splittedColumns.value.cardVisible.push(col);
if ($props.isEditable && col.disable == null) col.disable = false;
if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true };
splittedColumns.value.columns.push(col);
@ -158,12 +180,6 @@ function splitColumns(columns) {
}
}
const rowClickFunction = computed(() => {
if ($props.rowClick) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {};
});
function redirectFn(id) {
router.push({ path: `/${$props.redirect}/${id}` });
}
@ -210,6 +226,7 @@ defineExpose({
v-model="params"
:disable-submit-event="true"
:search-url="searchUrl"
:redirect="!!redirect"
>
<template #body>
<VnTableFilter
@ -236,7 +253,7 @@ defineExpose({
:limit="20"
ref="CrudModelRef"
:search-url="searchUrl"
:disable-infinite-scroll="mode == TABLE_MODE"
:disable-infinite-scroll="isTableMode"
@save-changes="reload"
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
>
@ -249,16 +266,16 @@ defineExpose({
</template>
<template #body="{ rows }">
<QTable
v-bind="$attrs['q-table']"
v-bind="table"
class="vnTable"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="mode != TABLE_MODE"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="mode == TABLE_MODE && 'max-height: 90vh'"
:style="isTableMode && 'max-height: 90vh'"
virtual-scroll
@virtual-scroll="
(event) =>
@ -268,17 +285,15 @@ defineExpose({
@row-click="(_, row) => rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
>
<template #top-left>
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
</template>
<template #top-right>
<!-- <QBtn
icon="visibility"
title="asd"
class="bg-vn-section-color q-mr-md"
dense
v-if="mode == 'table'"
/> -->
<TableVisibleColumns
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
/>
<QBtnToggle
v-model="mode"
toggle-color="primary"
@ -287,6 +302,7 @@ defineExpose({
:options="tableModes"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
title="asd"
class="bg-vn-section-color q-ml-md"
@ -296,11 +312,23 @@ defineExpose({
</template>
<template #header-cell="{ col }">
<QTh
v-if="col.visible ?? true"
auto-width
style="min-width: 100px"
v-if="$props.columnSearch"
>
<div
class="q-pt-sm q-px-sm ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="
$props.columnSearch && col.columnFilter == false
? { 'min-height': 72 + 'px' }
: ''
"
>
{{ col?.label }}
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
@ -330,6 +358,7 @@ defineExpose({
auto-width
class="no-margin q-px-xs"
:class="getColAlign(col)"
v-if="col.visible ?? true"
>
<slot :name="`column-${col.name}`" :col="col" :row="row">
<VnTableColumn
@ -418,7 +447,7 @@ defineExpose({
:class="$props.cardClass"
>
<div
v-for="col of splittedColumns.visible"
v-for="col of splittedColumns.cardVisible"
:key="col.name"
class="fields"
>

181
src/components/VnTable/VnVisibleColumn.vue Normal file
View File

@ -0,0 +1,181 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const columns = defineModel({ type: Object, default: [] });
const $props = defineProps({
tableCode: {
type: String,
default: '',
},
});
const { notify } = useNotify();
const { t } = useI18n();
const state = useState();
const user = state.getUser();
const popupProxyRef = ref();
const initialUserConfigViewData = ref();
const localColumns = ref([]);
const areAllChecksMarked = computed(() => {
return localColumns.value.every((col) => col.visible);
});
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 = [];
for (let column of columns.value) {
const { label, name } = column;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
}
}
function toggleMarkAll(val) {
localColumns.value.forEach((col) => (col.visible = val));
}
async function getConfig(url, filter) {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
}
async function fetchViewConfigData() {
try {
const defaultFilter = {
where: { tableCode: $props.tableCode },
};
const userConfig = await getConfig('UserConfigViews', {
where: {
...defaultFilter.where,
...{ userFk: user.id },
},
});
if (userConfig) {
initialUserConfigViewData.value = userConfig;
setUserConfigViewData(userConfig.configuration);
return;
}
const defaultConfig = await getConfig('DefaultViewConfigs', defaultFilter);
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) {
console.err('Error fetching config view data', err);
}
}
async function saveConfig() {
const configuration = {};
for (const { name, visible } of localColumns.value)
configuration[name] = visible ?? true;
setUserConfigViewData(configuration, true);
if (!$props.tableCode) return popupProxyRef.value.hide();
try {
const params = {};
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
notify('errors.writeRequest', 'negative');
}
}
onMounted(async () => {
setUserConfigViewData({});
await fetchViewConfigData();
});
</script>
<template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md" dense>
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">
<QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
</QIcon>
<span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
<QCheckbox
:label="t('Tick all')"
:model-value="areAllChecksMarked"
@update:model-value="toggleMarkAll($event)"
class="q-mb-sm"
/>
<div v-if="columns.length > 0" class="checks-layout">
<QCheckbox
v-for="col in localColumns"
:key="col.name"
:label="col.label"
v-model="col.visible"
/>
</div>
<QBtn
class="full-width q-mt-md"
color="primary"
@click="saveConfig()"
:label="t('globals.save')"
/>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
<style lang="scss" scoped>
.info-icon {
position: absolute;
top: 20px;
right: 20px;
}
.checks-layout {
display: grid;
grid-template-columns: repeat(3, 200px);
}
</style>
<i18n>
es:
Check the columns you want to see: Marca las columnas que quieres ver
Visible columns: Columnas visibles
Tick all: Marcar todas
</i18n>

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

@ -52,7 +52,7 @@ const toggleMarkAll = (val) => {
const getConfig = async (url, filter) => {
const response = await axios.get(url, {
params: { filter: filter },
params: { filter: JSON.stringify(filter) },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
};
@ -60,7 +60,7 @@ const getConfig = async (url, filter) => {
const fetchViewConfigData = async () => {
try {
const userConfigFilter = {
where: { tableCode: $props.tableCode, userFk: user.id },
where: { tableCode: $props.tableCode, userFk: user.value.id },
};
const userConfig = await getConfig('UserConfigViews', userConfigFilter);
@ -74,8 +74,14 @@ const fetchViewConfigData = async () => {
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
if (defaultConfig) {
// Si el backend devuelve una configuración por defecto la usamos
setUserConfigViewData(defaultConfig.columns);
return;
} else {
// Si no hay configuración por defecto mostramos todas las columnas
const defaultColumns = {};
$props.allColumns.forEach((col) => (defaultColumns[col] = true));
setUserConfigViewData(defaultColumns);
}
} catch (err) {
console.err('Error fetching config view data', err);

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

@ -39,7 +39,7 @@ const arrayData = useArrayData(props.dataKey, {
onBeforeMount(async () => {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false });
await arrayData.fetch({ append: false, updateRouter: false });
});
if (props.baseUrl) {

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

@ -56,7 +56,12 @@ onBeforeMount(async () => {
skip: 0,
});
store = arrayData.store;
entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
entity = computed(() => {
const data = (Array.isArray(store.data) ? store.data[0] : store.data) ?? {};
if (data) emit('onFetch', data);
return data;
});
// It enables to load data only once if the module is the same as the dataKey
if (!isSameDataKey.value || !route.params.id) await getData();
watch(
@ -85,9 +90,9 @@ function getValueFromPath(path) {
const keys = path.toString().split('.');
let current = entity.value;
for (let i = 0; i < keys.length; i++) {
if (current[keys[i]] === undefined) return undefined;
else current = current[keys[i]];
for (const key of keys) {
if (current[key] === undefined) return undefined;
else current = current[key];
}
return current;
}
@ -165,9 +170,9 @@ const toModule = computed(() =>
<QTooltip>
{{ t('components.cardDescriptor.moreOptions') }}
</QTooltip>
<QMenu>
<QMenu ref="menuRef">
<QList>
<slot name="menu" :entity="entity" />
<slot name="menu" :entity="entity" :menu-ref="menuRef" />
</QList>
</QMenu>
</QBtn>

13
src/pages/Order/Card/OrderCatalogItem.vue → src/components/ui/CatalogItem.vue
View File

@ -7,7 +7,7 @@ import VnImg from 'src/components/ui/VnImg.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import toCurrency from '../../../filters/toCurrency';
import { toCurrency } from 'filters/index';
const DEFAULT_PRICE_KG = 0;
@ -18,6 +18,10 @@ defineProps({
type: Object,
required: true,
},
isCatalog: {
type: Boolean,
default: false,
},
});
const dialog = ref(null);
@ -28,7 +32,7 @@ const dialog = ref(null);
<QCard class="card shadow-6">
<div class="img-wrapper">
<VnImg :id="item.id" zoom-size="lg" class="image" />
<div v-if="item.hex" class="item-color-container">
<div v-if="item.hex && isCatalog" class="item-color-container">
<div
class="item-color"
:style="{ backgroundColor: `#${item.hex}` }"
@ -50,11 +54,12 @@ const dialog = ref(null);
</template>
<div class="footer">
<div class="price">
<p>
<p v-if="isCatalog">
{{ item.available }} {{ t('to') }}
{{ toCurrency(item.price) }}
</p>
<QIcon name="add_circle" class="icon">
<slot name="price" />
<QIcon v-if="isCatalog" name="add_circle" class="icon">
<QTooltip>{{ t('globals.add') }}</QTooltip>
<QPopupProxy ref="dialog">
<OrderCatalogItemDialog

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

@ -58,6 +58,7 @@ const $props = defineProps({
},
});
defineExpose({ search });
const emit = defineEmits([
'update:modelValue',
'refresh',
@ -112,9 +113,7 @@ async function search(evt) {
isLoading.value = true;
const filter = { ...userParams.value };
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
store.page = 1;
arrayData.reset(['skip', 'filter.skip', 'page']);
const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
userParams.value = newParams;
@ -138,9 +137,7 @@ async function reload() {
async function clearFilters() {
isLoading.value = true;
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
store.page = 1;
arrayData.reset(['skip', 'filter.skip', 'page']);
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unremovableParams.includes(param)
@ -196,6 +193,14 @@ function formatValue(value) {
</script>
<template>
<QBtn
class="q-mt-lg q-mr-xs q-mb-lg"
round
color="primary"
style="position: fixed; z-index: 1; right: 0; bottom: 0"
icon="search"
@click="search()"
></QBtn>
<QForm @submit="search" id="filterPanelForm">
<QList dense>
<QItem class="q-mt-xs">
@ -269,23 +274,6 @@ function formatValue(value) {
<QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="userParams" :search-fn="search"></slot>
</QList>
<template v-if="$props.searchButton">
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
:type="disableSubmitEvent ? 'button' : 'submit'"
unelevated
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</QForm>
<QInnerLoading
:label="t('globals.pleaseWait')"

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

@ -28,7 +28,7 @@ const $props = defineProps({
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = ref(`timestamp=${Date.now()}`);
import noImage from '/public/no-user.png';
import noImage from '/no-user.png';
import { useRole } from 'src/composables/useRole';
const url = computed(() => {
const isEmployee = useRole().isEmployee();

12
src/components/ui/VnPaginate.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, watch } from 'vue';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
@ -26,6 +26,10 @@ const props = defineProps({
type: Object,
default: null,
},
userFilter: {
type: Object,
default: null,
},
where: {
type: Object,
default: null,
@ -80,6 +84,7 @@ const pagination = ref({
const arrayData = useArrayData(props.dataKey, {
url: props.url,
filter: props.filter,
userFilter: props.userFilter,
where: props.where,
limit: props.limit,
order: props.order,
@ -95,6 +100,8 @@ onMounted(async () => {
mounted.value = true;
});
onBeforeUnmount(() => arrayData.reset());
watch(
() => props.data,
() => {
@ -118,8 +125,7 @@ const addFilter = async (filter, params) => {
async function fetch(params) {
useArrayData(props.dataKey, params);
store.filter.skip = 0;
store.skip = 0;
arrayData.reset(['filter.skip', 'skip']);
await arrayData.fetch({ append: false });
if (!store.hasMoreData) {
isLoading.value = false;

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

@ -103,8 +103,7 @@ async function search() {
const staticParams = Object.entries(store.userParams).filter(
([key, value]) => value && (props.staticParams || []).includes(key)
);
store.skip = 0;
store.page = 1;
arrayData.reset(['skip', 'page']);
if (props.makeFetch)
await arrayData.applyFilter({

26
src/composables/useArrayData.js
View File

@ -18,7 +18,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
onMounted(() => {
setOptions();
store.skip = 0;
arrayDataStore.reset(['skip']);
const query = route.query;
const searchUrl = store.searchUrl;
if (query[searchUrl]) {
@ -84,8 +85,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
Object.assign(filter, store.userFilter, exprFilter);
Object.assign(store.filter, filter);
const params = { filter: store.filter };
let where;
if (filter?.where || store.filter?.where)
where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
Object.assign(filter, store.filter);
filter.where = where;
const params = { filter };
Object.assign(params, userParams);
params.filter.skip = store.skip;
@ -126,6 +131,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
delete store[option];
}
function reset(opts = []) {
if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
}
function cancelRequest() {
if (canceller) {
canceller.abort();
@ -143,21 +152,20 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
async function addFilter({ filter, params }) {
if (filter) store.userFilter = Object.assign(store.userFilter, filter);
if (filter) store.filter = filter;
let userParams = { ...store.userParams, ...params };
userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams;
store.skip = 0;
store.filter.skip = 0;
store.page = 1;
arrayDataStore.reset(['skip', 'filter.skip', 'page']);
await fetch({ append: false });
return { filter, params };
}
async function addFilterWhere(where) {
const storedFilter = { ...store.userFilter };
const storedFilter = { ...store.filter };
if (!storedFilter?.where) storedFilter.where = {};
where = { ...storedFilter.where, ...where };
await addFilter({ filter: { where } });
@ -187,7 +195,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.page += 1;
await fetch({ append: true });
updateStateParams();
}
async function refresh() {
@ -241,5 +248,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
updateStateParams,
isLoading,
deleteOption,
reset,
};
}

42
src/composables/useSession.js
View File

@ -58,31 +58,37 @@ export function useSession() {
}
}
}
async function destroy() {
async function destroy(destroyTokens = true) {
const tokens = {
tokenMultimedia: 'Accounts/logout',
token: 'VnUsers/logout',
};
const storage = keepLogin() ? localStorage : sessionStorage;
let destroyTokenPromises = [];
try {
if (destroyTokens) {
const { data: isValidToken } = await axios.get('VnUsers/validateToken');
if (isValidToken)
destroyTokenPromises = Object.entries(tokens).map(([key, url]) =>
destroyToken(url, storage, key)
);
}
} finally {
localStorage.clear();
sessionStorage.clear();
await Promise.allSettled(destroyTokenPromises);
const { setUser } = useState();
for (const [key, url] of Object.entries(tokens)) {
await destroyToken(url, storage, key);
setUser({
id: 0,
name: '',
nickname: '',
lang: '',
darkMode: null,
});
stopRenewer();
}
localStorage.clear();
sessionStorage.clear();
const { setUser } = useState();
setUser({
id: 0,
name: '',
nickname: '',
lang: '',
darkMode: null,
});
stopRenewer();
}
async function login(data) {

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

@ -550,10 +550,14 @@ ticket:
observation: Notes
ticketAdvance: Advance tickets
futureTickets: Future tickets
expedition: Expedition
purchaseRequest: Purchase request
weeklyTickets: Weekly tickets
services: Service
tracking: Tracking
components: Components
pictures: Pictures
packages: Packages
list:
nickname: Nickname
state: State
@ -627,69 +631,6 @@ ticket:
landed: Landed
warehouse: Warehouse
agency: Agency
claim:
list:
customer: Customer
assignedTo: Assigned
created: Created
state: State
rmaList:
code: Code
records: records
card:
claimId: Claim ID
attendedBy: Attended by
created: Created
state: State
ticketId: Ticket ID
customerSummary: Customer summary
claimedTicket: Claimed ticket
saleTracking: Sale tracking
ticketTracking: Ticket tracking
commercial: Commercial
province: Province
zone: Zone
customerId: client ID
summary:
customer: Customer
assignedTo: Assigned
attendedBy: Attended by
created: Created
state: State
details: Details
item: Item
landed: Landed
quantity: Quantity
claimed: Claimed
price: Price
discount: Discount
total: Total
actions: Actions
responsibility: Responsibility
company: Company
person: Employee/Customer
notes: Notes
photos: Photos
development: Development
reason: Reason
result: Result
responsible: Responsible
worker: Worker
redelivery: Redelivery
changeState: Change state
basicData:
customer: Customer
assignedTo: Assigned
created: Created
state: State
pickup: Pick up
null: No
agency: Agency
delivery: Delivery
photo:
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
noData: 'There are no images/videos, click here or drag and drop the file'
dragDrop: Drag and drop it here
invoiceOut:
list:
ref: Reference

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

@ -239,6 +239,13 @@ globals:
mailForwarding: Reenvío de correo
mailAlias: Alias de correo
privileges: Privilegios
observation: Notas
expedition: Expedición
services: Servicios
tracking: Estados
components: Componentes
pictures: Fotos
packages: Bultos
created: Fecha creación
worker: Trabajador
now: Ahora
@ -548,10 +555,14 @@ ticket:
observation: Notas
ticketAdvance: Adelantar tickets
futureTickets: Tickets a futuro
expedition: Expedición
purchaseRequest: Petición de compra
weeklyTickets: Tickets programados
services: Servicios
tracking: Estados
components: Componentes
pictures: Fotos
packages: Bultos
list:
nickname: Alias
state: Estado
@ -625,69 +636,6 @@ ticket:
landed: F. entrega
warehouse: Almacén
agency: Agencia
claim:
list:
customer: Cliente
assignedTo: Asignada a
created: Creada
state: Estado
rmaList:
code: Código
records: registros
card:
claimId: ID reclamación
attendedBy: Atendida por
created: Creada
state: Estado
ticketId: ID ticket
customerSummary: Resumen del cliente
claimedTicket: Ticket reclamado
saleTracking: Líneas preparadas
ticketTracking: Estados del ticket
commercial: Comercial
province: Provincia
zone: Zona
customerId: ID del cliente
summary:
customer: Cliente
assignedTo: Asignada a
attendedBy: Atendida por
created: Creada
state: Estado
details: Detalles
item: Artículo
landed: Entregado
quantity: Cantidad
claimed: Reclamado
price: Precio
discount: Descuento
total: Total
actions: Acciones
responsibility: Responsabilidad
company: Empresa
person: Comercial/Cliente
notes: Observaciones
photos: Fotos
development: Trazabilidad
reason: Motivo
result: Consecuencias
responsible: Responsable
worker: Trabajador
redelivery: Devolución
changeState: Cambiar estado
basicData:
customer: Cliente
assignedTo: Asignada a
created: Creada
state: Estado
pickup: Recogida
null: No
agency: Agencia
delivery: Reparto
photo:
fileDescription: 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}'
noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
dragDrop: Arrástralo y sueltalo aquí
invoiceOut:
list:
ref: Referencia

8
src/pages/Claim/Card/ClaimAction.vue
View File

@ -33,8 +33,8 @@ const DEFAULT_MAX_RESPONSABILITY = 5;
const DEFAULT_MIN_RESPONSABILITY = 1;
const arrayData = useArrayData('claimData');
const marker_labels = [
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },
];
const multiplicatorValue = ref();
const loading = ref(false);
@ -209,12 +209,12 @@ async function post(query, params) {
<QItem class="justify-between">
<QItemLabel class="slider-container">
<p class="text-primary">
{{ t('claim.summary.actions') }}
{{ t('claim.actions') }}
</p>
<QSlider
class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
v-model="claim.responsibility"
:label-value="t('claim.summary.responsibility')"
:label-value="t('claim.responsibility')"
@change="(value) => save({ responsibility: value })"
label-always
color="primary"

17
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -30,7 +30,7 @@ function setClaimStates(data) {
}
async function getEnumValues() {
optionsList.value = [{ id: null, description: t('claim.basicData.null') }];
optionsList.value = [{ id: null, description: t('claim.null') }];
const { data } = await axios.get(`Applications/get-enum-values`, {
params: {
schema: 'vn',
@ -39,7 +39,7 @@ async function getEnumValues() {
},
});
for (let value of data)
optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) });
optionsList.value.push({ id: value, description: t(`claim.${value}`) });
}
getEnumValues();
@ -77,17 +77,14 @@ const statesFilter = {
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-model="data.client.name"
:label="t('claim.basicData.customer')"
:label="t('claim.customer')"
disable
/>
<VnInputDate
v-model="data.created"
:label="t('claim.basicData.created')"
/>
<VnInputDate v-model="data.created" :label="t('claim.created')" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('claim.basicData.assignedTo')"
:label="t('claim.assignedTo')"
v-model="data.workerFk"
:options="workersOptions"
option-value="id"
@ -114,7 +111,7 @@ const statesFilter = {
option-value="id"
option-label="description"
emit-value
:label="t('claim.basicData.state')"
:label="t('claim.state')"
map-options
use-input
@filter="(value, update) => filter(value, update, statesFilter)"
@ -136,7 +133,7 @@ const statesFilter = {
option-value="id"
option-label="description"
emit-value
:label="t('claim.basicData.pickup')"
:label="t('claim.pickup')"
map-options
use-input
:input-debounce="0"

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

@ -2,7 +2,7 @@
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'src/filters';
import { toDateHourMinSec, toPercentage } from 'src/filters';
import { useState } from 'src/composables/useState';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
@ -42,7 +42,7 @@ function stateColor(code) {
const data = ref(useCardDescription());
const setData = (entity) => {
if (!entity) return;
data.value = useCardDescription(entity.client.name, entity.id);
data.value = useCardDescription(entity?.client?.name, entity.id);
state.set('ClaimDescriptor', entity);
};
onMounted(async () => {
@ -52,7 +52,6 @@ onMounted(async () => {
<template>
<CardDescriptor
ref="descriptor"
:url="`Claims/${entityId}`"
:filter="filter"
module="Claim"
@ -64,7 +63,7 @@ onMounted(async () => {
<ClaimDescriptorMenu :claim="entity" />
</template>
<template #body="{ entity }">
<VnLv v-if="entity.claimState" :label="t('claim.card.state')">
<VnLv v-if="entity.claimState" :label="t('claim.state')">
<template #value>
<QBadge
:color="stateColor(entity.claimState.code)"
@ -75,8 +74,8 @@ onMounted(async () => {
</QBadge>
</template>
</VnLv>
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
<VnLv :label="t('claim.card.commercial')">
<VnLv :label="t('claim.created')" :value="toDateHourMinSec(entity.created)" />
<VnLv :label="t('claim.commercial')">
<template #value>
<VnUserLink
:name="entity.client?.salesPersonUser?.name"
@ -86,17 +85,17 @@ onMounted(async () => {
</VnLv>
<VnLv
v-if="entity.worker"
:label="t('claim.card.attendedBy')"
:label="t('claim.attendedBy')"
:value="entity.worker.user.name"
>
<template #value>
<VnUserLink
:name="entity.worker.user.nickname"
:name="entity.worker.user.name"
:worker-id="entity.worker.id"
/>
</template>
</VnLv>
<VnLv :label="t('claim.card.zone')">
<VnLv :label="t('claim.zone')">
<template #value>
<span class="link">
{{ entity.ticket?.zone?.name }}
@ -105,10 +104,10 @@ onMounted(async () => {
</template>
</VnLv>
<VnLv
:label="t('claim.card.province')"
:label="t('claim.province')"
:value="entity.ticket?.address?.province?.name"
/>
<VnLv :label="t('claim.card.ticketId')">
<VnLv :label="t('claim.ticketId')">
<template #value>
<span class="link">
{{ entity.ticketFk }}
@ -130,7 +129,7 @@ onMounted(async () => {
color="primary"
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
>
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
<QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
</QBtn>
<QBtn
size="md"
@ -138,7 +137,7 @@ onMounted(async () => {
color="primary"
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
>
<QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
<QTooltip>{{ t('claim.claimedTicket') }}</QTooltip>
</QBtn>
<QBtn
size="md"
@ -146,7 +145,7 @@ onMounted(async () => {
color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
>
<QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
<QTooltip>{{ t('claim.saleTracking') }}</QTooltip>
</QBtn>
<QBtn
size="md"
@ -154,7 +153,7 @@ onMounted(async () => {
color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
>
<QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
<QTooltip>{{ t('claim.ticketTracking') }}</QTooltip>
</QBtn>
</QCardActions>
</template>

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

@ -9,7 +9,7 @@ const state = useState();
const user = state.getUser();
const $props = defineProps({
id: { type: Number, default: null },
id: { type: [Number, String], default: null },
addNote: { type: Boolean, default: true },
});
const claimId = computed(() => $props.id || route.params.id);

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

@ -18,7 +18,7 @@ const claimId = computed(() => router.currentRoute.value.params.id);
const claimDms = ref([
{
dmsFk: 1,
dmsFk: claimId,
},
]);
const client = ref({});
@ -113,7 +113,7 @@ async function create() {
warehouseId: config.value.warehouseFk,
companyId: config.value.companyFk,
dmsTypeId: dmsType.value.id,
description: t('claim.photo.fileDescription', {
description: t('claim.fileDescription', {
claimId: claimId.value,
clientName: client.value.name,
clientId: client.value.id,
@ -177,7 +177,7 @@ function onDrag() {
>
<QIcon size="xl" name="file_download" />
<h5>
{{ t('claim.photo.dragDrop') }}
{{ t('claim.dragDrop') }}
</h5>
</div>
<div
@ -188,7 +188,7 @@ function onDrag() {
<QIcon size="xl" name="image"></QIcon>
<QIcon size="xl" name="movie"></QIcon>
<h5>
{{ t('claim.photo.noData') }}
{{ t('claim.noData') }}
</h5>
</div>
<div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile">

192
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -1,20 +1,25 @@
<script setup>
import axios from 'axios';
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import FetchData from 'components/FetchData.vue';
import dashIfEmpty from 'src/filters/dashIfEmpty';
import { getUrl } from 'src/composables/getUrl';
import { useSession } from 'src/composables/useSession';
import VnLv from 'src/components/ui/VnLv.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import FetchData from 'components/FetchData.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import ClaimSummaryAction from 'src/pages/Claim/Card/ClaimSummaryAction.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import axios from 'axios';
import dashIfEmpty from 'src/filters/dashIfEmpty';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const route = useRoute();
const router = useRouter();
@ -34,6 +39,9 @@ const ClaimStates = ref([]);
const claimUrl = ref();
const salixUrl = ref();
const claimDmsRef = ref();
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
const claimDmsFilter = ref({
include: [
{
@ -42,34 +50,29 @@ const claimDmsFilter = ref({
],
});
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
const detailsColumns = ref([
{
name: 'item',
label: 'claim.summary.item',
label: 'claim.item',
field: (row) => row.sale.itemFk,
sortable: true,
},
{
name: 'landed',
label: 'claim.summary.landed',
label: 'claim.landed',
field: (row) => row.sale.ticket.landed,
format: (value) => toDate(value),
sortable: true,
},
{
name: 'quantity',
label: 'claim.summary.quantity',
label: 'claim.quantity',
field: (row) => row.sale.quantity,
sortable: true,
},
{
name: 'claimed',
label: 'claim.summary.claimed',
label: 'claim.claimed',
field: (row) => row.quantity,
sortable: true,
},
@ -80,32 +83,38 @@ const detailsColumns = ref([
},
{
name: 'price',
label: 'claim.summary.price',
label: 'claim.price',
field: (row) => row.sale.price,
sortable: true,
},
{
name: 'discount',
label: 'claim.summary.discount',
label: 'claim.discount',
field: (row) => row.sale.discount,
format: (value) => `${value} %`,
sortable: true,
},
{
name: 'total',
label: 'claim.summary.total',
label: 'claim.total',
field: ({ sale }) =>
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
sortable: true,
},
]);
const markerLabels = [
{ value: 1, label: t('claim.company') },
{ value: 5, label: t('claim.person') },
];
const STATE_COLOR = {
pending: 'warning',
incomplete: 'info',
resolved: 'positive',
canceled: 'negative',
};
function stateColor(code) {
return STATE_COLOR[code];
}
@ -113,38 +122,40 @@ function stateColor(code) {
const developmentColumns = ref([
{
name: 'claimReason',
label: 'claim.summary.reason',
label: 'claim.reason',
field: (row) => row.claimReason.description,
sortable: true,
},
{
name: 'claimResult',
label: 'claim.summary.result',
label: 'claim.result',
field: (row) => row.claimResult.description,
sortable: true,
},
{
name: 'claimResponsible',
label: 'claim.summary.responsible',
label: 'claim.responsible',
field: (row) => row.claimResponsible.description,
sortable: true,
},
{
name: 'worker',
label: 'claim.summary.worker',
label: 'claim.worker',
field: (row) => row.worker?.user.nickname,
sortable: true,
},
{
name: 'claimRedelivery',
label: 'claim.summary.redelivery',
label: 'claim.redelivery',
field: (row) => row.claimRedelivery.description,
sortable: true,
},
]);
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
async function getClaimDms() {
claimDmsFilter.value.where = { claimFk: entityId.value };
@ -221,16 +232,13 @@ async function changeState(value) {
</QBtnDropdown>
</template>
<template #body="{ entity: { claim, salesClaimed, developments } }">
<QCard class="vn-one">
<QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
<VnTitle
:url="`#/claim/${entityId}/basic-data`"
:text="t('globals.pageTitles.basicData')"
/>
<VnLv
:label="t('claim.summary.created')"
:value="toDate(claim.created)"
/>
<VnLv :label="t('claim.summary.state')">
<VnLv :label="t('claim.created')" :value="toDate(claim.created)" />
<VnLv :label="t('claim.state')">
<template #value>
<QChip :color="stateColor(claim.claimState.code)" dense>
{{ claim.claimState.description }}
@ -245,7 +253,7 @@ async function changeState(value) {
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.attendedBy')">
<VnLv :label="t('claim.attendedBy')">
<template #value>
<VnUserLink
:name="claim.worker?.user?.nickname"
@ -253,7 +261,7 @@ async function changeState(value) {
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.customer')">
<VnLv :label="t('claim.customer')">
<template #value>
<span class="link cursor-pointer">
{{ claim.client?.name }}
@ -262,15 +270,12 @@ async function changeState(value) {
</template>
</VnLv>
<VnLv
:label="t('claim.basicData.pickup')"
:label="t('claim.pickup')"
:value="`${dashIfEmpty(claim.pickup)}`"
/>
</QCard>
<QCard class="vn-three">
<VnTitle
:url="`#/claim/${entityId}/notes`"
:text="t('claim.summary.notes')"
/>
<QCard class="vn-two">
<VnTitle :url="`#/claim/${entityId}/notes`" :text="t('claim.notes')" />
<ClaimNotes
:id="entityId"
:add-note="false"
@ -278,53 +283,8 @@ async function changeState(value) {
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<VnTitle
:url="`#/claim/${entityId}/lines`"
:text="t('claim.summary.details')"
/>
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
flat
dense
:rows-per-page-options="[0]"
hide-bottom
>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<span v-if="col.name != 'description'">{{
t(col.value)
}}</span>
<QBtn
v-if="col.name == 'description'"
flat
color="blue"
>{{ col.value }}</QBtn
>
<ItemDescriptorProxy
v-if="col.name == 'description'"
:id="props.row.sale.itemFk"
:sale-fk="props.row.saleFk"
></ItemDescriptorProxy>
</QTh>
</QTr>
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
<div class="container">
<div
class="multimedia-container"
@ -362,11 +322,47 @@ async function changeState(value) {
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
flat
dense
:rows-per-page-options="[0]"
hide-bottom
>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<span v-if="col.name != 'description'">{{
t(col.value)
}}</span>
<QBtn
v-if="col.name == 'description'"
flat
color="blue"
>{{ col.value }}</QBtn
>
<ItemDescriptorProxy
v-if="col.name == 'description'"
:id="props.row.sale.itemFk"
:sale-fk="props.row.saleFk"
></ItemDescriptorProxy>
</QTh>
</QTr>
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<VnTitle
:url="claimUrl + 'development'"
:text="t('claim.summary.development')"
/>
<VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
<QTable
:columns="developmentColumns"
:rows="developments"
@ -382,27 +378,31 @@ async function changeState(value) {
</QTh>
</QTr>
</template>
<template #body-cell-worker="props">
<QTd :props="props" class="link">
{{ props.value }}
<WorkerDescriptorProxy :id="props.row.worker.id" />
</QTd>
</template>
</QTable>
</QCard>
<QCard class="vn-max">
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
<VnTitle :url="claimUrl + 'action'" :text="t('claim.actions')" />
<div id="slider-container" class="q-px-xl q-py-md">
<QSlider
v-model="claim.responsibility"
label
:label-value="t('claim.summary.responsibility')"
:label-value="t('claim.responsibility')"
label-always
color="var()"
markers
:marker-labels="[
{ value: 1, label: t('claim.summary.company') },
{ value: 5, label: t('claim.summary.person') },
]"
:marker-labels="markerLabels"
:min="1"
:max="5"
readonly
/>
</div>
<ClaimSummaryAction :id="entityId" />
</QCard>
<QDialog
v-model="multimediaDialog"

98
src/pages/Claim/Card/ClaimSummaryAction.vue Normal file
View File

@ -0,0 +1,98 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'filters/index';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
const { t } = useI18n();
const $props = defineProps({
id: {
type: [Number, String],
required: true,
},
});
const columns = [
{
name: 'itemFk',
label: t('Id item'),
columnFilter: false,
align: 'left',
},
{
name: 'ticketFk',
label: t('Ticket'),
columnFilter: false,
align: 'left',
},
{
name: 'claimDestinationFk',
label: t('Destination'),
columnFilter: false,
align: 'left',
},
{
name: 'landed',
label: t('Landed'),
format: (row) => toDate(row.landed),
align: 'left',
},
{
name: 'quantity',
label: t('Quantity'),
align: 'left',
},
{
name: 'concept',
label: t('Description'),
align: 'left',
},
{
name: 'price',
label: t('Price'),
align: 'left',
},
{
name: 'discount',
label: t('Discount'),
format: ({ discount }) => toPercentage(discount / 100),
align: 'left',
},
{
name: 'total',
label: t('Total'),
align: 'left',
},
];
</script>
<template>
<VnTable
data-key="ClaimEndsTable"
url="ClaimEnds/filter"
default-mode="table"
:right-search="false"
:column-search="false"
:disable-option="{ card: true, table: true }"
search-url="actions"
:filter="{ where: { claimFk: $props.id } }"
:columns="columns"
:limit="0"
:without-header="true"
auto-load
>
<template #column-itemFk="{ row }">
<span class="link">
{{ row.itemFk }}
<ItemDescriptorProxy :id="row.itemFk" />
</span>
</template>
<template #column-ticketFk="{ row }">
<span class="link">
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</span>
</template>
</VnTable>
</template>

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

@ -16,19 +16,12 @@ const props = defineProps({
},
});
const workers = ref();
const states = ref();
const states = ref([]);
</script>
<template>
<FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -36,156 +29,110 @@ const states = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QItem class="q-my-sm">
<QItemSection>
<VnInput
:label="t('Customer ID')"
v-model="params.clientFk"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="badge" size="xs"></QIcon> </template
></VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Client Name')"
v-model="params.clientName"
lazy-rules
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Salesperson')"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Attender')"
v-model="params.attenderFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Responsible')"
v-model="params.claimResponsibleFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="states">
<VnSelect
:label="t('State')"
v-model="params.claimStateFk"
@update:model-value="searchFn()"
:options="states"
option-value="id"
option-label="description"
emit-value
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<!-- <QItem>
<QItemSection>
<qSelect
:label="t('Item')"
v-model="params.itemFk"
:options="items"
:loading="loading"
@filter="filterFn"
@virtual-scroll="onScroll"
option-value="id"
option-label="name"
emit-value
map-options
/>
</QItemSection>
</QItem> -->
<QItem>
<QItemSection>
<VnInputDate
v-model="params.created"
:label="t('Created')"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
<div class="q-pa-sm q-gutter-y-sm">
<VnInput
:label="t('claim.customerId')"
v-model="params.clientFk"
lazy-rules
is-outlined
>
<template #prepend> <QIcon name="badge" size="xs" /></template>
</VnInput>
<VnInput
:label="t('Client Name')"
v-model="params.clientName"
lazy-rules
is-outlined
/>
<VnSelect
:label="t('Salesperson')"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
:use-like="false"
option-value="id"
option-label="name"
option-filter="firstName"
dense
outlined
rounded
/>
<VnSelect
:label="t('claim.attendedBy')"
v-model="params.attenderFk"
@update:model-value="searchFn()"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
:use-like="false"
option-value="id"
option-label="name"
option-filter="firstName"
dense
outlined
rounded
/>
<VnSelect
:label="t('claim.state')"
v-model="params.claimStateFk"
@update:model-value="searchFn()"
:options="states"
option-value="id"
option-label="description"
dense
outlined
rounded
/>
<VnInputDate
v-model="params.created"
@update:model-value="searchFn()"
:label="t('claim.created')"
outlined
rounded
dense
/>
<VnSelect
:label="t('Item')"
v-model="params.itemFk"
@update:model-value="searchFn()"
url="Items/withName"
option-value="id"
option-label="name"
sort-by="id DESC"
outlined
rounded
dense
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
<QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:label="t('claim.responsible')"
v-model="params.claimResponsibleFk"
@update:model-value="searchFn()"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
:use-like="false"
option-value="id"
option-label="name"
option-filter="firstName"
dense
outlined
rounded
/>
<QCheckbox
v-model="params.myTeam"
:label="t('params.myTeam')"
@update:model-value="searchFn()"
toggle-indeterminate
/>
</div>
</template>
</VnFilterPanel>
</template>
@ -201,7 +148,8 @@ en:
claimResponsibleFk: Responsible
claimStateFk: State
created: Created
myTeam: My team
myTeam: My team
itemFk: Item
es:
params:
search: Contiene
@ -212,14 +160,9 @@ es:
claimResponsibleFk: Responsable
claimStateFk: Estado
created: Creada
Customer ID: ID cliente
myTeam: Mi equipo
itemFk: Artículo
Client Name: Nombre del cliente
Salesperson: Comercial
Attender: Asistente
Responsible: Responsable
State: Estado
Item: Artículo
Created: Creada
More options: Más opciones
myTeam: Mi equipo
</i18n>

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

@ -1,38 +1,81 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { toDate } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import ClaimFilter from './ClaimFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'clientName',
isTitle: true,
},
{
align: 'left',
label: t('claim.customer'),
name: 'clientFk',
cardVisible: true,
},
{
align: 'left',
label: t('claim.attendedBy'),
name: 'attendedBy',
cardVisible: true,
},
{
align: 'left',
label: t('claim.created'),
name: 'created',
format: ({ created }) => toDate(created),
cardVisible: true,
},
{
align: 'left',
label: t('claim.state'),
name: 'stateCode',
chip: {
condition: () => true,
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
},
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Client ticket list'),
icon: 'preview',
action: (row) => viewSummary(row.id, ClaimSummary),
},
],
},
]);
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
pending: 'bg-warning',
managed: 'bg-info',
resolved: 'bg-positive',
};
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
router.push({ path: `/claim/${id}` });
}
</script>
<template>
@ -46,78 +89,27 @@ function navigate(event, id) {
<ClaimFilter data-key="ClaimList" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="ClaimList"
url="Claims/filter"
:order="['priority ASC', 'created DESC']"
auto-load
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.clientName"
@click="navigate($event, row.id)"
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('claim.list.customer')">
<template #value>
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnLv>
<VnLv :label="t('claim.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv
:label="t('claim.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('claim.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv>
</template>
<template #actions>
<QBtn
:label="t('globals.description')"
@click.stop
outline
style="margin-top: 15px"
>
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, ClaimSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
<VnTable
data-key="ClaimList"
url="Claims/filter"
:order="['priority ASC', 'created DESC']"
:columns="columns"
redirect="claim"
:right-search="false"
auto-load
>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
<template #column-attendedBy="{ row }">
<span @click.stop>
<VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
</span>
</template>
</VnTable>
</template>
<i18n>

46
src/pages/Claim/locale/en.yml Normal file
View File

@ -0,0 +1,46 @@
claim:
customer: Customer
code: Code
records: records
claimId: Claim ID
attendedBy: Attended by
ticketId: Ticket ID
customerSummary: Customer summary
claimedTicket: Claimed ticket
saleTracking: Sale tracking
ticketTracking: Ticket tracking
commercial: Commercial
province: Province
zone: Zone
customerId: client ID
assignedTo: Assigned
created: Created
details: Details
item: Item
landed: Landed
quantity: Quantity
claimed: Claimed
price: Price
discount: Discount
total: Total
actions: Actions
responsibility: Responsibility
company: Company
person: Employee/Customer
notes: Notes
photos: Photos
development: Development
reason: Reason
result: Result
responsible: Responsible
worker: Worker
redelivery: Redelivery
changeState: Change state
state: State
pickup: Pick up
null: No
agency: Agency
delivery: Delivery
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
noData: 'There are no images/videos, click here or drag and drop the file'
dragDrop: Drag and drop it here

46
src/pages/Claim/locale/es.yml
View File

@ -1,2 +1,48 @@
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
claim:
customer: Cliente
code: Código
records: Registros
claimId: ID de reclamación
attendedBy: Atendido por
ticketId: ID de ticket
customerSummary: Resumen del cliente
claimedTicket: Ticket reclamado
saleTracking: Seguimiento de ventas
ticketTracking: Seguimiento de tickets
commercial: Comercial
province: Provincia
zone: Zona
customerId: ID de cliente
assignedTo: Asignado a
created: Creado
details: Detalles
item: Artículo
landed: Llegado
quantity: Cantidad
claimed: Reclamado
price: Precio
discount: Descuento
total: Total
actions: Acciones
responsibility: Responsabilidad
company: Empresa
person: Empleado/Cliente
notes: Notas
photos: Fotos
development: Trazabilidad
reason: Razón
result: Resultado
responsible: Responsable
worker: Trabajador
redelivery: Reentrega
changeState: Cambiar estado
state: Estado
pickup: Recoger
null: No
agency: Agencia
delivery: Entrega
fileDescription: 'ID de reclamación {claimId} del cliente {clientName} con ID {clientId}'
noData: 'No hay imágenes/videos, haz clic aquí o arrastra y suelta el archivo'
dragDrop: Arrastra y suelta aquí

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

@ -32,7 +32,7 @@ const entityId = computed(() => {
});
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
const setData = (entity) => (data.value = useCardDescription(entity?.name, entity?.id));
</script>
<template>

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

@ -147,6 +147,7 @@ function handleLocation(data, location) {
:label="t('Electronic invoice')"
v-model="data.hasElectronicInvoice"
/>
<QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
</VnRow>
</template>
</FormModel>
@ -176,6 +177,7 @@ es:
onlyLetters: Sólo se pueden usar letras, números y espacios
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
en:
onlyLetters: Only letters, numbers and spaces can be used
whenActivatingIt: When activating it, do not enter the country code in the ID field

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

@ -408,7 +408,6 @@ function handleLocation(data, location) {
default-mode="table"
redirect="customer"
auto-load
:disable-option="{ card: true }"
>
<template #more-create-dialog="{ data }">
<VnLocation

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

@ -73,7 +73,7 @@ onMounted(async () => {
const data = ref(useCardDescription());
const setData = (entity) =>
(data.value = useCardDescription(entity.supplier.nickname, entity.id));
(data.value = useCardDescription(entity.supplier?.nickname, entity.id));
const currentEntry = computed(() => state.get('entry'));

2
src/pages/Entry/EntryLatestBuys.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
import { onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'components/VnTable/VnTable.vue';

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

@ -1,8 +1,6 @@
<script setup>
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import EntryFilter from './EntryFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
@ -12,8 +10,6 @@ import { toDate } from 'src/filters';
const stateStore = useStateStore();
const { t } = useI18n();
const route = useRoute();
const entityId = computed(() => route.params.id);
const tableRef = ref();
const entryFilter = {

4
src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
View File

@ -63,8 +63,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
@on-fetch="setData"
data-key="invoiceOutData"
>
<template #menu="{ entity }">
<InvoiceOutDescriptorMenu :invoice-out-data="entity" />
<template #menu="{ entity, menuRef }">
<InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />
</template>
<template #body="{ entity }">
<VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />

32
src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { ref, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
@ -11,13 +11,20 @@ import useNotify from 'src/composables/useNotify';
import { useSession } from 'src/composables/useSession';
import { usePrintService } from 'composables/usePrintService';
import { useVnConfirm } from 'composables/useVnConfirm';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';
onBeforeMount(async () => (salixUrl.value = await getUrl('')));
const $props = defineProps({
invoiceOutData: {
type: Object,
default: () => {},
},
menuRef: {
type: Object,
default: () => {},
},
});
const { notify } = useNotify();
@ -28,8 +35,7 @@ const { t } = useI18n();
const { openReport, sendEmail } = usePrintService();
const { openConfirmationModal } = useVnConfirm();
const quasar = useQuasar();
const transferInvoiceDialogRef = ref();
const salixUrl = ref();
const invoiceFormType = ref('pdf');
const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
@ -115,6 +121,7 @@ const refundInvoice = async (withWarehouse) => {
try {
const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse };
const { data } = await axios.post('InvoiceOuts/refund', params);
location.href = window.origin + `/#/ticket/${data[0].id}/sale`;
notify(
t('refundInvoiceSuccessMessage', {
refundTicket: data[0].id,
@ -125,11 +132,22 @@ const refundInvoice = async (withWarehouse) => {
console.error('Error generating invoice out pdf', err);
}
};
const showTransferInvoiceForm = async () => {
quasar.dialog({
component: TransferInvoiceForm,
componentProps: {
invoiceOutData: $props.invoiceOutData,
},
});
};
</script>
<template>
<QItem v-ripple clickable @click="transferInvoiceDialogRef.show()">
<QItemSection>{{ t('Transfer invoice to...') }}</QItemSection>
<QItem v-ripple clickable>
<QItemSection @click="showTransferInvoiceForm()">{{
t('Transfer invoice to...')
}}</QItemSection>
</QItem>
<QItem v-ripple clickable>
<QItemSection>{{ t('Show invoice...') }}</QItemSection>
@ -222,10 +240,6 @@ const refundInvoice = async (withWarehouse) => {
{{ t('Create a single ticket with all the content of the current invoice') }}
</QTooltip>
</QItem>
<QDialog ref="transferInvoiceDialogRef">
<TransferInvoiceForm :invoice-out-data="invoiceOutData" />
</QDialog>
</template>
<i18n>

10
src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
View File

@ -3,7 +3,7 @@ import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { toCurrency, toDate } from 'src/filters';
import { toCurrency, toDate, toPercentage } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';
@ -57,12 +57,14 @@ const taxColumns = ref([
name: 'quantity',
label: 'invoiceOut.summary.rate',
field: (row) => row.rate,
format: (value) => toPercentage(value / 100),
sortable: true,
},
{
name: 'invoiceOuted',
label: 'invoiceOut.summary.fee',
field: (row) => row.vat,
format: (value) => toCurrency(value),
sortable: true,
},
]);
@ -113,7 +115,7 @@ const ticketsColumns = ref([
</template>
<template #body="{ entity: { invoiceOut } }">
<QCard class="vn-one">
<VnTitle :text="t('invoiceOut.pageTitles.basicData')" />
<VnTitle :text="t('globals.pageTitles.basicData')" />
<VnLv
:label="t('invoiceOut.summary.issued')"
:value="toDate(invoiceOut.issued)"
@ -164,7 +166,7 @@ const ticketsColumns = ref([
</template>
<template #body-cell-item="{ value }">
<QTd>
<QBtn flat color="primary">
<QBtn flat class="link">
{{ value }}
<TicketDescriptorProxy :id="value" />
</QBtn>
@ -172,7 +174,7 @@ const ticketsColumns = ref([
</template>
<template #body-cell-quantity="{ value, row }">
<QTd>
<QBtn class="no-uppercase" flat color="primary" dense>
<QBtn class="no-uppercase link" flat dense>
{{ value }}
<CustomerDescriptorProxy :id="row.id" />
</QBtn>

3
src/pages/InvoiceOut/InvoiceOutFilter.vue
View File

@ -41,7 +41,7 @@ function setWorkers(data) {
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<template #body="{ params }">
<QItem>
<QItemSection>
<VnInput
@ -93,7 +93,6 @@ function setWorkers(data) {
<QItemSection>
<QCheckbox
:label="t('Has PDF')"
@update:model-value="searchFn()"
toggle-indeterminate
v-model="params.hasPdf"
/>

9
src/pages/InvoiceOut/InvoiceOutGlobal.vue
View File

@ -30,7 +30,7 @@ const selectedCustomerId = ref(null);
const tableColumnComponents = {
clientId: {
component: QBtn,
props: { flat: true, color: 'blue' },
props: { flat: true, class: 'link' },
event: (prop) => selectCustomerId(prop.value),
},
clientName: {
@ -52,7 +52,12 @@ const tableColumnComponents = {
};
const columns = computed(() => [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
align: 'left',
name: 'clientId',
label: 'Id',
field: 'clientId',
},
{
label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName',

2
src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
View File

@ -48,7 +48,7 @@ const getStatus = computed({
onMounted(async () => {
await invoiceOutGlobalStore.init();
formData.value = { ...formInitialData.value };
formData.value = formInitialData.value.invoiceDate;
});
</script>

390
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -1,96 +1,177 @@
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue';
import { toDate, toCurrency } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useSession } from 'src/composables/useSession';
import RightMenu from 'src/components/common/RightMenu.vue';
import { usePrintService } from 'composables/usePrintService';
import VnTable from 'components/VnTable/VnTable.vue';
import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import { toCurrency, toDate } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore';
import { QBtn } from 'quasar';
import { watchEffect } from 'vue';
const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore();
const session = useSession();
const tokenMultimedia = session.getTokenMultimedia();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const invoiceOutSerialsOptions = ref([]);
const ticketsOptions = ref([]);
const customerOptions = ref([]);
const selectedRows = ref([]);
const hasSelectedCards = computed(() => selectedRows.value.length > 0);
const MODEL = 'InvoiceOuts';
const { openReport } = usePrintService();
const manualInvoiceDialogRef = ref(null);
const selectedCards = ref(new Map());
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('invoiceOutList.tableVisibleColumns.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'ref',
label: t('invoiceOutList.tableVisibleColumns.ref'),
isTitle: true,
component: 'select',
attrs: {
url: MODEL,
optionLabel: 'ref',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'Issued',
label: t('invoiceOutList.tableVisibleColumns.issued'),
component: 'date',
format: (row) => toDate(row.issued),
columnField: {
component: null,
},
},
{
align: 'left',
name: 'clientSocialName',
label: t('invoiceOutModule.customer'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'companyCode',
label: t('invoiceOutModule.company'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Companies',
optionLabel: 'code',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'amount',
label: t('invoiceOutModule.amount'),
cardVisible: true,
format: (row) => toCurrency(row.amount),
},
{
align: 'left',
name: 'created',
label: t('invoiceOutList.tableVisibleColumns.created'),
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.created),
},
{
align: 'left',
name: 'dued',
label: t('invoiceOutList.tableVisibleColumns.dueDate'),
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.dued),
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('InvoiceOutSummary'),
icon: 'preview',
action: (row) => viewSummary(row.id, InvoiceOutSummary),
},
{
title: t('DownloadPdf'),
icon: 'vn:ticket',
isPrimary: true,
action: (row) => openPdf(row.id),
},
],
},
]);
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
function navigate(id) {
router.push({ path: `/invoice-out/${id}` });
function openPdf(id) {
try {
openReport(`${MODEL}/${id}/download`);
} catch (err) {
console.error('Error opening PDF', err);
}
}
const toggleIndividualCard = (cardData) => {
if (selectedCards.value.has(cardData.id)) {
selectedCards.value.delete(cardData.id);
return;
}
selectedCards.value.set(cardData.id, cardData);
};
const toggleAllCards = (cardsData) => {
const allSelected = selectedCards.value.size === cardsData.length;
if (!allSelected) {
// Si no todas las tarjetas están seleccionadas, selecciónalas todas
cardsData.forEach((data) => {
if (!selectedCards.value.has(data.id)) {
selectedCards.value.set(data.id, data);
}
});
} else {
// Si todas las tarjetas están seleccionadas, deselecciónalas todas
selectedCards.value.clear();
}
};
const openPdf = () => {
function downloadPdf() {
try {
if (selectedCards.value.size === 0) return;
const selectedCardsArray = Array.from(selectedCards.value.values());
if (selectedRows.value.size === 0) return;
const selectedCardsArray = Array.from(selectedRows.value.values());
if (selectedCards.value.size === 1) {
if (selectedRows.value.size === 1) {
const [invoiceOut] = selectedCardsArray;
const url = `api/InvoiceOuts/${invoiceOut.id}/download?access_token=${tokenMultimedia}`;
window.open(url, '_blank');
openPdf(invoiceOut.id);
} else {
const invoiceOutIdsArray = selectedCardsArray.map(
(invoiceOut) => invoiceOut.id
);
const invoiceOutIds = invoiceOutIdsArray.join(',');
const params = new URLSearchParams({
access_token: tokenMultimedia,
const params = {
ids: invoiceOutIds,
});
};
const url = `api/InvoiceOuts/downloadZip?${params}`;
window.open(url, '_blank');
openReport(`${MODEL}/downloadZip`, params);
}
} catch (err) {
console.error('Error opening PDF');
}
};
}
const openCreateInvoiceModal = () => {
manualInvoiceDialogRef.value.show();
};
watchEffect(selectedRows);
</script>
<template>
@ -99,115 +180,84 @@ const openCreateInvoiceModal = () => {
:label="t('searchInvoice')"
data-key="InvoiceOutList"
/>
<RightMenu>
<template #right-panel>
<InvoiceOutFilter data-key="InvoiceOutList" />
<VnSubToolbar>
<template #st-actions>
<QBtn
color="primary"
icon-right="cloud_download"
@click="downloadPdf()"
:disable="!hasSelectedCards"
>
<QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
</QBtn>
</template>
</RightMenu>
<QPage>
<VnPaginate
auto-load
data-key="InvoiceOutList"
:order="['issued DESC', 'id DESC']"
url="InvoiceOuts/filter"
>
<template #body="{ rows }">
<VnSubToolbar class="justify-end">
<template #st-actions>
<QBtn
@click="openPdf()"
class="q-mr-md"
color="primary"
icon="cloud_download"
:disable="selectedCards.size === 0"
>
<QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
</QBtn>
<QCheckbox
left-label
:label="t('globals.markAll')"
@click="toggleAllCards(rows)"
:model-value="selectedCards.size === rows.length"
class="q-mr-md"
/>
</template>
</VnSubToolbar>
<div class="flex flex-center q-pa-md">
<div class="vn-card-list">
<CardList
:element="row"
:id="row.id"
:show-checkbox="true"
:is-selected="selectedCards.has(row.id)"
:key="row.id"
:title="row.ref"
@click="navigate(row.id)"
@toggle-card-check="toggleIndividualCard(row)"
v-for="row of rows"
>
<template #list-items>
<VnLv
:label="t('invoiceOut.list.issued')"
:value="toDate(row.issued)"
/>
<VnLv
:label="t('invoiceOut.list.amount')"
:value="toCurrency(row.amount)"
/>
<VnLv :label="t('invoiceOut.list.client')">
<template #value>
<span class="link" @click.stop>
{{ row?.clientSocialName }}
<CustomerDescriptorProxy
:id="row?.clientFk"
/>
</span>
</template>
</VnLv>
<VnLv
:label="t('invoiceOut.list.shortCreated')"
:title-label="t('invoiceOut.list.created')"
:value="toDate(row.created)"
/>
<VnLv
:label="t('invoiceOut.list.company')"
:value="row.companyCode"
/>
<VnLv
:label="t('invoiceOut.list.shortDued')"
:title-label="t('invoiceOut.list.dued')"
:value="toDate(row.dued)"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, InvoiceOutSummary)"
color="primary"
style="margin-top: 15px"
type="submit"
/>
</template>
</CardList>
</div>
</div>
</template>
</VnPaginate>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="openCreateInvoiceModal()" />
<QTooltip>
{{ t('createInvoice') }}
</QTooltip>
</QPageSticky>
<QDialog
ref="manualInvoiceDialogRef"
transition-show="scale"
transition-hide="scale"
>
<CreateManualInvoiceForm />
</QDialog>
</QPage>
</VnSubToolbar>
<VnTable
ref="tableRef"
data-key="invoiceOut"
:url="`${MODEL}/filter`"
:create="{
urlCreate: 'InvoiceOuts/createManualInvoice',
title: t('Create Manual Invoice'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
active: true,
},
}"
v-model:selected="selectedRows"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="invoice-out"
auto-load
:table="{
'row-key': 'id',
selection: 'multiple',
}"
>
<template #more-create-dialog="{ data }">
<VnSelect
url="Tickets"
v-model="data.ticketFk"
:label="t('invoiceOutList.tableVisibleColumns.ticket')"
:options="ticketsOptions"
option-label="nickname"
option-value="id"
/>
<VnSelect
url="Clients"
v-model="data.clientFk"
:label="t('invoiceOutModule.customer')"
:options="customerOptions"
option-label="name"
option-value="id"
/>
<VnInputDate
:label="t('invoiceOutList.tableVisibleColumns.dueDate')"
v-model="data.maxShipped"
/>
<VnSelect
url="InvoiceOutSerials"
v-model="data.invoiceOutSerial"
:label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
:options="invoiceOutSerialsOptions"
option-label="description"
option-value="code"
/>
<VnSelect
url="TaxAreas"
v-model="data.area"
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:options="taxAreasOptions"
option-label="code"
option-value="code"
/>
<QInput
v-model="data.reference"
:label="t('invoiceOutList.tableVisibleColumns.ref')"
/>
</template>
</VnTable>
</template>
<i18n>

239
src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
View File

@ -1,200 +1,177 @@
<script setup>
import { computed, onBeforeMount } from 'vue';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { toCurrency } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
import { useArrayData } from 'src/composables/useArrayData';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
const { t } = useI18n();
const arrayData = useArrayData('InvoiceOutNegative', {
url: 'InvoiceOuts/negativeBases',
limit: 0,
userParams: {
from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(),
},
exprBuilder: (param, value) => {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
},
});
onBeforeMount(async () => {
await arrayData.fetch({ append: false });
stateStore.rightDrawer = true;
});
const tableRef = ref();
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const userParams = {
from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(),
};
useArrayData('InvoiceOutNegative', { userParams });
const columns = computed(() => [
{
label: t('invoiceOut.negativeBases.company'),
field: 'company',
align: 'left',
name: 'company',
align: 'left',
label: t('invoiceOutModule.company'),
component: 'select',
cardVisible: true,
attrs: {
url: 'Companies',
optionLabel: 'code',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
label: t('invoiceOut.negativeBases.country'),
field: 'country',
align: 'left',
name: 'country',
align: 'left',
label: t('negativeBases.country'),
component: 'select',
attrs: {
url: 'Countries',
optionLabel: 'name',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
label: t('invoiceOut.negativeBases.clientId'),
field: 'clientId',
align: 'left',
name: 'clientId',
align: 'left',
label: t('negativeBases.clientId'),
cardVisible: true,
},
{
label: t('invoiceOut.negativeBases.client'),
field: 'clientSocialName',
name: 'client',
align: 'left',
name: 'clientSocialName',
label: t('invoiceOutModule.customer'),
component: 'select',
isTitle: true,
cardVisible: true,
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
label: t('invoiceOut.negativeBases.amount'),
field: 'amount',
align: 'left',
name: 'amount',
align: 'left',
format: (value) => toCurrency(value),
label: t('invoiceOutModule.amount'),
format: (row) => toCurrency(row.amount),
cardVisible: true,
},
{
label: t('invoiceOut.negativeBases.base'),
field: 'taxableBase',
name: 'base',
align: 'left',
name: 'taxableBase',
label: t('negativeBases.base'),
},
{
label: t('invoiceOut.negativeBases.ticketId'),
field: 'ticketFk',
name: 'ticketId',
align: 'left',
name: 'ticketFk',
label: t('negativeBases.ticketId'),
cardVisible: true,
},
{
label: t('invoiceOut.negativeBases.active'),
field: 'isActive',
name: 'active',
align: 'left',
name: 'isActive',
label: t('negativeBases.active'),
},
{
label: t('invoiceOut.negativeBases.hasToInvoice'),
field: 'hasToInvoice',
align: 'left',
name: 'hasToInvoice',
align: 'left',
label: t('negativeBases.hasToInvoice'),
},
{
label: t('invoiceOut.negativeBases.verifiedData'),
field: 'isTaxDataChecked',
name: 'verifiedData',
align: 'left',
name: 'hasVerifiedData',
label: t('negativeBases.verifiedData'),
},
{
label: t('invoiceOut.negativeBases.comercial'),
field: 'workerName',
name: 'worker',
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'workerName',
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.workerName),
},
]);
const downloadCSV = async () => {
const params = {}; // filter.value;
const filterParams = {
limit: 20,
where: {
and: [],
},
};
for (const param in params) {
if (params[param]) filterParams.where.and.push({ [param]: params[param] });
for (const [key, value] of Object.entries(userParams)) {
if (value) {
filterParams.where.and.push({ [key]: value });
}
}
await invoiceOutGlobalStore.getNegativeBasesCsv(
arrayData.value.store.userParams.from,
arrayData.value.store.userParams.to,
params
userParams.from,
userParams.to,
filterParams
);
};
</script>
<template>
<VnSubToolbar>
<template #st-actions>
<QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
<QBtn color="primary" icon-right="download" @click="downloadCSV()">
<QTooltip>{{ t('Download as CSV') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:rows="arrayData.store.data"
row-key="clientId"
class="full-width q-mt-md"
>
<template #body-cell-clientId="{ row }">
<QTd>
<QBtn flat dense class="link"> {{ row.clientId }}</QBtn>
<CustomerDescriptorProxy :id="row.clientId" />
</QTd>
</template>
<template #body-cell-ticketId="{ row }">
<QTd>
<QBtn flat dense class="link"> {{ row.ticketFk }}</QBtn>
<TicketDescriptorProxy :id="row.ticketFk" />
</QTd>
</template>
<template #body-cell-worker="{ row }">
<QTd>
<QBtn class="no-uppercase link" flat dense>{{ row.workerName }}</QBtn>
<WorkerDescriptorProxy :id="row.comercialId" />
</QTd>
</template>
<template #body-cell-active="{ row }">
<QTd>
<QCheckbox :model-value="!!row.isActive" disable />
</QTd>
</template>
<template #body-cell-hasToInvoice="{ row }">
<QTd>
<QCheckbox :model-value="!!row.hasToInvoice" disable />
</QTd>
</template>
<template #body-cell-verifiedData="{ row }">
<QTd>
<QCheckbox :model-value="!!row.isTaxDataChecked" disable />
</QTd>
</template>
</QTable>
</QPage>
<VnTable
ref="tableRef"
data-key="negativeFilter"
url="InvoiceOuts/negativeBases"
:user-params="userParams"
:expr-builder="
(param, value) => {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
}
"
:limit="0"
:columns="columns"
default-mode="table"
auto-load
:is-editable="false"
:use-model="true"
>
</VnTable>
</template>
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px;
}
.no-uppercase {
text-transform: none;
}
</style>
<i18n>
es:
Download as CSV: Descargar como CSV

25
src/pages/InvoiceOut/locale/en.yml Normal file
View File

@ -0,0 +1,25 @@
invoiceOutModule:
customer: Client
amount: Amount
company: Company
invoiceOutList:
tableVisibleColumns:
id: ID
ref: Reference
issued: Issued
created: Created
dueDate: Max date
invoiceOutSerial: Serial
ticket: Ticket
taxArea: Tax area
DownloadPdf: Download PDF
InvoiceOutSummary: Summary
negativeBases:
country: Country
clientId: Client ID
base: Base
ticketId: Ticket
active: Active
hasToInvoice: Has to invoice
verifiedData: Verified data
commercial: Commercial

29
src/pages/InvoiceOut/locale/es.yml
View File

@ -1,2 +1,31 @@
Search invoice: Buscar factura emitida
You can search by invoice reference: Puedes buscar por referencia de la factura
invoiceOutModule:
customer: Cliente
amount: Importe
company: Empresa
invoiceOutList:
tableVisibleColumns:
id: ID
ref: Referencia
issued: Fecha emisión
customer: Cliente
company: Empresa
amount: Importe
created: F. creación
dueDate: F. máxima
invoiceOutSerial: Serial
ticket: Ticket
taxArea: Area
DownloadPdf: Descargar PDF
InvoiceOutSummary: Resumen
negativeBases:
country: País
clientId: ID del cliente
client: Cliente
base: Base
ticketId: Ticket
active: Activo
hasToInvoice: Debe facturar
verifiedData: Datos verificados
commercial: Comercial

4
src/pages/Order/Card/OrderDescriptor.vue
View File

@ -60,7 +60,7 @@ const filter = {
const data = ref(useCardDescription());
const setData = (entity) => {
if (!entity) return;
data.value = useCardDescription(entity.client.name, entity.id);
data.value = useCardDescription(entity?.client?.name, entity?.id);
state.set('OrderDescriptor', entity);
};
@ -131,7 +131,7 @@ const total = ref(null);
color="primary"
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
>
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
<QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
</QBtn>
</QCardActions>
</template>

45
src/pages/Order/Card/OrderForm.vue
View File

@ -1,11 +1,10 @@
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useState } from 'composables/useState';
import FormModel from 'components/FormModel.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
@ -18,29 +17,9 @@ const ORDER_MODEL = 'order';
const router = useRouter();
const isNew = Boolean(!route.params.id);
const initialFormState = reactive({
clientFk: null,
addressFk: null,
agencyModeFk: null,
landed: null,
});
const clientList = ref([]);
const agencyList = ref([]);
const addressList = ref([]);
const clientId = ref(null);
const onClientsFetched = (data) => {
clientList.value = data;
initialFormState.clientFk = Number(route.query?.clientFk) || null;
clientId.value = initialFormState.clientFk;
const client = clientList.value.find(
(client) => client.id === initialFormState.clientFk
);
if (!client?.defaultAddressFk)
throw new Error(t(`No default address found for the client`));
fetchAddressList(client.defaultAddressFk);
};
const fetchAddressList = async (addressId) => {
try {
@ -128,28 +107,19 @@ const onClientChange = async (clientId) => {
}
};
async function onDataSaved(data) {
await router.push({ path: `/order/${data}/catalog` });
async function onDataSaved({ id }) {
await router.push({ path: `/order/${id}/catalog` });
}
</script>
<template>
<FetchData
url="Clients"
@on-fetch="(data) => onClientsFetched(data)"
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load
/>
<VnSubToolbar v-if="isNew" />
<div class="q-pa-md">
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
url-create="Orders/new"
:url="`Orders/${route.params.id}`"
@on-data-saved="onDataSaved"
:model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:mapper="orderMapper"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
auto-load
@ -157,11 +127,15 @@ async function onDataSaved(data) {
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
url="Clients"
:label="t('order.form.clientFk')"
v-model="data.clientFk"
:options="clientList"
option-value="id"
option-label="name"
:filter="{
fields: ['id', 'name', 'defaultAddressFk'],
}"
hide-selected
@update:model-value="onClientChange"
>
@ -183,7 +157,6 @@ async function onDataSaved(data) {
option-label="street"
hide-selected
:disable="!addressList?.length"
@update:model-value="onAddressChange"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">

2
src/pages/Order/Card/OrderSummary.vue
View File

@ -196,7 +196,7 @@ const detailsColumns = ref([
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
{{ toCurrency(props.row.price) }}
</QTd>
<QTd key="amount" :props="props">
{{

9
src/pages/Order/OrderCatalog.vue
View File

@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
import CatalogItem from 'components/ui/CatalogItem.vue';
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
const route = useRoute();
@ -77,7 +77,12 @@ function extractValueTags(items) {
<div v-if="rows && !rows?.length" class="no-result">
{{ t('globals.noResults') }}
</div>
<OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
<CatalogItem
v-for="row in rows"
:key="row.id"
:item="row"
is-catalog
/>
</div>
</template>
</VnPaginate>

384
src/pages/Order/OrderLines.vue
View File

@ -1,33 +1,168 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useQuasar } from 'quasar';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnImg from 'components/ui/VnImg.vue';
import { toCurrency, toDate } from 'src/filters';
import axios from 'axios';
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import FetchData from 'src/components/FetchData.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
const quasar = useQuasar();
const componentKey = ref(0);
const tableLinesRef = ref();
const order = ref();
const orderSummary = ref({
total: null,
vat: null,
});
const componentKey = ref(0);
const order = ref(0);
const refresh = () => {
componentKey.value += 1;
};
const lineFilter = ref({
include: [
{
relation: 'item',
scope: {
fields: [
'id',
'name',
'subName',
'image',
'tag4',
'value4',
'tag5',
'value5',
'tag6',
'value6',
'tag7',
'value7',
'tag8',
'value8',
'tag9',
'value9',
'tag10',
'value10',
],
},
},
{
relation: 'warehouse',
scope: {
fields: ['id', 'name'],
},
},
],
where: { orderFk: route.params.id },
});
const columns = computed(() => [
{
align: 'center',
label: t('lines.image'),
name: 'image',
columnField: {
component: VnImg,
attrs: (id) => {
return {
id,
width: '50px',
};
},
},
columnFilter: false,
},
{
align: 'left',
name: 'id',
label: t('lines.item'),
chip: {
condition: () => true,
},
isId: true,
format: (row) => row?.item?.id,
},
{
align: 'left',
name: 'itemFk',
label: t('globals.description'),
isTitle: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'Items',
fields: ['id', 'name', 'subName'],
},
columnField: {
component: null,
},
format: (row) => row?.item?.name,
},
{
align: 'left',
name: 'warehouseFk',
label: t('lines.warehouse'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Warehouses',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row) => row?.warehouse?.name,
},
{
align: 'left',
name: 'shipped',
label: t('lines.shipped'),
cardVisible: true,
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.shipped),
},
{
align: 'left',
name: 'quantity',
label: t('lines.quantity'),
},
{
align: 'left',
name: 'price',
label: t('lines.price'),
cardVisible: true,
format: (row) => toCurrency(row.price),
},
{
align: 'left',
name: 'amount',
label: t('lines.amount'),
format: (row) => toCurrency(row.amount),
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('delete'),
icon: 'delete',
action: (row) => confirmRemove(row),
isPrimary: true,
},
],
},
]);
function confirmRemove(item) {
quasar.dialog({
@ -41,6 +176,8 @@ function confirmRemove(item) {
}
async function remove(item) {
console.log('item: ', item);
console.log('id: ', route.params.id);
await axios.post('OrderRows/removes', {
actualOrderId: route.params.id,
rows: [item.id],
@ -49,7 +186,7 @@ async function remove(item) {
message: t('globals.dataDeleted'),
type: 'positive',
});
refresh();
tableLinesRef.value.reload();
}
async function confirmOrder() {
@ -59,56 +196,6 @@ async function confirmOrder() {
type: 'positive',
});
}
const detailsColumns = ref([
{
name: 'img',
label: '',
field: (row) => row?.item?.id,
},
{
name: 'item',
label: t('order.summary.item'),
field: (row) => row?.item?.id,
sortable: true,
},
{
name: 'description',
label: t('globals.description'),
field: (row) => row?.item?.name,
},
{
name: 'warehouse',
label: t('warehouse'),
field: (row) => row?.warehouse?.name,
sortable: true,
},
{
name: 'shipped',
label: t('shipped'),
field: (row) => toDate(row?.shipped),
},
{
name: 'quantity',
label: t('order.summary.quantity'),
field: (row) => row?.quantity,
},
{
name: 'price',
label: t('order.summary.price'),
field: (row) => toCurrency(row?.price),
},
{
name: 'amount',
label: t('order.summary.amount'),
field: (row) => toCurrency(row?.quantity * row?.price),
},
{
name: 'actions',
label: '',
field: (row) => row?.id,
},
]);
</script>
<template>
@ -130,122 +217,62 @@ const detailsColumns = ref([
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QPage :key="componentKey" class="column items-center q-pa-md">
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<QCard class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal') + ': '"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT') + ': '"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total') + ': '"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
</QDrawer>
<QPage :key="componentKey" class="column items-center">
<div class="order-list full-width">
<div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }}
</div>
<QDrawer side="right" :width="270" show-if-above>
<QCard class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal')"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT')"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total')"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
</QDrawer>
<VnPaginate
<VnTable
ref="tableLinesRef"
data-key="OrderLines"
url="OrderRows"
:limit="20"
:columns="columns"
default-mode="table"
:right-search="false"
:use-model="true"
auto-load
:filter="{
include: [
{
relation: 'item',
},
{
relation: 'warehouse',
},
],
where: { orderFk: route.params.id },
}"
:user-filter="lineFilter"
>
<template #body="{ rows }">
<div class="q-pa-md">
<QTable
:columns="detailsColumns"
:rows="rows"
flat
class="full-width"
style="text-align: center"
>
<template #header="props">
<QTr class="tr-header" :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
style="text-align: center"
>
{{ t(col.label) }}
</QTh>
</QTr>
</template>
<template #body-cell-img="{ value }">
<QTd>
<div class="image-wrapper">
<VnImg :id="value" class="rounded" />
</div>
</QTd>
</template>
<template #body-cell-item="{ value }">
<QTd class="item">
<span class="link">
<QBtn flat>
{{ value }}
</QBtn>
<ItemDescriptorProxy :id="value" />
</span>
</QTd>
</template>
<template #body-cell-description="{ row, value }">
<QTd>
<div
class="row column full-width justify-between items-start"
>
{{ value }}
<div v-if="value" class="subName">
{{ value.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row.item" :max-length="6" />
</QTd>
</template>
<template #body-cell-actions="{ value }">
<QTd>
<QIcon
name="delete"
color="primary"
size="sm"
class="cursor-pointer"
@click.stop="confirmRemove(value)"
>
<QTooltip>{{ t('Remove thermograph') }}</QTooltip>
</QIcon>
</QTd>
</template>
</QTable>
<template #column-image="{ row }">
<div class="image-wrapper">
<VnImg :id="parseInt(row?.item?.image)" class="rounded" />
</div>
</template>
</VnPaginate>
<template #column-itemFk="{ row }">
<div class="row column full-width justify-between items-start">
{{ row?.item?.name }}
<div v-if="row?.item?.subName" class="subName">
{{ row?.item?.subName.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row?.item" :max-length="6" />
</template>
</VnTable>
</div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
@ -253,7 +280,8 @@ const detailsColumns = ref([
</QPageSticky>
</QPage>
</template>
<style lang="scss">
<style lang="scss" scoped>
.order-lines-summary {
.vn-label-value {
display: flex;
@ -274,8 +302,13 @@ const detailsColumns = ref([
}
}
}
</style>
<style lang="scss" scoped>
.image-wrapper {
height: 50px;
width: 50px;
margin-left: 30%;
}
.header {
color: $primary;
font-weight: bold;
@ -284,12 +317,6 @@ const detailsColumns = ref([
display: inline-block;
}
.image-wrapper {
height: 50px;
width: 50px;
margin-left: 30%;
}
.no-result {
font-size: 24px;
font-weight: bold;
@ -302,6 +329,7 @@ const detailsColumns = ref([
color: var(--vn-label-color);
}
</style>
<i18n>
en:
summary: Summary

282
src/pages/Order/OrderList.vue
View File

@ -1,30 +1,135 @@
<script setup>
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate } from 'src/filters';
import CardList from 'components/ui/CardList.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnLv from 'components/ui/VnLv.vue';
import { computed, ref } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const clientList = ref([]);
const agencyList = ref([]);
const selectedAddress = ref();
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('module.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'clientName',
label: t('module.customer'),
isTitle: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'name',
label: t('module.salesPerson'),
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'isConfirmed',
label: t('module.isConfirmed'),
},
{
align: 'left',
name: 'created',
label: t('module.created'),
component: 'date',
cardVisible: true,
format: (row) => toDate(row?.landed),
columnField: {
component: null,
},
},
{
align: 'left',
name: 'landed',
label: t('module.landed'),
component: 'date',
format: (row) => toDate(row?.landed),
columnField: {
component: null,
},
style: 'color="positive"',
},
{
align: 'left',
name: 'hour',
label: t('module.hour'),
format: ({ hourTheoretical, hourEffective }) =>
dashIfEmpty(hourTheoretical || hourEffective),
},
{
align: 'left',
name: 'agencyName',
label: t('module.agency'),
component: 'select',
cardVisible: true,
attrs: {
url: 'Agencies',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'total',
label: t('module.total'),
format: ({ total }) => toCurrency(total),
cardVisible: true,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('InvoiceOutSummary'),
icon: 'preview',
action: (row) => viewSummary(row.id, OrderSummary),
},
],
},
]);
function navigate(id) {
router.push({ path: `/order/${id}` });
async function fetchClientAddress(id, data) {
console.log('data: ', data);
const clientData = await axios.get(`Clients/${id}`);
selectedAddress.value = clientData.data.defaultAddressFk;
data.addressId = selectedAddress.value;
}
</script>
<template>
@ -33,100 +138,53 @@ function navigate(id) {
:label="t('Search order')"
:info="t('You can search orders by reference')"
/>
<RightMenu>
<template #right-panel>
<OrderFilter data-key="OrderList" />
<VnTable
ref="tableRef"
data-key="OrderList"
url="Orders/filter"
:create="{
urlCreate: 'Orders/new',
title: 'Create Order',
onDataSaved: (url) => {
tableRef.redirect(url);
},
formInitialData: {
active: true,
addressId: null,
},
}"
:columns="columns"
default-mode="table"
redirect="order"
auto-load
>
<template #more-create-dialog="{ data }">
<VnSelect
url="Clients"
v-model="data.id"
:label="t('module.customer')"
:options="clientList"
option-value="id"
option-label="name"
@update:model-value="(id) => fetchClientAddress(id, data)"
/>
<VnSelect
url="Clients"
v-model="selectedAddress"
:label="t('module.address')"
:options="selectedAddress"
option-value="defaultAddressFk"
option-label="street"
/>
<VnInputDate v-model="data.landed" :label="t('module.landed')" />
<VnSelect
url="Agencies"
v-model="data.agencyModeId"
:label="t('module.agency')"
:options="agencyList"
option-value="id"
option-label="name"
/>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="OrderList"
url="Orders/filter"
:limit="20"
:order="['landed DESC', 'clientFk', 'id DESC']"
:user-params="{ showEmpty: false }"
:keep-opts="['userParams']"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:id="row.id"
:title="`${row?.clientName} (${row?.clientFk})`"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv
:label="t('order.field.salesPersonFk')"
:title-label="t('order.field.salesPersonFk')"
>
<template #value>
<span class="link" @click.stop>
{{ row?.name || '-' }}
<WorkerDescriptorProxy :id="row?.salesPersonFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.field.clientFk')"
:title-label="t('order.field.clientFk')"
>
<template #value>
<span class="link" @click.stop>
{{ row?.clientName || '-' }}
<CustomerDescriptorProxy :id="row?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.field.isConfirmed')"
:value="row?.isConfirmed === 1"
/>
<VnLv
:label="t('order.field.created')"
:value="toDate(row?.created)"
/>
<VnLv :label="t('order.field.landed')">
<template #value>
<QBadge text-color="black" color="positive" dense>
{{ toDate(row?.landed) }}
</QBadge>
</template>
</VnLv>
<VnLv
:label="t('order.field.hour')"
:value="row.hourTheoretical || row.hourEffective"
/>
<VnLv
:label="t('order.field.agency')"
:value="row?.agencyName"
/>
<VnLv
:label="t('order.field.total')"
:value="toCurrency(row?.total)"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, OrderSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<RouterLink :to="{ name: 'OrderCreate' }">
<QBtn fab icon="add" color="primary" />
<QTooltip>
{{ t('order.list.newOrder') }}
</QTooltip>
</RouterLink>
</QPageSticky>
</QPage>
</VnTable>
</template>

22
src/pages/Order/locale/en.yml Normal file
View File

@ -0,0 +1,22 @@
module:
id: ID
name: Name
customer: Client
isConfirmed: Confirmed
created: Created
landed: Landed
hour: Hour
agency: Agency
total: Total
salesPerson: Sales Person
address: Address
lines:
item: Item
warehouse: Warehouse
shipped: Shipped
quantity: Quantity
price: Price
amount: Amount
image: Image
params:
tagGroups: Tags

22
src/pages/Order/locale/es.yml Normal file
View File

@ -0,0 +1,22 @@
module:
id: ID
name: Nombre
customer: Cliente
isConfirmed: Confirmado
created: Creado
landed: F. Entrega
hour: Hora
agency: Agencia
total: Total
salesPerson: Comercial
address: Dirección
lines:
item: Artículo
warehouse: Almacén
shipped: Envío
quantity: Cantidad
price: Precio
amount: Importe
image: Imagen
params:
tagGroups: Tags

78
src/pages/Ticket/Card/ExpeditionNewTicket.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup>
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
ticket: {
type: Boolean,
default: false,
},
withRoute: {
type: Boolean,
default: false,
},
selectedExpeditions: {
type: Array,
default: () => [],
},
});
const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const newTicketFormData = reactive({});
const createTicket = async () => {
try {
const expeditionIds = $props.selectedExpeditions.map(
(expedition) => expedition.id
);
const params = {
clientId: $props.ticket.clientFk,
landed: newTicketFormData.landed,
warehouseId: $props.ticket.warehouseFk,
addressId: $props.ticket.addressFk,
agencyModeId: $props.ticket.agencyModeFk,
routeId: newTicketFormData.routeFk,
expeditionIds: expeditionIds,
};
const { data } = await axios.post('Expeditions/moveExpeditions', params);
notify(t('globals.dataSaved'), 'positive');
router.push({ name: 'TicketSummary', params: { id: data.id } });
} catch (error) {
console.error(error);
}
};
</script>
<template>
<FormModelPopup
model="expeditionNewTicket"
:form-initial-data="newTicketFormData"
:save-fn="createTicket"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnInputDate :label="t('expedition.landed')" v-model="data.landed" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-if="withRoute"
:label="t('expedition.routeId')"
v-model="data.routeFk"
/>
</VnRow>
</template>
</FormModelPopup>
</template>

354
src/pages/Ticket/Card/TicketComponents.vue Normal file
View File

@ -0,0 +1,354 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import FetchData from 'components/FetchData.vue';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
import { useStateStore } from 'stores/useStateStore';
import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import { toCurrency } from 'filters/index';
import axios from 'axios';
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const salesRef = ref(null);
const arrayData = useArrayData('ticketData');
const { store } = arrayData;
const ticketData = computed(() => store.data);
const components = ref([]);
const componentsList = ref([]);
const theoricalCost = ref(0);
const ticketVolume = ref(null);
watch(
() => ticketData.value,
async () => {
await nextTick();
salesRef.value.fetch();
getComponentsSum();
getTheoricalCost();
if (ticketData.value?.zone && ticketData.value?.zone?.isVolumetric)
getTicketVolume();
},
{ immediate: true }
);
const salesFilter = computed(() => ({
order: 'concept ASC',
include: [
{
relation: 'item',
},
{
relation: 'components',
scope: {
fields: ['componentFk', 'value'],
include: {
relation: 'component',
scope: {
fields: ['typeFk', 'name'],
include: {
relation: 'componentType',
scope: {
fields: ['type', 'isBase', 'name'],
},
},
},
},
},
},
],
where: { ticketFk: route.params.id },
}));
const columns = computed(() => [
{
label: t('components.item'),
name: 'item',
align: 'left',
},
{
label: t('components.description'),
name: 'description',
align: 'left',
},
{
label: t('components.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
format: (val) => dashIfEmpty(val),
},
{
label: t('components.serie'),
name: 'serie',
align: 'left',
},
{
label: t('components.components'),
name: 'components',
align: 'left',
},
{
label: t('components.import'),
name: 'import',
align: 'left',
},
{
label: t('components.total'),
name: 'total',
align: 'left',
},
]);
const getBase = computed(() => {
let sum = 0;
for (let sale of components.value) {
for (let saleComponent of sale.components) {
if (saleComponent.component.componentType.isBase) {
sum += sale.quantity * saleComponent.value;
}
}
}
return sum;
});
const getTotal = computed(() => {
let total = 0;
for (let sale of components.value) {
for (let saleComponent of sale.components) {
total += sale.quantity * saleComponent.value;
}
}
return total;
});
const getComponentsSum = async () => {
try {
const { data } = await axios.get(`Tickets/${route.params.id}/getComponentsSum`);
componentsList.value = data;
} catch (error) {
console.error(error);
}
};
const getTheoricalCost = async () => {
try {
const { data } = await axios.get(`Tickets/${route.params.id}/freightCost`);
theoricalCost.value = data;
} catch (error) {
console.error(error);
}
};
const getTicketVolume = async () => {
try {
if (!ticketData.value) return;
const { data } = await axios.get(`Tickets/${ticketData.value.id}/getVolume`);
ticketVolume.value = data[0].volume;
} catch (error) {
console.error(error);
}
};
onMounted(() => {
stateStore.rightDrawer = true;
});
onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
<FetchData
ref="salesRef"
url="Sales"
:filter="salesFilter"
@on-fetch="(data) => (components = data)"
auto-load
/>
<RightMenu>
<template #right-panel>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.total') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('components.baseToCommission') }}:
</span>
<span>{{ toCurrency(getBase) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('components.totalWithoutVat') }}:
</span>
<span>{{ toCurrency(getTotal) }}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.components') }}
</span>
</QCardSection>
<QCardSection
v-for="(component, index) in componentsList"
:key="index"
horizontal
>
<span v-if="component.name" class="q-mr-xs color-vn-label">
{{ component.name }}:
</span>
<span v-if="component.value">{{
toCurrency(component.value, 'EUR', 3)
}}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.zoneBreakdown') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.price') }}:
</span>
<span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.bonus') }}:
</span>
<span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.zone') }}:
</span>
<span class="link">
{{ dashIfEmpty(ticketData?.zone?.name) }}
<ZoneDescriptorProxy :id="ticketData?.zone?.id" />
</span>
</QCardSection>
<QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.volume') }}:
</span>
<span>{{ ticketVolume }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.packages') }}:
</span>
<span>{{ dashIfEmpty(ticketData?.packages) }}</span>
</QCardSection>
</QCard>
<QCard
class="q-pa-sm color-vn-text"
bordered
flat
style="border-color: black"
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.theoricalCost') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.totalPrice') }}:
</span>
<span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
</QCardSection>
</QCard>
</template>
</RightMenu>
<QTable
:rows="components"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
>
<template #body-cell-item="{ row }">
<QTd>
<QBtn flat color="primary">
<span class="link">{{ row.itemFk }}</span>
<ItemDescriptorProxy :id="row.itemFk" />
</QBtn>
</QTd>
</template>
<template #body-cell-description="{ row }">
<QTd>
<div class="column">
<span>{{ row.item.name }}</span>
<span class="color-vn-label">{{ row.item.subName }}</span>
<FetchedTags :item="row.item" :max-length="6" />
</div>
</QTd>
</template>
<template #body-cell-serie="{ row }">
<QTd>
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.componentType?.name }}
</span>
</div>
</QTd>
</template>
<template #body-cell-components="{ row }">
<QTd>
<div class="column">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ saleComponent.component?.name }}
</span>
</div>
</QTd>
</template>
<template #body-cell-import="{ row }">
<QTd>
<div class="column text-right">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ toCurrency(saleComponent.value, 'EUR', 3) }}
</span>
</div>
</QTd>
</template>
<template #body-cell-total="{ row }">
<QTd>
<div class="column text-right">
<span v-for="(saleComponent, index) in row.components" :key="index">
{{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
</span>
</div>
</QTd>
</template>
</QTable>
</template>

17
src/pages/Ticket/Card/TicketDescriptor.vue
View File

@ -66,6 +66,23 @@ const filter = {
fields: ['id', 'name'],
},
},
{
relation: 'zone',
scope: {
fields: [
'agencyModeFk',
'bonus',
'hour',
'id',
'isVolumetric',
'itemMaxSize',
'm3Max',
'name',
'price',
'travelingDays',
],
},
},
],
};

474
src/pages/Ticket/Card/TicketExpedition.vue Normal file
View File

@ -0,0 +1,474 @@
<script setup>
import { onMounted, ref, computed, onUnmounted, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketEditManaProxy from './TicketEditMana.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import ExpeditionNewTicket from './ExpeditionNewTicket.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toPercentage } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import { toDateTimeFormat } from 'src/filters/date';
import axios from 'axios';
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const { notify } = useNotify();
const { openConfirmationModal } = useVnConfirm();
const editPriceProxyRef = ref(null);
const newTicketDialogRef = ref(null);
const logsTableDialogRef = ref(null);
const expeditionsLogsData = ref([]);
const selectedExpeditions = ref([]);
const allColumnNames = ref([]);
const visibleColumns = ref([]);
const newTicketWithRoute = ref(false);
const itemsOptions = ref([]);
const exprBuilder = (param, value) => {
switch (param) {
case 'expeditionFk':
return { id: value };
case 'packageItemName':
return { packagingItemFk: value };
}
};
const expeditionsFilter = computed(() => ({
where: { ticketFk: route.params.id },
order: ['created DESC'],
}));
const expeditionsArrayData = useArrayData('ticketExpeditions', {
url: 'Expeditions/filter',
filter: expeditionsFilter.value,
exprBuilder: exprBuilder,
});
const expeditionsStore = expeditionsArrayData.store;
const ticketExpeditions = computed(() => expeditionsStore.data);
const ticketArrayData = useArrayData('ticketData');
const ticketStore = ticketArrayData.store;
const ticketData = computed(() => ticketStore.data);
const refetchExpeditions = async () => {
await expeditionsArrayData.applyFilter({
params: { filter: JSON.stringify(expeditionsFilter.value) },
});
};
watch(
() => route.params.id,
async () => await refetchExpeditions(),
{ immediate: true }
);
const params = reactive({});
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await expeditionsArrayData.addFilter({ params });
} catch (err) {
console.error('Error applying column filter', err);
}
};
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const columns = computed(() => [
{
label: t('expedition.id'),
name: 'id',
field: 'id',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterParamKey: 'expeditionFk',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('expedition.item'),
name: 'item',
align: 'left',
columnFilter: {
component: VnInput,
type: 'text',
filterParamKey: 'packageItemName',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('expedition.name'),
name: 'name',
field: 'packageItemName',
align: 'left',
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemsOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
},
},
{
label: t('expedition.packageType'),
name: 'packageType',
field: 'freightItemName',
align: 'left',
columnFilter: {
component: VnInput,
type: 'text',
// filterParamKey: 'expeditionFk',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('expedition.counter'),
name: 'counter',
field: 'counter',
align: 'left',
columnFilter: null,
},
{
label: t('expedition.externalId'),
name: 'externalId',
field: 'externalId',
align: 'left',
columnFilter: null,
},
{
label: t('expedition.created'),
name: 'created',
field: 'created',
align: 'left',
columnFilter: null,
format: (value) => toDateTimeFormat(value),
},
{
label: t('expedition.state'),
name: 'state',
field: 'state',
align: 'left',
columnFilter: null,
},
{
label: '',
name: 'history',
align: 'left',
columnFilter: null,
},
]);
const logTableColumns = computed(() => [
{
label: t('expedition.state'),
name: 'state',
field: 'state',
align: 'left',
sortable: true,
},
{
label: t('expedition.name'),
name: 'name',
align: 'name',
columnFilter: null,
},
{
label: t('expedition.created'),
name: 'created',
field: 'created',
align: 'left',
columnFilter: null,
format: (value) => toDateTimeFormat(value),
},
]);
const showNewTicketDialog = (withRoute = false) => {
newTicketWithRoute.value = withRoute;
newTicketDialogRef.value.show();
};
const deleteExpedition = async () => {
try {
const expeditionIds = selectedExpeditions.value.map(
(expedition) => expedition.id
);
const params = { expeditionIds };
await axios.post('Expeditions/deleteExpeditions', params);
await refetchExpeditions();
selectedExpeditions.value = [];
notify(t('expedition.expeditionRemoved'), 'positive');
} catch (error) {
console.error(error);
}
};
const showLog = async (expedition) => {
await getExpeditionState(expedition);
logsTableDialogRef.value.show();
};
const getExpeditionState = async (expedition) => {
try {
const filter = {
where: { expeditionFk: expedition.id },
order: ['created DESC'],
};
const { data } = await axios.get(`ExpeditionStates/filter`, {
params: { filter: JSON.stringify(filter) },
});
expeditionsLogsData.value = data;
} catch (error) {
console.error(error);
}
};
onMounted(async () => {
stateStore.rightDrawer = true;
const filteredColumns = columns.value.filter((col) => col.name !== 'history');
allColumnNames.value = filteredColumns.map((col) => col.name);
// await expeditionsArrayData.fetch({ append: false });
});
onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
<FetchData
url="Items"
auto-load
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
@on-fetch="(data) => (itemsOptions = data)"
/>
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="expeditionIndex"
labels-traductions-path="expedition"
@on-config-saved="visibleColumns = [...$event, 'history']"
/>
</template>
<template #st-actions>
<QBtnGroup push class="q-gutter-x-sm" flat>
<QBtnDropdown
ref="btnDropdownRef"
color="primary"
:label="t('expedition.move')"
:disable="!selectedExpeditions.length"
>
<template #label>
<QTooltip>{{ t('Select lines to see the options') }}</QTooltip>
</template>
<QList>
<QItem
clickable
v-close-popup
v-ripple
@click="showNewTicketDialog(false)"
>
<QItemSection>
<QItemLabel>{{
t('expedition.newTicketWithoutRoute')
}}</QItemLabel>
</QItemSection>
</QItem>
<QItem
clickable
v-close-popup
v-ripple
@click="showNewTicketDialog(true)"
>
<QItemSection>
<QItemLabel>{{
t('expedition.newTicketWithRoute')
}}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QBtnDropdown>
<QBtn
:disable="!selectedExpeditions.length"
icon="delete"
color="primary"
@click="
openConfirmationModal(
'',
t('expedition.removeExpeditionSubtitle'),
deleteExpedition
)
"
/>
</QBtnGroup>
</template>
</VnSubToolbar>
<QTable
:rows="ticketExpeditions"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
selection="multiple"
v-model:selected="selectedExpeditions"
:visible-columns="visibleColumns"
:no-data-label="t('globals.noResults')"
>
<template #top-row="{ cols }">
<QTr>
<QTd />
<QTd v-for="(col, index) in cols" :key="index" style="max-width: 100px">
<component
:is="col.columnFilter.component"
v-if="col.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-item="{ row }">
<QTd auto-width @click.stop>
<QBtn flat color="primary">{{ row.packagingItemFk }}</QBtn>
<ItemDescriptorProxy :id="row.packagingItemFk" />
</QTd>
</template>
<template #body-cell-available="{ row }">
<QTd @click.stop>
<QBadge :color="row.available < 0 ? 'alert' : 'transparent'" dense>
{{ row.available }}
</QBadge>
</QTd>
</template>
<template #body-cell-price="{ row }">
<QTd>
<template v-if="isTicketEditable && row.id">
<QBtn flat color="primary" dense @click="onOpenEditPricePopover(row)">
{{ toCurrency(row.price) }}
</QBtn>
<TicketEditManaProxy
ref="editPriceProxyRef"
:mana="mana"
:new-price="getNewPrice"
@save="updatePrice(row)"
>
<VnInput
v-model.number="edit.price"
:label="t('ticketSale.price')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toCurrency(row.price) }}</span>
</QTd>
</template>
<template #body-cell-discount="{ row }">
<QTd>
<template v-if="!isLocked && row.id">
<QBtn
flat
color="primary"
dense
@click="onOpenEditDiscountPopover(row)"
>
{{ toPercentage(row.discount / 100) }}
</QBtn>
<TicketEditManaProxy
:mana="mana"
:new-price="getNewPrice"
@save="changeDiscount(row)"
>
<VnInput
v-model.number="edit.discount"
:label="t('ticketSale.discount')"
type="number"
/>
</TicketEditManaProxy>
</template>
<span v-else>{{ toPercentage(row.discount / 100) }}</span>
</QTd>
</template>
<template #body-cell-history="{ row }">
<QTd>
<QBtn
@click.stop="showLog(row)"
color="primary"
icon="history"
size="md"
flat
>
<QTooltip class="text-no-wrap">
{{ t('expedition.historyAction') }}
</QTooltip>
</QBtn>
</QTd>
</template>
</QTable>
<QDialog ref="newTicketDialogRef" transition-show="scale" transition-hide="scale">
<ExpeditionNewTicket
:ticket="ticketData"
:with-route="newTicketWithRoute"
:selected-expeditions="selectedExpeditions"
/>
</QDialog>
<QDialog ref="logsTableDialogRef" transition-show="scale" transition-hide="scale">
<QTable
ref="tableRef"
data-key="TicketExpeditionLog"
:rows="expeditionsLogsData"
:columns="logTableColumns"
class="q-pa-sm"
>
<template #body-cell-name="{ row }">
<QTd auto-width>
<QBtn flat dense color="primary">{{ row.name }}</QBtn>
<WorkerDescriptorProxy :id="row.workerFk" />
</QTd>
</template>
</QTable>
</QDialog>
</template>

132
src/pages/Ticket/Card/TicketPackage.vue Normal file
View File

@ -0,0 +1,132 @@
<script setup>
import { ref, watch, computed, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CrudModel from 'components/CrudModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import { useArrayData } from 'src/composables/useArrayData';
const route = useRoute();
const { t } = useI18n();
const ticketPackagingsCrudRef = ref(null);
const listPackagingsOptions = ref([]);
const arrayData = useArrayData('TicketPackagings');
const { store } = arrayData;
const crudModelFilter = reactive({
fields: ['id', 'ticketFk', 'packagingFk', 'quantity', 'created'],
where: { ticketFk: route.params.id },
});
const crudModelRequiredData = computed(() => ({
packagingFk: null,
quantity: 0,
created: Date.vnNew(),
ticketFk: route.params.id,
}));
const handleInputQuantityClear = (row) => {
if (row.quantity === null || row.quantity === undefined) row.quantity = 0;
};
watch(
() => route.params.id,
async () => {
crudModelFilter.where.ticketFk = route.params.id;
store.filter = crudModelFilter;
await ticketPackagingsCrudRef.value.reload();
}
);
</script>
<template>
<FetchData
@on-fetch="(data) => (listPackagingsOptions = data)"
auto-load
:filter="{ fields: ['packagingFk', 'name'], order: 'name ASC', limit: 30 }"
url="Packagings/listPackaging"
/>
<div class="flex justify-center">
<CrudModel
ref="ticketPackagingsCrudRef"
data-key="TicketPackagings"
url="TicketPackagings"
model="TicketPackagings"
:filter="crudModelFilter"
:data-required="crudModelRequiredData"
:default-remove="false"
auto-load
style="max-width: 800px"
>
<template #body="{ rows, validate }">
<QCard class="q-px-lg q-py-md">
<div
v-for="(row, index) in rows"
:key="index"
class="q-mb-md row items-center q-gutter-x-md"
>
<VnSelect
:label="t('package.package')"
:options="listPackagingsOptions"
hide-selected
option-label="name"
option-value="packagingFk"
v-model="row.packagingFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.name }}
</QItemLabel>
<QItemLabel caption>
#{{ scope.opt?.itemFk }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnInput
:label="t('package.quantity')"
v-model.number="row.quantity"
class="col"
type="number"
min="1"
:required="true"
@update:model-value="handleInputQuantityClear(row)"
:rules="validate('TicketPackaging.quantity')"
/>
<VnInputDate :label="t('package.added')" v-model="row.created" />
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="ticketPackagingsCrudRef.remove([row])"
>
<QTooltip>
{{ t('package.removePackage') }}
</QTooltip>
</QIcon>
</div>
<QIcon
name="add_circle"
class="fill-icon-on-hover q-ml-md"
size="sm"
color="primary"
@click="ticketPackagingsCrudRef.insert()"
>
<QTooltip>
{{ t('package.addPackage') }}
</QTooltip>
</QIcon>
</QCard>
</template>
</CrudModel>
</div>
</template>

60
src/pages/Ticket/Card/TicketPicture.vue Normal file
View File

@ -0,0 +1,60 @@
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import CatalogItem from 'components/ui/CatalogItem.vue';
import { toCurrency } from 'filters/index';
const { t } = useI18n();
const route = useRoute();
const salesFilter = {
include: {
relation: 'item',
scope: {
field: ['name', 'image'],
},
},
where: { ticketFk: route.params.id },
};
const sales = ref([]);
</script>
<template>
<FetchData
ref="salesRef"
url="sales"
:filter="salesFilter"
@on-fetch="(data) => (sales = data)"
auto-load
/>
<div class="pictures-list">
<CatalogItem v-for="(sale, index) in sales" :key="index" :item="sale.item">
<template #price>
<div class="q-mt-md full-width row justify-between items-center">
<span class="text-h6">{{ sale.quantity }}</span>
<span>{{ t('by') }}</span>
<span class="text-h6">{{ toCurrency(sale?.price) }}</span>
</div>
</template>
</CatalogItem>
</div>
</template>
<style lang="scss" scoped>
.pictures-list {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
</style>
<i18n>
es:
by: por
</i18n>

57
src/pages/Ticket/Card/TicketSale.vue
View File

@ -515,38 +515,32 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QBtnGroup>
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<div
class="q-pa-md q-mb-md q-ma-md color-vn-text"
style="border: 2px solid black"
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<div
class="q-pa-md q-mb-md q-ma-md color-vn-text"
style="border: 2px solid black"
>
<QCardSection class="justify-center text-subtitle1" horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketSale.subtotal') }}:
</span>
<span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
</QCardSection>
<QCardSection class="justify-center text-subtitle1" horizontal>
<span class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span>
<span>{{
toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
}}</span>
</QCardSection>
<QCardSection
class="justify-center text-weight-bold text-subtitle1"
horizontal
>
<QCardSection class="justify-center text-subtitle1" horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('ticketSale.subtotal') }}:
</span>
<span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
</QCardSection>
<QCardSection class="justify-center text-subtitle1" horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('ticketSale.tax') }}:
</span>
<span>{{
toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
}}</span>
</QCardSection>
<QCardSection
class="justify-center text-weight-bold text-subtitle1"
horizontal
>
<span class="q-mr-xs color-vn-label">
{{ t('ticketSale.total') }}:
</span>
<span>{{ toCurrency(store.data?.totalWithVat) }}</span>
</QCardSection>
</div>
</template>
</RightMenu>
<span class="q-mr-xs color-vn-label"> {{ t('ticketSale.total') }}: </span>
<span>{{ toCurrency(store.data?.totalWithVat) }}</span>
</QCardSection>
</div></QDrawer
>
<QTable
:rows="sales"
:columns="columns"
@ -774,6 +768,5 @@ es:
Continue anyway?: ¿Continuar de todas formas?
You are going to delete lines of the ticket: Vas a eliminar lineas del ticket
Add item: Añadir artículo
Select lines to see the options: Selecciona líneas para ver las opciones
Transfer lines: Transferir líneas
</i18n>

1
src/pages/Ticket/Card/TicketService.vue
View File

@ -77,7 +77,6 @@ const getDefaultTaxClass = async () => {
params: { filter: JSON.stringify(filter) },
});
defaultTaxClass.value = data;
console.log('defaultTaxClass', defaultTaxClass.value);
} catch (error) {
console.error(error);
}

1
src/pages/Ticket/TicketList.vue
View File

@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { toDate, toDateString, toCurrency } from 'src/filters/index';
import TicketSummary from './Card/TicketSummary.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import TicketFilter from './TicketFilter.vue';

43
src/pages/Ticket/locale/en.yml
View File

@ -93,6 +93,25 @@ futureTickets:
moveTicketSuccess: Tickets moved successfully!
searchInfo: Search future tickets by date
futureTicket: Future tickets
expedition:
id: Expedition
item: Item
name: Name
packageType: Package type
counter: Counter
externalId: externalId
created: Created
state: State
historyAction: Status log
newTicketWithRoute: New ticket with route
newTicketWithoutRoute: New ticket without route
landed: Landed
routeId: Route id
deleteExpedition: Delete expedition
expeditionRemoved: Expedition removed
removeExpeditionSubtitle: Are you sure you want to delete this expedition?
worker: Worker
move: Move
basicData:
next: Next
back: Back
@ -159,8 +178,32 @@ service:
addService: Add service
quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
components:
item: Item
description: Description
quantity: Quantity
serie: Serie
components: Components
import: Import
total: Total
baseToCommission: Base to commission
totalWithoutVat: Total without VAT
zoneBreakdown: Zone breakdown
price: Price
bonus: Bonus
zone: Zone
volume: Volume
theoricalCost: Theorical cost
totalPrice: Total price
packages: Packages
tracking:
state: State
worker: Worker
created: Created
addState: Add state
package:
package: Package
quantity: Quantity
added: Added
addPackage: Add package
removePackage: Remove package

44
src/pages/Ticket/locale/es.yml
View File

@ -164,5 +164,49 @@ ticketSale:
shipped: F. Envío
agency: Agencia
address: Consignatario
components:
item: Artículo
description: Descripción
quantity: Cantidad
serie: Serie
components: Componentes
import: Importe
total: Total
baseToCommission: Base comisionable
totalWithoutVat: Total sin IVA
zoneBreakdown: Desglose zona
price: Precio
bonus: Bonificación
zone: Zona
volume: Volúmen
theoricalCost: Porte teórico
totalPrice: Precio total
packages: Bultos
expedition:
id: Expedición
item: Artículo
name: Nombre
packageType: Package type
counter: Contador
externalId: externalId
created: Fecha creación
state: Estado
historyAction: Historial de estados
newTicketWithRoute: Nuevo ticket con ruta
newTicketWithoutRoute: Nuevo ticket sin ruta
landed: F. entrega
routeId: Id ruta
deleteExpedition: Eliminar expedición
expeditionRemoved: Expedición eliminada
removeExpeditionSubtitle: ¿Está seguro de eliminar esta expedición?
worker: Trabajador
move: Mover
package:
package: Embalaje
quantity: Cantidad
added: Añadido
addPackage: Añadir embalaje
removePackage: Quitar embalaje
Search ticket: Buscar tickets
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
Select lines to see the options: Selecciona líneas para ver las opciones

1
src/pages/Travel/Card/TravelDescriptor.vue
View File

@ -65,7 +65,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
:subtitle="data.subtitle"
:filter="filter"
data-key="travelData"
:summary="$attrs"
@on-fetch="setData"
>
<template #menu="{ entity }">

6
src/pages/Travel/TravelList.vue
View File

@ -71,6 +71,7 @@ const columns = computed(() => [
url: 'agencyModes',
fields: ['id', 'name'],
},
format: (row) => row.agencyModeName,
columnField: {
component: null,
},
@ -112,7 +113,10 @@ const columns = computed(() => [
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
optionLabel: 'name',
optionValue: 'id',
},
format: (row) => row.warehouseInName,
columnField: {
component: null,
},
@ -129,6 +133,7 @@ const columns = computed(() => [
url: 'warehouses',
fields: ['id', 'name'],
},
format: (row) => row.warehouseOutName,
columnField: {
component: null,
},
@ -196,7 +201,6 @@ const columns = computed(() => [
default-mode="table"
auto-load
redirect="travel"
:right-search="false"
:is-editable="false"
:use-model="true"
/>

2
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -71,7 +71,7 @@ watch(
const data = ref(useCardDescription());
const setData = (entity) => {
if (!entity) return;
data.value = useCardDescription(entity.user.nickname, entity.id);
data.value = useCardDescription(entity.user?.nickname, entity.id);
};
const openChangePasswordForm = () => changePasswordFormDialog.value.show();

2
src/router/modules/invoiceOut.js
View File

@ -35,7 +35,7 @@ export default {
name: 'InvoiceOutGlobal',
meta: {
title: 'globalInvoicing',
icon: 'contact_support',
icon: 'Date_Range',
},
component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
},

2
src/router/modules/order.js
View File

@ -37,7 +37,7 @@ export default {
title: 'orderCreate',
icon: 'add',
},
component: () => import('src/pages/Order/Card/OrderForm.vue'),
component: () => import('src/pages/Order/OrderList.vue'),
},
],
},

108
src/router/modules/ticket.js
View File

@ -14,15 +14,19 @@ export default {
main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
card: [
'TicketBasicData',
'TicketBoxing',
'TicketSms',
'TicketPurchaseRequest',
'TicketSale',
'TicketLog',
'TicketPurchaseRequest',
'TicketExpedition',
'TicketService',
'TicketTracking',
'TicketVolume',
'TicketNotes',
'TicketTracking',
'TicketBoxing',
'TicketSms',
'TicketPicture',
'TicketComponents',
'TicketPackage',
],
},
children: [
@ -70,8 +74,8 @@ export default {
component: () => import('src/pages/Ticket/TicketFuture.vue'),
},
{
path: 'advance',
name: 'TicketAdvance',
path: 'advance',
meta: {
title: 'ticketAdvance',
icon: 'keyboard_double_arrow_left',
@ -142,12 +146,76 @@ export default {
},
component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
},
{
path: 'observation',
name: 'TicketNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
},
{
path: 'picture',
name: 'TicketPicture',
meta: {
title: 'pictures',
icon: 'vn:photo',
},
component: () => import('src/pages/Ticket/Card/TicketPicture.vue'),
},
{
path: 'volume',
name: 'TicketVolume',
meta: {
title: 'volume',
icon: 'vn:volume',
},
component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
},
{
path: 'expedition',
name: 'TicketExpedition',
meta: {
title: 'expedition',
icon: 'vn:package',
},
component: () => import('src/pages/Ticket/Card/TicketExpedition.vue'),
},
{
path: 'service',
name: 'TicketService',
meta: {
title: 'services',
icon: 'vn:services',
},
component: () => import('src/pages/Ticket/Card/TicketService.vue'),
},
{
path: 'package',
name: 'TicketPackage',
meta: {
title: 'packages',
icon: 'vn:bucket',
},
component: () => import('src/pages/Ticket/Card/TicketPackage.vue'),
},
{
path: 'components',
name: 'TicketComponents',
meta: {
title: 'components',
icon: 'vn:components',
},
component: () => import('src/pages/Ticket/Card/TicketComponents.vue'),
},
{
path: 'boxing',
name: 'TicketBoxing',
meta: {
title: 'boxing',
icon: 'vn:package',
icon: 'science',
},
component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
},
@ -160,34 +228,6 @@ export default {
},
component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
},
{
path: 'service',
name: 'TicketService',
meta: {
title: 'services',
icon: 'vn:services',
},
component: () => import('src/pages/Ticket/Card/TicketService.vue'),
},
{
path: 'volume',
name: 'TicketVolume',
meta: {
title: 'volume',
icon: 'vn:volume',
},
component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
},
{
path: 'observation',
name: 'TicketNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
},
],
},
],

2
src/stores/invoiceOutGlobal.js
View File

@ -237,7 +237,7 @@ export const useInvoiceOutGlobalStore = defineStore({
async getNegativeBasesCsv() {
try {
const arrayData = useArrayData('InvoiceOutNegative');
const params = arrayData.store.currentFilter;
const params = arrayData.store.userParams;
const { data } = await axios.get('InvoiceOuts/negativeBasesCsv', {
params,

51
src/stores/useArrayDataStore.js
View File

@ -3,37 +3,56 @@ import { defineStore } from 'pinia';
export const useArrayDataStore = defineStore('arrayDataStore', () => {
const state = ref({});
const defaultOpts = {
filter: {},
userFilter: {},
userParams: {},
url: '',
limit: 10,
skip: 0,
order: '',
isLoading: false,
userParamsChanged: false,
exprBuilder: null,
searchUrl: 'params',
navigate: null,
page: 1,
};
function get(key) {
return state.value[key];
}
function set(key) {
state.value[key] = {
filter: {},
userFilter: {},
userParams: {},
url: '',
limit: 10,
skip: 0,
order: '',
data: ref(),
isLoading: false,
userParamsChanged: false,
exprBuilder: null,
searchUrl: 'params',
navigate: null,
page: 1,
};
state.value[key] = getDefaultState();
}
function clear(key) {
delete state.value[key];
}
function reset(key, opts = []) {
if (!opts.length) state.value[key] = getDefaultState();
else
opts.forEach((opt) => {
if (opt.includes('.')) {
const [parent, child] = opt.split('.');
state.value[key][parent][child] = defaultOpts[child];
} else if (Object.hasOwn(state.value[key], opt))
state.value[key][opt] = defaultOpts[opt];
});
}
function getDefaultState() {
return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
data: ref(),
});
}
return {
get,
set,
clear,
reset,
};
});

2
test/cypress/integration/entry/entryDms.spec.js
View File

@ -1,4 +1,4 @@
describe('WagonTypeCreate', () => {
describe('EntryDms', () => {
const entryId = 1;
beforeEach(() => {

6
test/cypress/integration/entry/myEntry.spec.js
View File

@ -1,7 +1,7 @@
describe('WagonTypeCreate', () => {
describe('EntryMy when is supplier', () => {
beforeEach(() => {
cy.viewport(1920, 1080);
cy.login('customer');
cy.login('supplier');
cy.visit(`/#/entry/my`, {
onBeforeLoad(win) {
cy.stub(win, 'open');
@ -10,7 +10,7 @@ describe('WagonTypeCreate', () => {
cy.waitForElement('.q-page', 6000);
});
it('should create edit and remove new dms', () => {
it('should open buyLabel when is supplier', () => {
cy.get(
'[to="/null/2"] > .q-card > .column > .q-btn > .q-btn__content > .q-icon'
).click();

3
test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
View File

@ -8,7 +8,8 @@ describe('InvoiceInCorrective', () => {
it('should create a correcting invoice', () => {
cy.viewport(1280, 720);
cy.login('developer');
cy.visit(`/#/invoice-in/1/summary?limit=10`);
cy.visit(`/#/invoice-in/1/summary`);
cy.waitForElement('.q-page');
cy.openActionsDescriptor();

1
test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
View File

@ -7,6 +7,7 @@ describe('InvoiceInDescriptor', () => {
cy.viewport(1280, 720);
cy.login('developer');
cy.visit('/#/invoice-in/1/summary');
cy.waitForElement('.q-page');
cy.openActionsDescriptor();
cy.get(firstDescritorOpt).click();

39
test/cypress/integration/logout.spec.js Normal file
View File

@ -0,0 +1,39 @@
/// <reference types="cypress" />
describe('Logout', () => {
beforeEach(() => {
cy.login('developer');
cy.visit(`/#/dashboard`);
cy.waitForElement('.q-page', 6000);
});
describe('by user', () => {
it('should logout', () => {
cy.get(
'#user > .q-btn__content > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
).click();
cy.get('.block').click();
});
});
describe('not user', () => {
beforeEach(() => {
cy.intercept('GET', '**/VnUsers/acl', {
statusCode: 401,
body: {
error: {
statusCode: 401,
name: 'Error',
message: 'Authorization Required',
code: 'AUTHORIZATION_REQUIRED',
},
},
statusMessage: 'AUTHORIZATION_REQUIRED',
}).as('someRoute');
});
it('when token not exists', () => {
cy.reload();
cy.get('.q-notification__message').should(
'have.text',
'Authorization Required'
);
});
});
});

2
test/cypress/support/commands.js
View File

@ -239,5 +239,5 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
});
Cypress.Commands.add('openActionsDescriptor', () => {
cy.get('.descriptor > .header > .q-btn').click();
cy.get('.header > :nth-child(3) > .q-btn__content > .q-icon').click();
});

1
test/vitest/__tests__/composables/useSession.spec.js
View File

@ -55,6 +55,7 @@ describe('session', () => {
expect(user.value).toEqual(previousUser);
vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
vi.spyOn(axios, 'get').mockResolvedValue({ data: true });
await session.destroy();
user = state.getUser();