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

merge with salix-front branch dev

This commit is contained in:
William Buezas 2024-02-02 13:26:34 -03:00
parent ba45f71a42 6c1bad1cf5
commit 59c8ada077
86 changed files with 2051 additions and 582 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -58,7 +58,7 @@ module.exports = {
rules: {
'prefer-promise-reject-errors': 'off',
'no-unused-vars': 'warn',
"vue/no-multiple-template-root": "off" ,
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},

6
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@quasar/extras": "^1.16.4",
"axios": "^1.4.0",
"chromium": "^3.0.3",
"croppie": "^2.6.5",
"pinia": "^2.1.3",
"quasar": "^2.12.0",
"validator": "^13.9.0",
@ -3169,6 +3170,11 @@
"node": ">= 10"
}
},
"node_modules/croppie": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/croppie/-/croppie-2.6.5.tgz",
"integrity": "sha512-IlChnVUGG5T3w2gRZIaQgBtlvyuYnlUWs2YZIXXR3H9KrlO1PtBT3j+ykxvy9eZIWhk+V5SpBmhCQz5UXKrEKQ=="
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "salix-front",
"version": "24.02.01",
"version": "24.8.0",
"description": "Salix frontend",
"productName": "Salix",
"author": "Verdnatura",
@ -19,13 +19,13 @@
"@quasar/extras": "^1.16.4",
"axios": "^1.4.0",
"chromium": "^3.0.3",
"croppie": "^2.6.5",
"pinia": "^2.1.3",
"quasar": "^2.12.0",
"validator": "^13.9.0",
"vue": "^3.3.4",
"vue-i18n": "^9.2.2",
"vue-router": "^4.2.1",
"vue-router-mock": "^0.2.0"
"vue-router": "^4.2.1"
},
"devDependencies": {
"@intlify/unplugin-vue-i18n": "^0.8.1",

23
src/components/CreateBankEntityForm.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
@ -54,16 +55,18 @@ const onDataSaved = (data) => {
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
:label="t('name')"
v-model="data.name"
:required="true"
:rules="validate('bankEntity.name')"
/>
</div>
<div class="col">
<QInput
<VnInput
:label="t('swift')"
v-model="data.bic"
:required="true"
:rules="validate('bankEntity.bic')"
/>
</div>
@ -77,11 +80,17 @@ const onDataSaved = (data) => {
option-value="id"
option-label="country"
hide-selected
:required="true"
:rules="validate('bankEntity.countryFk')"
/>
</div>
<div v-if="showEntityField" class="col">
<QInput :label="t('id')" v-model="data.id" />
<VnInput
:label="t('id')"
v-model="data.id"
:required="true"
:rules="validate('city.name')"
/>
</div>
</VnRow>
</template>
@ -92,15 +101,15 @@ const onDataSaved = (data) => {
en:
title: New bank entity
subtitle: Please, ensure you put the correct data!
name: Name *
swift: Swift *
name: Name
swift: Swift
country: Country
id: Entity code
es:
title: Nueva entidad bancaria
subtitle: ¡Por favor, asegúrate de poner los datos correctos!
name: Nombre *
swift: Swift *
name: Nombre
swift: Swift
country: País
id: Código de la entidad
</i18n>

363
src/components/EditPictureForm.vue Normal file
View File

@ -0,0 +1,363 @@
<script setup>
import { reactive, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import Croppie from 'croppie/croppie';
import 'croppie/croppie.css';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
const emit = defineEmits(['closeForm', 'onPhotoUploaded']);
const props = defineProps({
id: {
type: String,
default: '',
},
collection: {
type: String,
default: '',
},
});
const { t } = useI18n();
const { notify } = useNotify();
const uploadMethodsOptions = [
{ label: t('Select from computer'), value: 'computer' },
{ label: t('Import from external URL'), value: 'URL' },
];
const viewportTypes = [
{
code: 'normal',
description: t('Normal'),
viewport: {
width: 400,
height: 400,
},
output: {
width: 1200,
height: 1200,
},
},
{
code: 'panoramic',
description: t('Panoramic'),
viewport: {
width: 675,
height: 450,
},
output: {
width: 1350,
height: 900,
},
},
{
code: 'vertical',
description: t('Vertical'),
viewport: {
width: 306.66,
height: 533.33,
},
output: {
width: 460,
height: 800,
},
},
];
const uploadMethodSelected = ref('computer');
const viewPortTypeSelected = ref(viewportTypes[0]);
const inputFileRef = ref(null);
const allowedContentTypes = ref('');
const photoContainerRef = ref(null);
const editor = ref(null);
const newPhoto = reactive({
id: props.id,
collection: props.collection,
file: null,
url: null,
blob: null,
});
const openInputFile = () => {
inputFileRef.value.pickFiles();
};
const displayEditor = () => {
const viewportType = viewPortTypeSelected.value;
const viewport = viewportType.viewport;
const boundaryWidth = viewport.width + 200;
const boundaryHeight = viewport.height + 200;
if (editor.value) editor.value.destroy();
editor.value = new Croppie(photoContainerRef.value, {
viewport: { width: viewport.width, height: viewport.height },
boundary: { width: boundaryWidth, height: boundaryHeight },
enableOrientation: true,
showZoomer: true,
});
};
const viewportSelection = computed({
get() {
return viewPortTypeSelected.value;
},
set(val) {
viewPortTypeSelected.value = val;
const hasFile = newPhoto.files || newPhoto.url;
if (!val || !hasFile) return;
let file;
if (uploadMethodSelected.value == 'computer') file = newPhoto.files;
else if (uploadMethodSelected.value == 'URL') file = newPhoto.url;
updatePhotoPreview(file);
},
});
const updatePhotoPreview = (value) => {
if (value) {
displayEditor();
if (uploadMethodSelected.value == 'computer') {
newPhoto.files = value;
const reader = new FileReader();
reader.onload = (e) => editor.value.bind({ url: e.target.result });
reader.readAsDataURL(value);
} else if (uploadMethodSelected.value == 'URL') {
newPhoto.url = value;
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = value;
img.onload = () => editor.value.bind({ url: value });
img.onerror = () => {
notify(
t("This photo provider doesn't allow remote downloads"),
'negative'
);
};
}
}
};
const rotateLeft = () => {
editor.value.rotate(90);
};
const rotateRight = () => {
editor.value.rotate(-90);
};
const onUploadAccept = () => {
try {
if (!newPhoto.files && !newPhoto.url) {
notify(t('Select an image'), 'negative');
return;
}
const options = {
type: 'blob',
};
editor.value
.result(options)
.then((result) => {
const file = new File([result], newPhoto.files?.name || '');
newPhoto.blob = file;
})
.then(() => makeRequest());
} catch (err) {
console.error('Error uploading image');
}
};
const makeRequest = async () => {
const formData = new FormData();
const now = Date.vnNew();
const timestamp = now.getTime();
const fileName = `${newPhoto.files?.name}_${timestamp}`;
formData.append('blob', newPhoto.blob, fileName);
await axios.post('Images/upload', formData, {
params: newPhoto,
headers: {
'Content-Type': 'multipart/form-data',
},
});
emit('closeForm');
emit('onPhotoUploaded');
notify(t('globals.dataSaved'), 'positive');
};
</script>
<template>
<FetchData
ref="allowTypesRef"
url="ImageContainers/allowedContentTypes"
@on-fetch="(data) => (allowedContentTypes = data.join(', '))"
auto-load
/>
<QForm @submit="onUploadAccept()" class="all-pointer-events">
<QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ t('Edit photo') }}</h1>
<div class="row q-gutter-lg">
<div
v-show="newPhoto.files || newPhoto.url"
class="row q-gutter-lg items-center"
>
<QIcon
name="rotate_left"
size="sm"
color="primary"
class="cursor-pointer"
@click="rotateLeft()"
>
<!-- <QTooltip class="no-pointer-events">
{{ t('Rotate left') }}
</QTooltip> -->
</QIcon>
<div>
<div ref="photoContainerRef" />
</div>
<QIcon
name="rotate_right"
size="sm"
color="primary"
class="cursor-pointer"
@click="rotateRight()"
>
<!-- <QTooltip class="no-pointer-events">
{{ t('Rotate right') }}
</QTooltip> -->
</QIcon>
</div>
<div class="column">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QOptionGroup
:options="uploadMethodsOptions"
type="radio"
v-model="uploadMethodSelected"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QFile
v-if="uploadMethodSelected === 'computer'"
ref="inputFileRef"
:label="t('File')"
:multiple="false"
v-model="newPhoto.files"
@update:model-value="updatePhotoPreview($event)"
:accept="allowedContentTypes"
class="required cursor-pointer"
>
<template #append>
<QIcon
name="vn:attach"
class="cursor-pointer q-mr-sm"
@click="openInputFile()"
>
<!-- <QTooltip>{{ t('Select a file') }}</QTooltip> -->
</QIcon>
<QIcon name="info" class="cursor-pointer">
<QTooltip>{{
t(
'components.editPictureForm.allowedFilesText',
{
allowedContentTypes:
allowedContentTypes,
}
)
}}</QTooltip>
</QIcon>
</template>
</QFile>
<VnInput
v-if="uploadMethodSelected === 'URL'"
v-model="newPhoto.url"
@update:model-value="updatePhotoPreview($event)"
placeholder="https://"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Orientation')"
:options="viewportTypes"
hide-selected
option-label="description"
v-model="viewportSelection"
/>
</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>
</div>
</QCard>
</QForm>
</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>
<i18n>
es:
Edit photo: Editar foto
Select from computer: Seleccionar desde ordenador
Import from external URL: Importar desde URL externa
Vertical: Vertical
Normal: Normal
Panoramic: Panorámica
Orientation: Orientación
File: Fichero
This photo provider doesn't allow remote downloads: Este proveedor de fotos no permite descargas remotas
Rotate left: Girar a la izquierda
Rotate right: Girar a la derecha
Select an image: Selecciona una imagen
</i18n>

1
src/components/EditTableCellValueForm.vue
View File

@ -50,7 +50,6 @@ const submitData = async () => {
try {
isLoading.value = true;
const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
console.log('submit:: ');
const payload = {
field: formData.field,
newValue: formData.newValue,

3
src/components/FetchData.vue
View File

@ -45,7 +45,7 @@ onMounted(async () => {
async function fetch(fetchFilter = {}) {
try {
const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
if ($props.where) filter.where = $props.where;
if ($props.where && !fetchFilter.where) filter.where = $props.where;
if ($props.sortBy) filter.order = $props.sortBy;
if ($props.limit) filter.limit = $props.limit;
@ -54,6 +54,7 @@ async function fetch(fetchFilter = {}) {
});
emit('onFetch', data);
return data;
} catch (e) {
//
}

1
src/components/FilterTravelForm.vue
View File

@ -119,7 +119,6 @@ const closeForm = () => {
};
const selectTravel = ({ id }) => {
console.log('row:: ', id);
emit('travelSelected', id);
closeForm();
};

7
src/components/FormModel.vue
View File

@ -186,13 +186,6 @@ watch(formUrl, async () => {
});
</script>
<template>
<QBanner
v-if="$props.observeFormChanges && hasChanges"
class="text-white bg-warning full-width"
>
<QIcon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span>
</QBanner>
<div class="column items-center full-width">
<QForm
v-if="formData"

81
src/components/RegularizeStockForm.vue Normal file
View File

@ -0,0 +1,81 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
const props = defineProps({
itemFk: {
type: Number,
default: null,
},
warehouseFk: {
type: Boolean,
default: null,
},
});
const { t } = useI18n();
const regularizeFormData = reactive({
itemFk: props.itemFk,
warehouseFk: props.warehouseFk,
quantity: null,
});
const warehousesOptions = ref([]);
const onDataSaved = (data) => {
emit('onDataSaved', data);
};
</script>
<template>
<FetchData
url="Warehouses"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<FormModelPopup
url-create="Items/regularize"
model="Items"
:title="t('Regularize stock')"
:form-initial-data="regularizeFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('Type the visible quantity')"
v-model.number="data.quantity"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Warehouse')"
v-model="data.warehouseFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
/>
</div>
</VnRow>
</template>
</FormModelPopup>
</template>
<i18n>
es:
Warehouse: Almacén
Type the visible quantity: Introduce la cantidad visible
Regularize stock: Regularizar stock
</i18n>

36
src/components/UserPanel.vue
View File

@ -1,19 +1,19 @@
<script setup>
import { onMounted, computed } from 'vue';
import { Dark, Quasar, useQuasar } from 'quasar';
import { Dark, Quasar } 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";
import { localeEquivalence } from 'src/i18n/index';
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
const quasar = useQuasar();
import { useClipboard } from 'src/composables/useClipboard';
const { copyText } = useClipboard();
const userLocale = computed({
get() {
return locale.value;
@ -21,14 +21,14 @@ const userLocale = computed({
set(value) {
locale.value = value;
value = localeEquivalence[value] ?? value
value = localeEquivalence[value] ?? value;
try {
/* @vite-ignore */
import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
Quasar.lang.set(lang.default);
});
} catch (error) {
} catch (error) {
//
}
},
@ -81,12 +81,8 @@ function logout() {
router.push('/login');
}
function copyUserToken(){
navigator.clipboard.writeText(session.getToken());
quasar.notify({
type: 'positive',
message: t('components.userPanel.copyToken'),
});
function copyUserToken() {
copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
}
</script>
@ -129,8 +125,12 @@ function copyUserToken(){
<div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong>
</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
</div>
<div
class="text-subtitle3 text-grey-7 q-mb-xs copyText"
@click="copyUserToken()"
>
@{{ user.name }}
</div>
<QBtn
id="logout"
@ -152,9 +152,9 @@ function copyUserToken(){
width: 150px;
}
.copyUserToken {
&:hover{
cursor: alias;
}
.copyText {
&:hover {
cursor: alias;
}
}
</style>

137
src/components/common/VnLocation.vue Normal file
View File

@ -0,0 +1,137 @@
<script setup>
import { ref, toRefs, computed, watch, onMounted } from 'vue';
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectCreate from 'components/common/VnSelectCreate.vue';
import FetchData from 'components/FetchData.vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const postcodesOptions = ref([]);
const postcodesRef = ref(null);
const $props = defineProps({
modelValue: {
type: [String, Number, Object],
default: null,
},
options: {
type: Array,
default: () => [],
},
optionLabel: {
type: String,
default: '',
},
optionValue: {
type: String,
default: '',
},
filterOptions: {
type: Array,
default: () => [],
},
isClearable: {
type: Boolean,
default: true,
},
defaultFilter: {
type: Boolean,
default: true,
},
});
const { options } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
onMounted(() => {
locationFilter()
});
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
watch(options, (newValue) => {
setOptions(newValue);
});
function showLabel(data) {
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
}
function locationFilter(search) {
let where = { search };
postcodesRef.value.fetch({filter:{ where}, limit: 30});
}
function handleFetch( data) {
postcodesOptions.value = data;
}
</script>
<template>
<FetchData
ref="postcodesRef"
url="Postcodes/filter"
@on-fetch="(data) =>handleFetch(data)"
/>
<VnSelectCreate
v-if="postcodesRef"
v-model="value"
:options="postcodesOptions"
:label="t('Location')"
:option-label="showLabel"
:placeholder="t('search_by_postalcode')"
@input-value="locationFilter"
:default-filter="false"
:input-debounce="300"
:class="{ required: $attrs.required }"
v-bind="$attrs"
emit-value
map-options
use-input
clearable
hide-selected
fill-input
>
<template #form>
<CreateNewPostcode @on-data-saved="locationFilter()" />
</template>
<template #option="{itemProps, opt}">
<QItem v-bind="itemProps">
<QItemSection v-if="opt">
<QItemLabel>{{ opt.code }}</QItemLabel>
<QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</template>
<style lang="scss" scoped>
.add-icon {
cursor: pointer;
background-color: $primary;
border-radius: 50px;
}
</style>
<i18n>
en:
search_by_postalcode: Search by postalcode, town, province or country
es:
Location: Ubicación
search_by_postalcode: Buscar por código postal, ciudad o país
</i18n>

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

@ -168,17 +168,17 @@ function getLogTree(data) {
let originLog = null;
let userLog = null;
let modelLog = null;
let prevLog;
let nLogs;
data.forEach((log) => {
for (let i = 0; i < data.length; i++) {
let log = data[i];
let prevLog = i > 0 ? data[i - 1] : null;
const locale = validations[log.changedModel]?.locale || {};
// Origin
const originChanged = !prevLog || log.originFk != prevLog.originFk;
if (originChanged) {
logs.push((originLog = { originFk: log.originFk, logs: [] }));
prevLog = log;
}
// User
const userChanged = originChanged || log.userFk != prevLog.userFk;
@ -197,6 +197,7 @@ function getLogTree(data) {
log.changedModel != prevLog.changedModel ||
log.changedModelId != prevLog.changedModelId ||
nLogs >= 6;
if (modelChanged) {
userLog.logs.push(
(modelLog = {
@ -221,7 +222,7 @@ function getLogTree(data) {
propNames = [...new Set(propNames)];
log.props = parseProps(propNames, locale, vals, olds);
});
}
return logs;
}
@ -320,7 +321,6 @@ function selectFilter(type, dateType) {
}
if (type === 'action' && selectedFilters.value.changedModel === null) {
selectedFilters.value.changedModel = undefined;
reload = false;
}
if (type === 'userRadio') {
selectedFilters.value.userFk = userRadio.value;
@ -415,18 +415,19 @@ setLogTree();
<div class="line bg-grey"></div>
</QItem>
<div
class="user-log q-mb-sm row"
class="user-log q-mb-sm"
v-for="(userLog, userIndex) in originLog.logs"
:key="userIndex"
>
<div class="timeline">
<div class="user-avatar">
<VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
<VnUserLink :worker-id="userLog.user.id">
<template #link>
<VnAvatar
:class="{ 'cursor-pointer': userLog.user.id }"
:worker-id="userLog.user.id"
:title="userLog.user.nickname"
size="lg"
/>
</template>
</VnUserLink>
@ -663,9 +664,9 @@ setLogTree();
:label="t('globals.entity')"
v-model="selectedFilters.changedModel"
option-label="locale"
option-value="value"
:options="actions"
@update:model-value="selectFilter('action')"
@clear="() => selectFilter('action')"
hide-selected
/>
</QItem>
@ -823,14 +824,30 @@ setLogTree();
.q-item {
min-height: 0px;
}
.q-menu {
display: block;
& > .loading {
display: flex;
justify-content: center;
}
& > .q-card {
min-width: 180px;
max-width: 400px;
& > .header {
color: $dark;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.origin-log {
&:first-child > .origin-info {
margin-top: 0;
}
& > .origin-info {
width: 100%;
max-width: 42em;
margin-top: 28px;
gap: 6px;
@ -847,14 +864,15 @@ setLogTree();
}
}
.user-log {
display: flex;
width: 100%;
max-width: 40em;
& > .timeline {
position: relative;
padding-right: 5px;
width: 50px;
padding-right: 1px;
width: 38px;
min-width: 38px;
flex-grow: auto;
& > .arrow {
height: 8px;
width: 8px;
@ -874,7 +892,7 @@ setLogTree();
position: absolute;
background-color: $primary;
width: 2px;
left: 23px;
left: 19px;
z-index: -1;
top: 0;
bottom: -8px;
@ -893,6 +911,7 @@ setLogTree();
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-height: 22px;
.model-value {
font-style: italic;
}
@ -984,25 +1003,6 @@ setLogTree();
}
}
}
.q-menu {
display: block;
& > .loading {
display: flex;
justify-content: center;
}
& > .q-card {
min-width: 180px;
max-width: 400px;
& > .header {
color: $dark;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
</style>
<i18n>
en:

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

@ -1,4 +1,6 @@
<script setup>
import FetchData from 'src/components/FetchData.vue';
import { onMounted } from 'vue';
import { ref, toRefs, computed, watch } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
@ -12,11 +14,19 @@ const $props = defineProps({
default: () => [],
},
optionLabel: {
type: [String],
default: '',
},
optionValue: {
type: String,
default: '',
},
url: {
type: String,
default: '',
},
filterOptions: {
type: Array,
type: [Array],
default: () => [],
},
isClearable: {
@ -27,12 +37,29 @@ const $props = defineProps({
type: Boolean,
default: true,
},
fields: {
type: Array,
default: null,
},
where: {
type: Object,
default: null,
},
sortBy: {
type: String,
default: null,
},
limit: {
type: Number,
default: 30,
},
});
const { optionLabel, options } = toRefs($props);
const { optionLabel, optionValue, options, modelValue } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
const dataRef = ref();
const value = computed({
get() {
@ -47,8 +74,12 @@ function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
const filter = (val, options) => {
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
});
async function filter(val, options) {
const search = val.toString().toLowerCase();
if (!search) return options;
@ -66,13 +97,29 @@ const filter = (val, options) => {
return id == search || optionLabel.includes(search);
});
};
}
const filterHandler = (val, update) => {
async function fetchFilter(val) {
if (!$props.url || !dataRef.value) return;
const { fields, sortBy, limit } = $props;
let key = optionLabel.value;
if (new RegExp(/\d/g).test(val)) key = optionValue.value;
const where = { [key]: { like: `%${val}%` } };
return dataRef.value.fetch({ fields, where, order: sortBy, limit });
}
async function filterHandler(val, update) {
update(
() => {
if ($props.defaultFilter)
myOptions.value = filter(val, myOptionsOriginal.value);
async () => {
if (!$props.defaultFilter) return;
if ($props.url) {
myOptions.value = await fetchFilter(val);
return;
}
myOptions.value = await filter(val, myOptionsOriginal.value);
},
(ref) => {
if (val !== '' && ref.options.length > 0) {
@ -81,18 +128,33 @@ const filterHandler = (val, update) => {
}
}
);
};
}
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue);
});
</script>
<template>
<FetchData
ref="dataRef"
:url="$props.url"
@on-fetch="(data) => setOptions(data)"
:where="where || { [optionValue]: value }"
:limit="limit"
:order-by="orderBy"
:fields="fields"
/>
<QSelect
v-model="value"
:options="myOptions"
:option-label="optionLabel"
:option-value="optionValue"
v-bind="$attrs"
emit-value
map-options

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

@ -49,7 +49,6 @@ onMounted(async () => {
() => $props.url,
async (newUrl, lastUrl) => {
if (newUrl == lastUrl) return;
entity.value = null;
await getData();
}
);
@ -62,7 +61,6 @@ async function getData() {
skip: 0,
});
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
entity.value = data;
emit('onFetch', data);
}
const emit = defineEmits(['onFetch']);
@ -81,6 +79,7 @@ function viewSummary(id) {
<div class="descriptor">
<template v-if="entity">
<div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" />
<QBtn
@click.stop="viewSummary(entity.id)"
round
@ -118,7 +117,7 @@ function viewSummary(id) {
icon="more_vert"
round
size="md"
v-if="slots.menu"
:class="{ invisible: !slots.menu }"
>
<QTooltip>
{{ t('components.cardDescriptor.moreOptions') }}

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

@ -1,19 +1,37 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import { useColor } from 'src/composables/useColor';
const $props = defineProps({
workerId: { type: Number, required: true },
description: { type: String, default: null },
size: { type: String, default: null },
title: { type: String, default: null },
});
const session = useSession();
const token = session.getToken();
const { t } = useI18n();
const title = computed(() => $props.title ?? t('globals.system'));
const showLetter = ref(false);
</script>
<template>
<div class="avatar-picture column items-center">
<QAvatar color="orange">
<QAvatar
:style="{
backgroundColor: useColor(title),
}"
:size="$props.size"
:title="title"
>
<template v-if="showLetter">{{ title.charAt(0) }}</template>
<QImg
v-else
:src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
spinner-color="white"
@error="showLetter = true"
/>
</QAvatar>
<div class="description">

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

@ -64,10 +64,12 @@ onMounted(() => {
});
const isLoading = ref(false);
async function search() {
isLoading.value = true;
const params = { ...userParams.value };
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
const { params: newParams } = await arrayData.addFilter({ params });
userParams.value = newParams;
@ -89,7 +91,9 @@ async function reload() {
async function clearFilters() {
isLoading.value = true;
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
props.unremovableParams.includes(param)

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

@ -2,6 +2,7 @@
import { computed } from 'vue';
import { dashIfEmpty } from 'src/filters';
import { useClipboard } from 'src/composables/useClipboard';
const $props = defineProps({
label: { type: String, default: null },
value: {
@ -10,8 +11,19 @@ const $props = defineProps({
},
info: { type: String, default: null },
dash: { type: Boolean, default: true },
copy: { type: Boolean, default: false },
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
const { copyText } = useClipboard();
function copyValueText() {
copyText($props.value, {
component: {
copyValue: $props.value,
},
});
}
</script>
<style scoped>
.label,
@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
</QTooltip>
</QIcon>
</div>
<div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
<QIcon name="Content_Copy" color="primary" />
</div>
</div>
</template>
<style lang="scss" scoped>
.copy {
&:hover {
cursor: pointer;
}
}
</style>

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

@ -104,6 +104,8 @@ async function paginate() {
await arrayData.loadMore();
if (!arrayData.hasMoreData.value) {
if (store.userParamsChanged) arrayData.hasMoreData.value = true;
store.userParamsChanged = false;
isLoading.value = false;
return;
}
@ -129,9 +131,9 @@ async function onLoad(...params) {
pagination.value.page = pagination.value.page + 1;
await paginate();
const endOfPages = !arrayData.hasMoreData.value;
done(endOfPages);
let isDone = false;
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
done(isDone);
}
</script>
@ -172,7 +174,7 @@ async function onLoad(...params) {
v-if="store.data"
@load="onLoad"
:offset="offset"
class="full-width full-height overflow-auto"
class="full-width full-height"
>
<slot name="body" :rows="store.data"></slot>
<div v-if="isLoading" class="info-row q-pa-md text-center">

13
src/components/ui/VnSearchbar.vue
View File

@ -87,15 +87,10 @@ async function search() {
});
if (!props.redirect) return;
const rows = store.data;
const module = route.matched[1];
if (rows.length === 1) {
const [firstRow] = rows;
await router.push({ path: `${module.path}/${firstRow.id}` });
} else if (route.matched.length > 3) {
await router.push({ path: `/${module.path}` });
arrayData.updateStateParams();
}
const { matched: matches } = route;
const { path } = matches[matches.length-1];
const newRoute = path.replace(':id', searchText.value);
await router.push(newRoute);
}
</script>

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

@ -1,6 +1,7 @@
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted } from 'vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
onMounted(() => {
@ -13,9 +14,25 @@ onUnmounted(() => {
</script>
<template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QToolbar class="bg-vn-dark justify-end sticky">
<slot name="st-data">
<div id="st-data"></div>
</slot>
<QSpace />
<div id="st-actions"></div>
<slot name="st-actions">
<div id="st-actions"></div>
</slot>
</QToolbar>
</template>
<style lang="scss" scoped>
.sticky {
position: sticky;
top: 61px;
z-index: 1;
}
@media (max-width: $breakpoint-sm) {
.sticky {
top: 90px;
}
}
</style>

2
src/composables/tMobile.js
View File

@ -4,5 +4,5 @@ import { useI18n } from 'vue-i18n';
export function tMobile(...args) {
const quasar = useQuasar();
const { t } = useI18n();
if (!quasar.platform.is.mobile) return t(...args);
if (!quasar.screen.xs) return t(...args);
}

3
src/composables/useArrayData.js
View File

@ -142,7 +142,8 @@ export function useArrayData(key, userOptions) {
userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams;
store.skip = 0;
store.filter.skip = 0;
await fetch({ append: false });
return { filter, params };
}

17
src/composables/useClipboard.js Normal file
View File

@ -0,0 +1,17 @@
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
export function useClipboard() {
const quasar = useQuasar();
const { t } = useI18n();
/**
*
* @param {String} value Value to send to clipboardAPI
* @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
*/
function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
navigator.clipboard.writeText(value);
quasar.notify({ type: 'positive', message: t(label, component) });
}
return { copyText };
}

2
src/composables/useState.js
View File

@ -25,6 +25,7 @@ export function useState() {
lang: user.value.lang,
darkMode: user.value.darkMode,
companyFk: user.value.companyFk,
warehouseFk: user.value.warehouseFk,
};
});
}
@ -37,6 +38,7 @@ export function useState() {
lang: data.lang,
darkMode: data.darkMode,
companyFk: data.companyFk,
warehouseFk: data.warehouseFk,
};
}

1
src/composables/useUserConfig.js
View File

@ -12,6 +12,7 @@ export function useUserConfig() {
const user = state.getUser().value;
user.darkMode = data.darkMode;
user.companyFk = data.companyFk;
user.warehouseFk = data.warehouseFk;
state.setUser(user);
return data;

4
src/css/app.scss
View File

@ -52,6 +52,10 @@ body.body--dark {
color: var(--vn-text);
}
.color-vn-white {
color: $white;
}
.vn-card {
background-color: var(--vn-gray);
color: var(--vn-text);

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

@ -1098,6 +1098,25 @@ export default {
totalEntries: 'Total entries',
},
},
item: {
pageTitles: {
items: 'Items',
list: 'List',
diary: 'Diary',
tags: 'Tags',
},
descriptor: {
item: 'Item',
buyer: 'Buyer',
color: 'Color',
category: 'Category',
stems: 'Stems',
visible: 'Visible',
available: 'Available',
warehouseText: 'Calculated on the warehouse of { warehouseName }',
itemDiary: 'Item diary',
},
},
components: {
topbar: {},
userPanel: {
@ -1121,5 +1140,12 @@ export default {
addToPinned: 'Add to pinned',
removeFromPinned: 'Remove from pinned',
},
editPictureForm: {
allowedFilesText: 'Allowed file types: { allowedContentTypes }',
},
VnLv: {
copyText: '{copyValue} has been copied to the clipboard',
},
iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
},
};

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

@ -1098,6 +1098,25 @@ export default {
totalEntries: 'Ent. totales',
},
},
item: {
pageTitles: {
items: 'Artículos',
list: 'Listado',
diary: 'Histórico',
tags: 'Etiquetas',
},
descriptor: {
item: 'Artículo',
buyer: 'Comprador',
color: 'Color',
category: 'Categoría',
stems: 'Tallos',
visible: 'Visible',
available: 'Disponible',
warehouseText: 'Calculado sobre el almacén de { warehouseName }',
itemDiary: 'Registro de compra-venta',
},
},
components: {
topbar: {},
userPanel: {
@ -1121,5 +1140,12 @@ export default {
addToPinned: 'Añadir a fijados',
removeFromPinned: 'Eliminar de fijados',
},
editPictureForm: {
allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
},
VnLv: {
copyText: '{copyValue} se ha copiado al portapepeles',
},
iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
},
};

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

@ -37,6 +37,7 @@ const marker_labels = [
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
];
const multiplicatorValue = ref();
const columns = computed(() => [
{
@ -134,17 +135,7 @@ async function regularizeClaim() {
message: t('globals.dataSaved'),
type: 'positive',
});
if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('confirmGreuges'),
message: t('confirmGreugesMessage'),
},
})
.onOk(async () => await onUpdateGreugeAccept());
}
await onUpdateGreugeAccept();
}
async function onUpdateGreugeAccept() {
@ -153,9 +144,9 @@ async function onUpdateGreugeAccept() {
filter: { where: { code: 'freightPickUp' } },
})
).data.id;
const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
.freightPickUpPrice;
const freightPickUpPrice =
(await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
multiplicatorValue.value;
await axios.post(`Greuges`, {
clientFk: claim.value.clientFk,
description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
@ -226,10 +217,10 @@ async function importToNewRefundTicket() {
show-if-above
v-if="claim"
>
<QCard class="totalClaim vn-card q-my-md q-pa-sm">
<QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
{{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
</QCard>
<QCard class="vn-card q-mb-md q-pa-sm">
<QCard class="q-mb-md q-pa-sm no-box-shadow">
<QItem class="justify-between">
<QItemLabel class="slider-container">
<p class="text-primary">
@ -250,13 +241,31 @@ async function importToNewRefundTicket() {
</QItemLabel>
</QItem>
</QCard>
<QItemLabel class="mana q-mb-md">
<QCheckbox
v-model="claim.isChargedToMana"
@update:model-value="(value) => save({ isChargedToMana: value })"
<QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
<QItemLabel class="mana q-mb-md">
<QCheckbox
v-model="claim.isChargedToMana"
@update:model-value="(value) => save({ isChargedToMana: value })"
/>
<span>{{ t('mana') }}</span>
</QItemLabel>
</QCard>
<QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
<QInput
:disable="
!(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
"
:label="t('confirmGreuges')"
class="q-field__native text-grey-2"
type="number"
placeholder="0"
id="multiplicatorValue"
name="multiplicatorValue"
min="0"
max="50"
v-model="multiplicatorValue"
/>
<span>{{ t('mana') }}</span>
</QItemLabel>
</QCard>
</QDrawer>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
<CrudModel
@ -494,4 +503,5 @@ es:
Id item: Id artículo
confirmGreuges: ¿Desea insertar greuges?
confirmGreugesMessage: Insertar greuges en la ficha del cliente
Apply Greuges: Aplicar Greuges
</i18n>

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

@ -1,27 +1,13 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import { getUrl } from 'composables/getUrl';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
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';
const stateStore = useStateStore();
const { t } = useI18n();
const route = useRoute();
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const entityId = computed(() => {
return $props.id || route.params.id;
});
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">

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

@ -2,7 +2,7 @@
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import { toDate, toPercentage } from 'src/filters';
import { useState } from 'src/composables/useState';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
@ -32,7 +32,16 @@ const filter = {
{
relation: 'client',
scope: {
include: { relation: 'salesPersonUser' },
include: [
{ relation: 'salesPersonUser' },
{
relation: 'claimsRatio',
scope: {
fields: ['claimingRate'],
limit: 1,
},
},
],
},
},
{
@ -135,6 +144,10 @@ const setData = (entity) => {
:value="entity.ticket?.address?.province?.name"
/>
<VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
<VnLv
:label="t('claimRate')"
:value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
/>
</template>
<template #actions="{ entity }">
<QCardActions>
@ -163,3 +176,9 @@ const setData = (entity) => {
margin-top: 0;
}
</style>
<i18n>
en:
claimRate: Claming rate
es:
claimRate: Ratio de reclamación
</i18n>

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

@ -4,12 +4,11 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import VnDiscount from 'components/common/vnDiscount.vue';
import ClaimLinesImport from './ClaimLinesImport.vue';
@ -158,23 +157,21 @@ function showImportDialog() {
</script>
<template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<QToolbar>
<div class="row q-gutter-md">
<div>
{{ t('Amount') }}
<QChip :dense="$q.screen.lt.sm">
{{ toCurrency(amount) }}
</QChip>
</div>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
<div class="row q-gutter-md">
<div>
{{ t('Amount') }}
<QChip :dense="$q.screen.lt.sm">
{{ toCurrency(amount) }}
</QChip>
</div>
</QToolbar>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div>
</Teleport>
<FetchData

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

@ -30,7 +30,7 @@ const body = {
</script>
<template>
<div class="column items-center">
<VnNotes
<VnNotes style="overflow-y: scroll;"
:add-note="$props.addNote"
:id="id"
url="claimObservations"

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

@ -87,20 +87,22 @@ function viewSummary(id) {
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('claim.list.customer')" @click.stop>
<VnLv :label="t('claim.list.customer')">
<template #value>
<span class="link">
<span class="link" @click.stop>
{{ row.clientName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnLv>
<VnLv :label="t('claim.list.assignedTo')" @click.stop>
<VnLv :label="t('claim.list.assignedTo')">
<template #value>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv

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

@ -18,18 +18,28 @@ const route = useRoute();
const payMethods = ref([]);
const bankEntitiesOptions = ref([]);
const bankEntitiesRef = ref(null);
onMounted(() => getBankEntities());
const filter = {
fields: ['id', 'bic', 'name'],
order: 'bic ASC',
limit: 30,
};
const getBankEntities = async () => {
const filter = { fields: ['id', 'bic', 'name'], order: 'bic ASC', limit: 30 };
const { data } = await axios.get('BankEntities', { filter });
bankEntitiesOptions.value = data;
const getBankEntities = () => {
bankEntitiesRef.value.fetch();
};
</script>
<template>
<fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
<fetch-data
ref="bankEntitiesRef"
@on-fetch="(data) => (bankEntitiesOptions = data)"
:filter="filter"
auto-load
url="BankEntities"
/>
<FormModel
:url-update="`Clients/${route.params.id}`"
@ -60,7 +70,13 @@ const getBankEntities = async () => {
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput :label="t('IBAN')" v-model="data.iban" />
<VnInput :label="t('IBAN')" v-model="data.iban">
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
<div class="col">
<VnSelectDialog

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

@ -38,7 +38,7 @@ const balanceDue = computed(() => {
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
const claimRate = computed(() => {
return customer.value.claimsRatio.claimingRate * 100;
return customer.value.claimsRatio.claimingRate;
});
const priceIncreasingRate = computed(() => {
@ -81,7 +81,7 @@ const creditWarning = computed(() => {
<VnLinkPhone :phone-number="entity.mobile" />
</template>
</VnLv>
<VnLv :label="t('customer.summary.email')" :value="entity.email" />
<VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
<VnLv
:label="t('customer.summary.salesPerson')"
:value="entity?.salesPersonUser?.name"

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

@ -2,12 +2,11 @@
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
@ -29,23 +28,17 @@ const newClientForm = reactive({
isEqualizated: false,
});
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const workersOptions = ref([]);
const businessTypesOptions = 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;
};
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
data.postcode = code;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
</script>
<template>
@ -54,33 +47,11 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
auto-load
url="Workers/search?departmentCodes"
/>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FetchData
@on-fetch="(data) => (businessTypesOptions = data)"
auto-load
url="BusinessTypes"
/>
<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"
/>
<QPage>
<VnSubToolbar />
<FormModel
@ -139,96 +110,19 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectDialog
v-model="data.postcode"
:label="t('Postcode')"
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
option-label="code"
option-value="code"
hide-selected
v-model="data.location"
@update:model-value="
(location) => handleLocation(data, location)
"
>
<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>
</VnSelectDialog>
</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('Country')"
:options="countriesOptions"
hide-selected
option-label="country"
option-value="id"
v-model="data.countryFk"
/>
</VnLocation>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput v-model="data.userName" :label="t('Web user')" />

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

@ -12,6 +12,7 @@ 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
const { t } = useI18n();
@ -206,8 +207,8 @@ const refreshData = () => {
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data" class="row">
<VnSubToolbar class="bg-vn-dark">
<template #st-data>
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
<div class="flex items-center q-ml-lg">
<QBtn
@ -217,8 +218,8 @@ const refreshData = () => {
@click.stop="viewAddObservation(selected)"
/>
</div>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<QTable

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

@ -9,6 +9,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
@ -499,9 +500,8 @@ const selectSalesPersonId = (id) => {
/>
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data">
<VnSubToolbar>
<template #st-actions>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="clientsDetail"
@ -510,10 +510,8 @@ const selectSalesPersonId = (id) => {
visibleColumns = ['customerStatus', ...$event, 'actions']
"
/>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<QTable

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

@ -44,7 +44,6 @@ const setData = (entity) => {
};
const removeDepartment = () => {
console.log('entityId: ', entityId.value);
quasar
.dialog({
title: 'Are you sure you want to delete it?',
@ -90,17 +89,15 @@ const removeDepartment = () => {
</QItem>
</template>
<template #body="{ entity }">
<VnLv :label="t('department.chat')" :value="entity.chatName" dash />
<VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
<VnLv :label="t('department.chat')" :value="entity.chatName" />
<VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
<VnLv
:label="t('department.selfConsumptionCustomer')"
:value="entity.client?.name"
dash
/>
<VnLv
:label="t('department.bossDepartment')"
:value="entity.worker?.user?.name"
dash
/>
</template>
<template #actions>

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

@ -211,7 +211,6 @@ const columns = computed(() => [
const openEditTableCellDialog = () => {
editTableCellDialogRef.value.show();
console.log('open edit row form: ', rowsSelected.value);
};
const onEditCellDataSaved = async () => {

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

@ -4,11 +4,12 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useArrayData } from 'src/composables/useArrayData';
import { downloadFile } from 'src/composables/downloadFile';
import FetchData from 'src/components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'src/components/FetchData.vue';
import axios from 'axios';
const quasar = useQuasar();
@ -21,9 +22,6 @@ const arrayData = useArrayData('InvoiceIn');
const invoiceIn = computed(() => arrayData.store.data);
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([]);
@ -131,31 +129,13 @@ 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"
@on-fetch="(data) => (suppliers = data)"
/>
<FetchData
ref="currenciesRef"
url="Currencies"
:filter="{ fields: ['id', 'code'] }"
order="code"
sort-by="code"
@on-fetch="(data) => (currencies = data)"
auto-load
/>
@ -163,7 +143,7 @@ function supplierRefFilter(val) {
ref="companiesRef"
url="Companies"
:filter="{ fields: ['id', 'code'] }"
order="code"
sort-by="code"
@on-fetch="(data) => (companies = data)"
auto-load
/>
@ -171,7 +151,7 @@ function supplierRefFilter(val) {
ref="dmsTypesRef"
url="DmsTypes"
:filter="{ fields: ['id', 'name'] }"
order="name"
sort-by="name"
@on-fetch="(data) => (dmsTypes = data)"
auto-load
/>
@ -179,7 +159,7 @@ function supplierRefFilter(val) {
ref="warehousesRef"
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
order="name"
sort-by="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
@ -199,15 +179,13 @@ function supplierRefFilter(val) {
<div class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
v-if="suppliersRef"
:label="t('supplierFk')"
v-model="data.supplierFk"
:options="suppliers"
option-value="id"
option-label="nickname"
:input-debounce="100"
@input-value="supplierRefFilter"
:default-filter="false"
url="Suppliers"
:fields="['id', 'nickname']"
sort-by="nickname"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -418,7 +396,6 @@ function supplierRefFilter(val) {
<div class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
v-if="currenciesRef"
:label="t('Currency')"
v-model="data.currencyFk"
:options="currencies"

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

@ -76,7 +76,6 @@ function viewSummary(id) {
data-key="InvoiceInList"
url="InvoiceIns/filter"
order="issued DESC, id DESC"
auto-load
>
<template #body="{ rows }">
<CardList

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

@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const selectedCards = ref(new Map());
@ -129,8 +130,8 @@ const downloadCsv = () => {
url="InvoiceOuts/filter"
>
<template #body="{ rows }">
<QToolbar class="bg-vn-dark justify-end">
<div id="st-actions">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
@click="downloadCsv()"
class="q-mr-xl"
@ -178,8 +179,8 @@ const downloadCsv = () => {
:model-value="selectedCards.size === rows.length"
class="q-mr-md"
/>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<div class="flex flex-center q-pa-md">
<div class="vn-card-list">
<CardList

25
src/pages/Item/Card/ItemCard.vue Normal file
View File

@ -0,0 +1,25 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import ItemDescriptor from './ItemDescriptor.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<ItemDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>
</template>

316
src/pages/Item/Card/ItemDescriptor.vue Normal file
View File

@ -0,0 +1,316 @@
<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import RegularizeStockForm from 'components/RegularizeStockForm.vue';
import EditPictureForm from 'components/EditPictureForm.vue';
import { useState } from 'src/composables/useState';
import useCardDescription from 'src/composables/useCardDescription';
import { useSession } from 'src/composables/useSession';
import axios from 'axios';
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
summary: {
type: Object,
default: null,
},
dated: {
type: String,
default: null,
},
});
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const { getToken } = useSession();
const state = useState();
const user = state.getUser();
const entityId = computed(() => {
return $props.id || route.params.id;
});
const image = ref(null);
const regularizeStockFormDialog = ref(null);
const editPhotoFormDialog = ref(null);
const item = ref(null);
const available = ref(null);
const visible = ref(null);
const _warehouseFk = ref(null);
const warehouseText = ref(null);
const warehouseFk = computed({
get() {
return _warehouseFk.value;
},
set(val) {
_warehouseFk.value = val;
if (val) {
updateStock();
getWarehouseName(val);
}
},
});
const showWarehouseIconTooltip = ref(true);
const showEditPhotoForm = ref(false);
onMounted(async () => {
await getItemAvatar();
warehouseFk.value = user.value.warehouseFk;
});
const getItemAvatar = async () => {
const token = getToken();
const timeStamp = `timestamp=${Date.now()}`;
image.value = `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}&${timeStamp}`;
};
const data = ref(useCardDescription());
const setData = (entity) => {
if (!entity) return;
data.value = useCardDescription(entity.name, entity.id);
};
const getWarehouseName = async (warehouseFk) => {
try {
showWarehouseIconTooltip.value = false;
const filter = {
where: { id: warehouseFk },
};
const { data } = await axios.get('Warehouses/findOne', { filter });
warehouseText.value = t('item.descriptor.warehouseText', {
warehouseName: data.name,
});
showWarehouseIconTooltip.value = true;
} catch (err) {
console.error('Error finding warehouse');
}
};
const updateStock = async () => {
try {
available.value = null;
visible.value = null;
const params = {
warehouseFk: warehouseFk.value,
dated: $props.dated,
};
const { data } = await axios.get(`Items/${entityId.value}/getVisibleAvailable`, {
params,
});
available.value = data.available;
visible.value = data.visible;
} catch (err) {
console.error('Error updating stock');
}
};
const openRegularizeStockForm = () => {
regularizeStockFormDialog.value.show();
};
const toggleEditPictureForm = () => {
showEditPhotoForm.value = !showEditPhotoForm.value;
};
const cloneItem = async () => {
try {
const { data } = await axios.post(`Items/${entityId.value}/clone`);
router.push({ name: 'ItemTags', params: { id: data.id } });
} catch (err) {
console.error('Error cloning item');
}
};
const openCloneDialog = async () => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t("All it's properties will be copied"),
message: t('Do you want to clone this item?'),
},
})
.onOk(async () => {
await cloneItem();
});
};
</script>
<template>
<CardDescriptor
data-key="ItemData"
module="Item"
:title="data.title"
:subtitle="data.subtitle"
:summary="$props.summary"
:url="`Items/${entityId}/getCard`"
@on-fetch="
(data) => {
item = data;
setData(data);
}
"
>
<template #menu="{}">
<QItem v-ripple clickable @click="openRegularizeStockForm()">
<QItemSection>
{{ t('Regularize stock') }}
<QDialog ref="regularizeStockFormDialog">
<RegularizeStockForm
:item-fk="entityId"
:warehouse-fk="warehouseFk"
@on-data-saved="updateStock()"
/>
</QDialog>
</QItemSection>
</QItem>
<QItem v-ripple clickable @click="openCloneDialog()">
<QItemSection>
{{ t('Clone') }}
</QItemSection>
</QItem>
</template>
<template #before>
<div class="relative-position">
<QImg :src="image" spinner-color="primary" class="photo">
<template #error>
<div
class="absolute-full picture text-center q-pa-md flex flex-center"
>
<div>
<div
class="text-grey-5"
style="opacity: 0.4; font-size: 5vh"
>
<QIcon name="vn:item" />
</div>
<div class="text-grey-5" style="opacity: 0.4">
{{ t('item.descriptor.item') }}
</div>
</div>
</div>
</template>
</QImg>
<QBtn
color="primary"
size="lg"
round
class="edit-photo-btn"
@click="toggleEditPictureForm()"
>
<QIcon name="edit" size="sm" />
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
<EditPictureForm
collection="catalog"
:id="entityId"
@close-form="toggleEditPictureForm()"
@on-photo-uploaded="getItemAvatar()"
/>
</QDialog>
</QBtn>
</div>
<div
class="row justify-between items-center full-width bg-primary"
style="height: 54px"
>
<div class="col column items-center">
<span class="text-uppercase color-vn-white" style="font-size: 11px">
{{ t('item.descriptor.visible') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{
visible
}}</span>
</div>
<div
class="col column items-center separation-borders"
style="font-size: 11px"
>
<span class="text-uppercase color-vn-white">
{{ t('item.descriptor.available') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{
available
}}</span>
</div>
<div class="col column items-center justify-center">
<QIcon name="info" class="cursor-pointer color-vn-white" size="md">
<QTooltip>{{ warehouseText }}</QTooltip>
</QIcon>
</div>
</div>
</template>
<template #body="{ entity }">
<VnLv :label="t('item.descriptor.buyer')">
<template #value>
<span class="link">
{{ t('item.descriptor.buyer') }}
<WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
</span>
</template>
</VnLv>
<VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
<VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
<VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
</template>
<template #actions="{}">
<QCardActions class="row justify-center">
<QBtn
:to="{ name: 'ItemDiary' }"
size="md"
icon="vn:transaction"
color="primary"
>
<QTooltip>{{ t('item.descriptor.itemDiary') }}</QTooltip>
</QBtn>
</QCardActions>
</template>
</CardDescriptor>
</template>
<i18n>
es:
Regularize stock: Regularizar stock
Clone: Clonar
All it's properties will be copied: Todas sus propiedades serán copiadas
Do you want to clone this item?: ¿Desea clonar este artículo?
</i18n>
<style lang="scss" scoped>
.photo {
height: 256px;
}
.edit-photo-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
cursor: pointer;
}
.separation-borders {
border-left: 1px solid $white;
border-right: 1px solid $white;
}
</style>

26
src/pages/Item/Card/ItemDescriptorProxy.vue Normal file
View File

@ -0,0 +1,26 @@
<script setup>
import ItemDescriptor from './ItemDescriptor.vue';
import ItemSummaryDialog from './ItemSummaryDialog.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
dated: {
type: String,
default: null,
},
});
</script>
<template>
<QPopupProxy>
<ItemDescriptor
v-if="$props.id"
:id="$props.id"
:summary="ItemSummaryDialog"
:dated="dated"
/>
</QPopupProxy>
</template>

1
src/pages/Item/Card/ItemDiary.vue Normal file
View File

@ -0,0 +1 @@
<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>

1
src/pages/Item/Card/ItemSummary.vue Normal file
View File

@ -0,0 +1 @@
<template>Item summary</template>

5
src/pages/Item/Card/ItemSummaryDialog.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<QDialog
>Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
>
</template>

1
src/pages/Item/Card/ItemTags.vue Normal file
View File

@ -0,0 +1 @@
<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>

1
src/pages/Item/ItemList.vue Normal file
View File

@ -0,0 +1 @@
<template>Item list</template>

18
src/pages/Item/ItemMain.vue Normal file
View File

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

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

@ -1,10 +1,13 @@
<script setup>
import { useSession } from 'composables/useSession';
import VnLv from 'components/ui/VnLv.vue';
import { useI18n } from 'vue-i18n';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import toCurrency from '../../../filters/toCurrency';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnLv from 'components/ui/VnLv.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import { useSession } from 'composables/useSession';
import toCurrency from '../../../filters/toCurrency';
const DEFAULT_PRICE_KG = 0;
@ -42,7 +45,10 @@ const dialog = ref(null);
</div>
</div>
<div class="content">
<span class="link">{{ item.name }}</span>
<span class="link">
{{ item.name }}
<ItemDescriptorProxy :id="item.id" />
</span>
<p class="subName">{{ item.subName }}</p>
<template v-for="index in 4" :key="`tag-${index}`">
<VnLv
@ -51,13 +57,6 @@ const dialog = ref(null);
:value="item?.[`value${index + 4}`]"
/>
</template>
<QRating
:model-value="item.stars"
icon="star"
icon-selected="star"
color="primary"
readonly
/>
<div class="footer">
<div class="price">
<p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
@ -72,7 +71,8 @@ const dialog = ref(null);
</QIcon>
</div>
<p v-if="item.priceKg" class="price-kg">
{{ t('price-kg') }} {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
{{ t('price-kg') }}
{{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
</p>
</div>
</div>

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

@ -15,6 +15,7 @@ import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import { useQuasar } from 'quasar';
import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -228,8 +229,8 @@ function previewRoute(id) {
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
<QPage class="column items-center">
<QToolbar class="bg-vn-dark justify-end">
<div id="st-actions" class="q-pa-sm">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
icon="vn:clone"
color="primary"
@ -249,8 +250,8 @@ function previewRoute(id) {
>
<QTooltip>{{ t('Mark as served') }}</QTooltip>
</QBtn>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<div class="route-list">
<VnPaginate
:key="refreshKey"

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

@ -99,10 +99,15 @@ onMounted(() => {
class="row q-gutter-md q-mb-md"
>
<div class="col">
<VnInput
:label="t('supplier.accounts.iban')"
v-model="row.iban"
/>
<VnInput :label="t('supplier.accounts.iban')" v-model="row.iban">
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{
t('components.iban_tooltip')
}}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
<div class="col">
<VnSelectDialog
@ -135,7 +140,17 @@ onMounted(() => {
<VnInput
:label="t('supplier.accounts.beneficiary')"
v-model="row.beneficiary"
/>
>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip>{{
t(
'Name of the bank account holder if different from the provider'
)
}}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
<div class="col-1 row justify-center items-center">
<QIcon
@ -174,4 +189,5 @@ onMounted(() => {
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
Name of the bank account holder if different from the provider: Nombre del titular de la cuenta bancaria en caso de ser diferente del proveedor
</i18n>

7
src/pages/Supplier/Card/SupplierAddressesCreate.vue
View File

@ -147,8 +147,6 @@ onMounted(() => {
option-value="id"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('supplier.addresses.province')"
@ -160,21 +158,20 @@ onMounted(() => {
v-model="data.provinceFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<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>

7
src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
View File

@ -80,8 +80,6 @@ const onDataSaved = () => {
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.m3Price')"
@ -89,6 +87,8 @@ const onDataSaved = () => {
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.routePrice')"
@ -96,8 +96,6 @@ const onDataSaved = () => {
type="number"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('supplier.agencyTerms.minimumKm')"
@ -105,7 +103,6 @@ const onDataSaved = () => {
type="number"
/>
</div>
<div class="col" />
</VnRow>
</template>
</FormModel>

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

@ -48,6 +48,13 @@ const workersOptions = ref([]);
map-options
:rules="validate('supplier.workerFk')"
>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip>{{
t('Responsible for approving invoices')
}}</QTooltip>
</QIcon>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
@ -88,10 +95,14 @@ const workersOptions = ref([]);
type="textarea"
v-model="data.note"
fill-input
autogrow
/>
</div>
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Responsible for approving invoices: Responsable de aprobar las facturas
</i18n>

11
src/pages/Supplier/Card/SupplierBillingData.vue
View File

@ -13,6 +13,13 @@ const { t } = useI18n();
const paymethodsOptions = ref([]);
const payDemsOptions = ref([]);
const formatPayDems = (data) => {
payDemsOptions.value = data.map(({ id, payDem }) => ({
id: id,
payDem: payDem || '0',
}));
};
</script>
<template>
<FetchData
@ -20,7 +27,7 @@ const payDemsOptions = ref([]);
@on-fetch="(data) => (paymethodsOptions = data)"
auto-load
/>
<FetchData url="PayDems" @on-fetch="(data) => (payDemsOptions = data)" auto-load />
<FetchData url="PayDems" @on-fetch="(data) => formatPayDems(data)" auto-load />
<FormModel
:url="`Suppliers/${route.params.id}`"
:url-update="`Suppliers/${route.params.id}`"
@ -37,7 +44,6 @@ const payDemsOptions = ref([]);
option-value="id"
option-label="name"
hide-selected
map-options
:rules="validate('supplier.payMethodFk')"
/>
</div>
@ -49,7 +55,6 @@ const payDemsOptions = ref([]);
option-value="id"
option-label="payDem"
hide-selected
map-options
:rules="validate('supplier.payDemFk')"
/>
</div>

97
src/pages/Supplier/Card/SupplierConsumption.vue
View File

@ -7,8 +7,9 @@ import { useQuasar } from 'quasar';
import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import { toDate, toDateString } from 'src/filters';
import { toDate } from 'src/filters';
import { dashIfEmpty } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js';
@ -31,23 +32,26 @@ const arrayData = useArrayData('SupplierConsumption', {
const store = arrayData.store;
const userParams = computed(() => {
const minDate = Date.vnNew();
minDate.setHours(0, 0, 0, 0);
minDate.setMonth(minDate.getMonth() - 2);
const maxDate = Date.vnNew();
maxDate.setHours(23, 59, 59, 59);
return {
from: toDateString(minDate),
to: toDateString(maxDate),
const dateRanges = computed(() => {
const ranges = {
from: null,
to: null,
};
if (route.query && route.query.params) {
const params = JSON.parse(route.query.params);
if (params.from && params.to) {
ranges.from = params.from;
ranges.to = params.to;
}
}
return ranges;
});
const reportParams = computed(() => ({
recipientId: Number(route.params.id),
...userParams.value,
...dateRanges.value,
}));
async function getSupplierConsumptionData() {
@ -101,10 +105,8 @@ const sendCampaignMetricsEmail = ({ address }) => {
});
};
const calculateTotal = (buysArray) => {
if (!buysArray || !buysArray.length > 0) return;
return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
};
const calculateTotal = (buysArray = []) =>
buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
onMounted(async () => {
stateStore.rightDrawer = true;
@ -113,35 +115,31 @@ onMounted(async () => {
</script>
<template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data">
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="picture_as_pdf"
no-caps
class="q-mr-md"
@click="openReportPdf()"
>
<QTooltip>
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="email"
no-caps
@click="openSendEmailDialog()"
>
<QTooltip>
{{ t('Send to email') }}
</QTooltip>
</QBtn>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
<QBtn
:disabled="!dateRanges.from && !dateRanges.to"
color="primary"
icon-right="picture_as_pdf"
no-caps
class="q-mr-md"
@click="openReportPdf()"
>
<QTooltip>
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
<QBtn
:disabled="!dateRanges.from && !dateRanges.to"
color="primary"
icon-right="email"
no-caps
@click="openSendEmailDialog()"
>
<QTooltip>
{{ t('Send to email') }}
</QTooltip>
</QBtn>
</Teleport>
<QPage class="column items-center q-pa-md">
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@ -151,11 +149,11 @@ onMounted(async () => {
</QDrawer>
<QTable
:rows="rows"
hide-bottom
row-key="id"
hide-header
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('No results')"
>
<template #body="{ row }">
<QTr>
@ -171,7 +169,10 @@ onMounted(async () => {
<QTd no-hover>{{ row.invoiceNumber }}</QTd>
</QTr>
<QTr v-for="(buy, index) in row.buys" :key="index">
<QTd no-hover> {{ buy.itemName }}</QTd>
<QTd no-hover>
<QBtn flat color="blue" dense>{{ buy.itemName }}</QBtn>
<ItemDescriptorProxy :id="buy.itemFk" />
</QTd>
<QTd no-hover>
<span>{{ buy.subName }}</span>

17
src/pages/Supplier/Card/SupplierConsumptionFilter.vue
View File

@ -50,18 +50,14 @@ const itemCategoriesOptions = ref([]);
@on-fetch="(data) => (itemCategoriesOptions = data)"
auto-load
/>
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:unremovable-params="['supplierFk']"
>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnInput
@ -85,6 +81,7 @@ const itemCategoriesOptions = ref([]);
<VnSelectFilter
:label="t('params.buyerId')"
v-model="params.buyerId"
@update:model-value="searchFn()"
:options="buyersOptions"
option-value="id"
option-label="nickname"
@ -100,6 +97,7 @@ const itemCategoriesOptions = ref([]);
<VnSelectFilter
:label="t('params.typeId')"
v-model="params.typeId"
@update:model-value="searchFn()"
:options="itemTypesOptions"
option-value="id"
option-label="name"
@ -126,6 +124,7 @@ const itemCategoriesOptions = ref([]);
<VnSelectFilter
:label="t('params.categoryId')"
v-model="params.categoryId"
@update:model-value="searchFn()"
:options="itemCategoriesOptions"
option-value="id"
option-label="name"
@ -140,8 +139,9 @@ const itemCategoriesOptions = ref([]);
<QItemSection>
<VnInputDate
:label="t('params.from')"
is-outlined
v-model="params.from"
@update:model-value="searchFn()"
is-outlined
/>
</QItemSection>
</QItem>
@ -149,8 +149,9 @@ const itemCategoriesOptions = ref([]);
<QItemSection>
<VnInputDate
:label="t('params.to')"
is-outlined
v-model="params.to"
@update:model-value="searchFn()"
is-outlined
/>
</QItemSection>
</QItem>

111
src/pages/Supplier/Card/SupplierDescriptor.vue
View File

@ -1,10 +1,14 @@
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { toDateString } from 'src/filters';
import useCardDescription from 'src/composables/useCardDescription';
import { getUrl } from 'src/composables/getUrl';
const $props = defineProps({
id: {
@ -16,6 +20,7 @@ const $props = defineProps({
const route = useRoute();
const { t } = useI18n();
const url = ref();
const filter = {
fields: [
@ -53,6 +58,10 @@ const filter = {
],
};
onMounted(async () => {
url.value = await getUrl('');
});
const entityId = computed(() => {
return $props.id || route.params.id;
});
@ -61,6 +70,27 @@ const data = ref(useCardDescription());
const setData = (entity) => {
data.value = useCardDescription(entity.ref, entity.id);
};
const getEntryQueryParams = (supplier) => {
if (!supplier) return null;
const date = Date.vnNew();
date.setHours(0, 0, 0, 0);
const from = new Date(date.getTime());
from.setDate(from.getDate() - 10);
const to = new Date(date.getTime());
to.setDate(to.getDate() + 10);
const params = {
supplierFk: supplier.id,
from: toDateString(from),
to: toDateString(to),
};
return params;
};
</script>
<template>
@ -73,6 +103,22 @@ const setData = (entity) => {
@on-fetch="setData"
data-key="Supplier"
>
<template #header-extra-action>
<QBtn
round
flat
dense
size="md"
icon="vn:supplier"
color="white"
class="link"
:to="{ name: 'SupplierList' }"
>
<QTooltip>
{{ t('Go to module index') }}
</QTooltip>
</QBtn>
</template>
<template #body="{ entity }">
<VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
<VnLv label="Alias" :value="entity.nickname" />
@ -87,8 +133,69 @@ const setData = (entity) => {
<VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
<VnLv :label="t('supplier.summary.account')" :value="entity.account" />
</template>
<template #icons="{ entity }">
<QCardActions class="q-gutter-x-md">
<QIcon
v-if="!entity.isActive"
name="vn:disabled"
color="primary"
size="xs"
>
<QTooltip>{{ t('Inactive supplier') }}</QTooltip>
</QIcon>
<QIcon
v-if="!entity.isSerious"
name="vn:supplierfalse"
color="primary"
size="xs"
>
<QTooltip>{{ t('Unverified supplier') }}</QTooltip>
</QIcon>
</QCardActions>
</template>
<template #actions="{ entity }">
<QCardActions>
<QBtn
:to="{
name: 'EntryList',
query: { params: JSON.stringify(getEntryQueryParams(entity)) },
}"
size="md"
icon="vn:entry"
color="primary"
>
<QTooltip>{{ t('All entries with current supplier') }}</QTooltip>
</QBtn>
<QBtn
:to="{
name: 'CustomerCard',
params: { id: entity.client?.id },
}"
size="md"
icon="vn:Person"
color="primary"
>
<QTooltip>{{ t('Go to client') }}</QTooltip>
</QBtn>
<QBtn
:href="`${url}invoice-in/create?supplierFk=${entity.id}`"
size="md"
icon="vn:invoice-in-create"
color="primary"
>
<QTooltip>{{ t('Create invoiceIn') }}</QTooltip>
</QBtn>
</QCardActions>
</template>
</CardDescriptor>
</template>
<i18n>
<i18n>
es:
All entries with current supplier: Todas las entradas con proveedor actual
Go to client: Ir a cliente
Create invoiceIn: Crear factura recibida
Go to module index: Ir al índice del módulo
Inactive supplier: Proveedor inactivo
Unverified supplier: Proveedor no verificado
</i18n>

8
src/pages/Supplier/SupplierCreate.vue
View File

@ -1,6 +1,8 @@
<script setup>
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
@ -9,12 +11,17 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
const router = useRouter();
const { t } = useI18n();
const stateStore = useStateStore();
const newSupplierForm = reactive({
name: null,
});
const redirectToSupplierFiscalData = (_, responseData) => {
router.push({ name: 'SupplierFiscalData', params: { id: responseData.id } });
};
</script>
<template>
@ -34,6 +41,7 @@ const newSupplierForm = reactive({
url-create="Suppliers/newSupplier"
model="supplier"
:form-initial-data="newSupplierForm"
@on-data-saved="redirectToSupplierFiscalData"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">

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

@ -1,13 +1,16 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { useQuasar } from 'quasar';
import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
import SupplierListFilter from './SupplierListFilter.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
const router = useRouter();
@ -44,6 +47,11 @@ const viewSummary = (id) => {
</template>
<QPage class="column items-center q-pa-md">
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<SupplierListFilter data-key="SuppliersList" />
</QScrollArea>
</QDrawer>
<div class="vn-card-list">
<VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
<template #body="{ rows }">
@ -56,7 +64,7 @@ const viewSummary = (id) => {
>
<template #list-items>
<VnLv label="NIF/CIF" :value="row.nif" />
<VnLv label="Alias" :value="row.nickname" />
<VnLv label="Alias" :value="row.alias" />
<VnLv
:label="t('supplier.list.payMethod')"
:value="row.payMethod"

122
src/pages/Supplier/SupplierListFilter.vue Normal file
View File

@ -0,0 +1,122 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const { t } = useI18n();
const provincesOptions = ref([]);
const countriesOptions = ref([]);
</script>
<template>
<FetchData
url="Provinces"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
/>
<FetchData
url="countries"
:filter="{ fields: ['id', 'country'], order: 'country ASC', limit: 30 }"
@on-fetch="(data) => (countriesOptions = data)"
auto-load
/>
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:unremovable-params="['supplierFk']"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnInput
v-model="params.search"
:label="t('params.search')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.nickname"
:label="t('params.nickname')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput v-model="params.nif" :label="t('params.nif')" is-outlined />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.provinceFk')"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provincesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.countryFk')"
v-model="params.countryFk"
@update:model-value="searchFn()"
:options="countriesOptions"
option-value="id"
option-label="country"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
search: General search
nickname: Alias
nif: Tax number
provinceFk: Province
countryFk: Country
es:
params:
search: Búsqueda general
nickname: Alias
nif: NIF/CIF
provinceFk: Provincia
countryFk: País
</i18n>

6
src/pages/Ticket/Card/TicketSummary.vue
View File

@ -58,7 +58,7 @@ function formattedAddress() {
function isEditable() {
try {
return !ticket.value.ticketState.state.alertLevel;
return !ticket.value.ticketState?.state?.alertLevel;
} catch (e) {
console.error(e);
}
@ -153,8 +153,8 @@ async function changeState(value) {
</a>
<VnLv :label="t('ticket.summary.state')">
<template #value>
<QChip :color="ticket.ticketState.state.classColor ?? 'dark'">
{{ ticket.ticketState.state.name }}
<QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
{{ ticket.ticketState?.state?.name }}
</QChip>
</template>
</VnLv>

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

@ -17,6 +17,7 @@ import { useArrayData } from 'composables/useArrayData';
import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import travelService from 'src/services/travel.service';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const router = useRouter();
const stateStore = useStateStore();
@ -259,10 +260,8 @@ onMounted(async () => {
/>
</Teleport>
</template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
color="primary"
icon-right="picture_as_pdf"
@ -273,8 +272,8 @@ onMounted(async () => {
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ExtraCommunityFilter data-key="ExtraCommunity" />

2
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -101,7 +101,7 @@ const setData = (entity) => {
</template>
<template #body="{ entity }">
<VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
<VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
<VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
<VnLv
:label="t('worker.list.department')"
:value="entity.department ? entity.department.department.name : null"

2
src/pages/Worker/Card/WorkerSummary.vue
View File

@ -80,7 +80,7 @@ const filter = {
:label="t('worker.list.department')"
:value="worker.department.department.name"
/>
<VnLv :label="t('worker.list.email')" :value="worker.user.email" />
<VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
<VnLv :label="t('worker.summary.boss')" link>
<template #value>
<VnUserLink

127
src/pages/Worker/WorkerCreate.vue
View File

@ -10,6 +10,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
@ -21,14 +22,6 @@ const workerConfigFilter = {
field: ['payMethodFk'],
};
const provincesFilter = {
fields: ['id', 'name', 'countryFk'],
};
const townsFilter = {
fields: ['id', 'name', 'provinceFk'],
};
const newWorkerForm = ref({
companyFk: null,
payMethodFk: null,
@ -49,10 +42,6 @@ const newWorkerForm = ref({
bankEntityFk: null,
});
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const provincesOptions = ref([]);
const townsOptions = ref([]);
const companiesOptions = ref([]);
const workersOptions = ref([]);
const payMethodsOptions = ref([]);
@ -67,13 +56,13 @@ const onBankEntityCreated = (data) => {
bankEntitiesOptions.value.push(data);
};
const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postcode = code;
formData.provinceFk = provinceFk;
formData.city = townsOptions.value.find((town) => town.id === townFk).name;
};
function handleLocation(data, location) {
const { town, postcode: code, provinceFk, countryFk } = location ?? {};
data.postcode = code;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
onMounted(async () => {
const userInfo = await useUserConfig().fetch();
@ -88,25 +77,7 @@ onMounted(async () => {
:filter="workerConfigFilter"
auto-load
/>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FetchData
url="Provinces/location"
@on-fetch="(data) => (provincesOptions = data)"
:filter="provincesFilter"
auto-load
/>
<FetchData
ref="townsFetchDataRef"
url="Towns/location"
@on-fetch="(data) => (townsOptions = data)"
:filter="townsFilter"
auto-load
/>
<FetchData
url="Companies"
@on-fetch="(data) => (companiesOptions = data)"
@ -184,77 +155,19 @@ onMounted(async () => {
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectDialog
v-model="data.postcode"
:label="t('worker.create.postcode')"
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
option-label="code"
option-value="code"
hide-selected
v-model="data.location"
@update:model-value="
(location) => handleLocation(data, location)
"
>
<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>
</VnSelectDialog>
</div>
<div class="col">
<VnSelectFilter
:label="t('worker.create.province')"
v-model="data.provinceFk"
:options="provincesOptions"
option-value="id"
option-label="name"
hide-selected
:rules="validate('Worker.provinceFk')"
/>
</VnLocation>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('worker.create.city')"
v-model="data.city"
:options="townsOptions"
option-value="name"
option-label="name"
hide-selected
:rules="validate('Worker.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>
<div class="col">
<VnInput
:label="t('worker.create.street')"
@ -334,7 +247,15 @@ onMounted(async () => {
v-model="data.iban"
:label="t('worker.create.iban')"
:rules="validate('Worker.iban')"
/>
>
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{
t('components.iban_tooltip')
}}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
<VnSelectDialog
:label="t('worker.create.bankEntity')"

2
src/router/modules/index.js
View File

@ -1,3 +1,4 @@
import Item from './item';
import Customer from './customer';
import Ticket from './ticket';
import Claim from './claim';
@ -14,6 +15,7 @@ import Department from './department';
import Entry from './entry';
export default [
Item,
Customer,
Ticket,
Claim,

70
src/router/modules/item.js Normal file
View File

@ -0,0 +1,70 @@
import { RouterView } from 'vue-router';
export default {
path: '/item',
name: 'Item',
meta: {
title: 'items',
icon: 'vn:item',
},
component: RouterView,
redirect: { name: 'ItemMain' },
menus: {
main: [],
card: [],
},
children: [
{
path: '',
name: 'ItemMain',
component: () => import('src/pages/Item/ItemMain.vue'),
redirect: { name: 'Itemlist' },
children: [
{
path: 'list',
name: 'ItemList',
meta: {
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/Item/ItemList.vue'),
},
],
},
{
name: 'ItemCard',
path: ':id',
component: () => import('src/pages/Item/Card/ItemCard.vue'),
redirect: { name: 'ItemSummary' },
children: [
{
name: 'ItemSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Item/Card/ItemSummary.vue'),
},
{
path: 'diary',
name: 'ItemDiary',
meta: {
title: 'diary',
icon: 'vn:transaction',
},
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
},
{
path: 'tags',
name: 'ItemTags',
meta: {
title: 'Tags',
icon: 'vn:tags',
},
component: () => import('src/pages/Item/Card/ItemTags.vue'),
},
],
},
],
};

2
src/router/routes.js
View File

@ -1,3 +1,4 @@
import item from './modules/item';
import customer from './modules/customer';
import ticket from './modules/ticket';
import claim from './modules/claim';
@ -51,6 +52,7 @@ const routes = [
component: () => import('../pages/Dashboard/DashboardMain.vue'),
},
// Module routes
item,
customer,
ticket,
claim,

1
src/stores/useArrayDataStore.js
View File

@ -19,6 +19,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
order: '',
data: ref(),
isLoading: false,
userParamsChanged: false,
exprBuilder: null,
};
}

20
src/stores/useNavigationStore.js
View File

@ -7,19 +7,19 @@ import routes from 'src/router/modules';
export const useNavigationStore = defineStore('navigationStore', () => {
const modules = [
'customer',
'claim',
'ticket',
'invoiceOut',
'invoiceIn',
'worker',
'shelving',
'order',
'wagon',
'route',
'supplier',
'travel',
'customer',
'entry',
'travel',
'invoiceOut',
'invoiceIn',
'supplier',
'claim',
'route',
'ticket',
'worker',
'wagon',
];
const pinnedModules = ref([]);
const role = useRole();

31
test/cypress/integration/VnLocation.spec.js Normal file
View File

@ -0,0 +1,31 @@
const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
describe('VnLocation', () => {
beforeEach(() => {
cy.viewport(1280, 720);
cy.login('developer');
cy.visit('/#/worker/create');
cy.waitForElement('.q-card');
});
it('Show all options', function() {
cy.get(inputLocation).click();
cy.get(locationOptions).should('have.length',5);
});
it('input filter location as "al"', function() {
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type('al');
cy.get(locationOptions).should('have.length',3);
});
it('input filter location as "ecuador"', function() {
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type('ecuador');
cy.get(locationOptions).should('have.length',1);
cy.get(`${locationOptions}:nth-child(1)`).click();
cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
});
})

1
test/cypress/integration/claim/claimAction.spec.js
View File

@ -31,7 +31,6 @@ describe('ClaimAction', () => {
it('should regularize', () => {
cy.get('[title="Regularize"]').click();
cy.clickConfirm();
});
it('should remove the line', () => {

3
test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
View File

@ -16,11 +16,12 @@ describe('InvoiceInBasicData', () => {
cy.get(selects).eq(0).type('Bros');
cy.get(selects).eq(0).type('{enter}');
cy.get('[title="Reset"]').click();
cy.get(appendBtns).eq(0).click();
cy.get('input').eq(2).type(4739);
cy.saveCard();
cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Plants nick');
cy.get('input').eq(2).invoke('val').should('eq', '4739');
});

1
test/cypress/integration/invoiceIn/invoiceInList.spec.js
View File

@ -9,6 +9,7 @@ describe('InvoiceInList', () => {
beforeEach(() => {
cy.login('developer');
cy.visit(`/#/invoice-in`);
cy.clickFilterSearchBtn();
});
it('should redirect on clicking a invoice', () => {

19
test/cypress/integration/vnSearchBar.spec.js Normal file
View File

@ -0,0 +1,19 @@
/// <reference types="cypress" />
describe('VnSearchBar', () => {
beforeEach(() => {
cy.login('developer');
cy.visit('/');
});
it('should redirect to new customer', () => {
cy.visit('#/customer/1112/basic-data')
cy.openLeftMenu();
cy.get('.q-item > .q-item__label').should('have.text',' #1112')
cy.closeLeftMenu();
cy.clearSearchbar();
cy.writeSearchbar('1{enter}');
cy.openLeftMenu();
cy.get('.q-item > .q-item__label').should('have.text',' #1')
cy.closeLeftMenu();
});
});

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

@ -163,7 +163,28 @@ Cypress.Commands.add('openRightMenu', (element) => {
cy.get('#actions-append').click();
});
Cypress.Commands.add('openLeftMenu', (element) => {
if (element) cy.waitForElement(element);
cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
});
Cypress.Commands.add('closeLeftMenu', (element) => {
if (element) cy.waitForElement(element);
cy.get('.fullscreen').click();
});
Cypress.Commands.add('clearSearchbar', (element) => {
if (element) cy.waitForElement(element);
cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
});
Cypress.Commands.add('writeSearchbar', (value) => {
cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
});
Cypress.Commands.add('validateContent', (selector, expectedValue) => {
cy.get(selector).should('have.text', expectedValue);
});
Cypress.Commands.add('clickFilterSearchBtn', () => {
cy.get('.q-item__section > .q-btn > .q-btn__content > .q-icon').click();
});
// registerCommands();

2
test/vitest/__tests__/components/Paginate.spec.js
View File

@ -119,7 +119,7 @@ describe('VnPaginate', () => {
await vm.onLoad(index, done);
expect(vm.pagination.page).toEqual(2);
expect(done).toHaveBeenCalledWith(true);
expect(done).toHaveBeenCalledWith(false);
});
});
});

53
test/vitest/__tests__/components/common/VnSearchBar.spec.js Normal file
View File

@ -0,0 +1,53 @@
import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
describe('VnSearchBar', () => {
let vm;
let wrapper;
beforeAll(() => {
wrapper = createWrapper(VnSearchbar, {
propsData: {
dataKey: 'CustomerList',
label: 'Search customer',
info: 'Info customer',
},
});
vm = wrapper.vm;
vm.route.matched = [
{
path: '/',
},
{
path: '/customer',
},
{
path: '/customer/:id',
},
{
path: '/customer/:id/basic-data',
},
];
});
afterEach(() => {
vi.clearAllMocks();
});
it('should be defined', async () => {
expect(vm.searchText).toBeDefined();
expect(vm.searchText).toEqual('');
});
it('should redirect', async () => {
vi.spyOn(vm.router,'push');
vm.searchText = '1';
await vm.search();
expect(vm.router.push).toHaveBeenCalledWith('/customer/1/basic-data');
vm.searchText = '1112';
expect(vm.searchText).toEqual('1112');
vi.spyOn(vm.router,'push');
await vm.search();
expect(vm.router.push).toHaveBeenCalledWith('/customer/1112/basic-data');
});
});