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

#7354 end Zone migration #539

Merged
jon merged 58 commits from 7354_ZoneMigration_End into dev 2024-09-03 04:48:18 +00:00
Conversation 4 Commits 58 Files Changed 28 +3108 -2176
86 changed files with 3108 additions and 2176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4495223735 - Show all commits

2
.vscode/settings.json vendored
View File

@ -14,5 +14,5 @@
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cSpell.words": ["axios"]
"cSpell.words": ["axios", "composables"]
}

166
CHANGELOG.md
View File

@ -1,3 +1,169 @@
# Version 24.28 - 2024-07-09
### Added 🆕
- Change header titles style by:wbuezas
- chore: refs #7436 fix e2e (origin/7436-showQCheckbox) by:jorgep
- feat: #7196 eslint (origin/7196-cjsToEsm) by:jgallego
- feat: adapt tu VnTable → CrudModel by:alexm
- feat(CustomerFIlter): use correct table by:alexm
- feat(customerList): add searchbar by:alexm
- feat: customerList is customerExtendedList by:alexm
- feat: fixes #7196 by:jgallego
- feat: refs #6739 transferInvoice new checkbox and functionality by:Jon
- feat: refs #6825 create vnTable and add in CustomerExtendedList by:alexm
- feat: refs #6825 create vnTableColumn, cardActions by:alexm
- feat: refs #6825 fix modes by:alexm
- feat: refs #6825 qchip color by:alexm
- feat: refs #6825 right filter panel (6825-vnTable) by:alexm
- feat: refs #6825 scroll for table mode by:alexm
- feat: refs #6825 share filters, create popup by:alexm
- feat: refs #6825 VnComponent mix component and attrs Form to create new row by:alexm
- feat: refs #6825 VnTableFilter and VnPanelFilter init by:alexm
- feat: refs #6826 added rol summary link by:Jon
- feat: refs #6896 created VnImg and added to order module by:Jon
- feat: refs #6896 new filters by:Jon
- feat: refs #7129 fix some code and add order by:pablone
- feat: refs #7436 show checkbox by:jorgep
- feat: refs #7545 Deleted hasIncoterms client column (origin/7545-hasIncoterms) by:guillermo
- feat(TicketService): use correct format by:alexm
- feat(url): sepate filters by:alexm
- feat(VnFilter): merge objects by:alexm
- feat(VnTable): is-editable and use-model. fix: checkbox by:alexm
- feat(VnTable): refs #6825 actions sticky by:alexm
- feat(VnTable): refs #6825 addInWhere by:alexm
- feat(VnTable): refs #6825 dinamic columns by:alexm
- feat(VnTable): refs #6825 execute function when create by:alexm
- feat(VnTable): refs #6825 fix ellipsis and add titles by:alexm
- feat(VnTable): refs #6825 merge where's by:alexm
- feat(VnTable): refs #6825 move to folder. fix checkboxs by:alexm
- feat(VnTable): refs #6825 remove field prop. Add actions in table by:alexm
- feat(VnTable): refs #6825 use checkbox if startsWith 'is' or 'has' by:alexm
- feat(VnTable): refs #6825 VnTableChip component by:alexm
- feat(vnTable): reload data when change url by:alexm
- feat(WorkerFormation): add columnFilter by:alexm
- feat(WorkerFormation): is-editable and use-model by:alexm
- fix: notify icon style by:Javier Segarra
- refactor: refs #6896 fixed styles by:Jon
- Revert "feat: fixes #7196" by:alexm
- style: refs #6464 changed checkbox and qbtn styles by:Jon
### Changed 📦
- perf: Remove div.col by:Javier Segarra
- perf: remove ItemPicture by:Javier Segarra
- perf: replace ItemPicture in favour of VnImg by:Javier Segarra
- refactor by:wbuezas
- refactor: refs #5447 changed warehouse filter by:Jon
- refactor: refs #5447 changed warehouse out filter behavior by:Jon
- refactor: refs #5447 fixed filter if continent not selected by:Jon
- refactor: refs #5447 fix request by:Jon
- refactor: refs #5447 refactor filters by:Jon
- refactor: refs #6739 changed invoice functions' name by:Jon
- refactor: refs #6739 changed router.push by:Jon
- refactor: refs #6739 deleted useless const by:Jon
- refactor: refs #6739 fix redirect transferInvoice by:Jon
- refactor: refs #6739 new confirmation window by:Jon
- refactor: refs #6739 requested changes by:Jon
- refactor: refs #6739 updated transferInvoice function by:Jon
- refactor: refs #6896 changes requested in PR by:Jon
- refactor: refs #6896 end migration orders by:Jon
- refactor: refs #6896 fixed styles by:Jon
- refactor: refs #6896 fix qdrawer by:Jon
- refactor: refs #6896 refactor VnImg by:Jon
- refactor: refs #6896 requested changes by:Jon
- refactor: refs #6977 fix VnImg props (origin/6977-ClonedURL) by:Jon
- refactor: refs #6977 refactor VnImg by:Jon
- refactor: refs #6977 use VnImg by:Jon
- refactors by:alexm
### Fixed 🛠️
- chore: refs #7436 fix e2e (origin/7436-showQCheckbox) by:jorgep
- feat: fixes #7196 by:jgallego
- feat: refs #6825 fix modes by:alexm
- feat: refs #7129 fix some code and add order by:pablone
- feat(VnTable): is-editable and use-model. fix: checkbox by:alexm
- feat(VnTable): refs #6825 fix ellipsis and add titles by:alexm
- feat(VnTable): refs #6825 move to folder. fix checkboxs by:alexm
- fix(ArrayData): refs #6825 router.replace and use filter.where by:alexm
- fix: bug replace by:alexm
- fix: column hidden v-if by:Javier Segarra
- fix: comment 4 by:Javier Segarra
- fix: comments by:Javier Segarra
- fix: cypress.config to mjs by:alexm
- fix(EntryBuys): fix VnSubtoolbar by:alexm
- fixes: fix vnFilter params and redirect by:alexm
- fix: fix warnings by:alexm
- fix: invoiceDueDay test by:alexm
- fix log view not refreshing when changing id param by:wbuezas
- fix: map selected by:Javier Segarra
- fix: merge dev by:Javier Segarra
- fix: notify icon style by:Javier Segarra
- fix: point 1 by:Javier Segarra
- fix: point 3 by:Javier Segarra
- fix: refs #5447 deleted console.log by:Jon
- fix: refs 6464 deleted useless class in checkbox by:Jon
- fix: refs #6464 fix error isLoading by:Jon
- fix: refs #6739 changed checkbox field by:Jon
- fix: refs #6825 css by:carlossa
- fix: refs #6826 fix redirect by:Jon
- fix: refs #6826 fix roleDescriptor by:Jon
- fix: refs #7129 fix e2e by:pablone
- fix: refs #7129 fix module routes by:pablone
- fix: refs #7129 fix some issues on load and tools by:pablone
- fix: refs #7129 remove consoleLog by:pablone
- fix: refs #7129 remove fix from claim lines by:pablone
- fix: refs #7274 fix duplicate rows by:jorgep
- fix: refs #7433 skeleton by:jorgep
- fix: refs #7623 bugs & tests by:jorgep
- fix: refs #7623 disable router update by:jorgep
- fix: refs #7623 redirect by:jorgep
- fix: refs #7623 test by:jorgep
- fix: refs #7623 update add updateRoute prop in VnPaginate by:jorgep
- fix: refs #7623 updating skip param by:jorgep
- fix: revert cypress mjs by:alexm
- fix: SkeletonTable by:alexm
- fix: state translations by:Javier Segarra
- fix: ticket order by:Javier Segarra
- fix(ticket router): typo by:alexm
- fix(TicketService): pay use selected by:alexm
- fix: TravelLog by:Javier Segarra
- fix(url): filter by:alexm
- fix(url): redirect by:alexm
- fix(VnFilter): filter with params by:alexm
- fix(VnFilterPanel): remove key by:alexm
- fix(VnTable): create scss by:alexm
- fix(VnTable): duplicate fetch by:alexm
- fix(VnTable): Qtable v-bind by:alexm
- fix(VnTable): refs #6825 checkbox align and color by:alexm
- fix(VnTable): refs #6825 fix click sticky column by:alexm
- fix(VnTable): refs #6825 fix events and css by:alexm
- fix(VnTable): refs #6825 VnInputDate by:alexm
- fix(VnTable): showLabel by:alexm
- fix(VnTable): warns by:alexm
- fix: WorkerNotificationsManager test by:alexm
- fix: WorkerSelect option format by:Javier Segarra
- refactor: refs #5447 fixed filter if continent not selected by:Jon
- refactor: refs #5447 fix request by:Jon
- refactor: refs #6739 fix redirect transferInvoice by:Jon
- refactor: refs #6896 fixed styles by:Jon
- refactor: refs #6896 fix qdrawer by:Jon
- refactor: refs #6977 fix VnImg props (origin/6977-ClonedURL) by:Jon
- refs #6504 fix formModel claimFilter claimCard (origin/6504-fixCardClaim) by:carlossa
- refs #7406 fix components by:carlossa
- refs #7406 fix pr by:carlossa
- refs #7406 fix props by:carlossa
- refs #7406 fix Tb components create by:carlossa
- refs #7406 fix trad by:carlossa
- refs #7406 fix url by:carlossa
- refs #7406 fix VnTable columns by:carlossa
- refs #7409 fix balance and formation by:carlossa
- refs #7409 fix trad by:carlossa
- Revert "feat: fixes #7196" by:alexm
- test: fix intermitent e2e by:alexm
- test: fix vnSearchbar adapt to vnTable (origin/7648_dev_customerEntries) by:alexm
# Version 24.24 - 2024-06-11
### Added 🆕

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "salix-front",
"version": "24.30.1",
"version": "24.32.0",
"description": "Salix frontend",
"productName": "Salix",
"author": "Verdnatura",

12
src/components/CrudModel.vue
View File

@ -98,19 +98,17 @@ defineExpose({
});
async function fetch(data) {
if (data && Array.isArray(data)) {
let $index = 0;
data.map((d) => (d.$index = $index++));
}
resetData(data);
emit('onFetch', data);
return data;
}
function resetData(data) {
if (!data) return;
if (data && Array.isArray(data)) {
let $index = 0;
data.map((d) => (d.$index = $index++));
}
originalData.value = JSON.parse(JSON.stringify(data));
formData.value = JSON.parse(JSON.stringify(data));
@ -299,7 +297,7 @@ watch(formUrl, async () => {
:url="url"
:limit="limit"
@on-fetch="fetch"
@on-change="resetData"
@on-change="fetch"
:skeleton="false"
ref="vnPaginateRef"
v-bind="$attrs"

132
src/components/FormModel.vue
View File

@ -90,7 +90,7 @@ const $props = defineProps({
});
const emit = defineEmits(['onFetch', 'onDataSaved']);
const modelValue = computed(
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
() => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
).value;
const componentIsRendered = ref(false);
const arrayData = useArrayData(modelValue);
@ -137,7 +137,7 @@ onMounted(async () => {
JSON.stringify(newVal) !== JSON.stringify(originalData.value);
isResetting.value = false;
},
{ deep: true },
{ deep: true }
);
}
});
@ -145,7 +145,7 @@ onMounted(async () => {
if (!$props.url)
watch(
() => arrayData.store.data,
(val) => updateAndEmit('onFetch', val),
(val) => updateAndEmit('onFetch', val)
);
watch(formUrl, async () => {
@ -239,7 +239,7 @@ function filter(value, update, filterOptions) {
(ref) => {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
},
}
);
}
@ -261,13 +261,7 @@ defineExpose({
</script>
<template>
<div class="column items-center full-width">
<QForm
@submit="save"
@reset="reset"
class="q-pa-md"
id="formModel"
>
<QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
<QCard>
<slot
v-if="formData"
@ -276,70 +270,72 @@ defineExpose({
:validate="validate"
:filter="filter"
/>
<SkeletonForm v-else/>
<SkeletonForm v-else />
</QCard>
</QForm>
</div>
<Teleport
to="#st-actions"
v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
v-if="
$props.defaultActions &&
stateStore?.isSubToolbarShown() &&
componentIsRendered
"
>
<div v-if="$props.defaultActions">
<QBtnGroup push class="q-gutter-x-sm">
<slot name="moreActions" />
<QBtn
:label="tMobile(defaultButtons.reset.label)"
:color="defaultButtons.reset.color"
:icon="defaultButtons.reset.icon"
flat
@click="reset"
:disable="!hasChanges"
:title="t(defaultButtons.reset.label)"
/>
<QBtnDropdown
v-if="$props.goTo"
@click="saveAndGo"
:label="tMobile('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')"
:disable="!hasChanges"
color="primary"
icon="save"
split
>
<QList>
<QItem
clickable
v-close-popup
@click="save"
:title="t('globals.save')"
>
<QItemSection>
<QItemLabel>
<QIcon
name="save"
color="white"
class="q-mr-sm"
size="sm"
/>
{{ t('globals.save').toUpperCase() }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QBtnDropdown>
<QBtn
v-else
:label="tMobile('globals.save')"
color="primary"
icon="save"
@click="save"
:disable="!hasChanges"
:title="t(defaultButtons.save.label)"
/>
</QBtnGroup>
</div>
<QBtnGroup push class="q-gutter-x-sm">
<slot name="moreActions" />
<QBtn
:label="tMobile(defaultButtons.reset.label)"
:color="defaultButtons.reset.color"
:icon="defaultButtons.reset.icon"
flat
@click="reset"
:disable="!hasChanges"
:title="t(defaultButtons.reset.label)"
/>
<QBtnDropdown
v-if="$props.goTo"
@click="saveAndGo"
:label="tMobile('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')"
:disable="!hasChanges"
color="primary"
icon="save"
split
>
<QList>
<QItem
clickable
v-close-popup
@click="save"
:title="t('globals.save')"
>
<QItemSection>
<QItemLabel>
<QIcon
name="save"
color="white"
class="q-mr-sm"
size="sm"
/>
{{ t('globals.save').toUpperCase() }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QBtnDropdown>
<QBtn
v-else
:label="tMobile('globals.save')"
color="primary"
icon="save"
@click="save"
:disable="!hasChanges"
:title="t(defaultButtons.save.label)"
/>
</QBtnGroup>
</Teleport>
<QInnerLoading
:showing="isLoading"
:label="t('globals.pleaseWait')"

7
src/components/FormModelPopup.vue
View File

@ -23,18 +23,15 @@ const formModelRef = ref(null);
const closeButton = ref(null);
const onDataSaved = (formData, requestResponse) => {
closeForm();
if (closeButton.value) closeButton.value.click();
emit('onDataSaved', formData, requestResponse);
};
const isLoading = computed(() => formModelRef.value?.isLoading);
const closeForm = async () => {
if (closeButton.value) closeButton.value.click();
};
defineExpose({
isLoading,
onDataSaved,
});
</script>

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

@ -5,8 +5,10 @@ import { dashIfEmpty } from 'src/filters';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
import VnSelectCache from 'components/common/VnSelectCache.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnComponent from 'components/common/VnComponent.vue';
const model = defineModel(undefined, { required: true });
@ -41,6 +43,17 @@ const $props = defineProps({
},
});
const defaultSelect = {
attrs: {
row: $props.row,
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
};
const defaultComponents = {
input: {
component: markRaw(VnInput),
@ -65,7 +78,7 @@ const defaultComponents = {
date: {
component: markRaw(VnInputDate),
attrs: {
readonly: true,
readonly: !$props.isEditable,
disable: !$props.isEditable,
style: 'min-width: 125px',
class: 'fit',
@ -74,6 +87,15 @@ const defaultComponents = {
label: $props.showLabel && $props.column.label,
},
},
time: {
component: markRaw(VnInputTime),
attrs: {
disable: !$props.isEditable,
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
checkbox: {
component: markRaw(QCheckbox),
attrs: (prop) => {
@ -94,14 +116,12 @@ const defaultComponents = {
},
},
select: {
component: markRaw(VnSelectCache),
...defaultSelect,
},
rawSelect: {
component: markRaw(VnSelect),
attrs: {
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
...defaultSelect,
},
icon: {
component: markRaw(QIcon),

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

@ -138,7 +138,12 @@ const showFilter = computed(
);
</script>
<template>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<div
v-if="showFilter"
class="full-width"
:class="alignRow()"
style="max-height: 45px; overflow: hidden"
>
<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>

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

@ -3,17 +3,18 @@ import { ref, onMounted, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import FormModelPopup from 'components/FormModelPopup.vue';
import CrudModel from 'src/components/CrudModel.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnLv from 'components/ui/VnLv.vue';
import CrudModel from 'src/components/CrudModel.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.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 VnLv from 'components/ui/VnLv.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,
@ -33,7 +34,7 @@ const $props = defineProps({
default: true,
},
rowClick: {
type: Function,
type: [Function, Boolean],
default: null,
},
redirect: {
@ -80,6 +81,10 @@ const $props = defineProps({
type: Object,
default: () => ({}),
},
tableHeight: {
type: String,
default: '90vh',
},
});
const { t } = useI18n();
const stateStore = useStateStore();
@ -93,9 +98,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',
@ -115,6 +122,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(
@ -128,23 +141,21 @@ 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;
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) {
@ -176,10 +187,17 @@ function splitColumns(columns) {
label: t('status'),
name: 'tableStatus',
columnFilter: false,
orderBy: false,
});
}
}
const rowClickFunction = computed(() => {
if ($props.rowClick != undefined) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {};
});
function redirectFn(id) {
router.push({ path: `/${$props.redirect}/${id}` });
}
@ -204,6 +222,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,
@ -224,25 +253,35 @@ defineExpose({
:data-key="$attrs['data-key']"
:search-button="true"
v-model="params"
:disable-submit-event="true"
:search-url="searchUrl"
:redirect="!!redirect"
>
<template #body>
<VnTableFilter
:column="col"
:data-key="$attrs['data-key']"
<div
class="row no-wrap flex-center"
v-for="col of splittedColumns.columns"
:key="col.id"
v-model="params[columnName(col)]"
:search-url="searchUrl"
>
<VnTableFilter
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<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>
<slot
name="moreFilterPanel"
:params="params"
:columns="splittedColumns.columns"
/>
</VnFilterPanel>
</QScrollArea>
</QDrawer>
@ -275,24 +314,25 @@ defineExpose({
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="isTableMode && 'max-height: 90vh'"
:style="isTableMode && `max-height: ${tableHeight}`"
virtual-scroll
@virtual-scroll="
(event) =>
event.index > rows.length - 2 &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction(row)"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
>
<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"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
@ -311,30 +351,33 @@ defineExpose({
/>
</template>
<template #header-cell="{ col }">
<QTh
v-if="col.visible ?? true"
auto-width
style="min-width: 100px"
>
<QTh v-if="col.visible ?? true" auto-width>
<div
class="q-pt-sm q-px-sm ellipsis"
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="
$props.columnSearch && col.columnFilter == false
? { 'min-height': 72 + 'px' }
: ''
"
style="height: 75px"
>
{{ col?.label }}
<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>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
</QTh>
</template>
<template #header-cell-tableActions>
@ -357,14 +400,14 @@ defineExpose({
<QTd
auto-width
class="no-margin q-px-xs"
:class="getColAlign(col)"
:class="[getColAlign(col), col.class, col.columnField?.class]"
v-if="col.visible ?? true"
>
<slot :name="`column-${col.name}`" :col="col" :row="row">
<VnTableColumn
:column="col"
:row="row"
:is-editable="false"
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
@ -546,8 +589,12 @@ defineExpose({
<i18n>
en:
status: Status
table view: Table view
grid view: Grid view
es:
status: Estados
table view: Vista en tabla
grid view: Vista en cuadrícula
</i18n>
<style lang="scss">
@ -557,7 +604,11 @@ es:
}
.bg-header {
background-color: #5d5d5d;
background-color: var(--vn-header-color);
color: var(--vn-text-color);
}
.color-vn-text {
color: var(--vn-text-color);
}
@ -566,7 +617,7 @@ es:
.q-table--dark tr,
.q-table--dark th,
.q-table--dark td {
border-color: #222222;
border-color: var(--vn-section-color);
}
.q-table__container > div:first-child {
@ -636,7 +687,7 @@ es:
right: 0;
}
td.sticky {
background-color: var(--q-dark);
background-color: var(--vn-section-color);
z-index: 1;
}
}

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">

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

@ -18,7 +18,7 @@ watchEffect(() => {
(matched) => Object.keys(matched.meta).length
);
breadcrumbs.value.length = 0;
if (!matched.value[0]) return;
if (matched.value[0].name != 'Dashboard') {
root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());

11
src/components/common/VnDmsList.vue
View File

@ -273,6 +273,10 @@ function shouldRenderButton(button, isExternal = false) {
if (button.name == 'download') return true;
return button.external === isExternal;
}
defineExpose({
dmsRef,
});
</script>
<template>
<VnPaginate
@ -374,7 +378,11 @@ function shouldRenderButton(button, isExternal = false) {
/>
</QDialog>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="showFormDialog()" />
<QBtn fab color="primary" icon="add" @click="showFormDialog()" class="fill-icon">
<QTooltip>
{{ t('Upload file') }}
</QTooltip>
</QBtn>
</QPageSticky>
</template>
<style scoped>
@ -392,4 +400,5 @@ en:
es:
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
Generate identifier for original file: Generar identificador para archivo original
Upload file: Subir fichero
</i18n>

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

@ -44,15 +44,18 @@ const formattedDate = computed({
let newDate;
if (value) {
// parse input
if (value.includes('/') && value.length >= 10) {
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
if (value.includes('/')) {
if (value.length == 6) value = value + new Date().getFullYear();
if (value.length >= 10) {
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
}
}
let ymd = value.split('-').map((e) => parseInt(e));
newDate = new Date(ymd[0], ymd[1] - 1, ymd[2]);
const [year, month, day] = value.split('-').map((e) => parseInt(e));
newDate = new Date(year, month - 1, day);
if (model.value) {
const orgDate =
model.value instanceof Date ? model.value : new Date(model.value);
@ -107,7 +110,12 @@ watch(
isPopupOpen = false;
"
/>
<QIcon name="event" class="cursor-pointer" />
<QIcon
name="event"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open date')"
/>
</template>
<QMenu
transition-show="scale"
@ -116,9 +124,11 @@ watch(
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
>
<QDate
v-model="popupDate"
:landscape="true"
:today-btn="true"
@update:model-value="
(date) => {
@ -131,7 +141,6 @@ watch(
</QInput>
</div>
</template>
<style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid;
@ -141,3 +150,7 @@ watch(
border-style: solid;
}
</style>
<i18n>
es:
Open date: Abrir fecha
</i18n>

60
src/components/common/VnInputTime.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { watch, computed, ref } from 'vue';
import { watch, computed, ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
@ -20,6 +20,7 @@ const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
const dateFormat = 'HH:mm';
const isPopupOpen = ref();
const hover = ref();
const inputRef = ref();
const styleAttrs = computed(() => {
return props.isOutlined
@ -41,11 +42,17 @@ const formattedTime = computed({
let time = value;
if (time) {
if (time?.length > 5) time = dateToTime(time);
else {
if (time.length == 1 && parseInt(time) > 2) time = time.padStart(2, '0');
time = time.padEnd(5, '0');
if (!time.includes(':'))
time = time.substring(0, 2) + ':' + time.substring(3, 5);
}
if (!props.timeOnly) {
const hours = time.split(':');
const date = new Date();
date.setHours(hours[0], hours[1], 0);
time = date.toISOString();
const [hh, mm] = time.split(':');
const date = new Date(model.value ? model.value : null);
date.setHours(hh, mm, 0);
time = date?.toISOString();
}
}
model.value = time;
@ -61,11 +68,31 @@ watch(
(val) => (formattedTime.value = val),
{ immediate: true }
);
watch(
() => formattedTime.value,
async (val) => {
let position = 3;
const input = inputRef.value?.getNativeElement();
if (!val || !input) return;
let [hh, mm] = val.split(':');
hh = parseInt(hh);
if (hh >= 10 || mm != '00') return;
await nextTick();
await nextTick();
if (!hh) position = 0;
input.setSelectionRange(position, position);
},
{ immediate: true }
);
</script>
<template>
<div @mouseover="hover = true" @mouseleave="hover = false">
<QInput
ref="inputRef"
class="vn-input-time"
mask="##:##"
placeholder="--:--"
@ -74,6 +101,8 @@ watch(
:class="{ required: $attrs.required }"
style="min-width: 100px"
:rules="$attrs.required ? [requiredFieldRule] : null"
@click="isPopupOpen = false"
@focus="inputRef.getNativeElement().setSelectionRange(0, 0)"
>
<template #append>
<QIcon
@ -90,7 +119,12 @@ watch(
isPopupOpen = false;
"
/>
<QIcon name="Schedule" class="cursor-pointer" />
<QIcon
name="Schedule"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open time')"
/>
</template>
<QMenu
transition-show="scale"
@ -99,14 +133,9 @@ watch(
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
>
<QTime
:format24h="false"
v-model="formattedTime"
mask="HH:mm"
landscape
now-btn
/>
<QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
</QMenu>
</QInput>
</div>
@ -120,3 +149,8 @@ watch(
border-style: solid;
}
</style>
<i18n>
es:
Open time: Abrir tiempo
</i18n>
, nextTick

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

@ -75,6 +75,7 @@ const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
const dataRef = ref();
const lastVal = ref();
const value = computed({
get() {
@ -85,14 +86,31 @@ const value = computed({
},
});
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue);
});
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue && !findKeyInOptions())
fetchFilter($props.modelValue);
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
});
function findKeyInOptions() {
if (!$props.options) return;
return filter($props.modelValue, $props.options)?.length;
}
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
});
function filter(val, options) {
const search = val.toString().toLowerCase();
@ -125,15 +143,21 @@ async function fetchFilter(val) {
const defaultWhere = $props.useLike
? { [key]: { like: `%${val}%` } }
: { [key]: val };
const where = { ...defaultWhere, ...$props.where };
const where = { ...(val ? defaultWhere : {}), ...$props.where };
const fetchOptions = { where, order: sortBy, limit };
if (fields) fetchOptions.fields = fields;
return dataRef.value.fetch(fetchOptions);
}
async function filterHandler(val, update) {
if (!$props.defaultFilter) return update();
if (!val && lastVal.value === val) {
lastVal.value = val;
return update();
}
lastVal.value = val;
let newOptions;
if (!$props.defaultFilter) return update();
if ($props.url) {
newOptions = await fetchFilter(val);
} else newOptions = filter(val, myOptionsOriginal.value);
@ -149,19 +173,6 @@ async function filterHandler(val, update) {
}
);
}
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue);
});
onMounted(async () => {
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
});
</script>
<template>

39
src/components/common/VnSelectCache.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup>
import { ref, onBeforeMount, useAttrs } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const $props = defineProps({
row: {
type: [Object],
default: null,
},
find: {
type: [String, Array],
default: null,
description: 'search in row to add default options',
},
});
const options = ref([]);
onBeforeMount(async () => {
const { url, optionValue, optionLabel } = useAttrs();
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
if (!findBy || !$props.row) return;
// is array
if (Array.isArray(findBy)) {
const [id, name] = findBy;
if (!$props.row[id] || !$props.row[name]) return;
return (options.value = [
{
[optionValue ?? 'id']: $props.row[id],
[optionLabel ?? 'name']: $props.row[name],
},
]);
}
// is string
if ($props.row[findBy]) options.value = [$props.row[findBy]];
});
</script>
<template>
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
</template>

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;

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

@ -18,19 +18,18 @@ const $props = defineProps({
},
searchButton: {
type: Boolean,
required: false,
default: false,
},
showAll: {
type: Boolean,
default: true,
},
unremovableParams: {
unRemovableParams: {
type: Array,
required: false,
default: () => [],
description:
'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no',
description: `Some filters come with default search parameters and require a value.
This prop helps us determine which filters can be removed and which cannot.`,
},
exprBuilder: {
type: Function,
@ -113,7 +112,6 @@ async function search(evt) {
isLoading.value = true;
const filter = { ...userParams.value };
store.userParamsChanged = true;
arrayData.reset(['skip', 'filter.skip', 'page']);
const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
userParams.value = newParams;
@ -140,7 +138,7 @@ async function clearFilters() {
arrayData.reset(['skip', 'filter.skip', 'page']);
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unremovableParams.includes(param)
$props.unRemovableParams.includes(param)
);
const newParams = {};
// Conservar solo los params que no son removibles
@ -249,7 +247,7 @@ function formatValue(value) {
<VnFilterPanelChip
v-for="chip of tags"
:key="chip.label"
:removable="!unremovableParams.includes(chip.label)"
:removable="!unRemovableParams.includes(chip.label)"
@remove="remove(chip.label)"
>
<slot name="tags" :tag="chip" :format-fn="formatValue">

3
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();
@ -30,6 +30,7 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
<template>
<QToolbar
id="subToolbar"
class="justify-end sticky"
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
>

70
src/composables/useArrayData.js
View File

@ -18,16 +18,17 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
onMounted(() => {
setOptions();
arrayDataStore.reset(['skip']);
reset(['skip']);
const query = route.query;
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;
}
@ -158,9 +160,9 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams;
arrayDataStore.reset(['skip', 'filter.skip', 'page']);
reset(['skip', 'filter.skip', 'page']);
await fetch({ append: false });
await fetch({});
return { filter, params };
}
@ -171,16 +173,58 @@ 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;
reset(['skip', 'filter.skip', 'page']);
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) {
delete store.userParams[param];
delete params[param];
if (store.filter?.where) {
const key = Object.keys(exprBuilder ? exprBuilder(param) : param);
if (key[0]) delete store.filter.where[key[0]];
if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where;
let key;
if (exprBuilder) {
const result = exprBuilder(param);
if (result !== undefined && result !== null)
key = Object.keys(result);
} else {
if (typeof param === 'object' && param !== null)
key = Object.keys(param);
}
if (key && key[0]) {
delete store.filter.where[key[0]];
if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where;
}
}
}
}
@ -198,7 +242,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 +284,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
applyFilter,
addFilter,
addFilterWhere,
addOrder,
deleteOrder,
refresh,
destroy,
loadMore,

30
src/css/app.scss
View File

@ -4,9 +4,10 @@
body.body--light {
--font-color: black;
--vn-header-color: #cecece;
--vn-page-color: #ffffff;
--vn-section-color: #e0e0e0;
--vn-section-hover-color: #b9b9b9;
--vn-page-color: #ffffff;
--vn-text-color: var(--font-color);
--vn-label-color: #5f5f5f;
--vn-accent-color: #e7e3e3;
@ -18,6 +19,7 @@ body.body--light {
}
}
body.body--dark {
--vn-header-color: #5d5d5d;
--vn-page-color: #222;
--vn-section-color: #3d3d3d;
--vn-section-hover-color: #747474;
@ -229,3 +231,29 @@ 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;
}
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.expand {
max-width: 400px;
}
}
}

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

@ -46,6 +46,7 @@ globals:
noPinnedModules: You don't have any pinned modules
summary:
basicData: Basic data
daysOnward: Days onward
today: Today
yesterday: Yesterday
dateFormat: en-GB
@ -196,6 +197,12 @@ globals:
autonomous: Autonomous
suppliers: Suppliers
supplier: Supplier
expedition: Expedition
services: Service
components: Components
pictures: Pictures
packages: Packages
tracking: Tracking
labeler: Labeler
supplierCreate: New supplier
accounts: Accounts
@ -232,6 +239,7 @@ globals:
formation: Formation
locations: Locations
warehouses: Warehouses
saleTracking: Sale tracking
roles: Roles
connections: Connections
acls: ACLs
@ -546,18 +554,13 @@ ticket:
sms: Sms
notes: Notes
sale: Sale
dms: File management
volume: Volume
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

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

@ -45,6 +45,7 @@ globals:
noPinnedModules: No has fijado ningún módulo
summary:
basicData: Datos básicos
daysOnward: Días adelante
today: Hoy
yesterday: Ayer
dateFormat: es-ES
@ -241,6 +242,7 @@ globals:
privileges: Privilegios
observation: Notas
expedition: Expedición
saleTracking: Líneas preparadas
services: Servicios
tracking: Estados
components: Componentes
@ -551,6 +553,7 @@ ticket:
sms: Sms
notes: Notas
sale: Lineas del pedido
dms: Gestión documental
volume: Volumen
observation: Notas
ticketAdvance: Adelantar tickets
@ -558,6 +561,7 @@ ticket:
expedition: Expedición
purchaseRequest: Petición de compra
weeklyTickets: Tickets programados
saleTracking: Líneas preparadas
services: Servicios
tracking: Estados
components: Componentes

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

@ -211,7 +211,7 @@ async function changeState(value) {
>
<QList>
<QVirtualScroll
style="max-height: 300px"
class="max-container-height"
:items="ClaimStates"
separator
v-slot="{ item, index }"
@ -279,13 +279,13 @@ async function changeState(value) {
<ClaimNotes
:id="entityId"
:add-note="false"
style="max-height: 300px"
class="max-container-height"
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<QCard class="vn-two" v-if="claimDms?.length">
<VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
<div class="container">
<div class="container max-container-height" style="overflow: auto">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
@ -302,7 +302,10 @@ async function changeState(value) {
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QCard
class="multimedia relative-position"
style="max-height: 128px"
>
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@ -322,7 +325,7 @@ async function changeState(value) {
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable
:columns="detailsColumns"
@ -361,7 +364,7 @@ async function changeState(value) {
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<QCard class="vn-max" v-if="developments.length > 0">
<VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
<QTable
:columns="developmentColumns"
@ -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>

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

@ -71,7 +71,6 @@ const columns = [
<VnTable
data-key="ClaimEndsTable"
url="ClaimEnds/filter"
default-mode="table"
:right-search="false"
:column-search="false"
:disable-option="{ card: true, table: true }"

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

@ -17,6 +17,8 @@ const props = defineProps({
});
const states = ref([]);
defineExpose({ states });
</script>
<template>

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

@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toDate } from 'filters/index';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
@ -14,6 +14,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const claimFilterRef = ref();
const columns = computed(() => [
{
align: 'left',
@ -29,18 +30,39 @@ const columns = computed(() => [
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'],
},
},
class: 'expand',
},
{
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',
@ -48,6 +70,9 @@ const columns = computed(() => [
name: 'created',
format: ({ created }) => toDate(created),
cardVisible: true,
columnFilter: {
component: 'date',
},
},
{
align: 'left',
@ -57,6 +82,14 @@ const columns = computed(() => [
condition: () => true,
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
},
columnFilter: {
name: 'claimStateFk',
component: 'select',
attrs: {
options: claimFilterRef.value?.states,
optionLabel: 'description',
},
},
},
{
align: 'right',
@ -86,7 +119,7 @@ const STATE_COLOR = {
/>
<RightMenu>
<template #right-panel>
<ClaimFilter data-key="ClaimList" />
<ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
</template>
</RightMenu>
<VnTable
@ -116,4 +149,9 @@ const STATE_COLOR = {
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>

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
>

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

@ -183,15 +183,10 @@ const fetchEntryBuys = async () => {
{{ t('globals.summary.basicData') }}
<QIcon name="open_in_new" />
</router-link>
<VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
<VnLv :label="t('entry.summary.currency')" :value="entry.currency.name" />
<VnLv :label="t('entry.summary.company')" :value="entry.company.code" />
<VnLv :label="t('entry.summary.reference')" :value="entry.reference" />
<VnLv
:label="t('entry.summary.invoiceNumber')"
:value="entry.invoiceNumber"
@ -205,7 +200,6 @@ const fetchEntryBuys = async () => {
{{ t('globals.summary.basicData') }}
<QIcon name="open_in_new" />
</router-link>
<VnLv :label="t('entry.summary.travelReference')">
<template #value>
<span class="link">
@ -214,31 +208,25 @@ const fetchEntryBuys = async () => {
</span>
</template>
</VnLv>
<VnLv
:label="t('entry.summary.travelAgency')"
:value="entry.travel.agency.name"
/>
<VnLv :label="t('shipped')" :value="toDate(entry.travel.shipped)" />
<VnLv
:label="t('entry.summary.travelWarehouseOut')"
:value="entry.travel.warehouseOut.name"
/>
<QCheckbox
:label="t('entry.summary.travelDelivered')"
v-model="entry.travel.isDelivered"
:disable="true"
/>
<VnLv :label="t('landed')" :value="toDate(entry.travel.landed)" />
<VnLv
:label="t('entry.summary.travelWarehouseIn')"
:value="entry.travel.warehouseIn.name"
/>
<QCheckbox
:label="t('entry.summary.travelReceived')"
v-model="entry.travel.isReceived"

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

@ -63,7 +63,7 @@ const redirectToEntryBasicData = (_, { id }) => {
<VnSearchbar
url="Entries/filter"
custom-route-redirect-name="EntrySummary"
data-key="EntrySummary"
data-key="Entry"
:label="t('Search entries')"
:info="t('You can search by entry reference')"
/>

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"
/>

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

@ -7,6 +7,7 @@ import { toDate } from 'src/filters/index';
import { useQuasar } from 'quasar';
import EntryBuysTableDialog from './EntryBuysTableDialog.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnInput from 'src/components/common/VnInput.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -34,6 +35,10 @@ const columns = computed(() => [
isTitle: false,
create: true,
cardVisible: true,
component: 'date',
columnField: {
component: null,
},
format: ({ shipped }) => toDate(shipped),
},
{
@ -43,6 +48,10 @@ const columns = computed(() => [
isTitle: false,
create: true,
cardVisible: false,
component: 'date',
columnField: {
component: null,
},
format: ({ landed }) => toDate(landed),
},
{
@ -93,14 +102,23 @@ const printBuys = (rowId) => {
:columns="columns"
default-mode="card"
auto-load
:right-search="true"
>
<template #moreFilterPanel="{ params }">
<VnInput
:label="t('globals.daysOnward')"
v-model="params.days"
class="q-px-xs row"
dense
filled
outlined
></VnInput>
</template>
</VnTable>
</div>
</QPage>
</template>
<i18n>
es:
Search entries: Buscar entradas
You can search by entry reference: Puedes buscar por referencia de la entrada
</i18n>

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/ItemRequestFilter.vue
View File

@ -209,7 +209,7 @@ const decrement = (paramsObj, key) => {
<QItemSection>
<VnInput
v-model="params.scopeDays"
:label="t('params.scopeDays')"
:label="t('globals.daysOnward')"
type="number"
dense
outlined
@ -281,7 +281,6 @@ en:
requesterFk: Salesperson
from: From
to: To
scopeDays: Days onward
mine: For me
state: State
dateFiltersTooltip: Cannot choose a range of dates and days onward at the same time
@ -299,7 +298,6 @@ es:
requesterFk: Comercial
from: Desde
to: Hasta
scopeDays: Días adelante
mine: Para mi
state: Estado
dateFiltersTooltip: No se puede seleccionar un rango de fechas y días en adelante a la vez

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

12
src/pages/Monitor/MonitorList.vue
View File

@ -14,10 +14,10 @@ const stateStore = useStateStore();
const expanded = ref(true);
onMounted(async () => {
stateStore.rightDrawer = true;
stateStore.leftDrawer = false;
});
onUnmounted(() => (stateStore.rightDrawer = false));
onUnmounted(() => (stateStore.leftDrawer = true));
</script>
<template>
@ -63,13 +63,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</template>
</QExpansionItem>
</QCard>
<QCard class="full-width q-mb-lg">
<QCard class="full-width">
<QItem class="justify-between">
<QItemLabel class="slider-container">
<QItemLabel class="col slider-container">
<span class="text-body1"
>{{ t('salesMonitor.ticketsMonitor') }}
</span>
<QCardSection class="col"><SalesTicketsTable /> </QCardSection>
<QCardSection class="col" style="padding-inline: 0"
><SalesTicketsTable />
</QCardSection>
</QItemLabel>
</QItem>
</QCard>

126
src/pages/Monitor/SalesClientsTable.vue
View File

@ -3,14 +3,11 @@ import { ref, computed, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { toDateFormat } from 'src/filters/date.js';
import { dashIfEmpty } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
@ -37,9 +34,11 @@ const filter = reactive({
},
});
const refetch = async () => await paginateRef.value.fetch();
watch(dateRange, (val) => {
filter.where['v.stamp'].between = val;
paginateRef.value.fetch();
refetch();
});
function exprBuilder(param, value) {
@ -53,25 +52,15 @@ function exprBuilder(param, value) {
const params = reactive({});
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await paginateRef.value.addFilter(null, params);
} catch (err) {
console.error('Error applying column filter', err);
}
};
const columns = computed(() => [
{
label: t('salesClientsTable.date'),
name: 'date',
name: 'dated',
field: 'dated',
align: 'left',
columnFilter: null,
sortable: true,
format: (val) => toDateFormat(val),
format: (row) => toDateFormat(row.dated),
},
{
label: t('salesClientsTable.hour'),
@ -86,19 +75,9 @@ const columns = computed(() => [
field: 'salesPerson',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'salesPersonFk',
type: 'select',
filterValue: null,
attrs: {
options: workersActiveOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
columnField: {
component: null,
},
format: (val) => dashIfEmpty(val),
},
{
label: t('salesClientsTable.client'),
@ -106,19 +85,9 @@ const columns = computed(() => [
name: 'client',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'clientFk',
type: 'select',
filterValue: null,
attrs: {
options: clientsOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
columnField: {
component: null,
},
format: (val) => dashIfEmpty(val),
},
]);
</script>
@ -144,7 +113,7 @@ const columns = computed(() => [
@on-fetch="(data) => (clientsOptions = data)"
/>
<QCard style="max-height: 380px; overflow-y: scroll">
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorClients"
url="SalesMonitors/clientsFilter"
@ -155,63 +124,24 @@ const columns = computed(() => [
:filter="filter"
:offset="50"
auto-load
:columns="columns"
:right-search="false"
default-mode="table"
dense
:without-header="true"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width"
:no-data-label="t('globals.noResults')"
>
<template #top>
<VnInputDate
:label="t('salesClientsTable.from')"
dense
v-model="from"
class="q-mr-lg"
style="width: 150px"
/>
<VnInputDate
:label="t('salesClientsTable.to')"
dense
v-model="to"
style="width: 150px"
/>
</template>
<template #top-row="{ cols }">
<QTr>
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<VnSelect
:is="col.columnFilter.component"
v-if="col.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
@update:model-value="applyColumnFilter(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd>
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd>
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
</QTable>
<template #column-salesPerson="{ row }">
<QTd>
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</QTd>
</template>
</VnPaginate>
<template #column-client="{ row }">
<QTd>
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
</VnTable>
</QCard>
</template>

131
src/pages/Monitor/SalesOrdersTable.vue
View File

@ -5,7 +5,8 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
import { toCurrency } from 'src/filters';
@ -50,19 +51,22 @@ const columns = computed(() => [
name: 'date',
field: 'dated',
align: 'left',
columnFilter: null,
sortable: true,
cardVisible: true,
},
{
label: t('salesOrdersTable.client'),
name: 'client',
align: 'left',
sortable: true,
cardVisible: true,
},
{
label: t('salesOrdersTable.salesPerson'),
name: 'salesPerson',
align: 'left',
sortable: true,
cardVisible: true,
},
]);
@ -119,79 +123,78 @@ const redirectToOrderSummary = (orderId) => {
@on-fetch="(data) => (clientsOptions = data)"
/>
<VnSubToolbar />
<QCard style="max-height: 380px; overflow-y: scroll">
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorOrders"
url="SalesMonitors/ordersFilter"
order="date_make DESC"
:limit="6"
:right-search="false"
:expr-builder="exprBuilder"
auto-load
:columns="columns"
:table="{
'row-key': 'id',
selection: 'multiple',
'hide-bottom': true,
}"
default-mode="table"
:without-header="false"
@row-click="(_, row) => redirectToOrderSummary(row.id)"
v-model:selected="selectedRows"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
selection="multiple"
v-model:selected="selectedRows"
:pagination="{ rowsPerPage: 0 }"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToOrderSummary(row.id)"
<template #top-left>
<QBtn
v-if="selectedRows.length > 0"
icon="delete"
size="md"
color="primary"
@click="
openConfirmationModal(
t('salesOrdersTable.deleteConfirmTitle'),
t('salesOrdersTable.deleteConfirmMessage'),
removeOrders
)
"
>
<template #top>
<QBtn
v-if="selectedRows.length > 0"
icon="delete"
size="md"
color="primary"
@click="
openConfirmationModal(
t('salesOrdersTable.deleteConfirmTitle'),
t('salesOrdersTable.deleteConfirmMessage'),
removeOrders
)
"
>
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
</QBtn>
</template>
<template #body-cell-date="{ row }">
<QTd>
<QBadge
:color="getBadgeColor(row.date_send)"
text-color="black"
class="q-ma-none q-mb-md"
dense
style="font-size: 14px"
>
{{ toDateFormat(row.date_send) }}
</QBadge>
<div>{{ toDateTimeFormat(row.date_make) }}</div>
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</div>
<span> {{ row.agencyName }}</span>
</QTd>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</div>
<span>{{ toCurrency(row.import) }}</span>
</QTd>
</template>
</QTable>
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
</QBtn>
</template>
</VnPaginate>
<template #column-date="{ row }">
<QTd>
<QBadge
:color="getBadgeColor(row.date_send)"
text-color="black"
class="q-pa-sm q-mb-md"
style="font-size: 14px"
>
{{ toDateFormat(row.date_send) }}
</QBadge>
<div>{{ toDateTimeFormat(row.date_make) }}</div>
</QTd>
</template>
<template #column-client="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</div>
<span> {{ row.agencyName }}</span>
</QTd>
</template>
<template #column-salesPerson="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</div>
<span>{{ toCurrency(row.import) }}</span>
</QTd>
</template>
</VnTable>
</QCard>
</template>
<style lang="scss" scoped>

516
src/pages/Monitor/SalesTicketsTable.vue
View File

@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
@ -15,6 +14,7 @@ import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
@ -103,7 +103,10 @@ const columns = computed(() => [
name: 'problems',
align: 'left',
sortable: true,
columnFilter: null,
columnFilter: false,
attrs: {
dense: true,
},
},
{
label: t('salesTicketsTable.identifier'),
@ -111,11 +114,10 @@ const columns = computed(() => [
field: 'id',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'id',
attrs: {
dense: true,
},
@ -128,10 +130,8 @@ const columns = computed(() => [
field: 'nickname',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'nickname',
attrs: {
dense: true,
},
@ -144,11 +144,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'salesPersonFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'salesPersonFk',
attrs: {
options: workersActiveOptions.value,
'option-value': 'id',
@ -160,14 +157,12 @@ const columns = computed(() => [
{
label: t('salesTicketsTable.date'),
name: 'date',
style: { 'max-width': '100px' },
align: 'left',
sortable: true,
columnFilter: {
component: VnInputDate,
filterParamKey: 'shippedDate',
type: 'date',
filterValue: null,
event: getInputEvents,
component: 'date',
name: 'shippedDate',
attrs: {
dense: true,
},
@ -180,6 +175,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'theoreticalHour',
attrs: {
dense: true,
},
},
},
{
label: t('salesTicketsTable.practical'),
@ -188,10 +190,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'practicalHour',
attrs: {
dense: true,
},
@ -204,6 +204,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'shippedDate',
attrs: {
dense: true,
},
},
},
{
@ -211,13 +218,11 @@ const columns = computed(() => [
name: 'province',
field: 'province',
align: 'left',
style: { 'max-width': '100px' },
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'provinceFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'provinceFk',
attrs: {
options: provincesOptions.value,
'option-value': 'id',
@ -230,13 +235,11 @@ const columns = computed(() => [
label: t('salesTicketsTable.state'),
name: 'state',
align: 'left',
style: { 'max-width': '100px' },
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'stateFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'stateFk',
attrs: {
options: statesOptions.value,
'option-value': 'id',
@ -252,13 +255,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
inWhere: true,
},
attrs: {
'checked-icon': 'local_bar',
'unchecked-icon': 'local_bar',
'false-value': 0,
'true-value': 1,
},
},
{
@ -267,11 +270,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'zoneFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'zoneFk',
attrs: {
options: zonesOptions.value,
'option-value': 'id',
@ -285,21 +285,44 @@ const columns = computed(() => [
name: 'total',
field: 'totalWithVat',
align: 'left',
style: { 'max-width': '75px' },
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'totalWithVat',
attrs: {
dense: true,
},
},
},
{
name: 'rowActions',
align: 'left',
sortable: true,
align: 'right',
name: 'tableActions',
label: '',
actions: [
{
title: t('salesTicketsTable.goToLines'),
icon: 'vn:lines',
color: 'priamry',
action: (row) => redirectToSales(row.id),
isPrimary: true,
attrs: {
flat: true,
dense: true,
},
},
{
title: t('salesTicketsTable.preview'),
icon: 'preview',
color: 'priamry',
action: (row) => viewSummary(row.id, TicketSummary),
isPrimary: true,
attrs: {
flat: true,
dense: true,
},
},
],
},
]);
@ -315,7 +338,9 @@ const getBadgeAttrs = (date) => {
if (comparation < 0) return { color: 'success', 'text-color': 'black' };
return { color: 'transparent', 'text-color': 'white' };
};
let refreshTimer = null;
const autoRefreshHandler = (value) => {
if (value)
refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
@ -324,8 +349,10 @@ const autoRefreshHandler = (value) => {
refreshTimer = null;
}
};
const redirectToTicketSummary = (id) => {
router.push({ name: 'TicketSummary', params: { id } });
const url = `#/ticket/${id}/summary`;
window.open(url, '_blank');
};
const stateColors = {
@ -348,12 +375,17 @@ const formatShippedDate = (date) => {
return toDateFormat(_date);
};
onMounted(async () => {
const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
allColumnNames.value = filteredColumns.map((col) => col.name);
params = fetchParams();
await paginateRef.value.addFilter(null, params);
});
const redirectToSales = (id) => {
const url = `#/ticket/${id}/sale`;
window.open(url, '_blank');
};
// onMounted(async () => {
// const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
// allColumnNames.value = filteredColumns.map((col) => col.name);
// params = fetchParams();
// await paginateRef.value.addFilter(null, params);
// });
</script>
<template>
@ -394,7 +426,7 @@ onMounted(async () => {
auto-load
@on-fetch="(data) => (zonesOptions = data)"
/>
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorTickets"
url="SalesMonitors/salesFilter"
@ -403,221 +435,153 @@ onMounted(async () => {
:expr-builder="exprBuilder"
:user-params="params"
:offset="50"
:columns="columns"
:visible-columns="visibleColumns"
:right-search="false"
default-mode="table"
auto-load
@row-click="(_, row) => redirectToTicketSummary(row.id)"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
:visible-columns="visibleColumns"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToTicketSummary(row.id)"
>
<template #top>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="ticketsMonitor"
labels-traductions-path="salesTicketsTable"
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
/>
<QCheckbox
v-model="autoRefresh"
:label="t('salesTicketsTable.autoRefresh')"
@update:model-value="autoRefreshHandler"
/>
</template>
<template #top-row="{ cols }">
<QTr>
<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
style="padding-bottom: 0"
/>
</QTd>
</QTr>
</template>
<template #body-cell-problems="{ row }">
<QTd class="q-gutter-x-sm">
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.noVerifiedData')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasTicketRequest"
name="vn:buyrequest"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.purchaseRequest')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
name="vn:unavailable"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isFreezed"
name="vn:frozen"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.risk"
name="vn:risk"
:color="row.hasHighRisk ? 'negative' : 'primary'"
size="xs"
>
<QTooltip
>{{ t('salesTicketsTable.risk') }}:
{{ row.risk }}</QTooltip
>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
name="vn:components"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.componentLack')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.isTooLittle"
name="vn:isTooLittle"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #body-cell-identifier="{ row }">
<QTd>
<span class="link" @click.stop.prevent>{{ row.id }}</span>
<TicketDescriptorProxy :id="row.id" />
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.nickname }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.userName }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd>
</template>
<template #body-cell-date="{ row }">
<QTd>
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</QTd>
</template>
<template #body-cell-state="{ row }">
<QTd @click.stop.prevent>
<div v-if="row.refFk">
<span class="link">{{ row.refFk }}</span>
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
</div>
<QBadge
v-else
:color="stateColors[row.classColor] || 'transparent'"
:text-color="stateColors[row.classColor] ? 'black' : 'white'"
dense
style="font-size: 14px"
>
{{ row.state }}
</QBadge>
</QTd>
</template>
<template #body-cell-isFragile="{ row }">
<QTd>
<QIcon
v-if="row.isFragile"
name="local_bar"
color="primary"
size="sm"
>
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #body-cell-zone="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" />
</QTd>
</template>
<template #body-cell-total="{ row }">
<QTd>
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
dense
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</QTd>
</template>
<template #body-cell-rowActions="{ row }">
<QTd @click.stop.prevent>
<QBtn
icon="vn:lines"
color="primary"
size="md"
class="q-mr-sm"
flat
dense
:to="{ name: 'TicketSale', params: { id: row.id } }"
>
<QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
</QBtn>
<QBtn
icon="preview"
color="primary"
size="md"
dense
flat
@click="viewSummary(row.id, TicketSummary)"
>
<QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
</QBtn>
</QTd>
</template>
</QTable>
<template #top-left>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="ticketsMonitor"
labels-traductions-path="salesTicketsTable"
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
/>
<QCheckbox
v-model="autoRefresh"
:label="t('salesTicketsTable.autoRefresh')"
@update:model-value="autoRefreshHandler"
/>
</template>
</VnPaginate>
<template #column-problems="{ row }">
<QTd class="no-padding" style="max-width: 50px">
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasTicketRequest"
name="vn:buyrequest"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
name="vn:unavailable"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
</QIcon>
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.risk"
name="vn:risk"
:color="row.hasHighRisk ? 'negative' : 'primary'"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
name="vn:components"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isTooLittle"
name="vn:isTooLittle"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #column-identifier="{ row }">
<QTd class="no-padding">
<span class="link" @click.stop.prevent>
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</span>
</QTd>
</template>
<template #column-client="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.nickname }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
<template #column-salesPerson="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.userName }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd>
</template>
<template #column-date="{ row }">
<QTd class="no-padding">
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-pa-sm"
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</QTd>
</template>
<template #column-state="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<div v-if="row.refFk">
<span class="link">{{ row.refFk }}</span>
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
</div>
<QBadge
v-else
:color="stateColors[row.classColor] || 'transparent'"
:text-color="stateColors[row.classColor] ? 'black' : 'white'"
class="q-pa-sm"
style="font-size: 14px"
>
{{ row.state }}
</QBadge>
</QTd>
</template>
<template #column-isFragile="{ row }">
<QTd class="no-padding">
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #column-zone="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" />
</QTd>
</template>
<template #column-total="{ row }">
<QTd class="no-padding">
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
class="q-pa-sm"
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</QTd>
</template>
</VnTable>
</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>

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

@ -176,8 +176,6 @@ 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],
@ -249,7 +247,6 @@ async function confirmOrder() {
data-key="OrderLines"
url="OrderRows"
:columns="columns"
default-mode="table"
:right-search="false"
:use-model="true"
auto-load

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

@ -126,7 +126,6 @@ const columns = computed(() => [
]);
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;
@ -154,7 +153,6 @@ async function fetchClientAddress(id, data) {
},
}"
:columns="columns"
default-mode="table"
redirect="order"
auto-load
>

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

@ -78,10 +78,12 @@ const columns = computed(() => [
:columns="columns"
:right-search="false"
:use-model="true"
redirect="agency"
default-mode="card"
/>
</template>
<i18n>
es:
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia

162
src/pages/Route/Cmr/CmrFilter.vue
View File

@ -1,162 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const countries = ref();
const warehouses = ref();
</script>
<template>
<FetchData url="Countries" @on-fetch="(data) => (countries = data)" auto-load />
<FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QItem>
<QItemSection>
<VnInput
:label="t('route.cmr.list.cmrFk')"
v-model="params.cmrFk"
is-outlined
>
<template #prepend>
<QIcon name="article" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
:label="t('route.cmr.list.hasCmrDms')"
v-model="params.hasCmrDms"
lazy-rules
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('route.cmr.list.ticketFk')"
v-model="params.ticketFk"
is-outlined
>
<template #prepend>
<QIcon name="vn:ticket" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('route.cmr.list.routeFk')"
v-model="params.routeFk"
is-outlined
>
<template #prepend>
<QIcon name="vn:delivery" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('route.cmr.list.clientFk')"
v-model="params.clientFk"
is-outlined
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!countries">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="countries">
<VnSelect
:label="t('route.cmr.list.country')"
v-model="params.country"
:options="countries"
option-label="name"
option-value="id"
transition-show="jump-down"
transition-hide="jump-up"
emit-value
map-options
dense
outlined
rounded
>
<template #prepend>
<QIcon name="flag" size="sm"></QIcon>
</template>
</VnSelect>
</QItemSection>
</QItem>
<QItem>
<VnSelect
:label="t('globals.warehouse')"
:options="warehouses"
hide-selected
option-label="name"
option-value="id"
v-model="params.warehouseFk"
rounded
dense
outlined
>
</VnSelect>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.shipped"
:label="t('route.cmr.list.shipped')"
is-outlined
/>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
cmrFk: Cmr id
hasCmrDms: Attached in gestdoc
ticketFk: Ticketd id
country: Country
clientFk: Client id
shipped: Preparation date
es:
params:
cmrFk: Id cmr
hasCmrDms: Gestdoc
ticketFk: Id ticket
country: País
clientFk: Id cliente
shipped: Fecha preparación
</i18n>

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

@ -2,82 +2,93 @@
import { onBeforeMount, onMounted, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Notify } from 'quasar';
import axios from 'axios';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useSession } from 'src/composables/useSession';
import { toDate } from 'filters/index';
import CmrFilter from './CmrFilter.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import { useStateStore } from 'src/stores/useStateStore';
import axios from 'axios';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const state = useStateStore();
const selected = ref([]);
const warehouses = ref([]);
const selectedRows = ref([]);
const columns = computed(() => [
{
align: 'left',
name: 'cmrFk',
label: t('route.cmr.list.cmrFk'),
field: (row) => row.cmrFk,
sortable: true,
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'hasCmrDms',
label: t('route.cmr.list.hasCmrDms'),
field: (row) => row.hasCmrDms,
align: 'center',
sortable: true,
component: 'checkbox',
cardVisible: true,
},
{
name: 'ticketFk',
label: t('route.cmr.list.ticketFk'),
field: (row) => row.ticketFk,
sortable: true,
name: 'ticketFk',
},
{
name: 'routeFkFk',
label: t('route.cmr.list.routeFk'),
field: (row) => row.routeFk,
sortable: true,
name: 'routeFk',
},
{
name: 'clientFk',
label: t('route.cmr.list.clientFk'),
field: (row) => row.clientFk,
sortable: true,
name: 'clientFk',
},
{
name: 'country',
label: t('route.cmr.list.country'),
field: (row) => row.country,
align: 'left',
sortable: true,
label: t('route.cmr.list.country'),
name: 'country',
cardVisible: true,
},
{
name: 'shipped',
label: t('route.cmr.list.shipped'),
field: (row) => toDate(row.shipped),
align: 'center',
sortable: true,
label: t('route.cmr.list.shipped'),
name: 'shipped',
cardVisible: true,
component: 'date',
columnFilter: {
alias: 'c',
inWhere: true,
},
format: ({ date }) => toDate(date),
},
{
align: 'center',
name: 'warehouseFk',
label: t('globals.warehouse'),
field: ({ warehouseFk }) => warehouseFk,
align: 'center',
sortable: true,
component: 'select',
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
optionLabel: 'name',
optionValue: 'id',
},
},
{
name: 'icons',
align: 'center',
field: (row) => row.cmrFk,
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Ver cmr'),
icon: 'visibility',
isPrimary: true,
action: (row) => window.open(getCmrUrl(row?.cmrFk), '_blank'),
},
],
},
]);
@ -95,7 +106,7 @@ function getCmrUrl(value) {
return `${getApiUrl()}/api/Routes/${value}/cmr?access_token=${token}`;
}
function downloadPdfs() {
if (!selected.value.length) {
if (!selectedRows.value.length) {
Notify.create({
message: t('globals.noSelectedRows'),
type: 'warning',
@ -103,42 +114,51 @@ function downloadPdfs() {
return;
}
let cmrs = [];
for (let value of selected.value) cmrs.push(value.cmrFk);
for (let value of selectedRows.value) cmrs.push(value.cmrFk);
// prettier-ignore
return window.open(`${getApiUrl()}/api/Routes/downloadCmrsZip?ids=${cmrs.join(',')}&access_token=${token}`);
}
</script>
<template>
<VnSubToolbar>
<template #st-actions>
<QBtn
icon="cloud_download"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="downloadPdfs"
>
<QTooltip>{{ t('route.cmr.list.downloadCmrs') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<VnTable
ref="tableRef"
data-key="CmrList"
url="Routes/cmrs"
order="cmrFk DESC"
:columns="columns"
:right-search="true"
:use-model="true"
/>
default-mode="table"
v-model:selected="selectedRows"
table-height="85vh"
:table="{
'row-key': 'cmrFk',
selection: 'multiple',
}"
:disable-option="{ card: true }"
>
<template #column-ticketFk="{ row }">
<span class="link" @click.stop>
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</span>
</template>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.ticketFk }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnTable>
</template>
<style lang="scss" scoped>
.list {
padding-top: 15px;
padding-bottom: 15px;
max-width: 1000px;
width: 100%;
}
.grid-style-transition {
transition: transform 0.28s, background-color 0.28s;
}
#true {
background-color: $positive;
}
#false {
background-color: $negative;
}
:deep(.q-table th) {
max-width: 80px;
}
:deep(.q-table th:nth-child(3)) {
max-width: 100px;
}
</style>

88
src/pages/Route/Roadmap/RoadmapAddStopDialog.vue
View File

@ -1,88 +0,0 @@
<script setup>
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';
import { reactive, ref } from 'vue';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
const emit = defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
const { t } = useI18n();
const props = defineProps({
roadmapFk: {
type: Number,
required: true,
},
});
const isLoading = ref(false);
const roadmapStopForm = reactive({
roadmapFk: Number(props.roadmapFk) || 0,
warehouseFk: null,
eta: new Date().toISOString(),
description: '',
});
const updateDefaultStop = (data) => {
const eta = new Date(data.etd);
eta.setDate(eta.getDate() + 1);
roadmapStopForm.eta = eta.toISOString();
};
const onSave = async () => {
isLoading.value = true;
try {
await axios.post('RoadmapStops', { ...roadmapStopForm });
emit('ok');
} finally {
isLoading.value = false;
emit('hide');
}
};
</script>
<template>
<FetchData
:url="`Roadmaps/${roadmapFk}`"
auto-load
:filter="{ fields: ['etd'] }"
@on-fetch="updateDefaultStop"
/>
<QDialog ref="dialogRef" @hide="onDialogHide">
<QCard class="q-pa-lg">
<QCardSection class="row absolute absolute-top z-fullscreen">
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<RoadmapAddStopForm
:roadmap-fk="roadmapFk"
:form-data="roadmapStopForm"
layout="dialog"
/>
<QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
<QBtn
:label="t('globals.confirm')"
color="primary"
:loading="isLoading"
@click="onSave"
unelevated
/>
</QCardActions>
</QCard>
</QDialog>
</template>
<style lang="scss" scoped>
.card-section {
gap: 16px;
}
</style>
<i18n>
es:
Warehouse: Almacén
ETA date: Fecha ETA
ETA time: Hora ETA
Description: Descripción
</i18n>

45
src/pages/Route/Roadmap/RoadmapCreate.vue
View File

@ -1,45 +0,0 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue';
import FormModel from 'components/FormModel.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
const { t } = useI18n();
const router = useRouter();
const defaultInitialData = {
etd: Date.vnNew().toISOString(),
};
const onSave = (data, response) => {
router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
};
</script>
<template>
<VnSubToolbar />
<FormModel
:url="null"
url-create="Roadmaps"
model="roadmap"
:observe-form-changes="false"
:auto-load="false"
:form-initial-data="defaultInitialData"
@on-data-saved="onSave"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnInput v-model="data.name" :label="t('Roadmap')" clearable />
<VnInputDate v-model="data.etd" :label="t('ETD date')" />
<VnInputTime v-model="data.etd" :label="t('ETD hour')" />
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Roadmap: Troncal
ETD date: Fecha ETD
ETD hour: Hora ETD
</i18n>

46
src/pages/Route/Roadmap/RoadmapSummary.vue
View File

@ -2,14 +2,14 @@
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { QIcon, useQuasar } from 'quasar';
import { QIcon } from 'quasar';
import { dashIfEmpty, toDateHourMin } from 'src/filters';
import { useStateStore } from 'stores/useStateStore';
import VnLv from 'components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnLinkPhone from 'components/ui/VnLinkPhone.vue';
import RoadmapAddStopDialog from 'pages/Route/Roadmap/RoadmapAddStopDialog.vue';
const $props = defineProps({
id: {
@ -20,7 +20,6 @@ const $props = defineProps({
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const quasar = useQuasar();
const summary = ref(null);
const entityId = computed(() => $props.id || route.params.id);
@ -37,7 +36,7 @@ const columns = ref([
{
name: 'address',
label: t('Address'),
field: (row) => dashIfEmpty(row?.address?.nickname),
field: (row) => dashIfEmpty(row?.address?.addressFk),
sortable: true,
align: 'left',
},
@ -69,15 +68,6 @@ const filter = {
],
where: { id: entityId },
};
const openAddStopDialog = () => {
quasar
.dialog({
component: RoadmapAddStopDialog,
componentProps: { roadmapFk: entityId.value },
})
.onOk(() => summary.value.fetch());
};
</script>
<template>
@ -98,6 +88,10 @@ const openAddStopDialog = () => {
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnTitle
:url="`#/route/roadmap/${entityId}/basic-data`"
:text="t('Basic Data')"
/>
<VnLv :label="t('Carrier')">
<template #value>
<span class="link" v-if="entity?.supplier?.id">
@ -115,8 +109,6 @@ const openAddStopDialog = () => {
:label="t('Trailer Plate')"
:value="dashIfEmpty(entity?.trailerPlate)"
/>
</QCard>
<QCard class="vn-one">
<VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
<template #value>
<span>
@ -139,26 +131,10 @@ const openAddStopDialog = () => {
/>
</QCard>
<QCard class="vn-max">
<div class="flex items-center">
<a class="header" :href="`#/route/roadmap/${entityId}/stops`">
{{ t('Stops') }}
<QIcon name="open_in_new" color="primary">
<QTooltip>
{{ t('Go to stops') }}
</QTooltip>
</QIcon>
</a>
<QIcon
name="add_circle"
color="primary"
class="q-ml-lg header cursor-pointer"
@click.stop="openAddStopDialog"
>
<QTooltip>
{{ t('Add stop') }}
</QTooltip>
</QIcon>
</div>
<VnTitle
:url="`#/route/roadmap/${entityId}/stops`"
:text="t('Stops')"
/>
<QTable
:columns="columns"
:rows="entity?.roadmapStop"

310
src/pages/Route/RouteAutonomous.vue
View File

@ -1,33 +1,29 @@
<script setup>
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSummaryDialog } from 'composables/useSummaryDialog';
import { useState } from 'composables/useState';
import useNotify from 'composables/useNotify';
import axios from 'axios';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import RouteDescriptorProxy from 'pages/Route/Card/RouteDescriptorProxy.vue';
import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnLv from 'components/ui/VnLv.vue';
import useNotify from 'composables/useNotify';
import RouteAutonomousFilter from 'pages/Route/Card/RouteAutonomousFilter.vue';
import { useRouter } from 'vue-router';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import { useSummaryDialog } from 'composables/useSummaryDialog';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnDms from 'components/common/VnDms.vue';
import { useState } from 'composables/useState';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnLv from 'components/ui/VnLv.vue';
const { viewSummary } = useSummaryDialog();
const { notify } = useNotify();
const { t } = useI18n();
const stateStore = useStateStore();
const { t } = useI18n();
const { notify } = useNotify();
const router = useRouter();
const { viewSummary } = useSummaryDialog();
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const refreshKey = ref(0);
const state = useState();
const user = state.getUser();
const dmsDialog = ref({
@ -36,87 +32,89 @@ const dmsDialog = ref({
rowsToCreateInvoiceIn: [],
});
const selectedRows = ref([]);
const tableRef = ref();
const columns = computed(() => [
{
name: 'ID',
align: 'left',
name: 'id',
label: 'Id',
field: (row) => row.routeFk,
sortable: true,
align: 'left',
chip: {
condition: () => true,
},
isId: true,
},
{
name: 'date',
align: 'left',
name: 'created',
label: t('Date'),
field: (row) => toDate(row.created),
sortable: true,
align: 'left',
component: 'date',
columnFilter: {
alias: 'c',
inWhere: true,
},
format: ({ date }) => toDate(date),
},
{
name: 'agency-route',
align: 'left',
name: 'agencyModeName',
label: t('Agency route'),
field: (row) => row?.agencyModeName,
sortable: true,
align: 'left',
cardVisible: true,
},
{
name: 'agency-agreement',
align: 'left',
name: 'agencyAgreement',
label: t('Agency agreement'),
field: (row) => row?.agencyAgreement,
sortable: true,
align: 'left',
cardVisible: true,
},
{
align: 'left',
name: 'packages',
label: t('Packages'),
field: (row) => dashIfEmpty(row.packages),
sortable: true,
align: 'left',
},
{
name: 'volume',
align: 'left',
name: 'm3',
label: 'm³',
field: (row) => dashIfEmpty(row.m3),
sortable: true,
align: 'left',
cardVisible: true,
columnFilter: {
inWhere: true,
},
},
{
name: 'km',
align: 'left',
name: 'kmTotal',
label: t('Km'),
field: (row) => dashIfEmpty(row?.kmTotal),
sortable: true,
align: 'left',
cardVisible: true,
},
{
align: 'left',
name: 'price',
label: t('Price'),
field: (row) => (row?.price ? toCurrency(row.price) : '-'),
sortable: true,
align: 'left',
},
{
name: 'received',
align: 'left',
name: 'invoiceInFk',
label: t('Received'),
field: (row) => row?.invoiceInFk,
sortable: true,
align: 'left',
},
{
name: 'autonomous',
align: 'left',
name: 'supplierName',
label: t('Autonomous'),
field: (row) => row?.supplierName,
sortable: true,
align: 'left',
},
{
name: 'actions',
label: '',
sortable: false,
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Preview'),
icon: 'preview',
isPrimary: true,
action: (row) => viewSummary(row?.routeFk, RouteSummary),
},
],
},
]);
const refreshKey = ref(0);
const total = computed(() => {
return selectedRows.value.reduce((sum, item) => sum + item.price, 0);
});
@ -169,9 +167,8 @@ const onDmsSaved = async (dms, response) => {
refreshKey.value++;
};
function navigateToRouteSummary(event, row) {
router.push({ name: 'RouteSummary', params: { id: row.routeFk } });
}
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
@ -180,109 +177,63 @@ function navigateToRouteSummary(event, row) {
:label="t('Search autonomous')"
:info="t('You can search by autonomous reference')"
/>
<RightMenu>
<template #right-panel>
<RouteAutonomousFilter data-key="RouteAutonomousList" />
</template>
</RightMenu>
<QPage class="column items-center">
<div class="route-list">
<div class="q-pa-md">
<QCard class="vn-one q-py-sm q-px-lg flex justify-between">
<VnLv class="flex">
<template #label>
<span class="text-h6">{{ t('Total') }}</span>
</template>
<template #value>
<span class="text-h6 q-ml-md">{{ toCurrency(total) }}</span>
</template>
</VnLv>
<QBtn
icon="vn:invoice-in-create"
color="primary"
:disable="!selectedRows?.length"
@click="openDmsUploadDialog"
>
<QTooltip>
{{ t('Create invoiceIn') }}
</QTooltip>
</QBtn>
</QCard>
</div>
<VnPaginate
:key="refreshKey"
data-key="RouteAutonomousList"
url="AgencyTerms/filter"
:limit="20"
>
<template #body="{ rows }">
<div class="q-pa-md">
<QTable
v-model:selected="selectedRows"
:columns="columns"
:rows="rows"
flat
row-key="routeFk"
selection="multiple"
:rows-per-page-options="[0]"
hide-pagination
@row-click="navigateToRouteSummary"
>
<template #body-cell-ID="props">
<QTd :props="props">
<span class="link" @click.stop>
{{ props.value }}
<RouteDescriptorProxy :id="props.value" />
</span>
</QTd>
</template>
<template #body-cell-received="props">
<QTd :props="props">
<span :class="props.value && 'link'" @click.stop>
{{ dashIfEmpty(props.value) }}
<InvoiceInDescriptorProxy
v-if="props.value"
:id="props.value"
/>
</span>
</QTd>
</template>
<template #body-cell-autonomous="props">
<QTd :props="props">
<span class="link" @click.stop>
{{ props.value }}
<SupplierDescriptorProxy
v-if="props.row?.supplierFk"
:id="props.row?.supplierFk"
/>
</span>
</QTd>
</template>
<template #body-cell-actions="props">
<QTd :props="props">
<div class="table-actions">
<QIcon
name="preview"
size="sm"
color="primary"
@click.stop="
viewSummary(
props?.row?.routeFk,
RouteSummary
)
"
>
<QTooltip>{{ t('Preview') }}</QTooltip>
</QIcon>
</div>
</QTd>
</template>
</QTable>
</div>
<div class="q-pa-md">
<QCard class="vn-one q-py-sm q-px-lg flex justify-between">
<VnLv class="flex">
<template #label>
<span class="text-h6">{{ t('Total') }}</span>
</template>
</VnPaginate>
</div>
</QPage>
<template #value>
<span class="text-h6 q-ml-md">{{ toCurrency(total) }}</span>
</template>
</VnLv>
<QBtn
icon="vn:invoice-in-create"
color="primary"
:disable="!selectedRows?.length"
@click="openDmsUploadDialog"
>
<QTooltip>
{{ t('Create invoiceIn') }}
</QTooltip>
</QBtn>
</QCard>
</div>
<VnTable
ref="tableRef"
data-key="RouteAutonomousList"
url="AgencyTerms/filter"
:columns="columns"
:right-search="true"
default-mode="table"
v-model:selected="selectedRows"
table-height="85vh"
redirect="route"
:row-click="({ routeFk }) => tableRef.redirect(routeFk)"
:table="{
'row-key': '$index',
selection: 'multiple',
}"
>
<template #column-id="{ row }">
<span class="link" @click.stop>
{{ row.routeFk }}
<RouteDescriptorProxy :id="row.route.id" />
</span>
</template>
<template #column-invoiceInFk="{ row }">
<span class="link" @click.stop>
{{ row.invoiceInFk }}
<InvoiceInDescriptorProxy v-if="row.invoiceInFk" :id="row.invoiceInFk" />
</span>
</template>
<template #column-supplierName="{ row }">
<span class="link" @click.stop>
{{ row.supplierName }}
<SupplierDescriptorProxy :id="row.supplierFk" />
</span>
</template>
</VnTable>
<QDialog v-model="dmsDialog.show">
<VnDms
url="dms/uploadFile"
@ -292,29 +243,6 @@ function navigateToRouteSummary(event, row) {
/>
</QDialog>
</template>
<style lang="scss" scoped>
.route-list {
width: 100%;
}
.table-actions {
display: flex;
align-items: center;
gap: 12px;
i {
cursor: pointer;
}
}
th:last-child,
td:last-child {
background-color: var(--vn-section-color);
position: sticky;
right: 0;
}
</style>
<i18n>
es:
Search autonomous: Buscar autónomos

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

@ -1,50 +1,41 @@
<script setup>
import { useArrayData } from 'composables/useArrayData';
import { dashIfEmpty, toHour } from 'src/filters';
import { computed, onMounted, ref } from 'vue';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useValidator } from 'composables/useValidator';
import { useSession } from 'composables/useSession';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useQuasar } from 'quasar';
import { toDate } from 'src/filters';
import { useRouter } from 'vue-router';
import axios from 'axios';
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import FetchData from 'components/FetchData.vue';
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
import { useRouter } from 'vue-router';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useStateStore } from 'src/stores/useStateStore';
const { t } = useI18n();
const { validate } = useValidator();
const { viewSummary } = useSummaryDialog();
const quasar = useQuasar();
const session = useSession();
const paginate = ref();
const visibleColumns = ref([]);
const selectedRows = ref([]);
const workers = ref([]);
const agencyList = ref([]);
const vehicleList = ref([]);
const allColumnNames = ref([]);
const tableRef = ref([]);
const confirmationDialog = ref(false);
const startingDate = ref(null);
const refreshKey = ref(0);
const router = useRouter();
const stateStore = useStateStore();
const routeFilter = {
include: [
{
relation: 'workers',
scope: {
fields: ['id', 'firstName'],
},
},
],
};
const columns = computed(() => [
{
align: 'left',
@ -60,75 +51,114 @@ const columns = computed(() => [
},
{
align: 'left',
name: 'worker',
name: 'workerFk',
label: t('Worker'),
create: true,
component: 'select',
attrs: {
url: 'payrollComponents',
fields: ['id', 'name'],
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'nickname'],
optionValue: 'id',
optionLabel: 'nickname',
},
useLike: false,
cardVisible: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
},
{
name: 'agency',
label: t('Agency'),
align: 'left',
name: 'agencyModeFk',
label: t('Agency'),
isTitle: true,
cardVisible: true,
create: true,
component: 'select',
attrs: {
url: 'agencyModes',
fields: ['id', 'name'],
optionLabel: 'name',
optionValue: 'id',
},
},
{
name: 'vehicle',
align: 'left',
name: 'vehicleFk',
label: t('Vehicle'),
align: 'left',
cardVisible: true,
create: true,
component: 'select',
attrs: {
url: 'vehicles',
fields: ['id', 'numberPlate'],
optionLabel: 'numberPlate',
optionValue: 'id',
},
},
{
name: 'date',
align: 'left',
name: 'created',
label: t('Date'),
align: 'left',
cardVisible: true,
create: true,
component: 'date',
columnFilter: {
alias: 'c',
inWhere: true,
},
format: ({ date }) => toDate(date),
},
{
name: 'volume',
label: 'm³',
align: 'center',
name: 'm3',
label: 'volume',
cardVisible: true,
},
{
align: 'left',
name: 'description',
label: t('Description'),
align: 'left',
isTitle: true,
create: true,
component: 'input',
field: 'description',
},
{
align: 'left',
name: 'started',
label: t('hourStarted'),
align: 'left',
component: 'time',
},
{
align: 'left',
name: 'finished',
label: t('hourFinished'),
align: 'left',
component: 'time',
},
{
name: 'isServed',
label: t('Served'),
align: 'left',
name: 'isOk',
label: t('Served'),
component: 'checkbox',
},
{
align: 'right',
label: 'asdasd',
name: 'tableActions',
actions: [
{
title: t('Client ticket list'),
title: t('Add tickets'),
icon: 'vn:ticketAdd',
action: (row) => openTicketsDialog(row?.id),
},
{
title: t('Preview'),
icon: 'preview',
action: (row) => navigate(row.id),
action: (row) => viewSummary(row?.id, RouteSummary),
},
{
title: t('Route summary'),
icon: 'arrow_forward',
isPrimary: true,
action: (row) => navigate(row?.id),
},
],
},
@ -138,22 +168,14 @@ function navigate(id) {
router.push({ path: `/route/${id}` });
}
const updateRoute = async (route) => {
try {
return await axios.patch(`Routes/${route.id}`, route);
} catch (err) {
return err;
}
};
const cloneRoutes = () => {
if (!selectedRows.value.length || !startingDate.value) return;
axios.post('Routes/clone', {
created: startingDate.value,
ids: selectedRows.value.map((row) => row?.id),
});
refreshKey.value++;
tableRef.value.reload();
startingDate.value = null;
paginate.value.fetch();
};
const showRouteReport = () => {
@ -175,16 +197,13 @@ const showRouteReport = () => {
function markAsServed() {
selectedRows.value.forEach(async (row) => {
if (row?.id) await axios.patch(`Routes/${row?.id}`, { isOk: true });
await axios.patch(`Routes/${row?.id}`, { isOk: true });
});
refreshKey.value++;
tableRef.value.reload();
startingDate.value = null;
}
const openTicketsDialog = (id) => {
if (!id) {
return;
}
quasar
.dialog({
component: RouteListTicketsDialog,
@ -215,21 +234,10 @@ const openTicketsDialog = (id) => {
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
<QBtn color="primary" v-close-popup @click="cloneRoutes">
{{ t('globals.clone') }}
<VnLv
:label="t('route.summary.packages')"
:value="getTotalPackages(entity.tickets)"
/>
</QBtn>
</QCardActions>
</QCard>
</QDialog>
<FetchData
url="Workers/activeWithInheritedRole"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
<VnSubToolbar />
<VnTable
ref="tableRef"
@ -237,15 +245,24 @@ const openTicketsDialog = (id) => {
url="Routes/filter"
:columns="columns"
:right-search="true"
default-mode="table"
:is-editable="true"
:filter="routeFilter"
redirect="route"
:create="{
urlCreate: 'Routes',
title: t('Create route'),
onDataSaved: () => tableRef.reload(),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
}"
save-url="routes"
save-url="Routes/crud"
:disable-option="{ card: true }"
:use-model="true"
table-height="85vh"
v-model:selected="selectedRows"
:table="{
'row-key': 'id',
selection: 'multiple',
}"
>
<template #moreBeforeActions>
<QBtn

260
src/pages/Route/RouteRoadmap.vue
View File

@ -1,65 +1,68 @@
<script setup>
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { dashIfEmpty, toDateHourMin } from 'src/filters';
import { computed, ref } from 'vue';
import { dashIfEmpty } from 'src/filters';
import { toDate } from 'filters/index';
import { useQuasar } from 'quasar';
import toCurrency from 'filters/toCurrency';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import axios from 'axios';
import VnInputDate from 'components/common/VnInputDate.vue';
import { useSummaryDialog } from 'composables/useSummaryDialog';
import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
import { useRouter } from 'vue-router';
import RightMenu from 'src/components/common/RightMenu.vue';
import toCurrency from 'filters/toCurrency';
import axios from 'axios';
const stateStore = useStateStore();
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'src/components/common/VnInputTime.vue';
const { viewSummary } = useSummaryDialog();
const { t } = useI18n();
const quasar = useQuasar();
const router = useRouter();
const { viewSummary } = useSummaryDialog();
const to = Date.vnNew();
to.setDate(to.getDate() + 1);
to.setHours(0, 0, 0, 0);
const from = Date.vnNew();
from.setDate(from.getDate());
from.setHours(0, 0, 0, 0);
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const selectedRows = ref([]);
const columns = computed(() => [
{
name: 'roadmap',
align: 'left',
name: 'id',
label: 'Id',
isId: true,
},
{
align: 'left',
name: 'name',
label: t('Roadmap'),
field: (row) => row.name,
sortable: true,
align: 'left',
create: true,
cardVisible: true,
columnFilter: {
inWhere: true,
},
},
{
name: 'ETD',
align: 'left',
name: 'etd',
label: t('ETD'),
field: (row) => toDateHourMin(row.etd),
sortable: true,
align: 'left',
component: 'date',
columnFilter: {
alias: 'c',
inWhere: true,
},
format: ({ date }) => toDate(date),
cardVisible: true,
},
{
name: 'carrier',
align: 'left',
name: 'supplierFk',
label: t('Carrier'),
field: (row) => row.supplier?.nickname,
sortable: true,
align: 'left',
component: 'select',
attrs: {
url: 'suppliers',
fields: ['id', 'name'],
optionLabel: 'name',
optionValue: 'id',
},
},
{
name: 'plate',
name: 'tractorPlate',
label: t('Plate'),
field: (row) => row.tractorPlate,
sortable: true,
@ -80,30 +83,29 @@ const columns = computed(() => [
align: 'left',
},
{
name: 'actions',
label: '',
sortable: false,
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Ver cmr'),
icon: 'visibility',
isPrimary: true,
action: (row) => viewSummary(row?.id, RoadmapSummary),
},
],
},
]);
const refreshKey = ref(0);
const tableRef = ref(0);
const isCloneDialogOpen = ref(false);
const etdDate = ref(null);
const filter = {
include: { relation: 'supplier', scope: { fields: ['nickname'] } },
where: {
and: [{ etd: { gte: from } }, { etd: { lte: to } }],
},
};
const cloneSelection = async () => {
await axios.post('Roadmaps/clone', {
etd: etdDate.value,
ids: selectedRows.value.map((row) => row?.id),
});
refreshKey.value++;
tableRef.value.reload();
etdDate.value = null;
};
@ -125,11 +127,7 @@ function confirmRemove() {
promise: removeSelection,
},
})
.onOk(() => refreshKey.value++);
}
function navigateToRoadmapSummary(_, { id }) {
router.push({ name: 'RoadmapSummary', params: { id } });
.onOk(() => tableRef.value++);
}
</script>
@ -139,11 +137,6 @@ function navigateToRoadmapSummary(_, { id }) {
:label="t('Search roadmaps')"
:info="t('You can search by roadmap reference')"
/>
<RightMenu>
<template #right-panel>
<RoadmapFilter data-key="RoadmapList" />
</template>
</RightMenu>
<QDialog v-model="isCloneDialogOpen">
<QCard style="min-width: 350px">
<QCardSection>
@ -163,95 +156,55 @@ function navigateToRoadmapSummary(_, { id }) {
</QCardActions>
</QCard>
</QDialog>
<QPage class="column items-center">
<VnSubToolbar class="justify-end">
<template #st-actions>
<QBtn
icon="vn:clone"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="isCloneDialogOpen = true"
>
<QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
</QBtn>
<QBtn
icon="delete"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="confirmRemove"
>
<QTooltip>{{ t('Delete roadmap(s)') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<div class="route-list">
<VnPaginate
:key="refreshKey"
data-key="RoadmapList"
url="Roadmaps"
:limit="20"
:filter="filter"
<VnSubToolbar class="justify-end">
<template #st-actions>
<QBtn
icon="vn:clone"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="isCloneDialogOpen = true"
>
<template #body="{ rows }">
<div class="q-pa-md">
<QTable
v-model:selected="selectedRows"
:columns="columns"
:rows="rows"
flat
row-key="id"
selection="multiple"
:rows-per-page-options="[0]"
hide-pagination
:pagination="{ sortBy: 'ID', descending: true }"
@row-click="navigateToRoadmapSummary"
>
<template #body-cell-carrier="props">
<QTd :props="props">
<span v-if="props.value" class="link" @click.stop>
{{ props.value }}
<SupplierDescriptorProxy
:id="props.row?.supplier?.id"
/>
</span>
</QTd>
</template>
<template #body-cell-actions="props">
<QTd :props="props">
<div class="flex items-center table-actions">
<QIcon
name="preview"
size="sm"
color="primary"
@click.stop="
viewSummary(
props?.row?.id,
RoadmapSummary
)
"
class="cursor-pointer"
>
<QTooltip>{{ t('Preview') }}</QTooltip>
</QIcon>
</div>
</QTd>
</template>
</QTable>
</div>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<RouterLink :to="{ name: 'RouteRoadmapCreate' }">
<QBtn fab icon="add" color="primary" />
<QTooltip>
{{ t('Create roadmap') }}
</QTooltip>
</RouterLink>
</QPageSticky>
</QPage>
<QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
</QBtn>
<QBtn
icon="delete"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="confirmRemove"
>
<QTooltip>{{ t('Delete roadmap(s)') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<VnTable
ref="tableRef"
data-key="RoadmapList"
url="roadmaps"
:columns="columns"
:right-search="true"
:use-model="true"
default-mode="table"
v-model:selected="selectedRows"
table-height="85vh"
:table="{
selection: 'multiple',
}"
redirect="route/roadmap"
:create="{
urlCreate: 'Roadmaps',
title: t('Create routemap'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
}"
:disable-option="{ card: true }"
>
<template #more-create-dialog="{ data }">
<VnInputDate v-model="data.etd" />
<VnInputTime v-model="data.etd" />
</template>
</VnTable>
</template>
<style lang="scss" scoped>
@ -264,6 +217,7 @@ function navigateToRoadmapSummary(_, { id }) {
</style>
<i18n>
es:
Create routemap: Crear troncal
Search roadmaps: Buscar troncales
You can search by roadmap reference: Puedes buscar por referencia del troncal
Delete roadmap(s): Eliminar troncal(es)

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"

8
src/pages/Ticket/Card/TicketCard.vue
View File

@ -11,18 +11,14 @@ const { t } = useI18n();
const route = useRoute();
const routeName = computed(() => route.name);
const searchBarDataKeys = {
TicketSummary: 'TicketSummary',
TicketSale: 'TicketSale',
TicketPurchaseRequest: 'TicketPurchaseRequest',
};
</script>
<template>
<VnCard
data-key="Ticket"
base-url="Tickets"
:filter-panel="TicketFilter"
:descriptor="TicketDescriptor"
:search-data-key="searchBarDataKeys[routeName]"
search-data-key="TicketList"
:search-custom-route-redirect="routeName"
:searchbar-label="t('card.search')"
:searchbar-info="t('card.searchInfo')"

38
src/pages/Ticket/Card/TicketComponents.vue
View File

@ -71,39 +71,39 @@ const salesFilter = computed(() => ({
const columns = computed(() => [
{
label: t('components.item'),
label: t('ticketComponents.item'),
name: 'item',
align: 'left',
},
{
label: t('components.description'),
label: t('ticketComponents.description'),
name: 'description',
align: 'left',
},
{
label: t('components.quantity'),
label: t('ticketComponents.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
format: (val) => dashIfEmpty(val),
},
{
label: t('components.serie'),
label: t('ticketComponents.serie'),
name: 'serie',
align: 'left',
},
{
label: t('components.components'),
label: t('ticketComponents.components'),
name: 'components',
align: 'left',
},
{
label: t('components.import'),
label: t('ticketComponents.import'),
name: 'import',
align: 'left',
},
{
label: t('components.total'),
label: t('ticketComponents.total'),
name: 'total',
align: 'left',
},
@ -184,18 +184,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.total') }}
{{ t('ticketComponents.total') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('components.baseToCommission') }}:
>{{ t('ticketComponents.baseToCommission') }}:
</span>
<span>{{ toCurrency(getBase) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label"
>{{ t('components.totalWithoutVat') }}:
>{{ t('ticketComponents.totalWithoutVat') }}:
</span>
<span>{{ toCurrency(getTotal) }}</span>
</QCardSection>
@ -208,7 +208,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.components') }}
{{ t('ticketComponents.components') }}
</span>
</QCardSection>
<QCardSection
@ -232,24 +232,24 @@ onUnmounted(() => (stateStore.rightDrawer = false));
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.zoneBreakdown') }}
{{ t('ticketComponents.zoneBreakdown') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.price') }}:
{{ t('ticketComponents.price') }}:
</span>
<span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.bonus') }}:
{{ t('ticketComponents.bonus') }}:
</span>
<span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.zone') }}:
{{ t('ticketComponents.zone') }}:
</span>
<span class="link">
{{ dashIfEmpty(ticketData?.zone?.name) }}
@ -258,13 +258,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QCardSection>
<QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.volume') }}:
{{ t('ticketComponents.volume') }}:
</span>
<span>{{ ticketVolume }}</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.packages') }}:
{{ t('ticketComponents.packages') }}:
</span>
<span>{{ dashIfEmpty(ticketData?.packages) }}</span>
</QCardSection>
@ -277,12 +277,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
>
<QCardSection horizontal>
<span class="text-weight-bold text-subtitle1 text-center full-width">
{{ t('components.theoricalCost') }}
{{ t('ticketComponents.theoricalCost') }}
</span>
</QCardSection>
<QCardSection horizontal>
<span class="q-mr-xs color-vn-label">
{{ t('components.totalPrice') }}:
{{ t('ticketComponents.totalPrice') }}:
</span>
<span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
</QCardSection>

47
src/pages/Ticket/Card/TicketDms.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnDmsList from 'src/components/common/VnDmsList.vue';
import TicketDmsImportForm from 'src/pages/Ticket/Card/TicketDmsImportForm.vue';
const { t } = useI18n();
const dmsListRef = ref(null);
const showImportDialog = ref(false);
const onDataSaved = () => dmsListRef.value.dmsRef.fetch();
</script>
<template>
<VnDmsList
ref="dmsListRef"
model="TicketDms"
update-model="tickets"
delete-model="TicketDms"
download-model="dms"
default-dms-code="ticket"
filter="ticketFk"
allow-import
/>
<QDialog v-model="showImportDialog">
<TicketDmsImportForm @on-data-saved="onDataSaved()" />
</QDialog>
<QPageSticky position="bottom-right" :offset="[25, 90]">
<QBtn
fab
color="primary"
icon="file_copy"
@click="showImportDialog = true"
class="fill-icon"
>
<QTooltip>
{{ t('Import from existing') }}
</QTooltip>
</QBtn>
</QPageSticky>
</template>
<i18n>
es:
Import from existing: Importar desde existente
</i18n>

76
src/pages/Ticket/Card/TicketDmsImportForm.vue Normal file
View File

@ -0,0 +1,76 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import FetchData from 'components/FetchData.vue';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
const { notify } = useNotify();
const route = useRoute();
const dmsOptions = ref([]);
const dmsId = ref(null);
const importDms = async () => {
try {
if (!dmsId.value) throw new Error(t(`The document identifier can't be empty`));
const data = {
ticketFk: route.params.id,
dmsFk: dmsId.value,
};
await axios.post('ticketDms', data);
notify(t('globals.dataSaved'), 'positive');
dmsId.value = null;
emit('onDataSaved');
} catch (e) {
throw new Error(e.message);
}
};
</script>
<template>
<FetchData
url="Dms"
:filter="{ fields: ['id'], order: 'id ASC' }"
auto-load
@on-fetch="(data) => (dmsOptions = data)"
/>
<FormModelPopup
url-create="genera"
model="DmsImport"
:title="t('Select document id')"
:form-initial-data="{}"
:save-fn="importDms"
>
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('Document')"
:options="dmsOptions"
hide-selected
option-label="id"
option-value="id"
v-model="dmsId"
/>
</VnRow>
</template>
</FormModelPopup>
</template>
<i18n>
es:
Select document id: Introduzca id de gestion documental
Document: Documento
The document indentifier can't be empty: El número de documento no puede estar vacío
</i18n>

549
src/pages/Ticket/Card/TicketSaleTracking.vue Normal file
View File

@ -0,0 +1,549 @@
<script setup>
import { ref, computed, nextTick, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import { dashIfEmpty } from 'src/filters';
import useNotify from 'src/composables/useNotify.js';
import { toDateTimeFormat } from 'src/filters/date';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const { notify } = useNotify();
const saleTrackingTableDialogRef = ref(null);
const itemShelvingSaleDialogRef = ref(null);
const saleTrackingFetchDataRef = ref(null);
const sales = ref([]);
const saleTrackings = ref([]);
const itemShelvignsSales = ref([]);
const shelvingsOptions = ref([]);
const parkingsOptions = ref([]);
const saleTrackingUrl = computed(() => `SaleTrackings/${route.params.id}/filter`);
const oldQuantity = ref(null);
watch(
() => route.params.id,
async () => nextTick(async () => await saleTrackingFetchDataRef.value.fetch())
);
const columns = computed(() => [
{
label: t('ticketSaleTracking.isChecked'),
name: 'isChecked',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.item'),
name: 'item',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.description'),
name: 'description',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.parking'),
name: 'parking',
field: 'parkingCode',
align: 'left',
sortable: true,
format: (value) => dashIfEmpty(value),
},
{
label: '',
name: 'actions',
align: 'left',
sortable: true,
},
]);
const logTableColumns = computed(() => [
{
label: t('ticketSaleTracking.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.original'),
name: 'original',
field: 'originalQuantity',
align: 'original',
sortable: true,
},
{
label: t('ticketSaleTracking.worker'),
name: 'worker',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.state'),
name: 'state',
field: 'state',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.created'),
name: 'created',
field: 'created',
align: 'left',
sortable: true,
format: (value) => toDateTimeFormat(value),
},
]);
const shelvingsTableColumns = computed(() => [
{
label: t('ticketSaleTracking.quantity'),
name: 'quantity',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.worker'),
name: 'worker',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.shelving'),
name: 'shelving',
align: 'original',
sortable: true,
},
{
label: t('ticketSaleTracking.parking'),
name: 'parking',
align: 'left',
sortable: true,
},
{
label: t('ticketSaleTracking.created'),
name: 'created',
field: 'created',
align: 'left',
sortable: true,
format: (value) => toDateTimeFormat(value),
},
]);
const getSaleTrackings = async (sale) => {
try {
const filter = {
where: { saleFk: sale.saleFk },
order: ['itemFk DESC'],
};
const { data } = await axios.get(`SaleTrackings/listSaleTracking`, {
params: { filter: JSON.stringify(filter) },
});
saleTrackings.value = data;
} catch (error) {
console.error(error);
}
};
const showLog = async (sale) => {
await getSaleTrackings(sale);
saleTrackingTableDialogRef.value.show();
};
const getItemShelvingSales = async (sale) => {
try {
const filter = {
where: { saleFk: sale.saleFk },
};
const { data } = await axios.get(`ItemShelvingSales/filter`, {
params: { filter: JSON.stringify(filter) },
});
itemShelvignsSales.value = data;
} catch (error) {
console.error(error);
}
};
const showShelving = async (sale) => {
await getItemShelvingSales(sale);
itemShelvingSaleDialogRef.value.show();
};
const updateQuantity = async (sale) => {
try {
if (oldQuantity.value === sale.quantity) return;
const params = {
quantity: sale.quantity,
};
await axios.patch(`ItemShelvingSales/${sale.id}`, params);
oldQuantity.value = null;
} catch (error) {
console.error(error);
}
};
const updateParking = async (sale) => {
try {
const filter = {
fields: ['id'],
where: {
code: sale.shelvingFk,
},
};
const { data } = await axios.get(`Shelvings/findOne`, {
params: { filter: JSON.stringify(filter) },
});
const params = {
parkingFk: sale.parkingFk,
};
await axios.patch(`Shelvings/${data.id}`, params);
} catch (error) {
console.error(error);
}
};
const updateShelving = async (sale) => {
const params = {
shelvingFk: sale.shelvingFk,
};
const { data: patchResponseData } = await axios.patch(
`ItemShelvings/${sale.itemShelvingFk}`,
params
);
const filter = {
fields: ['parkingFk'],
where: {
code: patchResponseData.shelvingFk,
},
};
const { data: getResponseData } = await axios.get(`Shelvings/findOne`, { filter });
sale.parkingFk = getResponseData.parkingFk;
};
const saleTrackingNew = async (sale, stateCode, isChecked) => {
try {
const params = {
saleFk: sale.saleFk,
isChecked,
quantity: sale.quantity,
stateCode,
};
await axios.post(`SaleTrackings/new`, params);
notify(t('globals.dataSaved'), 'positive');
} catch (error) {
console.error(error);
}
};
const saleTrackingDel = async ({ saleFk }, stateCode) => {
try {
const params = {
saleFk,
stateCodes: [stateCode],
};
await axios.post(`SaleTrackings/delete`, params);
notify(t('globals.dataSaved'), 'positive');
} catch (error) {
console.error(error);
}
};
const clickSaleGroupDetail = async (sale) => {
try {
if (!sale.saleGroupDetailFk) return;
await axios.delete(`SaleGroupDetails/${sale.saleGroupDetailFk}`);
sale.hasSaleGroupDetail = false;
notify(t('globals.dataSaved'), 'positive');
} catch (error) {
console.error(error);
}
};
const clickPreviousSelected = (sale) => {
try {
qCheckBoxController(sale, 'isPreviousSelected');
if (!sale.isPreviousSelected) sale.isPrevious = false;
} catch (error) {
console.error(error);
}
};
const clickPrevious = (sale) => {
try {
qCheckBoxController(sale, 'isPrevious');
if (sale.isPrevious) sale.isPreviousSelected = true;
} catch (error) {
console.error(error);
}
};
const qCheckBoxController = (sale, action) => {
const STATE_CODES = {
isControled: 'CHECKED',
isPrepared: 'PREPARED',
isPrevious: 'PREVIOUS_PREPARATION',
isPreviousSelected: 'PREVIOUS_PREPARATION',
};
const stateCode = STATE_CODES[action];
try {
if (!sale[action]) {
saleTrackingNew(sale, stateCode, true);
sale[action] = true;
} else {
saleTrackingDel(sale, stateCode);
sale[action] = false;
}
} catch (error) {
console.error(error);
}
};
</script>
<template>
<FetchData
ref="saleTrackingFetchDataRef"
:url="saleTrackingUrl"
:filter="{ order: ['concept ASC', 'quantity DESC'] }"
auto-load
@on-fetch="(data) => (sales = data)"
/>
<FetchData
url="Shelvings"
auto-load
@on-fetch="(data) => (shelvingsOptions = data)"
/>
<FetchData url="Parkings" auto-load @on-fetch="(data) => (parkingsOptions = data)" />
<QTable
:rows="sales"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
>
<template #body-cell-isChecked="{ row }">
<QTd @click.stop>
<QCheckbox
:model-value="!!row.hasSaleGroupDetail"
color="pink"
class="pink"
:toggle-indeterminate="false"
@update:model-value="clickSaleGroupDetail(row)"
>
<QTooltip>
{{ t('ticketSaleTracking.saleGroupDetail') }}
</QTooltip>
</QCheckbox>
<QCheckbox
:model-value="!!row.isPreviousSelected"
color="info"
class="info"
:toggle-indeterminate="false"
@update:model-value="clickPreviousSelected(row)"
>
<QTooltip>
{{ t('ticketSaleTracking.previousSelected') }}
</QTooltip>
</QCheckbox>
<QCheckbox
:model-value="!!row.isPrevious"
color="cyan"
class="cyan"
:toggle-indeterminate="false"
@update:model-value="clickPrevious(row)"
>
<QTooltip>
{{ t('ticketSaleTracking.previous') }}
</QTooltip>
</QCheckbox>
<QCheckbox
:model-value="!!row.isPrepared"
color="warning"
class="warning"
:toggle-indeterminate="false"
@update:model-value="qCheckBoxController(row, 'isPrepared')"
>
<QTooltip>
{{ t('ticketSaleTracking.prepared') }}
</QTooltip>
</QCheckbox>
<QCheckbox
:model-value="!!row.isControled"
color="yellow"
class="yellow"
:toggle-indeterminate="false"
@update:model-value="qCheckBoxController(row, 'isControled')"
>
<QTooltip>
{{ t('ticketSaleTracking.checked') }}
</QTooltip>
</QCheckbox>
</QTd>
</template>
<template #body-cell-item="{ row }">
<QTd @click.stop>
<div>
<QBtn flat color="primary">
{{ row.itemFk }}
</QBtn>
<ItemDescriptorProxy :id="row.itemFk" />
</div>
</QTd>
</template>
<template #body-cell-description="{ row }">
<QTd class="col">
<div class="column">
<span>{{ row.concept }}</span>
<span v-if="row.subName" class="color-vn-label">
{{ row.subName }}
</span>
<FetchedTags :item="row" :max-length="6" tag="value" />
</div>
</QTd>
</template>
<template #body-cell-actions="{ row }">
<QTd>
<QBtn
@click.stop="showLog(row)"
color="primary"
icon="history"
size="md"
flat
>
<QTooltip class="text-no-wrap">
{{ t('ticketSaleTracking.historyAction') }}
</QTooltip>
</QBtn>
<QBtn
@click.stop="showShelving(row)"
color="primary"
icon="vn:inventory"
size="md"
flat
>
<QTooltip class="text-no-wrap">
{{ t('ticketSaleTracking.shelvingAction') }}
</QTooltip>
</QBtn>
</QTd>
</template>
</QTable>
<QDialog
ref="saleTrackingTableDialogRef"
transition-show="scale"
transition-hide="scale"
>
<QTable
data-key="saleTrackingLog"
:rows="saleTrackings"
:columns="logTableColumns"
class="q-pa-sm"
>
<template #body-cell-worker="{ row }">
<QTd auto-width>
<QBtn flat dense color="primary">{{ row.name }}</QBtn>
<WorkerDescriptorProxy :id="row.workerFk" />
</QTd>
</template>
</QTable>
</QDialog>
<QDialog
ref="itemShelvingSaleDialogRef"
transition-show="scale"
transition-hide="scale"
>
<QTable
data-key="itemShelvingsSales"
:rows="itemShelvignsSales"
:columns="shelvingsTableColumns"
class="q-pa-sm"
>
<template #body-cell-quantity="{ row }">
<QTd auto-width>
<VnInput
v-model.number="row.quantity"
@keyup.enter="updateQuantity(row)"
@blur="updateQuantity(row)"
@focus="oldQuantity = row.quantity"
/>
</QTd>
</template>
<template #body-cell-worker="{ row }">
<QTd auto-width>
<QBtn flat dense color="primary">{{ row.name }}</QBtn>
<WorkerDescriptorProxy :id="row.userFk" />
</QTd>
</template>
<template #body-cell-shelving="{ row }">
<QTd auto-width>
<VnSelect
:options="shelvingsOptions"
hide-selected
option-label="code"
option-value="code"
v-model="row.shelvingFk"
@update:model-value="updateShelving(row)"
style="max-width: 120px"
/>
</QTd>
</template>
<template #body-cell-parking="{ row }">
<QTd auto-width>
<VnSelect
:options="parkingsOptions"
hide-selected
option-label="code"
option-value="id"
v-model="row.parkingFk"
@update:model-value="updateParking(row)"
style="max-width: 120px"
/>
</QTd>
</template>
</QTable>
</QDialog>
</template>
<style lang="scss">
$estados: (
'info': var(--q-info),
'warning': var(--q-warning),
'cyan': #00bcd4,
'pink': pink,
'yellow': #ffeb3b,
);
@each $estado, $color in $estados {
.q-checkbox.#{$estado} {
> .q-checkbox__inner > .q-checkbox__bg.absolute {
border-radius: 50% !important;
& .q-checkbox__svg > .q-checkbox__truthy {
stroke: $color;
}
}
}
}
</style>

23
src/pages/Ticket/TicketAdvance.vue
View File

@ -9,6 +9,8 @@ import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.v
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnProgress from 'src/components/common/VnProgressModal.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import TicketAdvanceFilter from './TicketAdvanceFilter.vue';
import { dashIfEmpty, toCurrency } from 'src/filters';
import { useVnConfirm } from 'composables/useVnConfirm';
@ -42,9 +44,9 @@ const exprBuilder = (param, value) => {
case 'notMovableLines':
case 'futureZoneFk':
return { [param]: value };
case 'ipt':
case 'iptColFilter':
return { ipt: { like: `%${value}%` } };
case 'futureIpt':
case 'futureIptColFilter':
return { futureIpt: { like: `%${value}%` } };
}
};
@ -55,6 +57,7 @@ const arrayData = useArrayData('AdvanceTickets', {
url: 'Tickets/getTicketsAdvance',
userParams: userParams,
exprBuilder: exprBuilder,
limit: 0,
});
const { store } = arrayData;
const tickets = computed(() =>
@ -110,7 +113,7 @@ const ticketColumns = computed(() => [
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'ipt',
filterParamKey: 'iptColFilter',
type: 'select',
filterValue: null,
event: getInputEvents,
@ -194,7 +197,7 @@ const ticketColumns = computed(() => [
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'futureIpt',
filterParamKey: 'futureIptColFilter',
type: 'select',
filterValue: null,
event: getInputEvents,
@ -451,7 +454,8 @@ onMounted(async () => {
userParams.dateFuture = tomorrow;
userParams.dateToAdvance = today;
userParams.warehouseFk = user.value.warehouseFk;
await arrayData.addFilter({ userParams });
const filter = { limit: 0 };
await arrayData.addFilter({ filter, userParams });
});
</script>
@ -521,6 +525,11 @@ onMounted(async () => {
</QBtn>
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<TicketAdvanceFilter data-key="AdvanceTickets" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
:rows="tickets"
@ -617,7 +626,7 @@ onMounted(async () => {
</template>
<template #body-cell-ticketId="{ row }">
<QTd>
<QBtn flat color="primary">
<QBtn flat class="link">
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</QBtn>
@ -649,7 +658,7 @@ onMounted(async () => {
</template>
<template #body-cell-futureId="{ row }">
<QTd class="vertical-separator">
<QBtn flat color="primary" dense>
<QBtn flat class="link" dense>
{{ row.futureId }}
<TicketDescriptorProxy :id="row.futureId" />
</QBtn>

173
src/pages/Ticket/TicketAdvanceFilter.vue Normal file
View File

@ -0,0 +1,173 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import axios from 'axios';
import { onMounted } from 'vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
exprBuilder: {
type: Function,
default: null,
},
});
const warehousesOptions = ref([]);
const itemPackingTypes = ref([]);
const getItemPackingTypes = async () => {
try {
const filter = {
where: { isActive: true },
};
const { data } = await axios.get('ItemPackingTypes', {
params: { filter: JSON.stringify(filter) },
});
itemPackingTypes.value = data.map((ipt) => ({
description: t(ipt.description),
code: ipt.code,
}));
} catch (error) {
console.error(error);
}
};
onMounted(async () => await getItemPackingTypes());
</script>
<template>
<FetchData
url="Warehouses"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:hidden-tags="['search']"
:unremovable-params="['warehouseFk', 'dateFuture', 'dateToAdvance']"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QItem class="q-my-sm">
<QItemSection>
<VnInputDate
v-model="params.dateFuture"
:label="t('params.dateFuture')"
is-outlined
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInputDate
v-model="params.dateToAdvance"
:label="t('params.dateToAdvance')"
is-outlined
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('params.futureIpt')"
v-model="params.futureIpt"
:options="itemPackingTypes"
option-value="code"
option-label="description"
:info="t('iptInfo')"
@update:model-value="searchFn()"
dense
outlined
rounded
>
</VnSelect>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('params.ipt')"
v-model="params.ipt"
:options="itemPackingTypes"
option-value="code"
option-label="description"
:info="t('iptInfo')"
@update:model-value="searchFn()"
dense
outlined
rounded
>
</VnSelect>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
:label="t('params.itemPackingTypes')"
v-model="params.itemPackingTypes"
toggle-indeterminate
:false-value="null"
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('params.warehouseFk')"
v-model="params.warehouseFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
@update:model-value="searchFn()"
dense
outlined
rounded
>
</VnSelect>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
iptInfo: IPT
params:
dateFuture: Origin date
dateToAdvance: Destination date
futureIpt: Origin IPT
ipt: Destination IPT
itemPackingTypes: 100% movable
warehouseFk: Warehouse
es:
Horizontal: Horizontal
Vertical: Vertical
iptInfo: Encajado
params:
dateFuture: fecha origen
dateToAdvance: Fecha destino
futureIpt: IPT Origen
ipt: IPT destino
itemPackingTypes: 100% movible
warehouseFk: Almacén
</i18n>

13
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();
@ -16,11 +15,11 @@ const props = defineProps({
},
});
const workers = ref();
const provinces = ref();
const states = ref();
const agencies = ref();
const warehouses = ref();
const workers = ref([]);
const provinces = ref([]);
const states = ref([]);
const agencies = ref([]);
const warehouses = ref([]);
</script>
<template>
@ -34,7 +33,7 @@ const warehouses = ref();
@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>

4
src/pages/Ticket/TicketFuture.vue
View File

@ -442,7 +442,7 @@ onMounted(async () => {
</template>
<template #body-cell-ticketId="{ row }">
<QTd>
<QBtn flat color="primary">
<QBtn flat class="link">
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</QBtn>
@ -489,7 +489,7 @@ onMounted(async () => {
</template>
<template #body-cell-futureId="{ row }">
<QTd class="vertical-separator">
<QBtn flat color="primary" dense>
<QBtn flat class="link" dense>
{{ row.futureId }}
<TicketDescriptorProxy :id="row.futureId" />
</QBtn>

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

@ -1,117 +1,311 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { computed, ref } from 'vue';
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, toCurrency } from 'src/filters/index';
import TicketSummary from './Card/TicketSummary.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import TicketFilter from './TicketFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnRow from 'src/components/ui/VnRow.vue';
const router = useRouter();
const { t } = useI18n();
const stateStore = useStateStore();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const clientsOptions = ref([]);
const addressesOptions = ref([]);
const agenciesOptions = ref([]);
const selectedClient = ref();
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const columns = computed(() => [
{
align: 'left',
name: 'stateFk',
label: t('ticketList.state'),
columnFilter: {
name: 'stateFk',
component: 'select',
attrs: {
url: 'States',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
name: 'id',
label: t('ticketList.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'nickname',
label: t('ticketList.nickname'),
isTitle: true,
},
const from = Date.vnNew();
const to = Date.vnNew();
to.setDate(to.getDate() + 1);
{
align: 'left',
name: 'shipped',
cardVisible: true,
label: t('ticketList.shipped'),
columnFilter: {
component: 'date',
alias: 't',
inWhere: true,
},
format: ({ shipped }) => toDate(shipped),
},
{
align: 'left',
name: 'zoneFk',
label: t('ticketList.zone'),
columnFilter: {
component: 'select',
attrs: {
url: 'Zones',
fields: ['id', 'name'],
},
alias: 't',
inWhere: true,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.zoneName),
},
{
align: 'left',
label: t('ticketList.salesPerson'),
name: 'salesPersonFk',
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
optionFilter: 'firstName',
useLike: false,
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
},
{
align: 'left',
name: 'totalWithVat',
label: t('ticketList.totalWithVat'),
cardVisible: true,
columnFilter: {
component: 'number',
inWhere: true,
},
format: (row) => toCurrency(row.totalWithVat),
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('ticketList.summary'),
icon: 'preview',
action: (row) => viewSummary(row.id, TicketSummary),
},
],
},
]);
const userParams = {
from: from.toISOString(),
to: to.toISOString(),
const onClientSelected = async (formData) => {
await fetchClient(formData);
await fetchAddresses(formData);
};
function navigate(id) {
router.push({ path: `/ticket/${id}` });
}
const fetchAvailableAgencies = async (formData) => {
if (!formData.warehouseId || !formData.addressId || !formData.landed) return;
let params = {
warehouseFk: formData.warehouseId,
addressFk: formData.addressId,
landed: formData.landed,
};
const { data } = await axios.get('Agencies/getAgenciesWithWarehouse', { params });
agenciesOptions.value = data;
const defaultAgency = agenciesOptions.value.find(
(agency) =>
agency.agencyModeFk === selectedClient.value.defaultAddress.agencyModeFk
);
if (defaultAgency) formData.agencyModeId = defaultAgency.agencyModeFk;
};
const fetchClient = async (formData) => {
try {
const filter = {
include: {
relation: 'defaultAddress',
scope: {
fields: ['id', 'agencyModeFk'],
},
},
where: { id: formData.clientId },
};
const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get('Clients', { params });
const [client] = data;
selectedClient.value = client;
} catch (err) {
console.error('Error fetching client');
}
};
const fetchAddresses = async (formData) => {
try {
if (!formData.clientId) return;
const filter = {
fields: ['nickname', 'street', 'city', 'id'],
where: { isActive: true },
order: 'nickname ASC',
};
const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get(`Clients/${formData.clientId}/addresses`, {
params,
});
addressesOptions.value = data;
const { defaultAddress } = selectedClient.value;
formData.addressId = defaultAddress.id;
} catch (err) {
console.error(`Error fetching addresses`, err);
return err.response;
}
};
const getColor = (row) => {
return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
};
</script>
<template>
<VnSearchbar
data-key="TicketList"
data-key="Tickets"
:label="t('Search ticket')"
:info="t('You can search by ticket id or alias')"
/>
<RightMenu>
<template #right-panel>
<TicketFilter data-key="TicketList" />
<VnTable
ref="tableRef"
data-key="Tickets"
url="Tickets/filter"
:create="{
urlCreate: 'Tickets/new',
title: t('ticketList.createTicket'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
}"
default-mode="table"
:columns="columns"
redirect="ticket"
auto-load
>
<template #more-create-dialog="{ data }">
<VnRow>
<VnSelect
url="Clients"
:label="t('ticketList.client')"
v-model="data.clientId"
:options="clientsOptions"
option-value="id"
option-label="name"
hide-selected
@update:model-value="(client) => onClientSelected(data)"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt.name }}
</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt.id}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnSelect
url="Addresses"
:label="t('ticket.create.address')"
v-model="data.addressId"
:options="addressesOptions"
option-value="id"
option-label="nickname"
hide-selected
:disable="!data.clientId"
@update:model-value="() => fetchAvailableAgencies(data)"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt.nickname }}
</QItemLabel>
<QItemLabel caption>
{{ `${scope.opt.street}, ${scope.opt.city}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
placeholder="dd-mm-aaa"
:label="t('ticket.create.landed')"
v-model="data.landed"
@update:model-value="() => fetchAvailableAgencies(data)"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
url="Warehouses"
:label="t('ticket.create.warehouse')"
v-model="data.warehouseId"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
@update:model-value="() => fetchAvailableAgencies(data)"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('ticket.create.agency')"
v-model="data.agencyModeId"
:options="agenciesOptions"
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!data.clientId || !data.landed || !data.warehouseId"
/>
</div>
</VnRow>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="TicketList"
url="Tickets/filter"
:user-params="userParams"
order="id DESC"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:id="row.id"
:title="`${row.nickname}`"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv
:label="t('ticket.list.nickname')"
:value="row.nickname"
/>
<VnLv :label="t('ticket.list.state')">
<template #value>
<QBadge
text-color="black"
:color="row.classColor ?? 'orange'"
class="q-ma-none"
dense
>
{{ row.state }}
</QBadge>
</template>
</VnLv>
<VnLv
:label="t('ticket.list.shipped')"
:value="toDate(row.shipped)"
/>
<VnLv :label="t('Zone')" :value="row.zoneName" />
<VnLv
:label="t('ticket.list.salesPerson')"
:value="row.salesPerson"
/>
<VnLv
:label="t('ticket.list.total')"
:value="toCurrency(row.totalWithVat)"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, TicketSummary)"
color="primary"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn :to="{ name: 'TicketCreate' }" fab icon="add" color="primary">
<QTooltip>
{{ t('New ticket') }}
</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
<template #column-stateFk="{ row }">
<QChip :class="getColor(row)" dense square>
{{ row.state }}
</QChip>
</template>
</VnTable>
</template>
<i18n>

385
src/pages/Ticket/TicketWeekly.vue
View File

@ -1,40 +1,28 @@
<script setup>
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
import { onMounted, ref, computed, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectCache from 'src/components/common/VnSelectCache.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { dashIfEmpty } from 'src/filters';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue';
const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n();
const { openConfirmationModal } = useVnConfirm();
const { notify } = useNotify();
const paginateRef = ref(null);
const agencyModesOptions = ref([]);
const visibleColumns = ref([]);
const { openConfirmationModal } = useVnConfirm();
const allColumnNames = ref([]);
const arrayData = useArrayData('WeeklyTickets');
const { store } = arrayData;
const tableRef = ref();
const weekdays = [
{ id: 0, name: t('weekdays.mon') },
{ id: 1, name: t('weekdays.tue') },
@ -45,113 +33,132 @@ const weekdays = [
{ id: 6, name: t('weekdays.sun') },
];
const exprBuilder = (param, value) => {
switch (param) {
case 'clientName':
return { 'c.name': value };
case 'nickName':
return { 'u.name': value };
}
};
const params = reactive({});
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await paginateRef.value.addFilter(null, params);
} catch (err) {
console.error('Error applying column filter', err);
}
};
const getInputEvents = (col) => ({ 'keyup.enter': () => applyColumnFilter(col) });
const columns = computed(() => [
{
align: 'left',
name: 'ticketFk',
label: t('weeklyTickets.id'),
name: 'id',
field: 'ticketFk',
align: 'left',
sortable: true,
columnFilter: null,
chip: {
condition: () => true,
},
isId: true,
cardVisible: true,
},
{
align: 'left',
name: 'clientFk',
label: t('weeklyTickets.client'),
name: 'client',
field: 'clientName',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
isTitle: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'Clients',
optionLabel: 'name',
optionValue: 'id',
isWhere: true,
},
format: (val) => dashIfEmpty(val),
columnField: {
component: null,
},
format: (row) => row.clientName,
},
{
align: 'left',
name: 'weekDay',
label: t('weeklyTickets.shipment'),
name: 'shipment',
field: 'weekDay',
align: 'left',
sortable: true,
columnFilter: null,
},
{
label: t('weeklyTickets.agency'),
name: 'agency',
field: 'agencyModeFk',
align: 'left',
sortable: true,
columnFilter: null,
},
{
label: t('weeklyTickets.warehouse'),
name: 'warehouse',
field: 'warehouseName',
align: 'left',
sortable: true,
columnFilter: null,
},
{
label: t('weeklyTickets.salesperson'),
field: 'salesperson',
name: 'salesperson',
align: 'left',
sortable: true,
cardVisible: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
filterParamKey: 'nickName',
component: 'select',
attrs: {
dense: true,
options: weekdays,
optionLabel: weekdays.name,
optionValue: weekdays.id,
},
inWhere: true,
},
},
{
label: '',
name: 'actions',
align: 'left',
columnFilter: null,
label: t('weeklyTickets.agency'),
name: 'agencyModeFk',
cardVisible: true,
columnFilter: {
component: 'select',
alias: 'tw',
attrs: {
url: 'AgencyModes',
fields: ['id', 'name'],
},
inWhere: true,
},
},
{
align: 'left',
name: 'warehouseFk',
label: t('weeklyTickets.warehouse'),
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Warehouses',
fields: ['id', 'name'],
},
inWhere: true,
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseName),
},
{
align: 'left',
name: 'id',
label: t('weeklyTickets.salesperson'),
columnFilter: {
component: 'select',
alias: 'u',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesperson' },
},
inWhere: true,
},
columnField: {
component: null,
},
cardVisible: true,
format: (row) => row.userName,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('ticketWeekly.delete'),
icon: 'delete',
action: (row) =>
openConfirmationModal(
t('You are going to delete this weekly ticket'),
t(
'This ticket will be removed from weekly tickets! Continue anyway?'
),
() => deleteWeekly(row.ticketFk)
),
isPrimary: true,
},
],
},
]);
const redirectToTicketSummary = (ticketFk) =>
router.push({ name: 'TicketSummary', params: { id: ticketFk } });
const deleteWeekly = async (ticketFk) => {
try {
await axios.delete(`TicketWeeklies/${ticketFk}`);
notify(t('globals.dataSaved'), 'positive');
const ticketIndex = store.data.findIndex((e) => e.ticketFk == ticketFk);
store.data.splice(ticketIndex, 1);
location.reload();
} catch (err) {
console.error('Error deleting weekly', err);
}
@ -176,147 +183,61 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
<FetchData
url="AgencyModes/isActive"
:filter="{ fields: ['id', 'name'], order: 'name' }"
auto-load
@on-fetch="(data) => (agencyModesOptions = data)"
/>
<VnSearchbar
data-key="WeeklyTickets"
:label="t('weeklyTickets.search')"
:info="t('weeklyTickets.searchInfo')"
/>
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="itemsIndex"
labels-traductions-path="weeklyTickets"
@on-config-saved="visibleColumns = [...$event, 'actions']"
<VnTable
ref="tableRef"
data-key="WeeklyTickets"
url="TicketWeeklies/filter"
:columns="columns"
default-mode="table"
:use-model="true"
:disable-option="{ card: true }"
auto-load
>
<template #column-ticketFk="{ row }">
<span class="link" @click.stop>
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</span>
</template>
<template #column-weekDay="{ row }">
<VnSelect
:options="weekdays"
hide-selected
option-label="name"
option-value="id"
v-model="row.weekDay"
@update:model-value="onUpdate(row.ticketFk, 'weekDay', $event)"
/>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<VnPaginate
ref="paginateRef"
data-key="WeeklyTickets"
url="TicketWeeklies/filter"
:order="['weekDay', 'ticketFk']"
:limit="20"
:expr-builder="exprBuilder"
:user-params="params"
:offset="50"
auto-load
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:visible-columns="visibleColumns"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
>
<template #top-row="{ cols }">
<QTr>
<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-id="{ row }">
<QTd @click.stop>
<QBtn flat color="primary">
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</QBtn>
</QTd>
</template>
<template #body-cell-salesperson="{ row }">
<QTd @click.stop>
<QBtn flat color="primary">
{{ row.userName }}
<WorkerDescriptorProxy :id="row.workerFk" />
</QBtn>
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd @click.stop>
<QBtn flat color="primary" dense>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
</QTd>
</template>
<template #body-cell-shipment="{ row }">
<QTd @click.stop>
<VnSelect
:options="weekdays"
hide-selected
option-label="name"
option-value="id"
v-model="row.weekDay"
@update:model-value="
onUpdate(row.ticketFk, 'weekDay', $event)
"
/>
</QTd>
</template>
<template #body-cell-agency="{ row }">
<QTd @click.stop>
<VnSelect
:options="agencyModesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="row.agencyModeFk"
@update:model-value="
onUpdate(row.ticketFk, 'agencyModeFk', $event)
"
/>
</QTd>
</template>
<template #body-cell-actions="{ row }">
<QTd>
<QIcon
@click.stop="
openConfirmationModal(
t('You are going to delete this weekly ticket'),
t(
'This ticket will be removed from weekly tickets! Continue anyway?'
),
() => deleteWeekly(row.ticketFk)
)
"
class="q-ml-sm cursor-pointer"
color="primary"
name="delete"
size="sm"
>
<QTooltip>
{{ t('globals.delete') }}
</QTooltip>
</QIcon>
</QTd>
</template>
</QTable>
</template>
</VnPaginate>
</QPage>
<template #column-agencyModeFk="{ row }">
<VnSelectCache
url="AgencyModes/isActive"
:row="row"
:find="['agencyModeFk', 'agencyModeName']"
v-model="row.agencyModeFk"
@update:model-value="onUpdate(row.ticketFk, 'agencyModeFk', $event)"
>
{{ console.log('row: ', row) }}
</VnSelectCache>
</template>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
<template #column-id="{ row }">
<span class="link" @click.stop>
{{ row.userName }}
<WorkerDescriptorProxy :id="row.workerFk" />
</span>
</template>
</VnTable>
</template>
<i18n>

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

@ -168,6 +168,24 @@ weeklyTickets:
salesperson: Salesperson
search: Search weekly tickets
searchInfo: Search weekly tickets by id or client id
ticketSaleTracking:
isChecked: Is checked
item: Item
description: Description
quantity: Quantity
parking: Parking
historyAction: Log states
shelvingAction: Shelvings sale
original: Original
worker: Worker
state: State
created: Created
shelving: Shelving
saleGroupDetail: sale group detail
previousSelected: previous selected
previous: previous
prepared: prepared
checked: checked
service:
pay: Pay
description: Description
@ -178,7 +196,7 @@ 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:
ticketComponents:
item: Item
description: Description
quantity: Quantity
@ -207,3 +225,14 @@ package:
added: Added
addPackage: Add package
removePackage: Remove package
ticketList:
id: Id
nickname: Nickname
state: State
shipped: Shipped
zone: Zone
salesPerson: Sales person
totalWithVat: Total with VAT
summary: Summary
client: Customer
createTicket: Create ticket

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

@ -164,7 +164,7 @@ ticketSale:
shipped: F. Envío
agency: Agencia
address: Consignatario
components:
ticketComponents:
item: Artículo
description: Descripción
quantity: Cantidad
@ -207,6 +207,35 @@ package:
added: Añadido
addPackage: Añadir embalaje
removePackage: Quitar embalaje
ticketSaleTracking:
isChecked: Comprobado
item: Artículo
description: Descripción
quantity: Cantidad
parking: Parking
historyAction: Historial estados
shelvingAction: Carros línea
original: Original
worker: Trabajador
state: Estado
created: Fecha creación
shelving: Matrícula
saleGroupDetail: detalle grupo líneas
previousSelected: previa seleccionado
previous: previa
prepared: preparado
checked: revisado
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
ticketList:
id: Id
nickname: Alias
state: Estado
shipped: F. Envío
zone: Zona
salesPerson: Comercial
totalWithVat: Total con IVA
summary: Resumen
client: Cliente
createTicket: Crear ticket

225
src/pages/Travel/TravelFilter.vue
View File

@ -1,225 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const warehousesOptions = ref([]);
const continentsOptions = ref([]);
const agenciesOptions = ref([]);
const add = (paramsObj, key) => {
if (paramsObj[key] === undefined) {
paramsObj[key] = 1;
} else {
paramsObj[key]++;
}
};
const decrement = (paramsObj, key) => {
if (paramsObj[key] === 0) return;
paramsObj[key]--;
};
</script>
<template>
<FetchData
url="Warehouses"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<FetchData
url="Continents"
@on-fetch="(data) => (continentsOptions = data)"
auto-load
/>
<FetchData
url="AgencyModes"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnSelect
:label="t('travelFilter.filter.agencyModeFk')"
v-model="params.agencyModeFk"
@update:model-value="searchFn()"
:options="agenciesOptions"
option-value="agencyFk"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('travelFilter.filter.warehouseOutFk')"
v-model="params.warehouseOutFk"
@update:model-value="searchFn()"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('travelFilter.filter.warehouseInFk')"
v-model="params.warehouseInFk"
@update:model-value="searchFn()"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
v-model="params.scopeDays"
type="number"
:label="t('travelFilter.filter.scopeDays')"
dense
outlined
rounded
class="input-number"
>
<template #append>
<QBtn
icon="add"
flat
dense
size="12px"
@click="add(params, 'scopeDays')"
/>
<QBtn
icon="remove"
flat
dense
size="12px"
@click="decrement(params, 'scopeDays')"
/>
</template>
</QInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.landedFrom"
:label="t('params.landedFrom')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('params.landedTo')"
v-model="params.landedTo"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
:label="t('params.continent')"
v-model="params.continent"
@update:model-value="searchFn()"
:options="continentsOptions"
option-value="code"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
v-model="params.totalEntries"
type="number"
:label="t('params.totalEntries')"
dense
outlined
rounded
min="0"
class="input-number"
>
<template #append>
<QBtn
icon="add"
flat
dense
size="12px"
@click="add(params, 'totalEntries')"
/>
<QBtn
icon="remove"
flat
dense
size="12px"
@click="decrement(params, 'totalEntries')"
/>
</template>
</QInput>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
search: Id/Reference
landedFrom: Landed from
landedTo: Landed to
continent: Continent out
totalEntries: Total entries
es:
params:
search: Id/Referencia
landedFrom: Llegada desde
landedTo: Llegada hasta
continent: Cont. Salida
totalEntries: Ent. totales
</i18n>

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"

6
src/pages/Travel/locale/en.yml
View File

@ -1,6 +0,0 @@
travelFilter:
filter:
warehouseOutFk: Warehouse Out
warehouseInFk: Warehouse In
agencyModeFk: Agency
scopeDays: Days onward

6
src/pages/Travel/locale/es.yml
View File

@ -1,6 +0,0 @@
travelFilter:
filter:
warehouseInFk: Alm. entrada
warehouseOutFk: Alm. salida
agencyModeFk: Agencia
scopeDays: Días adelante

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"

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"

4
src/pages/Worker/Card/WorkerTimeControl.vue
View File

@ -372,15 +372,15 @@ const showReasonForm = () => {
const updateWorkerTimeControlMail = async (state, reason) => {
try {
const params = {
workerId: Number(route.params.id),
year: selectedDate.value.getFullYear(),
week: selectedWeekNumber.value,
state,
};
const workerId = Number(route.params.id);
if (reason) params.reason = reason;
await axios.post('WorkerTimeControls/updateWorkerTimeControlMail', params);
await axios.post(`WorkerTimeControls/${workerId}/updateMailState`, params);
await getMailStates(selectedDate.value);
await fetchWeekData();
notify(t('globals.dataSaved'), 'positive');

9
src/router/modules/route.js
View File

@ -57,15 +57,6 @@ export default {
},
component: () => import('src/pages/Route/RouteRoadmap.vue'),
},
{
path: 'roadmap/create',
name: 'RouteRoadmapCreate',
meta: {
title: 'RouteRoadmapCreate',
icon: 'vn:troncales',
},
component: () => import('src/pages/Route/Roadmap/RoadmapCreate.vue'),
},
{
path: 'cmr',
name: 'CmrList',

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

@ -14,19 +14,21 @@ export default {
main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
card: [
'TicketBasicData',
'TicketPurchaseRequest',
'TicketSale',
'TicketLog',
'TicketExpedition',
'TicketService',
'TicketVolume',
'TicketNotes',
'TicketDms',
'TicketPurchaseRequest',
'TicketTracking',
'TicketBoxing',
'TicketSms',
'TicketNotes',
'TicketPicture',
'TicketVolume',
'TicketComponents',
'TicketPackage',
'TicketService',
'TicketSaleTracking',
'TicketBoxing',
'TicketSms',
],
},
children: [
@ -173,7 +175,6 @@ export default {
},
component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
},
{
path: 'expedition',
name: 'TicketExpedition',
@ -197,7 +198,7 @@ export default {
name: 'TicketPackage',
meta: {
title: 'packages',
icon: 'vn:bucket',
icon: 'vn:bin',
},
component: () => import('src/pages/Ticket/Card/TicketPackage.vue'),
},
@ -210,6 +211,26 @@ export default {
},
component: () => import('src/pages/Ticket/Card/TicketComponents.vue'),
},
{
path: 'sale-tracking',
name: 'TicketSaleTracking',
meta: {
title: 'saleTracking',
icon: 'assignment',
},
component: () =>
import('src/pages/Ticket/Card/TicketSaleTracking.vue'),
},
{
path: 'dms',
name: 'TicketDms',
meta: {
title: 'dms',
icon: 'cloud_upload',
},
component: () => import('src/pages/Ticket/Card/TicketDms.vue'),
},
{
path: 'boxing',
name: 'TicketBoxing',

2
src/stores/useNavigationStore.js
View File

@ -21,9 +21,9 @@ export const useNavigationStore = defineStore('navigationStore', () => {
'route',
'ticket',
'worker',
'account',
'wagon',
'zone',
'account',
];
const pinnedModules = ref([]);
const role = useRole();

15
test/cypress/integration/route/routeList.spec.js Normal file
View File

@ -0,0 +1,15 @@
describe('Route', () => {
beforeEach(() => {
cy.viewport(1920, 1080);
cy.login('developer');
cy.visit(`/#/route/list`);
});
it('Route list create route', () => {
cy.visit(`/#/route/list`);
cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
cy.get('input[name="description"]').eq(1).type('routeTestOne{enter}');
cy.get('.q-notification__message').should('have.text', 'Data created');
cy.url().should('include', '/summary');
});
});

2
test/cypress/integration/worker/workerCreate.spec.js
View File

@ -14,7 +14,7 @@ describe('WorkerCreate', () => {
Phone: { val: '123456789' },
'Worker code': { val: 'DWW' },
Boss: { val: developerBossId, type: 'select' },
Birth: { val: '2022-12-11T23:00:00.000Z', type: 'date', day: 11 },
Birth: { val: '11-12-2022', type: 'date' },
};
const external = {
Fi: { val: 'Z4531219V' },

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

@ -87,7 +87,6 @@ Cypress.Commands.add('selectOption', (selector, option) => {
});
Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
const days = '.q-date__calendar-days .q-date__calendar-item--in';
cy.waitForElement('.q-form > .q-card');
cy.get(`${form} input`).each(([el]) => {
cy.wrap(el)
@ -96,17 +95,14 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
const field = obj[ariaLabel];
if (!field) return;
const { type, val, day } = field;
const { type, val } = field;
switch (type) {
case 'select':
cy.wrap(el).type(val);
cy.get('.q-menu .q-item').contains(val).click();
break;
case 'date':
cy.wrap(el).click();
cy.get(days)
.eq(day ? day - 1 : 0)
.click();
cy.wrap(el).type(val.split('-').join(''));
break;
case 'time':
cy.wrap(el).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');