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

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

This commit is contained in:
Carlos Satorres 2024-05-23 09:23:11 +02:00
parent 98449b0c1e 406c095ed2
commit 66c841114b
399 changed files with 38969 additions and 15259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CHANGELOG.md
View File

@ -5,10 +5,21 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [2420.01]
## [2418.01]
## [2416.01] - 2024-04-18 ## [2416.01] - 2024-04-18
### Added ### Added
- (Worker) => Se crea la sección Taquilla
- (General) => Se mantiene el filtro lateral en cualquier parte de la seccíon.
### Fixed
- (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro
## [2414.01] - 2024-04-04 ## [2414.01] - 2024-04-04
### Added ### Added
@ -16,6 +27,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- (Tickets) => Se añade la opción de clonar ticket. #6951 - (Tickets) => Se añade la opción de clonar ticket. #6951
- (Parking) => Se añade la sección Parking. #5186 - (Parking) => Se añade la sección Parking. #5186
- (Rutas) => Se añade el campo "servida" a la tabla y se añade también a los filtros. #7130
### Changed ### Changed
### Fixed ### Fixed

1
cypress.config.js
View File

@ -3,6 +3,7 @@ const { defineConfig } = require('cypress');
module.exports = defineConfig({ module.exports = defineConfig({
e2e: { e2e: {
baseUrl: 'http://localhost:9000/', baseUrl: 'http://localhost:9000/',
experimentalStudio: true,
fixturesFolder: 'test/cypress/fixtures', fixturesFolder: 'test/cypress/fixtures',
screenshotsFolder: 'test/cypress/screenshots', screenshotsFolder: 'test/cypress/screenshots',
supportFile: 'test/cypress/support/index.js', supportFile: 'test/cypress/support/index.js',

3
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "salix-front", "name": "salix-front",
"version": "24.16.0", "version": "24.24.0",
"description": "Salix frontend", "description": "Salix frontend",
"productName": "Salix", "productName": "Salix",
"author": "Verdnatura", "author": "Verdnatura",
@ -32,6 +32,7 @@
"@intlify/unplugin-vue-i18n": "^0.8.1", "@intlify/unplugin-vue-i18n": "^0.8.1",
"@pinia/testing": "^0.1.2", "@pinia/testing": "^0.1.2",
"@quasar/app-vite": "^1.7.3", "@quasar/app-vite": "^1.7.3",
"@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15",
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0", "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
"@vue/test-utils": "^2.4.4", "@vue/test-utils": "^2.4.4",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",

14476
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

12
quasar.config.js
View File

@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
// app boot file (/src/boot) // app boot file (/src/boot)
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files // https://v2.quasar.dev/quasar-cli/boot-files
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'], boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'], css: ['app.scss'],
@ -93,13 +93,11 @@ module.exports = configure(function (/* ctx */) {
[ [
VueI18nPlugin({ VueI18nPlugin({
runtimeOnly: false, runtimeOnly: false,
include: [
path.resolve(__dirname, './src/i18n/locale/**'),
path.resolve(__dirname, './src/pages/**/locale/**'),
],
}), }),
{
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**'),
},
], ],
], ],
}, },

11
quasar.extensions.json
View File

@ -1,7 +1,6 @@
{ {
"@quasar/testing-unit-vitest": { "@quasar/testing-unit-vitest": {
"options": [ "options": ["scripts"]
"scripts" },
] "@quasar/qcalendar": {}
} }
}

45
src/components/CreateBankEntityForm.vue
View File

@ -3,17 +3,12 @@ import { reactive, ref, onMounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
const props = defineProps({ defineProps({ showEntityField: { type: Boolean, default: true } });
showEntityField: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['onDataSaved']); const emit = defineEmits(['onDataSaved']);
const { t } = useI18n(); const { t } = useI18n();
@ -26,7 +21,7 @@ const bankEntityFormData = reactive({
}); });
const countriesFilter = { const countriesFilter = {
fields: ['id', 'country', 'code'], fields: ['id', 'name', 'code'],
}; };
const countriesOptions = ref([]); const countriesOptions = ref([]);
@ -58,32 +53,28 @@ onMounted(async () => {
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput :label="t('name')"
:label="t('name')" v-model="data.name"
v-model="data.name" :required="true"
:required="true" :rules="validate('bankEntity.name')"
:rules="validate('bankEntity.name')" />
/> <VnInput
</div> ref="bicInputRef"
<div class="col"> :label="t('swift')"
<VnInput v-model="data.bic"
ref="bicInputRef" :required="true"
:label="t('swift')" :rules="validate('bankEntity.bic')"
v-model="data.bic" />
:required="true"
:rules="validate('bankEntity.bic')"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelectFilter <VnSelect
:label="t('country')" :label="t('country')"
v-model="data.countryFk" v-model="data.countryFk"
:options="countriesOptions" :options="countriesOptions"
option-value="id" option-value="id"
option-label="country" option-label="name"
hide-selected hide-selected
:required="true" :required="true"
:rules="validate('bankEntity.countryFk')" :rules="validate('bankEntity.countryFk')"

4
src/components/CreateDepartmentChild.vue
View File

@ -52,9 +52,7 @@ onMounted(() => {
</span> </span>
<h1 class="title">{{ t('New department') }}</h1> <h1 class="title">{{ t('New department') }}</h1>
<VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px"> <VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
<div class="col"> <VnInput :label="t('Name')" v-model="data.name" />
<VnInput :label="t('Name')" v-model="data.name" />
</div>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn <QBtn

106
src/components/CreateManualInvoiceForm.vue
View File

@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
import VnInputDate from './common/VnInputDate.vue'; import VnInputDate from './common/VnInputDate.vue';
@ -72,69 +72,57 @@ const onDataSaved = async (formData, requestResponse) => {
{{ t('Invoicing in progress...') }} {{ t('Invoicing in progress...') }}
</span> </span>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Ticket')"
:label="t('Ticket')" :options="ticketsOptions"
:options="ticketsOptions" hide-selected
hide-selected option-label="id"
option-label="id" option-value="id"
option-value="id" v-model="data.ticketFk"
v-model="data.ticketFk" @update:model-value="data.clientFk = null"
@update:model-value="data.clientFk = null" >
> <template #option="scope">
<template #option="scope"> <QItem v-bind="scope.itemProps">
<QItem v-bind="scope.itemProps"> <QItemSection>
<QItemSection> <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel> <QItemLabel caption>{{ scope.opt?.nickname }}</QItemLabel>
<QItemLabel caption>{{ </QItemSection>
scope.opt?.nickname </QItem>
}}</QItemLabel> </template>
</QItemSection> </VnSelect>
</QItem>
</template>
</VnSelectFilter>
</div>
<span class="row items-center" style="max-width: max-content">{{ <span class="row items-center" style="max-width: max-content">{{
t('Or') t('Or')
}}</span> }}</span>
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Client')"
:label="t('Client')" :options="clientsOptions"
:options="clientsOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="data.clientFk"
v-model="data.clientFk" @update:model-value="data.ticketFk = null"
@update:model-value="data.ticketFk = null" />
/> <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
</div>
<div class="col">
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Serial')"
:label="t('Serial')" :options="invoiceOutSerialsOptions"
:options="invoiceOutSerialsOptions" hide-selected
hide-selected option-label="description"
option-label="description" option-value="code"
option-value="code" v-model="data.serial"
v-model="data.serial" :required="true"
:required="true" />
/> <VnSelect
</div> :label="t('Area')"
<div class="col"> :options="taxAreasOptions"
<VnSelectFilter hide-selected
:label="t('Area')" option-label="code"
:options="taxAreasOptions" option-value="code"
hide-selected v-model="data.taxArea"
option-label="code" :required="true"
option-value="code" />
v-model="data.taxArea"
:required="true"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput

34
src/components/CreateNewCityForm.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
@ -40,24 +40,20 @@ const onDataSaved = (dataSaved) => {
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput :label="t('Name')"
:label="t('Name')" v-model="data.name"
v-model="data.name" :rules="validate('city.name')"
:rules="validate('city.name')" />
/> <VnSelect
</div> :label="t('Province')"
<div class="col"> :options="provincesOptions"
<VnSelectFilter hide-selected
:label="t('Province')" option-label="name"
:options="provincesOptions" option-value="id"
hide-selected v-model="data.provinceFk"
option-label="name" :rules="validate('city.provinceFk')"
option-value="id" />
v-model="data.provinceFk"
:rules="validate('city.provinceFk')"
/>
</div>
</VnRow> </VnRow>
</template> </template>
</FormModelPopup> </FormModelPopup>

125
src/components/CreateNewPostcodeForm.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import CreateNewCityForm from './CreateNewCityForm.vue'; import CreateNewCityForm from './CreateNewCityForm.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue'; import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
@ -28,8 +28,23 @@ const countriesOptions = ref([]);
const provincesOptions = ref([]); const provincesOptions = ref([]);
const townsLocationOptions = ref([]); const townsLocationOptions = ref([]);
const onDataSaved = (dataSaved) => { const onDataSaved = (formData) => {
emit('onDataSaved', dataSaved); const newPostcode = {
...formData,
};
const townObject = townsLocationOptions.value.find(
({ id }) => id === formData.townFk
);
newPostcode.town = townObject?.name;
const provinceObject = provincesOptions.value.find(
({ id }) => id === formData.provinceFk
);
newPostcode.province = provinceObject?.name;
const countryObject = countriesOptions.value.find(
({ id }) => id === formData.countryFk
);
newPostcode.country = countryObject?.country;
emit('onDataSaved', newPostcode);
}; };
const onCityCreated = async ({ name, provinceFk }, formData) => { const onCityCreated = async ({ name, provinceFk }, formData) => {
@ -73,67 +88,59 @@ const onProvinceCreated = async ({ name }, formData) => {
:title="t('New postcode')" :title="t('New postcode')"
:subtitle="t('Please, ensure you put the correct data!')" :subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="postcodeFormData" :form-initial-data="postcodeFormData"
@on-data-saved="onDataSaved($event)" @on-data-saved="onDataSaved"
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput :label="t('Postcode')"
:label="t('Postcode')" v-model="data.code"
v-model="data.code" :rules="validate('postcode.code')"
:rules="validate('postcode.code')" />
/> <VnSelectDialog
</div> :label="t('City')"
<div class="col"> :options="townsLocationOptions"
<VnSelectDialog v-model="data.townFk"
:label="t('City')" hide-selected
:options="townsLocationOptions" option-label="name"
v-model="data.townFk" option-value="id"
hide-selected :rules="validate('postcode.city')"
option-label="name" :roles-allowed-to-create="['deliveryAssistant']"
option-value="id" >
:rules="validate('postcode.city')" <template #form>
:roles-allowed-to-create="['deliveryAssistant']" <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
> </template>
<template #form> </VnSelectDialog>
<CreateNewCityForm
@on-data-saved="onCityCreated($event, data)"
/>
</template>
</VnSelectDialog>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-xl"> <VnRow class="row q-gutter-md q-mb-xl">
<div class="col"> <VnSelectDialog
<VnSelectDialog :label="t('Province')"
:label="t('Province')" :options="provincesOptions"
:options="provincesOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="data.provinceFk"
v-model="data.provinceFk" :rules="validate('postcode.provinceFk')"
:rules="validate('postcode.provinceFk')" :roles-allowed-to-create="['deliveryAssistant']"
:roles-allowed-to-create="['deliveryAssistant']" >
> <template #form>
<template #form> <CreateNewProvinceForm
<CreateNewProvinceForm @on-data-saved="onProvinceCreated($event, data)"
@on-data-saved="onProvinceCreated($event, data)" />
/> </template> </VnSelectDialog
</template> ></VnRow>
</VnSelectDialog> <VnRow class="row q-gutter-md q-mb-xl"
</div> ><VnSelect
<div class="col"> :label="t('Country')"
<VnSelectFilter :options="countriesOptions"
:label="t('Country')" hide-selected
:options="countriesOptions" option-label="name"
hide-selected option-value="id"
option-label="country" v-model="data.countryFk"
option-value="id" :rules="validate('postcode.countryFk')"
v-model="data.countryFk" />
:rules="validate('postcode.countryFk')" </VnRow>
/> </template>
</div> </VnRow
></template>
</FormModelPopup> </FormModelPopup>
</template> </template>

34
src/components/CreateNewProvinceForm.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
@ -40,24 +40,20 @@ const onDataSaved = (dataSaved) => {
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput :label="t('Name')"
:label="t('Name')" v-model="data.name"
v-model="data.name" :rules="validate('province.name')"
:rules="validate('province.name')" />
/> <VnSelect
</div> :label="t('Autonomy')"
<div class="col"> :options="autonomiesOptions"
<VnSelectFilter hide-selected
:label="t('Autonomy')" option-label="name"
:options="autonomiesOptions" option-value="id"
hide-selected v-model="data.autonomyFk"
option-label="name" :rules="validate('province.autonomyFk')"
option-value="id" />
v-model="data.autonomyFk"
:rules="validate('province.autonomyFk')"
/>
</div>
</VnRow> </VnRow>
</template> </template>
</FormModelPopup> </FormModelPopup>

79
src/components/CreateThermographForm.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
@ -54,51 +54,42 @@ const onDataSaved = (dataSaved) => {
> >
<template #form-inputs="{ data, validate }"> <template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput :label="t('Identifier')"
:label="t('Identifier')" v-model="data.thermographId"
v-model="data.thermographId" :required="true"
:required="true" :rules="validate('thermograph.id')"
:rules="validate('thermograph.id')" />
/> <VnSelect
</div> :label="t('Model')"
:options="thermographsModels"
<div class="col"> hide-selected
<VnSelectFilter option-label="value"
:label="t('Model')" option-value="value"
:options="thermographsModels" v-model="data.model"
hide-selected :required="true"
option-label="value" :rules="validate('thermograph.model')"
option-value="value" />
v-model="data.model"
:required="true"
:rules="validate('thermograph.model')"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-xl"> <VnRow class="row q-gutter-md q-mb-xl">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Warehouse')"
:label="t('Warehouse')" :options="warehousesOptions"
:options="warehousesOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="data.warehouseId"
v-model="data.warehouseId" :required="true"
:required="true" />
/> <VnSelect
</div> :label="t('Temperature')"
<div class="col"> :options="temperaturesOptions"
<VnSelectFilter hide-selected
:label="t('Temperature')" option-label="name"
:options="temperaturesOptions" option-value="code"
hide-selected v-model="data.temperatureFk"
option-label="name" :required="true"
option-value="code" />
v-model="data.temperatureFk"
:required="true"
/>
</div>
</VnRow> </VnRow>
</template> </template>
</FormModelPopup> </FormModelPopup>

16
src/components/CrudModel.vue
View File

@ -24,6 +24,10 @@ const $props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
limit: {
type: Number,
default: 20,
},
saveUrl: { saveUrl: {
type: String, type: String,
default: null, default: null,
@ -76,6 +80,8 @@ defineExpose({
reset, reset,
hasChanges, hasChanges,
saveChanges, saveChanges,
getChanges,
formData,
}); });
async function fetch(data) { async function fetch(data) {
@ -119,11 +125,16 @@ async function onSubmit() {
}); });
} }
isLoading.value = true; isLoading.value = true;
await saveChanges(); await saveChanges($props.saveFn ? formData.value : null);
} }
async function saveChanges(data) { async function saveChanges(data) {
if ($props.saveFn) return $props.saveFn(data, getChanges); if ($props.saveFn) {
$props.saveFn(data, getChanges);
isLoading.value = false;
hasChanges.value = false;
return;
}
const changes = data || getChanges(); const changes = data || getChanges();
try { try {
await axios.post($props.saveUrl || $props.url + '/crud', changes); await axios.post($props.saveUrl || $props.url + '/crud', changes);
@ -260,6 +271,7 @@ watch(formUrl, async () => {
<template> <template>
<VnPaginate <VnPaginate
:url="url" :url="url"
:limit="limit"
v-bind="$attrs" v-bind="$attrs"
@on-fetch="fetch" @on-fetch="fetch"
:skeleton="false" :skeleton="false"

98
src/components/EditPictureForm.vue
View File

@ -2,7 +2,7 @@
import { reactive, computed, ref } from 'vue'; import { reactive, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
@ -246,61 +246,55 @@ const makeRequest = async () => {
<div class="column"> <div class="column">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <QOptionGroup
<QOptionGroup :options="uploadMethodsOptions"
:options="uploadMethodsOptions" type="radio"
type="radio" v-model="uploadMethodSelected"
v-model="uploadMethodSelected" />
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <QFile
<QFile v-if="uploadMethodSelected === 'computer'"
v-if="uploadMethodSelected === 'computer'" ref="inputFileRef"
ref="inputFileRef" :label="t('File')"
:label="t('File')" :multiple="false"
:multiple="false" v-model="newPhoto.files"
v-model="newPhoto.files" @update:model-value="updatePhotoPreview($event)"
@update:model-value="updatePhotoPreview($event)" :accept="allowedContentTypes"
:accept="allowedContentTypes" class="required cursor-pointer"
class="required cursor-pointer" >
> <template #append>
<template #append> <QIcon
<QIcon name="vn:attach"
name="vn:attach" class="cursor-pointer q-mr-sm"
class="cursor-pointer q-mr-sm" @click="openInputFile()"
@click="openInputFile()" >
> <!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> -->
<!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> --> </QIcon>
</QIcon> <QIcon name="info" class="cursor-pointer">
<QIcon name="info" class="cursor-pointer"> <QTooltip>{{
<QTooltip>{{ t('globals.allowedFilesText', {
t('globals.allowedFilesText', { allowedContentTypes: allowedContentTypes,
allowedContentTypes: allowedContentTypes, })
}) }}</QTooltip>
}}</QTooltip> </QIcon>
</QIcon> </template>
</template> </QFile>
</QFile> <VnInput
<VnInput v-if="uploadMethodSelected === 'URL'"
v-if="uploadMethodSelected === 'URL'" v-model="newPhoto.url"
v-model="newPhoto.url" @update:model-value="updatePhotoPreview($event)"
@update:model-value="updatePhotoPreview($event)" placeholder="https://"
placeholder="https://" />
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Orientation')"
:label="t('Orientation')" :options="viewportTypes"
:options="viewportTypes" hide-selected
hide-selected option-label="description"
option-label="description" v-model="viewportSelection"
v-model="viewportSelection" />
/>
</div>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn <QBtn

51
src/components/EditTableCellValueForm.vue
View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import { ref, reactive } from 'vue'; import { ref, markRaw } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnRow from 'components/ui/VnRow.vue';
import { QCheckbox } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
@ -28,11 +31,16 @@ const $props = defineProps({
const { t } = useI18n(); const { t } = useI18n();
const { notify } = useNotify(); const { notify } = useNotify();
const formData = reactive({ const inputs = {
field: null, input: markRaw(VnInput),
newValue: null, number: markRaw(VnInput),
}); date: markRaw(VnInputDate),
checkbox: markRaw(QCheckbox),
select: markRaw(VnSelect),
};
const newValue = ref(null);
const selectedField = ref(null);
const closeButton = ref(null); const closeButton = ref(null);
const isLoading = ref(false); const isLoading = ref(false);
@ -47,8 +55,8 @@ const submitData = async () => {
isLoading.value = true; isLoading.value = true;
const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk })); const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
const payload = { const payload = {
field: formData.field, field: selectedField.value.field,
newValue: formData.newValue, newValue: newValue.value,
lines: rowsToEdit, lines: rowsToEdit,
}; };
@ -75,19 +83,20 @@ const closeForm = () => {
<span class="countLines">{{ ` ${rows.length} ` }}</span> <span class="countLines">{{ ` ${rows.length} ` }}</span>
<span class="title">{{ t('buy(s)') }}</span> <span class="title">{{ t('buy(s)') }}</span>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Field to edit')"
:label="t('Field to edit')" :options="fieldsOptions"
:options="fieldsOptions" hide-selected
hide-selected option-label="label"
option-label="label" v-model="selectedField"
option-value="field" />
v-model="formData.field" <component
/> :is="inputs[selectedField?.component || 'input']"
</div> v-bind="selectedField?.attrs || {}"
<div class="col"> v-model="newValue"
<VnInput :label="t('Value')" v-model="formData.newValue" /> :label="t('Value')"
</div> style="width: 200px"
/>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn <QBtn

83
src/components/FilterItemForm.vue
View File

@ -1,21 +1,26 @@
<script setup> <script setup>
import { ref, reactive, computed } from 'vue'; import { ref, reactive, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelect from 'components/common/VnSelect.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import axios from 'axios'; import axios from 'axios';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
const props = defineProps({
url: {
type: String,
required: true,
},
});
const emit = defineEmits(['itemSelected']); const emit = defineEmits(['itemSelected']);
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute();
const itemFilter = { const itemFilter = {
include: [ include: [
@ -73,7 +78,7 @@ const tableColumns = computed(() => [
{ {
label: t('entry.buys.color'), label: t('entry.buys.color'),
name: 'ink', name: 'ink',
field: 'inkName', field: (row) => row?.ink?.name,
align: 'left', align: 'left',
}, },
]); ]);
@ -100,7 +105,7 @@ const fetchResults = async () => {
} }
filter.where = where; filter.where = where;
const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, { const { data } = await axios.get(props.url, {
params: { filter: JSON.stringify(filter) }, params: { filter: JSON.stringify(filter) },
}); });
tableRows.value = data; tableRows.value = data;
@ -147,48 +152,32 @@ const selectItem = ({ id }) => {
</span> </span>
<h1 class="title">{{ t('Filter item') }}</h1> <h1 class="title">{{ t('Filter item') }}</h1>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput :label="t('entry.buys.name')" v-model="itemFilterParams.name" />
<VnInput <VnInput :label="t('entry.buys.size')" v-model="itemFilterParams.size" />
:label="t('entry.buys.name')" <VnSelect
v-model="itemFilterParams.name" :label="t('entry.buys.producer')"
/> :options="producersOptions"
</div> hide-selected
<div class="col"> option-label="name"
<VnInput option-value="id"
:label="t('entry.buys.size')" v-model="itemFilterParams.producerFk"
v-model="itemFilterParams.size" />
/> <VnSelect
</div> :label="t('entry.buys.type')"
<div class="col"> :options="ItemTypesOptions"
<VnSelectFilter hide-selected
:label="t('entry.buys.producer')" option-label="name"
:options="producersOptions" option-value="id"
hide-selected v-model="itemFilterParams.typeFk"
option-label="name" />
option-value="id" <VnSelect
v-model="itemFilterParams.producerFk" :label="t('entry.buys.color')"
/> :options="InksOptions"
</div> hide-selected
<div class="col"> option-label="name"
<VnSelectFilter option-value="id"
:label="t('entry.buys.type')" v-model="itemFilterParams.inkFk"
:options="ItemTypesOptions" />
hide-selected
option-label="name"
option-value="id"
v-model="itemFilterParams.typeFk"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('entry.buys.color')"
:options="InksOptions"
hide-selected
option-label="name"
option-value="id"
v-model="itemFilterParams.inkFk"
/>
</div>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn <QBtn

76
src/components/FilterTravelForm.vue
View File

@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelect from 'components/common/VnSelect.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue'; import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import axios from 'axios'; import axios from 'axios';
@ -145,48 +145,38 @@ const selectTravel = ({ id }) => {
</span> </span>
<h1 class="title">{{ t('Filter travels') }}</h1> <h1 class="title">{{ t('Filter travels') }}</h1>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('entry.basicData.agency')"
:label="t('entry.basicData.agency')" :options="agenciesOptions"
:options="agenciesOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="travelFilterParams.agencyModeFk"
v-model="travelFilterParams.agencyModeFk" />
/> <VnSelect
</div> :label="t('entry.basicData.warehouseOut')"
<div class="col"> :options="warehousesOptions"
<VnSelectFilter hide-selected
:label="t('entry.basicData.warehouseOut')" option-label="name"
:options="warehousesOptions" option-value="id"
hide-selected v-model="travelFilterParams.warehouseOutFk"
option-label="name" />
option-value="id" <VnSelect
v-model="travelFilterParams.warehouseOutFk" :label="t('entry.basicData.warehouseIn')"
/> :options="warehousesOptions"
</div> hide-selected
<div class="col"> option-label="name"
<VnSelectFilter option-value="id"
:label="t('entry.basicData.warehouseIn')" v-model="travelFilterParams.warehouseInFk"
:options="warehousesOptions" />
hide-selected <VnInputDate
option-label="name" :label="t('entry.basicData.shipped')"
option-value="id" v-model="travelFilterParams.shipped"
v-model="travelFilterParams.warehouseInFk" />
/> <VnInputDate
</div> :label="t('entry.basicData.landed')"
<div class="col"> v-model="travelFilterParams.landed"
<VnInputDate />
:label="t('entry.basicData.shipped')"
v-model="travelFilterParams.shipped"
/>
</div>
<div class="col">
<VnInputDate
:label="t('entry.basicData.landed')"
v-model="travelFilterParams.landed"
/>
</div>
</VnRow> </VnRow>
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn <QBtn

47
src/components/FormModel.vue
View File

@ -81,6 +81,7 @@ const emit = defineEmits(['onFetch', 'onDataSaved']);
const componentIsRendered = ref(false); const componentIsRendered = ref(false);
onMounted(async () => { onMounted(async () => {
originalData.value = $props.formInitialData;
nextTick(() => { nextTick(() => {
componentIsRendered.value = true; componentIsRendered.value = true;
}); });
@ -101,16 +102,16 @@ onMounted(async () => {
}); });
onBeforeRouteLeave((to, from, next) => { onBeforeRouteLeave((to, from, next) => {
if (!hasChanges.value) next(); if (hasChanges.value && $props.observeFormChanges)
quasar.dialog({
quasar.dialog({ component: VnConfirm,
component: VnConfirm, componentProps: {
componentProps: { title: t('Unsaved changes will be lost'),
title: t('Unsaved changes will be lost'), message: t('Are you sure exit without saving?'),
message: t('Are you sure exit without saving?'), promise: () => next(),
promise: () => next(), },
}, });
}); else next();
}); });
onUnmounted(() => { onUnmounted(() => {
@ -126,18 +127,18 @@ const isLoading = ref(false);
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
const isResetting = ref(false); const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges); const hasChanges = ref(!$props.observeFormChanges);
const originalData = ref({ ...$props.formInitialData }); const originalData = ref({});
const formData = computed(() => state.get($props.model)); const formData = computed(() => state.get($props.model));
const formUrl = computed(() => $props.url); const formUrl = computed(() => $props.url);
const defaultButtons = computed(() => ({ const defaultButtons = computed(() => ({
save: { save: {
color: 'primary', color: 'primary',
icon: 'restart_alt', icon: 'save',
label: 'globals.save', label: 'globals.save',
}, },
reset: { reset: {
color: 'primary', color: 'primary',
icon: 'save', icon: 'restart_alt',
label: 'globals.reset', label: 'globals.reset',
}, },
...$props.defaultButtons, ...$props.defaultButtons,
@ -154,14 +155,21 @@ const startFormWatcher = () => {
}; };
async function fetch() { async function fetch() {
const { data } = await axios.get($props.url, { try {
params: { filter: JSON.stringify($props.filter) }, let { data } = await axios.get($props.url, {
}); params: { filter: JSON.stringify($props.filter) },
});
state.set($props.model, data); if (Array.isArray(data)) data = data[0] ?? {};
originalData.value = data && JSON.parse(JSON.stringify(data));
emit('onFetch', state.get($props.model)); state.set($props.model, data);
originalData.value = data && JSON.parse(JSON.stringify(data));
emit('onFetch', state.get($props.model));
} catch (error) {
state.set($props.model, {});
originalData.value = {};
}
} }
async function save() { async function save() {
@ -227,6 +235,7 @@ watch(formUrl, async () => {
defineExpose({ defineExpose({
save, save,
isLoading, isLoading,
hasChanges,
}); });
</script> </script>
<template> <template>

20
src/components/FormModelPopup.vue
View File

@ -6,7 +6,7 @@ import FormModel from 'components/FormModel.vue';
const emit = defineEmits(['onDataSaved']); const emit = defineEmits(['onDataSaved']);
const $props = defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '', default: '',
@ -76,23 +76,25 @@ defineExpose({
<p>{{ subtitle }}</p> <p>{{ subtitle }}</p>
<slot name="form-inputs" :data="data" :validate="validate" /> <slot name="form-inputs" :data="data" :validate="validate" />
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn <QBtn
:label="t('globals.cancel')" :label="t('globals.cancel')"
:title="t('globals.cancel')"
type="reset" type="reset"
color="primary" color="primary"
flat flat
class="q-ml-sm"
:disabled="isLoading" :disabled="isLoading"
:loading="isLoading" :loading="isLoading"
v-close-popup v-close-popup
/> />
<QBtn
:label="t('globals.save')"
:title="t('globals.save')"
type="submit"
color="primary"
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
/>
</div> </div>
</template> </template>
</FormModel> </FormModel>

18
src/components/FormPopup.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
const emit = defineEmits(['onSubmit']); const emit = defineEmits(['onSubmit']);
const $props = defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '', default: '',
@ -56,14 +56,6 @@ const closeForm = () => {
<p>{{ subtitle }}</p> <p>{{ subtitle }}</p>
<slot name="form-inputs" /> <slot name="form-inputs" />
<div class="q-mt-lg row justify-end"> <div class="q-mt-lg row justify-end">
<QBtn
v-if="defaultSubmitButton"
:label="customSubmitButtonLabel || t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn <QBtn
v-if="defaultCancelButton" v-if="defaultCancelButton"
:label="t('globals.cancel')" :label="t('globals.cancel')"
@ -74,6 +66,14 @@ const closeForm = () => {
:loading="isLoading" :loading="isLoading"
v-close-popup v-close-popup
/> />
<QBtn
v-if="defaultSubmitButton"
:label="customSubmitButtonLabel || t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<slot name="customButtons" /> <slot name="customButtons" />
</div> </div>
</QCard> </QCard>

359
src/components/ItemsFilterPanel.vue Normal file
View File

@ -0,0 +1,359 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import axios from 'axios';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
customTags: {
type: Array,
default: () => [],
},
exprBuilder: {
type: Function,
default: null,
},
});
const itemCategories = ref([]);
const selectedCategoryFk = ref(null);
const selectedTypeFk = ref(null);
const itemTypesOptions = ref([]);
const suppliersOptions = ref([]);
const tagOptions = ref([]);
const tagValues = ref([]);
const categoryList = computed(() => {
return (itemCategories.value || [])
.filter((category) => category.display)
.map((category) => ({
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
});
const selectedCategory = computed(() =>
(itemCategories.value || []).find(
(category) => category?.id === selectedCategoryFk.value
)
);
const selectedType = computed(() => {
return (itemTypesOptions.value || []).find(
(type) => type?.id === selectedTypeFk.value
);
});
const selectCategory = async (params, categoryId, search) => {
if (params.categoryFk === categoryId) {
resetCategory(params);
search();
return;
}
selectedCategoryFk.value = categoryId;
params.categoryFk = categoryId;
await fetchItemTypes(categoryId);
search();
};
const resetCategory = (params) => {
selectedCategoryFk.value = null;
itemTypesOptions.value = null;
if (params) {
params.categoryFk = null;
params.typeFk = null;
}
};
const applyTags = (params, search) => {
params.tags = tagValues.value
.filter((tag) => tag.selectedTag && tag.value)
.map((tag) => ({
tagFk: tag.selectedTag.id,
tagName: tag.selectedTag.name,
value: tag.value,
}));
search();
};
const fetchItemTypes = async (id) => {
try {
const filter = {
fields: ['id', 'name', 'categoryFk'],
where: { categoryFk: id },
include: 'category',
order: 'name ASC',
};
const { data } = await axios.get('ItemTypes', {
params: { filter: JSON.stringify(filter) },
});
itemTypesOptions.value = data;
} catch (err) {
console.error('Error fetching item types', err);
}
};
const getCategoryClass = (category, params) => {
if (category.id === params?.categoryFk) {
return 'active';
}
};
const getSelectedTagValues = async (tag) => {
try {
tag.value = null;
const filter = {
fields: ['value'],
order: 'value ASC',
limit: 30,
};
const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
params,
});
tag.valueOptions = data;
} catch (err) {
console.error('Error getting selected tag values');
}
};
const removeTag = (index, params, search) => {
(tagValues.value || []).splice(index, 1);
applyTags(params, search);
};
</script>
<template>
<FetchData
url="ItemCategories"
limit="30"
auto-load
@on-fetch="(data) => (itemCategories = data)"
/>
<FetchData
url="Suppliers"
limit="30"
auto-load
:filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (suppliersOptions = data)"
/>
<FetchData
url="Tags"
:filter="{ fields: ['id', 'name', 'isFree'] }"
auto-load
limit="30"
@on-fetch="(data) => (tagOptions = data)"
/>
<VnFilterPanel
:data-key="props.dataKey"
:expr-builder="exprBuilder"
:custom-tags="customTags"
>
<template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'">
{{ t(selectedCategory?.name || '') }}
</strong>
<strong v-else-if="tag.label === 'typeFk'">
{{ t(selectedType?.name || '') }}
</strong>
<div v-else class="q-gutter-x-xs">
<strong>{{ t(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #customTags="{ tags, params }">
<template v-for="tag in tags" :key="tag.label">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<div class="q-gutter-x-xs">
<strong>{{ chip.tagName }}: </strong>
<span>"{{ chip.value }}"</span>
</div>
</VnFilterPanelChip>
</template>
</template>
<template #body="{ params, searchFn }">
<QItem class="category-filter q-mt-md">
<QBtn
dense
flat
round
v-for="category in categoryList"
:key="category.name"
:class="['category', getCategoryClass(category, params)]"
:icon="category.icon"
@click="selectCategory(params, category.id, searchFn)"
>
<QTooltip>
{{ t(category.name) }}
</QTooltip>
</QBtn>
</QItem>
<QItem class="q-my-md">
<QItemSection>
<VnSelect
:label="t('components.itemsFilterPanel.typeFk')"
v-model="params.typeFk"
:options="itemTypesOptions"
option-value="id"
option-label="name"
dense
outlined
rounded
use-input
:disable="!selectedCategoryFk"
@update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.categoryName }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</QItemSection>
</QItem>
<QSeparator />
<slot name="body" :params="params" :search-fn="searchFn" />
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<QItemSection class="col">
<VnSelect
:label="t('components.itemsFilterPanel.tag')"
v-model="value.selectedTag"
:options="tagOptions"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="getSelectedTagValues(value)"
/>
</QItemSection>
<QItemSection class="col">
<VnSelect
v-if="!value?.selectedTag?.isFree && value.valueOptions"
:label="t('components.itemsFilterPanel.value')"
v-model="value.value"
:options="value.valueOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!value"
:is-clearable="false"
@update:model-value="applyTags(params, searchFn)"
/>
<VnInput
v-else
v-model="value.value"
:label="t('components.itemsFilterPanel.value')"
:disable="!value"
is-outlined
:is-clearable="false"
@keyup.enter="applyTags(params, searchFn)"
/>
</QItemSection>
<QIcon
name="delete"
class="fill-icon-on-hover q-px-xs"
color="primary"
size="sm"
@click="removeTag(index, params, searchFn)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="fill-icon-on-hover q-px-xs"
color="primary"
size="sm"
@click="tagValues.push({})"
/>
</QItem>
</template>
</VnFilterPanel>
</template>
<style lang="scss" scoped>
.category-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
.category {
padding: 8px;
width: 60px;
height: 60px;
font-size: 1.4rem;
background-color: var(--vn-accent-color);
&.active {
background-color: $primary;
}
}
}
.filter-value {
display: flex;
align-items: center;
}
</style>
<i18n>
en:
params:
supplier: Supplier
from: From
to: To
active: Is active
visible: Is visible
floramondo: Is floramondo
salesPersonFk: Buyer
categoryFk: Category
es:
params:
supplier: Proveedor
from: Desde
to: Hasta
active: Activo
visible: Visible
floramondo: Floramondo
salesPersonFk: Comprador
categoryFk: Categoría
</i18n>

14
src/components/LeftMenu.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import { onMounted, ref } from 'vue'; import { onMounted, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QSeparator, useQuasar } from 'quasar'; import { QSeparator, useQuasar } from 'quasar';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
@ -22,6 +22,8 @@ const props = defineProps({
}, },
}); });
const expansionItemElements = reactive({});
onMounted(async () => { onMounted(async () => {
await navigation.fetchPinned(); await navigation.fetchPinned();
getRoutes(); getRoutes();
@ -108,6 +110,10 @@ async function togglePinned(item, event) {
type: 'positive', type: 'positive',
}); });
} }
const handleItemExpansion = (itemName) => {
expansionItemElements[itemName].scrollToLastElement();
};
</script> </script>
<template> <template>
@ -213,8 +219,12 @@ async function togglePinned(item, event) {
:icon="item.icon" :icon="item.icon"
:label="t(item.title)" :label="t(item.title)"
:content-inset-level="0.5" :content-inset-level="0.5"
@after-show="handleItemExpansion(item.name)"
> >
<LeftMenuItemGroup :item="item" /> <LeftMenuItemGroup
:ref="(el) => (expansionItemElements[item.name] = el)"
:item="item"
/>
</QExpansionItem> </QExpansionItem>
</QList> </QList>
</template> </template>

20
src/components/LeftMenuItemGroup.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed, ref } from 'vue';
import LeftMenuItem from './LeftMenuItem.vue'; import LeftMenuItem from './LeftMenuItem.vue';
import { elementIsVisibleInViewport } from 'src/composables/elementIsVisibleInViewport';
const props = defineProps({ const props = defineProps({
item: { item: {
@ -13,10 +14,27 @@ const props = defineProps({
}, },
}); });
const groupEnd = ref(null);
const scrollToLastElement = () => {
if (groupEnd.value && !elementIsVisibleInViewport(groupEnd.value)) {
groupEnd.value.scrollIntoView({
behavior: 'smooth',
block: 'end',
});
}
};
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
defineExpose({
scrollToLastElement,
});
</script> </script>
<template> <template>
<template v-for="section in item.children" :key="section.name"> <template v-for="section in item.children" :key="section.name">
<LeftMenuItem :item="section" /> <LeftMenuItem :item="section" />
</template> </template>
<div ref="groupEnd" />
</template> </template>

15
src/components/RegularizeStockForm.vue
View File

@ -2,7 +2,7 @@
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue'; import FormModelPopup from './FormModelPopup.vue';
@ -50,16 +50,15 @@ const onDataSaved = (data) => {
> >
<template #form-inputs="{ data }"> <template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <QInput
<QInput :label="t('Type the visible quantity')"
:label="t('Type the visible quantity')" v-model.number="data.quantity"
v-model.number="data.quantity" autofocus
/> />
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelectFilter <VnSelect
:label="t('Warehouse')" :label="t('Warehouse')"
v-model="data.warehouseFk" v-model="data.warehouseFk"
:options="warehousesOptions" :options="warehousesOptions"

126
src/components/TransferInvoiceForm.vue
View File

@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue'; import FormPopup from './FormPopup.vue';
import axios from 'axios'; import axios from 'axios';
@ -83,74 +83,66 @@ const transferInvoice = async () => {
> >
<template #form-inputs> <template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Client')"
:label="t('Client')" :options="clientsOptions"
:options="clientsOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="transferInvoiceParams.newClientFk"
v-model="transferInvoiceParams.newClientFk" :required="true"
:required="true" >
> <template #option="scope">
<template #option="scope"> <QItem v-bind="scope.itemProps">
<QItem v-bind="scope.itemProps"> <QItemSection>
<QItemSection> <QItemLabel>
<QItemLabel> #{{ scope.opt?.id }} -
#{{ scope.opt?.id }} - {{ scope.opt?.name }}
{{ scope.opt?.name }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </template>
</template> </VnSelect>
</VnSelectFilter> <VnSelect
</div> :label="t('Rectificative type')"
<div class="col"> :options="rectificativeTypeOptions"
<VnSelectFilter hide-selected
:label="t('Rectificative type')" option-label="description"
:options="rectificativeTypeOptions" option-value="id"
hide-selected v-model="transferInvoiceParams.cplusRectificationTypeFk"
option-label="description" :required="true"
option-value="id" />
v-model="transferInvoiceParams.cplusRectificationTypeFk"
:required="true"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<VnSelectFilter :label="t('Class')"
:label="t('Class')" :options="siiTypeInvoiceOutsOptions"
:options="siiTypeInvoiceOutsOptions" hide-selected
hide-selected option-label="description"
option-label="description" option-value="id"
option-value="id" v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
v-model="transferInvoiceParams.siiTypeInvoiceOutFk" :required="true"
:required="true" >
> <template #option="scope">
<template #option="scope"> <QItem v-bind="scope.itemProps">
<QItem v-bind="scope.itemProps"> <QItemSection>
<QItemSection> <QItemLabel>
<QItemLabel> {{ scope.opt?.code }} -
{{ scope.opt?.code }} - {{ scope.opt?.description }}
{{ scope.opt?.description }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </template>
</template> </VnSelect>
</VnSelectFilter> <VnSelect
</div> :label="t('Type')"
<div class="col"> :options="invoiceCorrectionTypesOptions"
<VnSelectFilter hide-selected
:label="t('Type')" option-label="description"
:options="invoiceCorrectionTypesOptions" option-value="id"
hide-selected v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
option-label="description" :required="true"
option-value="id" />
v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
:required="true"
/>
</div>
</VnRow> </VnRow>
</template> </template>
</FormPopup> </FormPopup>

37
src/components/UserPanel.vue
View File

@ -7,7 +7,7 @@ import axios from 'axios';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { localeEquivalence } from 'src/i18n/index'; import { localeEquivalence } from 'src/i18n/index';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
@ -172,42 +172,57 @@ function copyUserToken() {
<QSeparator inset class="q-mx-lg" /> <QSeparator inset class="q-mx-lg" />
<div class="col q-gutter-xs q-pa-md"> <div class="col q-gutter-xs q-pa-md">
<VnRow> <VnRow>
<VnSelectFilter <VnSelect
:label="t('components.userPanel.localWarehouse')" :label="t('components.userPanel.localWarehouse')"
v-model="user.localWarehouseFk" v-model="user.localWarehouseFk"
:options="warehousesData" :options="warehousesData"
option-label="name" option-label="name"
option-value="id" option-value="id"
/> input-debounce="0"
<VnSelectFilter
:label="t('components.userPanel.localBank')"
hide-selected hide-selected
/>
<VnSelect
:label="t('components.userPanel.localBank')"
v-model="user.localBankFk" v-model="user.localBankFk"
:options="accountBankData" :options="accountBankData"
option-label="bank" option-label="bank"
option-value="id" option-value="id"
></VnSelectFilter> input-debounce="0"
hide-selected
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>
{{ `${opt.id}: ${opt.bank}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow> </VnRow>
<VnRow> <VnRow>
<VnSelectFilter <VnSelect
:label="t('components.userPanel.localCompany')" :label="t('components.userPanel.localCompany')"
hide-selected hide-selected
v-model="user.companyFk" v-model="user.localCompanyFk"
:options="companiesData" :options="companiesData"
option-label="code" option-label="code"
option-value="id" option-value="id"
input-debounce="0"
/> />
<VnSelectFilter <VnSelect
:label="t('components.userPanel.userWarehouse')" :label="t('components.userPanel.userWarehouse')"
hide-selected hide-selected
v-model="user.warehouseFk" v-model="user.warehouseFk"
:options="warehousesData" :options="warehousesData"
option-label="name" option-label="name"
option-value="id" option-value="id"
input-debounce="0"
/> />
</VnRow> </VnRow>
<VnRow> <VnRow>
<VnSelectFilter <VnSelect
:label="t('components.userPanel.userCompany')" :label="t('components.userPanel.userCompany')"
hide-selected hide-selected
v-model="user.companyFk" v-model="user.companyFk"
@ -215,6 +230,8 @@ function copyUserToken() {
option-label="code" option-label="code"
option-value="id" option-value="id"
style="flex: 0" style="flex: 0"
dense
input-debounce="0"
/> />
</VnRow> </VnRow>
</div> </div>

55
src/components/common/RightMenu.vue Normal file
View File

@ -0,0 +1,55 @@
<script setup>
import { ref, onMounted, useSlots } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
const slots = useSlots();
const hasContent = ref(false);
const rightPanel = ref(null);
onMounted(() => {
rightPanel.value = document.querySelector('#right-panel');
if (rightPanel.value.childNodes.length) hasContent.value = true;
// Check if there's content to display
const observer = new MutationObserver(() => {
hasContent.value = rightPanel.value.childNodes.length;
});
if (rightPanel.value)
observer.observe(rightPanel.value, {
subtree: true,
childList: true,
attributes: true,
});
if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
});
const { t } = useI18n();
const stateStore = useStateStore();
</script>
<template>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
v-if="hasContent || $slots['right-panel']"
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<div id="right-panel"></div>
<slot v-if="!hasContent" name="right-panel" />
</QScrollArea>
</QDrawer>
</template>

6
src/components/common/SendEmailDialog.vue
View File

@ -29,10 +29,12 @@ async function confirm() {
const response = { address: address.value }; const response = { address: address.value };
if (props.promise) { if (props.promise) {
isLoading.value = true; isLoading.value = true;
const { address: _address, ...restData } = props.data;
try { try {
Object.assign(response, restData); const dataCopy = JSON.parse(JSON.stringify({ ...props.data }));
delete dataCopy.address;
Object.assign(response, dataCopy);
await props.promise(response); await props.promise(response);
} finally { } finally {
isLoading.value = false; isLoading.value = false;

90
src/components/common/VnCard.vue Normal file
View File

@ -0,0 +1,90 @@
<script setup>
import { onBeforeMount, computed, watchEffect } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
import VnSubToolbar from '../ui/VnSubToolbar.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import LeftMenu from 'components/LeftMenu.vue';
import RightMenu from 'components/common/RightMenu.vue';
const props = defineProps({
dataKey: { type: String, required: true },
baseUrl: { type: String, default: undefined },
customUrl: { type: String, default: undefined },
filter: { type: Object, default: () => {} },
descriptor: { type: Object, required: true },
filterPanel: { type: Object, default: undefined },
searchDataKey: { type: String, default: undefined },
searchUrl: { type: String, default: undefined },
searchbarLabel: { type: String, default: '' },
searchbarInfo: { type: String, default: '' },
});
const stateStore = useStateStore();
const route = useRoute();
const url = computed(() => {
if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
return props.customUrl;
});
const arrayData = useArrayData(props.dataKey, {
url: url.value,
filter: props.filter,
});
onBeforeMount(async () => {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false });
});
if (props.baseUrl) {
onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) {
arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
await arrayData.fetch({ append: false });
}
});
}
watchEffect(() => {
if (Array.isArray(arrayData.store.data))
arrayData.store.data = arrayData.store.data[0];
});
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar" v-if="props.searchDataKey">
<slot name="searchbar">
<VnSearchbar
:data-key="props.searchDataKey"
:url="props.searchUrl"
:label="props.searchbarLabel"
:info="props.searchbarInfo"
/>
</slot>
</Teleport>
<slot v-else name="searchbar" />
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<RightMenu>
<template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="props.searchDataKey" />
</template>
</RightMenu>
</template>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="[useCardSize(), $attrs.class]">
<RouterView />
</div>
</QPage>
</QPageContainer>
</template>

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

@ -5,7 +5,7 @@ import { useCapitalize } from 'src/composables/useCapitalize';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({ const props = defineProps({
modelValue: { type: String, default: '' }, modelValue: { type: [String, Number], default: '' },
}); });
const { t } = useI18n(); const { t } = useI18n();

10
src/components/common/VnDms.vue
View File

@ -6,7 +6,7 @@ import axios from 'axios';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from 'components/FormModelPopup.vue'; import FormModelPopup from 'components/FormModelPopup.vue';
@ -123,7 +123,7 @@ function addDefaultData(data) {
<div class="q-gutter-y-ms"> <div class="q-gutter-y-ms">
<VnRow> <VnRow>
<VnInput :label="t('globals.reference')" v-model="dms.reference" /> <VnInput :label="t('globals.reference')" v-model="dms.reference" />
<VnSelectFilter <VnSelect
:label="t('globals.company')" :label="t('globals.company')"
v-model="dms.companyFk" v-model="dms.companyFk"
:options="companies" :options="companies"
@ -133,7 +133,7 @@ function addDefaultData(data) {
/> />
</VnRow> </VnRow>
<VnRow> <VnRow>
<VnSelectFilter <VnSelect
:label="t('globals.warehouse')" :label="t('globals.warehouse')"
v-model="dms.warehouseFk" v-model="dms.warehouseFk"
:options="warehouses" :options="warehouses"
@ -141,7 +141,7 @@ function addDefaultData(data) {
option-label="name" option-label="name"
input-debounce="0" input-debounce="0"
/> />
<VnSelectFilter <VnSelect
:label="t('globals.type')" :label="t('globals.type')"
v-model="dms.dmsTypeFk" v-model="dms.dmsTypeFk"
:options="dmsTypes" :options="dmsTypes"
@ -198,11 +198,13 @@ function addDefaultData(data) {
en: en:
contentTypesInfo: Allowed file types {allowedContentTypes} contentTypesInfo: Allowed file types {allowedContentTypes}
EntryDmsDescription: Reference {reference} EntryDmsDescription: Reference {reference}
WorkersDescription: Working of employee id {reference}
SupplierDmsDescription: Reference {reference} SupplierDmsDescription: Reference {reference}
es: es:
Generate identifier for original file: Generar identificador para archivo original Generate identifier for original file: Generar identificador para archivo original
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes} contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
EntryDmsDescription: Referencia {reference} EntryDmsDescription: Referencia {reference}
WorkersDescription: Laboral del empleado {reference}
SupplierDmsDescription: Referencia {reference} SupplierDmsDescription: Referencia {reference}
</i18n> </i18n>

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

@ -5,9 +5,11 @@ import { useRoute } from 'vue-router';
import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar'; import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import FetchData from 'components/FetchData.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import VnDms from 'src/components/common/VnDms.vue'; import VnDms from 'src/components/common/VnDms.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
import { downloadFile } from 'src/composables/downloadFile'; import { downloadFile } from 'src/composables/downloadFile';
const route = useRoute(); const route = useRoute();
@ -26,6 +28,15 @@ const $props = defineProps({
type: String, type: String,
default: null, default: null,
}, },
deleteModel: {
type: String,
default: null,
},
downloadModel: {
type: String,
required: false,
default: undefined,
},
defaultDmsCode: { defaultDmsCode: {
type: String, type: String,
required: true, required: true,
@ -74,7 +85,7 @@ const dmsFilter = {
], ],
}, },
}, },
order: ['dmsFk DESC'], where: { [$props.filter]: route.params.id },
}; };
const columns = computed(() => [ const columns = computed(() => [
@ -94,12 +105,12 @@ const columns = computed(() => [
props: (prop) => ({ props: (prop) => ({
readonly: true, readonly: true,
borderless: true, borderless: true,
'model-value': prop.row.dmsType.name, 'model-value': prop.row.dmsType?.name,
}), }),
}, },
{ {
align: 'left', align: 'left',
field: 'order', field: 'hardCopyNumber',
label: t('globals.order'), label: t('globals.order'),
name: 'order', name: 'order',
component: 'span', component: 'span',
@ -117,6 +128,7 @@ const columns = computed(() => [
label: t('globals.description'), label: t('globals.description'),
name: 'description', name: 'description',
component: 'span', component: 'span',
props: (prop) => ({ value: prop.value?.toUpperCase() }),
}, },
{ {
align: 'left', align: 'left',
@ -136,21 +148,53 @@ const columns = computed(() => [
name: 'file', name: 'file',
component: 'span', component: 'span',
}, },
{
align: 'left',
field: 'worker',
label: t('globals.worker'),
name: 'worker',
component: VnUserLink,
props: (prop) => ({
name: prop.row.worker?.user?.name.toLowerCase(),
workerId: prop.row.worker?.id,
}),
},
{
align: 'left',
field: 'created',
label: t('globals.created'),
name: 'created',
component: VnInputDate,
props: (prop) => ({
disable: true,
'model-value': prop.row.created,
}),
},
{ {
field: 'options', field: 'options',
name: 'options', name: 'options',
components: [ components: [
{ {
component: QBtn, component: QBtn,
name: 'download',
isDocuware: true,
props: () => ({ props: () => ({
icon: 'cloud_download', icon: 'cloud_download',
flat: true, flat: true,
color: 'primary', color: 'primary',
}), }),
click: (prop) => downloadFile(prop.row.id), click: (prop) =>
downloadFile(
prop.row.id,
$props.downloadModel,
undefined,
prop.row.download
),
}, },
{ {
component: QBtn, component: QBtn,
name: 'edit',
external: false,
props: () => ({ props: () => ({
icon: 'edit', icon: 'edit',
flat: true, flat: true,
@ -160,6 +204,8 @@ const columns = computed(() => [
}, },
{ {
component: QBtn, component: QBtn,
name: 'delete',
external: false,
props: () => ({ props: () => ({
icon: 'delete', icon: 'delete',
flat: true, flat: true,
@ -167,12 +213,24 @@ const columns = computed(() => [
}), }),
click: (prop) => deleteDms(prop.row.id), click: (prop) => deleteDms(prop.row.id),
}, },
{
component: QBtn,
name: 'open',
external: true,
props: () => ({
icon: 'open_in_new',
flat: true,
color: 'primary',
}),
click: (prop) => open(prop.row.url),
},
], ],
}, },
]); ]);
function setData(data) { function setData(data) {
const newData = data.map((value) => value.dms); const newData = data.map((value) => value.dms || value);
newData.sort((a, b) => new Date(b.created) - new Date(a.created));
rows.value = newData; rows.value = newData;
} }
@ -186,7 +244,7 @@ function deleteDms(dmsFk) {
}, },
}) })
.onOk(async () => { .onOk(async () => {
await axios.post(`${$props.model}/${dmsFk}/removeFile`); await axios.post(`${$props.deleteModel ?? $props.model}/${dmsFk}/removeFile`);
const index = rows.value.findIndex((row) => row.id == dmsFk); const index = rows.value.findIndex((row) => row.id == dmsFk);
rows.value.splice(index, 1); rows.value.splice(index, 1);
}); });
@ -206,84 +264,106 @@ function parseDms(data) {
} }
return data; return data;
} }
async function open(url) {
window.open(url).focus();
}
function shouldRenderButton(button, isExternal = false) {
if (button.name == 'download') return true;
return button.external === isExternal;
}
</script> </script>
<template> <template>
<FetchData <VnPaginate
ref="dmsRef" ref="dmsRef"
:data-key="$props.model"
:url="$props.model" :url="$props.model"
:filter="dmsFilter" :filter="dmsFilter"
:where="{ [$props.filter]: route.params.id }" :order="['dmsFk DESC']"
:auto-load="true"
@on-fetch="setData" @on-fetch="setData"
auto-load
/>
<QTable
:columns="columns"
:rows="rows"
class="full-width q-mt-md"
hide-bottom
row-key="clientFk"
:grid="$q.screen.lt.sm"
> >
<template #body-cell="props"> <template #body>
<QTd :props="props"> <QTable
<QTr :props="props"> :columns="columns"
<component :rows="rows"
v-if="props.col.component" class="full-width q-mt-md"
:is="props.col.component" hide-bottom
v-bind="props.col.props && props.col.props(props)" row-key="clientFk"
> :grid="$q.screen.lt.sm"
<span >
v-if="props.col.component == 'span'" <template #body-cell="props">
style="white-space: wrap" <QTd :props="props">
>{{ props.value }}</span <QTr :props="props">
> <component
</component> v-if="props.col.component"
</QTr> :is="props.col.component"
v-bind="props.col.props && props.col.props(props)"
<div class="flex justify-center" v-if="props.col.name == 'options'"> >
<div v-for="button of props.col.components" :key="button.id"> <span
<component v-if="props.col.component == 'span'"
:is="button.component" style="white-space: wrap"
v-bind="button.props(props)" >{{ props.value }}</span
@click="button.click(props)"
/>
</div>
</div>
</QTd>
</template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
<QCard
bordered
flat
@keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
>
<QSeparator />
<QList dense>
<QItem v-for="col in props.cols" :key="col.name">
<div v-if="col.name != 'options'" class="row">
<span class="labelColor">{{ col.label }}:</span>
<span>{{ col.value }}</span>
</div>
<div v-if="col.name == 'options'" class="row">
<div
v-for="button of col.components"
:key="button.id"
class="row"
> >
<component </component>
:is="button.component" </QTr>
v-bind="button.props(col)"
@click="button.click(col)" <div class="row no-wrap" v-if="props.col.name == 'options'">
/> <div v-for="button of props.col.components" :key="button.id">
</div> <component
v-if="
shouldRenderButton(button, props.row.isDocuware)
"
:is="button.component"
v-bind="button.props(props)"
@click="button.click(props)"
/>
</div> </div>
</QItem> </div>
</QList> </QTd>
</QCard> </template>
</div> <template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
<QCard
bordered
flat
@keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
>
<QSeparator />
<QList dense>
<QItem v-for="col in props.cols" :key="col.name">
<div v-if="col.name != 'options'" class="row">
<span class="labelColor">{{ col.label }}:</span>
<span>{{ col.value }}</span>
</div>
<div v-if="col.name == 'options'" class="row">
<div
v-for="button of col.components"
:key="button.id"
class="row"
>
<component
v-if="
shouldRenderButton(
button.name,
props.row.isDocuware
)
"
:is="button.component"
v-bind="button.props(col)"
@click="button.click(col)"
/>
</div>
</div>
</QItem>
</QList>
</QCard>
</div>
</template>
</QTable>
</template> </template>
</QTable> </VnPaginate>
<QDialog v-model="formDialog.show"> <QDialog v-model="formDialog.show">
<VnDms <VnDms
:model="updateModel ?? model" :model="updateModel ?? model"

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

@ -26,7 +26,7 @@ const value = computed({
emit('update:modelValue', value); emit('update:modelValue', value);
}, },
}); });
const hover = ref(false);
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return $props.isOutlined return $props.isOutlined
? { ? {
@ -37,10 +37,6 @@ const styleAttrs = computed(() => {
: {}; : {};
}); });
const onEnterPress = () => {
emit('keyup.enter');
};
const focus = () => { const focus = () => {
vnInputRef.value.focus(); vnInputRef.value.focus();
}; };
@ -48,23 +44,52 @@ const focus = () => {
defineExpose({ defineExpose({
focus, focus,
}); });
const inputRules = [
(val) => {
const { min } = vnInputRef.value.$attrs;
if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
},
];
</script> </script>
<template> <template>
<QInput <div
ref="vnInputRef" @mouseover="hover = true"
v-model="value" @mouseleave="hover = false"
v-bind="{ ...$attrs, ...styleAttrs }"
type="text"
:class="{ required: $attrs.required }"
@keyup.enter="onEnterPress()"
:rules="$attrs.required ? [requiredFieldRule] : null" :rules="$attrs.required ? [requiredFieldRule] : null"
> >
<template v-if="$slots.prepend" #prepend> <QInput
<slot name="prepend" /> ref="vnInputRef"
</template> v-model="value"
<template v-if="$slots.append" #append> v-bind="{ ...$attrs, ...styleAttrs }"
<slot name="append" /> :type="$attrs.type"
</template> :class="{ required: $attrs.required }"
</QInput> @keyup.enter="emit('keyup.enter')"
:clearable="false"
:rules="inputRules"
:lazy-rules="true"
hide-bottom-space
>
<template v-if="$slots.prepend" #prepend>
<slot name="prepend" />
</template>
<template #append>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon
name="close"
size="xs"
v-if="$slots.append && hover && value && !$attrs.disabled"
@click="value = null"
></QIcon>
</template>
</QInput>
</div>
</template> </template>
<i18n>
en:
inputMin: Must be more than {value}
es:
inputMin: Debe ser mayor a {value}
</i18n>

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

@ -1,7 +1,6 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import VnInput from 'components/common/VnInput.vue'; import isValidDate from 'filters/isValidDate';
import isValidDate from "filters/isValidDate";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -16,7 +15,13 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
emitDateFormat: {
type: Boolean,
default: false,
},
}); });
const hover = ref(false);
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const joinDateAndTime = (date, time) => { const joinDateAndTime = (date, time) => {
@ -36,7 +41,10 @@ const value = computed({
return props.modelValue; return props.modelValue;
}, },
set(value) { set(value) {
emit('update:modelValue', joinDateAndTime(value, time.value)); emit(
'update:modelValue',
props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
);
}, },
}); });
@ -77,30 +85,39 @@ const styleAttrs = computed(() => {
</script> </script>
<template> <template>
<VnInput <div @mouseover="hover = true" @mouseleave="hover = false">
class="vn-input-date" <QInput
:model-value="displayDate(value)" class="vn-input-date"
v-bind="{ ...$attrs, ...styleAttrs }" readonly
readonly :model-value="displayDate(value)"
@click="isPopupOpen = true" v-bind="{ ...$attrs, ...styleAttrs }"
> @click="isPopupOpen = true"
<template #append> >
<QIcon name="event" class="cursor-pointer"> <template #append>
<QPopupProxy <QIcon
v-model="isPopupOpen" name="close"
cover size="xs"
transition-show="scale" v-if="hover && value"
transition-hide="scale" @click="onDateUpdate(null)"
:no-parent-event="props.readonly" ></QIcon>
> <QIcon name="event" class="cursor-pointer">
<QDate <QPopupProxy
:model-value="formatDate(value)" v-model="isPopupOpen"
@update:model-value="onDateUpdate" cover
/> transition-show="scale"
</QPopupProxy> transition-hide="scale"
</QIcon> :no-parent-event="props.readonly"
</template> >
</VnInput> <QDate
:today-btn="true"
:model-value="formatDate(value)"
@update:model-value="onDateUpdate"
/>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">

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

@ -20,6 +20,7 @@ const props = defineProps({
}); });
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const value = computed({ const value = computed({
get() { get() {
return props.modelValue; return props.modelValue;
@ -66,7 +67,7 @@ const styleAttrs = computed(() => {
</script> </script>
<template> <template>
<VnInput <QInput
class="vn-input-time" class="vn-input-time"
readonly readonly
:model-value="formatTime(value)" :model-value="formatTime(value)"
@ -106,7 +107,7 @@ const styleAttrs = computed(() => {
</QPopupProxy> </QPopupProxy>
</QIcon> </QIcon>
</template> </template>
</VnInput> </QInput>
</template> </template>
<style lang="scss"> <style lang="scss">

10
src/components/common/VnLocation.vue
View File

@ -88,6 +88,10 @@ function locationFilter(search = '') {
function handleFetch(data) { function handleFetch(data) {
postcodesOptions.value = data; postcodesOptions.value = data;
} }
function onDataSaved(newPostcode) {
postcodesOptions.value.push(newPostcode);
value.value = newPostcode.code;
}
</script> </script>
<template> <template>
<FetchData <FetchData
@ -111,11 +115,13 @@ function handleFetch(data) {
clearable clearable
> >
<template #form> <template #form>
<CreateNewPostcode @on-data-saved="locationFilter()" /> <CreateNewPostcode
@on-data-saved="onDataSaved"
/>
</template> </template>
<template #option="{ itemProps, opt }"> <template #option="{ itemProps, opt }">
<QItem v-bind="itemProps"> <QItem v-bind="itemProps">
<QItemSection v-if="opt"> <QItemSection v-if="opt.code">
<QItemLabel>{{ opt.code }}</QItemLabel> <QItemLabel>{{ opt.code }}</QItemLabel>
<QItemLabel caption>{{ showLabel(opt) }}</QItemLabel> <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
</QItemSection> </QItemSection>

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

@ -12,7 +12,7 @@ import { useValidator } from 'src/composables/useValidator';
import VnAvatar from '../ui/VnAvatar.vue'; import VnAvatar from '../ui/VnAvatar.vue';
import VnJsonValue from '../common/VnJsonValue.vue'; import VnJsonValue from '../common/VnJsonValue.vue';
import FetchData from '../FetchData.vue'; import FetchData from '../FetchData.vue';
import VnSelectFilter from './VnSelectFilter.vue'; import VnSelect from './VnSelect.vue';
import VnUserLink from '../ui/VnUserLink.vue'; import VnUserLink from '../ui/VnUserLink.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -421,12 +421,13 @@ setLogTree();
> >
<div class="timeline"> <div class="timeline">
<div class="user-avatar"> <div class="user-avatar">
<VnUserLink :worker-id="userLog.user.id"> <VnUserLink :worker-id="userLog?.user?.id">
<template #link> <template #link>
<VnAvatar <VnAvatar
:class="{ 'cursor-pointer': userLog.user.id }" :class="{ 'cursor-pointer': userLog?.user?.id }"
:worker-id="userLog.user.id" :worker-id="userLog?.user?.id"
:title="userLog.user.nickname" :title="userLog?.user?.nickname"
:show-letter="!userLog?.user"
size="lg" size="lg"
/> />
</template> </template>
@ -659,7 +660,7 @@ setLogTree();
</QInput> </QInput>
</QItem> </QItem>
<QItem> <QItem>
<VnSelectFilter <VnSelect
class="full-width" class="full-width"
:label="t('globals.entity')" :label="t('globals.entity')"
v-model="selectedFilters.changedModel" v-model="selectedFilters.changedModel"
@ -689,7 +690,7 @@ setLogTree();
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers && userRadio !== null"> <QItemSection v-if="workers && userRadio !== null">
<VnSelectFilter <VnSelect
class="full-width" class="full-width"
:label="t('globals.user')" :label="t('globals.user')"
v-model="userSelect" v-model="userSelect"
@ -713,7 +714,7 @@ setLogTree();
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>
</VnSelectFilter> </VnSelect>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mt-sm"> <QItem class="q-mt-sm">
@ -1030,7 +1031,7 @@ en:
ticketCreated: Created ticketCreated: Created
created: Created created: Created
isChargedToMana: Charged to mana isChargedToMana: Charged to mana
hasToPickUp: Has to pick Up pickup: Type of pickup
dmsFk: Document ID dmsFk: Document ID
text: Description text: Description
claimStateFk: Claim State claimStateFk: Claim State
@ -1069,7 +1070,7 @@ es:
ticketCreated: Creado ticketCreated: Creado
created: Creado created: Creado
isChargedToMana: Cargado a maná isChargedToMana: Cargado a maná
hasToPickUp: Se debe recoger pickup: Se debe recoger
dmsFk: ID documento dmsFk: ID documento
text: Descripción text: Descripción
claimStateFk: Estado de la reclamación claimStateFk: Estado de la reclamación

14
src/components/common/VnSelectFilter.vue → src/components/common/VnSelect.vue
View File

@ -22,6 +22,10 @@ const $props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
optionFilter: {
type: String,
default: null,
},
url: { url: {
type: String, type: String,
default: '', default: '',
@ -57,9 +61,9 @@ const $props = defineProps({
}); });
const { t } = useI18n(); const { t } = useI18n();
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired'); const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
const { optionLabel, optionValue, options, modelValue } = toRefs($props); const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
const myOptions = ref([]); const myOptions = ref([]);
const myOptionsOriginal = ref([]); const myOptionsOriginal = ref([]);
const vnSelectRef = ref(); const vnSelectRef = ref();
@ -109,9 +113,9 @@ async function fetchFilter(val) {
const { fields, sortBy, limit } = $props; const { fields, sortBy, limit } = $props;
let key = optionLabel.value; let key = optionLabel.value;
if (new RegExp(/\d/g).test(val)) key = optionValue.value; if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
const where = { [key]: { like: `%${val}%` } }; const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
return dataRef.value.fetch({ fields, where, order: sortBy, limit }); return dataRef.value.fetch({ fields, where, order: sortBy, limit });
} }
@ -167,8 +171,10 @@ watch(modelValue, (newValue) => {
hide-selected hide-selected
fill-input fill-input
ref="vnSelectRef" ref="vnSelectRef"
lazy-rules
:class="{ required: $attrs.required }" :class="{ required: $attrs.required }"
:rules="$attrs.required ? [requiredFieldRule] : null" :rules="$attrs.required ? [requiredFieldRule] : null"
virtual-scroll-slice-size="options.length"
> >
<template v-if="isClearable" #append> <template v-if="isClearable" #append>
<QIcon <QIcon

6
src/components/common/VnSelectDialog.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import { useRole } from 'src/composables/useRole'; import { useRole } from 'src/composables/useRole';
@ -52,7 +52,7 @@ const toggleForm = () => {
</script> </script>
<template> <template>
<VnSelectFilter v-model="value" :options="options" v-bind="$attrs"> <VnSelect v-model="value" :options="options" v-bind="$attrs">
<template v-if="isAllowedToCreate" #append> <template v-if="isAllowedToCreate" #append>
<QIcon <QIcon
@click.stop.prevent="toggleForm()" @click.stop.prevent="toggleForm()"
@ -72,7 +72,7 @@ const toggleForm = () => {
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName"> <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData" :key="slotName" /> <slot :name="slotName" v-bind="slotData" :key="slotName" />
</template> </template>
</VnSelectFilter> </VnSelect>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

42
src/components/common/VnSmsDialog.vue
View File

@ -21,7 +21,8 @@ const props = defineProps({
}, },
template: { template: {
type: String, type: String,
required: true, required: false,
default: '',
}, },
locale: { locale: {
type: String, type: String,
@ -49,7 +50,7 @@ updateMessage();
function updateMessage() { function updateMessage() {
const params = props.data; const params = props.data;
const key = `templates['${props.template}']`; const key = props.template ? `templates['${props.template}']` : '';
message.value = t(key, params, { locale: locale.value }); message.value = t(key, params, { locale: locale.value });
} }
@ -104,15 +105,14 @@ async function send() {
map-options map-options
:input-debounce="0" :input-debounce="0"
rounded rounded
outlined
dense dense
/> />
</QCardSection> </QCardSection>
<QCardSection class="q-pb-xs"> <QCardSection class="q-pb-xs">
<VnInput :label="t('Phone')" v-model="phone" is-outlined /> <VnInput :label="t('Phone')" v-model="phone" />
</QCardSection> </QCardSection>
<QCardSection class="q-pb-xs"> <QCardSection class="q-pb-xs">
<VnInput v-model="subject" :label="t('Subject')" is-outlined /> <VnInput v-model="subject" :label="t('Subject')" />
</QCardSection> </QCardSection>
<QCardSection class="q-mb-md" q-input> <QCardSection class="q-mb-md" q-input>
<QInput <QInput
@ -125,7 +125,6 @@ async function send() {
:bottom-slots="true" :bottom-slots="true"
:rules="[(value) => value.length < maxLength || 'Error!']" :rules="[(value) => value.length < maxLength || 'Error!']"
stack-label stack-label
outlined
autofocus autofocus
> >
<template #append> <template #append>
@ -135,6 +134,11 @@ async function send() {
@click="message = ''" @click="message = ''"
class="cursor-pointer" class="cursor-pointer"
/> />
<QIcon name="info" class="cursor-pointer">
<QTooltip>
{{ t('messageTooltip') }}
</QTooltip>
</QIcon>
</template> </template>
<template #counter> <template #counter>
<QChip :color="color" dense> <QChip :color="color" dense>
@ -184,18 +188,21 @@ en:
es: Spanish es: Spanish
fr: French fr: French
pt: Portuguese pt: Portuguese
messageTooltip: Special characters like accents counts as multiple
es: es:
Send SMS: Enviar SMS Send SMS: Enviar SMS
Language: Idioma Language: Idioma
Phone: Móvil Phone: Móvil
Subject: Asunto Subject: Asunto
Message: Mensaje Message: Mensaje
messageTooltip: Carácteres especiales como acentos cuentan como varios
templates: templates:
pendingPayment: 'Su pedido está pendiente de pago. pendingPayment: 'Su pedido está pendiente de pago.
Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.' Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido minAmount: 'Te recordamos que tu pedido {orderId} es inferior a 50€.
{ orderId } del día { shipped } para recibirlo sin portes adicionales.' Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
orderChanges: 'Pedido {orderId} día { shipped }: { changes }' ¡Un saludo!'
orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
en: Inglés en: Inglés
es: Español es: Español
fr: Francés fr: Francés
@ -207,12 +214,14 @@ fr:
Phone: Mobile Phone: Mobile
Subject: Affaire Subject: Affaire
Message: Message Message: Message
messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
templates: templates:
pendingPayment: 'Votre commande est en attente de paiement. pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.' Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande minAmount: 'Verdnatura vous rappelle :
{ orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.' Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
orderChanges: 'Commande { orderId } du { shipped }: { changes }' Merci.'
orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
en: Anglais en: Anglais
es: Espagnol es: Espagnol
fr: Français fr: Français
@ -224,12 +233,13 @@ pt:
Phone: Móvel Phone: Móvel
Subject: Assunto Subject: Assunto
Message: Mensagem Message: Mensagem
messageTooltip: Caracteres especiais como acentos contam como vários
templates: templates:
pendingPayment: 'Seu pedido está pendente de pagamento. pendingPayment: 'Seu pedido está pendente de pagamento.
Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.' Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
{ orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.' { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
orderChanges: 'Pedido { orderId } dia { shipped }: { changes }' orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
en: Inglês en: Inglês
es: Espanhol es: Espanhol
fr: Francês fr: Francês

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

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onBeforeMount, useSlots, watch, computed, ref } from 'vue'; import { onBeforeMount, watch, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue'; import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
@ -38,7 +38,6 @@ const $props = defineProps({
}); });
const state = useState(); const state = useState();
const slots = useSlots();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const arrayData = useArrayData($props.dataKey || $props.module, { const arrayData = useArrayData($props.dataKey || $props.module, {
@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
skip: 0, skip: 0,
}); });
const { store } = arrayData; const { store } = arrayData;
const entity = computed(() => store.data); const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
const isLoading = ref(false); const isLoading = ref(false);
defineExpose({ defineExpose({
@ -55,19 +54,17 @@ defineExpose({
}); });
onBeforeMount(async () => { onBeforeMount(async () => {
await getData(); await getData();
watch( watch($props, async () => await getData());
() => $props.url,
async () => await getData()
);
}); });
async function getData() { async function getData() {
store.url = $props.url; store.url = $props.url;
store.filter = $props.filter ?? {};
isLoading.value = true; isLoading.value = true;
try { try {
const { data } = await arrayData.fetch({ append: false, updateRouter: false }); const { data } = await arrayData.fetch({ append: false, updateRouter: false });
state.set($props.dataKey, data); state.set($props.dataKey, data);
emit('onFetch', data); emit('onFetch', Array.isArray(data) ? data[0] : data);
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
@ -117,7 +114,7 @@ const emit = defineEmits(['onFetch']);
icon="more_vert" icon="more_vert"
round round
size="md" size="md"
:class="{ invisible: !slots.menu }" :class="{ invisible: !$slots.menu }"
> >
<QTooltip> <QTooltip>
{{ t('components.cardDescriptor.moreOptions') }} {{ t('components.cardDescriptor.moreOptions') }}

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

@ -15,7 +15,7 @@ const props = defineProps({
default: null, default: null,
}, },
entityId: { entityId: {
type: Number, type: [Number, String],
default: null, default: null,
}, },
dataKey: { dataKey: {
@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
skip: 0, skip: 0,
}); });
const { store } = arrayData; const { store } = arrayData;
const entity = computed(() => store.data); const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
const isLoading = ref(false); const isLoading = ref(false);
defineExpose({ defineExpose({
@ -48,11 +48,19 @@ onBeforeMount(async () => {
async function fetch() { async function fetch() {
store.url = props.url; store.url = props.url;
store.filter = props.filter ?? {};
isLoading.value = true; isLoading.value = true;
const { data } = await arrayData.fetch({ append: false, updateRouter: false }); const { data } = await arrayData.fetch({ append: false, updateRouter: false });
emit('onFetch', data); emit('onFetch', Array.isArray(data) ? data[0] : data);
isLoading.value = false; isLoading.value = false;
} }
const showRedirectToSummaryIcon = computed(() => {
const routeExists = route.matched.some(
(route) => route.name === `${route.meta.moduleName}Summary`
);
return !isSummary.value && route.meta.moduleName && routeExists;
});
</script> </script>
<template> <template>
@ -63,7 +71,7 @@ async function fetch() {
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder"> <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
<slot name="header-left"> <slot name="header-left">
<router-link <router-link
v-if="!isSummary && route.meta.moduleName" v-if="showRedirectToSummaryIcon"
class="header link" class="header link"
:to="{ :to="{
name: `${route.meta.moduleName}Summary`, name: `${route.meta.moduleName}Summary`,
@ -134,6 +142,9 @@ async function fetch() {
box-shadow: none; box-shadow: none;
.vn-label-value { .vn-label-value {
&.negative > .value span {
color: $alert;
}
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 2px; margin-top: 2px;

168
src/components/ui/QCalendarMonthWrapper.vue Normal file
View File

@ -0,0 +1,168 @@
<script setup>
import { computed } from 'vue';
import { useQuasar } from 'quasar';
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
const $props = defineProps({
bordered: {
type: Boolean,
default: false,
},
transparentBackground: {
type: Boolean,
default: false,
},
viewCustomization: {
type: String,
default: '',
},
});
const $q = useQuasar();
// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
const viewCustomizationClasses = {
workerCalendar: 'worker-calendar-customizations',
};
const containerClasses = computed(() => {
const classes = ['main-container-background'];
if (viewCustomizationClasses[$props.viewCustomization])
classes.push(viewCustomizationClasses[$props.viewCustomization]);
if ($props.bordered) classes.push('--bordered');
if ($props.transparentBackground) classes.push('transparent-background');
else classes.push($q.dark.isActive ? '--dark' : '--light');
return classes;
});
</script>
<template>
<div :class="containerClasses">
<div class="nav-container row"><slot name="header" /></div>
<slot name="calendar" />
</div>
</template>
<style lang="scss">
@import '../../css/quasar.variables.scss';
:root {
// Cambia los colores del día actual del calendario por los de salix
--calendar-border-current-dark: #84d0e2 2px solid;
--calendar-border-current: #84d0e2 2px solid;
--calendar-current-color-dark: #84d0e2;
// Colores de fondo del calendario en dark mode
--calendar-outside-background-dark: #222;
--calendar-background-dark: #222;
}
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
background-color: $primary !important;
color: white !important;
}
.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
background-color: $primary !important;
color: white !important;
}
.q-calendar-month__head--weekday {
// Transforma los nombres de los días de la semana a mayúsculas
text-transform: capitalize;
}
.transparent-background {
--calendar-background-dark: transparent;
--calendar-background: transparent;
--calendar-outside-background-dark: transparent;
}
.q-calendar__button {
&:hover {
background-color: var(--vn-accent-color);
cursor: pointer;
}
}
.main-container-background {
--calendar-current-background-dark: transparent;
&.--dark {
background-color: var(--calendar-background-dark);
}
&.--light {
background-color: var(--calendar-background);
}
&.--bordered {
border: 1px solid #222;
}
}
.worker-calendar-customizations {
.q-calendar__button {
width: 32px;
height: 32px;
font-size: 13px;
&:hover {
background-color: var(--vn-label-color);
cursor: pointer;
}
}
.q-calendar-month__week--days > div:nth-child(6),
.q-calendar-month__week--days > div:nth-child(7) {
// Cambia el color de los días sábado y domingo
color: #777777;
}
.q-calendar-month__week--wrapper {
margin-bottom: 4px;
}
.q-calendar-month__workweek {
height: 32px;
display: flex;
justify-content: center;
}
.q-calendar__button--bordered {
color: $info !important;
}
.q-calendar-month__day--content {
position: absolute;
top: 1;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.q-outside .calendar-event {
display: none;
}
.q-calendar-month__workweek,
.q-calendar-month__head--workweek,
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
text-transform: capitalize;
color: #777;
font-weight: bold;
font-size: 0.8rem;
text-align: center;
}
}
.nav-container {
display: flex;
align-items: center;
&.--bordered {
border: 1px solid black;
}
}
</style>

24
src/components/ui/SkeletonForm.vue
View File

@ -1,28 +1,16 @@
<template> <template>
<div class="q-pa-md"> <div class="q-pa-md">
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<div class="col"> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" square /> <QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<div class="col"> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" square /> <QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<div class="col"> <QSkeleton type="QInput" square />
<QSkeleton type="QInput" square /> <QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
</div> </div>
<div class="row q-gutter-md"> <div class="row q-gutter-md">
<QSkeleton type="QBtn" /> <QSkeleton type="QBtn" />

70
src/components/ui/SkeletonSummary.vue
View File

@ -3,46 +3,36 @@
<QSkeleton type="rect" square /> <QSkeleton type="rect" square />
</div> </div>
<div class="row q-pa-md q-col-gutter-md q-mb-md"> <div class="row q-pa-md q-col-gutter-md q-mb-md">
<div class="col"> <QSkeleton type="rect" class="q-mb-md" square />
<QSkeleton type="rect" class="q-mb-md" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="rect" class="q-mb-md" square />
</div> <QSkeleton type="text" square />
<div class="col"> <QSkeleton type="text" square />
<QSkeleton type="rect" class="q-mb-md" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="rect" class="q-mb-md" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
</div> <QSkeleton type="text" square />
<div class="col"> <QSkeleton type="text" square />
<QSkeleton type="rect" class="q-mb-md" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="rect" class="q-mb-md" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
</div> <QSkeleton type="text" square />
<div class="col"> <QSkeleton type="rect" class="q-mb-md" square />
<QSkeleton type="rect" class="q-mb-md" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square /> <QSkeleton type="text" square />
<QSkeleton type="text" square />
</div>
<div class="col">
<QSkeleton type="rect" class="q-mb-md" square />
<QSkeleton type="text" square />
<QSkeleton type="text" square />
<QSkeleton type="text" square />
<QSkeleton type="text" square />
<QSkeleton type="text" square />
</div>
</div> </div>
</template> </template>

53
src/components/ui/SkeletonTable.vue
View File

@ -1,45 +1,20 @@
<template> <template>
<div class="q-pa-md w"> <div class="q-pa-md w">
<div class="row q-gutter-md q-mb-md"> <div class="row q-gutter-md q-mb-md">
<div class="col-1"> <QSkeleton type="rect" square />
<QSkeleton type="rect" square /> <QSkeleton type="rect" square />
</div> <QSkeleton type="rect" square />
<div class="col"> <QSkeleton type="rect" square />
<QSkeleton type="rect" square /> <QSkeleton type="rect" square />
</div> <QSkeleton type="rect" square />
<div class="col"> </div>
<QSkeleton type="rect" square /> <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
</div> <QSkeleton type="QInput" square />
<div class="col"> <QSkeleton type="QInput" square />
<QSkeleton type="rect" square /> <QSkeleton type="QInput" square />
</div> <QSkeleton type="QInput" square />
<div class="col"> <QSkeleton type="QInput" square />
<QSkeleton type="rect" square /> <QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="rect" square />
</div>
</div>
<div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
<div class="col-1">
<QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
<div class="col">
<QSkeleton type="QInput" square />
</div>
</div> </div>
</div> </div>
</template> </template>

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

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import toDate from 'filters/toDate'; import toDate from 'filters/toDate';
import useRedirect from 'src/composables/useRedirect';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue'; import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -56,6 +56,7 @@ const arrayData = useArrayData(props.dataKey, {
const route = useRoute(); const route = useRoute();
const store = arrayData.store; const store = arrayData.store;
const userParams = ref({}); const userParams = ref({});
const { navigate } = useRedirect();
onMounted(() => { onMounted(() => {
if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params)); if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
@ -79,6 +80,7 @@ watch(
const isLoading = ref(false); const isLoading = ref(false);
async function search() { async function search() {
store.filter.where = {};
isLoading.value = true; isLoading.value = true;
const params = { ...userParams.value }; const params = { ...userParams.value };
store.userParamsChanged = true; store.userParamsChanged = true;
@ -91,6 +93,7 @@ async function search() {
isLoading.value = false; isLoading.value = false;
emit('search'); emit('search');
navigate(store.data, {});
} }
async function reload() { async function reload() {
@ -101,6 +104,7 @@ async function reload() {
if (!props.showAll && !params.length) store.data = []; if (!props.showAll && !params.length) store.data = [];
isLoading.value = false; isLoading.value = false;
emit('refresh'); emit('refresh');
navigate(store.data, {});
} }
async function clearFilters() { async function clearFilters() {
@ -146,7 +150,7 @@ const customTags = computed(() =>
async function remove(key) { async function remove(key) {
userParams.value[key] = null; userParams.value[key] = null;
await search(); await arrayData.applyFilter({ params: userParams.value });
emit('remove', key); emit('remove', key);
} }

11
src/components/ui/VnLinkPhone.vue
View File

@ -1,21 +1,16 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; defineProps({ phoneNumber: { type: [String, Number], default: null } });
const props = defineProps({
phoneNumber: { type: [String, Number], default: null },
});
const { t } = useI18n();
</script> </script>
<template> <template>
<QBtn <QBtn
v-if="props.phoneNumber" v-if="phoneNumber"
flat flat
round round
icon="phone" icon="phone"
size="sm" size="sm"
color="primary" color="primary"
padding="none" padding="none"
:href="`sip:${props.phoneNumber}`" :href="`sip:${phoneNumber}`"
@click.stop @click.stop
/> />
</template> </template>
<style scoped></style>

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

@ -1,11 +1,12 @@
<script setup> <script setup>
import VnAvatar from 'src/components/ui/VnAvatar.vue'; import VnAvatar from 'src/components/ui/VnAvatar.vue';
import { toDateHour } from 'src/filters'; import { toDateHourMin } from 'src/filters';
import { ref } from 'vue'; import { ref } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue'; import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue'; import VnUserLink from '../ui/VnUserLink.vue';
import { useState } from 'src/composables/useState';
const $props = defineProps({ const $props = defineProps({
url: { type: String, default: null }, url: { type: String, default: null },
@ -13,8 +14,10 @@ const $props = defineProps({
body: { type: Object, default: () => {} }, body: { type: Object, default: () => {} },
addNote: { type: Boolean, default: false }, addNote: { type: Boolean, default: false },
}); });
const { t } = useI18n(); const { t } = useI18n();
const noteModal = ref(false); const state = useState();
const currentUser = ref(state.getUser());
const newNote = ref(''); const newNote = ref('');
const vnPaginateRef = ref(); const vnPaginateRef = ref();
@ -22,98 +25,83 @@ async function insert() {
const body = $props.body; const body = $props.body;
Object.assign(body, { text: newNote.value }); Object.assign(body, { text: newNote.value });
await axios.post($props.url, body); await axios.post($props.url, body);
vnPaginateRef.value.fetch(); await vnPaginateRef.value.fetch();
newNote.value = ''; newNote.value = '';
} }
</script> </script>
<template> <template>
<div class="column items-center full-height full-width"> <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
<VnPaginate <QCardSection horizontal>
:data-key="$props.url" <VnAvatar :worker-id="currentUser.id" size="md" />
:url="$props.url" <div class="full-width row justify-between q-pa-xs">
order="created DESC" <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
:limit="20" {{ t('globals.now') }}
:filter="$props.filter" </div>
auto-load </QCardSection>
ref="vnPaginateRef" <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
> <QInput
<template #body="{ rows }"> v-model="newNote"
<div class="column items-center full-width"> class="full-width"
<QCard type="textarea"
class="q-pa-xs q-mb-sm full-width" :label="t('Add note here...')"
v-for="(note, index) in rows" filled
:key="index" size="lg"
> autogrow
<QCardSection horizontal> autofocus
<slot name="picture"> @keyup.ctrl.enter.stop="insert"
<VnAvatar clearable
:descriptor="false" >
:worker-id="note.workerFk" <template #append
size="md" ><QBtn
/> :title="t('Save (ctrl + Enter)')"
</slot> icon="save"
<div class="full-width row justify-between q-pa-xs"> color="primary"
<VnUserLink
:name="`${note.worker.user.nickname}`"
:worker-id="note.worker.id"
/>
<slot name="actions">
{{ toDateHour(note.created) }}
</slot>
</div>
</QCardSection>
<QCardSection class="q-pa-xs q-my-none q-py-none">
<slot name="text">
{{ note.text }}
</slot>
</QCardSection>
</QCard>
</div>
</template>
</VnPaginate>
<QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
<QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
</QPageSticky>
<QDialog v-model="noteModal" @hide="newNote = ''">
<QCard>
<QCardSection>
<QItem class="q-px-none">
<span class="text-primary text-h6 full-width">
<QIcon name="draft" class="q-mr-xs" />
{{ t('Add note') }}
</span>
<QBtn icon="close" flat round dense v-close-popup />
</QItem>
</QCardSection>
<QCardSection>
<QInput
autofocus
type="textarea"
:label="t('Add note here...')"
filled
size="lg"
autogrow
v-model="newNote"
></QInput>
</QCardSection>
<QCardActions class="justify-end q-mr-sm">
<QBtn
flat flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn
:label="t('globals.save')"
color="primary"
v-close-popup
@click="insert" @click="insert"
/> />
</QCardActions> </template>
</QCard> </QInput>
</QDialog> </QCardSection>
</div> </QCard>
<VnPaginate
:data-key="$props.url"
:url="$props.url"
order="created DESC"
:limit="0"
:filter="$props.filter"
auto-load
ref="vnPaginateRef"
class="show"
v-bind="$attrs"
>
<template #body="{ rows }">
<TransitionGroup name="list" tag="div" class="column items-center full-width">
<QCard
class="q-pa-xs q-mb-sm full-width"
v-for="(note, index) in rows"
:key="note.id ?? index"
>
<QCardSection horizontal>
<VnAvatar
:descriptor="false"
:worker-id="note.workerFk"
size="md"
/>
<div class="full-width row justify-between q-pa-xs">
<VnUserLink
:name="`${note.worker.user.nickname}`"
:worker-id="note.worker.id"
/>
{{ toDateHourMin(note.created) }}
</div>
</QCardSection>
<QCardSection class="q-pa-xs q-my-none q-py-none">
{{ note.text }}
</QCardSection>
</QCard>
</TransitionGroup>
</template>
</VnPaginate>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.q-card { .q-card {
@ -128,9 +116,20 @@ async function insert() {
.q-dialog .q-card { .q-dialog .q-card {
width: 400px; width: 400px;
} }
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
background-color: $primary;
}
</style> </style>
<i18n> <i18n>
es: es:
Add note here...: Añadir nota aquí... Add note here...: Añadir nota aquí...
Add note: Añadir nota New note: Nueva nota
Save (ctrl + Enter): Guardar (Ctrl + Intro)
</i18n> </i18n>

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

@ -42,6 +42,10 @@ const props = defineProps({
type: Object, type: Object,
default: null, default: null,
}, },
keepOpts: {
type: Array,
default: () => [],
},
offset: { offset: {
type: Number, type: Number,
default: 0, default: 0,
@ -61,7 +65,6 @@ const props = defineProps({
}); });
const emit = defineEmits(['onFetch', 'onPaginate']); const emit = defineEmits(['onFetch', 'onPaginate']);
defineExpose({ fetch });
const isLoading = ref(false); const isLoading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: props.order, sortBy: props.order,
@ -77,6 +80,7 @@ const arrayData = useArrayData(props.dataKey, {
order: props.order, order: props.order,
userParams: props.userParams, userParams: props.userParams,
exprBuilder: props.exprBuilder, exprBuilder: props.exprBuilder,
keepOpts: props.keepOpts,
}); });
const store = arrayData.store; const store = arrayData.store;
@ -91,9 +95,15 @@ watch(
} }
); );
const addFilter = async (filter, params) => {
await arrayData.addFilter({ filter, params });
};
async function fetch() { async function fetch() {
store.filter.skip = 0;
store.skip = 0;
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) { if (!store.hasMoreData) {
isLoading.value = false; isLoading.value = false;
} }
emit('onFetch', store.data); emit('onFetch', store.data);
@ -106,11 +116,10 @@ async function paginate() {
isLoading.value = true; isLoading.value = true;
await arrayData.loadMore(); await arrayData.loadMore();
if (!store.hasMoreData) {
if (!arrayData.hasMoreData.value) { if (store.userParamsChanged) store.hasMoreData = true;
if (store.userParamsChanged) arrayData.hasMoreData.value = true;
store.userParamsChanged = false; store.userParamsChanged = false;
isLoading.value = false; endPagination();
return; return;
} }
@ -120,16 +129,16 @@ async function paginate() {
pagination.value.sortBy = sortBy; pagination.value.sortBy = sortBy;
pagination.value.descending = descending; pagination.value.descending = descending;
isLoading.value = false; endPagination();
}
function endPagination() {
isLoading.value = false;
emit('onFetch', store.data); emit('onFetch', store.data);
emit('onPaginate'); emit('onPaginate');
} }
async function onLoad(index, done) { async function onLoad(index, done) {
if (!store.data) { if (!store.data) return done();
return done();
}
if (store.data.length === 0 || !props.url) return done(false); if (store.data.length === 0 || !props.url) return done(false);
@ -137,9 +146,11 @@ async function onLoad(index, done) {
await paginate(); await paginate();
let isDone = false; let isDone = false;
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value; if (store.userParamsChanged) isDone = !store.hasMoreData;
done(isDone); done(isDone);
} }
defineExpose({ fetch, addFilter });
</script> </script>
<template> <template>
@ -179,8 +190,8 @@ async function onLoad(index, done) {
v-if="store.data" v-if="store.data"
@load="onLoad" @load="onLoad"
:offset="offset" :offset="offset"
:disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
class="full-width" class="full-width"
:disable="disableInfiniteScroll || !store.hasMoreData"
v-bind="$attrs" v-bind="$attrs"
> >
<slot name="body" :rows="store.data"></slot> <slot name="body" :rows="store.data"></slot>
@ -188,6 +199,12 @@ async function onLoad(index, done) {
<QSpinner color="orange" size="md" /> <QSpinner color="orange" size="md" />
</div> </div>
</QInfiniteScroll> </QInfiniteScroll>
<div
v-if="!isLoading && store.hasMoreData"
class="w-full flex justify-center q-mt-md"
>
<QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -204,4 +221,5 @@ async function onLoad(index, done) {
es: es:
No data to display: Sin datos que mostrar No data to display: Sin datos que mostrar
No results found: No se han encontrado resultados No results found: No se han encontrado resultados
Load more data: Cargar más resultados
</i18n> </i18n>

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

@ -1,17 +1,17 @@
<template> <template>
<div id="row" class="q-gutter-md q-mb-md"> <div class="vn-row q-gutter-md q-mb-md">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<style lang="scss" scopped> <style lang="scss" scopped>
#row { .vn-row {
display: flex; display: flex;
> * { > * {
flex: 1; flex: 1;
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#row { .vn-row {
flex-direction: column; flex-direction: column;
} }
} }

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

@ -1,11 +1,13 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import useRedirect from 'src/composables/useRedirect';
import { useI18n } from 'vue-i18n';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
@ -65,10 +67,10 @@ const props = defineProps({
}, },
}); });
const router = useRouter();
const arrayData = useArrayData(props.dataKey, { ...props }); const arrayData = useArrayData(props.dataKey, { ...props });
const { store } = arrayData; const { store } = arrayData;
const searchText = ref(''); const searchText = ref('');
const { navigate } = useRedirect();
onMounted(() => { onMounted(() => {
const params = store.userParams; const params = store.userParams;
@ -81,34 +83,20 @@ async function search() {
const staticParams = Object.entries(store.userParams).filter( const staticParams = Object.entries(store.userParams).filter(
([key, value]) => value && (props.staticParams || []).includes(key) ([key, value]) => value && (props.staticParams || []).includes(key)
); );
store.skip = 0;
await arrayData.applyFilter({ await arrayData.applyFilter({
params: { params: {
...Object.fromEntries(staticParams), ...Object.fromEntries(staticParams),
search: searchText.value, search: searchText.value,
}, },
}); });
if (!props.redirect) return; if (!props.redirect) return;
if (props.customRouteRedirectName) navigate(store.data, {
return router.push({ customRouteRedirectName: props.customRouteRedirectName,
name: props.customRouteRedirectName, searchText: searchText.value,
params: { id: searchText.value }, });
});
const { matched: matches } = router.currentRoute.value;
const { path } = matches.at(-1);
const [, moduleName] = path.split('/');
if (!store.data.length || store.data.length > 1)
return router.push({ path: `/${moduleName}/list` });
const targetId = store.data[0].id;
let targetUrl;
if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
await router.push({ path: targetUrl });
} }
</script> </script>
@ -117,7 +105,7 @@ async function search() {
<VnInput <VnInput
id="searchbar" id="searchbar"
v-model="searchText" v-model="searchText"
:placeholder="props.label" :placeholder="t(props.label)"
dense dense
standout standout
autofocus autofocus
@ -131,19 +119,12 @@ async function search() {
/> />
</template> </template>
<template #append> <template #append>
<QIcon
v-if="searchText !== ''"
name="close"
@click="searchText = ''"
class="cursor-pointer"
/>
<QIcon <QIcon
v-if="props.info && $q.screen.gt.xs" v-if="props.info && $q.screen.gt.xs"
name="info" name="info"
class="cursor-info" class="cursor-info"
> >
<QTooltip>{{ props.info }}</QTooltip> <QTooltip>{{ t(props.info) }}</QTooltip>
</QIcon> </QIcon>
</template> </template>
</VnInput> </VnInput>

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

@ -1,11 +1,27 @@
<script setup> <script setup>
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore(); const stateStore = useStateStore();
const actions = ref(null);
const data = ref(null);
const opts = { subtree: true, childList: true, attributes: true };
const hasContent = ref(false);
onMounted(() => { onMounted(() => {
stateStore.toggleSubToolbar(); stateStore.toggleSubToolbar();
actions.value = document.querySelector('#st-actions');
data.value = document.querySelector('#st-data');
if (!actions.value && !data.value) return;
// Check if there's content to display
const observer = new MutationObserver(
() =>
(hasContent.value =
actions.value.childNodes.length + data.value.childNodes.length)
);
if (actions.value) observer.observe(actions.value, opts);
if (data.value) observer.observe(data.value, opts);
}); });
onUnmounted(() => { onUnmounted(() => {
@ -14,7 +30,10 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<QToolbar class="bg-vn-section-color justify-end sticky"> <QToolbar
class="justify-end sticky"
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
>
<slot name="st-data"> <slot name="st-data">
<div id="st-data"></div> <div id="st-data"></div>
</slot> </slot>

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

@ -76,7 +76,7 @@ const removeNode = (node) => {
notify(t('department.departmentRemoved'), 'positive'); notify(t('department.departmentRemoved'), 'positive');
await fetchNodeLeaves(parentFk); await fetchNodeLeaves(parentFk);
} catch (err) { } catch (err) {
console.log('Error removing department'); console.error('Error removing department');
} }
}); });
}; };
@ -90,7 +90,7 @@ const onNodeCreated = async () => {
await fetchNodeLeaves(creationNodeSelectedId.value); await fetchNodeLeaves(creationNodeSelectedId.value);
}; };
onMounted(async (n) => { onMounted(async () => {
const tree = [...state.get('Tree'), 1]; const tree = [...state.get('Tree'), 1];
const lastStateTree = state.get('TreeState'); const lastStateTree = state.get('TreeState');
if (tree) { if (tree) {

8
src/composables/downloadFile.js
View File

@ -1,11 +1,11 @@
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { getUrl } from './getUrl'; import { getUrl } from './getUrl';
const {getTokenMultimedia} = useSession(); const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia(); const token = getTokenMultimedia();
export async function downloadFile(dmsId) { export async function downloadFile(id, model = 'dms', urlPath = '/downloadFile', url) {
let appUrl = await getUrl('', 'lilium'); let appUrl = await getUrl('', 'lilium');
appUrl = appUrl.replace('/#/', ''); appUrl = appUrl.replace('/#/', '');
window.open(`${appUrl}/api/dms/${dmsId}/downloadFile?access_token=${token}`); window.open(url ?? `${appUrl}/api/${model}/${id}${urlPath}?access_token=${token}`);
} }

6
src/composables/elementIsVisibleInViewport.js Normal file
View File

@ -0,0 +1,6 @@
export const elementIsVisibleInViewport = (el) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

11
src/composables/getDateQBadgeColor.js Normal file
View File

@ -0,0 +1,11 @@
export function getDateQBadgeColor(date) {
let today = Date.vnNew();
today.setHours(0, 0, 0, 0);
let timeTicket = new Date(date);
timeTicket.setHours(0, 0, 0, 0);
let comparation = today - timeTicket;
if (comparation == 0) return 'warning';
if (comparation < 0) return 'negative';
}

52
src/composables/useArrayData.js
View File

@ -1,5 +1,5 @@
import { onMounted, ref, computed } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import { useArrayDataStore } from 'stores/useArrayDataStore'; import { useArrayDataStore } from 'stores/useArrayDataStore';
import { buildFilter } from 'filters/filterPanel'; import { buildFilter } from 'filters/filterPanel';
@ -9,13 +9,9 @@ const arrayDataStore = useArrayDataStore();
export function useArrayData(key, userOptions) { export function useArrayData(key, userOptions) {
if (!key) throw new Error('ArrayData: A key is required to use this composable'); if (!key) throw new Error('ArrayData: A key is required to use this composable');
if (!arrayDataStore.get(key)) { if (!arrayDataStore.get(key)) arrayDataStore.set(key);
arrayDataStore.set(key);
}
const store = arrayDataStore.get(key); const store = arrayDataStore.get(key);
const hasMoreData = ref(false);
const router = useRouter();
const route = useRoute(); const route = useRoute();
let canceller = null; let canceller = null;
@ -23,6 +19,7 @@ export function useArrayData(key, userOptions) {
onMounted(() => { onMounted(() => {
setOptions(); setOptions();
store.skip = 0;
const query = route.query; const query = route.query;
if (query.params) { if (query.params) {
@ -30,9 +27,7 @@ export function useArrayData(key, userOptions) {
} }
}); });
if (key && userOptions) { if (key && userOptions) setOptions();
setOptions();
}
function setOptions() { function setOptions() {
const allowedOptions = [ const allowedOptions = [
@ -52,7 +47,10 @@ export function useArrayData(key, userOptions) {
if (isEmpty || !allowedOptions.includes(option)) continue; if (isEmpty || !allowedOptions.includes(option)) continue;
if (Object.prototype.hasOwnProperty.call(store, option)) { if (Object.prototype.hasOwnProperty.call(store, option)) {
store[option] = userOptions[option]; const defaultOpts = userOptions[option];
store[option] = userOptions.keepOpts?.includes(option)
? Object.assign(defaultOpts, store[option])
: defaultOpts;
} }
} }
} }
@ -97,15 +95,14 @@ export function useArrayData(key, userOptions) {
}); });
const { limit } = filter; const { limit } = filter;
store.hasMoreData = limit && response.data.length >= limit;
hasMoreData.value = response.data.length === limit;
if (append) { if (append) {
if (!store.data) store.data = []; if (!store.data) store.data = [];
for (const row of response.data) store.data.push(row); for (const row of response.data) store.data.push(row);
} else { } else {
store.data = response.data; store.data = response.data;
if (!document.querySelectorAll('[role="dialog"]')) if (!document.querySelectorAll('[role="dialog"]').length)
updateRouter && updateStateParams(); updateRouter && updateStateParams();
} }
@ -133,7 +130,8 @@ export function useArrayData(key, userOptions) {
store.filter = {}; store.filter = {};
if (params) store.userParams = Object.assign({}, params); if (params) store.userParams = Object.assign({}, params);
await fetch({ append: false }); const response = await fetch({ append: false });
return response;
} }
async function addFilter({ filter, params }) { async function addFilter({ filter, params }) {
@ -145,6 +143,8 @@ export function useArrayData(key, userOptions) {
store.userParams = userParams; store.userParams = userParams;
store.skip = 0; store.skip = 0;
store.filter.skip = 0; store.filter.skip = 0;
page.value = 1;
await fetch({ append: false }); await fetch({ append: false });
return { filter, params }; return { filter, params };
} }
@ -155,9 +155,10 @@ export function useArrayData(key, userOptions) {
delete store.userParams[param]; delete store.userParams[param];
delete params[param]; delete params[param];
if (store.filter?.where) { if (store.filter?.where) {
delete store.filter.where[ const key = Object.keys(
Object.keys(exprBuilder ? exprBuilder(param) : param)[0] exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
]; );
if (key[0]) delete store.filter.where[key[0]];
if (Object.keys(store.filter.where).length === 0) { if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where; delete store.filter.where;
} }
@ -168,7 +169,7 @@ export function useArrayData(key, userOptions) {
} }
async function loadMore() { async function loadMore() {
if (!hasMoreData.value) return; if (!store.hasMoreData) return;
store.skip = store.limit * page.value; store.skip = store.limit * page.value;
page.value += 1; page.value += 1;
@ -188,11 +189,15 @@ export function useArrayData(key, userOptions) {
if (store.userParams && Object.keys(store.userParams).length !== 0) if (store.userParams && Object.keys(store.userParams).length !== 0)
query.params = JSON.stringify(store.userParams); query.params = JSON.stringify(store.userParams);
if (router) const url = new URL(window.location.href);
router.replace({ const { hash: currentHash } = url;
path: route.path, const [currentRoute] = currentHash.split('?');
query: query,
}); const params = new URLSearchParams();
for (const param in query) params.append(param, query[param]);
url.hash = currentRoute + '?' + params.toString();
window.history.pushState({}, '', url.hash);
} }
const totalRows = computed(() => (store.data && store.data.length) || 0); const totalRows = computed(() => (store.data && store.data.length) || 0);
@ -206,7 +211,6 @@ export function useArrayData(key, userOptions) {
destroy, destroy,
loadMore, loadMore,
store, store,
hasMoreData,
totalRows, totalRows,
updateStateParams, updateStateParams,
isLoading, isLoading,

25
src/composables/useRedirect.js Normal file
View File

@ -0,0 +1,25 @@
import { useRouter } from 'vue-router';
export default function useRedirect() {
const router = useRouter();
const navigate = (data, { customRouteRedirectName, searchText }) => {
if (customRouteRedirectName)
return router.push({
name: customRouteRedirectName,
params: { id: searchText },
});
const { matched: matches } = router.currentRoute.value;
const { path } = matches.at(-1);
const to =
data.length === 1
? path.replace(/\/(list|:id)|-list/, `/${data[0].id}`)
: path.replace(/:id.*/, '');
router.push({ path: to });
};
return { navigate };
}

113
src/composables/useSession.js
View File

@ -3,31 +3,46 @@ import { useRole } from './useRole';
import { useUserConfig } from './useUserConfig'; import { useUserConfig } from './useUserConfig';
import axios from 'axios'; import axios from 'axios';
import useNotify from './useNotify'; import useNotify from './useNotify';
import { useTokenConfig } from './useTokenConfig';
const TOKEN_MULTIMEDIA = 'tokenMultimedia';
const TOKEN = 'token';
export function useSession() { export function useSession() {
const { notify } = useNotify(); const { notify } = useNotify();
let isCheckingToken = false;
let intervalId = null;
function getToken() { function getToken() {
const localToken = localStorage.getItem('token'); const localToken = localStorage.getItem(TOKEN);
const sessionToken = sessionStorage.getItem('token'); const sessionToken = sessionStorage.getItem(TOKEN);
return localToken || sessionToken || ''; return localToken || sessionToken || '';
} }
function getTokenMultimedia() { function getTokenMultimedia() {
const localTokenMultimedia = localStorage.getItem('token'); // Temporal const localTokenMultimedia = localStorage.getItem(TOKEN_MULTIMEDIA);
const sessionTokenMultimedia = sessionStorage.getItem('token'); // Temporal const sessionTokenMultimedia = sessionStorage.getItem(TOKEN_MULTIMEDIA);
return localTokenMultimedia || sessionTokenMultimedia || ''; return localTokenMultimedia || sessionTokenMultimedia || '';
} }
function setToken(data) { function setSession(data) {
if (data.keepLogin) { let keepLogin = data.keepLogin;
localStorage.setItem('token', data.token); const storage = keepLogin ? localStorage : sessionStorage;
localStorage.setItem('tokenMultimedia', data.tokenMultimedia); storage.setItem(TOKEN, data.token);
} else { storage.setItem(TOKEN_MULTIMEDIA, data.tokenMultimedia);
sessionStorage.setItem('token', data.token); storage.setItem('created', data.created);
sessionStorage.setItem('tokenMultimedia', data.tokenMultimedia); storage.setItem('ttl', data.ttl);
} sessionStorage.setItem('keepLogin', keepLogin);
}
function keepLogin() {
return sessionStorage.getItem('keepLogin');
}
function setToken({ token, tokenMultimedia }) {
const storage = keepLogin() ? localStorage : sessionStorage;
storage.setItem(TOKEN, token);
storage.setItem(TOKEN_MULTIMEDIA, tokenMultimedia);
} }
async function destroyToken(url, storage, key) { async function destroyToken(url, storage, key) {
if (storage.getItem(key)) { if (storage.getItem(key)) {
@ -47,11 +62,15 @@ export function useSession() {
tokenMultimedia: 'Accounts/logout', tokenMultimedia: 'Accounts/logout',
token: 'VnUsers/logout', token: 'VnUsers/logout',
}; };
const storage = keepLogin() ? localStorage : sessionStorage;
for (const [key, url] of Object.entries(tokens)) { for (const [key, url] of Object.entries(tokens)) {
await destroyToken(url, localStorage, key); await destroyToken(url, storage, key);
await destroyToken(url, sessionStorage, key);
} }
localStorage.clear();
sessionStorage.clear();
const { setUser } = useState(); const { setUser } = useState();
setUser({ setUser({
@ -61,22 +80,75 @@ export function useSession() {
lang: '', lang: '',
darkMode: null, darkMode: null,
}); });
stopRenewer();
} }
async function login(token, tokenMultimedia, keepLogin) { async function login(data) {
setToken({ token, tokenMultimedia, keepLogin }); setSession(data);
await useRole().fetch(); await useRole().fetch();
await useUserConfig().fetch(); await useUserConfig().fetch();
await useTokenConfig().fetch();
startInterval();
} }
function isLoggedIn() { function isLoggedIn() {
const localToken = localStorage.getItem('token'); const localToken = localStorage.getItem(TOKEN);
const sessionToken = sessionStorage.getItem('token'); const sessionToken = sessionStorage.getItem(TOKEN);
startInterval();
return !!(localToken || sessionToken); return !!(localToken || sessionToken);
} }
function startInterval() {
stopRenewer();
const renewPeriod = +sessionStorage.getItem('renewPeriod');
if (!renewPeriod) return;
intervalId = setInterval(() => checkValidity(), renewPeriod * 1000);
}
function stopRenewer() {
clearInterval(intervalId);
}
async function renewToken() {
const _token = getToken();
const token = await axios.post('VnUsers/renewToken', {
headers: { Authorization: _token },
});
const _tokenMultimedia = getTokenMultimedia();
const tokenMultimedia = await axios.post('VnUsers/renewToken', {
headers: { Authorization: _tokenMultimedia },
});
setToken({ token: token.data.id, tokenMultimedia: tokenMultimedia.data.id });
}
async function checkValidity() {
const { getTokenConfig } = useState();
const tokenConfig = getTokenConfig() ?? sessionStorage.getItem('tokenConfig');
const storage = keepLogin() ? localStorage : sessionStorage;
const created = +storage.getItem('created');
const ttl = +storage.getItem('ttl');
if (isCheckingToken || !created) return;
isCheckingToken = true;
const renewPeriodInSeconds = Math.min(ttl, tokenConfig.value.renewPeriod) * 1000;
const maxDate = created + renewPeriodInSeconds;
const now = new Date().getTime();
if (isNaN(renewPeriodInSeconds) || now <= maxDate) {
return (isCheckingToken = false);
}
await renewToken();
isCheckingToken = false;
}
return { return {
getToken, getToken,
getTokenMultimedia, getTokenMultimedia,
@ -84,5 +156,8 @@ export function useSession() {
destroy, destroy,
login, login,
isLoggedIn, isLoggedIn,
checkValidity,
setSession,
renewToken,
}; };
} }

32
src/composables/useState.js
View File

@ -13,34 +13,19 @@ const user = ref({
}); });
const roles = ref([]); const roles = ref([]);
const tokenConfig = ref({});
const drawer = ref(true); const drawer = ref(true);
const headerMounted = ref(false); const headerMounted = ref(false);
export function useState() { export function useState() {
function getUser() { function getUser() {
return computed(() => { return computed(() => {
return { return user.value;
id: user.value.id,
name: user.value.name,
nickname: user.value.nickname,
lang: user.value.lang,
darkMode: user.value.darkMode,
companyFk: user.value.companyFk,
warehouseFk: user.value.warehouseFk,
};
}); });
} }
function setUser(data) { function setUser(data) {
user.value = { user.value = data;
id: data.id,
name: data.name,
nickname: data.nickname,
lang: data.lang,
darkMode: data.darkMode,
companyFk: data.companyFk,
warehouseFk: data.warehouseFk,
};
} }
function getRoles() { function getRoles() {
@ -52,6 +37,15 @@ export function useState() {
function setRoles(data) { function setRoles(data) {
roles.value = data; roles.value = data;
} }
function getTokenConfig() {
return computed(() => {
return tokenConfig.value;
});
}
function setTokenConfig(data) {
tokenConfig.value = data;
}
function set(name, data) { function set(name, data) {
state.value[name] = ref(data); state.value[name] = ref(data);
@ -70,6 +64,8 @@ export function useState() {
setUser, setUser,
getRoles, getRoles,
setRoles, setRoles,
getTokenConfig,
setTokenConfig,
set, set,
get, get,
unset, unset,

28
src/composables/useTokenConfig.js Normal file
View File

@ -0,0 +1,28 @@
import axios from 'axios';
import { useState } from './useState';
import useNotify from './useNotify';
export function useTokenConfig() {
const state = useState();
const { notify } = useNotify();
async function fetch() {
try {
const { data } = await axios.get('AccessTokenConfigs/findOne', {
filter: { fields: ['renewInterval', 'renewPeriod'] },
});
if (!data) return;
state.setTokenConfig(data);
sessionStorage.setItem('renewPeriod', data.renewPeriod);
return data;
} catch (error) {
notify('errors.tokenConfig', 'negative');
console.error('Error fetching token config:', error);
}
}
return {
fetch,
state,
};
}

27
src/css/app.scss
View File

@ -1,5 +1,6 @@
// app global css in SCSS form // app global css in SCSS form
@import './icons.scss'; @import './icons.scss';
@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
body.body--light { body.body--light {
--font-color: black; --font-color: black;
@ -74,6 +75,10 @@ select:-webkit-autofill {
background-color: #666666; background-color: #666666;
} }
.color-vn-label {
color: var(--vn-label);
}
.color-vn-text { .color-vn-text {
color: var(--vn-text-color); color: var(--vn-text-color);
} }
@ -82,12 +87,21 @@ select:-webkit-autofill {
color: $white; color: $white;
} }
.card-width {
max-width: 800px;
width: 100%;
}
.vn-card { .vn-card {
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
color: var(--vn-text-color); color: var(--vn-text-color);
border-radius: 8px; border-radius: 8px;
} }
.card-width {
width: 770px;
}
.vn-card-list { .vn-card-list {
width: 100%; width: 100%;
max-width: 60em; max-width: 60em;
@ -105,6 +119,11 @@ select:-webkit-autofill {
font-variation-settings: 'FILL' 1; font-variation-settings: 'FILL' 1;
} }
.fill-icon-on-hover:hover {
font-variation-settings: 'FILL' 1;
cursor: pointer;
}
.vn-table-separation-row { .vn-table-separation-row {
height: 16px !important; height: 16px !important;
background-color: var(--vn-section-color) !important; background-color: var(--vn-section-color) !important;
@ -122,6 +141,10 @@ select:-webkit-autofill {
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
} }
.tr-header {
color: var(--vn-label-color);
}
.q-chip, .q-chip,
.q-notification__message, .q-notification__message,
.q-notification__icon { .q-notification__icon {
@ -162,3 +185,7 @@ input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
} }
.q-scrollarea__content {
max-width: 100%;
}

4
src/css/fonts/icon.svg
View File

@ -80,7 +80,7 @@
<glyph unicode="&#xe94b;" glyph-name="consignatarios" d="M409.6-64v349.867h204.8v-349.867h256v563.2h153.6l-512 460.8-512-460.8h153.6v-563.2h256z" /> <glyph unicode="&#xe94b;" glyph-name="consignatarios" d="M409.6-64v349.867h204.8v-349.867h256v563.2h153.6l-512 460.8-512-460.8h153.6v-563.2h256z" />
<glyph unicode="&#xe94c;" glyph-name="control" d="M418.133 315.733l-128-123.733 256-256 469.333 469.333-128 128-341.333-341.333zM546.133 311.467l34.133 34.133h-68.267zM230.4 128l-59.733 64 153.6 153.6h-68.267v102.4h426.667l204.8 204.8 85.333-85.333v187.733c0 55.467-46.933 102.4-102.4 102.4h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h273.067l-196.267 192zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2c0 29.867 21.333 51.2 51.2 51.2zM256 652.8h512v-102.4h-512v102.4zM665.6-64h204.8c55.467 0 102.4 46.933 102.4 102.4v204.8l-307.2-307.2z" /> <glyph unicode="&#xe94c;" glyph-name="control" d="M418.133 315.733l-128-123.733 256-256 469.333 469.333-128 128-341.333-341.333zM546.133 311.467l34.133 34.133h-68.267zM230.4 128l-59.733 64 153.6 153.6h-68.267v102.4h426.667l204.8 204.8 85.333-85.333v187.733c0 55.467-46.933 102.4-102.4 102.4h-213.333c-21.333 59.733-76.8 102.4-145.067 102.4s-123.733-42.667-145.067-102.4h-213.333c-55.467 0-102.4-46.933-102.4-102.4v-716.8c0-55.467 46.933-102.4 102.4-102.4h273.067l-196.267 192zM512 857.6c29.867 0 51.2-21.333 51.2-51.2s-21.333-51.2-51.2-51.2-51.2 21.333-51.2 51.2c0 29.867 21.333 51.2 51.2 51.2zM256 652.8h512v-102.4h-512v102.4zM665.6-64h204.8c55.467 0 102.4 46.933 102.4 102.4v204.8l-307.2-307.2z" />
<glyph unicode="&#xe94d;" glyph-name="credit" d="M921.6 849.067h-819.2c-55.467 0-102.4-42.667-102.4-98.133v-601.6c0-55.467 46.933-102.4 102.4-102.4h819.2c55.467 0 102.4 42.667 102.4 102.4v601.6c0 55.467-46.933 98.133-102.4 98.133zM921.6 145.067h-819.2v302.933h819.2v-302.933zM921.6 648.533h-819.2v102.4h819.2v-102.4z" /> <glyph unicode="&#xe94d;" glyph-name="credit" d="M921.6 849.067h-819.2c-55.467 0-102.4-42.667-102.4-98.133v-601.6c0-55.467 46.933-102.4 102.4-102.4h819.2c55.467 0 102.4 42.667 102.4 102.4v601.6c0 55.467-46.933 98.133-102.4 98.133zM921.6 145.067h-819.2v302.933h819.2v-302.933zM921.6 648.533h-819.2v102.4h819.2v-102.4z" />
<glyph unicode="&#xe94e;" glyph-name="deaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" /> <glyph unicode="&#xe94e;" glyph-name="defaulter" d="M677.973-64c-30.72 35.84-61.867 70.827-91.307 107.52-40.96 51.2-80.64 103.253-121.173 154.88-16.64 21.333-21.76 20.48-30.72-4.693-13.227-36.693-25.6-73.387-40.107-109.653-5.12-12.8-13.227-26.88-24.32-34.56-51.627-34.987-104.107-69.12-157.867-100.693-10.667-6.4-30.72-5.547-41.813 0.853-8.107 4.693-12.373 23.893-11.093 35.84 0.853 8.96 11.093 19.627 19.627 25.6 39.253 26.453 78.933 51.627 119.040 76.8 18.347 11.52 30.293 26.027 35.84 47.787 12.373 48.213 27.307 95.573 39.253 143.36 8.533 33.707 26.88 58.88 56.32 77.227 40.533 25.173 80.64 52.053 120.747 78.507 6.4 4.267 10.24 11.52 15.36 17.493-7.253 2.56-14.933 7.253-22.187 6.827-75.52-6.4-151.467-13.227-226.987-20.48-2.133 0-4.693-0.853-6.827-0.853-22.613-1.707-39.253 10.24-40.96 29.867s12.373 33.707 35.413 35.84c45.227 4.267 90.88 8.96 136.107 12.8 65.707 5.547 131.84 10.667 197.547 15.36 26.027 1.707 53.76-21.76 67.413-55.467 9.813-23.893 5.12-46.080-18.347-65.28-49.92-40.107-100.693-78.933-151.040-118.187-23.040-17.92-23.893-23.467-6.4-46.507 58.453-78.080 116.48-156.587 174.933-234.667 27.307-36.693 25.173-50.773-12.373-75.52-5.12 0-9.813 0-14.080 0zM791.893 649.813c-43.093 1.28-76.373-31.573-77.227-75.52-0.853-44.373 29.44-76.8 72.107-77.653 45.227-1.28 77.653 29.44 78.080 73.813 0.427 45.227-29.44 78.080-72.96 79.36zM671.147 737.707c0-72.107-34.133-136.107-87.467-176.64l-235.52-21.76c-72.107 36.693-122.027 111.787-122.027 198.4 0 122.88 99.84 222.293 222.72 222.293 122.453 0 222.293-99.413 222.293-222.293zM592.213 680.533l-50.347 18.347c-2.133-8.533-5.12-16.213-9.813-22.613-5.12-6.4-10.24-11.947-16.213-17.067-5.973-4.267-12.373-8.107-19.2-11.093s-13.653-4.693-20.053-5.547c-17.92-2.987-33.707-0.427-48.64 6.827s-26.88 18.347-36.693 32.853l76.373 12.373 7.253 32.427-97.28-15.787c-1.28 5.547-2.987 11.093-3.84 16.64l-0.853 4.267 99.413 16.213 7.253 32.427-106.667-17.493c0.853 9.387 2.987 17.493 6.4 26.027 3.84 8.533 8.107 16.213 14.080 23.040 5.547 6.827 12.8 12.373 21.333 17.067s17.92 8.107 28.587 9.813c6.827 1.28 13.227 1.707 20.907 1.28s14.507-1.707 21.333-3.84c6.827-2.133 13.653-5.973 20.053-10.24 5.973-4.693 11.947-11.093 17.493-18.773l38.827 37.973c-13.227 17.92-30.293 31.147-52.053 39.253-21.76 8.533-46.080 10.667-73.387 6.4-19.627-2.987-36.267-9.387-51.2-17.92-14.507-8.533-26.88-19.2-37.547-32-10.667-12.373-18.773-26.027-23.893-40.96-5.547-14.507-8.96-29.867-9.813-45.653l-21.76-3.84-7.253-32.427 29.013 4.693 0.427-2.987c1.28-6.827 2.56-12.8 4.267-18.347l-23.467-3.84-8.107-32.427 43.52 7.253c6.827-13.653 15.787-26.027 26.027-36.693 10.24-11.52 22.187-20.48 35.413-27.733 13.227-7.68 27.307-12.8 42.667-15.787s31.573-3.413 47.36-0.853c12.373 2.133 24.32 5.12 35.84 10.667s22.613 11.52 32.853 19.2c10.24 8.107 18.347 16.64 26.027 26.453 6.827 9.387 12.373 20.48 15.36 32.427z" />
<glyph unicode="&#xe94f;" glyph-name="deletedTicket" d="M160.672 85.696h693.248v639.776c0 0-2.016 234.528-349.696 234.528s-343.552-234.528-343.552-234.528v-639.776zM291.328 652.704h170.976v152.256h102.336v-152.256h171.008v-102.336h-171.008v-356.96h-102.336v356.96h-170.976v102.336zM64 61.056v-123.456h899.008v123.456h-899.008z" /> <glyph unicode="&#xe94f;" glyph-name="deletedTicket" d="M160.672 85.696h693.248v639.776c0 0-2.016 234.528-349.696 234.528s-343.552-234.528-343.552-234.528v-639.776zM291.328 652.704h170.976v152.256h102.336v-152.256h171.008v-102.336h-171.008v-356.96h-102.336v356.96h-170.976v102.336zM64 61.056v-123.456h899.008v123.456h-899.008z" />
<glyph unicode="&#xe950;" glyph-name="deleteline" d="M354.133 192l-98.133 98.133 157.867 153.6-157.867 157.867 98.133 102.4 157.867-157.867 157.867 153.6 98.133-98.133-157.867-157.867 157.867-153.6-98.133-98.133-157.867 157.867-157.867-157.867zM780.8 507.733l-64-64 59.733-55.467h247.467v119.467h-243.2zM307.2 443.733l-64 64h-243.2v-119.467h251.733l55.467 55.467z" /> <glyph unicode="&#xe950;" glyph-name="deleteline" d="M354.133 192l-98.133 98.133 157.867 153.6-157.867 157.867 98.133 102.4 157.867-157.867 157.867 153.6 98.133-98.133-157.867-157.867 157.867-153.6-98.133-98.133-157.867 157.867-157.867-157.867zM780.8 507.733l-64-64 59.733-55.467h247.467v119.467h-243.2zM307.2 443.733l-64 64h-243.2v-119.467h251.733l55.467 55.467z" />
<glyph unicode="&#xe951;" glyph-name="delivery" d="M789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM725.333 682.667c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067zM311.467 597.333c0 46.933 29.867 85.333 59.733 93.867 4.267 0 4.267 0 8.533 0l98.133 12.8v-51.2c0-46.933-29.867-85.333-59.733-93.867-4.267 0-4.267 0-8.533 0l-98.133-17.067v55.467zM311.467 516.267l46.933 8.533c17.067 4.267 29.867-17.067 29.867-38.4l4.267-29.867-51.2-4.267c-17.067-4.267-29.867 12.8-29.867 38.4v25.6zM149.333 597.333v51.2l85.333 12.8c34.133 4.267 55.467-25.6 55.467-72.533v-51.2l-85.333-12.8c-34.133 0-59.733 29.867-55.467 72.533zM285.867 512v-38.4c0-34.133-21.333-64-42.667-68.267h-4.267l-72.533-8.533v38.4c0 34.133 21.333 64 42.667 68.267h4.267l72.533 8.533z" /> <glyph unicode="&#xe951;" glyph-name="delivery" d="M789.333 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4 102.4 46.933 102.4 102.4c0 59.733-46.933 102.4-102.4 102.4zM789.333 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2 51.2-21.333 51.2-51.2c0-25.6-25.6-51.2-51.2-51.2zM251.733 264.533c-55.467 0-102.4-46.933-102.4-102.4s46.933-102.4 102.4-102.4c55.467 0 102.4 46.933 102.4 102.4 0 59.733-46.933 102.4-102.4 102.4zM251.733 110.933c-29.867 0-51.2 21.333-51.2 51.2s21.333 51.2 51.2 51.2c29.867 0 51.2-21.333 51.2-51.2 0-25.6-25.6-51.2-51.2-51.2zM1006.933 537.6l-196.267 192c-12.8 12.8-29.867 17.067-46.933 17.067h-98.133v38.4c0 25.6-21.333 51.2-51.2 51.2h-563.2c-29.867 0-51.2-21.333-51.2-51.2v-554.667c0-29.867 25.6-51.2 51.2-51.2h68.267c8.533 64 64 115.2 132.267 115.2 64 0 123.733-51.2 132.267-115.2h268.8c8.533 64 64 115.2 132.267 115.2s128-51.2 136.533-115.2h51.2c29.867 0 51.2 25.6 51.2 51.2v260.267c0 17.067-8.533 34.133-17.067 46.933zM725.333 682.667c0 4.267 4.267 8.533 8.533 8.533h34.133c0 0 4.267 0 4.267-4.267l153.6-145.067c4.267 0 0-12.8-4.267-12.8h-187.733c-8.533 0-8.533 4.267-8.533 8.533v145.067zM311.467 597.333c0 46.933 29.867 85.333 59.733 93.867 4.267 0 4.267 0 8.533 0l98.133 12.8v-51.2c0-46.933-29.867-85.333-59.733-93.867-4.267 0-4.267 0-8.533 0l-98.133-17.067v55.467zM311.467 516.267l46.933 8.533c17.067 4.267 29.867-17.067 29.867-38.4l4.267-29.867-51.2-4.267c-17.067-4.267-29.867 12.8-29.867 38.4v25.6zM149.333 597.333v51.2l85.333 12.8c34.133 4.267 55.467-25.6 55.467-72.533v-51.2l-85.333-12.8c-34.133 0-59.733 29.867-55.467 72.533zM285.867 512v-38.4c0-34.133-21.333-64-42.667-68.267h-4.267l-72.533-8.533v38.4c0 34.133 21.333 64 42.667 68.267h4.267l72.533 8.533z" />
@ -132,4 +132,4 @@
<glyph unicode="&#xe989;" glyph-name="polizon" d="M1011.2 456.533l-264.533 106.667 29.867 29.867c4.267 4.267 4.267 12.8 4.267 17.067-4.267 4.267-8.533 8.533-12.8 8.533h-157.867c0 93.867 76.8 157.867 174.933 157.867 4.267 0 8.533 4.267 12.8 8.533s4.267 8.533 0 17.067l-81.067 153.6c-4.267 0-12.8 4.267-17.067 4.267-46.933 0-93.867-17.067-132.267-42.667-25.6-17.067-42.667-38.4-55.467-59.733-12.8 25.6-29.867 42.667-55.467 59.733-38.4 25.6-85.333 42.667-132.267 42.667-4.267 0-12.8-4.267-12.8-8.533l-81.067-153.6c-4.267-4.267-4.267-8.533 0-17.067 4.267-4.267 8.533-8.533 12.8-8.533 98.133 0 174.933-59.733 174.933-153.6v0h-140.8c-4.267 0-12.8-4.267-12.8-8.533-4.267-4.267 0-12.8 4.267-17.067l21.333-21.333-277.333-110.933c-8.533-8.533-12.8-12.8-8.533-21.333 0-8.533 8.533-12.8 17.067-12.8 0 0 0 0 0 0l98.133 4.267-76.8-98.133c0-4.267-4.267-8.533 0-12.8 0-4.267 4.267-8.533 8.533-8.533l85.333-34.133v-179.2c0-8.533 4.267-12.8 8.533-12.8l362.667-145.067c0 0 4.267 0 4.267 0s4.267 0 4.267 0l362.667 145.067c4.267 4.267 8.533 8.533 8.533 12.8v179.2l85.333 34.133c4.267 0 8.533 4.267 8.533 8.533s0 8.533-4.267 12.8l-72.533 98.133 102.4-4.267c8.533 0 12.8 4.267 17.067 12.8 0 8.533-4.267 12.8-12.8 17.067zM110.933 460.8l200.533 81.067 8.533-8.533-170.667-68.267-38.4-4.267zM153.6 294.4v4.267l-72.533 29.867 72.533 98.133 328.533-132.267-72.533-98.133-256 102.4v-4.267zM494.933-25.6l-328.533 132.267v153.6l243.2-98.133c0 0 4.267 0 4.267 0h4.267c0 0 4.267 0 4.267 0v0c0 0 0 0 4.267 0v0c0 0 4.267 0 4.267 4.267l64 85.333v-277.333zM494.933 328.533l-302.933 119.467 149.333 59.733 153.6-162.133v-17.067zM529.067 345.6l162.133 157.867 140.8-55.467-302.933-119.467v17.067zM857.6 106.667l-328.533-132.267v281.6l64-85.333c0 0 0-4.267 4.267-4.267v0c0 0 4.267 0 4.267 0v0c0 0 4.267 0 4.267 0v0 0c0 0 4.267 0 4.267 0l243.2 98.133v-157.867zM942.933 328.533l-328.533-132.267-72.533 98.133 328.533 132.267 72.533-98.133zM874.667 465.067l-162.133 64 12.8 8.533 187.733-76.8-38.4 4.267z" /> <glyph unicode="&#xe989;" glyph-name="polizon" d="M1011.2 456.533l-264.533 106.667 29.867 29.867c4.267 4.267 4.267 12.8 4.267 17.067-4.267 4.267-8.533 8.533-12.8 8.533h-157.867c0 93.867 76.8 157.867 174.933 157.867 4.267 0 8.533 4.267 12.8 8.533s4.267 8.533 0 17.067l-81.067 153.6c-4.267 0-12.8 4.267-17.067 4.267-46.933 0-93.867-17.067-132.267-42.667-25.6-17.067-42.667-38.4-55.467-59.733-12.8 25.6-29.867 42.667-55.467 59.733-38.4 25.6-85.333 42.667-132.267 42.667-4.267 0-12.8-4.267-12.8-8.533l-81.067-153.6c-4.267-4.267-4.267-8.533 0-17.067 4.267-4.267 8.533-8.533 12.8-8.533 98.133 0 174.933-59.733 174.933-153.6v0h-140.8c-4.267 0-12.8-4.267-12.8-8.533-4.267-4.267 0-12.8 4.267-17.067l21.333-21.333-277.333-110.933c-8.533-8.533-12.8-12.8-8.533-21.333 0-8.533 8.533-12.8 17.067-12.8 0 0 0 0 0 0l98.133 4.267-76.8-98.133c0-4.267-4.267-8.533 0-12.8 0-4.267 4.267-8.533 8.533-8.533l85.333-34.133v-179.2c0-8.533 4.267-12.8 8.533-12.8l362.667-145.067c0 0 4.267 0 4.267 0s4.267 0 4.267 0l362.667 145.067c4.267 4.267 8.533 8.533 8.533 12.8v179.2l85.333 34.133c4.267 0 8.533 4.267 8.533 8.533s0 8.533-4.267 12.8l-72.533 98.133 102.4-4.267c8.533 0 12.8 4.267 17.067 12.8 0 8.533-4.267 12.8-12.8 17.067zM110.933 460.8l200.533 81.067 8.533-8.533-170.667-68.267-38.4-4.267zM153.6 294.4v4.267l-72.533 29.867 72.533 98.133 328.533-132.267-72.533-98.133-256 102.4v-4.267zM494.933-25.6l-328.533 132.267v153.6l243.2-98.133c0 0 4.267 0 4.267 0h4.267c0 0 4.267 0 4.267 0v0c0 0 0 0 4.267 0v0c0 0 4.267 0 4.267 4.267l64 85.333v-277.333zM494.933 328.533l-302.933 119.467 149.333 59.733 153.6-162.133v-17.067zM529.067 345.6l162.133 157.867 140.8-55.467-302.933-119.467v17.067zM857.6 106.667l-328.533-132.267v281.6l64-85.333c0 0 0-4.267 4.267-4.267v0c0 0 4.267 0 4.267 0v0c0 0 4.267 0 4.267 0v0 0c0 0 4.267 0 4.267 0l243.2 98.133v-157.867zM942.933 328.533l-328.533-132.267-72.533 98.133 328.533 132.267 72.533-98.133zM874.667 465.067l-162.133 64 12.8 8.533 187.733-76.8-38.4 4.267z" />
<glyph unicode="&#xe98a;" glyph-name="preserved" d="M512-64c16.213 0 28.587 13.227 28.587 28.587v215.040h2.987c73.387 2.133 130.987 25.173 170.667 67.84 68.267 72.107 62.72 177.493 60.16 197.973v0c-1.28 15.36-14.080 28.16-29.44 29.44-7.253 0.853-33.707 2.987-67.84-2.133l-12.373-2.133 11.093 6.827c14.080 8.96 26.453 19.2 37.547 30.72 68.267 72.107 62.72 177.493 60.16 197.973-1.28 15.36-14.080 28.16-29.44 29.44-14.080 1.28-64 4.267-117.76-14.507l-4.267-1.28 0.853 5.12c2.987 15.36 4.267 31.573 4.267 46.933-2.56 98.56-78.933 168.107-93.867 180.48-12.373 10.24-29.44 10.24-41.813 0-15.36-11.947-92.16-81.067-94.72-180.48-0.853-16.213 0.853-31.573 4.267-47.787l0.853-5.12-4.267 1.28c-53.76 19.2-104.533 16.213-118.613 14.507-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.867 60.16-197.973 11.093-11.093 22.613-21.333 36.693-30.293l10.24-6.827-12.373 2.133c-16.213 2.133-30.293 2.987-41.387 2.987s-19.2-0.853-23.467-0.853c-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.013 60.16-197.973 39.68-41.813 97.28-64.853 169.813-67.84h2.987v-215.040c0.427-14.933 12.8-28.16 29.013-28.16zM715.093 418.133h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.72-71.253-46.933-127.147-49.92h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 38.827 37.973 92.587 44.8 121.173 44.8zM713.813 679.253h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.293-71.253-46.933-127.147-49.493h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 39.253 37.12 93.013 43.52 121.173 44.373zM454.4 770.56c1.28 55.040 35.413 99.413 55.893 120.747l2.133 2.133 2.133-2.133c20.053-21.333 53.76-65.707 55.893-120.747 1.28-43.52-17.493-87.040-55.040-128.853l-2.133-2.133-2.133 2.133c-39.68 41.813-58.027 85.333-56.747 128.853zM351.573 548.267c-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c34.56-0.853 84.053-8.96 121.6-43.947v0c31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-2.987c-56.32 2.133-98.987 18.773-127.573 49.067zM479.573 237.653c-55.893 2.133-98.56 19.2-127.147 49.493-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c28.587-0.853 82.347-7.253 121.6-43.947 31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-3.413zM471.467 416.427c-8.96 8.107-18.347 15.36-29.44 22.613l-11.093 6.827 12.373-1.28c21.333-2.987 41.813-3.84 64-2.987 0.853 0 1.28 0 2.133 0h2.56c0.853 0 1.28 0 2.133 0 5.12 0 9.387 0 14.507 0 17.493 0 35.413 1.28 52.053 3.84l13.227 2.133-11.093-7.253c-11.093-6.827-20.48-14.507-29.44-22.613-14.507-14.080-28.16-31.573-38.827-51.627l-2.133-4.267-2.133 4.267c-10.667 18.773-23.893 36.267-38.827 50.347z" /> <glyph unicode="&#xe98a;" glyph-name="preserved" d="M512-64c16.213 0 28.587 13.227 28.587 28.587v215.040h2.987c73.387 2.133 130.987 25.173 170.667 67.84 68.267 72.107 62.72 177.493 60.16 197.973v0c-1.28 15.36-14.080 28.16-29.44 29.44-7.253 0.853-33.707 2.987-67.84-2.133l-12.373-2.133 11.093 6.827c14.080 8.96 26.453 19.2 37.547 30.72 68.267 72.107 62.72 177.493 60.16 197.973-1.28 15.36-14.080 28.16-29.44 29.44-14.080 1.28-64 4.267-117.76-14.507l-4.267-1.28 0.853 5.12c2.987 15.36 4.267 31.573 4.267 46.933-2.56 98.56-78.933 168.107-93.867 180.48-12.373 10.24-29.44 10.24-41.813 0-15.36-11.947-92.16-81.067-94.72-180.48-0.853-16.213 0.853-31.573 4.267-47.787l0.853-5.12-4.267 1.28c-53.76 19.2-104.533 16.213-118.613 14.507-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.867 60.16-197.973 11.093-11.093 22.613-21.333 36.693-30.293l10.24-6.827-12.373 2.133c-16.213 2.133-30.293 2.987-41.387 2.987s-19.2-0.853-23.467-0.853c-15.36-1.28-28.16-14.080-29.44-29.44-2.133-20.48-8.107-125.013 60.16-197.973 39.68-41.813 97.28-64.853 169.813-67.84h2.987v-215.040c0.427-14.933 12.8-28.16 29.013-28.16zM715.093 418.133h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.72-71.253-46.933-127.147-49.92h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 38.827 37.973 92.587 44.8 121.173 44.8zM713.813 679.253h2.987v-2.987c-0.853-30.72-7.253-87.467-45.653-128-28.587-30.293-71.253-46.933-127.147-49.493h-2.987v2.987c2.133 58.88 20.053 103.68 51.627 133.12 39.253 37.12 93.013 43.52 121.173 44.373zM454.4 770.56c1.28 55.040 35.413 99.413 55.893 120.747l2.133 2.133 2.133-2.133c20.053-21.333 53.76-65.707 55.893-120.747 1.28-43.52-17.493-87.040-55.040-128.853l-2.133-2.133-2.133 2.133c-39.68 41.813-58.027 85.333-56.747 128.853zM351.573 548.267c-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c34.56-0.853 84.053-8.96 121.6-43.947v0c31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-2.987c-56.32 2.133-98.987 18.773-127.573 49.067zM479.573 237.653c-55.893 2.133-98.56 19.2-127.147 49.493-37.547 39.68-44.8 97.28-45.653 128v2.987h2.987c28.587-0.853 82.347-7.253 121.6-43.947 31.573-29.44 48.64-74.24 51.627-133.12v-2.987h-3.413zM471.467 416.427c-8.96 8.107-18.347 15.36-29.44 22.613l-11.093 6.827 12.373-1.28c21.333-2.987 41.813-3.84 64-2.987 0.853 0 1.28 0 2.133 0h2.56c0.853 0 1.28 0 2.133 0 5.12 0 9.387 0 14.507 0 17.493 0 35.413 1.28 52.053 3.84l13.227 2.133-11.093-7.253c-11.093-6.827-20.48-14.507-29.44-22.613-14.507-14.080-28.16-31.573-38.827-51.627l-2.133-4.267-2.133 4.267c-10.667 18.773-23.893 36.267-38.827 50.347z" />
<glyph unicode="&#xe98b;" glyph-name="recovery" d="M746.667 477.867c68.267 0 140.8-21.333 196.267-72.533 110.933-102.4 115.2-277.333 8.533-384s-277.333-115.2-384-8.533c-93.867 85.333-110.933 221.867-51.2 328.533l51.2-46.933c-34.133-76.8-17.067-170.667 46.933-230.4 81.067-76.8 209.067-72.533 290.133 8.533 76.8 81.067 72.533 209.067-8.533 290.133-42.667 38.4-93.867 55.467-145.067 55.467l4.267-153.6-170.667 162.133 162.133 170.667v-119.467zM337.067 209.067c0 0 0 0 0 0-17.067 8.533-38.4 17.067-55.467 25.6-21.333 8.533-29.867 25.6-29.867 51.2s0 51.2 0 81.067c29.867-17.067 64-29.867 102.4-38.4 4.267 17.067 12.8 34.133 21.333 51.2-17.067 4.267-34.133 8.533-51.2 17.067-21.333 8.533-38.4 21.333-55.467 29.867-12.8 8.533-17.067 17.067-12.8 34.133 0 29.867 0 55.467 0 85.333 68.267-29.867 132.267-46.933 200.533-51.2 17.067 21.333 38.4 38.4 64 55.467 0 0-4.267 0-4.267 0-51.2 0-106.667 4.267-157.867 21.333-34.133 0-59.733 12.8-81.067 29.867-29.867 21.333-29.867 42.667 4.267 64 38.4 25.6 81.067 34.133 128 42.667 55.467 8.533 110.933 8.533 166.4 4.267 51.2-4.267 102.4-17.067 149.333-38.4 12.8-4.267 42.667-29.867 38.4-55.467 55.467 0 106.667-12.8 153.6-34.133 17.067 4.267 29.867 8.533 46.933 12.8 0-12.8 0-25.6 0-38.4 21.333-12.8 38.4-25.6 55.467-42.667 0 98.133 0 200.533 0 298.667 0 42.667-17.067 72.533-51.2 93.867-46.933 29.867-98.133 38.4-149.333 42.667-34.133 8.533-72.533 8.533-110.933 8.533-72.533-4.267-140.8-21.333-200.533-64-4.267 0-8.533 4.267-8.533 4.267-51.2 34.133-110.933 46.933-170.667 51.2-51.2 0-102.4 0-153.6-8.533-46.933-8.533-93.867-17.067-136.533-46.933-25.6-21.333-38.4-42.667-38.4-76.8 0-145.067 0-294.4 0-439.467 0-38.4 17.067-64 46.933-81.067 21.333-12.8 46.933-25.6 72.533-29.867 25.6-8.533 51.2-12.8 81.067-17.067 17.067-46.933 55.467-68.267 102.4-85.333 12.8-4.267 29.867-8.533 42.667-12.8-4.267 17.067-8.533 34.133-8.533 55.467zM964.267 686.933c0-8.533-8.533-21.333-17.067-25.6-34.133-21.333-76.8-34.133-119.467-38.4-4.267 38.4-17.067 68.267-55.467 89.6 68.267 0 128 12.8 192 42.667 4.267-25.6 4.267-46.933 0-68.267zM610.133 883.2c68.267 17.067 136.533 25.6 204.8 17.067 42.667-4.267 85.333-12.8 128-34.133 12.8-8.533 21.333-12.8 25.6-34.133-8.533-8.533-17.067-17.067-25.6-21.333-29.867-17.067-64-29.867-98.133-34.133-38.4-4.267-76.8-8.533-115.2-8.533-46.933 0-89.6 8.533-132.267 25.6-21.333 8.533-42.667 17.067-55.467 42.667 12.8 29.867 38.4 42.667 68.267 46.933zM68.267 844.8c25.6 25.6 64 34.133 98.133 38.4 29.867 4.267 59.733 12.8 85.333 12.8 68.267 0 132.267-4.267 196.267-34.133 8.533-4.267 17.067-8.533 25.6-17.067 12.8-8.533 12.8-21.333 0-34.133-8.533-8.533-17.067-12.8-29.867-21.333-42.667-21.333-85.333-29.867-132.267-34.133-17.067 0-29.867 0-42.667 0-55.467 4.267-110.933 12.8-162.133 29.867-12.8 4.267-29.867 12.8-42.667 21.333-12.8 17.067-8.533 25.6 4.267 38.4zM196.267 307.2c-25.6 8.533-51.2 12.8-72.533 21.333-8.533 4.267-21.333 8.533-29.867 12.8-25.6 12.8-38.4 29.867-34.133 59.733 0 17.067 0 29.867 0 51.2 46.933-25.6 89.6-34.133 136.533-38.4 0-42.667 0-72.533 0-106.667zM55.467 529.067c0 21.333 0 42.667 0 59.733 46.933-12.8 93.867-21.333 140.8-34.133 0-29.867 0-59.733 0-93.867-34.133 4.267-64 12.8-93.867 21.333-8.533 4.267-21.333 12.8-29.867 17.067-12.8 8.533-17.067 17.067-17.067 29.867zM196.267 618.667c-4.267 0-12.8-4.267-17.067 0-34.133 0-68.267 12.8-102.4 29.867-12.8 8.533-21.333 21.333-21.333 38.4s0 38.4 0 59.733c59.733-25.6 115.2-38.4 179.2-42.667-21.333-25.6-42.667-51.2-38.4-85.333z" /> <glyph unicode="&#xe98b;" glyph-name="recovery" d="M746.667 477.867c68.267 0 140.8-21.333 196.267-72.533 110.933-102.4 115.2-277.333 8.533-384s-277.333-115.2-384-8.533c-93.867 85.333-110.933 221.867-51.2 328.533l51.2-46.933c-34.133-76.8-17.067-170.667 46.933-230.4 81.067-76.8 209.067-72.533 290.133 8.533 76.8 81.067 72.533 209.067-8.533 290.133-42.667 38.4-93.867 55.467-145.067 55.467l4.267-153.6-170.667 162.133 162.133 170.667v-119.467zM337.067 209.067c0 0 0 0 0 0-17.067 8.533-38.4 17.067-55.467 25.6-21.333 8.533-29.867 25.6-29.867 51.2s0 51.2 0 81.067c29.867-17.067 64-29.867 102.4-38.4 4.267 17.067 12.8 34.133 21.333 51.2-17.067 4.267-34.133 8.533-51.2 17.067-21.333 8.533-38.4 21.333-55.467 29.867-12.8 8.533-17.067 17.067-12.8 34.133 0 29.867 0 55.467 0 85.333 68.267-29.867 132.267-46.933 200.533-51.2 17.067 21.333 38.4 38.4 64 55.467 0 0-4.267 0-4.267 0-51.2 0-106.667 4.267-157.867 21.333-34.133 0-59.733 12.8-81.067 29.867-29.867 21.333-29.867 42.667 4.267 64 38.4 25.6 81.067 34.133 128 42.667 55.467 8.533 110.933 8.533 166.4 4.267 51.2-4.267 102.4-17.067 149.333-38.4 12.8-4.267 42.667-29.867 38.4-55.467 55.467 0 106.667-12.8 153.6-34.133 17.067 4.267 29.867 8.533 46.933 12.8 0-12.8 0-25.6 0-38.4 21.333-12.8 38.4-25.6 55.467-42.667 0 98.133 0 200.533 0 298.667 0 42.667-17.067 72.533-51.2 93.867-46.933 29.867-98.133 38.4-149.333 42.667-34.133 8.533-72.533 8.533-110.933 8.533-72.533-4.267-140.8-21.333-200.533-64-4.267 0-8.533 4.267-8.533 4.267-51.2 34.133-110.933 46.933-170.667 51.2-51.2 0-102.4 0-153.6-8.533-46.933-8.533-93.867-17.067-136.533-46.933-25.6-21.333-38.4-42.667-38.4-76.8 0-145.067 0-294.4 0-439.467 0-38.4 17.067-64 46.933-81.067 21.333-12.8 46.933-25.6 72.533-29.867 25.6-8.533 51.2-12.8 81.067-17.067 17.067-46.933 55.467-68.267 102.4-85.333 12.8-4.267 29.867-8.533 42.667-12.8-4.267 17.067-8.533 34.133-8.533 55.467zM964.267 686.933c0-8.533-8.533-21.333-17.067-25.6-34.133-21.333-76.8-34.133-119.467-38.4-4.267 38.4-17.067 68.267-55.467 89.6 68.267 0 128 12.8 192 42.667 4.267-25.6 4.267-46.933 0-68.267zM610.133 883.2c68.267 17.067 136.533 25.6 204.8 17.067 42.667-4.267 85.333-12.8 128-34.133 12.8-8.533 21.333-12.8 25.6-34.133-8.533-8.533-17.067-17.067-25.6-21.333-29.867-17.067-64-29.867-98.133-34.133-38.4-4.267-76.8-8.533-115.2-8.533-46.933 0-89.6 8.533-132.267 25.6-21.333 8.533-42.667 17.067-55.467 42.667 12.8 29.867 38.4 42.667 68.267 46.933zM68.267 844.8c25.6 25.6 64 34.133 98.133 38.4 29.867 4.267 59.733 12.8 85.333 12.8 68.267 0 132.267-4.267 196.267-34.133 8.533-4.267 17.067-8.533 25.6-17.067 12.8-8.533 12.8-21.333 0-34.133-8.533-8.533-17.067-12.8-29.867-21.333-42.667-21.333-85.333-29.867-132.267-34.133-17.067 0-29.867 0-42.667 0-55.467 4.267-110.933 12.8-162.133 29.867-12.8 4.267-29.867 12.8-42.667 21.333-12.8 17.067-8.533 25.6 4.267 38.4zM196.267 307.2c-25.6 8.533-51.2 12.8-72.533 21.333-8.533 4.267-21.333 8.533-29.867 12.8-25.6 12.8-38.4 29.867-34.133 59.733 0 17.067 0 29.867 0 51.2 46.933-25.6 89.6-34.133 136.533-38.4 0-42.667 0-72.533 0-106.667zM55.467 529.067c0 21.333 0 42.667 0 59.733 46.933-12.8 93.867-21.333 140.8-34.133 0-29.867 0-59.733 0-93.867-34.133 4.267-64 12.8-93.867 21.333-8.533 4.267-21.333 12.8-29.867 17.067-12.8 8.533-17.067 17.067-17.067 29.867zM196.267 618.667c-4.267 0-12.8-4.267-17.067 0-34.133 0-68.267 12.8-102.4 29.867-12.8 8.533-21.333 21.333-21.333 38.4s0 38.4 0 59.733c59.733-25.6 115.2-38.4 179.2-42.667-21.333-25.6-42.667-51.2-38.4-85.333z" />
</font></defs></svg> </font></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 173 KiB

After

Width:  |  Height:  |  Size: 173 KiB

2925
src/css/fonts/selection.json
View File

File diff suppressed because one or more lines are too long

310
src/css/icons.scss
View File

@ -1,402 +1,418 @@
@font-face { @font-face {
font-family: 'icon'; font-family: 'icon';
src: url('fonts/icon.eot?2omjsr'); src: url('fonts/icon.eot?2omjsr');
src: url('fonts/icon.eot?2omjsr#iefix') format('embedded-opentype'), src: url('fonts/icon.eot?2omjsr#iefix') format('embedded-opentype'),
url('fonts/icon.ttf?2omjsr') format('truetype'), url('fonts/icon.ttf?2omjsr') format('truetype'),
url('fonts/icon.woff?2omjsr') format('woff'), url('fonts/icon.woff?2omjsr') format('woff'),
url('fonts/icon.svg?2omjsr#icon') format('svg'); url('fonts/icon.svg?2omjsr#icon') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
} }
[class^="icon-"], [class*=" icon-"] { [class^='icon-'],
/* use !important to prevent issues with browser extensions that change fonts */ [class*=' icon-'] {
font-family: 'icon' !important; /* use !important to prevent issues with browser extensions that change fonts */
speak: never; font-family: 'icon' !important;
font-style: normal; speak: never;
font-weight: normal; font-style: normal;
font-variant: normal; font-weight: normal;
text-transform: none; font-variant: normal;
line-height: 1; text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-100:before { .icon-100:before {
content: "\e926"; content: '\e926';
} }
.icon-Client_unpaid:before { .icon-Client_unpaid:before {
content: "\e925"; content: '\e925';
}
.icon-Client_unpaid:before {
content: '\e925';
} }
.icon-History:before { .icon-History:before {
content: "\e964"; content: '\e964';
} }
.icon-Person:before { .icon-Person:before {
content: "\e984"; content: '\e984';
} }
.icon-accessory:before { .icon-accessory:before {
content: "\e948"; content: '\e948';
} }
.icon-account:before { .icon-account:before {
content: "\e927"; content: '\e927';
} }
.icon-actions:before { .icon-actions:before {
content: "\e928"; content: '\e928';
} }
.icon-addperson:before { .icon-addperson:before {
content: "\e929"; content: '\e929';
} }
.icon-agency:before { .icon-agency:before {
content: "\e92a"; content: '\e92a';
}
.icon-agency:before {
content: '\e92a';
} }
.icon-agency-term:before { .icon-agency-term:before {
content: "\e92b"; content: '\e92b';
} }
.icon-albaran:before { .icon-albaran:before {
content: "\e92c"; content: '\e92c';
}
.icon-albaran:before {
content: '\e92c';
} }
.icon-anonymous:before { .icon-anonymous:before {
content: "\e92d"; content: '\e92d';
} }
.icon-apps:before { .icon-apps:before {
content: "\e92e"; content: '\e92e';
} }
.icon-artificial:before { .icon-artificial:before {
content: "\e92f"; content: '\e92f';
} }
.icon-attach:before { .icon-attach:before {
content: "\e930"; content: '\e930';
} }
.icon-barcode:before { .icon-barcode:before {
content: "\e932"; content: '\e932';
} }
.icon-basket:before { .icon-basket:before {
content: "\e933"; content: '\e933';
} }
.icon-basketadd:before { .icon-basketadd:before {
content: "\e934"; content: '\e934';
} }
.icon-bin:before { .icon-bin:before {
content: "\e935"; content: '\e935';
} }
.icon-botanical:before { .icon-botanical:before {
content: "\e936"; content: '\e936';
} }
.icon-bucket:before { .icon-bucket:before {
content: "\e937"; content: '\e937';
} }
.icon-buscaman:before { .icon-buscaman:before {
content: "\e938"; content: '\e938';
} }
.icon-buyrequest:before { .icon-buyrequest:before {
content: "\e939"; content: '\e939';
} }
.icon-calc_volum:before { .icon-calc_volum:before {
content: "\e93a"; content: '\e93a';
} }
.icon-calendar:before { .icon-calendar:before {
content: "\e940"; content: '\e940';
} }
.icon-catalog:before { .icon-catalog:before {
content: "\e941"; content: '\e941';
} }
.icon-claims:before { .icon-claims:before {
content: "\e942"; content: '\e942';
} }
.icon-client:before { .icon-client:before {
content: "\e943"; content: '\e943';
} }
.icon-clone:before { .icon-clone:before {
content: "\e945"; content: '\e945';
} }
.icon-columnadd:before { .icon-columnadd:before {
content: "\e946"; content: '\e946';
} }
.icon-columndelete:before { .icon-columndelete:before {
content: "\e947"; content: '\e947';
} }
.icon-components:before { .icon-components:before {
content: "\e949"; content: '\e949';
} }
.icon-consignatarios:before { .icon-consignatarios:before {
content: "\e94b"; content: '\e94b';
} }
.icon-control:before { .icon-control:before {
content: "\e94c"; content: '\e94c';
} }
.icon-credit:before { .icon-credit:before {
content: "\e94d"; content: '\e94d';
} }
.icon-deaulter:before { .icon-defaulter:before {
content: "\e94e"; content: '\e94e';
} }
.icon-deletedTicket:before { .icon-deletedTicket:before {
content: "\e94f"; content: '\e94f';
} }
.icon-deleteline:before { .icon-deleteline:before {
content: "\e950"; content: '\e950';
} }
.icon-delivery:before { .icon-delivery:before {
content: "\e951"; content: '\e951';
} }
.icon-deliveryprices:before { .icon-deliveryprices:before {
content: "\e952"; content: '\e952';
} }
.icon-details:before { .icon-details:before {
content: "\e954"; content: '\e954';
} }
.icon-dfiscales:before { .icon-dfiscales:before {
content: "\e955"; content: '\e955';
} }
.icon-disabled:before { .icon-disabled:before {
content: "\e965"; content: '\e965';
} }
.icon-doc:before { .icon-doc:before {
content: "\e956"; content: '\e956';
} }
.icon-entry:before { .icon-entry:before {
content: "\e958"; content: '\e958';
} }
.icon-exit:before { .icon-exit:before {
content: "\e959"; content: '\e959';
} }
.icon-eye:before { .icon-eye:before {
content: "\e95a"; content: '\e95a';
} }
.icon-fixedPrice:before { .icon-fixedPrice:before {
content: "\e95b"; content: '\e95b';
} }
.icon-flower:before { .icon-flower:before {
content: "\e95c"; content: '\e95c';
} }
.icon-frozen:before { .icon-frozen:before {
content: "\e95d"; content: '\e95d';
} }
.icon-fruit:before { .icon-fruit:before {
content: "\e95e"; content: '\e95e';
} }
.icon-funeral:before { .icon-funeral:before {
content: "\e95f"; content: '\e95f';
} }
.icon-grafana:before { .icon-grafana:before {
content: "\e931"; content: '\e931';
}
.icon-grafana:before {
content: '\e931';
} }
.icon-greenery:before { .icon-greenery:before {
content: "\e91e"; content: '\e91e';
} }
.icon-greuge:before { .icon-greuge:before {
content: "\e960"; content: '\e960';
} }
.icon-grid:before { .icon-grid:before {
content: "\e961"; content: '\e961';
} }
.icon-handmade:before { .icon-handmade:before {
content: "\e94a"; content: '\e94a';
} }
.icon-handmadeArtificial:before { .icon-handmadeArtificial:before {
content: "\e962"; content: '\e962';
} }
.icon-headercol:before { .icon-headercol:before {
content: "\e963"; content: '\e963';
} }
.icon-info:before { .icon-info:before {
content: "\e966"; content: '\e966';
} }
.icon-inventory:before { .icon-inventory:before {
content: "\e967"; content: '\e967';
} }
.icon-invoice:before { .icon-invoice:before {
content: "\e969"; content: '\e969';
} }
.icon-invoice-in:before { .icon-invoice-in:before {
content: "\e96a"; content: '\e96a';
} }
.icon-invoice-in-create:before { .icon-invoice-in-create:before {
content: "\e96b"; content: '\e96b';
} }
.icon-invoice-out:before { .icon-invoice-out:before {
content: "\e96c"; content: '\e96c';
} }
.icon-isTooLittle:before { .icon-isTooLittle:before {
content: "\e96e"; content: '\e96e';
} }
.icon-item:before { .icon-item:before {
content: "\e96f"; content: '\e96f';
} }
.icon-languaje:before { .icon-languaje:before {
content: "\e912"; content: '\e912';
} }
.icon-lines:before { .icon-lines:before {
content: "\e971"; content: '\e971';
} }
.icon-linesprepaired:before { .icon-linesprepaired:before {
content: "\e972"; content: '\e972';
} }
.icon-link-to-corrected:before { .icon-link-to-corrected:before {
content: "\e900"; content: '\e900';
} }
.icon-link-to-correcting:before { .icon-link-to-correcting:before {
content: "\e906"; content: '\e906';
} }
.icon-logout:before { .icon-logout:before {
content: "\e90a"; content: '\e90a';
} }
.icon-mana:before { .icon-mana:before {
content: "\e974"; content: '\e974';
} }
.icon-mandatory:before { .icon-mandatory:before {
content: "\e975"; content: '\e975';
} }
.icon-net:before { .icon-net:before {
content: "\e976"; content: '\e976';
} }
.icon-newalbaran:before { .icon-newalbaran:before {
content: "\e977"; content: '\e977';
} }
.icon-niche:before { .icon-niche:before {
content: "\e979"; content: '\e979';
} }
.icon-no036:before { .icon-no036:before {
content: "\e97a"; content: '\e97a';
} }
.icon-noPayMethod:before { .icon-noPayMethod:before {
content: "\e97b"; content: '\e97b';
} }
.icon-notes:before { .icon-notes:before {
content: "\e97c"; content: '\e97c';
} }
.icon-noweb:before { .icon-noweb:before {
content: "\e97e"; content: '\e97e';
} }
.icon-onlinepayment:before { .icon-onlinepayment:before {
content: "\e97f"; content: '\e97f';
} }
.icon-package:before { .icon-package:before {
content: "\e980"; content: '\e980';
} }
.icon-payment:before { .icon-payment:before {
content: "\e982"; content: '\e982';
} }
.icon-pbx:before { .icon-pbx:before {
content: "\e983"; content: '\e983';
} }
.icon-pets:before { .icon-pets:before {
content: "\e985"; content: '\e985';
} }
.icon-photo:before { .icon-photo:before {
content: "\e986"; content: '\e986';
} }
.icon-plant:before { .icon-plant:before {
content: "\e987"; content: '\e987';
} }
.icon-polizon:before { .icon-polizon:before {
content: "\e989"; content: '\e989';
} }
.icon-preserved:before { .icon-preserved:before {
content: "\e98a"; content: '\e98a';
} }
.icon-recovery:before { .icon-recovery:before {
content: "\e98b"; content: '\e98b';
} }
.icon-regentry:before { .icon-regentry:before {
content: "\e901"; content: '\e901';
} }
.icon-reserva:before { .icon-reserva:before {
content: "\e902"; content: '\e902';
} }
.icon-revision:before { .icon-revision:before {
content: "\e903"; content: '\e903';
} }
.icon-risk:before { .icon-risk:before {
content: "\e904"; content: '\e904';
} }
.icon-services:before { .icon-services:before {
content: "\e905"; content: '\e905';
} }
.icon-settings:before { .icon-settings:before {
content: "\e907"; content: '\e907';
} }
.icon-shipment:before { .icon-shipment:before {
content: "\e908"; content: '\e908';
} }
.icon-sign:before { .icon-sign:before {
content: "\e909"; content: '\e909';
} }
.icon-sms:before { .icon-sms:before {
content: "\e90b"; content: '\e90b';
} }
.icon-solclaim:before { .icon-solclaim:before {
content: "\e90c"; content: '\e90c';
} }
.icon-solunion:before { .icon-solunion:before {
content: "\e90d"; content: '\e90d';
} }
.icon-splitline:before { .icon-splitline:before {
content: "\e90e"; content: '\e90e';
} }
.icon-splur:before { .icon-splur:before {
content: "\e90f"; content: '\e90f';
} }
.icon-stowaway:before { .icon-stowaway:before {
content: "\e910"; content: '\e910';
} }
.icon-supplier:before { .icon-supplier:before {
content: "\e911"; content: '\e911';
} }
.icon-supplierfalse:before { .icon-supplierfalse:before {
content: "\e913"; content: '\e913';
} }
.icon-tags:before { .icon-tags:before {
content: "\e914"; content: '\e914';
} }
.icon-tax:before { .icon-tax:before {
content: "\e915"; content: '\e915';
} }
.icon-thermometer:before { .icon-thermometer:before {
content: "\e916"; content: '\e916';
} }
.icon-ticket:before { .icon-ticket:before {
content: "\e917"; content: '\e917';
} }
.icon-ticketAdd:before { .icon-ticketAdd:before {
content: "\e918"; content: '\e918';
} }
.icon-traceability:before { .icon-traceability:before {
content: "\e919"; content: '\e919';
} }
.icon-transaction:before { .icon-transaction:before {
content: "\e93b"; content: '\e93b';
}
.icon-transaction:before {
content: '\e93b';
} }
.icon-treatments:before { .icon-treatments:before {
content: "\e91c"; content: '\e91c';
} }
.icon-trolley:before { .icon-trolley:before {
content: "\e91a"; content: '\e91a';
} }
.icon-troncales:before { .icon-troncales:before {
content: "\e91b"; content: '\e91b';
} }
.icon-unavailable:before { .icon-unavailable:before {
content: "\e91d"; content: '\e91d';
} }
.icon-volume:before { .icon-volume:before {
content: "\e91f"; content: '\e91f';
} }
.icon-wand:before { .icon-wand:before {
content: "\e920"; content: '\e920';
} }
.icon-web:before { .icon-web:before {
content: "\e921"; content: '\e921';
} }
.icon-wiki:before { .icon-wiki:before {
content: "\e922"; content: '\e922';
} }
.icon-worker:before { .icon-worker:before {
content: "\e923"; content: '\e923';
} }
.icon-zone:before { .icon-zone:before {
content: "\e924"; content: '\e924';
} }

45
src/filters/date.js
View File

@ -26,11 +26,11 @@ export function isValidDate(date) {
* // returns "02/12/2022" * // returns "02/12/2022"
* toDateFormat(new Date(2022, 11, 2)); * toDateFormat(new Date(2022, 11, 2));
*/ */
export function toDateFormat(date) { export function toDateFormat(date, locale = 'es-ES') {
if (!isValidDate(date)) { if (!isValidDate(date)) {
return ''; return '';
} }
return new Date(date).toLocaleDateString('es-ES', { return new Date(date).toLocaleDateString(locale, {
year: 'numeric', year: 'numeric',
month: '2-digit', month: '2-digit',
day: '2-digit', day: '2-digit',
@ -56,7 +56,7 @@ export function toTimeFormat(date, showSeconds = false) {
if (!isValidDate(date)) { if (!isValidDate(date)) {
return ''; return '';
} }
return new Date(date).toLocaleDateString('es-ES', { return new Date(date).toLocaleTimeString('es-ES', {
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
second: showSeconds ? '2-digit' : undefined, second: showSeconds ? '2-digit' : undefined,
@ -91,3 +91,42 @@ export function toDateTimeFormat(date, showSeconds = false) {
second: showSeconds ? '2-digit' : undefined, second: showSeconds ? '2-digit' : undefined,
}); });
} }
/**
* Converts seconds to a formatted string representing hours and minutes (hh:mm).
* @param {number} seconds - The number of seconds to convert.
* @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
* @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
*/
export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
const hours = Math.floor(seconds / 3600);
const remainingMinutes = seconds % 3600;
const minutes = Math.floor(remainingMinutes / 60);
const formattedHours = hours < 10 ? '0' + hours : hours;
const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
// Append "h." if includeHSuffix is true
const suffix = includeHSuffix ? ' h.' : '';
// Return formatted string
return formattedHours + ':' + formattedMinutes + suffix;
}
export function getTimeDifferenceWithToday(date) {
let today = Date.vnNew();
today.setHours(0, 0, 0, 0);
date = new Date(date);
date.setHours(0, 0, 0, 0);
return today - date;
}
export function isLower(date) {
return getTimeDifferenceWithToday(date) > 0;
}
export function isBigger(date) {
return getTimeDifferenceWithToday(date) < 0;
}

2
src/filters/dateRange.js
View File

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

6
src/filters/index.js
View File

@ -1,7 +1,8 @@
import toLowerCase from './toLowerCase'; import toLowerCase from './toLowerCase';
import toDate from './toDate'; import toDate from './toDate';
import toDateString from './toDateString'; import toDateString from './toDateString';
import toDateHour from './toDateHour'; import toDateHourMin from './toDateHourMin';
import toDateHourMinSec from './toDateHourMinSec';
import toRelativeDate from './toRelativeDate'; import toRelativeDate from './toRelativeDate';
import toCurrency from './toCurrency'; import toCurrency from './toCurrency';
import toPercentage from './toPercentage'; import toPercentage from './toPercentage';
@ -16,7 +17,8 @@ export {
toDate, toDate,
toHour, toHour,
toDateString, toDateString,
toDateHour, toDateHourMin,
toDateHourMinSec,
toRelativeDate, toRelativeDate,
toCurrency, toCurrency,
toPercentage, toPercentage,

11
src/filters/toDateHourMin.js Normal file
View File

@ -0,0 +1,11 @@
export default function toDateHourMin(date) {
const dateHour = new Date(date).toLocaleDateString('es-ES', {
timeZone: 'Europe/Madrid',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
return dateHour;
}

2
src/filters/toDateHour.js → src/filters/toDateHourMinSec.js
View File

@ -1,4 +1,4 @@
export default function toDateHour(date) { export default function toDateHourMinSec(date) {
const dateHour = new Date(date).toLocaleDateString('es-ES', { const dateHour = new Date(date).toLocaleDateString('es-ES', {
timeZone: 'Europe/Madrid', timeZone: 'Europe/Madrid',
year: 'numeric', year: 'numeric',

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

33
src/i18n/index.js
View File

@ -1,9 +1,28 @@
import en from './en'; const files = import.meta.glob(`./locale/*.yml`);
import es from './es'; const modules = import.meta.glob(`../pages/**/locale/*.yml`);
export const localeEquivalence = {
'en':'en-GB' const translations = {};
for (const file in files) {
const lang = file.split('/').at(2).split('.')[0];
files[file]()
.then((g) => {
translations[lang] = g.default;
})
.finally(() => {
const actualLang = lang + '.yml';
for (const module in modules) {
if (!module.endsWith(actualLang)) continue;
modules[module]().then((t) => {
Object.assign(translations[lang], t.default);
})
}
});
} }
export default {
en: en, export const localeEquivalence = {
es: es, en: 'en-GB',
}; };
export default translations;

1320
src/i18n/locale/en.yml Normal file
View File

File diff suppressed because it is too large Load Diff

1315
src/i18n/locale/es.yml Normal file
View File

File diff suppressed because it is too large Load Diff

79
src/pages/Agency/AgencyList.vue Normal file
View File

@ -0,0 +1,79 @@
<script setup>
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore();
function navigate(id) {
router.push({ path: `/agency/${id}` });
}
function exprBuilder(param, value) {
if (!value) return;
if (param !== 'search') return;
if (!isNaN(value)) return { id: value };
return { name: { like: `%${value}%` } };
}
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
:info="t('You can search by name')"
:label="t('Search agency')"
data-key="AgencyList"
url="Agencies"
/>
</Teleport>
</template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="AgencyList"
url="Agencies"
order="name"
:expr-builder="exprBuilder"
auto-load
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.name"
@click="navigate(row.id)"
v-for="row of rows"
>
<template #list-items>
<QCheckbox
:label="t('isOwn')"
v-model="row.isOwn"
:disable="true"
/>
<QCheckbox
:label="t('isAnyVolumeAllowed')"
v-model="row.isAnyVolumeAllowed"
:disable="true"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
</template>
<i18n>
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia
You can search by name: Puedes buscar por nombre
en:
isOwn: Has owner
isAnyVolumeAllowed: Allows any volume
</i18n>

52
src/pages/Agency/Card/AgencyBasicData.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n();
const route = useRoute();
const routeId = route.params?.id || null;
const warehouses = ref([]);
</script>
<template>
<FetchData
url="warehouses"
sort-by="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<FormModel :url="`Agencies/${routeId}`" model="agency" auto-load>
<template #form="{ data }">
<VnRow>
<VnInput v-model="data.name" :label="t('globals.name')" />
</VnRow>
<VnRow>
<VnSelect
v-model="data.warehouseFk"
option-value="id"
option-label="name"
:label="t('globals.warehouse')"
:options="warehouses"
use-input
input-debounce="0"
:is-clearable="false"
/>
</VnRow>
<VnRow>
<QCheckbox :label="t('agency.isOwn')" v-model="data.isOwn" />
</VnRow>
<VnRow>
<QCheckbox
:label="t('agency.isAnyVolumeAllowed')"
v-model="data.isAnyVolumeAllowed"
/>
</VnRow>
</template>
</FormModel>
</template>

15
src/pages/Agency/Card/AgencyCard.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup>
import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue';
import VnCard from 'components/common/VnCard.vue';
</script>
<template>
<VnCard
data-key="Agency"
base-url="Agencies"
:descriptor="AgencyDescriptor"
search-data-key="AgencyList"
search-url="Agencies"
searchbar-label="agency.searchBar.label"
searchbar-info="agency.searchBar.info"
/>
</template>

35
src/pages/Agency/Card/AgencyDescriptor.vue Normal file
View File

@ -0,0 +1,35 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue';
const props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const { t } = useI18n();
const route = useRoute();
const entityId = computed(() => props.id || route.params.id);
const { store } = useArrayData('Parking');
const card = computed(() => store.data);
</script>
<template>
<CardDescriptor
module="Agency"
data-key="Agency"
:url="`Agencies/${entityId}`"
:title="card?.name"
:subtitle="props.id"
>
<template #body="{ entity: agency }">
<VnLv :label="t('globals.name')" :value="agency.name" />
</template>
</CardDescriptor>
</template>

6
src/pages/Agency/Card/AgencyLog.vue Normal file
View File

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

60
src/pages/Agency/Card/AgencyModes.vue Normal file
View File

@ -0,0 +1,60 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardList from 'src/components/ui/CardList.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
const { t } = useI18n();
const route = useRoute();
const routeId = route.params.id;
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="AgencyModes"
:url="`AgencyModes`"
:filter="{ where: { agencyFk: routeId } }"
order="name"
auto-load
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.name"
v-for="row of rows"
>
<template #list-items>
<VnLv
:label="t('globals.description')"
:value="row?.description"
/>
<VnLv
:label="t('deliveryMethod')"
:value="row?.deliveryMethodFk"
/>
<VnLv label="m3" :value="row?.m3" />
<VnLv :label="t('inflation')" :value="row?.inflation" />
<VnLv :label="t('globals.code')" :value="row?.code" />
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
</template>
<i18n>
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia
You can search by name: Puedes buscar por nombre
deliveryMethod: Método de entrega
inflation: Inflación
en:
isOwn: Has owner
isAnyVolumeAllowed: Allows any volume
</i18n>

42
src/pages/Agency/Card/AgencySummary.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
const $props = defineProps({ id: { type: Number, default: 0 } });
const { t } = useI18n();
const entityId = computed(() => $props.id || useRoute().params.id);
</script>
<template>
<div class="q-pa-md">
<CardSummary :url="`Agencies/${entityId}`">
<template #header="{ entity: agency }">{{ agency.name }}</template>
<template #body="{ entity: agency }">
<QCard class="vn-one">
<QCardSection class="q-pa-none">
<VnTitle
:url="`#/agency/${entityId}/basic-data`"
:text="t('globals.pageTitles.basicData')"
/>
</QCardSection>
<VnLv :label="t('globals.name')" :value="agency.name" />
<QCheckbox
:label="t('agency.isOwn')"
v-model="agency.isOwn"
:disable="true"
/>
<QCheckbox
:label="t('agency.isAnyVolumeAllowed')"
v-model="agency.isAnyVolumeAllowed"
:disable="true"
/>
</QCard>
</template>
</CardSummary>
</div>
</template>

136
src/pages/Agency/Card/AgencyWorkcenter.vue Normal file
View File

@ -0,0 +1,136 @@
<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'src/components/FetchData.vue';
import FormModelPopup from 'src/components/FormModelPopup.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n();
const route = useRoute();
const paginate = ref();
const dialog = ref();
const routeId = computed(() => route.params.id);
const quasar = useQuasar();
const initialData = computed(() => {
return {
agencyFk: routeId.value,
workCenterFk: null,
};
});
async function deleteWorCenter(id) {
try {
await axios.delete(`AgencyWorkCenters/${id}`).then(async () => {
quasar.notify({
message: t('agency.notification.removeItem'),
type: 'positive',
});
});
} catch (error) {
quasar.notify({
message: t('agency.notification.removeItemError'),
type: 'error',
});
}
paginate.value.fetch();
}
</script>
<template>
<div class="centerCard">
<FetchData
url="workCenters"
sort-by="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<VnPaginate
ref="paginate"
data-key="AgencyWorkCenters"
url="AgencyWorkCenters"
:filter="{ where: { agencyFk: routeId } }"
order="id"
auto-load
>
<template #body="{ rows }">
<QCard
flat
bordered
:key="row.id"
v-for="row of rows"
class="card q-pa-md q-mb-sm"
>
<QItem>
<QItemSection side-left>
<VnLv :value="row?.workCenter?.name" icon="delete" />
</QItemSection>
<QItemSection side>
<QBtn
@click.stop="deleteWorCenter(row.id)"
icon="delete"
color="primary"
round
flat
/>
</QItemSection>
</QItem>
</QCard>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
<QDialog ref="dialog">
<FormModelPopup
:title="t('Add work center')"
url-create="AgencyWorkCenters"
model="AgencyWorkCenter"
:form-initial-data="initialData"
@on-data-saved="paginate.fetch()"
>
<template #form-inputs="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
v-model="data.workCenterFk"
option-value="id"
option-label="name"
:label="t('workCenter')"
:options="warehouses"
use-input
input-debounce="0"
:is-clearable="false"
/>
</VnRow>
</template>
</FormModelPopup>
</QDialog>
</QBtn>
<QTooltip>
{{ t('globals.new') }}
</QTooltip>
</QPageSticky>
</template>
<style lang="scss" scoped>
.centerCard {
padding: 5%;
width: 100%;
max-width: 50%;
margin: 0 auto;
}
</style>
<i18n>
es:
workCenter removed successfully: Centro de trabajo eliminado correctamente
This workCenter is already assigned to this agency: Este workCenter ya está asignado a esta agencia
Add work center: Añadir centro de trabajo
workCenter: Centro de trabajo
</i18n>

11
src/pages/Agency/locale/en.yml Normal file
View File

@ -0,0 +1,11 @@
agency:
isOwn: Own
isAnyVolumeAllowed: Any volume allowed
notification:
removeItemError: Error removing agency
removeItem: WorkCenter removed successfully
pageTitles:
agency: Agency
searchBar:
info: You can search by agency code
label: Search agency...

12
src/pages/Agency/locale/es.yml Normal file
View File

@ -0,0 +1,12 @@
agency:
isOwn: Propio
isAnyVolumeAllowed: Cualquier volumen
removeItem: Agencia eliminada correctamente
notification:
removeItemError: Error al eliminar la agencia
removeItem: Centro de trabajo eliminado correctamente
pageTitles:
agency: Agencia
searchBar:
info: Puedes buscar por nombre o id
label: Buscar agencia...

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

@ -2,22 +2,21 @@
import { ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import { useStateStore } from 'src/stores/useStateStore'; import { useStateStore } from 'src/stores/useStateStore';
import { toDate, toPercentage, toCurrency } from 'filters/index'; import { toDate, toPercentage, toCurrency } from 'filters/index';
import { tMobile } from 'src/composables/tMobile'; import { tMobile } from 'src/composables/tMobile';
import CrudModel from 'src/components/CrudModel.vue'; import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
const route = useRoute(); const route = useRoute();
const router = useRouter();
const stateStore = computed(() => useStateStore()); const stateStore = computed(() => useStateStore());
const claim = ref(null); const claim = ref(null);
const claimRef = ref(); const claimRef = ref();
@ -38,10 +37,11 @@ const marker_labels = [
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') }, { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
]; ];
const multiplicatorValue = ref(); const multiplicatorValue = ref();
const loading = ref(false);
const columns = computed(() => [ const columns = computed(() => [
{ {
name: 'Id', name: 'id',
label: t('Id item'), label: t('Id item'),
field: (row) => row.itemFk, field: (row) => row.itemFk,
}, },
@ -119,7 +119,7 @@ async function updateDestinations(claimDestinationFk) {
async function updateDestination(claimDestinationFk, row, options = {}) { async function updateDestination(claimDestinationFk, row, options = {}) {
if (claimDestinationFk) { if (claimDestinationFk) {
await axios.post('Claims/updateClaimDestination', { await post('Claims/updateClaimDestination', {
claimDestinationFk, claimDestinationFk,
rows: Array.isArray(row) ? row : [row], rows: Array.isArray(row) ? row : [row],
}); });
@ -128,7 +128,7 @@ async function updateDestination(claimDestinationFk, row, options = {}) {
} }
async function regularizeClaim() { async function regularizeClaim() {
await axios.post(`Claims/${claimId}/regularizeClaim`); await post(`Claims/${claimId}/regularizeClaim`);
await claimRef.value.fetch(); await claimRef.value.fetch();
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
quasar.notify({ quasar.notify({
@ -147,7 +147,7 @@ async function onUpdateGreugeAccept() {
const freightPickUpPrice = const freightPickUpPrice =
(await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice * (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
multiplicatorValue.value; multiplicatorValue.value;
await axios.post(`Greuges`, { await post(`Greuges`, {
clientFk: claim.value.clientFk, clientFk: claim.value.clientFk,
description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(), description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
amount: freightPickUpPrice, amount: freightPickUpPrice,
@ -166,14 +166,22 @@ async function save(data) {
} }
async function importToNewRefundTicket() { async function importToNewRefundTicket() {
const query = `ClaimBeginnings/${claimId}/importToNewRefundTicket`; await post(`ClaimBeginnings/${claimId}/importToNewRefundTicket`);
await axios.post(query); await claimActionsForm.value.reload();
claimActionsForm.value.reload();
quasar.notify({ quasar.notify({
message: t('globals.dataSaved'), message: t('globals.dataSaved'),
type: 'positive', type: 'positive',
}); });
} }
async function post(query, params) {
loading.value = true;
try {
await axios.post(query, params);
} finally {
loading.value = false;
}
}
</script> </script>
<template> <template>
<FetchData <FetchData
@ -193,30 +201,7 @@ async function importToNewRefundTicket() {
auto-load auto-load
@on-fetch="(data) => (destinationTypes = data)" @on-fetch="(data) => (destinationTypes = data)"
/> />
<template v-if="stateStore.isHeaderMounted()"> <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer
v-model="stateStore.rightDrawer"
side="right"
:width="300"
show-if-above
v-if="claim"
>
<QCard class="totalClaim q-my-md q-pa-sm no-box-shadow"> <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
{{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }} {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
</QCard> </QCard>
@ -266,7 +251,7 @@ async function importToNewRefundTicket() {
v-model="multiplicatorValue" v-model="multiplicatorValue"
/> />
</QCard> </QCard>
</QDrawer> </Teleport>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
<CrudModel <CrudModel
v-if="claim" v-if="claim"
@ -280,6 +265,7 @@ async function importToNewRefundTicket() {
:default-save="false" :default-save="false"
:default-reset="false" :default-reset="false"
@on-fetch="setData" @on-fetch="setData"
:limit="0"
auto-load auto-load
> >
<template #body> <template #body>
@ -292,6 +278,14 @@ async function importToNewRefundTicket() {
v-model:selected="selectedRows" v-model:selected="selectedRows"
:grid="$q.screen.lt.md" :grid="$q.screen.lt.md"
> >
<template #body-cell-id="{ value }">
<QTd align="center">
<span class="link">
{{ value }}
<ItemDescriptorProxy :id="value" />
</span>
</QTd>
</template>
<template #body-cell-ticket="{ value }"> <template #body-cell-ticket="{ value }">
<QTd align="center"> <QTd align="center">
<span class="link"> <span class="link">
@ -302,7 +296,7 @@ async function importToNewRefundTicket() {
</template> </template>
<template #body-cell-destination="{ row }"> <template #body-cell-destination="{ row }">
<QTd> <QTd>
<VnSelectFilter <VnSelect
v-model="row.claimDestinationFk" v-model="row.claimDestinationFk"
:options="destinationTypes" :options="destinationTypes"
option-label="description" option-label="description"
@ -344,7 +338,7 @@ async function importToNewRefundTicket() {
</QItemSection> </QItemSection>
<QItemSection side> <QItemSection side>
<QItemLabel v-if="column.name === 'destination'"> <QItemLabel v-if="column.name === 'destination'">
<VnSelectFilter <VnSelect
v-model="props.row.claimDestinationFk" v-model="props.row.claimDestinationFk"
:options="destinationTypes" :options="destinationTypes"
option-label="description" option-label="description"
@ -383,6 +377,7 @@ async function importToNewRefundTicket() {
icon="check" icon="check"
@click="regularizeClaim" @click="regularizeClaim"
:disable="claim.claimStateFk == resolvedStateId" :disable="claim.claimStateFk == resolvedStateId"
:loading="loading"
/> />
<QBtn <QBtn
@ -394,6 +389,7 @@ async function importToNewRefundTicket() {
:title="t('Change destination')" :title="t('Change destination')"
icon="swap_horiz" icon="swap_horiz"
@click="dialogDestination = !dialogDestination" @click="dialogDestination = !dialogDestination"
:loading="loading"
/> />
<QBtn <QBtn
color="primary" color="primary"
@ -404,6 +400,7 @@ async function importToNewRefundTicket() {
icon="Upload" icon="Upload"
@click="importToNewRefundTicket" @click="importToNewRefundTicket"
:disable="claim.claimStateFk == resolvedStateId" :disable="claim.claimStateFk == resolvedStateId"
:loading="loading"
/> />
</template> </template>
</CrudModel> </CrudModel>
@ -418,7 +415,7 @@ async function importToNewRefundTicket() {
</QItem> </QItem>
</QCardSection> </QCardSection>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelect
class="q-pa-sm" class="q-pa-sm"
v-model="claimDestinationFk" v-model="claimDestinationFk"
:options="destinationTypes" :options="destinationTypes"

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

@ -2,13 +2,14 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import axios from 'axios';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
const route = useRoute(); const route = useRoute();
@ -24,7 +25,7 @@ const claimFilter = {
'workerFk', 'workerFk',
'claimStateFk', 'claimStateFk',
'packages', 'packages',
'hasToPickUp', 'pickup',
], ],
include: [ include: [
{ {
@ -36,39 +37,31 @@ const claimFilter = {
], ],
}; };
const workers = ref([]);
const workersCopy = ref([]);
const claimStates = ref([]); const claimStates = ref([]);
const claimStatesCopy = ref([]); const claimStatesCopy = ref([]);
const optionsList = ref([]);
function setWorkers(data) { const workersOptions = ref([]);
workers.value = data;
workersCopy.value = data;
}
function setClaimStates(data) { function setClaimStates(data) {
claimStates.value = data; claimStates.value = data;
claimStatesCopy.value = data; claimStatesCopy.value = data;
} }
const workerFilter = { async function getEnumValues() {
options: workers, optionsList.value = [{ id: null, description: t('claim.basicData.null') }];
filterFn: (options, value) => { const { data } = await axios.get(`Applications/get-enum-values`, {
const search = value.toLowerCase(); params: {
schema: 'vn',
table: 'claim',
column: 'pickup',
},
});
for (let value of data)
optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) });
}
if (value === '') return workersCopy.value; getEnumValues();
return options.value.filter((row) => {
const id = row.id;
const name = row.name.toLowerCase();
const idMatches = id == search;
const nameMatches = name.indexOf(search) > -1;
return idMatches || nameMatches;
});
},
};
const statesFilter = { const statesFilter = {
options: claimStates, options: claimStates,
@ -89,7 +82,7 @@ const statesFilter = {
<FetchData <FetchData
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }" :filter="{ where: { role: 'salesPerson' } }"
@on-fetch="setWorkers" @on-fetch="(data) => (workersOptions = data)"
auto-load auto-load
/> />
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load /> <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
@ -102,80 +95,71 @@ const statesFilter = {
> >
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnInput
<VnInput v-model="data.client.name"
v-model="data.client.name" :label="t('claim.basicData.customer')"
:label="t('claim.basicData.customer')" disable
disable />
/> <VnInputDate
</div> v-model="data.created"
<div class="col"> :label="t('claim.basicData.created')"
<VnInputDate />
v-model="data.created"
:label="t('claim.basicData.created')"
/>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <VnSelect
<QSelect :label="t('claim.basicData.assignedTo')"
v-model="data.workerFk" v-model="data.workerFk"
:options="workers" :options="workersOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
:label="t('claim.basicData.assignedTo')" auto-load
map-options :rules="validate('claim.claimStateFk')"
use-input >
@filter="(value, update) => filter(value, update, workerFilter)" <template #before>
:rules="validate('claim.claimStateFk')" <QAvatar color="orange">
:input-debounce="0" <QImg
> v-if="data.workerFk"
<template #before> :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
<QAvatar color="orange"> spinner-color="white"
<QImg />
v-if="data.workerFk" </QAvatar>
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`" </template>
spinner-color="white" </VnSelect>
/> <QSelect
</QAvatar> v-model="data.claimStateFk"
</template> :options="claimStates"
</QSelect> option-value="id"
</div> option-label="description"
<div class="col"> emit-value
<QSelect :label="t('claim.basicData.state')"
v-model="data.claimStateFk" map-options
:options="claimStates" use-input
option-value="id" @filter="(value, update) => filter(value, update, statesFilter)"
option-label="description" :rules="validate('claim.claimStateFk')"
emit-value :input-debounce="0"
:label="t('claim.basicData.state')" >
map-options </QSelect>
use-input
@filter="(value, update) => filter(value, update, statesFilter)"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
</QSelect>
</div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <QInput
<QInput v-model.number="data.packages"
v-model.number="data.packages" :label="t('globals.packages')"
:label="t('globals.packages')" :rules="validate('claim.packages')"
:rules="validate('claim.packages')" type="number"
type="number" />
/> <QSelect
</div> v-model="data.pickup"
</VnRow> :options="optionsList"
<VnRow class="row q-gutter-md q-mb-md"> option-value="id"
<div class="col"> option-label="description"
<QCheckbox emit-value
v-model="data.hasToPickUp" :label="t('claim.basicData.pickup')"
:label="t('claim.basicData.picked')" map-options
/> use-input
</div> :input-debounce="0"
>
</QSelect>
</VnRow> </VnRow>
</template> </template>
</FormModel> </FormModel>

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

@ -1,46 +1,17 @@
<script setup> <script setup>
import LeftMenu from 'components/LeftMenu.vue'; import VnCard from 'components/common/VnCard.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import ClaimDescriptor from './ClaimDescriptor.vue'; import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import ClaimFilter from '../ClaimFilter.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
</script> </script>
<template> <template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()"> <VnCard
<VnSearchbar data-key="Claim"
data-key="ClaimList" base-url="Claims"
url="Claims/filter" :descriptor="ClaimDescriptor"
:label="t('Search claim')" :filter-panel="ClaimFilter"
:info="t('You can search by claim id or customer name')" search-data-key="ClaimList"
/> search-url="Claims/filter"
</Teleport> searchbar-label="Search claim"
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256"> searchbar-info="You can search by claim id or customer name"
<QScrollArea class="fit"> />
<ClaimDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template> </template>
<i18n>
es:
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
Details: Detalles
Notes: Notas
Action: Acción
</i18n>

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

@ -11,6 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription'; import useCardDescription from 'src/composables/useCardDescription';
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import { getUrl } from 'src/composables/getUrl'; import { getUrl } from 'src/composables/getUrl';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -73,8 +74,9 @@ const filter = {
const STATE_COLOR = { const STATE_COLOR = {
pending: 'warning', pending: 'warning',
managed: 'info', incomplete: 'info',
resolved: 'positive', resolved: 'positive',
canceled: 'negative',
}; };
function stateColor(code) { function stateColor(code) {
return STATE_COLOR[code]; return STATE_COLOR[code];
@ -127,17 +129,24 @@ onMounted(async () => {
</VnLv> </VnLv>
<VnLv <VnLv
v-if="entity.worker" v-if="entity.worker"
:label="t('claim.card.assignedTo')" :label="t('claim.card.attendedBy')"
:value="entity.worker.user.name" :value="entity.worker.user.name"
> >
<template #value> <template #value>
<VnUserLink <VnUserLink
:name="entity.worker.user.name" :name="entity.worker.user.nickname"
:worker-id="entity.worker.id" :worker-id="entity.worker.id"
/> />
</template> </template>
</VnLv> </VnLv>
<VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" /> <VnLv :label="t('claim.card.zone')">
<template #value>
<span class="link">
{{ entity.ticket?.zone?.name }}
<ZoneDescriptorProxy :id="entity.ticket?.zone?.id" />
</span>
</template>
</VnLv>
<VnLv <VnLv
:label="t('claim.card.province')" :label="t('claim.card.province')"
:value="entity.ticket?.address?.province?.name" :value="entity.ticket?.address?.province?.name"

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

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import CrudModel from 'components/CrudModel.vue'; import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelect from 'components/common/VnSelect.vue';
import { tMobile } from 'composables/tMobile'; import { tMobile } from 'composables/tMobile';
const route = useRoute(); const route = useRoute();
@ -161,7 +161,7 @@ const columns = computed(() => [
auto-width auto-width
@keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()" @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
> >
<VnSelectFilter <VnSelect
v-model="row[col.model]" v-model="row[col.model]"
:options="col.options" :options="col.options"
:option-value="col.optionValue" :option-value="col.optionValue"
@ -181,7 +181,7 @@ const columns = computed(() => [
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>
</VnSelectFilter> </VnSelect>
</QTd> </QTd>
</template> </template>
<template #item="props"> <template #item="props">
@ -198,7 +198,7 @@ const columns = computed(() => [
<QList dense> <QList dense>
<QItem v-for="col in props.cols" :key="col.name"> <QItem v-for="col in props.cols" :key="col.name">
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelect
:label="col.label" :label="col.label"
v-model="props.row[col.model]" v-model="props.row[col.model]"
:options="col.options" :options="col.options"

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

@ -45,20 +45,25 @@ async function onFetchClaim(data) {
const amount = ref(); const amount = ref();
const amountClaimed = ref(); const amountClaimed = ref();
async function onFetch(rows) { async function onFetch(rows, newRows) {
if (newRows) rows = newRows;
amount.value = 0; amount.value = 0;
amountClaimed.value = 0; amountClaimed.value = 0;
if (!rows || !rows.length) return; if (!rows || !rows.length) return;
amount.value = rows.reduce( for (const row of rows) {
(accumulator, { sale }) => accumulator + sale.price * sale.quantity, const { sale } = row;
0 amount.value = amount.value + totalRow(sale);
); const price = row.quantity * sale.price;
const discount = (sale.discount * price) / 100;
amountClaimed.value = amountClaimed.value + (price - discount);
}
}
amountClaimed.value = rows.reduce( function totalRow({ price, quantity, discount }) {
(accumulator, line) => accumulator + line.sale.price * line.quantity, const amount = price * quantity;
0 const appliedDiscount = (discount * amount) / 100;
); return amount - appliedDiscount;
} }
const columns = computed(() => [ const columns = computed(() => [
@ -102,12 +107,7 @@ const columns = computed(() => [
{ {
name: 'total', name: 'total',
label: t('Total'), label: t('Total'),
field: ({ sale }) => { field: ({ sale }) => totalRow(sale),
const amount = sale.price * sale.quantity;
const appliedDiscount = (sale.discount * amount) / 100;
return amount - appliedDiscount;
},
format: (value) => toCurrency(value), format: (value) => toCurrency(value),
sortable: true, sortable: true,
}, },
@ -121,11 +121,6 @@ async function fetchMana() {
mana.value = response.data; mana.value = response.data;
} }
async function updateQuantity({ id, quantity }) {
if (!id) return;
await axios.patch(`ClaimBeginnings/${id}`, { quantity });
}
async function updateDiscount({ saleFk, discount, canceller }) { async function updateDiscount({ saleFk, discount, canceller }) {
const body = { salesIds: [saleFk], newDiscount: discount }; const body = { salesIds: [saleFk], newDiscount: discount };
const claimId = claim.value.ticketFk; const claimId = claim.value.ticketFk;
@ -134,6 +129,7 @@ async function updateDiscount({ saleFk, discount, canceller }) {
await axios.post(query, body, { await axios.post(query, body, {
signal: canceller.signal, signal: canceller.signal,
}); });
await claimLinesForm.value.reload();
} }
function onUpdateDiscount(response) { function onUpdateDiscount(response) {
@ -155,6 +151,13 @@ function showImportDialog() {
}) })
.onOk(() => claimLinesForm.value.reload()); .onOk(() => claimLinesForm.value.reload());
} }
async function saveWhenHasChanges() {
if (claimLinesForm.value.getChanges().updates) {
await claimLinesForm.value.onSubmit();
await claimLinesForm.value.reload();
}
}
</script> </script>
<template> <template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
@ -181,161 +184,134 @@ function showImportDialog() {
@on-fetch="onFetchClaim" @on-fetch="onFetchClaim"
auto-load auto-load
/> />
<div class="column items-center"> <div class="q-pa-md">
<div class="list"> <CrudModel
<CrudModel data-key="ClaimLines"
data-key="ClaimLines" ref="claimLinesForm"
ref="claimLinesForm" :url="`Claims/${route.params.id}/lines`"
:url="`Claims/${route.params.id}/lines`" save-url="ClaimBeginnings/crud"
save-url="ClaimBeginnings/crud" :filter="linesFilter"
:filter="linesFilter" @on-fetch="onFetch"
@on-fetch="onFetch" v-model:selected="selected"
@save-changes="onFetch" :default-save="false"
v-model:selected="selected" :default-reset="false"
:default-save="false" auto-load
:default-reset="false" :limit="0"
auto-load >
> <template #body="{ rows }">
<template #body="{ rows }"> <QTable
<QTable :columns="columns"
:columns="columns" :rows="rows"
:rows="rows" :dense="$q.screen.lt.md"
:dense="$q.screen.lt.md" row-key="id"
row-key="id" selection="multiple"
selection="multiple" v-model:selected="selected"
v-model:selected="selected" :grid="$q.screen.lt.md"
:grid="$q.screen.lt.md" >
> <template #body-cell-claimed="{ row }">
<template #body-cell-claimed="{ row, value }"> <QTd auto-width align="right" class="text-primary">
<QTd auto-width align="right" class="text-primary"> <QInput
<span>{{ value }}</span> v-model="row.quantity"
type="number"
<QPopupEdit dense
v-model="row.quantity" @keyup.enter="saveWhenHasChanges()"
v-slot="scope" @blur="saveWhenHasChanges()"
:title="t('Claimed quantity')" />
@update:model-value="updateQuantity(row)" </QTd>
buttons </template>
> <template #body-cell-description="{ row, value }">
<QInput <QTd auto-width align="right" class="text-primary">
v-model="scope.value" {{ value }}
type="number" <ItemDescriptorProxy
dense :id="row.sale.itemFk"
autofocus ></ItemDescriptorProxy>
@keyup.enter="scope.set" </QTd>
@focus="($event) => $event.target.select()" </template>
/> <template #body-cell-discount="{ row, value, rowIndex }">
</QPopupEdit> <QTd auto-width align="right" class="text-primary">
</QTd> {{ value }}
</template> <VnDiscount
<template #body-cell-description="{ row, value }"> :quantity="row.quantity"
<QTd auto-width align="right" class="text-primary"> :price="row.sale.price"
{{ value }} :discount="row.sale.discount"
<ItemDescriptorProxy :mana="mana"
:id="row.sale.itemFk" :promise="updateDiscount"
></ItemDescriptorProxy> :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
</QTd> @on-update="onUpdateDiscount"
</template> />
<template #body-cell-discount="{ row, value, rowIndex }"> </QTd>
<QTd auto-width align="right" class="text-primary"> </template>
{{ value }} <!-- View for grid mode -->
<VnDiscount <template #item="props">
:quantity="row.quantity" <div
:price="row.sale.price" class="q-mb-md col-12 grid-style-transition"
:discount="row.sale.discount" :style="props.selected ? 'transform: scale(0.95);' : ''"
:mana="mana" >
:promise="updateDiscount" <QCard>
:data="{ saleFk: row.sale.id, rowIndex: rowIndex }" <QCardSection>
@on-update="onUpdateDiscount" <QCheckbox v-model="props.selected" />
/> </QCardSection>
</QTd> <QSeparator inset />
</template> <QList dense>
<!-- View for grid mode --> <QItem
<template #item="props"> v-for="column of props.cols"
<div :key="column.name"
class="q-mb-md col-12 grid-style-transition" >
:style="props.selected ? 'transform: scale(0.95);' : ''" <QItemSection>
> <QItemLabel caption>
<QCard> {{ column.label }}
<QCardSection> </QItemLabel>
<QCheckbox v-model="props.selected" /> </QItemSection>
</QCardSection> <QItemSection side>
<QSeparator inset /> <template v-if="column.name === 'claimed'">
<QList dense> <QItemLabel class="text-primary">
<QItem <QInput
v-for="column of props.cols" v-model="props.row.quantity"
:key="column.name" type="number"
> dense
<QItemSection> autofocus
<QItemLabel caption> @keyup.enter="
{{ column.label }} saveWhenHasChanges()
"
@blur="saveWhenHasChanges()"
/>
</QItemLabel> </QItemLabel>
</QItemSection> </template>
<QItemSection side> <template
<template v-else-if="column.name === 'discount'"
v-if="column.name === 'claimed'" >
> <QItemLabel class="text-primary">
<QItemLabel class="text-primary"> {{ column.value }}
{{ column.value }} <VnDiscount
<QPopupEdit :quantity="props.row.quantity"
v-model="props.row.quantity" :price="props.row.sale.price"
v-slot="scope" :discount="
:title="t('Claimed quantity')" props.row.sale.discount
@update:model-value=" "
updateQuantity(props.row) :mana="mana"
" :promise="updateDiscount"
buttons :data="{
> saleFk: props.row.sale.id,
<QInput rowIndex: props.rowIndex,
v-model="scope.value" }"
type="number" @on-update="onUpdateDiscount"
dense />
autofocus </QItemLabel>
@keyup.enter="scope.set" </template>
@focus=" <template v-else>
($event) => <QItemLabel>
$event.target.select() {{ column.value }}
" </QItemLabel>
/> </template>
</QPopupEdit> </QItemSection>
</QItemLabel> </QItem>
</template> </QList>
<template </QCard>
v-else-if="column.name === 'discount'" </div>
> </template>
<QItemLabel class="text-primary"> </QTable>
{{ column.value }} </template>
<VnDiscount </CrudModel>
:quantity="props.row.quantity"
:price="props.row.sale.price"
:discount="
props.row.sale.discount
"
:mana="mana"
:promise="updateDiscount"
:data="{
saleFk: props.row.sale.id,
rowIndex: props.rowIndex,
}"
@on-update="onUpdateDiscount"
/>
</QItemLabel>
</template>
<template v-else>
<QItemLabel>
{{ column.value }}
</QItemLabel>
</template>
</QItemSection>
</QItem>
</QList>
</QCard>
</div>
</template>
</QTable>
</template>
</CrudModel>
</div>
</div> </div>
<QPageSticky position="bottom-right" :offset="[25, 25]"> <QPageSticky position="bottom-right" :offset="[25, 25]">

40
src/pages/Claim/Card/ClaimLinesImport.vue
View File

@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { toDate, toCurrency, toPercentage } from 'filters/index'; import { toDate, toCurrency, toPercentage } from 'filters/index';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import axios from 'axios'; import axios from 'axios';
defineEmits([...useDialogPluginComponent.emits]); defineEmits([...useDialogPluginComponent.emits]);
@ -34,6 +35,7 @@ const columns = computed(() => [
label: t('Quantity'), label: t('Quantity'),
field: (row) => row.quantity, field: (row) => row.quantity,
sortable: true, sortable: true,
default: 0,
}, },
{ {
name: 'description', name: 'description',
@ -74,7 +76,6 @@ async function importLines() {
const body = sales.map((row) => ({ const body = sales.map((row) => ({
claimFk: route.params.id, claimFk: route.params.id,
saleFk: row.saleFk, saleFk: row.saleFk,
quantity: row.quantity,
})); }));
canceller = new AbortController(); canceller = new AbortController();
@ -118,7 +119,6 @@ function cancel() {
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QTable <QTable
class="my-sticky-header-table"
:columns="columns" :columns="columns"
:rows="claimableSales" :rows="claimableSales"
row-key="saleFk" row-key="saleFk"
@ -126,7 +126,14 @@ function cancel() {
v-model:selected="selected" v-model:selected="selected"
square square
flat flat
/> >
<template #body-cell-description="{ row, value }">
<QTd auto-width align="right" class="link">
{{ value }}
<ItemDescriptorProxy :id="row.itemFk"></ItemDescriptorProxy>
</QTd>
</template>
</QTable>
<QSeparator /> <QSeparator />
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" /> <QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" />
@ -148,33 +155,6 @@ function cancel() {
} }
</style> </style>
<style lang="scss">
.my-sticky-header-table {
height: 400px;
thead tr th {
position: sticky;
z-index: 1;
}
thead tr:first-child th {
/* this is when the loading indicator appears */
top: 0;
}
&.q-table--loading thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
// /* prevent scrolling behind sticky top row on focus */
tbody {
/* height of all previous header rows */
scroll-margin-top: 48px;
}
}
</style>
<i18n> <i18n>
es: es:
Available sales lines: Líneas de venta disponibles Available sales lines: Líneas de venta disponibles

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

@ -16,7 +16,7 @@ const claimId = computed(() => $props.id || route.params.id);
const claimFilter = { const claimFilter = {
where: { claimFk: claimId.value }, where: { claimFk: claimId.value },
fields: ['created', 'workerFk', 'text'], fields: ['id', 'created', 'workerFk', 'text'],
include: { include: {
relation: 'worker', relation: 'worker',
scope: { scope: {
@ -38,10 +38,11 @@ const body = {
</script> </script>
<template> <template>
<VnNotes <VnNotes
style="overflow-y: auto"
:add-note="$props.addNote"
url="claimObservations" url="claimObservations"
:add-note="$props.addNote"
:filter="claimFilter" :filter="claimFilter"
:body="body" :body="body"
v-bind="$attrs"
style="overflow-y: auto"
/> />
</template> </template>

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

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted, ref, computed } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters'; import { toDate, toCurrency } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
@ -12,8 +12,12 @@ import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTitle from 'src/components/common/VnTitle.vue'; import VnTitle from 'src/components/common/VnTitle.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import axios from 'axios';
import dashIfEmpty from 'src/filters/dashIfEmpty';
const route = useRoute(); const route = useRoute();
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { getTokenMultimedia } = useSession(); const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia(); const token = getTokenMultimedia();
@ -26,7 +30,7 @@ const $props = defineProps({
}); });
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const ClaimStates = ref([]);
const claimUrl = ref(); const claimUrl = ref();
const salixUrl = ref(); const salixUrl = ref();
const claimDmsRef = ref(); const claimDmsRef = ref();
@ -98,8 +102,9 @@ const detailsColumns = ref([
const STATE_COLOR = { const STATE_COLOR = {
pending: 'warning', pending: 'warning',
managed: 'info', incomplete: 'info',
resolved: 'positive', resolved: 'positive',
canceled: 'negative',
}; };
function stateColor(code) { function stateColor(code) {
return STATE_COLOR[code]; return STATE_COLOR[code];
@ -161,6 +166,10 @@ function openDialog(dmsId) {
multimediaSlide.value = dmsId; multimediaSlide.value = dmsId;
multimediaDialog.value = true; multimediaDialog.value = true;
} }
async function changeState(value) {
await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
router.go(route.fullPath);
}
</script> </script>
<template> <template>
@ -170,6 +179,7 @@ function openDialog(dmsId) {
@on-fetch="(data) => setClaimDms(data)" @on-fetch="(data) => setClaimDms(data)"
ref="claimDmsRef" ref="claimDmsRef"
/> />
<FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
<CardSummary <CardSummary
ref="summary" ref="summary"
:url="`Claims/${entityId}/getSummary`" :url="`Claims/${entityId}/getSummary`"
@ -177,7 +187,37 @@ function openDialog(dmsId) {
@on-fetch="getClaimDms" @on-fetch="getClaimDms"
> >
<template #header="{ entity: { claim } }"> <template #header="{ entity: { claim } }">
{{ claim.id }} - {{ claim.client.name }} {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
</template>
<template #header-right>
<QBtnDropdown
side
top
color="black"
text-color="white"
:label="t('ticket.summary.changeState')"
>
<QList>
<QVirtualScroll
style="max-height: 300px"
:items="ClaimStates"
separator
v-slot="{ item, index }"
>
<QItem
:key="index"
dense
clickable
v-close-popup
@click="changeState(item.id)"
>
<QItemSection>
<QItemLabel>{{ item.description }}</QItemLabel>
</QItemSection>
</QItem>
</QVirtualScroll>
</QList>
</QBtnDropdown>
</template> </template>
<template #body="{ entity: { claim, salesClaimed, developments } }"> <template #body="{ entity: { claim, salesClaimed, developments } }">
<QCard class="vn-one"> <QCard class="vn-one">
@ -214,16 +254,15 @@ function openDialog(dmsId) {
</VnLv> </VnLv>
<VnLv :label="t('claim.summary.customer')"> <VnLv :label="t('claim.summary.customer')">
<template #value> <template #value>
<VnUserLink <span class="link cursor-pointer">
:name="claim.client?.name" {{ claim.client?.name }}
:worker-id="claim.client?.id" <CustomerDescriptorProxy :id="claim.clientFk" />
/> </span>
</template> </template>
</VnLv> </VnLv>
<QCheckbox <VnLv
:label="t('claim.basicData.picked')" :label="t('claim.basicData.pickup')"
v-model="claim.hasToPickUp" :value="`${dashIfEmpty(claim.pickup)}`"
:disable="true"
/> />
</QCard> </QCard>
<QCard class="vn-three"> <QCard class="vn-three">
@ -280,6 +319,48 @@ function openDialog(dmsId) {
</template> </template>
</QTable> </QTable>
</QCard> </QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0"> <QCard class="vn-two" v-if="developments.length > 0">
<VnTitle <VnTitle
:url="claimUrl + 'development'" :url="claimUrl + 'development'"
@ -302,49 +383,6 @@ function openDialog(dmsId) {
</template> </template>
</QTable> </QTable>
</QCard> </QCard>
<QCard class="vn-max" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>header
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-max"> <QCard class="vn-max">
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" /> <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
<div id="slider-container" class="q-px-xl q-py-md"> <div id="slider-container" class="q-px-xl q-py-md">
@ -448,4 +486,8 @@ function openDialog(dmsId) {
.zindex { .zindex {
z-index: 1; z-index: 1;
} }
.change-state {
width: 10%;
}
</style> </style>

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

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
@ -64,7 +64,7 @@ const states = ref();
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers"> <QItemSection v-if="workers">
<VnSelectFilter <VnSelect
:label="t('Salesperson')" :label="t('Salesperson')"
v-model="params.salesPersonFk" v-model="params.salesPersonFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
@ -87,7 +87,7 @@ const states = ref();
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers"> <QItemSection v-if="workers">
<VnSelectFilter <VnSelect
:label="t('Attender')" :label="t('Attender')"
v-model="params.attenderFk" v-model="params.attenderFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
@ -110,7 +110,7 @@ const states = ref();
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers"> <QItemSection v-if="workers">
<VnSelectFilter <VnSelect
:label="t('Responsible')" :label="t('Responsible')"
v-model="params.claimResponsibleFk" v-model="params.claimResponsibleFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
@ -133,7 +133,7 @@ const states = ref();
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="states"> <QItemSection v-if="states">
<VnSelectFilter <VnSelect
:label="t('State')" :label="t('State')"
v-model="params.claimStateFk" v-model="params.claimStateFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
@ -149,6 +149,15 @@ const states = ref();
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator /> <QSeparator />
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<!-- <QItem> <!-- <QItem>
@ -192,6 +201,7 @@ en:
claimResponsibleFk: Responsible claimResponsibleFk: Responsible
claimStateFk: State claimStateFk: State
created: Created created: Created
myTeam: My team
es: es:
params: params:
search: Contiene search: Contiene
@ -211,4 +221,5 @@ es:
Item: Artículo Item: Artículo
Created: Creada Created: Creada
More options: Más opciones More options: Más opciones
myTeam: Mi equipo
</i18n> </i18n>

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

@ -12,7 +12,6 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ClaimSummary from './Card/ClaimSummary.vue'; import ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { getUrl } from 'src/composables/getUrl';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();

2
src/pages/Claim/locale/es.yml Normal file
View File

@ -0,0 +1,2 @@
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente

147
src/pages/Customer/Card/CustomerConsignees.vue → src/pages/Customer/Card/CustomerAddress.vue
View File

@ -1,18 +1,21 @@
<script setup> <script setup>
import { ref } from 'vue'; import { onBeforeMount, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const addresses = ref([]);
const client = ref(null);
const provincesLocation = ref([]); const provincesLocation = ref([]);
const consigneeFilter = { const addressFilter = {
fields: [ fields: [
'id', 'id',
'isDefaultAddress', 'isDefaultAddress',
@ -44,6 +47,42 @@ const consigneeFilter = {
], ],
}; };
onBeforeMount(() => {
const { id } = route.params;
getAddressesData(id);
getClientData(id);
});
watch(
() => route.params.id,
(newValue) => {
if (!newValue) return;
getAddressesData(newValue);
getClientData(newValue);
}
);
const getAddressesData = async (id) => {
try {
const { data } = await axios.get(`Clients/${id}/addresses`, {
params: { filter: JSON.stringify(addressFilter) },
});
addresses.value = data;
sortAddresses();
} catch (error) {
return error;
}
};
const getClientData = async (id) => {
try {
const { data } = await axios.get(`Clients/${id}`);
client.value = data;
} catch (error) {
return error;
}
};
const setProvince = (provinceFk) => { const setProvince = (provinceFk) => {
const result = provincesLocation.value.filter( const result = provincesLocation.value.filter(
(province) => province.id === provinceFk (province) => province.id === provinceFk
@ -51,16 +90,38 @@ const setProvince = (provinceFk) => {
return result[0]?.name || ''; return result[0]?.name || '';
}; };
const toCustomerConsigneeCreate = () => { const isDefaultAddress = (address) => {
router.push({ name: 'CustomerConsigneeCreate' }); return client?.value?.defaultAddressFk === address.id ? 1 : 0;
}; };
const toCustomerConsigneeEdit = (consigneeId) => { const setDefault = (address) => {
const url = `Clients/${route.params.id}`;
const payload = { defaultAddressFk: address.id };
axios.patch(url, payload).then((res) => {
if (res.data) {
client.value.defaultAddressFk = res.data.defaultAddressFk;
sortAddresses();
}
});
};
const sortAddresses = () => {
if (!client.value || !addresses.value) return;
addresses.value = addresses.value.sort((a, b) => {
return isDefaultAddress(b) - isDefaultAddress(a);
});
};
const toCustomerAddressCreate = () => {
router.push({ name: 'CustomerAddressCreate' });
};
const toCustomerAddressEdit = (addressId) => {
router.push({ router.push({
name: 'CustomerConsigneeEdit', name: 'CustomerAddressEdit',
params: { params: {
id: route.params.id, id: route.params.id,
consigneeId, addressId,
}, },
}); });
}; };
@ -73,26 +134,41 @@ const toCustomerConsigneeEdit = (consigneeId) => {
url="Provinces/location" url="Provinces/location"
/> />
<QCard class="q-pa-lg"> <div class="full-width flex justify-center">
<VnPaginate <QCard class="card-width q-pa-lg" v-if="addresses.length">
data-key="CustomerConsignees" <QCardSection>
:url="`Clients/${route.params.id}/addresses`" <div
order="id" v-for="(item, index) in addresses"
auto-load
:filter="consigneeFilter"
>
<template #body="{ rows }">
<QCard
v-for="(item, index) in rows"
:key="index" :key="index"
class="address-card"
:class="{ :class="{
'consignees-card': true, 'q-mb-md': index < addresses.length - 1,
'q-mb-md': index < rows.length - 1, 'item-disabled': !item.isActive,
}" }"
@click="toCustomerConsigneeEdit(item.id)" @click="toCustomerAddressEdit(item.id)"
> >
<div class="q-ml-xs q-mr-md flex items-center"> <div class="q-ml-xs q-mr-md flex items-center">
<QIcon name="star" size="md" color="primary" /> <QIcon
:style="{
'font-variation-settings': `'FILL' ${isDefaultAddress(
item
)}`,
}"
color="primary"
name="star"
size="md"
@click.stop="!isDefaultAddress(item) && setDefault(item)"
>
<QTooltip>
{{
t(
isDefaultAddress(item)
? 'Default address'
: 'Set as default'
)
}}
</QTooltip>
</QIcon>
</div> </div>
<div> <div>
<div class="text-weight-bold q-mb-sm"> <div class="text-weight-bold q-mb-sm">
@ -126,9 +202,9 @@ const toCustomerConsigneeEdit = (consigneeId) => {
<div v-if="item.observations.length"> <div v-if="item.observations.length">
<div <div
:key="index" :key="obIndex"
class="flex q-mb-sm" class="flex q-mb-sm"
v-for="(observation, index) in item.observations" v-for="(observation, obIndex) in item.observations"
> >
<div class="text-weight-bold q-mr-sm"> <div class="text-weight-bold q-mr-sm">
{{ observation.observationType.description }}: {{ observation.observationType.description }}:
@ -136,12 +212,13 @@ const toCustomerConsigneeEdit = (consigneeId) => {
<div>{{ observation.description }}</div> <div>{{ observation.description }}</div>
</div> </div>
</div> </div>
</QCard> </div>
</template> </QCardSection>
</VnPaginate> </QCard>
</QCard> </div>
<QPageSticky :offset="[18, 18]"> <QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" /> <QBtn @click.stop="toCustomerAddressCreate()" color="primary" fab icon="add" />
<QTooltip> <QTooltip>
{{ t('New consignee') }} {{ t('New consignee') }}
</QTooltip> </QTooltip>
@ -149,8 +226,8 @@ const toCustomerConsigneeEdit = (consigneeId) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.consignees-card { .address-card {
border: 2px solid var(--vn-accent-color); border: 2px solid var(--vn-light-gray);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
display: flex; display: flex;
@ -160,6 +237,10 @@ const toCustomerConsigneeEdit = (consigneeId) => {
background-color: var(--vn-accent-color); background-color: var(--vn-accent-color);
} }
} }
.item-disabled {
opacity: 0.6;
}
</style> </style>
<i18n> <i18n>
@ -167,4 +248,6 @@ es:
Is equalizated: Recargo de equivalencia Is equalizated: Recargo de equivalencia
Is logiflora allowed: Compra directa en Holanda Is logiflora allowed: Compra directa en Holanda
New consignee: Nuevo consignatario New consignee: Nuevo consignatario
Default address: Consignatario predeterminado
Set as default: Establecer como predeterminado
</i18n> </i18n>

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