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

Merge branch 'dev' into bugfix/travel-cards

This commit is contained in:
Kevin Martinez 2024-01-16 11:53:33 +00:00
parent 5e9006bf33 46c9244f1b
commit 3e272537aa
133 changed files with 5370 additions and 1754 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
CHANGELOG.md
View File

@ -5,15 +5,26 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [2352.01] - 2023-12-28
## [2400.01] - 2024-01-04
### Added
- (carros) => Se añade contador de carros. #6545
- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
### Changed
### Fixed
- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
### Changed
### Fixed
## [2350.01] - 2023-12-14
### Added
- (Carros) => Se añade contador de carros. #6545
- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
### Changed
### Fixed
- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
## [2253.01] - 2023-01-05

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "salix-front",
"version": "23.52.01",
"version": "24.02.01",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "salix-front",
"version": "23.52.01",
"version": "24.02.01",
"dependencies": {
"@quasar/cli": "^2.3.0",
"@quasar/extras": "^1.16.4",

2
package.json
View File

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

3
src/App.vue
View File

@ -1,10 +1,11 @@
<script setup>
import { onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useQuasar, Dark } from 'quasar';
import { useI18n } from 'vue-i18n';
const quasar = useQuasar();
const { availableLocales, locale, fallbackLocale } = useI18n();
Dark.set(true);
onMounted(() => {
let userLang = window.navigator.language;

70
src/components/CreateBankEntityForm.vue
View File

@ -4,8 +4,15 @@ 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 props = defineProps({
showEntityField: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['onDataSaved']);
@ -22,41 +29,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
@ -85,47 +80,14 @@ const closeForm = () => {
:rules="validate('bankEntity.countryFk')"
/>
</div>
<div class="col">
<div v-if="showEntityField" class="col">
<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

63
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();
const onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
};
</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

90
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,27 +24,28 @@ 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 onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
};
const onCityCreated = async () => {
const onCityCreated = async ({ name, provinceFk }, formData) => {
await townsFetchDataRef.value.fetch();
formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
formData.provinceFk = provinceFk;
formData.countryFk = provincesOptions.value.find(
(province) => province.id === provinceFk
).countryFk;
};
const onProvinceCreated = async () => {
const onProvinceCreated = async ({ name }, formData) => {
await provincesFetchDataRef.value.fetch();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
formData.provinceFk = provincesOptions.value.find(
(province) => province.name === name
).id;
};
</script>
@ -66,20 +67,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
@ -100,7 +96,9 @@ const closeForm = () => {
:roles-allowed-to-create="['deliveryAssistant']"
>
<template #form>
<CreateNewCityForm @on-data-saved="onCityCreated($event)" />
<CreateNewCityForm
@on-data-saved="onCityCreated($event, data)"
/>
</template>
</VnSelectCreate>
</div>
@ -119,7 +117,7 @@ const closeForm = () => {
>
<template #form>
<CreateNewProvinceForm
@on-data-saved="onProvinceCreated($event)"
@on-data-saved="onProvinceCreated($event, data)"
/>
</template>
</VnSelectCreate>
@ -134,50 +132,16 @@ 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>
</div> </VnRow
></template>
</FormModelPopup>
</template>
</FormModel>
</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
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
City: Ciudad
City: Población
Province: Provincia
Country: País
Postcode: Código postal

68
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();
const onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
};
</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

8
src/components/CrudModel.vue
View File

@ -225,15 +225,19 @@ function getDifferences(obj1, obj2) {
delete obj2.$index;
for (let key in obj1) {
if (obj2[key] && obj1[key] !== obj2[key]) {
if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
diff[key] = obj2[key];
}
}
for (let key in obj2) {
if (obj1[key] === undefined || obj1[key] !== obj2[key]) {
if (
obj1[key] === undefined ||
JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
) {
diff[key] = obj2[key];
}
}
return diff;
}

6
src/components/FetchData.vue
View File

@ -30,7 +30,7 @@ const $props = defineProps({
params: {
type: Object,
default: null,
}
},
});
const emit = defineEmits(['onFetch']);
@ -42,9 +42,9 @@ onMounted(async () => {
}
});
async function fetch() {
async function fetch(fetchFilter = {}) {
try {
const filter = Object.assign({}, $props.filter); // eslint-disable-line vue/no-dupe-keys
const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
if ($props.where) filter.where = $props.where;
if ($props.sortBy) filter.order = $props.sortBy;
if ($props.limit) filter.limit = $props.limit;

9
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 }
@ -137,12 +135,11 @@ async function save() {
await axios.patch($props.urlUpdate || $props.url, body);
}
emit('onDataSaved', formData.value);
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
} catch (err) {
notify('errors.create', 'negative');
}
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
isLoading.value = false;
}

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 = (dataSaved) => {
emit('onDataSaved', dataSaved);
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($event)"
>
<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>

10
src/components/NavBar.vue
View File

@ -24,11 +24,8 @@ const pinnedModulesRef = ref();
</script>
<template>
<QHeader class="bg-dark" color="white" elevated>
<QToolbar
class="q-py-sm q-px-md"
:class="{ 'q-gutter-x-sm': !quasar.platform.is.mobile }"
>
<QHeader color="white" elevated>
<QToolbar class="q-py-sm q-px-md">
<QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
@ -108,6 +105,9 @@ const pinnedModulesRef = ref();
.searchbar {
width: max-content;
}
.q-header {
background-color: var(--vn-dark);
}
</style>
<i18n>
en:

30
src/components/UserPanel.vue
View File

@ -1,17 +1,18 @@
<script setup>
import { onMounted, computed } from 'vue';
import { Dark, Quasar } from 'quasar';
import { Dark, Quasar, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import { localeEquivalence } from "src/i18n/index";
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
const quasar = useQuasar();
const userLocale = computed({
get() {
@ -20,13 +21,11 @@ const userLocale = computed({
set(value) {
locale.value = value;
if (value === 'en') value = 'en-GB';
value = localeEquivalence[value] ?? value
// FIXME: Dynamic imports from absolute paths are not compatible with vite:
// https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
try {
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
/* @vite-ignore */
import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
Quasar.lang.set(lang.default);
});
} catch (error) {
@ -81,6 +80,14 @@ function logout() {
session.destroy();
router.push('/login');
}
function copyUserToken(){
navigator.clipboard.writeText(session.getToken());
quasar.notify({
type: 'positive',
message: t('components.userPanel.copyToken'),
});
}
</script>
<template>
@ -122,7 +129,8 @@ function logout() {
<div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong>
</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
</div>
<QBtn
id="logout"
@ -143,4 +151,10 @@ function logout() {
.panel {
width: 150px;
}
.copyUserToken {
&:hover{
cursor: alias;
}
}
</style>

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

@ -4,6 +4,7 @@ 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: {
@ -22,6 +23,7 @@ const $props = defineProps({
const emit = defineEmits(['onConfigSaved']);
const { notify } = useNotify();
const state = useState();
const { t } = useI18n();
const popupProxyRef = ref(null);
@ -36,14 +38,11 @@ const areAllChecksMarked = computed(() => {
const setUserConfigViewData = (data) => {
if (!data) 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 = {
formattedCols.value = $props.allColumns.map((col) => ({
name: col,
active: data[col],
};
return obj;
});
}));
emitSavedConfig();
};
@ -51,41 +50,35 @@ const toggleMarkAll = (val) => {
formattedCols.value.forEach((col) => (col.active = val));
};
const getConfig = async (url, filter) => {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
};
const fetchViewConfigData = async () => {
try {
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
where: { tableCode: $props.tableCode, userFk: user.id },
};
const userConfig = await getConfig('UserConfigViews', userConfigFilter);
const userViewConfigResponse = await axios.get('UserConfigViews', {
params: { filter: userConfigFilter },
});
if (userViewConfigResponse.data && userViewConfigResponse.data.length > 0) {
initialUserConfigViewData.value = userViewConfigResponse.data[0];
setUserConfigViewData(userViewConfigResponse.data[0].configuration);
if (userConfig) {
initialUserConfigViewData.value = userConfig;
setUserConfigViewData(userConfig.configuration);
return;
}
const defaultConfigFilter = {
where: {
tableCode: $props.tableCode,
},
};
const defaultConfigFilter = { where: { tableCode: $props.tableCode } };
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
const defaultViewConfigResponse = await axios.get('DefaultViewConfigs', {
params: { filter: defaultConfigFilter },
});
if (defaultViewConfigResponse.data && defaultViewConfigResponse.data.length > 0) {
setUserConfigViewData(defaultViewConfigResponse.data[0].columns);
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) {
console.err('Error fetching config view data');
console.err('Error fetching config view data', err);
}
};
@ -95,7 +88,8 @@ const saveConfig = async () => {
const configuration = {};
formattedCols.value.forEach((col) => {
configuration[col.name] = col.active;
const { name, active } = col;
configuration[name] = active;
});
// Si existe una view config del usuario hacemos un update si no la creamos
@ -126,16 +120,18 @@ const saveConfig = async () => {
initialUserConfigViewData.value = response.data[0];
}
emitSavedConfig();
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config');
console.error('Error saving user view config', err);
}
};
const emitSavedConfig = () => {
const filteredCols = formattedCols.value.filter((col) => col.active);
const mappedCols = filteredCols.map((col) => col.name);
emit('onConfigSaved', mappedCols);
const activeColumns = formattedCols.value
.filter((col) => col.active)
.map((col) => col.name);
emit('onConfigSaved', activeColumns);
};
onMounted(async () => {
@ -157,7 +153,7 @@ onMounted(async () => {
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
@ -172,6 +168,7 @@ onMounted(async () => {
}}</QBtn>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
@ -187,3 +184,9 @@ onMounted(async () => {
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>

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

@ -69,6 +69,10 @@ function getBreadcrumb(param) {
> div {
flex-wrap: nowrap;
}
&--last,
&__separator {
color: var(--vn-label);
}
}
@media (max-width: $breakpoint-md) {
.q-breadcrumbs {

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

16
src/components/common/VnLog.vue
View File

@ -12,8 +12,8 @@ import { useValidator } from 'src/composables/useValidator';
import VnAvatar from '../ui/VnAvatar.vue';
import VnJsonValue from '../common/VnJsonValue.vue';
import FetchData from '../FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnSelectFilter from './VnSelectFilter.vue';
import VnUserLink from '../ui/VnUserLink.vue';
const stateStore = useStateStore();
const validationsStore = useValidator();
@ -421,15 +421,15 @@ setLogTree();
>
<div class="timeline">
<div class="user-avatar">
<VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
<template #link>
<VnAvatar
class="cursor-pointer"
:worker="userLog.user.id"
:class="{ 'cursor-pointer': userLog.user.id }"
:worker-id="userLog.user.id"
:title="userLog.user.nickname"
/>
<WorkerDescriptorProxy
v-if="userLog.user.image"
:id="userLog.user.id"
/>
</template>
</VnUserLink>
</div>
<div class="arrow bg-panel" v-if="byRecord"></div>
<div class="line"></div>
@ -704,7 +704,7 @@ setLogTree();
class="q-pa-xs row items-center"
>
<QItemSection class="col-3 items-center">
<VnAvatar :worker="opt.id" />
<VnAvatar :worker-id="opt.id" />
</QItemSection>
<QItemSection class="col-9 justify-center">
<span>{{ opt.name }}</span>

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

@ -1,5 +1,5 @@
<script setup>
import { ref, toRefs, computed } from 'vue';
import { ref, toRefs, computed, watch } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({
@ -23,13 +23,31 @@ const $props = defineProps({
type: Boolean,
default: true,
},
defaultFilter: {
type: Boolean,
default: true,
},
});
const { optionLabel } = toRefs($props);
const { optionLabel, options } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = computed(() => $props.options);
const vnSelectRef = ref(null);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
const filter = (val, options) => {
const search = val.toString().toLowerCase();
@ -53,6 +71,7 @@ const filter = (val, options) => {
const filterHandler = (val, update) => {
update(
() => {
if ($props.defaultFilter)
myOptions.value = filter(val, myOptionsOriginal.value);
},
(ref) => {
@ -64,13 +83,8 @@ const filterHandler = (val, update) => {
);
};
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
watch(options, (newValue) => {
setOptions(newValue);
});
</script>
@ -87,6 +101,7 @@ const value = computed({
hide-selected
fill-input
ref="vnSelectRef"
:class="{ required: $attrs.required }"
>
<template v-if="isClearable" #append>
<QIcon

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

@ -62,7 +62,7 @@ async function getData() {
filter: $props.filter,
skip: 0,
});
const { data } = await arrayData.fetch({ append: false });
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
entity.value = data;
emit('onFetch', data);
}

4
src/components/ui/CardList.vue
View File

@ -9,6 +9,7 @@ const $props = defineProps({
isSelected: { type: Boolean, default: false },
title: { type: String, default: null },
showCheckbox: { type: Boolean, default: false },
hasInfoIcons: { type: Boolean, default: false },
});
const emit = defineEmits(['toggleCardCheck']);
@ -39,6 +40,9 @@ const toggleCardCheck = (item) => {
</div>
</slot>
<div class="card-list-body">
<div v-if="hasInfoIcons" class="column q-mr-md q-gutter-y-xs">
<slot name="info-icons" />
</div>
<div class="list-items row flex-wrap-wrap">
<slot name="list-items" />
</div>

8
src/components/ui/CardSummary.vue
View File

@ -97,7 +97,7 @@ watch(props, async () => {
flex: 2;
}
> .q-card.vn-three {
flex: 3;
flex: 4;
}
> .q-card.vn-max {
width: 100%;
@ -116,17 +116,17 @@ watch(props, async () => {
margin-top: 5px;
.label {
color: var(--vn-label);
width: 10em;
width: 8em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.value {
color: var(--vn-text);
width: max-content;
overflow: hidden;
white-space: nowrap;
}
}
.header {

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

@ -1,7 +1,8 @@
<script setup>
import { useSession } from 'src/composables/useSession';
const $props = defineProps({
worker: { type: Number, required: true },
workerId: { type: Number, required: true },
description: { type: String, default: null },
});
const session = useSession();
@ -11,7 +12,7 @@ const token = session.getToken();
<div class="avatar-picture column items-center">
<QAvatar color="orange">
<QImg
:src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
:src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
spinner-color="white"
/>
</QAvatar>

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

@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
import toDate from 'filters/toDate';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
@ -39,9 +41,13 @@ const props = defineProps({
type: Array,
default: () => [],
},
customTags: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder,
@ -104,18 +110,26 @@ async function clearFilters() {
emit('clear');
}
const tags = computed(() => {
return Object.entries(userParams.value)
const tagsList = computed(() =>
Object.entries(userParams.value)
.filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
.map(([key, value]) => ({
label: key,
value: value,
}));
});
}))
);
const tags = computed(() =>
tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
);
const customTags = computed(() =>
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
);
async function remove(key) {
userParams.value[key] = null;
await search();
emit('remove', key);
}
function formatValue(value) {
@ -171,21 +185,17 @@ function formatValue(value) {
</QItem>
<QItem class="q-mb-sm">
<div
v-if="tags.length === 0"
v-if="tagsList.length === 0"
class="text-grey font-xs text-center full-width"
>
{{ t(`No filters applied`) }}
</div>
<div>
<QChip
:key="chip.label"
@remove="remove(chip.label)"
class="text-dark"
color="primary"
icon="label"
:removable="!unremovableParams.includes(chip.label)"
size="sm"
<VnFilterPanelChip
v-for="chip of tags"
:key="chip.label"
:removable="!unremovableParams.includes(chip.label)"
@remove="remove(chip.label)"
>
<slot name="tags" :tag="chip" :format-fn="formatValue">
<div class="q-gutter-x-xs">
@ -193,7 +203,15 @@ function formatValue(value) {
<span>"{{ chip.value }}"</span>
</div>
</slot>
</QChip>
</VnFilterPanelChip>
<slot
v-if="$slots.customTags"
name="customTags"
:params="userParams"
:tags="customTags"
:format-fn="formatValue"
:search-fn="search"
/>
</div>
</QItem>
<QSeparator />

7
src/components/ui/VnFilterPanelChip.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup></script>
<template>
<QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
<slot />
</QChip>
</template>

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

@ -5,7 +5,7 @@ import { dashIfEmpty } from 'src/filters';
const $props = defineProps({
label: { type: String, default: null },
value: {
type: [String, Boolean],
type: [String, Boolean, Number],
default: null,
},
info: { type: String, default: null },
@ -13,6 +13,13 @@ const $props = defineProps({
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
</script>
<style scoped>
.label,
.value {
white-space: pre-line;
word-wrap: break-word;
}
</style>
<template>
<div class="vn-label-value">
<div v-if="$props.label || $slots.label" class="label">

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

@ -1,11 +1,11 @@
<script setup>
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';
import { toDateHour } from 'src/filters';
import { ref } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
const $props = defineProps({
id: { type: String, required: true },
@ -28,7 +28,7 @@ async function insert() {
}
</script>
<template>
<div class="column items-center">
<div class="column items-center full-height">
<VnPaginate
:data-key="$props.url"
:url="$props.url"
@ -42,13 +42,14 @@ async function insert() {
<QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
<QCardSection horizontal>
<slot name="picture">
<VnAvatar :worker="note.workerFk" />
<VnAvatar :descriptor="false" :worker-id="note.workerFk" />
</slot>
<QItem class="full-width justify-between items-start">
<span class="link">
{{ `${note.worker.firstName} ${note.worker.lastName}` }}
<WorkerDescriptorProxy :id="note.worker.id" />
</span>
<VnUserLink
:name="`${note.worker.firstName} ${note.worker.lastName}`"
:worker-id="note.worker.id"
/>
<slot name="actions">
{{ toDateHour(note.created) }}
</slot>
@ -115,6 +116,10 @@ async function insert() {
<style lang="scss" scoped>
.q-card {
max-width: 80em;
&__section {
word-wrap: break-word;
}
}
.q-dialog .q-card {
width: 400px;

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

@ -168,7 +168,12 @@ async function onLoad(...params) {
</QCard>
</div>
</div>
<QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
<QInfiniteScroll
v-if="store.data"
@load="onLoad"
:offset="offset"
class="full-width full-height overflow-auto"
>
<slot name="body" :rows="store.data"></slot>
<div v-if="isLoading" class="info-row q-pa-md text-center">
<QSpinner color="orange" size="md" />

114
src/components/ui/VnSms.vue Normal file
View File

@ -0,0 +1,114 @@
<script setup>
import { onBeforeMount } from 'vue';
import { date } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnAvatar from '../ui/VnAvatar.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const $props = defineProps({
url: { type: String, default: null },
where: { type: Object, default: () => {} },
});
const filter = {
fields: ['smsFk'],
include: {
relation: 'sms',
scope: {
fields: [
'senderFk',
'sender',
'destination',
'message',
'statusCode',
'status',
'created',
],
include: {
relation: 'sender',
scope: {
fields: ['name'],
},
},
},
},
};
onBeforeMount(() => (filter.where = $props.where));
function formatNumber(number) {
if (number.length <= 10) return number;
return number.slice(0, 4) + ' ' + number.slice(4);
}
</script>
<template>
<div class="column items-center">
<div class="list">
<VnPaginate
:data-key="$props.url"
:url="$props.url"
:filter="filter"
order="smsFk DESC"
:offset="100"
:limit="5"
auto-load
>
<template #body="{ rows }">
<QCard
flat
bordered
class="card q-pa-md q-mb-sm smsCard"
v-for="row of rows"
:key="row.smsFk"
>
<QItem>
<QItemSection side top>
<VnUserLink :worker-id="row.sms?.senderFk">
<template #link>
<VnAvatar
:worker-id="row.sms?.senderFk"
class="cursor-pointer"
:title="row.sms?.sender?.name"
/>
</template>
</VnUserLink>
</QItemSection>
<QSeparator />
<QItemSection>
<QItemLabel caption>{{
formatNumber(row.sms.destination)
}}</QItemLabel>
<QItemLabel>{{ row.sms.message }}</QItemLabel>
</QItemSection>
<QItemSection side>
<QItemLabel caption>{{
date.formatDate(
row.sms.created,
'YYYY-MM-DD HH:mm:ss'
)
}}</QItemLabel>
<QItemLabel class="row center">
<QChip
:color="
row.sms.status == 'OK'
? 'positive'
: 'negative'
"
>
{{ row.sms.status }}
</QChip>
</QItemLabel>
</QItemSection>
</QItem>
</QCard>
</template>
</VnPaginate>
</div>
</div>
</template>
<style lang="scss" scoped>
.q-item__section--side {
align-items: center;
}
</style>

21
src/components/ui/VnSubToolbar.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
onMounted(() => {
stateStore.toggleSubToolbar();
});
onUnmounted(() => {
stateStore.toggleSubToolbar();
});
</script>
<template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
</template>

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

21
src/components/ui/VnUserLink.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import { useI18n } from 'vue-i18n';
const $props = defineProps({
name: { type: String, default: null },
workerId: { type: Number, default: null },
defaultName: { type: Boolean, default: false },
});
const { t } = useI18n();
</script>
<template>
<slot name="link">
<span :class="{ link: $props.workerId }">
{{ $props.defaultName ? $props.name ?? t('globals.system') : $props.name }}
</span>
</slot>
<WorkerDescriptorProxy v-if="$props.workerId" :id="$props.workerId" />
</template>
<style scoped></style>

13
src/composables/useArrayData.js
View File

@ -58,7 +58,7 @@ export function useArrayData(key, userOptions) {
}
}
async function fetch({ append = false }) {
async function fetch({ append = false, updateRouter = true }) {
if (!store.url) return;
cancelRequest();
@ -90,7 +90,7 @@ export function useArrayData(key, userOptions) {
Object.assign(params, userParams);
store.isLoading = true;
store.currentFilter = params;
const response = await axios.get(store.url, {
signal: canceller.signal,
params,
@ -100,15 +100,12 @@ export function useArrayData(key, userOptions) {
hasMoreData.value = response.data.length === limit;
if (append === true) {
if (append) {
if (!store.data) store.data = [];
for (const row of response.data) store.data.push(row);
}
if (append === false) {
} else {
store.data = response.data;
updateStateParams();
updateRouter && updateStateParams();
}
store.isLoading = false;

2
src/composables/useUserConfig.js
View File

@ -16,7 +16,7 @@ export function useUserConfig() {
return data;
} catch (error) {
notify('globals.errors.userConfig', 'negative');
notify('errors.userConfig', 'negative');
console.error('Error fetching user config:', error);
}
}

9
src/css/app.scss
View File

@ -17,9 +17,9 @@ a {
// Removes chrome autofill background
input:-webkit-autofill,
select:-webkit-autofill {
color: $input-text-color !important;
color: var(--vn-text) ;
font-family: $typography-font-family;
-webkit-text-fill-color: $input-text-color !important;
-webkit-text-fill-color: var(--vn-text) ;
-webkit-background-clip: text !important;
background-clip: text !important;
}
@ -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: ' *';
}

107
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,7 +62,8 @@ export default {
selectRows: 'Select all { numberRows } row(s)',
allRows: 'All { numberRows } row(s)',
markAll: 'Mark all',
noResults: 'No results'
noResults: 'No results',
system: 'System',
},
errors: {
statusUnauthorized: 'Access denied',
@ -110,6 +110,7 @@ export default {
customer: {
pageTitles: {
customers: 'Customers',
create: 'Create',
list: 'List',
webPayments: 'Web Payments',
extendedList: 'Extended list',
@ -266,6 +267,42 @@ export default {
},
list: {
newEntry: 'New entry',
landed: 'Landed',
invoiceNumber: 'Invoice number',
supplier: 'Supplier',
booked: 'Booked',
confirmed: 'Confirmed',
ordered: 'Ordered',
},
summary: {
commission: 'Commission',
currency: 'Currency',
company: 'Company',
reference: 'Reference',
invoiceNumber: 'Invoice number',
ordered: 'Ordered',
confirmed: 'Confirmed',
booked: 'Booked',
raid: 'Raid',
excludedFromAvailable: 'Inventory',
travelReference: 'Reference',
travelAgency: 'Agency',
travelShipped: 'Shipped',
travelWarehouseOut: 'Warehouse Out',
travelDelivered: 'Delivered',
travelLanded: 'Landed',
travelWarehouseIn: 'Warehouse In',
travelReceived: 'Received',
buys: 'Buys',
quantity: 'Quantity',
stickers: 'Stickers',
package: 'Package',
weight: 'Weight',
packing: 'Packing',
grouping: 'Grouping',
buyingValue: 'Buying value',
import: 'Import',
pvp: 'PVP',
},
},
ticket: {
@ -876,6 +913,71 @@ export default {
create: {
supplierName: 'Supplier name',
},
basicData: {
alias: 'Alias',
workerFk: 'Responsible',
isSerious: 'Verified',
isActive: 'Active',
isPayMethodChecked: 'PayMethod checked',
note: 'Notes',
},
fiscalData: {
name: 'Social name *',
nif: 'Tax number *',
account: 'Account',
sageTaxTypeFk: 'Sage tax type',
sageWithholdingFk: 'Sage withholding',
sageTransactionTypeFk: 'Sage transaction type',
supplierActivityFk: 'Supplier activity',
healthRegister: 'Health register',
street: 'Street',
postcode: 'Postcode',
city: 'City *',
provinceFk: 'Province',
country: 'Country',
isTrucker: 'Trucker',
isVies: 'Vies',
},
billingData: {
payMethodFk: 'Billing data',
payDemFk: 'Payment deadline',
payDay: 'Pay day',
},
accounts: {
iban: 'Iban',
bankEntity: 'Bank entity',
beneficiary: 'Beneficiary',
},
contacts: {
name: 'Name',
phone: 'Phone',
mobile: 'Mobile',
email: 'Email',
observation: 'Notes',
},
addresses: {
street: 'Street',
postcode: 'Postcode',
phone: 'Phone',
name: 'Name',
city: 'City',
province: 'Province',
mobile: 'Mobile',
},
agencyTerms: {
agencyFk: 'Agency',
minimumM3: 'Minimum M3',
packagePrice: 'Package Price',
kmPrice: 'Km Price',
m3Price: 'M3 Price',
routePrice: 'Route price',
minimumKm: 'Minimum Km',
},
consumption: {
entry: 'Entry',
date: 'Date',
reference: 'Reference',
},
},
travel: {
pageTitles: {
@ -915,6 +1017,7 @@ export default {
components: {
topbar: {},
userPanel: {
copyToken: 'Token copied to clipboard',
settings: 'Settings',
logOut: 'Log Out',
},

109
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,7 +62,8 @@ export default {
selectRows: 'Seleccionar las { numberRows } filas(s)',
allRows: 'Todo { numberRows } filas(s)',
markAll: 'Marcar todo',
noResults: 'Sin resultados'
noResults: 'Sin resultados',
system: 'Sistema',
},
errors: {
statusUnauthorized: 'Acceso denegado',
@ -110,6 +110,7 @@ export default {
customer: {
pageTitles: {
customers: 'Clientes',
create: 'Crear',
list: 'Listado',
webPayments: 'Pagos Web',
extendedList: 'Listado extendido',
@ -264,6 +265,42 @@ export default {
},
list: {
newEntry: 'Nueva entrada',
landed: 'F. entrega',
invoiceNumber: 'Núm. factura',
supplier: 'Proveedor',
booked: 'Asentado',
confirmed: 'Confirmado',
ordered: 'Pedida',
},
summary: {
commission: 'Comisión',
currency: 'Moneda',
company: 'Empresa',
reference: 'Referencia',
invoiceNumber: 'Núm. factura',
ordered: 'Pedida',
confirmed: 'Confirmado',
booked: 'Asentado',
raid: 'Redada',
excludedFromAvailable: 'Inventario',
travelReference: 'Referencia',
travelAgency: 'Agencia',
travelShipped: 'F. envio',
travelWarehouseOut: 'Alm. salida',
travelDelivered: 'Enviada',
travelLanded: 'F. entrega',
travelWarehouseIn: 'Alm. entrada',
travelReceived: 'Recibida',
buys: 'Compras',
quantity: 'Cantidad',
stickers: 'Etiquetas',
package: 'Embalaje',
weight: 'Peso',
packing: 'Packing',
grouping: 'Grouping',
buyingValue: 'Coste',
import: 'Importe',
pvp: 'PVP',
},
},
ticket: {
@ -857,7 +894,7 @@ export default {
payDeadline: 'Plazo de pago',
payDay: 'Día de pago',
account: 'Cuenta',
fiscalData: 'Data fiscal',
fiscalData: 'Datos fiscales',
sageTaxType: 'Tipo de impuesto Sage',
sageTransactionType: 'Tipo de transacción Sage',
sageWithholding: 'Retención sage',
@ -875,6 +912,71 @@ export default {
create: {
supplierName: 'Nombre del proveedor',
},
basicData: {
alias: 'Alias',
workerFk: 'Responsable',
isSerious: 'Verificado',
isActive: 'Activo',
isPayMethodChecked: 'Método de pago validado',
note: 'Notas',
},
fiscalData: {
name: 'Razón social *',
nif: 'NIF/CIF *',
account: 'Cuenta',
sageTaxTypeFk: 'Tipo de impuesto sage',
sageWithholdingFk: 'Retención sage',
sageTransactionTypeFk: 'Tipo de transacción sage',
supplierActivityFk: 'Actividad proveedor',
healthRegister: 'Pasaporte sanitario',
street: 'Calle',
postcode: 'Código postal',
city: 'Población *',
provinceFk: 'Provincia',
country: 'País',
isTrucker: 'Transportista',
isVies: 'Vies',
},
billingData: {
payMethodFk: 'Forma de pago',
payDemFk: 'Plazo de pago',
payDay: 'Día de pago',
},
accounts: {
iban: 'Iban',
bankEntity: 'Entidad bancaria',
beneficiary: 'Beneficiario',
},
contacts: {
name: 'Nombre',
phone: 'Teléfono',
mobile: 'Móvil',
email: 'Email',
observation: 'Notas',
},
addresses: {
street: 'Dirección',
postcode: 'Código postal',
phone: 'Teléfono',
name: 'Nombre',
city: 'Población',
province: 'Provincia',
mobile: 'Móvil',
},
agencyTerms: {
agencyFk: 'Agencia',
minimumM3: 'M3 mínimos',
packagePrice: 'Precio bulto',
kmPrice: 'Precio Km',
m3Price: 'Precio M3',
routePrice: 'Precio ruta',
minimumKm: 'Km mínimos',
},
consumption: {
entry: 'Entrada',
date: 'Fecha',
reference: 'Referencia',
},
},
travel: {
pageTitles: {
@ -914,6 +1016,7 @@ export default {
components: {
topbar: {},
userPanel: {
copyToken: 'Token copiado al portapapeles',
settings: 'Configuración',
logOut: 'Cerrar sesión',
},

4
src/i18n/index.js
View File

@ -1,6 +1,8 @@
import en from './en';
import es from './es';
export const localeEquivalence = {
'en':'en-GB'
}
export default {
en: en,
es: es,

1
src/layouts/MainLayout.vue
View File

@ -1,7 +1,6 @@
<script setup>
import { useQuasar } from 'quasar';
import Navbar from 'src/components/NavBar.vue';
const quasar = useQuasar();
</script>

1
src/layouts/OutLayout.vue
View File

@ -26,6 +26,7 @@ const userLocale = computed({
}
},
});
const darkMode = computed({
get() {
return Dark.isActive;

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

@ -127,11 +127,14 @@ async function updateDestination(claimDestinationFk, row, options = {}) {
}
async function regularizeClaim() {
const query = `Claims/${claimId}/regularizeClaim`;
await axios.post(query);
if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
await axios.post(`Claims/${claimId}/regularizeClaim`);
await claimRef.value.fetch();
await arrayData.fetch({ append: false });
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
quasar
.dialog({
component: VnConfirm,
@ -141,29 +144,19 @@ async function regularizeClaim() {
},
})
.onOk(async () => await onUpdateGreugeAccept());
} else {
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
}
await arrayData.fetch({ append: false });
}
async function updateGreuge(greuges) {
const { data } = await axios.post(`Greuges`, greuges);
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
return data;
}
async function onUpdateGreugeAccept() {
const greugeTypeFreightId = await getGreugeTypeId();
const freightPickUpPrice = await getGreugeConfig();
const greugeTypeFreightId = (
await axios.get(`GreugeTypes/findOne`, {
filter: { where: { code: 'freightPickUp' } },
})
).data.id;
const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
.freightPickUpPrice;
await updateGreuge({
await axios.post(`Greuges`, {
clientFk: claim.value.clientFk,
description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
amount: freightPickUpPrice,
@ -176,19 +169,6 @@ async function onUpdateGreugeAccept() {
});
}
async function getGreugeTypeId() {
const params = { filter: { where: { code: 'freightPickUp' } } };
const query = `GreugeTypes/findOne`;
const { data } = await axios.get(query, { params });
return data.id;
}
async function getGreugeConfig() {
const query = `GreugeConfigs/findOne`;
const { data } = await axios.get(query);
return data.freightPickUpPrice;
}
async function save(data) {
const query = `Claims/${claimId}/updateClaimAction`;
await axios.patch(query, data);
@ -302,6 +282,8 @@ async function importToNewRefundTicket() {
selection="multiple"
v-model:selected="selectedRows"
:grid="$q.screen.lt.md"
:pagination="{ rowsPerPage: 0 }"
:hide-bottom="true"
>
<template #body-cell-ticket="{ value }">
<QTd align="center">
@ -355,7 +337,23 @@ async function importToNewRefundTicket() {
</QItemSection>
<QItemSection side>
<QItemLabel v-if="column.name === 'destination'">
{{ column.value.description }}
<VnSelectFilter
v-model="props.row.claimDestinationFk"
:options="destinationTypes"
option-label="description"
option-value="id"
:autofocus="true"
dense
input-debounce="0"
hide-selected
@update:model-value="
(value) =>
updateDestination(
value,
props.row
)
"
/>
</QItemLabel>
<QItemLabel v-else>
{{ column.value }}
@ -437,25 +435,6 @@ async function importToNewRefundTicket() {
</QCardActions>
</QCard>
</QDialog>
<!-- <QDialog v-model="dialogGreuge">
<QCardSection>
<QItem class="q-pa-sm">
<span class="q-pa-sm q-dialog__title text-white">
{{ t('dialogGreuge title') }}
</span>
<QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
</QItem>
<QCardActions class="justify-end q-mr-sm">
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
<QBtn
:label="t('globals.save')"
color="primary"
v-close-popup
@click="onUpdateGreugeAccept"
/>
</QCardActions>
</QCardSection>
</QDialog> -->
</template>
<style lang="scss" scoped>
.slider-container {

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

@ -7,8 +7,8 @@ import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { onMounted } from 'vue';
const stateStore = useStateStore();
const { t } = useI18n();
const route = useRoute();
@ -41,11 +41,7 @@ const entityId = computed(() => {
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>

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

@ -4,14 +4,12 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import { useState } from 'src/composables/useState';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const $props = defineProps({
id: {
@ -118,18 +116,18 @@ const setData = (entity) => {
:value="entity.worker.user.name"
>
<template #value>
<span class="link">
{{ entity.worker.user.name }}
<WorkerDescriptorProxy :id="entity.worker.user.id" />
</span>
<VnUserLink
:name="entity.worker.user.name"
:worker-id="entity.worker.id"
/>
</template>
</VnLv>
<VnLv :label="t('claim.card.commercial')">
<template #value>
<span class="link">
{{ entity.client?.salesPersonUser?.name }}
<WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
</span>
<VnUserLink
:name="entity.client?.salesPersonUser?.name"
:worker-id="entity.client?.salesPersonFk"
/>
</template>
</VnLv>
<VnLv

16
src/pages/Claim/Card/ClaimDevelopment.vue
View File

@ -1,13 +1,11 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import { getUrl } from 'composables/getUrl';
import { tMobile } from 'composables/tMobile';
import router from 'src/router';
const route = useRoute();
@ -21,11 +19,6 @@ const claimRedeliveries = ref([]);
const workers = ref([]);
const selected = ref([]);
const saveButtonRef = ref();
let salixUrl;
onMounted(async () => {
salixUrl = await getUrl(`claim/${route.params.id}`);
});
const developmentsFilter = {
fields: [
@ -54,6 +47,7 @@ const columns = computed(() => [
optionValue: 'id',
optionLabel: 'description',
tabIndex: 1,
align: 'left',
},
{
name: 'claimResult',
@ -66,6 +60,7 @@ const columns = computed(() => [
optionValue: 'id',
optionLabel: 'description',
tabIndex: 2,
align: 'left',
},
{
name: 'claimResponsible',
@ -78,6 +73,7 @@ const columns = computed(() => [
optionValue: 'id',
optionLabel: 'description',
tabIndex: 3,
align: 'left',
},
{
name: 'worker',
@ -89,6 +85,7 @@ const columns = computed(() => [
optionValue: 'id',
optionLabel: 'nickname',
tabIndex: 4,
align: 'left',
},
{
name: 'claimRedelivery',
@ -101,6 +98,7 @@ const columns = computed(() => [
optionValue: 'id',
optionLabel: 'description',
tabIndex: 5,
align: 'left',
},
]);
</script>
@ -158,6 +156,7 @@ const columns = computed(() => [
hide-pagination
v-model:selected="selected"
:grid="$q.screen.lt.md"
table-header-class="text-left"
>
<template #body-cell="{ row, col }">
<QTd
@ -165,7 +164,6 @@ const columns = computed(() => [
@keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
>
<VnSelectFilter
:label="col.label"
v-model="row[col.model]"
:options="col.options"
:option-value="col.optionValue"

12
src/pages/Claim/Card/ClaimLines.vue
View File

@ -43,17 +43,20 @@ async function onFetchClaim(data) {
fetchMana();
}
const amount = ref(0);
const amountClaimed = ref(0);
const amount = ref();
const amountClaimed = ref();
async function onFetch(rows) {
amount.value = 0;
amountClaimed.value = 0;
if (!rows || !rows.length) return;
amount.value = rows.reduce(
(acumulator, { sale }) => acumulator + sale.price * sale.quantity,
(accumulator, { sale }) => accumulator + sale.price * sale.quantity,
0
);
amountClaimed.value = rows.reduce(
(acumulator, line) => acumulator + line.sale.price * line.quantity,
(accumulator, line) => accumulator + line.sale.price * line.quantity,
0
);
}
@ -189,6 +192,7 @@ function showImportDialog() {
save-url="ClaimBeginnings/crud"
:filter="linesFilter"
@on-fetch="onFetch"
@save-changes="onFetch"
v-model:selected="selected"
:default-save="false"
:default-reset="false"

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

@ -8,6 +8,10 @@ const state = useState();
const user = state.getUser();
const id = route.params.id;
const $props = defineProps({
addNote: { type: Boolean, default: true },
});
const claimFilter = {
where: { claimFk: id },
fields: ['created', 'workerFk', 'text'],
@ -27,7 +31,7 @@ const body = {
<template>
<div class="column items-center">
<VnNotes
:add-note="true"
:add-note="$props.addNote"
:id="id"
url="claimObservations"
:filter="claimFilter"

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

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, computed } from 'vue';
import { onMounted, ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters';
@ -7,8 +7,9 @@ import CardSummary from 'components/ui/CardSummary.vue';
import FetchData from 'components/FetchData.vue';
import { getUrl } from 'src/composables/getUrl';
import { useSession } from 'src/composables/useSession';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
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';
const route = useRoute();
const { t } = useI18n();
@ -26,12 +27,26 @@ const entityId = computed(() => $props.id || route.params.id);
const claimUrl = ref();
const salixUrl = ref();
const claimDmsRef = ref();
const claimDmsFilter = ref({
include: [
{
relation: 'dms',
},
],
where: { claimFk: entityId.value },
});
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
watch(entityId, async (id) => {
claimDmsFilter.value.where = { claimFk: id };
await claimDmsRef.value.fetch();
});
const detailsColumns = ref([
{
name: 'item',
@ -118,7 +133,7 @@ const developmentColumns = ref([
{
name: 'worker',
label: 'claim.summary.worker',
field: (row) => row.worker.user.nickname,
field: (row) => row.worker?.user.nickname,
sortable: true,
},
{
@ -131,18 +146,9 @@ const developmentColumns = ref([
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
const claimDmsFilter = ref({
include: [
{
relation: 'dms',
},
],
where: { claimFk: entityId.value },
});
function setClaimDms(data) {
if (!data) return;
claimDms.value = [];
data.forEach((media) => {
claimDms.value.push({
isVideo: media.dms.contentType == 'video/mp4',
@ -165,6 +171,7 @@ function openDialog(dmsId) {
@on-fetch="(data) => setClaimDms(data)"
limit="20"
auto-load
ref="claimDmsRef"
/>
<CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
<template #header="{ entity: { claim } }">
@ -189,30 +196,30 @@ function openDialog(dmsId) {
</VnLv>
<VnLv :label="t('claim.summary.assignedTo')">
<template #value>
<span class="link">
{{ claim.worker.user.nickname }}
<WorkerDescriptorProxy :id="claim.workerFk" />
</span>
<VnUserLink
:name="claim.worker?.user?.nickname"
:worker-id="claim.workerFk"
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.attendedBy')">
<template #value>
<span class="link">
{{ claim.client.salesPersonUser.name }}
<WorkerDescriptorProxy :id="claim.client.salesPersonFk" />
</span>
<VnUserLink
:name="claim.client?.salesPersonUser?.name"
:worker-id="claim.client?.salesPersonFk"
/>
</template>
</VnLv>
</QCard>
<QCard class="vn-one">
<a class="header" :href="claimUrl + 'note/index'">
<QCard class="vn-max claimVnNotes">
<a class="header" :href="`#/claim/${entityId}/notes`">
{{ t('claim.summary.notes') }}
<QIcon name="open_in_new" color="primary" />
</a>
<!-- Use VnNotes and maybe VirtualScroll-->
<ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
</QCard>
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<a class="header" :href="claimUrl + 'note/index'">
<a class="header" :href="`#/claim/${entityId}/lines`">
{{ t('claim.summary.details') }}
<QIcon name="open_in_new" color="primary" />
</a>
@ -306,20 +313,6 @@ function openDialog(dmsId) {
/>
</div>
</QCard>
<!-- <QCardSection class="q-pa-md" v-if="observations.length > 0">
<h6>{{ t('claim.summary.notes') }}</h6>
<div class="note-list" v-for="note in observations" :key="note.id">
<div class="note-caption">
<span
>{{ note.worker.firstName }} {{ note.worker.lastName }}
</span>
<span>{{ toDate(note.created) }}</span>
</div>
<div class="note-text">
<span>{{ note.text }}</span>
</div>
</div>
</QCardSection> -->
<QDialog
v-model="multimediaDialog"
transition-show="slide-up"
@ -362,6 +355,13 @@ function openDialog(dmsId) {
</template>
</CardSummary>
</template>
<style lang="scss">
.claimVnNotes {
.q-card {
max-width: 100%;
}
}
</style>
<style lang="scss" scoped>
.q-dialog__inner--minimized > div {
max-width: 80%;

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

@ -11,7 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -38,15 +38,6 @@ function viewSummary(id) {
},
});
}
function viewDescriptor(id) {
quasar.dialog({
component: CustomerDescriptorProxy,
componentProps: {
id,
},
});
}
</script>
<template>
@ -84,7 +75,7 @@ function viewDescriptor(id) {
<VnPaginate
data-key="ClaimList"
url="Claims/filter"
order="id DESC"
order="claimStateFk"
auto-load
>
<template #body="{ rows }">
@ -106,10 +97,10 @@ function viewDescriptor(id) {
</VnLv>
<VnLv :label="t('claim.list.assignedTo')" @click.stop>
<template #value>
<span class="link">
{{ row.workerName }}
<WorkerDescriptorProxy :id="row.workerFk" />
</span>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</template>
</VnLv>
<VnLv

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

@ -1,3 +1,121 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
const { t } = useI18n();
const route = useRoute();
const payMethods = ref([]);
const bankEntitiesOptions = ref([]);
const onBankEntityCreated = (data) => {
bankEntitiesOptions.value.push(data);
};
</script>
<template>
<div class="flex justify-center">Billing data</div>
<fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
<FetchData
@on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load
url="BankEntities"
/>
<FormModel
:url-update="`Clients/${route.params.id}`"
:url="`Clients/${route.params.id}/getCard`"
auto-load
model="customer"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Billing data')"
:options="payMethods"
hide-selected
option-label="name"
option-value="id"
v-model="data.payMethod"
/>
</div>
<div class="col">
<VnInput
:label="t('Due day')"
:rules="validate('client.socialName')"
v-model="data.dueDay"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('IBAN')" v-model="data.iban" />
</div>
<div class="col">
<VnSelectCreate
:label="t('Swift / BIC')"
:options="bankEntitiesOptions"
:roles-allowed-to-create="['salesAssistant', 'hr']"
:rules="validate('Worker.bankEntity')"
hide-selected
option-label="name"
option-value="id"
v-model="data.bankEntityFk"
>
<template #form>
<CreateBankEntityForm
@on-data-saved="onBankEntityCreated($event)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel
>{{ scope.opt.bic }}
{{ scope.opt.name }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
</div>
<div class="col">
<QCheckbox
:label="t('VNL core received')"
v-model="data.hasCoreVnl"
/>
</div>
<div class="col">
<QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
</div>
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Billing data: Forma de pago
Due day: Vencimiento
IBAN: IBAN
Swift / BIC: Swift / BIC
Received LCR: Recibido LCR
VNL core received: Recibido core VNL
VNL B2B received: Recibido B2B VNL
</i18n>

7
src/pages/Customer/Card/CustomerCard.vue
View File

@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
const route = useRoute();
@ -28,11 +29,7 @@ const { t } = useI18n();
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>

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

@ -1,3 +1,121 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const provincesLocation = ref([]);
const setProvince = (provinceFk) => {
const result = provincesLocation.value.filter(
(province) => province.id === provinceFk
);
return result[0]?.name || '';
};
const toCustomerConsigneeCreate = () => {
router.push({ name: 'CustomerConsigneeCreate' });
};
const toCustomerConsigneeEdit = () => {
router.push({ name: 'CustomerConsigneeEdit' });
};
</script>
<template>
<div class="flex justify-center">Consignees</div>
<FetchData
@on-fetch="(data) => (provincesLocation = data)"
auto-load
url="Provinces/location"
/>
<QCard class="q-pa-lg">
<VnPaginate
data-key="CustomerConsignees"
:url="`Clients/${route.params.id}/addresses`"
order="id"
auto-load
>
<template #body="{ rows }">
<QCard
v-for="(item, index) in rows"
:key="index"
:class="{
'consignees-card': true,
'q-mb-md': index < rows.length - 1,
}"
@click="toCustomerConsigneeEdit()"
>
<div class="consignees-card-icon">
<QIcon name="star" size="md" color="primary" />
</div>
<div>
<div class="text-weight-bold q-mb-sm">
{{ item.nickname }} - #{{ item.id }}
</div>
<div>{{ item.street }}</div>
<div>
{{ item.postalCode }} - {{ item.city }},
{{ setProvince(item.provinceFk) }}
</div>
<div class="flex">
<QCheckbox
:label="t('Is equalizated')"
v-model="item.isEqualizated"
class="q-mr-lg"
/>
<QCheckbox
:label="t('Is logiflora allowed')"
v-model="item.isLogifloraAllowed"
/>
</div>
</div>
</QCard>
<QPageSticky :offset="[18, 18]">
<QBtn
@click.stop="toCustomerConsigneeCreate()"
color="primary"
fab
icon="add"
/>
<QTooltip>
{{ t('New consignee') }}
</QTooltip>
</QPageSticky>
</template>
</VnPaginate>
</QCard>
</template>
<style lang="scss" scoped>
.consignees-card {
border: 2px solid var(--vn-light-gray);
border-radius: 10px;
padding: 10px;
display: flex;
cursor: pointer;
&:hover {
background-color: var(--vn-light-gray);
}
}
.consignees-card-icon {
margin: 0 15px 0 5px;
display: flex;
align-items: center;
}
</style>
<i18n>
es:
Is equalizated: Recargo de equivalencia
Is logiflora allowed: Compra directa en Holanda
New consignee: Nuevo consignatario
</i18n>

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

@ -4,9 +4,9 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const $props = defineProps({
id: {
@ -44,10 +44,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
<template #body="{ entity }">
<VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
<template #value>
<span class="link">
{{ entity.salesPersonUser.name }}
<WorkerDescriptorProxy :id="entity.salesPersonFk" />
</span>
<VnUserLink
:name="entity.salesPersonUser?.name"
:worker-id="entity.salesPersonFk"
/>
</template>
</VnLv>
<VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />

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

@ -1,3 +1,295 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
const { t } = useI18n();
const route = useRoute();
const townsFetchDataRef = ref(null);
const postcodeFetchDataRef = ref(null);
const typesTaxes = ref([]);
const typesTransactions = ref([]);
const citiesLocationOptions = ref([]);
const provincesLocationOptions = ref([]);
const countriesOptions = ref([]);
const postcodesOptions = ref([]);
const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postcode = code;
formData.provinceFk = provinceFk;
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
formData.countryFk = countryFk;
};
</script>
<template>
<div class="flex justify-center">Fiscal data</div>
<fetch-data auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
<fetch-data
auto-load
@on-fetch="(data) => (typesTransactions = data)"
url="SageTransactionTypes"
/>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (citiesLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
@on-fetch="(data) => (provincesLocationOptions = data)"
auto-load
url="Provinces/location"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
auto-load
url="Countries"
/>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FormModel
:url-update="`Clients/${route.params.id}/updateFiscalData`"
:url="`Clients/${route.params.id}/getCard`"
auto-load
model="customer"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
:label="t('Social name')"
:required="true"
:rules="validate('client.socialName')"
v-model="data.socialName"
/>
</div>
<div class="col">
<VnInput :label="t('Tax number')" v-model="data.fi" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('Street')" v-model="data.street" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Sage tax type')"
:options="typesTaxes"
hide-selected
option-label="vat"
option-value="id"
v-model="data.sageTaxTypeFk"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Sage transaction type')"
:options="typesTransactions"
hide-selected
option-label="vat"
option-value="id"
v-model="data.sageTransactionTypeFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectCreate
:label="t('Postcode')"
:options="postcodesOptions"
:roles-allowed-to-create="['deliveryAssistant']"
:rules="validate('Worker.postcode')"
hide-selected
option-label="code"
option-value="code"
v-model="data.postcode"
>
<template #form>
<CustomerCreateNewPostcode
@on-data-saved="onPostcodeCreated($event, data)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt.code }} -
{{ scope.opt.town.name }} ({{
scope.opt.town.province.name
}},
{{
scope.opt.town.province.country.country
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<VnSelectFilter
:label="t('City')"
:options="citiesLocationOptions"
hide-selected
option-label="name"
option-value="name"
v-model="data.city"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItemLabel caption>
{{
`${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Province')"
:options="provincesLocationOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt.name} (${scope.opt.country.country})`
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('Country')"
:options="countriesOptions"
hide-selected
option-label="country"
option-value="id"
v-model="data.countryFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox :label="t('Active')" v-model="data.isActive" />
</div>
<div class="col">
<QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
</div>
<div class="col">
<QCheckbox :label="t('Vies')" v-model="data.isVies" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
:label="t('Notify by email')"
v-model="data.isToBeMailed"
/>
</div>
<div class="col">
<QCheckbox
:label="t('Invoice by address')"
v-model="data.hasToInvoiceByAddress"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
:label="t('Is equalizated')"
v-model="data.isEqualizated"
/>
</div>
<div class="col">
<QCheckbox
:label="t('Verified data')"
v-model="data.isTaxDataChecked"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
:label="t('Incoterms authorization')"
v-model="data.hasIncoterms"
/>
</div>
<div class="col">
<QCheckbox
:label="t('Electronic invoice')"
v-model="data.hasElectronicInvoice"
/>
</div>
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Social name: Razón social
Tax number: NIF / CIF
Street: Dirección fiscal
Sage tax type: Tipo de impuesto Sage
Sage transaction type: Tipo de transacción Sage
Postcode: Código postal
City: Población
Province: Provincia
Country: País
Active: Activo
Frozen: Congelado
Has to invoice: Factura
Vies: Vies
Notify by email: Notificar vía e-mail
Invoice by address: Facturar por consignatario
Is equalizated: Recargo de equivalencia
Verified data: Datos comprobados
Incoterms authorization: Autorización incoterms
Electronic invoice: Factura electrónica
</i18n>

16
src/pages/Customer/Card/CustomerSms.vue
View File

@ -1,3 +1,17 @@
<script setup>
import { useRoute } from 'vue-router';
import VnSms from 'src/components/ui/VnSms.vue';
const route = useRoute();
const id = route.params.id;
const where = {
clientFk: id,
ticketFk: null,
};
</script>
<template>
<div class="flex justify-center">Sms</div>
<div class="column items-center">
<VnSms url="clientSms" :where="where" />
</div>
</template>

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

@ -8,6 +8,7 @@ import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
@ -29,6 +30,7 @@ const newClientForm = reactive({
});
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const workersOptions = ref([]);
const businessTypesOptions = ref([]);
const citiesLocationOptions = ref([]);
@ -36,8 +38,13 @@ const provincesLocationOptions = ref([]);
const countriesOptions = ref([]);
const postcodesOptions = ref([]);
const onPostcodeCreated = async () => {
postcodeFetchDataRef.value.fetch();
const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postcode = code;
formData.provinceFk = provinceFk;
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
formData.countryFk = countryFk;
};
</script>
@ -59,6 +66,7 @@ const onPostcodeCreated = async () => {
url="BusinessTypes"
/>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (citiesLocationOptions = data)"
auto-load
url="Towns/location"
@ -74,14 +82,9 @@ const onPostcodeCreated = async () => {
url="Countries"
/>
<QPage>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<FormModel
:form-initial-data="newClientForm"
:observe-form-changes="false"
model="client"
url-create="Clients/createWithUser"
>
@ -148,7 +151,7 @@ const onPostcodeCreated = async () => {
>
<template #form>
<CustomerCreateNewPostcode
@on-data-saved="onPostcodeCreated($event)"
@on-data-saved="onPostcodeCreated($event, data)"
/>
</template>
<template #option="scope">

15
src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
View File

@ -14,9 +14,9 @@ const { t } = useI18n();
</script>
<template>
<div class="card_balance">
<h6 class="title_balance">{{ t('Total') }}</h6>
<div style="display: flex">
<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) }}
@ -28,21 +28,18 @@ const { t } = useI18n();
<style lang="scss">
.card_balance {
border: 1px solid black;
margin: 7px;
padding: 5px 7px;
}
.title_balance {
color: white;
color: var(--vn-text);
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.key_balance {
color: grey;
color: var(--vn-label);
margin-bottom: 0;
}
.value_balance {
color: white;
color: var(--vn-text);
margin-bottom: 0;
}
</style>

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

@ -2,7 +2,7 @@
import { ref, computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox } from 'quasar';
import { QBtn, QCheckbox, useQuasar } from 'quasar';
import { toCurrency, toDate } from 'filters/index';
import { useArrayData } from 'composables/useArrayData';
@ -12,53 +12,37 @@ 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';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
const { t } = useI18n();
const stateStore = useStateStore();
const quasar = useQuasar();
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 customerId = ref(0);
const selected = ref([]);
const workerId = ref(0);
const rows = computed(() => arrayData.value.store.data);
const selected = ref([]);
const worderId = ref(0);
const customerId = ref(0);
const tableColumnComponents = {
client: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectClientId(prop.row.clientFk),
event: ({ row }) => selectCustomerId(row.clientFk),
},
isWorker: {
component: QCheckbox,
props: (prop) => ({
props: ({ row }) => ({
disable: true,
'model-value': Boolean(prop.value),
'model-value': Boolean(row.selected),
}),
event: () => {},
},
salesperson: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalespersonId(prop.row.salesPersonFk),
event: ({ row }) => selectWorkerId(row.salesPersonFk),
},
country: {
component: 'span',
@ -78,7 +62,7 @@ const tableColumnComponents = {
author: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectAuthorId(prop.row.workerFk),
event: ({ row }) => selectWorkerId(row.workerFk),
},
lastObservation: {
component: 'span',
@ -102,8 +86,7 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
const columns = computed(() => [
{
align: 'left',
field: 'clientName',
@ -136,7 +119,7 @@ const columns = computed(() => {
},
{
align: 'left',
field: (row) => toCurrency(row.amount),
field: ({ amount }) => toCurrency(amount),
label: t('Balance D.'),
name: 'balance',
},
@ -154,38 +137,65 @@ const columns = computed(() => {
},
{
align: 'left',
field: (row) => toDate(row.created),
field: ({ created }) => toDate(created),
label: t('L. O. Date'),
name: 'date',
},
{
align: 'left',
field: (row) => toCurrency(row.creditInsurance),
field: ({ creditInsurance }) => toCurrency(creditInsurance),
label: t('Credit I.'),
name: 'credit',
},
{
align: 'left',
field: (row) => toDate(row.defaulterSinced),
field: ({ defaulterSinced }) => toDate(defaulterSinced),
label: t('From'),
name: 'from',
},
];
]);
onBeforeMount(() => {
getArrayData();
});
const selectClientId = (id) => {
worderId.value = 0;
const getArrayData = 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
);
stateStore.rightDrawer = true;
};
const selectCustomerId = (id) => {
workerId.value = 0;
customerId.value = id;
};
const selectSalespersonId = (id) => {
const selectWorkerId = (id) => {
customerId.value = 0;
worderId.value = id;
workerId.value = id;
};
const selectAuthorId = (id) => {
customerId.value = 0;
worderId.value = id;
const viewAddObservation = (rowsSelected) => {
quasar.dialog({
component: CustomerDefaulterAddObservation,
componentProps: {
clients: rowsSelected,
promise: refreshData,
},
});
};
const refreshData = () => {
getArrayData();
};
</script>
@ -197,11 +207,17 @@ const selectAuthorId = (id) => {
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data">
<div id="st-data" class="row">
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
<div class="flex items-center q-ml-lg">
<QBtn
color="primary"
icon="vn:notes"
:disabled="!selected.length"
@click.stop="viewAddObservation(selected)"
/>
</div>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="column items-center q-pa-md">
@ -211,7 +227,7 @@ const selectAuthorId = (id) => {
:rows="rows"
class="full-width q-mt-md"
hide-bottom
row-key="id"
row-key="clientFk"
selection="multiple"
v-model:selected="selected"
>
@ -226,7 +242,7 @@ const selectAuthorId = (id) => {
>
{{ props.value }}
<WorkerDescriptorProxy v-if="worderId" :id="worderId" />
<WorkerDescriptorProxy v-if="workerId" :id="workerId" />
<CustomerDescriptorProxy v-else :id="customerId" />
</component>
</QTr>
@ -239,7 +255,7 @@ const selectAuthorId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

100
src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnRow from 'components/ui/VnRow.vue';
const $props = defineProps({
clients: {
type: Array,
required: true,
},
promise: {
type: Function,
required: true,
},
});
const { t } = useI18n();
const quasar = useQuasar();
const newObservation = ref(null);
const onSubmit = async () => {
try {
const data = $props.clients.map((item) => {
return { clientFk: item.clientFk, text: newObservation.value };
});
await axios.post('ClientObservations', data);
const payload = {
defaulters: $props.clients,
observation: newObservation.value,
};
await axios.post('Defaulters/observationEmail', payload);
await $props.promise();
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
} catch (error) {
quasar.notify({
message: t(`${error.message}`),
type: 'negative',
});
}
};
</script>
<template>
<QDialog ref="dialogRef">
<QCard class="q-pa-md q-mb-md">
<QCardSection>
<QForm @submit="onSubmit()" class="q-pa-sm">
<div>
{{
t('Add observation to all selected clients', {
numberClients: t($props.clients.length),
})
}}
</div>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('Message')"
type="textarea"
v-model="newObservation"
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
class="q-mr-md"
v-close-popup
/>
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
v-close-popup
/>
</div>
</QForm>
</QCardSection>
</QCard>
</QDialog>
</template>
<i18n>
es:
Add observation to all selected clients: Añadir observación a { numberClients } cliente(s) seleccionado(s)
Message: Mensaje
</i18n>

8
src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -262,8 +262,7 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
const columns = computed(() => [
{
align: 'left',
field: '',
@ -469,8 +468,7 @@ const columns = computed(() => {
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>

1
src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
View File

@ -613,6 +613,5 @@ const shouldRenderColumn = (colName) => {
<i18n>
es:
Identifier: Identificador
Social name: Razón social
</i18n>

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

@ -9,6 +9,7 @@ import { useStateStore } from 'stores/useStateStore';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const stateStore = useStateStore();
@ -57,8 +58,7 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
const columns = computed(() => [
{
align: 'left',
field: 'id',
@ -89,8 +89,7 @@ const columns = computed(() => {
label: t('Email'),
name: 'email',
},
];
});
]);
const selectCustomerId = (id) => {
selectedCustomerId.value = id;
@ -104,11 +103,7 @@ const selectCustomerId = (id) => {
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<QPage class="column items-center q-pa-md">
<QTable
@ -143,7 +138,7 @@ const selectCustomerId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

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

@ -123,8 +123,7 @@ function stateColor(row) {
</QDrawer>
<QPage class="column items-center q-pa-md customer-payments">
<div class="card-list">
<QToolbar class="q-pa-none">
<QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
<QToolbar class="q-pa-none justify-end">
<QBtn
@click="arrayData.refresh()"
:loading="isLoading"
@ -133,7 +132,7 @@ function stateColor(row) {
class="q-mr-sm"
round
dense
></QBtn>
/>
<QBtn @click="grid = !grid" icon="list" color="primary" round dense>
<QTooltip>{{ t('Change view') }}</QTooltip>
</QBtn>

258
src/pages/Customer/components/CustomerConsigneeCreate.vue Normal file
View File

@ -0,0 +1,258 @@
<script setup>
import { onBeforeMount, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
const { t } = useI18n();
const route = useRoute();
const formInitialData = reactive({
isDefaultAddress: false,
nickname: null,
street: null,
postalCode: null,
city: null,
provinceFk: null,
agencyModeFk: null,
phone: null,
mobile: null,
incotermsFk: null,
customsAgentFk: null,
});
const townsFetchDataRef = ref(null);
const postcodeFetchDataRef = ref(null);
const agencyModes = ref([]);
const incoterms = ref([]);
const customsAgents = ref([]);
const citiesLocationOptions = ref([]);
const provincesLocationOptions = ref([]);
const postcodesOptions = ref([]);
const urlCreate = ref('');
onBeforeMount(() => {
urlCreate.value = `Clients/${route.params.id}/createAddress`;
});
const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postalCode = code;
formData.provinceFk = provinceFk;
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
};
</script>
<template>
<FetchData
ref="postcodeFetchDataRef"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
url="Postcodes/location"
/>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (citiesLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
@on-fetch="(data) => (provincesLocationOptions = data)"
auto-load
url="Provinces/location"
/>
<fetch-data
@on-fetch="(data) => (agencyModes = data)"
auto-load
url="AgencyModes/isActive"
/>
<fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
<fetch-data
@on-fetch="(data) => (customsAgents = data)"
auto-load
url="CustomsAgents"
/>
<FormModel
:form-initial-data="formInitialData"
:observe-form-changes="false"
model="client"
:url-create="urlCreate"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('Consignee')" v-model="data.nickname" />
</div>
<div class="col">
<VnInput :label="t('Street address')" v-model="data.street" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectCreate
:label="t('Postcode')"
:options="postcodesOptions"
:roles-allowed-to-create="['deliveryAssistant']"
:rules="validate('Worker.postcode')"
hide-selected
option-label="code"
option-value="code"
v-model="data.postalCode"
>
<template #form>
<CustomerCreateNewPostcode
@on-data-saved="onPostcodeCreated($event, data)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
<QItemLabel caption>
{{ scope.opt.code }} -
{{ scope.opt.town.name }}
({{ scope.opt.town.province.name }},
{{ scope.opt.town.province.country.country }})
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<!-- ciudades -->
<VnSelectFilter
:label="t('City')"
:options="citiesLocationOptions"
hide-selected
option-label="name"
option-value="name"
v-model="data.city"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItemLabel caption>
{{
`${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Province')"
:options="provincesLocationOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt.name} (${scope.opt.country.country})`
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('Agency')"
:options="agencyModes"
hide-selected
option-label="name"
option-value="id"
v-model="data.agencyModeFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('Phone')" v-model="data.phone" />
</div>
<div class="col">
<VnInput :label="t('Mobile')" v-model="data.mobile" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Incoterms')"
:options="incoterms"
hide-selected
option-label="name"
option-value="code"
v-model="data.incotermsFk"
/>
</div>
<div class="col">
<VnSelectCreate
:label="t('Customs agent')"
:options="customsAgents"
hide-selected
option-label="fiscalName"
option-value="id"
v-model="data.customsAgentFk"
>
<template #form>
<CustomsNewCustomsAgent />
</template>
</VnSelectCreate>
</div>
</VnRow>
</template>
</FormModel>
</template>
<style lang="scss" scoped>
.add-icon {
cursor: pointer;
background-color: $primary;
border-radius: 50px;
}
</style>
<i18n>
es:
Default: Predeterminado
Consignee: Consignatario
Street address: Dirección postal
Postcode: Código postal
City: Población
Province: Provincia
Agency: Agencia
Phone: Teléfono
Mobile: Movíl
Incoterms: Incoterms
Customs agent: Agente de aduanas
</i18n>

3
src/pages/Customer/components/CustomerConsigneeEdit.vue Normal file
View File

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

65
src/pages/Customer/components/CustomerNewCustomsAgent.vue Normal file
View File

@ -0,0 +1,65 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from 'src/components/FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
const initialData = reactive({
nif: null,
fiscalName: null,
street: null,
phone: null,
});
const onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
};
</script>
<template>
<FormModelPopup
:title="t('New customs agent')"
url-create="CustomsAgents"
model="customer"
:form-initial-data="initialData"
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('NIF')" :required="true" v-model="data.nif" />
</div>
<div class="col">
<VnInput
:label="t('Fiscal name')"
:required="true"
v-model="data.fiscalName"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('Street')" v-model="data.street" />
</div>
<div class="col">
<VnInput :label="t('Phone')" v-model="data.phone" />
</div>
</VnRow>
</template>
</FormModelPopup>
</template>
<i18n>
es:
New customs agent: Nuevo agente de aduanas
NIF: NIF
Fiscal name: Nombre fiscal
Street: Dirección fiscal
Phone: Teléfono
</i18n>

8
src/pages/Department/Card/DepartmentCard.vue
View File

@ -2,6 +2,7 @@
import { useStateStore } from 'stores/useStateStore';
import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
</script>
@ -15,11 +16,8 @@ const stateStore = useStateStore();
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md column items-center">
<RouterView></RouterView>
</div>

8
src/pages/Entry/Card/EntryCard.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
</script>
@ -15,11 +16,8 @@ const stateStore = useStateStore();
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>

379
src/pages/Entry/Card/EntrySummary.vue Normal file
View File

@ -0,0 +1,379 @@
<script setup>
import { onMounted, ref, computed, onUpdated } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnRow from 'components/ui/VnRow.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { toDate, toCurrency } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';
onUpdated(() => summaryRef.value.fetch());
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const entry = ref();
const entryBuys = ref([]);
const entryUrl = ref();
onMounted(async () => {
entryUrl.value = (await getUrl('entry/')) + entityId.value;
});
const tableColumnComponents = {
quantity: {
component: () => 'span',
props: () => {},
},
stickers: {
component: () => 'span',
props: () => {},
event: () => {},
},
packagingFk: {
component: () => 'span',
props: () => {},
event: () => {},
},
weight: {
component: () => 'span',
props: () => {},
event: () => {},
},
packing: {
component: () => 'span',
props: () => {},
event: () => {},
},
grouping: {
component: () => 'span',
props: () => {},
event: () => {},
},
buyingValue: {
component: () => 'span',
props: () => {},
event: () => {},
},
amount: {
component: () => 'span',
props: () => {},
event: () => {},
},
pvp: {
component: () => 'span',
props: () => {},
event: () => {},
},
};
const entriesTableColumns = computed(() => {
return [
{
label: t('entry.summary.quantity'),
field: 'quantity',
name: 'quantity',
align: 'left',
},
{
label: t('entry.summary.stickers'),
field: 'stickers',
name: 'stickers',
align: 'left',
},
{
label: t('entry.summary.package'),
field: 'packagingFk',
name: 'packagingFk',
align: 'left',
},
{
label: t('entry.summary.weight'),
field: 'weight',
name: 'weight',
align: 'left',
},
{
label: t('entry.summary.packing'),
field: 'packing',
name: 'packing',
align: 'left',
},
{
label: t('entry.summary.grouping'),
field: 'grouping',
name: 'grouping',
align: 'left',
},
{
label: t('entry.summary.buyingValue'),
field: 'buyingValue',
name: 'buyingValue',
align: 'left',
format: (value) => toCurrency(value),
},
{
label: t('entry.summary.import'),
name: 'amount',
align: 'left',
format: (_, row) => toCurrency(row.buyingValue * row.quantity),
},
{
label: t('entry.summary.pvp'),
name: 'pvp',
align: 'left',
format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
},
];
});
async function setEntryData(data) {
if (data) entry.value = data;
await fetchEntryBuys();
}
const fetchEntryBuys = async () => {
try {
const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
if (data) entryBuys.value = data;
} catch (err) {
console.error('Error fetching entry buys');
}
};
</script>
<template>
<CardSummary
ref="summaryRef"
:url="`Entries/${entityId}/getEntry`"
@on-fetch="(data) => setEntryData(data)"
>
<template #header-left>
<a class="header link" :href="entryUrl">
<QIcon name="open_in_new" color="white" size="sm" />
</a>
</template>
<template #header>
<span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
</template>
<template #body>
<QCard class="vn-one">
<a class="header link" :href="entryUrl">
{{ t('globals.summary.basicData') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnRow>
<div class="col">
<VnLv
:label="t('entry.summary.commission')"
:value="entry.commission"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.currency')"
:value="entry.currency.name"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.company')"
:value="entry.company.code"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.reference')"
:value="entry.reference"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.invoiceNumber')"
:value="entry.invoiceNumber"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.ordered')"
:value="entry.isOrdered"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.confirmed')"
:value="entry.isConfirmed"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.booked')"
:value="entry.isBooked"
/>
</div>
<div class="col">
<VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
</div>
<div class="col">
<VnLv
:label="t('entry.summary.excludedFromAvailable')"
:value="entry.isExcludedFromAvailable"
/>
</div>
</VnRow>
</QCard>
<QCard class="vn-one">
<a class="header link" :href="entryUrl">
{{ t('Travel data') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnRow>
<div class="col">
<VnLv :label="t('entry.summary.travelReference')">
<template #value>
<span class="link">
{{ entry.travel.ref }}
<TravelDescriptorProxy :id="entry.travel.id" />
</span>
</template>
</VnLv>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelAgency')"
:value="entry.travel.agency.name"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelShipped')"
:value="toDate(entry.travel.shipped)"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelWarehouseOut')"
:value="entry.travel.warehouseOut.name"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelDelivered')"
:value="entry.travel.isDelivered"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelLanded')"
:value="toDate(entry.travel.landed)"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelWarehouseIn')"
:value="entry.travel.warehouseIn.name"
/>
</div>
<div class="col">
<VnLv
:label="t('entry.summary.travelReceived')"
:value="entry.travel.isReceived"
/>
</div>
</VnRow>
</QCard>
<QCard class="vn-two" style="min-width: 100%">
<a class="header">
{{ t('entry.summary.buys') }}
</a>
<QTable
:rows="entryBuys"
:columns="entriesTableColumns"
hide-bottom
row-key="index"
class="full-width q-mt-md"
>
<template #body="{ cols, row, rowIndex }">
<QTr no-hover>
<QTd v-for="col in cols" :key="col.name">
<component
:is="tableColumnComponents[col.name].component(props)"
v-bind="tableColumnComponents[col.name].props(props)"
@click="tableColumnComponents[col.name].event(props)"
class="col-content"
>
<template
v-if="
col.name !== 'observation' &&
col.name !== 'isConfirmed'
"
>{{ col.value }}</template
>
<QTooltip v-if="col.toolTip">{{
col.toolTip
}}</QTooltip>
</component>
</QTd>
</QTr>
<QTr no-hover>
<QTd>
<span>{{ row.item.itemType.code }}</span>
</QTd>
<QTd>
<span>{{ row.item.id }}</span>
</QTd>
<QTd>
<span>{{ row.item.size }}</span>
</QTd>
<QTd>
<span>{{ toCurrency(row.item.minPrice) }}</span>
</QTd>
<QTd colspan="6">
<span>{{ row.item.concept }}</span>
<span v-if="row.item.subName" class="subName">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
</QTd>
</QTr>
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
<QTr
v-if="rowIndex !== entryBuys.length - 1"
class="separation-row"
>
<QTd colspan="10" style="height: 24px" />
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
</template>
<style lang="scss" scoped>
.separation-row {
background-color: var(--vn-gray) !important;
}
</style>
<i18n>
es:
Travel data: 'Datos envío'
</i18n>

29
src/pages/Entry/Card/EntrySummaryDialog.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup>
import { useDialogPluginComponent } from 'quasar';
import EntrySummary from './EntrySummary.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>
<template>
<QDialog ref="dialogRef" @hide="onDialogHide">
<EntrySummary v-if="$props.id" :id="$props.id" />
</QDialog>
</template>
<style lang="scss">
.q-dialog .summary .header {
position: sticky;
z-index: $z-max;
top: 0;
}
</style>

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

@ -7,6 +7,7 @@ import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { toDate } from 'src/filters';
@ -51,22 +52,19 @@ const companiesOptions = ref([]);
<!-- Agregar searchbar de entries -->
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<FormModel url-create="Entries" model="entry" :form-initial-data="newEntryForm">
<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 +81,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 +89,7 @@ const companiesOptions = ref([]);
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('entry.travelFk')"
>
<template #option="scope">
@ -111,7 +110,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 +118,7 @@ const companiesOptions = ref([]);
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('entry.companyFk')"
/>
</VnRow>
@ -129,7 +129,7 @@ const companiesOptions = ref([]);
<i18n>
es:
Supplier *: Proveedor *
Travel *: Envío *
Company *: Empresa *
Supplier: Proveedor
Travel: Envío
Company: Empresa
</i18n>

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

@ -1,22 +1,150 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index';
const stateStore = useStateStore();
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
onMounted(async () => {
stateStore.rightDrawer = true;
});
onUnmounted(() => (stateStore.rightDrawer = false));
function navigate(id) {
router.push({ path: `/entry/${id}` });
}
const redirectToCreateView = () => {
router.push({ name: 'EntryCreate' });
};
function viewSummary(id) {
quasar.dialog({
component: EntrySummaryDialog,
componentProps: {
id,
},
});
}
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="EntryList"
:label="t('Search entries')"
:info="t('You can search by entry reference')"
/>
</Teleport>
</template>
<QPage class="column items-center q-pa-md">
<div class="card-list">
<VnPaginate
data-key="EntryList"
url="Entries/filter"
order="landed DESC, id DESC"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="row.reference"
@click="navigate(row.id)"
:id="row.id"
:has-info-icons="!!row.isExcludedFromAvailable || !!row.isRaid"
>
<template #info-icons>
<QIcon
v-if="row.isExcludedFromAvailable"
name="vn:inventory"
color="primary"
size="xs"
>
<QTooltip>{{ t('Inventory entry') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isRaid"
name="vn:web"
color="primary"
size="xs"
>
<QTooltip>{{ t('Virtual entry') }}</QTooltip>
</QIcon>
</template>
<template #list-items>
<VnLv
:label="t('entry.list.landed')"
:value="toDate(row.landed)"
/>
<VnLv
:label="t('entry.list.booked')"
:value="!!row.isBooked"
/>
<VnLv
:label="t('entry.list.invoiceNumber')"
:value="row.invoiceNumber"
/>
<VnLv
:label="t('entry.list.confirmed')"
:value="!!row.isConfirmed"
/>
<VnLv
:label="t('entry.list.supplier')"
:value="row.supplierName"
/>
<VnLv
:label="t('entry.list.ordered')"
:value="!!row.isOrdered"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id)"
color="primary"
type="submit"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
<QTooltip>
{{ t('entry.list.newEntry') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
</style>
<i18n>
es:
Search entries: Buscar entradas
You can search by entry reference: Puedes buscar por referencia de la entrada
Inventory entry: Es inventario
Virtual entry: Es una redada
</i18n>

32
src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
View File

@ -23,6 +23,7 @@ const userConfig = ref(null);
const suppliers = ref([]);
const suppliersRef = ref();
const suppliersRefFilter = ref({ fields: ['id', 'nickname'], limit: 30 });
const currencies = ref([]);
const currenciesRef = ref();
const companies = ref([]);
@ -130,13 +131,24 @@ async function upsert() {
});
}
}
function supplierRefFilter(val) {
let where = { limit: 30 };
let params = {};
let key = 'nickname';
if (new RegExp(/\d/g).test(val)) {
key = 'id';
}
params = { [key]: { like: `%${val}%` } };
where = Object.assign(where, params);
suppliersRef.value.fetch({ where });
}
</script>
<template>
<FetchData
ref="suppliersRef"
url="Suppliers"
:filter="{ fields: ['id', 'nickname'] }"
limit="30"
@on-fetch="(data) => (suppliers = data)"
/>
<FetchData
@ -145,6 +157,7 @@ async function upsert() {
:filter="{ fields: ['id', 'code'] }"
order="code"
@on-fetch="(data) => (currencies = data)"
auto-load
/>
<FetchData
ref="companiesRef"
@ -152,6 +165,7 @@ async function upsert() {
:filter="{ fields: ['id', 'code'] }"
order="code"
@on-fetch="(data) => (companies = data)"
auto-load
/>
<FetchData
ref="dmsTypesRef"
@ -159,6 +173,7 @@ async function upsert() {
:filter="{ fields: ['id', 'name'] }"
order="name"
@on-fetch="(data) => (dmsTypes = data)"
auto-load
/>
<FetchData
ref="warehousesRef"
@ -166,11 +181,13 @@ async function upsert() {
:filter="{ fields: ['id', 'name'] }"
order="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<FetchData
ref="allowTypesRef"
url="DmsContainers/allowedContentTypes"
@on-fetch="(data) => (allowedContentTypes = data)"
auto-load
/>
<FetchData
url="UserConfigs/getUserConfig"
@ -189,7 +206,8 @@ async function upsert() {
option-value="id"
option-label="nickname"
:input-debounce="100"
@input-value="suppliersRef.fetch()"
@input-value="supplierRefFilter"
:default-filter="false"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -406,7 +424,6 @@ async function upsert() {
:options="currencies"
option-value="id"
option-label="code"
@input-value="currenciesRef.fetch()"
/>
</div>
<div class="col">
@ -417,7 +434,6 @@ async function upsert() {
:options="companies"
option-value="id"
option-label="code"
@input-value="companiesRef.fetch()"
/>
</div>
</div>
@ -459,7 +475,6 @@ async function upsert() {
:options="companies"
option-value="id"
option-label="code"
@input-value="companiesRef.fetch()"
:rules="[requiredFieldRule]"
/>
</QItem>
@ -471,7 +486,6 @@ async function upsert() {
:options="warehouses"
option-value="id"
option-label="name"
@input-value="warehousesRef.fetch()"
:rules="[requiredFieldRule]"
/>
<VnSelectFilter
@ -481,7 +495,6 @@ async function upsert() {
:options="dmsTypes"
option-value="id"
option-label="name"
@input-value="dmsTypesRef.fetch()"
:rules="[requiredFieldRule]"
/>
</QItem>
@ -571,7 +584,6 @@ async function upsert() {
:options="companies"
option-value="id"
option-label="code"
@input-value="companiesRef.fetch()"
:rules="[requiredFieldRule]"
/>
</QItem>
@ -583,7 +595,6 @@ async function upsert() {
:options="warehouses"
option-value="id"
option-label="name"
@input-value="warehousesRef.fetch()"
:rules="[requiredFieldRule]"
/>
<VnSelectFilter
@ -593,7 +604,6 @@ async function upsert() {
:options="dmsTypes"
option-value="id"
option-label="name"
@input-value="dmsTypesRef.fetch()"
:rules="[requiredFieldRule]"
/>
</QItem>

7
src/pages/InvoiceIn/Card/InvoiceInCard.vue
View File

@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
@ -74,11 +75,7 @@ onMounted(async () => {
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>

6
src/pages/InvoiceIn/Card/InvoiceInLog.vue Normal file
View File

@ -0,0 +1,6 @@
<script setup>
import VnLog from 'src/components/common/VnLog.vue';
</script>
<template>
<VnLog model="InvoiceIn" />
</template>

10
src/pages/InvoiceIn/Card/InvoiceInSummary.vue
View File

@ -203,7 +203,7 @@ function getLink(param) {
@on-fetch="(data) => setData(data)"
>
<template #header="{ entity: invoiceIn }">
<div>{{ invoiceIn.id }} - {{ invoiceIn.supplier.name }}</div>
<div>{{ invoiceIn.id }} - {{ invoiceIn.supplier?.name }}</div>
</template>
<template #body="{ entity: invoiceIn }">
<!--Basic Data-->
@ -216,7 +216,7 @@ function getLink(param) {
</QCardSection>
<VnLv
:label="t('invoiceIn.summary.supplier')"
:value="invoiceIn.supplier.name"
:value="invoiceIn.supplier?.name"
/>
<VnLv
:label="t('invoiceIn.summary.supplierRef')"
@ -224,7 +224,7 @@ function getLink(param) {
/>
<VnLv
:label="t('invoiceIn.summary.currency')"
:value="invoiceIn.currency.code"
:value="invoiceIn.currency?.code"
/>
<VnLv
:label="t('invoiceIn.summary.docNumber')"
@ -265,7 +265,7 @@ function getLink(param) {
</QCardSection>
<VnLv
:label="t('invoiceIn.summary.sage')"
:value="invoiceIn.sageWithholding.withholding"
:value="invoiceIn.sageWithholding?.withholding"
/>
<VnLv
:label="t('invoiceIn.summary.vat')"
@ -273,7 +273,7 @@ function getLink(param) {
/>
<VnLv
:label="t('invoiceIn.summary.company')"
:value="invoiceIn.company.code"
:value="invoiceIn.company?.code"
/>
<VnLv
:label="t('invoiceIn.summary.booked')"

53
src/pages/InvoiceIn/InvoiceInList.vue
View File

@ -84,9 +84,9 @@ function viewSummary(id) {
:key="row.id"
:title="row.supplierRef"
@click="navigate(row.id)"
:id="row.id"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv
:label="t('invoiceIn.list.supplierRef')"
:value="row.supplierRef"
@ -112,42 +112,34 @@ function viewSummary(id) {
:label="t('invoiceIn.list.amount')"
:value="toCurrency(row.amount)"
/>
<VnLv :label="t('invoiceIn.list.isBooked')">
<template #value>
<QCheckbox
class="no-pointer-events"
v-model="row.isBooked"
size="xs"
:true-value="1"
:false-value="0"
<VnLv
:label="t('invoiceIn.list.isBooked')"
:value="!!row.isBooked"
/>
</template>
</VnLv>
</template>
<template #actions>
<QBtn
flat
icon="arrow_circle_right"
:label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
class="bg-vn-dark"
outline
type="reset"
/>
<QBtn
flat
icon="cloud_download"
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id)"
color="primary"
type="submit"
class="q-mt-sm"
/>
<QBtn
:label="t('Download')"
class="q-mt-sm"
@click.stop="downloadFile(row.dmsFk)"
>
<QTooltip>
{{ t('components.smartCard.downloadFile') }}
</QTooltip>
</QBtn>
type="submit"
color="primary"
/>
</template>
</CardList>
</template>
@ -176,4 +168,5 @@ function viewSummary(id) {
es:
Search invoice: Buscar factura emitida
You can search by invoice reference: Puedes buscar por referencia de la factura
Download: Descargar
</i18n>

7
src/pages/InvoiceOut/Card/InvoiceOutCard.vue
View File

@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -26,11 +27,7 @@ const { t } = useI18n();
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>

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

@ -49,8 +49,7 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
const columns = computed(() => [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
label: t('invoiceOut.globalInvoices.table.client'),
@ -71,8 +70,7 @@ const columns = computed(() => {
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>

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

@ -4,13 +4,14 @@ import { useI18n } from 'vue-i18n';
import { QCheckbox, QBtn } from 'quasar';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
@ -187,9 +188,21 @@ const columns = computed(() => [
]);
const downloadCSV = async () => {
const params = {}; // filter.value;
const filterParams = {
limit: 20,
where: {
and: [],
},
};
for (const param in params) {
if (params[param]) filterParams.where.and.push({ [param]: params[param] });
}
await invoiceOutGlobalStore.getNegativeBasesCsv(
arrayData.value.store.userParams.from,
arrayData.value.store.userParams.to
arrayData.value.store.userParams.to,
params
);
};
@ -213,11 +226,7 @@ const selectWorkerId = (id) => {
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
@ -243,8 +252,14 @@ const selectWorkerId = (id) => {
"
>{{ props.value }}
</template>
<CustomerDescriptorProxy :id="selectedCustomerId" />
<WorkerDescriptorProxy :id="selectedWorkerId" />
<CustomerDescriptorProxy
v-if="props.col.name === 'clientId'"
:id="selectedCustomerId"
/>
<VnUserLink
v-if="props.col.name === 'comercial'"
:worker-id="selectedWorkerId"
/>
</component>
</QTd>
</template>
@ -255,7 +270,7 @@ const selectWorkerId = (id) => {
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
padding: 6px;
}
</style>

12
src/pages/Order/Card/OrderBasicData.vue
View File

@ -1,12 +0,0 @@
<script setup>
import OrderForm from 'pages/Order/Card/OrderForm.vue';
</script>
<template>
<QToolbar>
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<OrderForm />
</template>
<style lang="scss" scoped></style>

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

@ -2,6 +2,7 @@
import LeftMenu from 'components/LeftMenu.vue';
import { useStateStore } from 'stores/useStateStore';
import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
</script>
@ -15,9 +16,8 @@ const stateStore = useStateStore();
</QDrawer>
<QPageContainer>
<QPage>
<div class="q-pa-md">
<VnSubToolbar />
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

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

@ -1,11 +1,14 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
import VnInput from 'components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n();
const route = useRoute();
@ -14,6 +17,10 @@ const props = defineProps({
type: String,
required: true,
},
tags: {
type: Array,
required: true,
},
});
const categoryList = ref(null);
@ -21,16 +28,41 @@ const selectedCategoryFk = ref(null);
const typeList = ref(null);
const selectedTypeFk = ref(null);
const selectCategory = (params, category) => {
if (params.categoryFk === category?.id) {
const resetCategory = () => {
selectedCategoryFk.value = null;
params.categoryFk = null;
typeList.value = null;
};
const selectedOrder = ref(null);
const orderList = [
{ way: 'ASC', name: 'Ascendant' },
{ way: 'DESC', name: 'Descendant' },
];
const selectedOrderField = ref(null);
const OrderFields = [
{ field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
{ field: 'showOrder, price', name: 'Color and price', priority: 999 },
{ field: 'name', name: 'Name', priority: 999 },
{ field: 'price', name: 'Price', priority: 999 },
];
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
}
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) {
resetCategory();
params.categoryFk = null;
} else {
selectedCategoryFk.value = category?.id;
params.categoryFk = category?.id;
loadTypes(category?.id);
}
search();
};
const loadTypes = async (categoryFk) => {
@ -48,6 +80,11 @@ const onFilterInit = async ({ params }) => {
await loadTypes(params.categoryFk);
selectedCategoryFk.value = params.categoryFk;
}
if (params.orderBy) {
orderByParam.value = JSON.parse(params.orderBy);
selectedOrder.value = orderByParam.value?.way;
selectedOrderField.value = orderByParam.value?.field;
}
};
const selectedCategory = computed(() =>
@ -65,32 +102,90 @@ function exprBuilder(param, value) {
case 'categoryFk':
case 'typeFk':
return { [param]: value };
case 'search':
return { 'i.name': { like: `%${value}%` } };
}
}
</script>
<template>
<FetchData
url="ItemCategories"
limit="30"
auto-load
@on-fetch="
(data) => {
categoryList = (data || [])
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref(null);
const isButtonDisabled = computed(
() => !selectedTag.value || tagValues.value.some((item) => !item.value)
);
const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) {
params.tagGroups = null;
search();
return;
}
if (!params.tagGroups) {
params.tagGroups = [];
}
params.tagGroups.push(
JSON.stringify({
values: tagValues.value,
tagSelection: {
...selectedTag.value,
orgShowField: selectedTag.value.name,
},
tagFk: selectedTag.value.tagFk,
})
);
search();
selectedTag.value = null;
tagValues.value = [{}];
};
const removeTagChip = (selection, params, search) => {
if (params.tagGroups) {
params.tagGroups = (params.tagGroups || []).filter(
(value) => value !== selection
);
}
search();
};
const orderByParam = ref(null);
const onOrderFieldChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
params.orderBy = JSON.stringify(orderBy);
search();
};
const onOrderChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
params.orderBy = JSON.stringify(orderBy);
search();
};
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="setCategoryList" />
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:hidden-tags="['orderFk', 'orderBy']"
:expr-builder="exprBuilder"
:custom-tags="['tagGroups']"
@init="onFilterInit"
@remove="clearFilter"
>
<template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'">
@ -104,21 +199,37 @@ function exprBuilder(param, value) {
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense>
<template #customTags="{ tags: customTags, params, searchFn }">
<template v-for="tag in customTags" :key="tag.label">
<template v-if="tag.label === 'tagGroups'">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
</VnFilterPanelChip>
</template>
</template>
</template>
<template #body="{ params, searchFn }">
<QList dense style="max-width: 256px">
<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) }}
@ -126,7 +237,7 @@ function exprBuilder(param, value) {
</QIcon>
</div>
</QItem>
<QItem class="q-mt-md">
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.type')"
@ -140,7 +251,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">
@ -155,6 +271,130 @@ function exprBuilder(param, value) {
</VnSelectFilter>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrder"
:options="orderList || []"
option-value="way"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrderField"
:options="OrderFields || []"
option-value="field"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderFieldChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelectFilter
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<VnInput
v-if="selectedTag?.isFree"
v-model="value.value"
:label="t('params.value')"
is-outlined
class="filter-input"
/>
<VnSelectFilter
v-else
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!selectedTag"
class="filter-input"
/>
<FetchData
v-if="selectedTag && !selectedTag.isFree"
:url="`Tags/${selectedTag?.id}/filterValue`"
limit="30"
auto-load
@on-fetch="(data) => (tagOptions = data)"
/>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="button"
unelevated
:disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
@ -182,12 +422,29 @@ function exprBuilder(param, value) {
.category-icon {
border-radius: 50%;
background-color: var(--vn-label);
background-color: var(--vn-light-gray);
font-size: 2.6rem;
padding: 8px;
cursor: pointer;
}
}
.filter-icon {
font-size: 24px;
color: $primary;
padding: 0 4px;
cursor: pointer;
}
.filter-input {
flex-shrink: 1;
min-width: 0;
}
.filter-value {
display: flex;
align-items: center;
}
</style>
<i18n>
@ -195,10 +452,16 @@ en:
params:
type: Type
orderBy: Order By
tag: Tag
value: Value
order: Order
es:
params:
type: Tipo
orderBy: Ordenar por
tag: Etiqueta
value: Valor
order: Orden
Plant: Planta
Flower: Flor
Handmade: Confección

8
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();
@ -22,7 +24,7 @@ const dialog = ref(null);
<template>
<div class="container order-catalog-item overflow-hidden">
<div class="card shadow-6 bg-dark">
<QCard class="card shadow-6">
<div class="img-wrapper">
<QImg
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
@ -70,11 +72,11 @@ 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>
</div>
</QCard>
</div>
</template>

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"

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

@ -9,8 +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 FetchData from "components/FetchData.vue";
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import FetchData from 'components/FetchData.vue';
const DEFAULT_ITEMS = 0;
const $props = defineProps({
id: {
@ -61,6 +63,11 @@ 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>
@ -86,13 +93,7 @@ const total = ref(null);
<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>
@ -105,7 +106,10 @@ const total = ref(null);
<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.items')"
:value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
/>
<VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
</template>
<template #actions="{ entity }">

8
src/pages/Order/Card/OrderDescriptorMenu.vue
View File

@ -51,13 +51,13 @@ async function remove() {
<i18n>
en:
deleteOrder: Delete order,
confirmDeletion: Confirm deletion,
deleteOrder: Delete order
confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order?
es:
deleteOrder: Eliminar pedido,
confirmDeletion: Confirmar eliminación,
deleteOrder: Eliminar pedido
confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
</i18n>

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

@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const route = useRoute();
@ -65,8 +66,8 @@ const fetchAgencyList = async (landed, addressFk) => {
};
const fetchOrderDetails = (order) => {
fetchAddressList(order?.addressFk)
fetchAgencyList(order?.landed, order?.addressFk)
fetchAddressList(order?.addressFk);
fetchAgencyList(order?.landed, order?.addressFk);
};
const orderMapper = (order) => {
@ -105,17 +106,14 @@ const orderFilter = {
</script>
<template>
<QToolbar>
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<FetchData
url="Clients"
@on-fetch="(data) => (clientList = data)"
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load
/>
<VnSubToolbar v-if="isNew" />
<div class="q-pa-md">
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
:url-create="isNew ? 'Orders/new' : null"
@ -206,4 +204,5 @@ const orderFilter = {
</VnRow>
</template>
</FormModel>
</div>
</template>

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>

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

@ -56,6 +56,8 @@ const detailsColumns = ref([
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<OrderSearchbar />
</Teleport>
<div class="q-pa-md">
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }">
{{ t('order.summary.basket') }} #{{ entity?.id }} -
@ -78,7 +80,7 @@ const detailsColumns = ref([
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="entity?.isConfirmed === 1"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">
@ -130,7 +132,9 @@ const detailsColumns = ref([
<span class="text-h6">{{ t('order.summary.subtotal') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
<span class="text-h6">{{
toCurrency(entity?.subTotal)
}}</span>
</template>
</VnLv>
<VnLv>
@ -177,11 +181,17 @@ const detailsColumns = ref([
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">
<span
v-if="props.row.item.subName"
class="subName"
>
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5" />
<fetched-tags
:item="props.row.item"
:max-length="5"
/>
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
@ -190,7 +200,9 @@ const detailsColumns = ref([
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{ toCurrency(props.row?.quantity * props.row?.price) }}
{{
toCurrency(props.row?.quantity * props.row?.price)
}}
</QTd>
</QTr>
</template>
@ -198,6 +210,7 @@ const detailsColumns = ref([
</QCard>
</template>
</CardSummary>
</div>
</template>
<style lang="scss">
.cardSummary .summaryBody .vn-label-value.order-summary-address {

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

@ -1,7 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import { onMounted, onUnmounted } from 'vue';
import {onMounted, onUnmounted, ref} from 'vue';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
@ -20,11 +20,21 @@ 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}%` } };
const tags = ref([])
function extractTags(items) {
const resultTags = [];
(items || []).forEach((item) => {
(item.tags || []).forEach((tag) => {
const index = resultTags.findIndex((item) => item.tagFk === tag.tagFk);
if (index === -1) {
resultTags.push({ ...tag, priority: 1 });
} else {
resultTags[index].priority += 1;
}
});
});
tags.value = resultTags
}
</script>
@ -35,8 +45,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">
@ -56,7 +66,7 @@ function exprBuilder(param, value) {
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<OrderCatalogFilter data-key="OrderCatalogList" />
<OrderCatalogFilter data-key="OrderCatalogList" :tags="tags" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
@ -67,6 +77,7 @@ function exprBuilder(param, value) {
:limit="50"
:user-params="catalogParams"
auto-load
@on-fetch="extractTags"
>
<template #body="{ rows }">
<div class="catalog-list">

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

@ -1,17 +1,19 @@
<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 { ref } from 'vue';
import { toCurrency, toDate } from 'src/filters';
import CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { useSession } from 'composables/useSession';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSession } from 'composables/useSession';
import axios from 'axios';
import { useQuasar } from 'quasar';
const route = useRoute();
const { t } = useI18n();
@ -23,6 +25,7 @@ const orderSummary = ref({
vat: null,
});
const componentKey = ref(0);
const order = ref(0);
const refresh = () => {
componentKey.value += 1;
@ -61,6 +64,12 @@ async function confirmOrder() {
</script>
<template>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}`"
@on-fetch="(data) => (order = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@ -175,7 +184,7 @@ async function confirmOrder() {
:value="toCurrency(row.price * row.quantity)"
/>
</template>
<template #actions>
<template #actions v-if="!order?.isConfirmed">
<QBtn
:label="t('remove')"
@click.stop="confirmRemove(row)"
@ -188,7 +197,7 @@ async function confirmOrder() {
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}

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

12
src/pages/Shelving/Card/ShelvingDescriptor.vue
View File

@ -5,8 +5,8 @@ import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue';
import useCardDescription from 'composables/useCardDescription';
import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";
import ShelvingDescriptorMenu from 'pages/Shelving/Card/ShelvingDescriptorMenu.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
const $props = defineProps({
id: {
@ -57,10 +57,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
<VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
<VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
<template #value>
<span class="link">
{{ entity.worker?.user?.nickname }}
<WorkerDescriptorProxy :id="entity.worker?.id" />
</span>
<VnUserLink
:name="entity.worker?.user?.nickname"
:worker-id="entity.worker?.id"
/>
</template>
</VnLv>
</template>

7
src/pages/Shelving/Card/ShelvingForm.vue
View File

@ -6,6 +6,7 @@ import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const route = useRoute();
@ -59,11 +60,7 @@ const shelvingFilter = {
};
</script>
<template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<VnSubToolbar />
<FetchData
url="Parkings"
:filter="parkingFilter"

178
src/pages/Supplier/Card/SupplierAccounts.vue
View File

@ -1 +1,177 @@
<template>Supplier accounts</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import CrudModel from 'components/CrudModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useQuasar } from 'quasar';
const quasar = useQuasar();
const { notify } = useNotify();
const route = useRoute();
const { t } = useI18n();
const supplier = ref(null);
const supplierAccountRef = ref(null);
const wireTransferFk = ref(null);
const bankEntitiesOptions = ref([]);
const onBankEntityCreated = (data) => {
bankEntitiesOptions.value.push(data);
};
const onChangesSaved = () => {
if (supplier.value.payMethodFk !== wireTransferFk.value)
quasar
.dialog({
message: t('Do you want to change the pay method to wire transfer?'),
ok: {
push: true,
color: 'primary',
},
cancel: true,
})
.onOk(async () => {
await setWireTransfer();
});
};
const setWireTransfer = async () => {
try {
const params = {
id: route.params.id,
payMethodFk: wireTransferFk.value,
};
await axios.patch(`Suppliers/${route.params.id}`, params);
notify('globals.dataSaved', 'positive');
} catch (err) {
console.error('Error setting wire transfer', err);
}
};
onMounted(() => {
if (supplierAccountRef.value) supplierAccountRef.value.reload();
});
</script>
<template>
<FetchData
url="BankEntities"
@on-fetch="(data) => (bankEntitiesOptions = data)"
auto-load
/>
<FetchData
url="payMethods/findOne"
@on-fetch="(data) => (wireTransferFk = data.id)"
:filter="{ where: { code: 'wireTransfer' } }"
auto-load
/>
<FetchData
:url="`Suppliers/${route.params.id}`"
@on-fetch="(data) => (supplier = data)"
auto-load
/>
<CrudModel
data-key="SupplierAccount"
url="SupplierAccounts"
model="SupplierAccounts"
:filter="{
fields: ['id', 'supplierFk', 'iban', 'bankEntityFk', 'beneficiary'],
where: { supplierFk: route.params.id },
}"
ref="supplierAccountRef"
:default-remove="false"
:data-required="{ supplierFk: route.params.id }"
@save-changes="onChangesSaved()"
>
<template #body="{ rows }">
<QCard class="q-pa-md">
<VnRow
v-for="(row, index) in rows"
:key="index"
class="row q-gutter-md q-mb-md"
>
<div class="col">
<VnInput
:label="t('supplier.accounts.iban')"
v-model="row.iban"
/>
</div>
<div class="col">
<VnSelectCreate
:label="t('worker.create.bankEntity')"
v-model="row.bankEntityFk"
:options="bankEntitiesOptions"
option-label="name"
option-value="id"
hide-selected
>
<template #form>
<CreateBankEntityForm
@on-data-saved="onBankEntityCreated($event)"
:show-entity-field="false"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel
>{{ scope.opt.bic }}
{{ scope.opt.name }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<VnInput
:label="t('supplier.accounts.beneficiary')"
v-model="row.beneficiary"
/>
</div>
<div class="col-1 row justify-center items-center">
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="supplierAccountRef.remove([row])"
>
<QTooltip>
{{ t('Remove account') }}
</QTooltip>
</QIcon>
</div>
</VnRow>
<VnRow>
<QIcon
name="add"
size="sm"
class="cursor-pointer"
color="primary"
@click="supplierAccountRef.insert()"
>
<QTooltip>
{{ t('Add account') }}
</QTooltip>
</QIcon>
</VnRow>
</QCard>
</template>
</CrudModel>
</template>
<i18n>
es:
Do you want to change the pay method to wire transfer?: ¿Quieres modificar la forma de pago a transferencia?
Add account: Añadir cuenta
Remove account: Remover cuenta
</i18n>

98
src/pages/Supplier/Card/SupplierAddresses.vue
View File

@ -1 +1,97 @@
<template>Supplier addresses</template>
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const addressesFilter = {
fields: [
'id',
'nickname',
'street',
'city',
'provinceFk',
'phone',
'mobile',
'postalCode',
],
order: ['nickname ASC'],
include: [
{
relation: 'province',
scope: {
fields: ['id', 'name'],
},
},
],
};
const redirectToCreateView = () => {
router.push({ name: 'SupplierAddressesCreate' });
};
const redirectToUpdateView = (addressData) => {
const stringifiedAddressData = JSON.stringify(addressData);
router.push({
name: 'SupplierAddressesCreate',
query: { addressData: stringifiedAddressData },
});
};
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="card-list">
<VnPaginate
data-key="SupplierAddress"
:url="`Suppliers/${route.params.id}/addresses`"
:filter="addressesFilter"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="row.nickname"
:id="row.id"
@click="redirectToUpdateView(row)"
>
<template #list-items>
<VnLv
:label="t('supplier.addresses.street')"
:value="row.street"
/>
<VnLv
:label="t('supplier.addresses.postcode')"
:value="`${row.postalCode} - ${row.city}, ${row.province.name}`"
/>
<VnLv
:label="t('supplier.addresses.phone')"
:value="`${row.phone}, ${row.mobile}`"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
<QTooltip>
{{ t('supplier.list.newSupplier') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
</style>

182
src/pages/Supplier/Card/SupplierAddressesCreate.vue Normal file
View File

@ -0,0 +1,182 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { reactive, ref, onMounted, onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import VnRow from 'components/ui/VnRow.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const provincesOptions = ref([]);
const postcodesOptions = ref([]);
const townsLocationOptions = ref([]);
const viewAction = ref();
const updateAddressId = ref(null);
const newAddressForm = reactive({
nickname: null,
street: null,
postalCode: null,
city: null,
provinceFk: null,
phone: null,
mobile: null,
});
const onDataSaved = () => {
router.push({ name: 'SupplierAddresses' });
};
const updateAddressForm = (addressData) => {
for (let key in newAddressForm) {
if (key in addressData) {
newAddressForm[key] = addressData[key];
}
}
};
onBeforeMount(() => {
viewAction.value = route.query.addressData ? 'update' : 'create';
if (viewAction.value === 'create') newAddressForm.supplierFk = route.params.id;
});
onMounted(() => {
if (viewAction.value === 'update' && route.query.addressData) {
const addressData = JSON.parse(route.query.addressData);
updateAddressId.value = addressData.id;
updateAddressForm(addressData);
}
});
</script>
<template>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FetchData
ref="provincesFetchDataRef"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (townsLocationOptions = data)"
auto-load
url="Towns/location"
/>
<QPage>
<FormModel
model="supplierAddresses"
:form-initial-data="newAddressForm"
:url-update="
viewAction !== 'create' ? `SupplierAddresses/${updateAddressId}` : null
"
:url-create="viewAction === 'create' ? 'SupplierAddresses' : null"
:observe-form-changes="viewAction === 'create'"
@on-data-saved="onDataSaved()"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.nickname"
:label="t('supplier.addresses.name')"
/>
</div>
<div class="col">
<VnInput
v-model="data.street"
:label="t('supplier.addresses.street')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectCreate
v-model="data.postalCode"
:label="t('supplier.addresses.postcode')"
:rules="validate('supplierAddress.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
option-label="code"
option-value="code"
hide-selected
>
<template #form>
<CustomerCreateNewPostcode
@on-data-saved="onPostcodeCreated($event)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt.code }} -
{{ scope.opt.town.name }} ({{
scope.opt.town.province.name
}},
{{
scope.opt.town.province.country.country
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<VnSelectFilter
:label="t('supplier.addresses.city')"
:options="townsLocationOptions"
v-model="data.city"
hide-selected
option-label="name"
option-value="id"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('supplier.addresses.province')"
:options="provincesOptions"
hide-selected
map-options
option-label="name"
option-value="id"
v-model="data.provinceFk"
/>
</div>
<div class="col">
<VnInput
v-model="data.phone"
:label="t('supplier.addresses.phone')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.mobile"
:label="t('supplier.addresses.mobile')"
/>
</div>
<div class="col" />
</VnRow>
</template>
</FormModel>
</QPage>
</template>

140
src/pages/Supplier/Card/SupplierAgencyTerm.vue
View File

@ -1 +1,139 @@
<template>Supplier agency term</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import CrudModel from 'components/CrudModel.vue';
import VnRow from 'components/ui/VnRow.vue';
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const supplierAgencyTermRef = ref(null);
const agenciesOptions = ref(null);
const supplierAgencyFilter = {
include: {
relation: 'agency',
scope: {
fields: ['id', 'name'],
},
},
where: { supplierFk: route.params.id },
};
const redirectToCreateView = () => {
router.push({ name: 'SupplierAgencyTermCreate' });
};
onMounted(() => {
if (supplierAgencyTermRef.value) supplierAgencyTermRef.value.reload();
});
</script>
<template>
<FetchData
url="Suppliers/freeAgencies"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<CrudModel
ref="supplierAgencyTermRef"
data-key="SupplierAgencyTerm"
save-url="SupplierAgencyTerms/crud"
url="SupplierAgencyTerms"
model="SupplierAgencyTerm"
primary-key="agencyFk"
:filter="supplierAgencyFilter"
:default-remove="false"
:data-required="{
supplierFk: route.params.id,
}"
>
<template #body="{ rows }">
<QCard class="q-pa-md">
<VnRow
v-for="(row, index) in rows"
:key="index"
class="row q-gutter-md q-mb-md"
>
<div class="col">
<QField :label="t('supplier.agencyTerms.agencyFk')" stack-label>
<template #control>
<div tabindex="0">
{{ row.agency?.name }}
</div>
</template>
</QField>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.minimumM3')"
v-model.number="row.minimumM3"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.packagePrice')"
v-model.number="row.packagePrice"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.kmPrice')"
v-model.number="row.kmPrice"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.m3Price')"
v-model.number="row.m3Price"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.routePrice')"
v-model.number="row.routePrice"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.minimumKm')"
v-model.number="row.minimumKm"
type="number"
/>
</div>
<div class="col-1 row justify-center items-center">
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="supplierAgencyTermRef.remove([row])"
>
<QTooltip>
{{ t('Remove row') }}
</QTooltip>
</QIcon>
</div>
</VnRow>
</QCard>
</template>
</CrudModel>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
<QTooltip>
{{ t('supplier.list.newSupplier') }}
</QTooltip>
</QPageSticky>
</template>
<i18n>
es:
Remove row: Eliminar fila
</i18n>

113
src/pages/Supplier/Card/SupplierAgencyTermCreate.vue Normal file
View File

@ -0,0 +1,113 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const agenciesOptions = ref(null);
const newAgencyTermForm = reactive({
agencyFk: null,
minimumM3: null,
packagePrice: null,
kmPrice: null,
m3Price: null,
routePrice: null,
minimumKm: null,
supplierFk: route.params.id,
});
const onDataSaved = () => {
router.push({ name: 'SupplierAgencyTerm' });
};
</script>
<template>
<FetchData
url="Suppliers/freeAgencies"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<QPage>
<FormModel
model="supplierAgencyTerm"
:form-initial-data="newAgencyTermForm"
url-create="SupplierAgencyTerms"
:observe-form-changes="true"
@on-data-saved="onDataSaved()"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('supplier.agencyTerms.agencyFk')"
v-model="data.agencyFk"
:options="agenciesOptions"
option-label="name"
option-value="id"
hide-selected
rounded
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.minimumM3')"
v-model.number="data.minimumM3"
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.packagePrice')"
v-model.number="data.packagePrice"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.kmPrice')"
v-model.number="data.kmPrice"
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.m3Price')"
v-model.number="data.m3Price"
type="number"
/>
</div>
<div class="col">
<QInput
:label="t('supplier.agencyTerms.routePrice')"
v-model.number="data.routePrice"
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.minimumKm')"
v-model.number="data.minimumKm"
type="number"
/>
</div>
<div class="col" />
</VnRow>
</template>
</FormModel>
</QPage>
</template>

98
src/pages/Supplier/Card/SupplierBasicData.vue
View File

@ -1 +1,97 @@
<template>Supplier basic data</template>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
const route = useRoute();
const { t } = useI18n();
const workersOptions = ref([]);
</script>
<template>
<FetchData
url="Workers/search"
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
@on-fetch="(data) => (workersOptions = data)"
auto-load
/>
<FormModel
:url="`Suppliers/${route.params.id}`"
:url-update="`Suppliers/${route.params.id}`"
model="supplier"
auto-load
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.nickname"
:label="t('supplier.basicData.alias')"
:rules="validate('supplier.nickname')"
clearable
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('supplier.basicData.workerFk')"
v-model="data.workerFk"
:options="workersOptions"
option-value="id"
option-label="name"
hide-selected
map-options
:rules="validate('supplier.workerFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption>
{{ scope.opt?.nickname }}, {{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
v-model="data.isSerious"
:label="t('supplier.basicData.isSerious')"
/>
</div>
<div class="col">
<QCheckbox
v-model="data.isActive"
:label="t('supplier.basicData.isActive')"
/>
</div>
<div class="col">
<QCheckbox
v-model="data.isPayMethodChecked"
:label="t('supplier.basicData.isPayMethodChecked')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.basicData.note')"
type="textarea"
v-model="data.note"
fill-input
autogrow
/>
</div>
</VnRow>
</template>
</FormModel>
</template>

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