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

Merge branch 'dev' into 5926_pda_worker_docuware

This commit is contained in:
Javier Segarra 2024-07-12 23:02:30 +02:00
parent ef1316d5b0 9494a30ddd
commit 4faf1335ee
58 changed files with 1406 additions and 982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
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,
},
@ -139,14 +139,11 @@ 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' } : ''"
v-if="showFilter"
class="full-width"
:class="alignRow()"
style="max-height: 45px; overflow: hidden"
>
{{ column?.label }}
</div>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<VnTableColumn
:column="$props.column"
default="input"

95
src/components/VnTable/VnOrder.vue Normal file
View File

@ -0,0 +1,95 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const model = defineModel({ type: Object, required: true });
const $props = defineProps({
name: {
type: String,
default: '',
},
label: {
type: String,
default: undefined,
},
dataKey: {
type: String,
required: true,
},
searchUrl: {
type: String,
default: 'params',
},
vertical: {
type: Boolean,
default: false,
},
});
const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
async function orderBy(name, direction) {
if (!name) return;
switch (direction) {
case 'DESC':
direction = undefined;
break;
case undefined:
direction = 'ASC';
break;
case 'ASC':
direction = 'DESC';
break;
}
if (!direction) return await arrayData.deleteOrder(name);
await arrayData.addOrder(name, direction);
}
defineExpose({ orderBy });
</script>
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
@click="orderBy(name, model?.direction)"
class="row items-center no-wrap cursor-pointer"
>
<span :title="label">{{ label }}</span>
<QChip
v-if="name"
:label="!vertical && model?.index"
:icon="
(model?.index || hover) && !vertical
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: undefined
"
:size="vertical ? '' : 'sm'"
:class="[
model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '',
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 40px"
>
<div
class="column flex-center"
v-if="vertical"
:style="!model?.index && 'color: #5d5d5d'"
>
{{ model?.index }}
<QIcon
:name="
model?.index
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: 'swap_vert'
"
size="xs"
/>
</div>
</QChip>
</div>
</template>

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

@ -13,7 +13,8 @@ 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';
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
const $props = defineProps({
columns: {
@ -22,7 +23,7 @@ const $props = defineProps({
},
defaultMode: {
type: String,
default: 'card', // 'table', 'card'
default: 'table', // 'table', 'card'
},
columnSearch: {
type: Boolean,
@ -68,6 +69,10 @@ const $props = defineProps({
type: Object,
default: () => ({ card: false, table: false }),
},
withoutHeader: {
type: Boolean,
default: false,
},
tableCode: {
type: String,
default: null,
@ -89,9 +94,11 @@ const mode = ref(DEFAULT_MODE);
const selected = ref([]);
const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
const orders = ref(parseOrder(routeQuery.filter?.order));
const CrudModelRef = ref({});
const showForm = ref(false);
const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkiped = ref();
const tableModes = [
{
icon: 'view_column',
@ -111,6 +118,12 @@ onMounted(() => {
mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
stateStore.rightDrawer = true;
setUserParams(route.query[$props.searchUrl]);
columnsVisibilitySkiped.value = [
...splittedColumns.value.columns
.filter((c) => c.visible == false)
.map((c) => c.name),
...['tableActions'],
];
});
watch(
@ -136,10 +149,15 @@ function setUserParams(watchedParams) {
if (!watchedParams) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
const where = JSON.parse(watchedParams?.filter)?.where;
const filter = JSON.parse(watchedParams?.filter);
const where = filter?.where;
const order = filter?.order;
watchedParams = { ...watchedParams, ...where };
delete watchedParams.filter;
delete params.value?.filter;
params.value = { ...params.value, ...watchedParams };
orders.value = parseOrder(order);
}
function splitColumns(columns) {
@ -147,7 +165,7 @@ function splitColumns(columns) {
columns: [],
chips: [],
create: [],
visible: [],
cardVisible: [],
};
for (const col of columns) {
@ -155,7 +173,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);
@ -171,6 +189,7 @@ function splitColumns(columns) {
label: t('status'),
name: 'tableStatus',
columnFilter: false,
orderBy: false,
});
}
}
@ -199,6 +218,17 @@ function getColAlign(col) {
return 'text-' + (col.align ?? 'left');
}
function parseOrder(urlOrders) {
const orderObject = {};
if (!urlOrders) return orderObject;
if (typeof urlOrders == 'string') urlOrders = [urlOrders];
for (const [index, orders] of urlOrders.entries()) {
const [name, direction] = orders.split(' ');
orderObject[name] = { direction, index: index + 1 };
}
return orderObject;
}
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
defineExpose({
reload,
@ -221,22 +251,34 @@ defineExpose({
v-model="params"
:disable-submit-event="true"
:search-url="searchUrl"
:redirect="!!redirect"
>
<template #body>
<div
class="row no-wrap flex-center"
v-for="col of splittedColumns.columns"
:key="col.id"
>
<VnTableFilter
:column="col"
:data-key="$attrs['data-key']"
v-for="col of splittedColumns.columns"
:key="col.id"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
</template>
<VnTableOrder
v-model="orders[col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
/>
</div>
<slot
name="moreFilterPanel"
:params="params"
:columns="splittedColumns.columns"
/>
</template>
</VnFilterPanel>
</QScrollArea>
</QDrawer>
@ -279,15 +321,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>
<TableVisibleColumns
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
class="q-mr-md"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
@ -297,6 +339,7 @@ defineExpose({
:options="tableModes"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
title="asd"
class="bg-vn-section-color q-ml-md"
@ -305,18 +348,33 @@ defineExpose({
/>
</template>
<template #header-cell="{ col }">
<QTh
auto-width
style="min-width: 100px"
v-if="$props.columnSearch && col.visible"
<QTh v-if="col.visible ?? true" auto-width>
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
style="height: 75px"
>
<div
class="row items-center no-wrap"
style="height: 30px"
>
<VnTableOrder
v-model="orders[col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
</div>
</QTh>
</template>
<template #header-cell-tableActions>
@ -339,8 +397,8 @@ defineExpose({
<QTd
auto-width
class="no-margin q-px-xs"
:class="getColAlign(col)"
v-if="col.visible"
:class="[getColAlign(col), col.class, col.columnField?.class]"
v-if="col.visible ?? true"
>
<slot :name="`column-${col.name}`" :col="col" :row="row">
<VnTableColumn
@ -429,7 +487,7 @@ defineExpose({
:class="$props.cardClass"
>
<div
v-for="col of splittedColumns.visible"
v-for="col of splittedColumns.cardVisible"
:key="col.name"
class="fields"
>
@ -543,6 +601,10 @@ es:
color: var(--vn-text-color);
}
.color-vn-text {
color: var(--vn-text-color);
}
.q-table--dark .q-table__bottom,
.q-table--dark thead,
.q-table--dark tr,

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

@ -12,6 +12,10 @@ const $props = defineProps({
type: String,
default: '',
},
skip: {
type: Array,
default: () => [],
},
});
const { notify } = useNotify();
@ -30,8 +34,12 @@ function setUserConfigViewData(data, isLocal) {
if (!data) return;
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
if (!isLocal) localColumns.value = [];
// Array to Object
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
for (let column of columns.value) {
const { label, name } = column;
if (skippeds[name]) continue;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
}
@ -127,7 +135,7 @@ onMounted(async () => {
});
</script>
<template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md" dense>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">

13
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;
}

9
src/components/ui/CatalogItem.vue
View File

@ -52,6 +52,10 @@ const dialog = ref(null);
:value="item?.[`value${index + 4}`]"
/>
</template>
<div v-if="item.minQuantity" class="min-quantity">
<QIcon name="production_quantity_limits" size="xs" />
{{ item.minQuantity }}
</div>
<div class="footer">
<div class="price">
<p v-if="isCatalog">
@ -133,6 +137,11 @@ const dialog = ref(null);
}
}
.min-quantity {
text-align: right;
color: $negative !important;
}
.footer {
.price {
overflow: hidden;

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

@ -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,

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

@ -1,5 +1,5 @@
<script setup>
import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();

47
src/composables/useArrayData.js
View File

@ -24,10 +24,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const searchUrl = store.searchUrl;
if (query[searchUrl]) {
const params = JSON.parse(query[searchUrl]);
const filter = params?.filter;
const filter = params?.filter && JSON.parse(params?.filter ?? '{}');
delete params.filter;
store.userParams = { ...params, ...store.userParams };
store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
store.userFilter = { ...filter, ...store.userFilter };
if (filter.order) store.order = filter.order;
}
});
@ -69,7 +70,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
canceller = new AbortController();
const filter = {
order: store.order,
limit: store.limit,
};
@ -94,6 +94,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
Object.assign(params, userParams);
params.filter.skip = store.skip;
if (store.order && store.order.length) params.filter.order = store.order;
else delete params.filter.order;
params.filter = JSON.stringify(params.filter);
store.currentFilter = params;
@ -147,7 +149,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.filter = {};
if (params) store.userParams = { ...params };
const response = await fetch({ append: false });
const response = await fetch({});
return response;
}
@ -160,7 +162,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.userParams = userParams;
arrayDataStore.reset(['skip', 'filter.skip', 'page']);
await fetch({ append: false });
await fetch({});
return { filter, params };
}
@ -171,6 +173,37 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
await addFilter({ filter: { where } });
}
async function addOrder(field, direction = 'ASC') {
const newOrder = field + ' ' + direction;
let order = store.order || [];
if (typeof order == 'string') order = [order];
let index = order.findIndex((o) => o.split(' ')[0] === field);
if (index > -1) {
order[index] = newOrder;
} else {
index = order.length;
order.push(newOrder);
}
store.order = order;
fetch({});
index++;
return { index, order };
}
async function deleteOrder(field) {
let order = store.order ?? [];
if (typeof order == 'string') order = [order];
const index = order.findIndex((o) => o.split(' ')[0] === field);
if (index > -1) order.splice(index, 1);
store.order = order;
fetch({});
}
function sanitizerParams(params, exprBuilder) {
for (const param in params) {
if (params[param] === '' || params[param] === null) {
@ -198,7 +231,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
async function refresh() {
if (Object.values(store.userParams).length) await fetch({ append: false });
if (Object.values(store.userParams).length) await fetch({});
}
function updateStateParams() {
@ -240,6 +273,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
applyFilter,
addFilter,
addFilterWhere,
addOrder,
deleteOrder,
refresh,
destroy,
loadMore,

23
src/css/app.scss
View File

@ -229,3 +229,26 @@ input::-webkit-inner-spin-button {
*::-webkit-scrollbar-track {
background: transparent;
}
.q-table {
thead,
tbody {
th {
.q-select {
max-width: 120px;
}
}
td {
padding: 1px 10px 1px 10px;
max-width: 100px;
div span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.expand {
max-width: 400px;
}
}
}

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

@ -631,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

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

@ -636,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">

207
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 };
@ -200,7 +211,7 @@ async function changeState(value) {
>
<QList>
<QVirtualScroll
style="max-height: 300px"
class="max-container-height"
:items="ClaimStates"
separator
v-slot="{ item, index }"
@ -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,27 +270,63 @@ 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"
style="max-height: 300px"
class="max-container-height"
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<VnTitle
:url="`#/claim/${entityId}/lines`"
:text="t('claim.summary.details')"
<QCard class="vn-two" v-if="claimDms?.length">
<VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
<div class="container max-container-height" style="overflow: auto">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard
class="multimedia relative-position"
style="max-height: 128px"
>
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
@ -320,53 +364,8 @@ async function changeState(value) {
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<VnTitle
:url="claimUrl + 'development'"
:text="t('claim.summary.development')"
/>
<QCard class="vn-max" v-if="developments.length > 0">
<VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
<QTable
:columns="developmentColumns"
:rows="developments"
@ -382,27 +381,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"
@ -458,7 +461,7 @@ async function changeState(value) {
gap: 15px;
}
.multimedia-container {
flex: 1 0 21%;
flex: 0 0 128px;
}
.multimedia {
transition: all 0.5s;
@ -491,4 +494,8 @@ async function changeState(value) {
.change-state {
width: 10%;
}
.max-container-height {
max-height: 300px;
}
</style>

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

@ -0,0 +1,97 @@
<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"
: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>

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

@ -16,19 +16,14 @@ const props = defineProps({
},
});
const workers = ref();
const states = ref();
const states = ref([]);
defineExpose({ states });
</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 +31,110 @@ const states = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QItem class="q-my-sm">
<QItemSection>
<div class="q-pa-sm q-gutter-y-sm">
<VnInput
:label="t('Customer ID')"
:label="t('claim.customerId')"
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>
<template #prepend> <QIcon name="badge" size="xs" /></template>
</VnInput>
<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"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
:use-like="false"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
option-filter="firstName"
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')"
:label="t('claim.attendedBy')"
v-model="params.attenderFk"
@update:model-value="searchFn()"
:options="workers"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
:use-like="false"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
option-filter="firstName"
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')"
:label="t('claim.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
@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>
</QExpansionItem>
</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>
@ -202,6 +151,7 @@ en:
claimStateFk: State
created: Created
myTeam: My team
itemFk: Item
es:
params:
search: Contiene
@ -212,14 +162,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>

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

@ -1,38 +1,113 @@
<script setup>
import { ref, 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 claimFilterRef = ref();
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,
visible: false,
},
{
align: 'left',
label: t('claim.customer'),
name: 'clientFk',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
label: t('claim.attendedBy'),
name: 'attendedBy',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
},
{
align: 'left',
label: t('claim.created'),
name: 'created',
format: ({ created }) => toDate(created),
cardVisible: true,
columnFilter: {
component: 'date',
},
},
{
align: 'left',
label: t('claim.state'),
name: 'stateCode',
chip: {
condition: () => true,
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
},
columnFilter: {
name: 'claimStateFk',
component: 'select',
attrs: {
options: claimFilterRef.value?.states,
optionLabel: 'description',
},
},
},
{
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>
@ -43,85 +118,39 @@ function navigate(event, id) {
/>
<RightMenu>
<template #right-panel>
<ClaimFilter data-key="ClaimList" />
<ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
<VnTable
data-key="ClaimList"
url="Claims/filter"
:order="['priority ASC', 'created DESC']"
:columns="columns"
redirect="claim"
:right-search="false"
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>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnLv>
<VnLv :label="t('claim.list.assignedTo')">
<template #value>
<template #column-attendedBy="{ row }">
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
<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>
</template>
<i18n>
es:
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
params:
stateCode: Estado
en:
params:
stateCode: State
</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>

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

@ -42,6 +42,9 @@ const columns = computed(() => [
name: 'name',
isTitle: true,
create: true,
columnField: {
class: 'expand',
},
},
{
align: 'left',
@ -49,6 +52,9 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.socialName'),
isTitle: true,
create: true,
columnField: {
class: 'expand',
},
},
{
align: 'left',
@ -78,8 +84,8 @@ const columns = computed(() => [
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
component: 'number',
columnFilter: {
component: 'number',
inWhere: true,
},
},
@ -87,8 +93,8 @@ const columns = computed(() => [
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
component: 'number',
columnFilter: {
component: 'number',
inWhere: true,
},
},
@ -130,6 +136,9 @@ const columns = computed(() => [
columnFilter: {
inWhere: true,
},
columnField: {
class: 'expand',
},
},
{
align: 'left',
@ -179,8 +188,8 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: ({ created }) => toDate(created),
component: 'date',
columnFilter: {
component: 'date',
alias: 'c',
inWhere: true,
},
@ -405,7 +414,6 @@ function handleLocation(data, location) {
}"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="customer"
auto-load
>

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'));

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

@ -191,7 +191,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
order="id DESC"
:columns="columns"
redirect="entry"
default-mode="table"
auto-load
:right-search="false"
/>

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

@ -199,7 +199,6 @@ onMounted(async () => {
order="id DESC"
:columns="columns"
redirect="entry"
default-mode="table"
auto-load
:right-search="false"
/>

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

@ -207,7 +207,6 @@ watchEffect(selectedRows);
v-model:selected="selectedRows"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="invoice-out"
auto-load
:table="{

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

@ -164,7 +164,6 @@ const downloadCSV = async () => {
"
:limit="0"
:columns="columns"
default-mode="table"
auto-load
:is-editable="false"
:use-model="true"

70
src/pages/Item/Card/ItemDiary.vue
View File

@ -5,7 +5,9 @@ import { useRoute } from 'vue-router';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import OrderDescriptorProxy from 'src/pages/Order/Card/OrderDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
@ -45,8 +47,8 @@ const columns = computed(() => [
align: 'left',
},
{
label: t('itemDiary.id'),
name: 'id',
label: t('itemDiary.origin'),
name: 'originId',
align: 'left',
},
{
@ -65,8 +67,8 @@ const columns = computed(() => [
},
{
label: t('itemDiary.client'),
name: 'client',
label: t('itemDiary.entity'),
name: 'entityId',
align: 'left',
format: (val) => dashIfEmpty(val),
},
@ -111,10 +113,28 @@ const getBadgeAttrs = (_date) => {
return attrs;
};
const getIdDescriptor = (row) => {
let descriptor = EntryDescriptorProxy;
if (row.isTicket) descriptor = TicketDescriptorProxy;
return descriptor;
const originTypeMap = {
entry: {
descriptor: EntryDescriptorProxy,
icon: 'vn:entry',
},
ticket: {
descriptor: TicketDescriptorProxy,
icon: 'vn:ticket',
},
order: {
descriptor: OrderDescriptorProxy,
icon: 'vn:basket',
},
};
const entityTypeMap = {
client: {
descriptor: CustomerDescriptorProxy,
},
supplier: {
descriptor: SupplierDescriptorProxy,
},
};
onMounted(async () => {
@ -206,21 +226,28 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QBadge>
</QTd>
</template>
<template #body-cell-id="{ row }">
<template #body-cell-originId="{ row }">
<QTd @click.stop>
<component
:is="getIdDescriptor(row)"
:id="row.origin"
:is="originTypeMap[row.originType]?.descriptor"
:id="row.originId"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ row.origin }}
{{ row.originId }}
</component>
<span class="link">{{ row.origin }}</span>
<span class="link">
<QIcon
:name="originTypeMap[row.originType]?.icon"
class="fill-icon q-mr-sm"
size="xs"
/>
{{ row.originId }}
</span>
</QTd>
</template>
<template #body-cell-client="{ row }">
<template #body-cell-entityId="{ row }">
<QTd @click.stop>
<QBadge
:color="row.highlighted ? 'warning' : 'transparent'"
@ -228,11 +255,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
dense
style="font-size: 14px"
>
<span v-if="row.isTicket" class="link">
{{ dashIfEmpty(row.name) }}
<CustomerDescriptorProxy :id="row.clientFk" />
<component
:is="entityTypeMap[row.entityType]?.descriptor"
:id="row.entityId"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ row.entityId }}
</component>
<span class="link">
{{ dashIfEmpty(row.entityName) }}
</span>
<span v-else>{{ dashIfEmpty(row.name) }}</span>
</QBadge>
</QTd>
</template>

4
src/pages/Item/Card/ItemSummary.vue
View File

@ -135,10 +135,6 @@ const isAdministrative = computed(() => {
:label="t('item.summary.nonRecycledPlastic')"
:value="item.nonRecycledPlastic"
/>
<VnLv
:label="t('item.summary.minSalesQuantity')"
:value="item.minQuantity"
/>
</QCard>
<QCard class="vn-one">
<component

4
src/pages/Item/locale/en.yml
View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: Are you sure you want to continue?
itemDiary:
date: Date
id: Id
origin: Origin
state: State
reference: Reference
client: Client
entity: Entity
in: In
out: Out
balance: Balance

4
src/pages/Item/locale/es.yml
View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: ¿Seguro que quieres continuar?
itemDiary:
date: Fecha
id: Id
origin: Origen
state: Estado
reference: Referencia
client: Cliente
entity: Entidad
in: Entrada
out: Salida
balance: Balance

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>

17
src/pages/Order/Card/OrderDescriptorProxy.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import OrderDescriptor from './OrderDescriptor.vue';
import OrderSummary from './OrderSummary.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
</script>
<template>
<QPopupProxy>
<OrderDescriptor v-if="$props.id" :id="$props.id" :summary="OrderSummary" />
</QPopupProxy>
</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">
{{

349
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,61 @@ const detailsColumns = ref([
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QPage :key="componentKey" class="column items-center q-pa-md">
<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>
<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')"
:label="t('subtotal') + ': '"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT')"
:label="t('VAT') + ': '"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total')"
:label="t('total') + ': '"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
</QDrawer>
<VnPaginate
<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>
<VnTable
ref="tableLinesRef"
data-key="OrderLines"
url="OrderRows"
:limit="20"
:columns="columns"
: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>
<template #column-image="{ row }">
<div class="image-wrapper">
<VnImg :id="value" class="rounded" />
<VnImg :id="parseInt(row?.item?.image)" 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-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>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<FetchedTags :item="row?.item" :max-length="6" />
</template>
</VnTable>
</div>
<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 +279,8 @@ const detailsColumns = ref([
</QPageSticky>
</QPage>
</template>
<style lang="scss">
<style lang="scss" scoped>
.order-lines-summary {
.vn-label-value {
display: flex;
@ -274,8 +301,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 +316,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 +328,7 @@ const detailsColumns = ref([
color: var(--vn-label-color);
}
</style>
<i18n>
en:
summary: Summary

267
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,52 @@ function navigate(id) {
:label="t('Search order')"
:info="t('You can search orders by reference')"
/>
<RightMenu>
<template #right-panel>
<OrderFilter data-key="OrderList" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
<VnTable
ref="tableRef"
data-key="OrderList"
url="Orders/filter"
:limit="20"
:order="['landed DESC', 'clientFk', 'id DESC']"
:user-params="{ showEmpty: false }"
:keep-opts="['userParams']"
:create="{
urlCreate: 'Orders/new',
title: 'Create Order',
onDataSaved: (url) => {
tableRef.redirect(url);
},
formInitialData: {
active: true,
addressId: null,
},
}"
:columns="columns"
redirect="order"
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"
<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)"
/>
<VnLv
:label="t('order.field.created')"
:value="toDate(row?.created)"
<VnSelect
url="Clients"
v-model="selectedAddress"
:label="t('module.address')"
:options="selectedAddress"
option-value="defaultAddressFk"
option-label="street"
/>
<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)"
<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>
<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

1
src/pages/Route/Agency/AgencyList.vue
View File

@ -78,6 +78,7 @@ const columns = computed(() => [
:columns="columns"
:right-search="false"
:use-model="true"
default-mode="card"
/>
</template>
<i18n>

1
src/pages/Route/Cmr/CmrList.vue
View File

@ -117,6 +117,7 @@ function downloadPdfs() {
:columns="columns"
:right-search="true"
:use-model="true"
default-mode="card"
/>
</template>
<style lang="scss" scoped>

1
src/pages/Route/RouteList.vue
View File

@ -237,7 +237,6 @@ const openTicketsDialog = (id) => {
url="Routes/filter"
:columns="columns"
:right-search="true"
default-mode="table"
:is-editable="true"
:create="{
urlCreate: 'Routes',

2
src/pages/Supplier/Card/SupplierSummary.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, computed, onUpdated } from 'vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';

1
src/pages/Supplier/SupplierList.vue
View File

@ -99,7 +99,6 @@ const columns = computed(() => [
}"
order="id ASC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:use-model="true"

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

@ -515,8 +515,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QBtnGroup>
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<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"
@ -528,9 +527,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
<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 class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span>
<span>{{
toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
}}</span>
@ -539,14 +536,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
class="justify-center text-weight-bold text-subtitle1"
horizontal
>
<span class="q-mr-xs color-vn-label">
{{ t('ticketSale.total') }}:
</span>
<span class="q-mr-xs color-vn-label"> {{ t('ticketSale.total') }}: </span>
<span>{{ toCurrency(store.data?.totalWithVat) }}</span>
</QCardSection>
</div>
</template>
</RightMenu>
</div></QDrawer
>
<QTable
:rows="sales"
:columns="columns"

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

@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();

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

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

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

@ -198,7 +198,6 @@ const columns = computed(() => [
}"
order="landed DESC"
:columns="columns"
default-mode="table"
auto-load
redirect="travel"
:is-editable="false"

1
src/pages/Worker/Card/WorkerBalance.vue
View File

@ -77,7 +77,6 @@ const columns = computed(() => [
}"
order="paymentDate DESC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:is-editable="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();

1
src/pages/Worker/Card/WorkerFormation.vue
View File

@ -116,7 +116,6 @@ const columns = computed(() => [
}"
order="id DESC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:is-editable="true"

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'),
},
],
},

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

2
test/vitest/__tests__/composables/useArrayData.spec.js
View File

@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
import * as vueRouter from 'vue-router';
describe('useArrayData', () => {
const filter = '{"order":"","limit":10,"skip":0}';
const filter = '{"limit":10,"skip":0}';
const params = { supplierFk: 2 };
beforeEach(() => {
vi.spyOn(useRouter(), 'replace');