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

Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 7197-fixInvoiceIn

This commit is contained in:
Jorge Penadés 2024-07-29 08:04:51 +02:00
parent 028ae0b9ac 7b13250a16
commit 5705904e40
274 changed files with 7698 additions and 5222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

4
src/boot/axios.js
View File

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

19
src/boot/qformMixin.js
View File

@ -1,28 +1,11 @@
import { getCurrentInstance } from 'vue';
const filterAvailableInput = (element) => {
return element.classList.contains('q-field__native') && !element.disabled;
};
const filterAvailableText = (element) => {
return (
element.__vueParentComponent.type.name === 'QInput' &&
element.__vueParentComponent?.attrs?.class !== 'vn-input-date'
);
};
export default {
mounted: function () {
const vm = getCurrentInstance();
if (vm.type.name === 'QForm') {
if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
// AUTOFOCUS
const elementsArray = Array.from(this.$el.elements);
const availableInputs = elementsArray.filter(filterAvailableInput);
const firstInputElement = availableInputs.find(filterAvailableText);
if (firstInputElement) {
firstInputElement.focus();
}
// TODO: AUTOFOCUS IS NOT FOCUSING
const that = this;
this.$el.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter') {

4
src/components/CreateBankEntityForm.vue
View File

@ -52,7 +52,7 @@ onMounted(async () => {
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('name')"
v-model="data.name"
@ -67,7 +67,7 @@ onMounted(async () => {
:rules="validate('bankEntity.bic')"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('country')"

31
src/components/CreateManualInvoiceForm.vue
View File

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

2
src/components/CreateNewCityForm.vue
View File

@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Name')"
v-model="data.name"

2
src/components/CreateNewPostcodeForm.vue
View File

@ -91,7 +91,7 @@ const onProvinceCreated = async ({ name }, formData) => {
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Postcode')"
v-model="data.code"

2
src/components/CreateNewProvinceForm.vue
View File

@ -39,7 +39,7 @@ const onDataSaved = (dataSaved) => {
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Name')"
v-model="data.name"

2
src/components/CreateThermographForm.vue
View File

@ -53,7 +53,7 @@ const onDataSaved = (dataSaved) => {
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Identifier')"
v-model="data.thermographId"

12
src/components/CrudModel.vue
View File

@ -111,19 +111,17 @@ onBeforeRouteLeave((to, from, next) => {
});
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));
@ -312,7 +310,7 @@ watch(formUrl, async () => {
:url="url"
:limit="limit"
@on-fetch="fetch"
@on-change="resetData"
@on-change="fetch"
:skeleton="false"
ref="vnPaginateRef"
v-bind="$attrs"

6
src/components/EditPictureForm.vue
View File

@ -245,14 +245,14 @@ const makeRequest = async () => {
</div>
<div class="column">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QOptionGroup
:options="uploadMethodsOptions"
type="radio"
v-model="uploadMethodSelected"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QFile
v-if="uploadMethodSelected === 'computer'"
ref="inputFileRef"
@ -287,7 +287,7 @@ const makeRequest = async () => {
placeholder="https://"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Orientation')"
:options="viewportTypes"

2
src/components/EditTableCellValueForm.vue
View File

@ -82,7 +82,7 @@ const closeForm = () => {
<span class="title">{{ t('Edit') }}</span>
<span class="countLines">{{ ` ${rows.length} ` }}</span>
<span class="title">{{ t('buy(s)') }}</span>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Field to edit')"
:options="fieldsOptions"

2
src/components/FilterItemForm.vue
View File

@ -151,7 +151,7 @@ const selectItem = ({ id }) => {
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('Filter item') }}</h1>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
<VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
<VnSelect

2
src/components/FilterTravelForm.vue
View File

@ -144,7 +144,7 @@ const selectTravel = ({ id }) => {
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('Filter travels') }}</h1>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('entry.basicData.agency')"
:options="agenciesOptions"

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>

11
src/components/RegularizeStockForm.vue
View File

@ -15,7 +15,7 @@ const props = defineProps({
default: null,
},
warehouseFk: {
type: Boolean,
type: Number,
default: null,
},
});
@ -23,7 +23,7 @@ const props = defineProps({
const { t } = useI18n();
const regularizeFormData = reactive({
itemFk: props.itemFk,
itemFk: Number(props.itemFk),
warehouseFk: props.warehouseFk,
quantity: null,
});
@ -49,18 +49,19 @@ const onDataSaved = (data) => {
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput
:label="t('Type the visible quantity')"
v-model.number="data.quantity"
type="number"
autofocus
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('Warehouse')"
v-model="data.warehouseFk"
v-model.number="data.warehouseFk"
:options="warehousesOptions"
option-value="id"
option-label="name"

177
src/components/TransferInvoiceForm.vue
View File

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

4
src/components/VnTable/VnChip.vue
View File

@ -35,7 +35,9 @@ function stopEventPropagation(event) {
dense
square
>
<span v-if="!col.chip.icon">{{ row[col.name] }}</span>
<span v-if="!col.chip.icon">
{{ col.format ? col.format(row) : row[col.name] }}
</span>
<QIcon v-else :name="col.chip.icon" color="primary-light" />
</QChip>
</span>

38
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),
@ -127,7 +147,7 @@ const col = computed(() => {
}
if (
(newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
!newColumn.component
newColumn.component == null
)
newColumn.component = 'checkbox';
if ($props.default && !newColumn.component) newColumn.component = $props.default;

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

@ -40,12 +40,23 @@ const enterEvent = {
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-sm q-pb-xs q-pt-none fit',
class: 'q-px-xs q-pb-xs q-pt-none fit',
dense: true,
};
const forceAttrs = {
label: $props.showTitle ? '' : $props.column.label,
label: $props.showTitle ? '' : columnFilter.value?.label ?? $props.column.label,
};
const selectComponent = {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none fit',
dense: true,
filled: !$props.showTitle,
},
forceAttrs,
};
const components = {
@ -64,6 +75,7 @@ const components = {
attrs: {
...defaultAttrs,
clearable: true,
type: 'number',
},
forceAttrs,
},
@ -97,16 +109,8 @@ const components = {
},
forceAttrs,
},
select: {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-md q-pb-xs q-pt-none fit',
dense: true,
filled: !$props.showTitle,
},
forceAttrs,
},
select: selectComponent,
rawSelect: selectComponent,
};
async function addFilter(value) {
@ -139,14 +143,11 @@ const showFilter = computed(
</script>
<template>
<div
v-if="showTitle"
class="q-pt-sm q-px-sm ellipsis"
:class="`text-${column?.align ?? 'left'}`"
:style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
v-if="showFilter"
class="full-width"
:class="alignRow()"
style="max-height: 45px; overflow: hidden"
>
{{ column?.label }}
</div>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<VnTableColumn
:column="$props.column"
default="input"

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

@ -0,0 +1,95 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const model = defineModel({ type: Object });
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>

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

@ -1,18 +1,20 @@
<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { ref, onBeforeMount, 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 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: {
@ -21,7 +23,7 @@ const $props = defineProps({
},
defaultMode: {
type: String,
default: 'card', // 'table', 'card'
default: 'table', // 'table', 'card'
},
columnSearch: {
type: Boolean,
@ -32,7 +34,11 @@ const $props = defineProps({
default: true,
},
rowClick: {
type: Function,
type: [Function, Boolean],
default: null,
},
rowCtrlClick: {
type: [Function, Boolean],
default: null,
},
redirect: {
@ -67,6 +73,22 @@ const $props = defineProps({
type: Object,
default: () => ({ card: false, table: false }),
},
withoutHeader: {
type: Boolean,
default: false,
},
tableCode: {
type: String,
default: null,
},
table: {
type: Object,
default: () => ({}),
},
tableHeight: {
type: String,
default: '90vh',
},
});
const { t } = useI18n();
const stateStore = useStateStore();
@ -74,15 +96,18 @@ const route = useRoute();
const router = useRouter();
const quasar = useQuasar();
const DEFAULT_MODE = 'card';
const CARD_MODE = 'card';
const TABLE_MODE = 'table';
const mode = ref(DEFAULT_MODE);
const mode = ref(CARD_MODE);
const selected = ref([]);
const hasParams = ref(false);
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',
@ -93,15 +118,27 @@ const tableModes = [
{
icon: 'grid_view',
title: t('grid view'),
value: DEFAULT_MODE,
value: CARD_MODE,
disable: $props.disableOption?.card,
},
];
onBeforeMount(() => {
setUserParams(route.query[$props.searchUrl]);
hasParams.value = Object.keys(params.value).length !== 0;
});
onMounted(() => {
mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
mode.value =
quasar.platform.is.mobile && !$props.disableOption?.card
? CARD_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(
@ -115,14 +152,21 @@ watch(
(val) => setUserParams(val)
);
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) {
@ -130,17 +174,21 @@ function splitColumns(columns) {
columns: [],
chips: [],
create: [],
visible: [],
cardVisible: [],
};
for (const col of columns) {
if (col.name == 'tableActions') splittedColumns.value.actions = col;
if (col.name == 'tableActions') {
col.orderBy = false;
splittedColumns.value.actions = col;
}
if (col.chip) splittedColumns.value.chips.push(col);
if (col.isTitle) splittedColumns.value.title = col;
if (col.create) splittedColumns.value.create.push(col);
if (col.cardVisible) splittedColumns.value.visible.push(col);
if (col.cardVisible) splittedColumns.value.cardVisible.push(col);
if ($props.isEditable && col.disable == null) col.disable = false;
if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true };
if ($props.useModel && col.columnFilter != false)
col.columnFilter = { ...col.columnFilter, inWhere: true };
splittedColumns.value.columns.push(col);
}
// Status column
@ -154,16 +202,27 @@ function splitColumns(columns) {
label: t('status'),
name: 'tableStatus',
columnFilter: false,
orderBy: false,
});
}
}
const rowClickFunction = computed(() => {
if ($props.rowClick) return $props.rowClick;
if ($props.rowClick != undefined) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {};
});
const rowCtrlClickFunction = computed(() => {
if ($props.rowCtrlClick != undefined) return $props.rowCtrlClick;
if ($props.redirect)
return (evt, { id }) => {
stopEventPropagation(evt);
window.open(`/#/${$props.redirect}/${id}`, '_blank');
};
return () => {};
});
function redirectFn(id) {
router.push({ path: `/${$props.redirect}/${id}` });
}
@ -174,6 +233,7 @@ function stopEventPropagation(event) {
}
function reload(params) {
selected.value = [];
CrudModelRef.value.reload(params);
}
@ -188,6 +248,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,
@ -208,24 +279,41 @@ 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']"
v-for="col of splittedColumns.columns"
<div
class="row no-wrap flex-center"
v-for="col of splittedColumns.columns.filter(
(c) => c.columnFilter ?? true
)"
: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-if="
col?.columnFilter !== false &&
col?.name !== 'tableActions'
"
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>
@ -236,9 +324,10 @@ defineExpose({
:limit="20"
ref="CrudModelRef"
:search-url="searchUrl"
:disable-infinite-scroll="mode == TABLE_MODE"
:disable-infinite-scroll="isTableMode"
@save-changes="reload"
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
:auto-load="hasParams || $attrs['auto-load']"
>
<template
v-for="(_, slotName) in $slots"
@ -249,36 +338,35 @@ defineExpose({
</template>
<template #body="{ rows }">
<QTable
v-bind="$attrs['q-table']"
v-bind="table"
class="vnTable"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="mode != TABLE_MODE"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="mode == TABLE_MODE && 'max-height: 90vh'"
:style="isTableMode && `max-height: ${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>
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
</template>
<template #top-right>
<!-- <QBtn
icon="visibility"
title="asd"
class="bg-vn-section-color q-mr-md"
dense
v-if="mode == 'table'"
/> -->
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
toggle-color="primary"
@ -287,6 +375,7 @@ defineExpose({
:options="tableModes"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
title="asd"
class="bg-vn-section-color q-ml-md"
@ -295,18 +384,34 @@ defineExpose({
/>
</template>
<template #header-cell="{ col }">
<QTh
auto-width
style="min-width: 100px"
v-if="$props.columnSearch"
>
<VnTableFilter
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<QTh v-if="col.visible ?? true">
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
style="height: 75px"
>
<div
class="row items-center no-wrap"
style="height: 30px"
>
<VnTableOrder
v-model="orders[col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
class="full-width"
/>
</div>
</QTh>
</template>
<template #header-cell-tableActions>
@ -329,13 +434,19 @@ defineExpose({
<QTd
auto-width
class="no-margin q-px-xs"
:class="getColAlign(col)"
:class="[getColAlign(col), col.columnClass]"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction &&
rowCtrlClickFunction($event, row)
"
>
<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"
/>
@ -351,6 +462,7 @@ defineExpose({
>
<QBtn
v-for="(btn, index) of col.actions"
v-show="btn.show ? btn.show(row) : true"
:key="index"
:title="btn.title"
:icon="btn.icon"
@ -418,7 +530,7 @@ defineExpose({
:class="$props.cardClass"
>
<div
v-for="col of splittedColumns.visible"
v-for="col of splittedColumns.cardVisible"
:key="col.name"
class="fields"
>
@ -517,8 +629,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">
@ -528,7 +644,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);
}
@ -537,7 +657,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 {
@ -607,7 +727,7 @@ es:
right: 0;
}
td.sticky {
background-color: var(--q-dark);
background-color: var(--vn-section-color);
z-index: 1;
}
}

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

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

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

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

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

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

@ -17,15 +17,17 @@ const $props = defineProps({
},
});
let mixed;
const componentArray = computed(() => {
if (typeof $props.prop === 'object') return [$props.prop];
return $props.prop;
});
function mix(toComponent) {
if (mixed) return mixed;
const { component, attrs, event } = toComponent;
const customComponent = $props.components[component];
return {
mixed = {
component: customComponent?.component ?? component,
attrs: {
...toValueAttrs(attrs),
@ -35,6 +37,7 @@ function mix(toComponent) {
},
event: event ?? customComponent?.event,
};
return mixed;
}
function toValueAttrs(attrs) {

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>

62
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 = model.value ?? Date.vnNew();
date.setHours(hh, mm, 0);
time = date?.toISOString();
}
}
model.value = time;
@ -55,17 +62,37 @@ const formattedTime = computed({
function dateToTime(newDate) {
return date.formatDate(new Date(newDate), dateFormat);
}
const timeField = ref();
watch(
() => model.value,
(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

8
src/pages/Account/AccountMain.vue → src/components/common/VnSectionMain.vue
View File

@ -1,8 +1,16 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import { onMounted } from 'vue';
const stateStore = useStateStore();
const $props = defineProps({
leftDrawer: {
type: Boolean,
default: true,
},
});
onMounted(() => (stateStore.leftDrawer = $props.leftDrawer));
</script>
<template>

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

@ -27,7 +27,7 @@ const $props = defineProps({
},
url: {
type: String,
default: '',
default: null,
},
filterOptions: {
type: [Array],
@ -75,6 +75,7 @@ const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
const dataRef = ref();
const lastVal = ref();
const value = computed({
get() {
@ -85,17 +86,34 @@ 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();
const search = val?.toString()?.toLowerCase();
if (!search) return options;
@ -107,7 +125,8 @@ function filter(val, options) {
});
}
const id = row.id;
if (!row) return;
const id = row[$props.optionValue];
const optionLabel = String(row[$props.optionLabel]).toLowerCase();
return id == search || optionLabel.includes(search);
@ -125,15 +144,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 +174,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, Object],
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 object
if (typeof findBy == 'object') {
const { value, label } = findBy;
if (!$props.row[value] || !$props.row[label]) return;
return (options.value = [
{
[optionValue ?? 'id']: $props.row[value],
[optionLabel ?? 'name']: $props.row[label],
},
]);
}
// is string
if ($props.row[findBy]) options.value = [$props.row[findBy]];
});
</script>
<template>
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
</template>

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

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

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

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

33
src/components/ui/QCalendarMonthWrapper.vue
View File

@ -52,8 +52,8 @@ const containerClasses = computed(() => {
--calendar-border-current: #84d0e2 2px solid;
--calendar-current-color-dark: #84d0e2;
// Colores de fondo del calendario en dark mode
--calendar-outside-background-dark: #222;
--calendar-background-dark: #222;
--calendar-outside-background-dark: var(--vn-section-color);
--calendar-background-dark: var(--vn-section-color);
}
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
@ -70,8 +70,27 @@ const containerClasses = computed(() => {
text-transform: capitalize;
}
.q-calendar-month__head--workweek,
.q-calendar-month__head--weekday,
// .q-calendar-month__workweek.q-past-day,
.q-calendar-month__week :nth-child(6),
:nth-child(7) {
color: var(--vn-label-color);
}
.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span {
/* color: transparent; */
visibility: hidden;
// position: absolute;
}
.q-calendar-month__head--weekdays > div[aria-label='miércoles'] > span:after {
content: 'X';
visibility: visible;
left: 33%;
position: absolute;
}
.transparent-background {
--calendar-background-dark: transparent;
// --calendar-background-dark: transparent;
--calendar-background: transparent;
--calendar-outside-background-dark: transparent;
}
@ -110,11 +129,6 @@ const containerClasses = computed(() => {
cursor: pointer;
}
}
.q-calendar-month__week--days > div:nth-child(6),
.q-calendar-month__week--days > div:nth-child(7) {
// Cambia el color de los días sábado y domingo
color: #777777;
}
.q-calendar-month__week--wrapper {
margin-bottom: 4px;
@ -124,6 +138,7 @@ const containerClasses = computed(() => {
height: 32px;
display: flex;
justify-content: center;
color: var(--vn-label-color);
}
.q-calendar__button--bordered {
@ -147,7 +162,7 @@ const containerClasses = computed(() => {
.q-calendar-month__head--workweek,
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
text-transform: capitalize;
color: $color-font-secondary;
color: var(--vn-label-color);
font-weight: bold;
font-size: 0.8rem;
text-align: center;

44
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,
@ -58,6 +57,7 @@ const $props = defineProps({
},
});
defineExpose({ search });
const emit = defineEmits([
'update:modelValue',
'refresh',
@ -110,10 +110,11 @@ async function search(evt) {
store.filter.where = {};
isLoading.value = true;
const filter = { ...userParams.value };
const filter = { ...userParams.value, ...$props.modelValue };
store.userParamsChanged = true;
arrayData.reset(['skip', 'filter.skip', 'page']);
const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
const { params: newParams } = await arrayData.addFilter({
params: filter,
});
userParams.value = newParams;
if (!$props.showAll && !Object.values(filter).length) store.data = [];
@ -139,7 +140,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
@ -192,6 +193,14 @@ function formatValue(value) {
</script>
<template>
<QBtn
class="q-mt-lg q-mr-xs q-mb-lg"
round
color="primary"
style="position: fixed; z-index: 1; right: 0; bottom: 0"
icon="search"
@click="search()"
></QBtn>
<QForm @submit="search" id="filterPanelForm">
<QList dense>
<QItem class="q-mt-xs">
@ -240,7 +249,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">
@ -265,23 +274,6 @@ function formatValue(value) {
<QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="userParams" :search-fn="search"></slot>
</QList>
<template v-if="$props.searchButton">
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
:type="disableSubmitEvent ? 'button' : 'submit'"
unelevated
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</QForm>
<QInnerLoading
:label="t('globals.pleaseWait')"

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

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

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

@ -26,6 +26,10 @@ const props = defineProps({
type: Object,
default: null,
},
userFilter: {
type: Object,
default: null,
},
where: {
type: Object,
default: null,
@ -80,6 +84,7 @@ const pagination = ref({
const arrayData = useArrayData(props.dataKey, {
url: props.url,
filter: props.filter,
userFilter: props.userFilter,
where: props.where,
limit: props.limit,
order: props.order,

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

@ -1,5 +1,8 @@
<script setup>
defineProps({ wrap: { type: Boolean, default: false } });
</script>
<template>
<div class="vn-row q-gutter-md q-mb-md">
<div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
<slot></slot>
</div>
</template>

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,

42
src/composables/useSession.js
View File

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

64
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;
@ -213,25 +215,49 @@ input::-webkit-inner-spin-button {
max-width: 100%;
}
/* ===== Scrollbar CSS ===== /
/ Firefox */
.q-table__container {
/* ===== Scrollbar CSS ===== /
/ Firefox */
* {
scrollbar-width: auto;
scrollbar-color: var(--vn-label-color) transparent;
* {
scrollbar-width: auto;
scrollbar-color: var(--vn-label-color) transparent;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--vn-label-color);
border-radius: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--vn-label-color);
border-radius: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
.q-table {
th,
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;
}
.shrink {
max-width: 75px;
}
.expand {
max-width: 400px;
}
}

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

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

4
src/pages/Account/Alias/AliasCreateForm.vue
View File

@ -34,12 +34,12 @@ const onDataSaved = ({ id }) => {
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput v-model="data.alias" :label="t('mailAlias.name')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
v-model="data.description"

2
src/pages/Account/Card/AccountMailAliasCreateForm.vue
View File

@ -33,7 +33,7 @@ const aliasOptions = ref([]);
@on-submit="emit('onSubmitCreateAlias', aliasFormData)"
>
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('account.card.alias')"

6
src/pages/Account/Role/Card/RoleBasicData.vue
View File

@ -10,12 +10,12 @@ const { t } = useI18n();
<template>
<FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput v-model="data.name" :label="t('role.card.name')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
v-model="data.description"
@ -23,7 +23,7 @@ const { t } = useI18n();
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
</div>

4
src/pages/Account/Role/Card/RoleForm.vue
View File

@ -21,12 +21,12 @@ const { t } = useI18n();
"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput v-model="data.name" :label="t('role.card.name')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
v-model="data.description"

2
src/pages/Account/Role/Card/SubRoleCreateForm.vue
View File

@ -33,7 +33,7 @@ const rolesOptions = ref([]);
@on-submit="emit('onSubmitCreateSubrole', subRoleFormData)"
>
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('account.card.role')"

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

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

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

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

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

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

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

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

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

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

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

@ -1,20 +1,25 @@
<script setup>
import axios from 'axios';
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import FetchData from 'components/FetchData.vue';
import dashIfEmpty from 'src/filters/dashIfEmpty';
import { getUrl } from 'src/composables/getUrl';
import { useSession } from 'src/composables/useSession';
import VnLv from 'src/components/ui/VnLv.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import FetchData from 'components/FetchData.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import ClaimSummaryAction from 'src/pages/Claim/Card/ClaimSummaryAction.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import axios from 'axios';
import dashIfEmpty from 'src/filters/dashIfEmpty';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const route = useRoute();
const router = useRouter();
@ -34,6 +39,9 @@ const ClaimStates = ref([]);
const claimUrl = ref();
const salixUrl = ref();
const claimDmsRef = ref();
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
const claimDmsFilter = ref({
include: [
{
@ -42,34 +50,29 @@ const claimDmsFilter = ref({
],
});
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
const detailsColumns = ref([
{
name: 'item',
label: 'claim.summary.item',
label: 'claim.item',
field: (row) => row.sale.itemFk,
sortable: true,
},
{
name: 'landed',
label: 'claim.summary.landed',
label: 'claim.landed',
field: (row) => row.sale.ticket.landed,
format: (value) => toDate(value),
sortable: true,
},
{
name: 'quantity',
label: 'claim.summary.quantity',
label: 'claim.quantity',
field: (row) => row.sale.quantity,
sortable: true,
},
{
name: 'claimed',
label: 'claim.summary.claimed',
label: 'claim.claimed',
field: (row) => row.quantity,
sortable: true,
},
@ -80,32 +83,38 @@ const detailsColumns = ref([
},
{
name: 'price',
label: 'claim.summary.price',
label: 'claim.price',
field: (row) => row.sale.price,
sortable: true,
},
{
name: 'discount',
label: 'claim.summary.discount',
label: 'claim.discount',
field: (row) => row.sale.discount,
format: (value) => `${value} %`,
sortable: true,
},
{
name: 'total',
label: 'claim.summary.total',
label: 'claim.total',
field: ({ sale }) =>
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
sortable: true,
},
]);
const markerLabels = [
{ value: 1, label: t('claim.company') },
{ value: 5, label: t('claim.person') },
];
const STATE_COLOR = {
pending: 'warning',
incomplete: 'info',
resolved: 'positive',
canceled: 'negative',
};
function stateColor(code) {
return STATE_COLOR[code];
}
@ -113,38 +122,40 @@ function stateColor(code) {
const developmentColumns = ref([
{
name: 'claimReason',
label: 'claim.summary.reason',
label: 'claim.reason',
field: (row) => row.claimReason.description,
sortable: true,
},
{
name: 'claimResult',
label: 'claim.summary.result',
label: 'claim.result',
field: (row) => row.claimResult.description,
sortable: true,
},
{
name: 'claimResponsible',
label: 'claim.summary.responsible',
label: 'claim.responsible',
field: (row) => row.claimResponsible.description,
sortable: true,
},
{
name: 'worker',
label: 'claim.summary.worker',
label: 'claim.worker',
field: (row) => row.worker?.user.nickname,
sortable: true,
},
{
name: 'claimRedelivery',
label: 'claim.summary.redelivery',
label: 'claim.redelivery',
field: (row) => row.claimRedelivery.description,
sortable: true,
},
]);
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
async function getClaimDms() {
claimDmsFilter.value.where = { claimFk: entityId.value };
@ -200,7 +211,7 @@ async function changeState(value) {
>
<QList>
<QVirtualScroll
style="max-height: 300px"
class="max-container-height"
:items="ClaimStates"
separator
v-slot="{ item, index }"
@ -221,16 +232,13 @@ async function changeState(value) {
</QBtnDropdown>
</template>
<template #body="{ entity: { claim, salesClaimed, developments } }">
<QCard class="vn-one">
<QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
<VnTitle
:url="`#/claim/${entityId}/basic-data`"
:text="t('globals.pageTitles.basicData')"
/>
<VnLv
:label="t('claim.summary.created')"
:value="toDate(claim.created)"
/>
<VnLv :label="t('claim.summary.state')">
<VnLv :label="t('claim.created')" :value="toDate(claim.created)" />
<VnLv :label="t('claim.state')">
<template #value>
<QChip :color="stateColor(claim.claimState.code)" dense>
{{ claim.claimState.description }}
@ -245,7 +253,7 @@ async function changeState(value) {
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.attendedBy')">
<VnLv :label="t('claim.attendedBy')">
<template #value>
<VnUserLink
:name="claim.worker?.user?.nickname"
@ -253,7 +261,7 @@ async function changeState(value) {
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.customer')">
<VnLv :label="t('claim.customer')">
<template #value>
<span class="link cursor-pointer">
{{ claim.client?.name }}
@ -262,27 +270,63 @@ async function changeState(value) {
</template>
</VnLv>
<VnLv
:label="t('claim.basicData.pickup')"
:label="t('claim.pickup')"
:value="`${dashIfEmpty(claim.pickup)}`"
/>
</QCard>
<QCard class="vn-three">
<VnTitle
:url="`#/claim/${entityId}/notes`"
:text="t('claim.summary.notes')"
/>
<QCard class="vn-two">
<VnTitle :url="`#/claim/${entityId}/notes`" :text="t('claim.notes')" />
<ClaimNotes
:id="entityId"
:add-note="false"
style="max-height: 300px"
class="max-container-height"
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<VnTitle
:url="`#/claim/${entityId}/lines`"
:text="t('claim.summary.details')"
/>
<QCard class="vn-two" v-if="claimDms?.length">
<VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
<div class="container max-container-height" style="overflow: auto">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard
class="multimedia relative-position"
style="max-height: 128px"
>
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
@ -320,53 +364,8 @@ async function changeState(value) {
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<VnTitle
:url="claimUrl + 'development'"
:text="t('claim.summary.development')"
/>
<QCard class="vn-max" v-if="developments.length > 0">
<VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
<QTable
:columns="developmentColumns"
:rows="developments"
@ -382,27 +381,31 @@ async function changeState(value) {
</QTh>
</QTr>
</template>
<template #body-cell-worker="props">
<QTd :props="props" class="link">
{{ props.value }}
<WorkerDescriptorProxy :id="props.row.worker.id" />
</QTd>
</template>
</QTable>
</QCard>
<QCard class="vn-max">
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
<VnTitle :url="claimUrl + 'action'" :text="t('claim.actions')" />
<div id="slider-container" class="q-px-xl q-py-md">
<QSlider
v-model="claim.responsibility"
label
:label-value="t('claim.summary.responsibility')"
:label-value="t('claim.responsibility')"
label-always
color="var()"
markers
:marker-labels="[
{ value: 1, label: t('claim.summary.company') },
{ value: 5, label: t('claim.summary.person') },
]"
:marker-labels="markerLabels"
:min="1"
:max="5"
readonly
/>
</div>
<ClaimSummaryAction :id="entityId" />
</QCard>
<QDialog
v-model="multimediaDialog"
@ -458,7 +461,7 @@ async function changeState(value) {
gap: 15px;
}
.multimedia-container {
flex: 1 0 21%;
flex: 0 0 128px;
}
.multimedia {
transition: all 0.5s;
@ -491,4 +494,8 @@ async function changeState(value) {
.change-state {
width: 10%;
}
.max-container-height {
max-height: 300px;
}
</style>

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

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

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

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

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

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

17
src/pages/Claim/ClaimMain.vue
View File

@ -1,17 +0,0 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit text-grey-8">
<LeftMenu />
</QScrollArea>
</QDrawer>
<QPageContainer>
<RouterView></RouterView>
</QPageContainer>
</template>

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

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

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

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

10
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -67,7 +67,7 @@ const filterOptions = {
<FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
<template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('globals.name')"
:rules="validate('client.socialName')"
@ -88,7 +88,7 @@ const filterOptions = {
v-model="data.businessTypeFk"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('customer.basicData.contact')"
:rules="validate('client.contact')"
@ -111,7 +111,7 @@ const filterOptions = {
</template>
</VnInput>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('customer.basicData.phone')"
:rules="validate('client.phone')"
@ -125,7 +125,7 @@ const filterOptions = {
v-model="data.mobile"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QSelect
:input-debounce="0"
:label="t('customer.basicData.salesPerson')"
@ -162,7 +162,7 @@ const filterOptions = {
:input-debounce="0"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QSelect
:input-debounce="0"
:label="t('customer.basicData.previousClient')"

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

@ -47,7 +47,7 @@ const getBankEntities = (data, formData) => {
model="customer"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Billing data')"
:options="payMethods"
@ -59,7 +59,7 @@ const getBankEntities = (data, formData) => {
<VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('IBAN')" clearable v-model="data.iban">
<template #append>
<QIcon name="info" class="cursor-info">
@ -94,7 +94,7 @@ const getBankEntities = (data, formData) => {
</VnSelectDialog>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
<QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />
<QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />

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

@ -1,13 +1,14 @@
<script setup>
import { useI18n } from 'vue-i18n';
import CustomerConsumptionFilter from './CustomerConsumptionFilter.vue';
import { useStateStore } from 'src/stores/useStateStore';
const { t } = useI18n();
</script>
<template>
<h5 class="flex justify-center color-vn-label">
{{ t('Enter a new search') }}
</h5>
<Teleport to="#right-panel" v-if="useStateStore().isHeaderMounted()">
<CustomerConsumptionFilter data-key="CustomerConsumption" />
</Teleport>
</template>
<i18n>

91
src/pages/Customer/Card/CustomerConsumptionFilter.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { QItem } from 'quasar';
import VnSelect from 'src/components/common/VnSelect.vue';
import { QItemSection } from 'quasar';
const { t } = useI18n();
defineProps({ dataKey: { type: String, required: true } });
</script>
<template>
<VnFilterPanel :data-key="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('params.item')"
v-model="params.itemId"
is-outlined
lazy-rules
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
v-model="params.buyerId"
url="TicketRequests/getItemTypeWorker"
:label="t('params.buyer')"
option-value="id"
option-label="nickname"
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<!--It's required to include the relation category !! There's 413 records in production-->
<QItemSection>
<VnSelect
v-model="params.typeId"
url="ItemTypes"
:label="t('params.type')"
option-label="name"
option-value="id"
dense
outlined
rounded
>
</VnSelect>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelect
url="ItemCategories"
:label="t('params.category')"
option-label="name"
option-value="id"
v-model="params.categoryId"
dense
outlined
rounded
/>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
item: Item id
buyer: Buyer
type: Type
category: Category
es:
params:
item: Id artículo
buyer: Comprador
type: Tipo
category: Categoría
</i18n>

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

@ -88,7 +88,7 @@ watch(
:url-create="`Clients/${route.params.id}/setRating`"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Rating')"

120
src/pages/Customer/Card/CustomerCredits.vue
View File

@ -1,20 +1,14 @@
<script setup>
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { QBtn } from 'quasar';
import { toCurrency, toDateHourMin } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const rows = ref([]);
const filter = {
include: [
@ -26,113 +20,63 @@ const filter = {
},
},
],
where: { clientFk: route.params.id },
where: { clientFk: +route.params.id },
order: ['created DESC'],
limit: 20,
};
const tableColumnComponents = {
created: {
component: 'span',
props: () => {},
event: () => {},
},
employee: {
component: QBtn,
props: () => ({ flat: true, color: 'blue', noCaps: true }),
event: () => {},
},
amount: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'created',
label: t('Since'),
name: 'created',
format: (value) => toDateHourMin(value),
label: t('Since'),
format: ({ created }) => toDateHourMin(created),
},
{
align: 'left',
field: (value) => value.worker.user.name,
label: t('Employee'),
name: 'employee',
},
{
align: 'left',
field: 'amount',
label: t('Credit'),
name: 'amount',
format: (value) => toCurrency(value),
format: ({ amount }) => toCurrency(amount),
},
]);
const toCustomerCreditCreate = () => {
router.push({ name: 'CustomerCreditCreate' });
};
</script>
<template>
<FetchData
:filter="filter"
@on-fetch="(data) => (rows = data)"
auto-load
<!-- Column titles are missing -->
<VnTable
ref="tableRef"
data-key="ClientCredit"
url="ClientCredits"
/>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QTable
:columns="columns"
:pagination="{ rowsPerPage: 12 }"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
v-if="rows?.length"
>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
<component
:is="tableColumnComponents[props.col.name].component"
@click="
tableColumnComponents[props.col.name].event(props)
"
class="rounded-borders q-pa-sm"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
>
{{ props.value }}
<WorkerDescriptorProxy
:id="props.row.workerFk"
v-if="props.col.name === 'employee'"
/>
</component>
</QTr>
</QTd>
</template>
</QTable>
<h5 class="flex justify-center color-vn-label" v-else>
{{ t('globals.noResults') }}
</h5>
</QCard>
</div>
:filter="filter"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:is-editable="false"
:use-model="true"
:column-search="false"
:disable-option="{ card: true }"
>
<template #column-employee="{ row }">
<VnUserLink :name="row?.worker?.user?.name" :worker-id="row.worker?.id" />
</template>
</VnTable>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
<QBtn
@click.stop="$router.push({ name: 'CustomerCreditCreate' })"
color="primary"
fab
icon="add"
/>
<QTooltip>
{{ t('New credit') }}
</QTooltip>
</QPageSticky>
</template>
<i18n>
es:
Since: Desde

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

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

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

@ -40,7 +40,7 @@ function handleLocation(data, location) {
model="customer"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Social name')"
:required="true"
@ -57,11 +57,11 @@ function handleLocation(data, location) {
<VnInput :label="t('Tax number')" clearable v-model="data.fi" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('Street')" clearable v-model="data.street" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Sage tax type')"
:options="typesTaxes"
@ -91,7 +91,7 @@ function handleLocation(data, location) {
</VnSelect>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
@ -147,6 +147,7 @@ function handleLocation(data, location) {
:label="t('Electronic invoice')"
v-model="data.hasElectronicInvoice"
/>
<QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
</VnRow>
</template>
</FormModel>
@ -176,6 +177,7 @@ es:
onlyLetters: Sólo se pueden usar letras, números y espacios
whenActivatingIt: Al activarlo, no informar el código del país en el campo nif
inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar
Daily invoice: Facturación diaria
en:
onlyLetters: Only letters, numbers and spaces can be used
whenActivatingIt: When activating it, do not enter the country code in the ID field

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

@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import VnRow from 'src/components/ui/VnRow.vue';
const route = useRoute();
const { t } = useI18n();
@ -131,41 +131,33 @@ const creditWarning = computed(() => {
:url="`#/customer/${entityId}/fiscal-data`"
:text="t('customer.summary.fiscalData')"
/>
<QCheckbox
:label="t('customer.summary.isEqualizated')"
v-model="entity.isEqualizated"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.isActive')"
v-model="entity.isActive"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.invoiceByAddress')"
v-model="entity.hasToInvoiceByAddress"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.verifiedData')"
v-model="entity.isTaxDataChecked"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.hasToInvoice')"
v-model="entity.hasToInvoice"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.notifyByEmail')"
v-model="entity.isToBeMailed"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.vies')"
v-model="entity.isVies"
:disable="true"
/>
<VnRow>
<VnLv
:label="t('customer.summary.isEqualizated')"
:value="entity.isEqualizated"
/>
<VnLv
:label="t('customer.summary.isActive')"
:value="entity.isActive"
/>
</VnRow>
<VnRow>
<VnLv
:label="t('customer.summary.verifiedData')"
:value="entity.isTaxDataChecked"
/>
<VnLv
:label="t('customer.summary.hasToInvoice')"
:value="entity.hasToInvoice"
/>
</VnRow>
<VnRow>
<VnLv
:label="t('customer.summary.notifyByEmail')"
:value="entity.isToBeMailed"
/>
<VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
</VnRow>
</QCard>
<QCard class="vn-one">
<VnTitle
@ -178,23 +170,18 @@ const creditWarning = computed(() => {
/>
<VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
<VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
<QCheckbox
style="padding: 0"
:label="t('customer.summary.hasLcr')"
v-model="entity.hasLcr"
:disable="true"
/>
<QCheckbox
:label="t('customer.summary.hasCoreVnl')"
v-model="entity.hasCoreVnl"
:disable="true"
/>
<VnRow class="q-mt-sm" wrap>
<VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
<VnLv
:label="t('customer.summary.hasCoreVnl')"
:value="entity.hasCoreVnl"
/>
<QCheckbox
:label="t('customer.summary.hasB2BVnl')"
v-model="entity.hasSepaVnl"
:disable="true"
/>
<VnLv
:label="t('customer.summary.hasB2BVnl')"
:value="entity.hasSepaVnl"
/>
</VnRow>
</QCard>
<QCard class="vn-one" v-if="entity.defaultAddress">
<VnTitle

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

@ -134,7 +134,7 @@ watch(
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QForm>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
</div>

12
src/pages/Customer/CustomerCreate.vue
View File

@ -48,7 +48,7 @@ function handleLocation(data, location) {
url-create="Clients/createWithUser"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput :label="t('Comercial name')" v-model="data.name" />
<VnSelect
:label="t('Salesperson')"
@ -59,7 +59,7 @@ function handleLocation(data, location) {
v-model="data.salesPersonFk"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Business type')"
:options="businessTypesOptions"
@ -70,21 +70,21 @@ function handleLocation(data, location) {
/>
<QInput v-model="data.fi" :label="t('Tax number')" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput
:label="t('Business name')"
:rules="validate('client.socialName')"
v-model="data.socialName"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput
:label="t('Street')"
:rules="validate('client.street')"
v-model="data.street"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
@ -95,7 +95,7 @@ function handleLocation(data, location) {
</VnLocation>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput v-model="data.userName" :label="t('Web user')" />
<QInput
:label="t('Email')"

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

@ -42,6 +42,7 @@ const columns = computed(() => [
name: 'name',
isTitle: true,
create: true,
columnClass: 'expand',
},
{
align: 'left',
@ -49,6 +50,7 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.socialName'),
isTitle: true,
create: true,
columnClass: 'expand',
},
{
align: 'left',
@ -78,8 +80,8 @@ const columns = computed(() => [
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
component: 'number',
columnFilter: {
component: 'number',
inWhere: true,
},
},
@ -87,8 +89,8 @@ const columns = computed(() => [
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
component: 'number',
columnFilter: {
component: 'number',
inWhere: true,
},
},
@ -130,6 +132,7 @@ const columns = computed(() => [
columnFilter: {
inWhere: true,
},
columnClass: 'expand',
},
{
align: 'left',
@ -179,8 +182,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,10 +408,8 @@ function handleLocation(data, location) {
}"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="customer"
auto-load
:disable-option="{ card: true }"
>
<template #more-create-dialog="{ data }">
<VnLocation

17
src/pages/Customer/CustomerMain.vue
View File

@ -1,17 +0,0 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit text-grey-8">
<LeftMenu />
</QScrollArea>
</QDrawer>
<QPageContainer>
<RouterView></RouterView>
</QPageContainer>
</template>

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

@ -1,9 +1,8 @@
<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox, useQuasar } from 'quasar';
import { useQuasar } from 'quasar';
import { toCurrency, toDate, dateRange } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@ -11,8 +10,9 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
import axios from 'axios';
import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
const quasar = useQuasar();
@ -21,175 +21,139 @@ const dataRef = ref(null);
const balanceDueTotal = ref(0);
const selected = ref([]);
const tableColumnComponents = {
clientFk: {
component: QBtn,
props: () => ({ flat: true, class: 'link', noCaps: true }),
event: () => {},
},
isWorker: {
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
event: () => {},
},
salesPerson: {
component: QBtn,
props: () => ({ flat: true, class: 'link', noCaps: true }),
event: () => {},
},
departmentName: {
component: 'span',
props: () => {},
event: () => {},
},
country: {
component: 'span',
props: () => {},
event: () => {},
},
payMethod: {
component: 'span',
props: () => {},
event: () => {},
},
balance: {
component: 'span',
props: () => {},
event: () => {},
},
author: {
component: QBtn,
props: () => ({ flat: true, class: 'link', noCaps: true }),
event: () => {},
},
lastObservation: {
component: 'span',
props: () => {},
event: () => {},
},
date: {
component: 'span',
props: () => {},
event: () => {},
},
credit: {
component: 'span',
props: () => {},
event: () => {},
},
from: {
component: 'span',
props: () => {},
event: () => {},
},
finished: {
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': prop.value,
}),
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'clientName',
label: t('Client'),
name: 'clientFk',
sortable: true,
label: t('Client'),
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
field: ({ isWorker }) => Boolean(isWorker),
label: t('Is worker'),
name: 'isWorker',
label: t('Is worker'),
},
{
align: 'left',
field: 'salesPersonName',
name: 'salesPersonFk',
label: t('Salesperson'),
name: 'salesPerson',
sortable: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
},
{
align: 'left',
field: 'departmentName',
name: 'departmentFk',
label: t('Department'),
name: 'departmentName',
sortable: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Departments',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
field: 'country',
name: 'countryFk',
label: t('Country'),
name: 'country',
sortable: true,
format: ({ country }) => country,
columnFilter: {
component: 'select',
attrs: {
url: 'Countries',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
field: 'payMethod',
label: t('P. Method'),
name: 'payMethod',
sortable: true,
tooltip: t('Pay method'),
label: t('P. Method'),
columnFilter: {
component: 'select',
attrs: {
url: 'Paymethods',
},
},
},
{
align: 'left',
field: ({ amount }) => toCurrency(amount),
name: 'amount',
label: t('Balance D.'),
name: 'balance',
sortable: true,
tooltip: t('Balance due'),
format: ({ amount }) => toCurrency(amount),
},
{
align: 'left',
field: 'workerName',
name: 'workerFk',
label: t('Author'),
name: 'author',
sortable: true,
tooltip: t('Worker who made the last observation'),
columnFilter: {
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
},
{
align: 'left',
field: 'observation',
name: 'observation',
label: t('Last observation'),
name: 'lastObservation',
sortable: true,
columnClass: 'expand',
},
{
align: 'left',
field: ({ created }) => toDate(created),
name: 'created',
label: t('L. O. Date'),
name: 'date',
sortable: true,
format: ({ created }) => toDate(created),
tooltip: t('Last observation date'),
columnFilter: {
component: 'date',
},
},
{
align: 'left',
field: ({ creditInsurance }) => toCurrency(creditInsurance),
name: 'creditInsurance',
format: ({ creditInsurance }) => toCurrency(creditInsurance),
label: t('Credit I.'),
name: 'credit',
sortable: true,
tooltip: t('Credit insurance'),
columnFilter: {
component: 'number',
},
},
{
align: 'left',
field: ({ defaulterSinced }) => toDate(defaulterSinced),
name: 'defaulterSinced',
format: ({ defaulterSinced }) => toDate(defaulterSinced),
label: t('From'),
name: 'from',
sortable: true,
columnFilter: {
component: 'date',
},
},
{
align: 'left',
field: 'finished',
label: t('Has recover'),
name: 'finished',
label: t('Has recovery'),
name: 'hasRecovery',
},
]);
@ -198,22 +162,12 @@ const viewAddObservation = (rowsSelected) => {
component: CustomerDefaulterAddObservation,
componentProps: {
clients: rowsSelected,
promise: async () => await dataRef.value.fetch(),
promise: async () => await dataRef.value.reload(),
},
});
};
const onFetch = async (data) => {
const recoveryData = await axios.get('Recoveries');
const recoveries = recoveryData.data.map(({ clientFk, finished }) => ({
clientFk,
finished,
}));
data.forEach((item) => {
const recovery = recoveries.find(({ clientFk }) => clientFk === item.clientFk);
item.finished = recovery?.finished === null;
});
balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
};
@ -229,7 +183,7 @@ function exprBuilder(param, value) {
case 'payMethod':
case 'salesPersonFk':
return { [`d.${param}`]: value };
case 'date':
case 'created':
return { 'd.created': { between: dateRange(value) } };
case 'defaulterSinced':
return { 'd.defaulterSinced': { between: dateRange(value) } };
@ -246,123 +200,64 @@ function exprBuilder(param, value) {
<VnSubToolbar>
<template #st-data>
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
<div class="flex items-center q-ml-lg">
<QBtn
color="primary"
icon="vn:notes"
:disabled="!selected.length"
@click.stop="viewAddObservation(selected)"
>
<QTooltip>{{ t('Add observation') }}</QTooltip>
</QBtn>
</div>
</template>
<template #st-actions>
<QBtn
color="primary"
icon="vn:notes"
:disabled="!selected.length"
@click.stop="viewAddObservation(selected)"
>
<QTooltip>{{ t('Add observation') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<VnPaginate
ref="dataRef"
@on-fetch="onFetch"
data-key="CustomerDefaulter"
:filter="filter"
:expr-builder="exprBuilder"
auto-load
url="Defaulters/filter"
>
<template #body="{ rows }">
<div class="q-pa-md">
<QTable
:columns="columns"
:rows="rows"
class="full-width"
row-key="clientFk"
selection="multiple"
v-model:selected="selected"
>
<template #header="props">
<QTr :props="props" class="bg" style="min-height: 200px">
<QTh>
<QCheckbox v-model="props.selected" />
</QTh>
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ t(col.label) }}
<QTooltip v-if="col.tooltip">{{
col.tooltip
}}</QTooltip>
</QTh>
</QTr>
</template>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
<component
:is="
tableColumnComponents[props.col.name]
.component
"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(
props
)
"
@click="
tableColumnComponents[props.col.name].event(
props
)
"
>
<template v-if="typeof props.value !== 'boolean'">
<div
v-if="
props.col.name === 'lastObservation'
"
>
<VnInput
type="textarea"
v-model="props.value"
readonly
dense
rows="2"
/>
</div>
<div v-else>{{ props.value }}</div>
</template>
<WorkerDescriptorProxy
:id="props.row.salesPersonFk"
v-if="props.col.name === 'salesPerson'"
/>
<WorkerDescriptorProxy
:id="props.row.workerFk"
v-if="props.col.name === 'author'"
/>
<CustomerDescriptorProxy
:id="props.row.clientFk"
v-if="props.col.name === 'client'"
/>
</component>
</QTr>
</QTd>
</template>
</QTable>
</div>
</template>
</VnPaginate>
</QPage>
<VnTable
ref="dataRef"
data-key="CustomerDefaulter"
url="Defaulters/filter"
:expr-builder="exprBuilder"
:columns="columns"
@on-fetch="onFetch"
:use-model="true"
:table="{
'row-key': 'clientFk',
selection: 'multiple',
}"
v-model:selected="selected"
:disable-option="{ card: true }"
auto-load
:order="['amount DESC']"
>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
<template #column-observation="{ row }">
<VnInput type="textarea" v-model="row.observation" readonly dense rows="2" />
</template>
<template #column-salesPersonFk="{ row }">
<span class="link" @click.stop>
{{ row.salesPersonName }}
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</span>
</template>
<template #column-departmentFk="{ row }">
<span class="link" @click.stop>
{{ row.departmentName }}
<DepartmentDescriptorProxy :id="row.departmentFk" />
</span>
</template>
<template #column-workerFk="{ row }">
<span class="link" @click.stop>
{{ row.workerName }}
<WorkerDescriptorProxy :id="row.workerFk" />
</span>
</template>
</VnTable>
</template>
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px;
}
</style>
<i18n>
es:
Add observation: Añadir observación
@ -383,4 +278,5 @@ es:
Credit I.: Crédito A.
Credit insurance: Crédito asegurado
From: Desde
Has recovery: Tiene recobro
</i18n>

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

@ -60,7 +60,7 @@ const onSubmit = async () => {
})
}}
</div>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput
:label="t('Message')"
type="textarea"

163
src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -1,92 +1,92 @@
<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn } from 'quasar';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
const dataKey = 'CustomerNotifications';
const selected = ref([]);
const selectedCustomerId = ref(0);
const tableColumnComponents = {
id: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectCustomerId(prop.row.id),
},
socialName: {
component: 'span',
props: () => {},
event: () => {},
},
city: {
component: 'span',
props: () => {},
event: () => {},
},
phone: {
component: 'span',
props: () => {},
event: () => {},
},
email: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
columnClass: 'shrink',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'socialName'],
optionLabel: 'socialName',
},
},
columnClass: 'expand',
isTitle: true,
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
columnFilter: {
component: 'select',
attrs: {
url: 'Towns',
},
},
cardVisible: true,
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
cardVisible: true,
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
cardVisible: true,
},
{
align: 'left',
name: 'fi',
label: t('Fi'),
visible: false,
},
{
align: 'left',
name: 'postcode',
label: t('Postcode'),
visible: false,
},
{
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
optionFilter: 'firstName',
useLike: false,
},
visible: false,
},
]);
const selectCustomerId = (id) => {
selectedCustomerId.value = id;
};
</script>
<template>
<RightMenu>
<template #right-panel>
<CustomerNotificationsFilter data-key="CustomerNotifications" />
</template>
</RightMenu>
<VnSubToolbar class="justify-end">
<template #st-data>
<template #st-actions>
<CustomerNotificationsCampaignConsumption
:selected-rows="selected.length > 0"
:clients="selected"
@ -94,51 +94,26 @@ const selectCustomerId = (id) => {
/>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<VnPaginate data-key="CustomerNotifications" url="Clients" auto-load>
<template #body="{ rows }">
<div class="q-pa-md">
<QTable
:columns="columns"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
selection="multiple"
v-model:selected="selected"
>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
<component
:is="
tableColumnComponents[props.col.name]
.component
"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(
props
)
"
@click="
tableColumnComponents[props.col.name].event(
props
)
"
>
{{ props.value }}
<CustomerDescriptorProxy
:id="selectedCustomerId"
/>
</component>
</QTr>
</QTd>
</template>
</QTable>
</div>
</template>
</VnPaginate>
</QPage>
<VnTable
:data-key="dataKey"
url="Clients"
:table="{
'row-key': 'id',
selection: 'multiple',
}"
v-model:selected="selected"
:right-search="true"
:columns="columns"
:use-model="true"
auto-load
>
<template #column-id="{ row }">
<span class="link">
{{ row.id }}
<CustomerDescriptorProxy :id="row.id" />
</span>
</template>
</VnTable>
</template>
<style lang="scss" scoped>

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

@ -99,7 +99,7 @@ onMounted(async () => {
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:options="moreFields"
option-value="code"
@ -109,7 +109,7 @@ onMounted(async () => {
@update:model-value="campaignChange"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInputDate v-model="campaignParams.from" :label="t('From')" />
<VnInputDate v-model="campaignParams.to" :label="t('To')" />
</VnRow>

145
src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
View File

@ -1,145 +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 VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'components/common/VnSelect.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const cities = ref();
const clients = ref();
</script>
<template>
<FetchData
:filter="{ where: { role: 'socialName' } }"
@on-fetch="(data) => (clients = data)"
auto-load
url="Clients"
/>
<FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
<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 class="q-mb-sm q-mt-sm">
<QItemSection>
<VnInput
:label="t('Identifier')"
clearable
is-outlined
v-model="params.identifier"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!clients">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="clients">
<VnSelect
:input-debounce="0"
:label="t('Social name')"
:options="clients"
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="socialName"
option-value="socialName"
outlined
rounded
use-input
v-model="params.socialName"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!cities">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="cities">
<VnSelect
:input-debounce="0"
:label="t('City')"
:options="cities"
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="name"
outlined
rounded
use-input
v-model="params.city"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Phone')"
clearable
is-outlined
v-model="params.phone"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Email')"
clearable
is-outlined
type="email"
v-model="params.email"
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
identifier: Identifier
socialName: Social name
city: City
phone: Phone
email: Email
es:
params:
identifier: Identificador
socialName: Razón social
city: Población
phone: Teléfono
email: Email
Identifier: Identificador
Social name: Razón social
City: Población
Phone: Teléfono
Email: Email
</i18n>

270
src/pages/Customer/Payments/CustomerPayments.vue
View File

@ -1,19 +1,18 @@
<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { toDate, toCurrency } from 'filters/index';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const quasar = useQuasar();
const { t } = useI18n();
const arrayData = useArrayData('CustomerTransactions');
async function confirm(transaction) {
quasar
@ -36,59 +35,73 @@ async function confirmTransaction({ id }) {
});
}
const grid = ref(false);
const columns = computed(() => [
{
name: 'id',
label: t('Transaction ID'),
field: (row) => row.id,
sortable: true,
},
{
name: 'customerId',
label: t('Customer ID'),
field: (row) => row.clientFk,
align: 'right',
sortable: true,
},
{
name: 'customer',
label: t('Customer Name'),
field: (row) => row.customerName,
},
{
name: 'state',
label: t('State'),
field: (row) => row.isConfirmed,
format: (value) => (value ? t('Confirmed') : t('Unconfirmed')),
isTitle: true,
align: 'left',
sortable: true,
columnFilter: {
inWhere: true,
alias: 't',
},
columnClass: 'shrink',
},
{
name: 'dated',
align: 'left',
name: 'clientFk',
label: t('Customer'),
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
},
columnClass: 'expand',
cardVisible: true,
},
{
name: 'isConfirmed',
label: t('State'),
align: 'left',
format: ({ isConfirmed }) => (isConfirmed ? t('Confirmed') : t('Unconfirmed')),
chip: {
condition: () => true,
color: ({ isConfirmed }) => (isConfirmed ? 'bg-positive' : 'bg-primary'),
},
visible: false,
},
{
name: 'created',
label: t('Dated'),
field: (row) => toDate(row.created),
sortable: true,
format: ({ created }) => toDate(created),
columnFilter: false,
cardVisible: true,
},
{
name: 'amount',
label: t('Amount'),
field: (row) => row.amount,
format: (value) => toCurrency(value),
sortable: true,
format: ({ amount }) => toCurrency(amount),
columnFilter: {
component: 'number',
},
cardVisible: true,
},
{
name: 'actions',
label: t('Actions'),
grid: false,
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Confirm transaction'),
icon: 'check',
action: (row) => confirm(row),
show: ({ isConfirmed }) => !isConfirmed,
isPrimary: true,
},
],
},
]);
const isLoading = computed(() => arrayData.isLoading.value);
function stateColor(row) {
if (row.isConfirmed) return 'positive';
return 'primary';
}
</script>
<template>
@ -97,158 +110,22 @@ function stateColor(row) {
<CustomerPaymentsFilter data-key="CustomerTransactions" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md customer-payments">
<div class="vn-card-list">
<QToolbar class="q-pa-none justify-end">
<QBtn
@click="arrayData.refresh()"
:loading="isLoading"
icon="refresh"
color="primary"
class="q-mr-sm"
round
dense
/>
<QBtn @click="grid = !grid" icon="list" color="primary" round dense>
<QTooltip>{{ t('Change view') }}</QTooltip>
</QBtn>
</QToolbar>
<VnPaginate
data-key="CustomerTransactions"
url="Clients/transactions"
order="created DESC"
:limit="20"
:offset="50"
:auto-load="!!$route?.query.params"
>
<template #body="{ rows }">
<QTable
:dense="$q.screen.lt.md"
:columns="columns"
:rows="rows"
row-key="id"
:grid="grid || $q.screen.lt.sm"
class="q-mt-xs custom-table"
>
<template #body-cell-actions="{ row }">
<QTd auto-width class="text-center">
<QBtn
v-if="!row.isConfirmed"
icon="check"
@click="confirm(row)"
color="primary"
size="md"
round
flat
dense
>
<QTooltip>{{ t('Confirm transaction') }}</QTooltip>
</QBtn>
</QTd>
</template>
<template #body-cell-id="{ row }">
<QTd auto-width align="right">
<span>
{{ row.id }}
</span>
</QTd>
</template>
<template #body-cell-customerId="{ row }">
<QTd align="right">
<span class="link">
{{ row.clientFk }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</QTd>
</template>
<template #body-cell-customer="{ row }">
<QTd auto-width align="left" :title="row.customerName">
<span>
{{ row.customerName }}
</span>
</QTd>
</template>
<template #body-cell-state="{ row }">
<QTd auto-width class="text-center">
<QBadge text-color="black" :color="stateColor(row)">
{{
row.isConfirmed
? t('Confirmed')
: t('Unconfirmed')
}}
</QBadge>
</QTd>
</template>
<template #item="{ cols, row }">
<div class="q-mb-md col-12">
<QCard class="q-pa-none">
<QItem class="q-pa-none items-start">
<QItemSection class="q-pa-none">
<QList>
<template
v-for="col of cols"
:key="col.name"
>
<QItem
v-if="col.grid !== false"
class="q-pa-none"
>
<QItemSection>
<QItemLabel caption>
{{ col.label }}
</QItemLabel>
<QItemLabel
v-if="col.name == 'state'"
>
<QBadge
text-color="black"
:color="
stateColor(row)
"
>
{{ col.value }}
</QBadge>
</QItemLabel>
<QItemLabel
v-if="col.name != 'state'"
>
{{ col.value }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</QList>
</QItemSection>
<template v-if="!row.isConfirmed">
<QSeparator vertical />
<QCardActions
vertical
class="justify-between"
>
<QBtn
icon="check"
@click="confirm(row)"
color="primary"
size="md"
round
flat
dense
>
<QTooltip>
{{ t('Confirm transaction') }}
</QTooltip>
</QBtn>
</QCardActions>
</template>
</QItem>
</QCard>
</div>
</template>
</QTable>
</template>
</VnPaginate>
</div>
</QPage>
<VnTable
data-key="CustomerTransactions"
url="Clients/transactions"
order="created DESC"
:columns="columns"
:right-search="false"
auto-load
>
<template #column-clientFk="{ row }">
<span class="link">
{{ row.clientFk }} -
{{ row.customerName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnTable>
</template>
<style lang="scss">
@ -269,14 +146,11 @@ es:
Web Payments: Pagos Web
Confirm transaction: Confirmar transacción
Transaction ID: ID transacción
Customer ID: ID cliente
Customer Name: Nombre cliente
Customer: cliente
State: Estado
Dated: Fecha
Amount: Importe
Actions: Acciones
Confirmed: Confirmada
Unconfirmed: Sin confirmar
Change view: Cambiar vista
Payment confirmed: Pago confirmado
</i18n>

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

@ -85,7 +85,7 @@ function handleLocation(data, location) {
<template #form="{ data, validate }">
<QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
<VnInput :label="t('Street address')" clearable v-model="data.street" />
@ -119,7 +119,7 @@ function handleLocation(data, location) {
/>
</div>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Incoterms')"
:options="incoterms"

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

@ -146,7 +146,7 @@ function handleLocation(data, location) {
</template>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<QCheckbox :label="t('Enabled')" v-model="data.isActive" />
</div>
@ -164,7 +164,7 @@ function handleLocation(data, location) {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
</div>
@ -173,7 +173,7 @@ function handleLocation(data, location) {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnLocation
:rules="validate('Worker.postcode')"
@ -185,7 +185,7 @@ function handleLocation(data, location) {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('Agency')"
@ -204,7 +204,7 @@ function handleLocation(data, location) {
<VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('Incoterms')"

2
src/pages/Customer/components/CustomerCreditContractsCreate.vue
View File

@ -39,7 +39,7 @@ const toCustomerCreditContracts = () => {
</template>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Credit')"

8
src/pages/Customer/components/CustomerFileManagementCreate.vue
View File

@ -143,7 +143,7 @@ const toCustomerFileManagement = () => {
<QCard class="q-pa-lg">
<QCardSection>
<QForm>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Reference')"
@ -163,7 +163,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('Warehouse')"
@ -184,7 +184,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Description')"
@ -196,7 +196,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<QFile
ref="inputFileRef"

8
src/pages/Customer/components/CustomerFileManagementEdit.vue
View File

@ -119,7 +119,7 @@ const toCustomerFileManagement = () => {
<QCard class="q-pa-lg">
<QCardSection>
<QForm>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Reference')"
@ -139,7 +139,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnSelect
:label="t('Warehouse')"
@ -160,7 +160,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Description')"
@ -172,7 +172,7 @@ const toCustomerFileManagement = () => {
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<QFile
ref="inputFileRef"

4
src/pages/Customer/components/CustomerGreugeCreate.vue
View File

@ -55,7 +55,7 @@ const toCustomerGreuges = () => {
</template>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Amount')"
clearable
@ -65,7 +65,7 @@ const toCustomerGreuges = () => {
<VnInputDate :label="t('Date')" v-model="data.shipped" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('Comment')" clearable v-model="data.description" />
<VnSelect
:label="t('Type')"

4
src/pages/Customer/components/CustomerNewCustomsAgent.vue
View File

@ -22,7 +22,7 @@ const onDataSaved = (dataSaved) => {
url-create="CustomsAgents"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('NIF')"
:required="true"
@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
v-model="data.fiscalName"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput :label="t('Street')" clearable v-model="data.street" />
<VnInput :label="t('Phone')" clearable v-model="data.phone" />
</VnRow>

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

@ -11,10 +11,12 @@ import VnRow from 'components/ui/VnRow.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { useState } from 'src/composables/useState';
const { t } = useI18n();
const route = useRoute();
const { dialogRef } = useDialogPluginComponent();
const state = useState();
const user = state.getUser();
const $props = defineProps({
companyId: {
@ -55,12 +57,12 @@ const filterClientFindOne = {
id: route.params.id,
},
};
const initialData = reactive({
amountPaid: $props.totalCredit,
clientFk: route.params.id,
companyFk: $props.companyId,
email: clientFindOne.value.email,
bankFk: user.value.localBankFk,
});
onBeforeMount(() => {
@ -134,7 +136,7 @@ const onDataSaved = async () => {
<h5 class="q-mt-none">{{ t('New payment') }}</h5>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInputDate
:label="t('Date')"
:required="true"
@ -152,7 +154,7 @@ const onDataSaved = async () => {
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('Bank')"
:options="bankOptions"
@ -187,7 +189,7 @@ const onDataSaved = async () => {
{{ t('Compensation') }}
</div>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
<VnInput
:label="t('Compensation account')"
@ -206,7 +208,7 @@ const onDataSaved = async () => {
<div class="q-mt-lg" v-if="data.bankFk === 2">
<div class="text-h6">{{ t('Cash') }}</div>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Delivered amount')"
@update:model-value="calculateFromDeliveredAmount($event)"
@ -223,7 +225,7 @@ const onDataSaved = async () => {
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox v-model="viewRecipt" />
<QCheckbox v-model="sendEmail" />
</VnRow>

2
src/pages/Customer/components/CustomerNoteCreate.vue
View File

@ -44,7 +44,7 @@ const toCustomerNotes = () => {
</template>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput :label="t('Note')" type="textarea" v-model="data.text" />
</VnRow>
</template>

4
src/pages/Customer/components/CustomerRecoverieCreate.vue
View File

@ -49,12 +49,12 @@ const toCustomerRecoveries = () => {
</template>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInputDate :label="t('Since')" v-model="data.started" />
<VnInputDate :label="t('To')" v-model="data.finished" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('Amount')"
clearable

2
src/pages/Customer/components/CustomerSamplesCreate.vue
View File

@ -264,7 +264,7 @@ const toCustomerSamples = () => {
/>
</div>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<div class="col">
<VnInput
:label="t('Recipient')"

12
src/pages/Department/Card/DepartmentBasicData.vue
View File

@ -29,7 +29,7 @@ const clientsOptions = ref([]);
class="full-width"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('department.name')"
v-model="data.name"
@ -44,7 +44,7 @@ const clientsOptions = ref([]);
clearable
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('department.chat')"
v-model="data.chatName"
@ -58,7 +58,7 @@ const clientsOptions = ref([]);
clearable
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('department.bossDepartment')"
v-model="data.workerFk"
@ -80,7 +80,7 @@ const clientsOptions = ref([]);
:rules="validate('department.clientFk')"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox
:label="t('department.telework')"
v-model="data.isTeleworking"
@ -92,7 +92,7 @@ const clientsOptions = ref([]);
:true-value="1"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox
:label="t('department.worksInProduction')"
v-model="data.isProduction"
@ -102,7 +102,7 @@ const clientsOptions = ref([]);
v-model="data.hasToRefill"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox
:label="t('department.hasToSendMail')"
v-model="data.hasToSendMail"

6
src/pages/Department/Card/DepartmentDescriptor.vue
View File

@ -24,7 +24,7 @@ const $props = defineProps({
const route = useRoute();
const router = useRouter();
const DepartmentDescriptorRef = ref();
const { t } = useI18n();
const { notify } = useNotify();
@ -55,18 +55,20 @@ const { openConfirmationModal } = useVnConfirm();
</script>
<template>
<CardDescriptor
ref="DepartmentDescriptorRef"
module="Department"
data-key="departmentData"
:url="`Departments/${entityId}`"
:title="data.title"
:subtitle="data.subtitle"
:summary="$props.summary"
:to-module="{ name: 'WorkerDepartment' }"
@on-fetch="
(data) => {
department = data;
setData(data);
}
"
data-key="department"
>
<template #menu="{}">
<QItem

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

@ -67,7 +67,7 @@ const onFilterTravelSelected = (formData, id) => {
:clear-store-on-unmount="false"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('entry.basicData.supplier')"
v-model="data.supplierFk"
@ -121,13 +121,13 @@ const onFilterTravelSelected = (formData, id) => {
</template>
</VnSelectDialog>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
v-model="data.reference"
:label="t('entry.basicData.reference')"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
v-model="data.invoiceNumber"
:label="t('entry.basicData.invoiceNumber')"
@ -143,7 +143,7 @@ const onFilterTravelSelected = (formData, id) => {
:required="true"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnSelect
:label="t('entry.basicData.currency')"
v-model="data.currencyFk"
@ -159,7 +159,7 @@ const onFilterTravelSelected = (formData, id) => {
min="0"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QInput
:label="t('entry.basicData.observation')"
type="textarea"
@ -169,7 +169,7 @@ const onFilterTravelSelected = (formData, id) => {
fill-input
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QCheckbox
v-model="data.isOrdered"
:label="t('entry.basicData.ordered')"

6
src/pages/Entry/Card/EntryBuysImport.vue
View File

@ -197,7 +197,7 @@ const redirectToBuysView = () => {
</div>
</Teleport>
<QCard class="q-pa-lg">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<QFile
ref="inputFileRef"
:label="t('entry.buys.file')"
@ -219,13 +219,13 @@ const redirectToBuysView = () => {
</QFile>
</VnRow>
<div v-if="importData.file">
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('entry.buys.reference')"
v-model="importData.ref"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnRow>
<VnInput
:label="t('entry.buys.observations')"
v-model="importData.observation"

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

@ -73,7 +73,7 @@ onMounted(async () => {
const data = ref(useCardDescription());
const setData = (entity) =>
(data.value = useCardDescription(entity.supplier.nickname, entity.id));
(data.value = useCardDescription(entity.supplier?.nickname, entity.id));
const currentEntry = computed(() => state.get('entry'));
@ -115,7 +115,6 @@ watch;
:subtitle="data.subtitle"
@on-fetch="setData"
data-key="entry"
:summary="$attrs"
>
<template #menu="{ entity }">
<QItem v-ripple clickable @click="showEntryReport(entity)">

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