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/hyervoni/salix-front-mindshore into feature/SupplierSubmodules

This commit is contained in:
William Buezas 2024-01-05 08:27:23 -03:00
parent a2c96d276e 8cb6ed136a
commit edb1c1c71a
62 changed files with 1913 additions and 775 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/CreateBankEntityForm.vue
View File

@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -22,41 +22,29 @@ const countriesFilter = {
fields: ['id', 'country', 'code'],
};
const closeButton = ref(null);
const countriesOptions = ref([]);
const loading = ref(false);
const onDataSaved = (data) => {
emit('onDataSaved', data);
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
<FetchData
url="Countries"
@on-fetch="(data) => (countriesOptions = data)"
:filter="countriesFilter"
auto-load
@on-fetch="(data) => (countriesOptions = data)"
/>
<FormModel
:form-initial-data="bankEntityFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
url-create="bankEntities"
model="bankEntity"
:title="t('title')"
:subtitle="t('subtitle')"
:form-initial-data="bankEntityFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('title') }}</h1>
<p class="q-mb-md">{{ t('subtitle') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
@ -89,43 +77,10 @@ const closeForm = () => {
<QInput :label="t('id')" v-model="data.id" />
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="loading"
:loading="loading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="loading"
:loading="loading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<style lang="scss" scoped>
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
</style>
<i18n>
en:
title: New bank entity

59
src/components/CreateNewCityForm.vue
View File

@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -17,17 +17,10 @@ const cityFormData = reactive({
provinceFk: null,
});
const closeButton = ref(null);
const isLoading = ref(false);
const provincesOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
@ -37,20 +30,15 @@ const closeForm = () => {
auto-load
url="Provinces"
/>
<FormModel
<FormModelPopup
:title="t('New city')"
:subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="cityFormData"
:observe-form-changes="false"
:default-actions="false"
url-create="towns"
model="city"
@on-data-saved="onDataSaved()"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('New city') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -71,43 +59,10 @@ const closeForm = () => {
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<style lang="scss" scoped>
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
</style>
<i18n>
es:
New city: Nueva ciudad

66
src/components/CreateNewPostcodeForm.vue
View File

@ -6,10 +6,10 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import CreateNewCityForm from './CreateNewCityForm.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
import VnSelectCreate from 'components/common/VnSelectCreate.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -24,15 +24,12 @@ const postcodeFormData = reactive({
const townsFetchDataRef = ref(null);
const provincesFetchDataRef = ref(null);
const closeButton = ref(null);
const countriesOptions = ref([]);
const isLoading = ref(false);
const provincesOptions = ref([]);
const townsLocationOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const onCityCreated = async () => {
@ -42,10 +39,6 @@ const onCityCreated = async () => {
const onProvinceCreated = async () => {
await provincesFetchDataRef.value.fetch();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
@ -66,20 +59,15 @@ const closeForm = () => {
auto-load
url="Countries"
/>
<FormModel
:form-initial-data="postcodeFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
url-create="postcodes"
model="postcode"
@on-data-saved="onDataSaved()"
:title="t('New postcode')"
:subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="postcodeFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('New postcode') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -134,45 +122,11 @@ const closeForm = () => {
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</div> </VnRow
></template>
</FormModelPopup>
</template>
<style lang="scss" scoped>
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
</style>
<i18n>
es:
New postcode: Nuevo código postal

64
src/components/CreateNewProvinceForm.vue
View File

@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -17,17 +17,10 @@ const provinceFormData = reactive({
autonomyFk: null,
});
const closeButton = ref(null);
const isLoading = ref(false);
const autonomiesOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
@ -37,20 +30,15 @@ const closeForm = () => {
auto-load
url="Autonomies"
/>
<FormModel
:form-initial-data="provinceFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
:title="t('New province')"
:subtitle="t('Please, ensure you put the correct data!')"
url-create="provinces"
model="province"
@on-data-saved="onDataSaved()"
:form-initial-data="provinceFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('New province') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -71,47 +59,13 @@ const closeForm = () => {
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<style lang="scss" scoped>
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
</style>
<i18n>
es:
New postcode: Nuevo código postal
New province: Nueva provincia
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
Name: Nombre
Autonomy: Autonomía

4
src/components/FormModel.vue
View File

@ -97,9 +97,7 @@ const startFormWatcher = () => {
watch(
() => formData.value,
(val) => {
if (!isResetting.value && val) {
hasChanges.value = true;
}
hasChanges.value = !isResetting.value && val;
isResetting.value = false;
},
{ deep: true }

107
src/components/FormModelPopup.vue Normal file
View File

@ -0,0 +1,107 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
const emit = defineEmits(['onDataSaved']);
const $props = defineProps({
title: {
type: String,
default: '',
},
subtitle: {
type: String,
default: '',
},
url: {
type: String,
default: '',
},
model: {
type: String,
default: '',
},
filter: {
type: Object,
default: null,
},
urlCreate: {
type: String,
default: null,
},
formInitialData: {
type: Object,
default: () => {},
},
});
const { t } = useI18n();
const closeButton = ref(null);
const isLoading = ref(false);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
<FormModel
:form-initial-data="formInitialData"
:observe-form-changes="false"
:default-actions="false"
:url-create="urlCreate"
:model="model"
@on-data-saved="onDataSaved()"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ title }}</h1>
<p>{{ subtitle }}</p>
<slot name="form-inputs" :data="data" :validate="validate" />
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</template>
<style lang="scss" scoped>
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>

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

@ -1,11 +1,10 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import { ref, computed, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
allColumns: {
@ -24,17 +23,12 @@ const $props = defineProps({
const emit = defineEmits(['onConfigSaved']);
const { notify } = useNotify();
const state = useState();
const { t } = useI18n();
const popupProxyRef = ref(null);
const user = state.getUser();
const initialUserConfigViewData = ref(null);
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
};
const formattedCols = ref([]);
@ -43,16 +37,12 @@ const areAllChecksMarked = computed(() => {
});
const setUserConfigViewData = (data) => {
initialUserConfigViewData.value = data;
if (data.length === 0) return;
formattedCols.value = $props.allColumns.map((col) => {
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
const obj = {
name: col,
active: data[0].configuration[col],
};
return obj;
});
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
formattedCols.value = $props.allColumns.map((col) => ({
name: col,
active: data[col],
}));
emitSavedConfig();
};
@ -60,40 +50,101 @@ const toggleMarkAll = (val) => {
formattedCols.value.forEach((col) => (col.active = val));
};
const saveConfig = async () => {
const fetchViewConfigData = async () => {
try {
const data = {
id: initialUserConfigViewData.value[0].id,
userFk: 9,
tableCode: $props.tableCode,
configuration: {},
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
};
formattedCols.value.forEach((col) => {
data.configuration[col.name] = col.active;
const userViewConfigResponse = await axios.get('UserConfigViews', {
params: { filter: userConfigFilter },
});
await axios.patch('UserConfigViews', data);
if (userViewConfigResponse.data && userViewConfigResponse.data.length > 0) {
initialUserConfigViewData.value = userViewConfigResponse.data[0];
setUserConfigViewData(userViewConfigResponse.data[0].configuration);
return;
}
const defaultConfigFilter = {
where: {
tableCode: $props.tableCode,
},
};
const defaultViewConfigResponse = await axios.get('DefaultViewConfigs', {
params: { filter: defaultConfigFilter },
});
if (defaultViewConfigResponse.data && defaultViewConfigResponse.data.length > 0) {
setUserConfigViewData(defaultViewConfigResponse.data[0].columns);
return;
}
} catch (err) {
console.err('Error fetching config view data');
}
};
const saveConfig = async () => {
try {
const params = {};
const configuration = {};
formattedCols.value.forEach((col) => {
const { name, active } = col;
configuration[name] = active;
});
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration: configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration: configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
emitSavedConfig();
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config');
}
};
const emitSavedConfig = () => {
const filteredCols = formattedCols.value.filter((col) => col.active);
const mappedCols = filteredCols.map((col) => col.name);
emit('onConfigSaved', mappedCols);
};
onMounted(async () => {
await fetchViewConfigData();
});
</script>
<template>
<fetch-data
v-if="user"
url="UserConfigViews"
:filter="userConfigFilter"
@on-fetch="(data) => setUserConfigViewData(data)"
auto-load
/>
<QBtn color="primary" icon="view_column">
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
@ -108,7 +159,7 @@ const emitSavedConfig = () => {
class="q-mb-sm"
/>
<div
v-if="allColumns.length !== 0 && formattedCols.length !== 0"
v-if="allColumns.length > 0 && formattedCols.length > 0"
class="checks-layout"
>
<QCheckbox
@ -123,6 +174,7 @@ const emitSavedConfig = () => {
}}</QBtn>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
@ -138,3 +190,9 @@ const emitSavedConfig = () => {
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
</i18n>

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

@ -40,6 +40,7 @@ const styleAttrs = computed(() => {
v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }"
type="text"
:class="{ required: $attrs.required }"
>
<template v-if="$slots.prepend" #prepend>
<slot name="prepend" />

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

@ -49,7 +49,7 @@ const toggleForm = () => {
<QIcon
@click.stop.prevent="toggleForm()"
name="add"
size="19px"
size="xs"
class="add-icon"
/>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">

3
src/components/common/VnSelectFilter.vue
View File

@ -87,13 +87,14 @@ const value = computed({
hide-selected
fill-input
ref="vnSelectRef"
:class="{ required: $attrs.required }"
>
<template v-if="isClearable" #append>
<QIcon
name="close"
@click.stop="value = null"
class="cursor-pointer"
size="18px"
size="xs"
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

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

@ -41,7 +41,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder,
@ -116,6 +116,7 @@ const tags = computed(() => {
async function remove(key) {
userParams.value[key] = null;
await search();
emit('remove', key)
}
function formatValue(value) {

25
src/components/ui/VnTree.vue
View File

@ -53,10 +53,11 @@ const fetchNodeLeaves = async (nodeKey) => {
};
const removeNode = (node) => {
const { id, parentFk } = node;
quasar
.dialog({
title: 'Are you sure you want to delete it?',
message: 'Delete department',
title: t('Are you sure you want to delete it?'),
message: t('Delete department'),
ok: {
push: true,
color: 'primary',
@ -65,9 +66,9 @@ const removeNode = (node) => {
})
.onOk(async () => {
try {
await axios.post(`/Departments/${node.id}/removeChild`, node.id);
notify('department.departmentRemoved', 'positive');
await fetchNodeLeaves(node.parentFk);
await axios.post(`/Departments/${id}/removeChild`, id);
notify(t('department.departmentRemoved'), 'positive');
await fetchNodeLeaves(parentFk);
} catch (err) {
console.log('Error removing department');
}
@ -85,7 +86,7 @@ const onNodeCreated = async () => {
const redirectToDepartmentSummary = (id) => {
if (!id) return;
router.push({ name: 'DepartmentSummary', params: { id: id } });
router.push({ name: 'DepartmentSummary', params: { id } });
};
</script>
@ -99,22 +100,22 @@ const redirectToDepartmentSummary = (id) => {
v-model:expanded="expanded"
@update:expanded="onNodeExpanded($event)"
>
<template #default-header="prop">
<template #default-header="{ node }">
<div
class="row justify-between full-width q-pr-md cursor-pointer"
@click.stop="redirectToDepartmentSummary(prop.node.id)"
@click.stop="redirectToDepartmentSummary(node.id)"
>
<span class="text-uppercase">
{{ prop.node.name }}
{{ node.name }}
</span>
<div class="row justify-between" style="max-width: max-content">
<QIcon
v-if="prop.node.id"
v-if="node.id"
name="delete"
color="primary"
size="sm"
class="q-pr-xs cursor-pointer"
@click.stop="removeNode(prop.node)"
@click.stop="removeNode(node)"
>
<QTooltip>
{{ t('Remove') }}
@ -125,7 +126,7 @@ const redirectToDepartmentSummary = (id) => {
color="primary"
size="sm"
class="cursor-pointer"
@click.stop="showCreateNodeForm(prop.node.id)"
@click.stop="showCreateNodeForm(node.id)"
>
<QTooltip>
{{ t('Create') }}

4
src/composables/useArrayData.js
View File

@ -156,9 +156,7 @@ export function useArrayData(key, userOptions) {
delete store.userParams[param];
delete params[param];
if (store.filter?.where) {
delete store.filter.where[
Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
];
delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where;
}

5
src/css/app.scss
View File

@ -53,3 +53,8 @@ body.body--dark {
color: var(--vn-text);
border-radius: 8px;
}
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
}

8
src/filters/dateRange.js Normal file
View File

@ -0,0 +1,8 @@
export default function dateRange(value) {
const minHour = new Date(value);
minHour.setHours(0, 0, 0, 0);
const maxHour = new Date(value);
maxHour.setHours(23, 59, 59, 59);
return [minHour, maxHour];
}

2
src/filters/index.js
View File

@ -7,6 +7,7 @@ import toCurrency from './toCurrency';
import toPercentage from './toPercentage';
import toLowerCamel from './toLowerCamel';
import dashIfEmpty from './dashIfEmpty';
import dateRange from './dateRange';
export {
toLowerCase,
@ -18,4 +19,5 @@ export {
toCurrency,
toPercentage,
dashIfEmpty,
dateRange,
};

19
src/i18n/en/index.js
View File

@ -49,7 +49,6 @@ export default {
microsip: 'Open in MicroSIP',
noSelectedRows: `You don't have any line selected`,
downloadCSVSuccess: 'CSV downloaded successfully',
// labels compartidos entre vistas
reference: 'Reference',
agency: 'Agency',
wareHouseOut: 'Warehouse Out',
@ -63,6 +62,7 @@ export default {
selectRows: 'Select all { numberRows } row(s)',
allRows: 'All { numberRows } row(s)',
markAll: 'Mark all',
noResults: 'No results'
},
errors: {
statusUnauthorized: 'Access denied',
@ -113,9 +113,23 @@ export default {
webPayments: 'Web Payments',
extendedList: 'Extended list',
notifications: 'Notifications',
defaulter: 'Defaulter',
createCustomer: 'Create customer',
summary: 'Summary',
basicData: 'Basic Data',
basicData: 'Basic data',
fiscalData: 'Fiscal data',
billingData: 'Billing data',
consignees: 'Consignees',
notes: 'Notes',
credits: 'Credits',
greuges: 'Greuges',
balance: 'Balance',
recoveries: 'Recoveries',
webAccess: 'Web access',
log: 'Log',
sms: 'Sms',
creditManagement: 'Credit management',
others: 'Others',
},
list: {
phone: 'Phone',
@ -605,6 +619,7 @@ export default {
basicData: 'Basic Data',
catalog: 'Catalog',
volume: 'Volume',
lines: 'Lines',
},
field: {
salesPersonFk: 'Sales Person',

19
src/i18n/es/index.js
View File

@ -48,7 +48,6 @@ export default {
dateFormat: 'es-ES',
noSelectedRows: `No tienes ninguna línea seleccionada`,
microsip: 'Abrir en MicroSIP',
// labels compartidos entre vistas
downloadCSVSuccess: 'Descarga de CSV exitosa',
reference: 'Referencia',
agency: 'Agencia',
@ -63,6 +62,7 @@ export default {
selectRows: 'Seleccionar las { numberRows } filas(s)',
allRows: 'Todo { numberRows } filas(s)',
markAll: 'Marcar todo',
noResults: 'Sin resultados'
},
errors: {
statusUnauthorized: 'Acceso denegado',
@ -113,9 +113,23 @@ export default {
webPayments: 'Pagos Web',
extendedList: 'Listado extendido',
notifications: 'Notificaciones',
defaulter: 'Morosos',
createCustomer: 'Crear cliente',
basicData: 'Datos básicos',
summary: 'Resumen',
basicData: 'Datos básicos',
fiscalData: 'Datos fiscales',
billingData: 'Forma de pago',
consignees: 'Consignatarios',
notes: 'Notas',
credits: 'Créditos',
greuges: 'Greuges',
balance: 'Balance',
recoveries: 'Recobros',
webAccess: 'Acceso web',
log: 'Historial',
sms: 'Sms',
creditManagement: 'Gestión de crédito',
others: 'Otros',
},
list: {
phone: 'Teléfono',
@ -513,6 +527,7 @@ export default {
basicData: 'Datos básicos',
catalog: 'Catálogo',
volume: 'Volumen',
lines: 'Líneas',
},
field: {
salesPersonFk: 'Comercial',

3
src/pages/Customer/Card/CustomerBalance.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Balance</div>
</template>

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

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Billing data</div>
</template>

3
src/pages/Customer/Card/CustomerConsignees.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Consignees</div>
</template>

3
src/pages/Customer/Card/CustomerCreditManagement.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credit management</div>
</template>

3
src/pages/Customer/Card/CustomerCredits.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credits</div>
</template>

3
src/pages/Customer/Card/CustomerFiscalData.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Fiscal data</div>
</template>

3
src/pages/Customer/Card/CustomerGreuges.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Greuges</div>
</template>

3
src/pages/Customer/Card/CustomerLog.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Log</div>
</template>

3
src/pages/Customer/Card/CustomerNotes.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Notes</div>
</template>

3
src/pages/Customer/Card/CustomerOthers.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Others</div>
</template>

3
src/pages/Customer/Card/CustomerRecoveries.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Recoveries</div>
</template>

3
src/pages/Customer/Card/CustomerSms.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Sms</div>
</template>

3
src/pages/Customer/Card/CustomerWebAccess.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Web access</div>
</template>

51
src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'filters/index';
const $props = defineProps({
amount: {
type: Number,
required: true,
},
});
const { t } = useI18n();
</script>
<template>
<div class="card_balance q-px-md q-py-sm q-my-sm">
<h6 class="title_balance text-center">{{ t('Total') }}</h6>
<div class="row">
<p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
<b class="value_balance">
{{ toCurrency($props.amount) }}
</b>
</div>
</div>
</template>
<style lang="scss">
.card_balance {
border: 1px solid black;
}
.title_balance {
color: var(--vn-text);
margin-top: 0;
margin-bottom: 0;
}
.key_balance {
color: var(--vn-label);
margin-bottom: 0;
}
.value_balance {
color: var(--vn-text);
margin-bottom: 0;
}
</style>
<i18n>
es:
Total: Total
Balance due: Saldo vencido
</i18n>

252
src/pages/Customer/Defaulter/CustomerDefaulter.vue Normal file
View File

@ -0,0 +1,252 @@
<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox } from 'quasar';
import { toCurrency, toDate } from 'filters/index';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const { t } = useI18n();
const stateStore = useStateStore();
const arrayData = ref(null);
const balanceDueTotal = ref(0);
onBeforeMount(async () => {
arrayData.value = useArrayData('CustomerDefaulter', {
url: 'Defaulters/filter',
limit: 0,
});
await arrayData.value.fetch({ append: false });
balanceDueTotal.value = arrayData.value.store.data.reduce(
(accumulator, currentValue) => {
return accumulator + (currentValue['amount'] || 0);
},
0
);
console.log(balanceDueTotal.value);
stateStore.rightDrawer = true;
});
const rows = computed(() => arrayData.value.store.data);
const selected = ref([]);
const workerId = ref(0);
const customerId = ref(0);
const tableColumnComponents = {
client: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: ({ row }) => selectCustomerId(row.clientFk),
},
isWorker: {
component: QCheckbox,
props: ({ value }) => ({
disable: true,
'model-value': Boolean(value),
}),
event: () => {},
},
salesperson: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: ({ row }) => selectWorkerId(row.salesPersonFk),
},
country: {
component: 'span',
props: () => {},
event: () => {},
},
paymentMethod: {
component: 'span',
props: () => {},
event: () => {},
},
balance: {
component: 'span',
props: () => {},
event: () => {},
},
author: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: ({ row }) => selectWorkerId(row.workerFk),
},
lastObservation: {
component: 'span',
props: () => {},
event: () => {},
},
date: {
component: 'span',
props: () => {},
event: () => {},
},
credit: {
component: 'span',
props: () => {},
event: () => {},
},
from: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'clientName',
label: t('Client'),
name: 'client',
},
{
align: 'left',
field: 'isWorker',
label: t('Is worker'),
name: 'isWorker',
},
{
align: 'left',
field: 'salesPersonName',
label: t('Salesperson'),
name: 'salesperson',
},
{
align: 'left',
field: 'country',
label: t('Country'),
name: 'country',
},
{
align: 'left',
field: 'payMethod',
label: t('P. Method'),
name: 'paymentMethod',
},
{
align: 'left',
field: ({ amount }) => toCurrency(amount),
label: t('Balance D.'),
name: 'balance',
},
{
align: 'left',
field: 'workerName',
label: t('Author'),
name: 'author',
},
{
align: 'left',
field: 'observation',
label: t('Last observation'),
name: 'lastObservation',
},
{
align: 'left',
field: ({ created }) => toDate(created),
label: t('L. O. Date'),
name: 'date',
},
{
align: 'left',
field: ({ creditInsurance }) => toCurrency(creditInsurance),
label: t('Credit I.'),
name: 'credit',
},
{
align: 'left',
field: ({ defaulterSinced }) => toDate(defaulterSinced),
label: t('From'),
name: 'from',
},
]);
const selectCustomerId = (id) => {
workerId.value = 0;
customerId.value = id;
};
const selectWorkerId = (id) => {
customerId.value = 0;
workerId.value = id;
};
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerNotificationsFilter data-key="CustomerDefaulter" />
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data">
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:pagination="{ rowsPerPage: 0 }"
:rows="rows"
class="full-width q-mt-md"
hide-bottom
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 }}
<WorkerDescriptorProxy v-if="workerId" :id="workerId" />
<CustomerDescriptorProxy v-else :id="customerId" />
</component>
</QTr>
</QTd>
</template>
</QTable>
</QPage>
</template>
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px;
}
</style>
<i18n>
es:
Client: Cliente
Is worker: Es trabajador
Salesperson: Comercial
Country: País
P. Method: F. Pago
Balance D.: Saldo V.
Author: Autor
Last observation: Última observación
L. O. Date: Fecha Ú. O.
Credit I.: Crédito A.
From: Desde
</i18n>

238
src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue Normal file
View File

@ -0,0 +1,238 @@
<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 VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const clients = ref();
const salespersons = ref();
const countries = ref();
const authors = ref();
</script>
<template>
<FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
<FetchData
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (salespersons = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
<FetchData
@on-fetch="(data) => (authors = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<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 }">
<QList dense class="list">
<QItem class="q-mb-sm q-mt-sm">
<QItemSection v-if="clients">
<VnSelectFilter
:input-debounce="0"
:label="t('Client')"
:options="clients"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="clientTypeFk"
outlined
rounded
use-input
v-model="params.clientFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="salespersons">
<VnSelectFilter
:input-debounce="0"
:label="t('Salesperson')"
:options="salespersons"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="id"
outlined
rounded
use-input
v-model="params.salesPersonFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="countries">
<VnSelectFilter
:input-debounce="0"
:label="t('Country')"
:options="countries"
dense
emit-value
hide-selected
map-options
option-label="country"
option-value="id"
outlined
rounded
use-input
v-model="params.countryFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('P. Method')"
is-outlined
v-model="params.paymentMethod"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Balance D.')"
is-outlined
v-model="params.balance"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="authors">
<VnSelectFilter
:input-debounce="0"
:label="t('Author')"
:options="authors"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="id"
outlined
rounded
use-input
v-model="params.workerFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('L. O. Date')"
is-outlined
v-model="params.date"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Credit I.')"
is-outlined
v-model="params.credit"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInputDate
:label="t('From')"
is-outlined
v-model="params.defaulterSinced"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:
clientFk: Client
salesPersonFk: Salesperson
countryFk: Country
paymentMethod: P. Method
balance: Balance D.
workerFk: Author
date: L. O. Date
credit: Credit I.
defaulterSinced: From
es:
params:
clientFk: Cliente
salesPersonFk: Comercial
countryFk: País
paymentMethod: F. Pago
balance: Saldo V.
workerFk: Autor
date: Fecha Ú. O.
credit: Crédito A.
defaulterSinced: Desde
Client: Cliente
Salesperson: Comercial
Country: País
P. Method: F. Pago
Balance D.: Saldo V.
Author: Autor
L. O. Date: Fecha Ú. O.
Credit I.: Crédito A.
From: Desde
</i18n>

418
src/pages/Customer/CustomerExtendedList.vue → src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -262,215 +262,213 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: '',
label: '',
name: 'customerStatus',
format: () => ' ',
},
{
align: 'left',
field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
},
{
align: 'left',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
},
{
align: 'left',
field: 'salesPerson',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: (value) => toDate(value),
},
{
align: 'left',
field: 'businessType',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
format: () => ' ',
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
format: () => ' ',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
format: () => ' ',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
format: () => ' ',
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
format: () => ' ',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
format: () => ' ',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
format: () => ' ',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
format: () => ' ',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
format: () => ' ',
},
{
align: 'right',
field: 'actions',
label: '',
name: 'actions',
},
];
});
const columns = computed(() => [
{
align: 'left',
field: '',
label: '',
name: 'customerStatus',
format: () => ' ',
},
{
align: 'left',
field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
},
{
align: 'left',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
},
{
align: 'left',
field: 'salesPerson',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: (value) => toDate(value),
},
{
align: 'left',
field: 'businessType',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
format: () => ' ',
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
format: () => ' ',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
format: () => ' ',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
format: () => ' ',
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
format: () => ' ',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
format: () => ' ',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
format: () => ' ',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
format: () => ' ',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
format: () => ' ',
},
{
align: 'right',
field: 'actions',
label: '',
name: 'actions',
},
]);
const stopEventPropagation = (event, col) => {
if (!['id', 'salesPersonFk'].includes(col.name)) return;
@ -565,6 +563,6 @@ const selectSalesPersonId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

2
src/pages/Customer/CustomerExtendedListActions.vue → src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
View File

@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
const { t } = useI18n();
const quasar = useQuasar();

49
src/pages/Customer/CustomerExtendedListFilter.vue → src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
View File

@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import { dateRange } from 'src/filters';
const props = defineProps({
dataKey: {
@ -32,6 +33,48 @@ const sageTransactionTypesOptions = ref([]);
const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
const exprBuilder = (param, value) => {
switch (param) {
case 'created':
return {
'c.created': {
between: dateRange(value),
},
};
case 'id':
case 'name':
case 'socialName':
case 'fi':
case 'credit':
case 'creditInsurance':
case 'phone':
case 'mobile':
case 'street':
case 'city':
case 'postcode':
case 'email':
case 'isActive':
case 'isVies':
case 'isTaxDataChecked':
case 'isEqualizated':
case 'isFreezed':
case 'hasToInvoice':
case 'hasToInvoiceByAddress':
case 'isToBeMailed':
case 'hasSepaVnl':
case 'hasLcr':
case 'hasCoreVnl':
case 'countryFk':
case 'provinceFk':
case 'salesPersonFk':
case 'businessTypeFk':
case 'payMethodFk':
case 'sageTaxTypeFk':
case 'sageTransactionTypeFk':
return { [`c.${param}`]: value };
}
};
const shouldRenderColumn = (colName) => {
return visibleColumnsSet.value.has(colName);
};
@ -88,7 +131,11 @@ const shouldRenderColumn = (colName) => {
auto-load
@on-fetch="(data) => (sageTransactionTypesOptions = data)"
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:expr-builder="exprBuilder"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong

75
src/pages/Customer/CustomerNotifications.vue → src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -8,7 +8,7 @@ import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
const { t } = useI18n();
const stateStore = useStateStore();
@ -57,40 +57,38 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
},
];
});
const columns = computed(() => [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
},
]);
const selectCustomerId = (id) => {
selectedCustomerId.value = id;
@ -121,11 +119,6 @@ const selectCustomerId = (id) => {
selection="multiple"
v-model:selected="selected"
>
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
@ -148,7 +141,7 @@ const selectCustomerId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

50
src/pages/Customer/CustomerNotificationsFilter.vue → src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
View File

@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
const { t } = useI18n();
const props = defineProps({
@ -15,18 +15,18 @@ const props = defineProps({
},
});
const clients = ref();
const cities = ref();
const clients = ref();
</script>
<template>
<FetchData
url="Clients"
:filter="{ where: { role: 'socialName' } }"
@on-fetch="(data) => (clients = data)"
auto-load
url="Clients"
/>
<FetchData url="Towns" @on-fetch="(data) => (cities = data)" auto-load />
<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">
@ -41,8 +41,8 @@ const cities = ref();
<QItemSection>
<VnInput
:label="t('Identifier')"
v-model="params.identifier"
is-outlined
v-model="params.identifier"
/>
</QItemSection>
</QItem>
@ -53,20 +53,20 @@ const cities = ref();
</QItemSection>
<QItemSection v-if="clients">
<VnSelectFilter
:input-debounce="0"
:label="t('Social name')"
v-model="params.socialName"
@update:model-value="searchFn()"
:options="clients"
option-value="socialName"
option-label="socialName"
emit-value
map-options
use-input
hide-selected
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="socialName"
option-value="socialName"
outlined
rounded
:input-debounce="0"
use-input
v-model="params.socialName"
/>
</QItemSection>
</QItem>
@ -77,33 +77,33 @@ const cities = ref();
</QItemSection>
<QItemSection v-if="cities">
<VnSelectFilter
:input-debounce="0"
:label="t('City')"
v-model="params.city"
@update:model-value="searchFn()"
:options="cities"
option-value="name"
option-label="name"
emit-value
map-options
use-input
hide-selected
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="name"
outlined
rounded
:input-debounce="0"
use-input
v-model="params.city"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
<VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput :label="t('Email')" v-model="params.email" is-outlined />
<VnInput :label="t('Email')" is-outlined v-model="params.email" />
</QItemSection>
</QItem>
<QSeparator />

2
src/pages/Customer/CustomerPayments.vue → src/pages/Customer/Payments/CustomerPayments.vue
View File

@ -7,7 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';

0
src/pages/Customer/CustomerPaymentsFilter.vue → src/pages/Customer/Payments/CustomerPaymentsFilter.vue
View File

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

@ -60,13 +60,14 @@ const companiesOptions = ref([]);
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Supplier *')"
:label="t('Supplier')"
class="full-width"
v-model="data.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="nickname"
hide-selected
:required="true"
:rules="validate('entry.supplierFk')"
>
<template #option="scope">
@ -83,7 +84,7 @@ const companiesOptions = ref([]);
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Travel *')"
:label="t('Travel')"
class="full-width"
v-model="data.travelFk"
:options="travelsOptionsOptions"
@ -91,6 +92,7 @@ const companiesOptions = ref([]);
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('entry.travelFk')"
>
<template #option="scope">
@ -111,7 +113,7 @@ const companiesOptions = ref([]);
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Company *')"
:label="t('Company')"
class="full-width"
v-model="data.companyFk"
:options="companiesOptions"
@ -119,6 +121,7 @@ const companiesOptions = ref([]);
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('entry.companyFk')"
/>
</VnRow>
@ -129,7 +132,7 @@ const companiesOptions = ref([]);
<i18n>
es:
Supplier *: Proveedor *
Travel *: Envío *
Company *: Empresa *
</i18n>
Supplier: Proveedor
Travel: Envío
Company: Empresa
</i18n>

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

@ -49,30 +49,28 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName',
name: 'clientName',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.addressId'),
field: 'id',
name: 'id',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.streetAddress'),
field: 'nickname',
name: 'nickname',
align: 'left',
},
{ label: 'Error', field: 'message', name: 'message', align: 'left' },
];
});
const columns = computed(() => [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName',
name: 'clientName',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.addressId'),
field: 'id',
name: 'id',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.streetAddress'),
field: 'nickname',
name: 'nickname',
align: 'left',
},
{ label: 'Error', field: 'message', name: 'message', align: 'left' },
]);
const rows = computed(() => {
if (!errors && !errors.length > 0) return [];
@ -175,7 +173,7 @@ onUnmounted(() => {
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

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

@ -255,7 +255,7 @@ const selectWorkerId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

68
src/pages/Order/Card/OrderCatalogFilter.vue
View File

@ -21,16 +21,27 @@ const selectedCategoryFk = ref(null);
const typeList = ref(null);
const selectedTypeFk = ref(null);
const selectCategory = (params, category) => {
const resetCategory = () => {
selectedCategoryFk.value = null;
typeList.value = null;
};
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
}
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) {
selectedCategoryFk.value = null;
resetCategory();
params.categoryFk = null;
typeList.value = null;
} else {
selectedCategoryFk.value = category?.id;
params.categoryFk = category?.id;
loadTypes(category?.id);
}
search();
};
const loadTypes = async (categoryFk) => {
@ -65,32 +76,35 @@ function exprBuilder(param, value) {
case 'categoryFk':
case 'typeFk':
return { [param]: value };
case 'search':
return { 'i.name': { like: `%${value}%` } };
}
}
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
};
const getCategoryClass = (category, params) => {
if (category.id === params?.categoryFk) {
return 'active';
}
};
</script>
<template>
<FetchData
url="ItemCategories"
limit="30"
auto-load
@on-fetch="
(data) => {
categoryList = (data || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
}
"
/>
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:hidden-tags="['orderFk', 'orderBy']"
:expr-builder="exprBuilder"
@init="onFilterInit"
@remove="clearFilter"
>
<template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'">
@ -104,21 +118,18 @@ function exprBuilder(param, value) {
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<template #body="{ params, searchFn }">
<QList dense>
<QItem class="category-filter q-mt-md">
<div
v-for="category in categoryList"
:key="category.name"
:class="[
'category',
category.id === params?.categoryFk && 'active',
]"
:class="['category', getCategoryClass(category, params)]"
>
<QIcon
:name="category.icon"
class="category-icon"
@click="selectCategory(params, category)"
@click="selectCategory(params, category, searchFn)"
>
<QTooltip>
{{ t(category.name) }}
@ -140,7 +151,12 @@ function exprBuilder(param, value) {
emit-value
use-input
:disable="!selectedCategoryFk"
@update:model-value="(value) => (selectedTypeFk = value)"
@update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">

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

@ -6,6 +6,8 @@ import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue'
import toCurrency from '../../../filters/toCurrency';
import { ref } from 'vue';
const DEFAULT_PRICE_KG = 0;
const session = useSession();
const token = session.getToken();
const { t } = useI18n();
@ -70,7 +72,7 @@ const dialog = ref(null);
</QIcon>
</div>
<p v-if="item.priceKg" class="price-kg">
{{ t('price-kg') }} {{ toCurrency(item.priceKg) || 1123 }}
{{ t('price-kg') }} {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
</p>
</div>
</div>

5
src/pages/Order/Card/OrderCatalogItemDialog.vue
View File

@ -45,8 +45,7 @@ const addToOrder = async () => {
class="link"
@click="
() => {
item.quantity =
Number(item.quantity) + item.grouping;
item.quantity += item.grouping;
}
"
>
@ -56,7 +55,7 @@ const addToOrder = async () => {
</td>
<td class="text-right">
<QInput
v-model="item.quantity"
v-model.number="item.quantity"
type="number"
:step="item.grouping"
min="0"

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

@ -9,7 +9,10 @@ import useCardDescription from 'src/composables/useCardDescription';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import OrderDescriptorMenu from "pages/Order/Card/OrderDescriptorMenu.vue";
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import FetchData from 'components/FetchData.vue';
const DEFAULT_ITEMS = 0;
const $props = defineProps({
id: {
@ -60,9 +63,20 @@ const setData = (entity) => {
data.value = useCardDescription(entity.client.name, entity.id);
state.set('ClaimDescriptor', entity);
};
const getConfirmationValue = (isConfirmed) => {
return t(isConfirmed ? 'order.summary.confirmed' : 'order.summary.notConfirmed');
};
const total = ref(null);
</script>
<template>
<FetchData
:url="`Orders/${entityId}/getTotal`"
@on-fetch="(response) => (total = response)"
auto-load
/>
<CardDescriptor
ref="descriptor"
:url="`Orders/${entityId}`"
@ -79,13 +93,7 @@ const setData = (entity) => {
<template #body="{ entity }">
<VnLv
:label="t('order.summary.state')"
:value="
t(
entity.isConfirmed
? 'order.summary.confirmed'
: 'order.summary.notConfirmed'
)
"
:value="getConfirmationValue(entity.isConfirmed)"
/>
<VnLv :label="t('order.field.salesPersonFk')">
<template #value>
@ -98,8 +106,11 @@ const setData = (entity) => {
<VnLv :label="t('order.summary.landed')" :value="toDate(entity?.landed)" />
<VnLv :label="t('order.field.agency')" :value="entity?.agencyMode?.name" />
<VnLv :label="t('order.summary.alias')" :value="entity?.address?.nickname" />
<VnLv :label="t('order.summary.items')" :value="(entity?.rows?.length || 0).toString()" />
<VnLv :label="t('order.summary.total')" :value="toCurrency(entity?.total)" />
<VnLv
:label="t('order.summary.items')"
:value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
/>
<VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
</template>
<template #actions="{ entity }">
<QCardActions>

11
src/pages/Order/Card/OrderSearchbar.vue
View File

@ -9,17 +9,14 @@ const { t } = useI18n();
<VnSearchbar
data-key="OrderList"
url="Orders/filter"
:label="t('search-order')"
:info="t('search-order-info')"
:label="t('Search order')"
:info="t('You can search orders by reference')"
/>
</template>
<style scoped lang="scss"></style>
<i18n>
en:
search-order: Search order
search-order-info: You can search orders by reference
es:
Search shelving: Buscar orden
You can search by shelving reference: Puedes buscar por referencia de la orden
Search order: Buscar orden
You can search orders by reference: Puedes buscar por referencia de la orden
</i18n>

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

@ -78,7 +78,7 @@ const detailsColumns = ref([
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="entity?.isConfirmed === 1"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">

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

@ -20,12 +20,6 @@ const catalogParams = {
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
};
function exprBuilder(param, value) {
switch (param) {
case 'search':
return { 'i.name': { like: `%${value}%` } };
}
}
</script>
<template>
@ -35,8 +29,8 @@ function exprBuilder(param, value) {
url="Orders/CatalogFilter"
:limit="50"
:user-params="catalogParams"
:expr-builder="exprBuilder"
:static-params="['orderFk', 'orderBy']"
:redirect="false"
/>
</Teleport>
<Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
@ -70,6 +64,9 @@ function exprBuilder(param, value) {
>
<template #body="{ rows }">
<div class="catalog-list">
<div v-if="rows && !rows?.length" class="no-result">
{{ t('globals.noResults') }}
</div>
<OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
</div>
</template>
@ -78,7 +75,7 @@ function exprBuilder(param, value) {
</QPage>
</template>
<style lang="scss">
<style lang="scss" scoped>
.card-list {
width: 100%;
}
@ -90,4 +87,11 @@ function exprBuilder(param, value) {
justify-content: center;
gap: 16px;
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>

288
src/pages/Order/OrderLines.vue Normal file
View File

@ -0,0 +1,288 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSession } from 'composables/useSession';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const session = useSession();
const quasar = useQuasar();
const token = session.getToken();
const orderSummary = ref({
total: null,
vat: null,
});
const componentKey = ref(0);
const refresh = () => {
componentKey.value += 1;
};
function confirmRemove(item) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('confirmDeletion'),
message: t('confirmDeletionMessage'),
promise: async () => remove(item),
},
});
}
async function remove(item) {
await axios.post('OrderRows/removes', {
actualOrderId: route.params.id,
rows: [item.id],
});
quasar.notify({
message: t('globals.dataDeleted'),
type: 'positive',
});
refresh();
}
async function confirmOrder() {
await axios.post(`Orders/${route.params.id}/confirm`);
quasar.notify({
message: t('globals.confirm'),
type: 'positive',
});
}
</script>
<template>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@on-fetch="(data) => (orderSummary.total = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getVAT`"
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QPage :key="componentKey" class="column items-center q-pa-md">
<div class="card-list">
<div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal')"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT')"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total')"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
<VnPaginate
data-key="OrderLines"
url="OrderRows"
:limit="20"
auto-load
:filter="{
include: [
{
relation: 'item',
},
{
relation: 'warehouse',
},
],
where: { orderFk: route.params.id },
}"
>
<template #body="{ rows }">
<div class="catalog-list q-mt-xl">
<CardList
v-for="row in rows"
:key="row.id"
:id="row.id"
:title="row?.item?.name"
class="cursor-inherit"
>
<template #title>
<div class="flex items-center">
<div class="image-wrapper q-mr-md">
<QImg
:src="`/api/Images/catalog/50x50/${row?.item?.id}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50"
width="50"
class="image"
/>
</div>
<div
class="title text-primary text-weight-bold text-h5"
>
{{ row?.item?.name }}
</div>
<QChip class="q-chip-color" outline size="sm">
{{ t('ID') }}: {{ row.id }}
</QChip>
</div>
</template>
<template #list-items>
<div class="q-mb-sm">
<span class="text-uppercase subname">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="String(row.item.id)" />
<VnLv
:label="t('warehouse')"
:value="row.warehouse.name"
/>
<VnLv
:label="t('shipped')"
:value="toDate(row.shipped)"
/>
<VnLv
:label="t('quantity')"
:value="String(row.quantity)"
/>
<VnLv
:label="t('price')"
:value="toCurrency(row.price)"
/>
<VnLv
:label="t('amount')"
:value="toCurrency(row.price * row.quantity)"
/>
</template>
<template #actions>
<QBtn
:label="t('remove')"
@click.stop="confirmRemove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</div>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<style lang="scss">
.order-lines-summary {
.vn-label-value {
display: flex;
justify-content: flex-end;
gap: 2%;
.label {
color: var(--vn-label);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
.header {
color: $primary;
font-weight: bold;
margin-bottom: 25px;
font-size: 20px;
display: inline-block;
}
.image-wrapper {
height: 50px;
width: 50px;
.image {
border-radius: 50%;
}
}
.subname {
color: var(--vn-label);
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>
<i18n>
en:
summary: Summary
subtotal: Subtotal
VAT: VAT
total: Total
item: Item
warehouse: Warehouse
shipped: Shipped
quantity: Quantity
price: Price
amount: Amount
remove: Remove
confirmDeletion: Confirm deletion,
confirmDeletionMessage: Are you sure you want to delete this item?
confirm: Confirm
es:
summary: Resumen
subtotal: Subtotal
VAT: IVA
total: Total
item: Artículo
warehouse: Almacén
shipped: F. envío
quantity: Cantidad
price: Precio
amount: Importe
remove: Eliminar
confirmDeletion: Confirmar eliminación,
confirmDeletionMessage: Seguro que quieres eliminar este artículo?
confirm: Confirmar
</i18n>

28
src/pages/Order/OrderVolume.vue
View File

@ -1,15 +1,17 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import { ref } from 'vue';
import { dashIfEmpty } from 'src/filters';
import CardList from 'components/ui/CardList.vue';
import axios from 'axios';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { dashIfEmpty } from 'src/filters';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);
@ -34,14 +36,17 @@ const loadVolumes = async (rows) => {
/>
<QPage class="column items-center q-pa-md">
<div class="card-list">
<QCard class="order-volume-summary q-pa-lg">
<div
v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
class="no-result"
>
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-volume-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
:label="t('total')"
:value="`${volumeSummary?.totalVolume} m³`"
/>
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
<VnLv
:label="t('boxes')"
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
@ -128,6 +133,13 @@ const loadVolumes = async (rows) => {
font-size: 20px;
display: inline-block;
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>
<i18n>
en:

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

@ -150,7 +150,7 @@ function downloadPdfs() {
<QIcon
name="visibility"
color="primary"
size="2em"
size="md"
class="q-mr-sm q-ml-sm"
/>
<QTooltip>

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

@ -53,7 +53,7 @@ const isAdministrative = computed(() => {
>
<template #header-left>
<a v-if="isAdministrative" class="header link" :href="supplierUrl">
<QIcon name="open_in_new" color="white" size="25px" />
<QIcon name="open_in_new" color="white" size="sm" />
</a>
</template>
<template #header>

2
src/pages/Travel/Card/TravelSummary.vue
View File

@ -195,7 +195,7 @@ const openEntryDescriptor = () => {};
>
<template #header-left>
<a class="header link" :href="travelUrl">
<QIcon name="open_in_new" color="white" size="25px" />
<QIcon name="open_in_new" color="white" size="sm" />
</a>
</template>
<template #header>

210
src/pages/Travel/ExtraCommunity.vue
View File

@ -103,111 +103,109 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
label: 'id',
field: 'id',
name: 'id',
align: 'left',
showValue: true,
},
{
label: t('supplier.pageTitles.supplier'),
field: 'cargoSupplierNickname',
name: 'cargoSupplierNickname',
align: 'left',
showValue: true,
},
{
label: t('globals.agency'),
field: 'agencyModeName',
name: 'agencyModeName',
align: 'left',
showValue: true,
},
{
label: t('globals.amount'),
name: 'invoiceAmount',
field: 'entries',
align: 'left',
showValue: true,
format: (value) =>
toCurrency(
value
? value.reduce((sum, entry) => {
return sum + (entry.invoiceAmount || 0);
}, 0)
: 0
),
},
{
label: t('globals.reference'),
field: 'ref',
name: 'ref',
align: 'left',
showValue: false,
},
{
label: t('globals.packages'),
field: 'stickers',
name: 'stickers',
align: 'left',
showValue: true,
},
{
label: t('kg'),
field: 'kg',
name: 'kg',
align: 'left',
showValue: true,
},
{
label: t('physicKg'),
field: 'loadedKg',
name: 'loadedKg',
align: 'left',
showValue: true,
},
{
label: 'KG Vol.',
field: 'volumeKg',
name: 'volumeKg',
align: 'left',
showValue: true,
},
{
label: t('globals.wareHouseOut'),
field: 'warehouseOutName',
name: 'warehouseOutName',
align: 'left',
showValue: true,
},
{
label: t('shipped'),
field: 'shipped',
name: 'shipped',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
{
label: t('globals.wareHouseIn'),
field: 'warehouseInName',
name: 'warehouseInName',
align: 'left',
showValue: true,
},
{
label: t('landed'),
field: 'landed',
name: 'landed',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
];
});
const columns = computed(() => [
{
label: 'id',
field: 'id',
name: 'id',
align: 'left',
showValue: true,
},
{
label: t('supplier.pageTitles.supplier'),
field: 'cargoSupplierNickname',
name: 'cargoSupplierNickname',
align: 'left',
showValue: true,
},
{
label: t('globals.agency'),
field: 'agencyModeName',
name: 'agencyModeName',
align: 'left',
showValue: true,
},
{
label: t('globals.amount'),
name: 'invoiceAmount',
field: 'entries',
align: 'left',
showValue: true,
format: (value) =>
toCurrency(
value
? value.reduce((sum, entry) => {
return sum + (entry.invoiceAmount || 0);
}, 0)
: 0
),
},
{
label: t('globals.reference'),
field: 'ref',
name: 'ref',
align: 'left',
showValue: false,
},
{
label: t('globals.packages'),
field: 'stickers',
name: 'stickers',
align: 'left',
showValue: true,
},
{
label: t('kg'),
field: 'kg',
name: 'kg',
align: 'left',
showValue: true,
},
{
label: t('physicKg'),
field: 'loadedKg',
name: 'loadedKg',
align: 'left',
showValue: true,
},
{
label: 'KG Vol.',
field: 'volumeKg',
name: 'volumeKg',
align: 'left',
showValue: true,
},
{
label: t('globals.wareHouseOut'),
field: 'warehouseOutName',
name: 'warehouseOutName',
align: 'left',
showValue: true,
},
{
label: t('shipped'),
field: 'shipped',
name: 'shipped',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
{
label: t('globals.wareHouseIn'),
field: 'warehouseInName',
name: 'warehouseInName',
align: 'left',
showValue: true,
},
{
label: t('landed'),
field: 'landed',
name: 'landed',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
]);
async function getData() {
await arrayData.fetch({ append: false });
@ -395,7 +393,7 @@ onMounted(async () => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
.secondary-row {

2
src/pages/Travel/ExtraCommunityFilter.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { reactive, ref } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';

4
src/pages/Wagon/Type/WagonTypeCreate.vue
View File

@ -309,8 +309,8 @@ function exceedMaxHeight(pos) {
</div>
</div>
<div class="q-mb-sm wheels">
<QIcon color="grey-6" name="trip_origin" size="3rem" />
<QIcon color="grey-6" name="trip_origin" size="3rem" />
<QIcon color="grey-6" name="trip_origin" size="xl" />
<QIcon color="grey-6" name="trip_origin" size="xl" />
</div>
<QDialog
v-model="colorPickerActive"

165
src/router/modules/customer.js
View File

@ -15,8 +15,24 @@ export default {
'CustomerPayments',
'CustomerExtendedList',
'CustomerNotifications',
'CustomerDefaulter',
],
card: [
'CustomerBasicData',
'CustomerFiscalData',
'CustomerBillingData',
'CustomerConsignees',
'CustomerNotes',
'CustomerCredits',
'CustomerGreuges',
'CustomerBalance',
'CustomerRecoveries',
'CustomerWebAccess',
'CustomerLog',
'CustomerSms',
'CustomerCreditManagement',
'CustomerOthers',
],
card: ['CustomerBasicData'],
},
children: [
{
@ -49,7 +65,8 @@ export default {
title: 'webPayments',
icon: 'vn:onlinepayment',
},
component: () => import('src/pages/Customer/CustomerPayments.vue'),
component: () =>
import('src/pages/Customer/Payments/CustomerPayments.vue'),
},
{
path: 'extendedList',
@ -59,7 +76,9 @@ export default {
icon: 'vn:client',
},
component: () =>
import('src/pages/Customer/CustomerExtendedList.vue'),
import(
'src/pages/Customer/ExtendedList/CustomerExtendedList.vue'
),
},
{
path: 'notifications',
@ -69,7 +88,19 @@ export default {
icon: 'notifications',
},
component: () =>
import('src/pages/Customer/CustomerNotifications.vue'),
import(
'src/pages/Customer/Notifications/CustomerNotifications.vue'
),
},
{
path: 'defaulter',
name: 'CustomerDefaulter',
meta: {
title: 'defaulter',
icon: 'vn:risk',
},
component: () =>
import('src/pages/Customer/Defaulter/CustomerDefaulter.vue'),
},
],
},
@ -99,6 +130,132 @@ export default {
component: () =>
import('src/pages/Customer/Card/CustomerBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'CustomerFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Customer/Card/CustomerFiscalData.vue'),
},
{
path: 'billing-data',
name: 'CustomerBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Customer/Card/CustomerBillingData.vue'),
},
{
path: 'consignees',
name: 'CustomerConsignees',
meta: {
title: 'consignees',
icon: 'vn:delivery',
},
component: () =>
import('src/pages/Customer/Card/CustomerConsignees.vue'),
},
{
path: 'notes',
name: 'CustomerNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
},
{
path: 'credits',
name: 'CustomerCredits',
meta: {
title: 'credits',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Customer/Card/CustomerCredits.vue'),
},
{
path: 'greuges',
name: 'CustomerGreuges',
meta: {
title: 'greuges',
icon: 'vn:greuge',
},
component: () =>
import('src/pages/Customer/Card/CustomerGreuges.vue'),
},
{
path: 'balance',
name: 'CustomerBalance',
meta: {
title: 'balance',
icon: 'vn:invoice',
},
component: () =>
import('src/pages/Customer/Card/CustomerBalance.vue'),
},
{
path: 'recoveries',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',
name: 'CustomerWebAccess',
meta: {
title: 'webAccess',
icon: 'vn:web',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebAccess.vue'),
},
{
path: 'log',
name: 'CustomerLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
},
{
path: 'sms',
name: 'CustomerSms',
meta: {
title: 'sms',
icon: 'sms',
},
component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
},
{
path: 'credit-management',
name: 'CustomerCreditManagement',
meta: {
title: 'creditManagement',
icon: 'paid',
},
component: () =>
import('src/pages/Customer/Card/CustomerCreditManagement.vue'),
},
{
path: 'others',
name: 'CustomerOthers',
meta: {
title: 'others',
icon: 'pending',
},
component: () => import('src/pages/Customer/Card/CustomerOthers.vue'),
},
],
},
],

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

@ -11,7 +11,7 @@ export default {
redirect: { name: 'OrderMain' },
menus: {
main: ['OrderList'],
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume'],
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume', 'OrderLines'],
},
children: [
{
@ -81,6 +81,15 @@ export default {
},
component: () => import('src/pages/Order/OrderVolume.vue'),
},
{
name: 'OrderLines',
path: 'line',
meta: {
title: 'lines',
icon: 'vn:lines',
},
component: () => import('src/pages/Order/OrderLines.vue'),
},
],
},
],

8
test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
View File

@ -1,11 +1,10 @@
import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';
import CustomerPayments from 'pages/Customer/CustomerPayments.vue';
import CustomerPayments from 'src/pages/Customer/Payments/CustomerPayments.vue';
describe('CustomerPayments', () => {
let vm;
beforeAll(() => {
vm = createWrapper(CustomerPayments, {
global: {
@ -13,7 +12,7 @@ describe('CustomerPayments', () => {
mocks: {
fetch: vi.fn(),
},
}
},
}).vm;
});
@ -28,11 +27,10 @@ describe('CustomerPayments', () => {
await vm.confirmTransaction({ id: 1 });
expect(vm.quasar.notify).toHaveBeenCalledWith(
expect.objectContaining({
message: 'Payment confirmed',
type: 'positive'
type: 'positive',
})
);
});