#6911 save on enter #207
10
CHANGELOG.md
10
CHANGELOG.md
|
@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
|
|||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [2414.01] - 2024-04-04
|
||||
|
||||
### Added
|
||||
|
||||
- (Tickets) => Se añade la opción de clonar ticket. #6951
|
||||
|
||||
### Changed
|
||||
|
||||
### Fixed
|
||||
|
||||
## [2400.01] - 2024-01-04
|
||||
|
||||
### Added
|
||||
|
|
|
@ -5,13 +5,13 @@ Lilium frontend
|
|||
## Install the dependencies
|
||||
|
||||
```bash
|
||||
bun install
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Install quasar cli
|
||||
|
||||
```bash
|
||||
sudo bun install -g @quasar/cli
|
||||
sudo npm install -g @quasar/cli
|
||||
```
|
||||
|
||||
### Start the app in development mode (hot-code reloading, error reporting, etc.)
|
||||
|
@ -23,13 +23,13 @@ quasar dev
|
|||
### Run unit tests
|
||||
|
||||
```bash
|
||||
bun run test:unit
|
||||
pnpm run test:unit
|
||||
```
|
||||
|
||||
### Run e2e tests
|
||||
|
||||
```bash
|
||||
npm run test:e2e
|
||||
pnpm run test:e2e
|
||||
```
|
||||
|
||||
### Build the app for production
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "salix-front",
|
||||
"version": "24.12.0",
|
||||
"version": "24.14.0",
|
||||
"description": "Salix frontend",
|
||||
"productName": "Salix",
|
||||
"author": "Verdnatura",
|
||||
|
@ -35,7 +35,7 @@
|
|||
"@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
|
||||
"@vue/test-utils": "^2.4.4",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"cypress": "^12.13.0",
|
||||
"cypress": "^13.6.6",
|
||||
"eslint": "^8.41.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-cypress": "^2.13.3",
|
||||
|
|
|
@ -59,8 +59,8 @@ devDependencies:
|
|||
specifier: ^10.4.14
|
||||
version: 10.4.17(postcss@8.4.35)
|
||||
cypress:
|
||||
specifier: ^12.13.0
|
||||
version: 12.17.4
|
||||
specifier: ^13.6.6
|
||||
version: 13.6.6
|
||||
eslint:
|
||||
specifier: ^8.41.0
|
||||
version: 8.56.0
|
||||
|
@ -124,8 +124,8 @@ packages:
|
|||
resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
|
||||
dev: true
|
||||
|
||||
/@cypress/request@2.88.12:
|
||||
resolution: {integrity: sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==}
|
||||
/@cypress/request@3.0.1:
|
||||
resolution: {integrity: sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==}
|
||||
engines: {node: '>= 6'}
|
||||
dependencies:
|
||||
aws-sign2: 0.7.0
|
||||
|
@ -1228,10 +1228,6 @@ packages:
|
|||
'@types/node': 20.11.19
|
||||
dev: false
|
||||
|
||||
/@types/node@16.18.82:
|
||||
resolution: {integrity: sha512-pcDZtkx9z8XYV+ius2P3Ot2VVrcYOfXffBQUBuiszrlUzKSmoDYqo+mV+IoL8iIiIjjtOMvNSmH1hwJ+Q+f96Q==}
|
||||
dev: true
|
||||
|
||||
/@types/node@20.11.19:
|
||||
resolution: {integrity: sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==}
|
||||
dependencies:
|
||||
|
@ -2248,15 +2244,14 @@ packages:
|
|||
/csstype@3.1.3:
|
||||
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
|
||||
|
||||
/cypress@12.17.4:
|
||||
resolution: {integrity: sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==}
|
||||
engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
|
||||
/cypress@13.6.6:
|
||||
resolution: {integrity: sha512-S+2S9S94611hXimH9a3EAYt81QM913ZVA03pUmGDfLTFa5gyp85NJ8dJGSlEAEmyRsYkioS1TtnWtbv/Fzt11A==}
|
||||
engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@cypress/request': 2.88.12
|
||||
'@cypress/request': 3.0.1
|
||||
'@cypress/xvfb': 1.2.4(supports-color@8.1.1)
|
||||
'@types/node': 16.18.82
|
||||
'@types/sinonjs__fake-timers': 8.1.1
|
||||
'@types/sizzle': 2.3.8
|
||||
arch: 2.2.0
|
||||
|
|
|
@ -29,8 +29,7 @@ module.exports = configure(function (/* ctx */) {
|
|||
// app boot file (/src/boot)
|
||||
// --> boot files are part of "main.js"
|
||||
// https://v2.quasar.dev/quasar-cli/boot-files
|
||||
//
|
||||
boot: ['i18n', 'axios', 'vnDate','quasar','setDefaults', 'validations'],
|
||||
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar.defaults'],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
|
||||
css: ['app.scss'],
|
||||
|
@ -68,7 +67,7 @@ module.exports = configure(function (/* ctx */) {
|
|||
// analyze: true,
|
||||
// env: {},
|
||||
rawDefine: {
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
// ignorePublicFolder: true,
|
||||
// minify: false,
|
||||
|
@ -93,7 +92,7 @@ module.exports = configure(function (/* ctx */) {
|
|||
vitePlugins: [
|
||||
[
|
||||
VueI18nPlugin({
|
||||
runtimeOnly: false
|
||||
runtimeOnly: false,
|
||||
}),
|
||||
{
|
||||
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
|
||||
|
@ -118,15 +117,13 @@ module.exports = configure(function (/* ctx */) {
|
|||
secure: false,
|
||||
},
|
||||
},
|
||||
open: false,
|
||||
},
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
|
||||
framework: {
|
||||
config: {
|
||||
config: {
|
||||
brand: {
|
||||
primary: 'orange',
|
||||
},
|
||||
dark: 'auto',
|
||||
},
|
||||
},
|
||||
|
|
|
@ -11,7 +11,7 @@ axios.defaults.baseURL = '/api/';
|
|||
|
||||
const onRequest = (config) => {
|
||||
const token = session.getToken();
|
||||
if (token.length && config.headers) {
|
||||
if (token.length && !config.headers.Authorization) {
|
||||
config.headers.Authorization = token;
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
import { QTable } from 'quasar';
|
||||
import setDefault from './setDefault';
|
||||
|
||||
setDefault(QTable, 'pagination', { rowsPerPage: 0 });
|
||||
setDefault(QTable, 'hidePagination', true);
|
|
@ -0,0 +1,18 @@
|
|||
export default function (component, key, value) {
|
||||
const prop = component.props[key];
|
||||
switch (typeof prop) {
|
||||
case 'object':
|
||||
prop.default = value;
|
||||
break;
|
||||
case 'function':
|
||||
component.props[key] = {
|
||||
type: prop,
|
||||
default: value,
|
||||
};
|
||||
break;
|
||||
case 'undefined':
|
||||
throw new Error('unknown prop: ' + key);
|
||||
default:
|
||||
throw new Error('unhandled type: ' + typeof prop);
|
||||
}
|
||||
}
|
|
@ -1,22 +1,25 @@
|
|||
import { QForm } from 'quasar';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
const filterAvailableInput = (element) =>
|
||||
element.classList.contains('q-field__native') && !element.disabled;
|
||||
const filterAvailableText = (element) =>
|
||||
element.__vueParentComponent.type.name === 'QInput' &&
|
||||
element.__vueParentComponent?.attrs?.class !== 'vn-input-date';
|
||||
|
||||
export default {
|
||||
inject: { QForm },
|
||||
component: { QForm },
|
||||
components: { QForm },
|
||||
extends: { QForm },
|
||||
mounted: function () {
|
||||
const vm = getCurrentInstance();
|
||||
if (vm.type.name === 'QForm')
|
||||
if (this.$el?.id !== 'searchbarForm') {
|
||||
let that = this;
|
||||
if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
|
||||
// AUTOFOCUS
|
||||
const elementsArray = Array.from(this.$el.elements);
|
||||
const firstInputElement = elementsArray
|
||||
.filter(filterAvailableInput)
|
||||
.find(filterAvailableText);
|
||||
|
||||
document.addEventListener('keyup', function (evt) {
|
||||
if (evt.keyCode === 13) {
|
||||
that.onSubmit();
|
||||
}
|
||||
});
|
||||
if (firstInputElement) {
|
||||
firstInputElement.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
export * from './defaults/qTable';
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
|
@ -16,9 +16,8 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const bicInputRef = ref(null);
|
||||
const bankEntityFormData = reactive({
|
||||
name: null,
|
||||
bic: null,
|
||||
|
@ -32,9 +31,14 @@ const countriesFilter = {
|
|||
|
||||
const countriesOptions = ref([]);
|
||||
|
||||
const onDataSaved = (data) => {
|
||||
emit('onDataSaved', data);
|
||||
const onDataSaved = (formData, requestResponse) => {
|
||||
emit('onDataSaved', formData, requestResponse);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
bicInputRef.value.focus();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -50,7 +54,7 @@ const onDataSaved = (data) => {
|
|||
:title="t('title')"
|
||||
:subtitle="t('subtitle')"
|
||||
:form-initial-data="bankEntityFormData"
|
||||
@on-data-saved="onDataSaved($event)"
|
||||
@on-data-saved="onDataSaved"
|
||||
>
|
||||
<template #form-inputs="{ data, validate }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
|
@ -64,6 +68,7 @@ const onDataSaved = (data) => {
|
|||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
ref="bicInputRef"
|
||||
:label="t('swift')"
|
||||
v-model="data.bic"
|
||||
:required="true"
|
||||
|
|
|
@ -0,0 +1,174 @@
|
|||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import FormModelPopup from './FormModelPopup.vue';
|
||||
import VnInputDate from './common/VnInputDate.vue';
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const manualInvoiceFormData = reactive({
|
||||
maxShipped: Date.vnNew(),
|
||||
});
|
||||
|
||||
const formModelPopupRef = ref();
|
||||
const invoiceOutSerialsOptions = ref([]);
|
||||
const taxAreasOptions = ref([]);
|
||||
const ticketsOptions = ref([]);
|
||||
const clientsOptions = ref([]);
|
||||
const isLoading = computed(() => formModelPopupRef.value?.isLoading);
|
||||
|
||||
const onDataSaved = async (formData, requestResponse) => {
|
||||
emit('onDataSaved', formData, requestResponse);
|
||||
if (requestResponse && requestResponse.id)
|
||||
router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="InvoiceOutSerials"
|
||||
:filter="{ where: { code: { neq: 'R' } }, order: ['code'] }"
|
||||
@on-fetch="(data) => (invoiceOutSerialsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="TaxAreas"
|
||||
:filter="{ order: ['code'] }"
|
||||
@on-fetch="(data) => (taxAreasOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Tickets"
|
||||
:filter="{ fields: ['id', 'nickname'], order: 'shipped DESC', limit: 30 }"
|
||||
@on-fetch="(data) => (ticketsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Clients"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
@on-fetch="(data) => (clientsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormModelPopup
|
||||
ref="formModelPopupRef"
|
||||
:title="t('Create manual invoice')"
|
||||
url-create="InvoiceOuts/createManualInvoice"
|
||||
model="invoiceOut"
|
||||
:form-initial-data="manualInvoiceFormData"
|
||||
@on-data-saved="onDataSaved"
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<span v-if="isLoading" class="text-primary invoicing-text">
|
||||
<QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
|
||||
{{ t('Invoicing in progress...') }}
|
||||
</span>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Ticket')"
|
||||
:options="ticketsOptions"
|
||||
hide-selected
|
||||
option-label="id"
|
||||
option-value="id"
|
||||
v-model="data.ticketFk"
|
||||
@update:model-value="data.clientFk = null"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
|
||||
<QItemLabel caption>{{
|
||||
scope.opt?.nickname
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<span class="row items-center" style="max-width: max-content">{{
|
||||
t('Or')
|
||||
}}</span>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Client')"
|
||||
:options="clientsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.clientFk"
|
||||
@update:model-value="data.ticketFk = null"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Serial')"
|
||||
:options="invoiceOutSerialsOptions"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="code"
|
||||
v-model="data.serial"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Area')"
|
||||
:options="taxAreasOptions"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
v-model="data.taxArea"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInput
|
||||
:label="t('Reference')"
|
||||
type="textarea"
|
||||
v-model="data.reference"
|
||||
fill-input
|
||||
autogrow
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.invoicing-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $primary;
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Create manual invoice: Crear factura manual
|
||||
Ticket: Ticket
|
||||
Client: Cliente
|
||||
Max date: Fecha límite
|
||||
Serial: Serie
|
||||
Area: Area
|
||||
Reference: Referencia
|
||||
Or: O
|
||||
Invoicing in progress...: Facturación en progreso...
|
||||
</i18n>
|
|
@ -71,13 +71,9 @@ const closeForm = () => {
|
|||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
<QIcon name="close" size="sm" />
|
||||
</span>
|
||||
<h1 class="title">
|
||||
{{
|
||||
t('editBuyTitle', {
|
||||
buysAmount: rows.length,
|
||||
})
|
||||
}}
|
||||
</h1>
|
||||
<span class="title">{{ t('Edit') }}</span>
|
||||
<span class="countLines">{{ ` ${rows.length} ` }}</span>
|
||||
<span class="title">{{ t('buy(s)') }}</span>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
|
@ -94,23 +90,23 @@ const closeForm = () => {
|
|||
</div>
|
||||
</VnRow>
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="q-ml-sm"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</QCard>
|
||||
</QForm>
|
||||
|
@ -129,13 +125,18 @@ const closeForm = () => {
|
|||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.countLines {
|
||||
font-size: 24px;
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
editBuyTitle: Edit {buysAmount} buy(s)
|
||||
es:
|
||||
editBuyTitle: Editar {buysAmount} compra(s)
|
||||
Field to edit: Campo a editar
|
||||
Value: Valor
|
||||
</i18n>
|
||||
es:
|
||||
Edit: Editar
|
||||
buy(s): compra(s)
|
||||
Field to edit: Campo a editar
|
||||
Value: Valor
|
||||
</i18n>
|
||||
|
|
|
@ -60,3 +60,6 @@ async function fetch(fetchFilter = {}) {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<template></template>
|
||||
</template>
|
||||
|
|
|
@ -202,7 +202,6 @@ const selectItem = ({ id }) => {
|
|||
<QTable
|
||||
:columns="tableColumns"
|
||||
:rows="tableRows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:loading="loading"
|
||||
:hide-header="!tableRows || !tableRows.length > 0"
|
||||
:no-data-label="t('Enter a new search')"
|
||||
|
|
|
@ -200,7 +200,6 @@ const selectTravel = ({ id }) => {
|
|||
<QTable
|
||||
:columns="tableColumns"
|
||||
:rows="tableRows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:loading="loading"
|
||||
:hide-header="!tableRows || !tableRows.length > 0"
|
||||
:no-data-label="t('Enter a new search')"
|
||||
|
|
|
@ -10,6 +10,7 @@ import { useValidator } from 'src/composables/useValidator';
|
|||
import useNotify from 'src/composables/useNotify.js';
|
||||
import SkeletonForm from 'components/ui/SkeletonForm.vue';
|
||||
import VnConfirm from './ui/VnConfirm.vue';
|
||||
import { tMobile } from 'src/composables/tMobile';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const state = useState();
|
||||
|
@ -43,6 +44,10 @@ const $props = defineProps({
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
defaultButtons: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
@ -61,6 +66,10 @@ const $props = defineProps({
|
|||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
clearStoreOnUnmount: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
saveFn: {
|
||||
type: Function,
|
||||
default: null,
|
||||
|
@ -69,10 +78,6 @@ const $props = defineProps({
|
|||
|
||||
const emit = defineEmits(['onFetch', 'onDataSaved']);
|
||||
|
||||
defineExpose({
|
||||
save,
|
||||
});
|
||||
|
||||
const componentIsRendered = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
|
@ -109,7 +114,12 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
state.unset($props.model);
|
||||
// Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
|
||||
if (hasChanges.value) {
|
||||
state.set($props.model, originalData.value);
|
||||
return;
|
||||
}
|
||||
if ($props.clearStoreOnUnmount) state.unset($props.model);
|
||||
});
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
@ -119,7 +129,19 @@ const hasChanges = ref(!$props.observeFormChanges);
|
|||
const originalData = ref({ ...$props.formInitialData });
|
||||
const formData = computed(() => state.get($props.model));
|
||||
const formUrl = computed(() => $props.url);
|
||||
|
||||
const defaultButtons = computed(() => ({
|
||||
save: {
|
||||
color: 'primary',
|
||||
icon: 'restart_alt',
|
||||
label: 'globals.save',
|
||||
},
|
||||
reset: {
|
||||
color: 'primary',
|
||||
icon: 'save',
|
||||
label: 'globals.reset',
|
||||
},
|
||||
...$props.defaultButtons,
|
||||
}));
|
||||
const startFormWatcher = () => {
|
||||
watch(
|
||||
() => formData.value,
|
||||
|
@ -131,10 +153,6 @@ const startFormWatcher = () => {
|
|||
);
|
||||
};
|
||||
|
||||
function tMobile(...args) {
|
||||
if (!quasar.platform.is.mobile) return t(...args);
|
||||
}
|
||||
|
||||
async function fetch() {
|
||||
const { data } = await axios.get($props.url, {
|
||||
params: { filter: JSON.stringify($props.filter) },
|
||||
|
@ -205,6 +223,11 @@ watch(formUrl, async () => {
|
|||
reset();
|
||||
fetch();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
save,
|
||||
isLoading,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center full-width">
|
||||
|
@ -233,21 +256,21 @@ watch(formUrl, async () => {
|
|||
<QBtnGroup push class="q-gutter-x-sm">
|
||||
<slot name="moreActions" />
|
||||
<QBtn
|
||||
:label="tMobile('globals.reset')"
|
||||
color="primary"
|
||||
icon="restart_alt"
|
||||
:label="tMobile(defaultButtons.reset.label)"
|
||||
:color="defaultButtons.reset.color"
|
||||
:icon="defaultButtons.reset.icon"
|
||||
flat
|
||||
@click="reset"
|
||||
:disable="!hasChanges"
|
||||
:title="t('globals.reset')"
|
||||
:title="t(defaultButtons.reset.label)"
|
||||
/>
|
||||
<QBtn
|
||||
:label="tMobile('globals.save')"
|
||||
color="primary"
|
||||
icon="save"
|
||||
:label="tMobile(defaultButtons.save.label)"
|
||||
:color="defaultButtons.save.color"
|
||||
:icon="defaultButtons.save.icon"
|
||||
@click="save"
|
||||
:disable="!hasChanges"
|
||||
:title="t('globals.save')"
|
||||
:title="t(defaultButtons.save.label)"
|
||||
/>
|
||||
</QBtnGroup>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
|
@ -39,27 +39,34 @@ const $props = defineProps({
|
|||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formModelRef = ref(null);
|
||||
const closeButton = ref(null);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const onDataSaved = (dataSaved) => {
|
||||
emit('onDataSaved', dataSaved);
|
||||
const onDataSaved = (formData, requestResponse) => {
|
||||
emit('onDataSaved', formData, requestResponse);
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
const isLoading = computed(() => formModelRef.value?.isLoading);
|
||||
|
||||
const closeForm = async () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
isLoading,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormModel
|
||||
ref="formModelRef"
|
||||
:form-initial-data="formInitialData"
|
||||
:observe-form-changes="false"
|
||||
:default-actions="false"
|
||||
:url-create="urlCreate"
|
||||
:model="model"
|
||||
@on-data-saved="onDataSaved($event)"
|
||||
@on-data-saved="onDataSaved"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
|
|
|
@ -0,0 +1,96 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const emit = defineEmits(['onSubmit']);
|
||||
|
||||
const $props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
defaultSubmitButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
defaultCancelButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
customSubmitButtonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const closeButton = ref(null);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('onSubmit');
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QForm
|
||||
@submit="onSubmit($event)"
|
||||
class="all-pointer-events full-width"
|
||||
style="max-width: 800px"
|
||||
>
|
||||
<QCard class="q-pa-lg">
|
||||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
<QIcon name="close" size="sm" />
|
||||
</span>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<p>{{ subtitle }}</p>
|
||||
<slot name="form-inputs" />
|
||||
<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
|
||||
v-if="defaultCancelButton"
|
||||
:label="t('globals.cancel')"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
<slot name="customButtons" />
|
||||
</div>
|
||||
</QCard>
|
||||
</QForm>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
|
@ -234,6 +234,6 @@ async function togglePinned(item, event) {
|
|||
max-width: 256px;
|
||||
}
|
||||
.header {
|
||||
color: #999999;
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t, te } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
|
@ -11,19 +11,30 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
|
||||
const itemComputed = computed(() => {
|
||||
const item = JSON.parse(JSON.stringify(props.item));
|
||||
const [, , section] = item.title.split('.');
|
||||
|
||||
if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
|
||||
return item;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
|
||||
<QItemSection avatar v-if="item.icon">
|
||||
<QIcon :name="item.icon" />
|
||||
<QItem
|
||||
active-class="text-primary"
|
||||
:to="{ name: itemComputed.name }"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<QItemSection avatar v-if="itemComputed.icon">
|
||||
<QIcon :name="itemComputed.icon" />
|
||||
</QItemSection>
|
||||
<QItemSection avatar v-if="!item.icon">
|
||||
<QItemSection avatar v-if="!itemComputed.icon">
|
||||
<QIcon name="disabled_by_default" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
||||
<QItemSection>{{ t(itemComputed.title) }}</QItemSection>
|
||||
<QItemSection side>
|
||||
<slot name="side" :item="item" />
|
||||
<slot name="side" :item="itemComputed" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
|
|
|
@ -10,12 +10,12 @@ import UserPanel from 'components/UserPanel.vue';
|
|||
import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const stateStore = useStateStore();
|
||||
const quasar = useQuasar();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
const appName = 'Lilium';
|
||||
|
||||
onMounted(() => stateStore.setMounted());
|
||||
|
@ -106,7 +106,7 @@ const pinnedModulesRef = ref();
|
|||
width: max-content;
|
||||
}
|
||||
.q-header {
|
||||
background-color: var(--vn-dark);
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
|
|
|
@ -0,0 +1,168 @@
|
|||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import FormPopup from './FormPopup.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
|
||||
const $props = defineProps({
|
||||
invoiceOutData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const { notify } = useNotify();
|
||||
|
||||
const transferInvoiceParams = reactive({
|
||||
id: $props.invoiceOutData?.id,
|
||||
refFk: $props.invoiceOutData?.ref,
|
||||
});
|
||||
const closeButton = ref(null);
|
||||
const clientsOptions = ref([]);
|
||||
const rectificativeTypeOptions = ref([]);
|
||||
const siiTypeInvoiceOutsOptions = ref([]);
|
||||
const invoiceCorrectionTypesOptions = ref([]);
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
|
||||
const transferInvoice = async () => {
|
||||
try {
|
||||
const { data } = await axios.post(
|
||||
'InvoiceOuts/transferInvoice',
|
||||
transferInvoiceParams
|
||||
);
|
||||
notify(t('Transferred invoice'), 'positive');
|
||||
closeForm();
|
||||
router.push('InvoiceOutSummary', { id: data.id });
|
||||
} catch (err) {
|
||||
console.error('Error transfering invoice', err);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Clients"
|
||||
@on-fetch="(data) => (clientsOptions = data)"
|
||||
:filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="CplusRectificationTypes"
|
||||
:filter="{ order: 'description' }"
|
||||
@on-fetch="(data) => (rectificativeTypeOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="SiiTypeInvoiceOuts"
|
||||
:filter="{ where: { code: { like: 'R%' } } }"
|
||||
@on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="InvoiceCorrectionTypes"
|
||||
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormPopup
|
||||
@on-submit="transferInvoice()"
|
||||
:title="t('Transfer invoice')"
|
||||
:custom-submit-button-label="t('Transfer client')"
|
||||
:default-cancel-button="false"
|
||||
>
|
||||
<template #form-inputs>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Client')"
|
||||
:options="clientsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="transferInvoiceParams.newClientFk"
|
||||
:required="true"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
#{{ scope.opt?.id }} -
|
||||
{{ scope.opt?.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Rectificative type')"
|
||||
:options="rectificativeTypeOptions"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="transferInvoiceParams.cplusRectificationTypeFk"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Class')"
|
||||
:options="siiTypeInvoiceOutsOptions"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
|
||||
:required="true"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.code }} -
|
||||
{{ scope.opt?.description }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Type')"
|
||||
:options="invoiceCorrectionTypesOptions"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Transfer invoice: Transferir factura
|
||||
Transfer client: Transferir cliente
|
||||
Client: Cliente
|
||||
Rectificative type: Tipo rectificativa
|
||||
Class: Clase
|
||||
Type: Tipo
|
||||
Transferred invoice: Factura transferida
|
||||
</i18n>
|
|
@ -7,12 +7,16 @@ import axios from 'axios';
|
|||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import { localeEquivalence } from 'src/i18n/index';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
const state = useState();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
import { useClipboard } from 'src/composables/useClipboard';
|
||||
import { ref } from 'vue';
|
||||
const { copyText } = useClipboard();
|
||||
const userLocale = computed({
|
||||
get() {
|
||||
|
@ -44,7 +48,10 @@ const darkMode = computed({
|
|||
});
|
||||
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
const token = session.getTokenMultimedia();
|
||||
const warehousesData = ref();
|
||||
const companiesData = ref();
|
||||
const accountBankData = ref();
|
||||
|
||||
onMounted(async () => {
|
||||
updatePreferences();
|
||||
|
@ -87,10 +94,28 @@ function copyUserToken() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QMenu anchor="bottom left">
|
||||
<FetchData
|
||||
url="Warehouses"
|
||||
order="name"
|
||||
@on-fetch="(data) => (warehousesData = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Companies"
|
||||
order="name"
|
||||
@on-fetch="(data) => (companiesData = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Accountings"
|
||||
order="name"
|
||||
@on-fetch="(data) => (accountBankData = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QMenu anchor="bottom left" class="bg-vn-section-color">
|
||||
<div class="row no-wrap q-pa-md">
|
||||
<div class="column panel">
|
||||
<div class="text-h6 q-mb-md">
|
||||
<div class="col column">
|
||||
<div class="text-h6 q-ma-sm q-mb-none">
|
||||
{{ t('components.userPanel.settings') }}
|
||||
</div>
|
||||
<QToggle
|
||||
|
@ -114,7 +139,7 @@ function copyUserToken() {
|
|||
|
||||
<QSeparator vertical inset class="q-mx-lg" />
|
||||
|
||||
<div class="column items-center panel">
|
||||
<div class="col column items-center q-mb-sm">
|
||||
<QAvatar size="80px">
|
||||
<QImg
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
|
@ -131,7 +156,6 @@ function copyUserToken() {
|
|||
>
|
||||
@{{ user.name }}
|
||||
</div>
|
||||
|
||||
<QBtn
|
||||
id="logout"
|
||||
color="orange"
|
||||
|
@ -141,17 +165,63 @@ function copyUserToken() {
|
|||
icon="logout"
|
||||
@click="logout()"
|
||||
v-close-popup
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<QSeparator inset class="q-mx-lg" />
|
||||
<div class="col q-gutter-xs q-pa-md">
|
||||
<VnRow>
|
||||
<VnSelectFilter
|
||||
:label="t('components.userPanel.localWarehouse')"
|
||||
v-model="user.localWarehouseFk"
|
||||
:options="warehousesData"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
<VnSelectFilter
|
||||
:label="t('components.userPanel.localBank')"
|
||||
hide-selected
|
||||
v-model="user.localBankFk"
|
||||
:options="accountBankData"
|
||||
option-label="bank"
|
||||
option-value="id"
|
||||
></VnSelectFilter>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelectFilter
|
||||
:label="t('components.userPanel.localCompany')"
|
||||
hide-selected
|
||||
v-model="user.companyFk"
|
||||
:options="companiesData"
|
||||
option-label="code"
|
||||
option-value="id"
|
||||
/>
|
||||
<VnSelectFilter
|
||||
:label="t('components.userPanel.userWarehouse')"
|
||||
hide-selected
|
||||
v-model="user.warehouseFk"
|
||||
:options="warehousesData"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelectFilter
|
||||
:label="t('components.userPanel.userCompany')"
|
||||
hide-selected
|
||||
v-model="user.companyFk"
|
||||
:options="companiesData"
|
||||
option-label="code"
|
||||
option-value="id"
|
||||
style="flex: 0"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
</QMenu>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.copyText {
|
||||
&:hover {
|
||||
cursor: alias;
|
||||
|
|
|
@ -0,0 +1,156 @@
|
|||
<script setup>
|
||||
import {useDialogPluginComponent} from 'quasar';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {computed, ref} from 'vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import axios from 'axios';
|
||||
import useNotify from "composables/useNotify";
|
||||
|
||||
const MESSAGE_MAX_LENGTH = 160;
|
||||
|
||||
const {t} = useI18n();
|
||||
const {notify} = useNotify();
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
destination: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
destinationFk: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
|
||||
const {dialogRef, onDialogHide} = useDialogPluginComponent();
|
||||
|
||||
const smsRules = [
|
||||
(val) => (val && val.length > 0) || t("The message can't be empty"),
|
||||
(val) =>
|
||||
(val && new Blob([val]).size <= MESSAGE_MAX_LENGTH) ||
|
||||
t("The message it's too long"),
|
||||
];
|
||||
|
||||
const message = ref('');
|
||||
|
||||
const charactersRemaining = computed(
|
||||
() => MESSAGE_MAX_LENGTH - new Blob([message.value]).size
|
||||
);
|
||||
|
||||
const charactersChipColor = computed(() => {
|
||||
if (charactersRemaining.value < 0) {
|
||||
return 'negative';
|
||||
}
|
||||
if (charactersRemaining.value <= 25) {
|
||||
return 'warning';
|
||||
}
|
||||
return 'primary';
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!props.destination) {
|
||||
throw new Error(`The destination can't be empty`);
|
||||
}
|
||||
|
||||
if (!message.value) {
|
||||
throw new Error(`The message can't be empty`);
|
||||
}
|
||||
|
||||
if (charactersRemaining.value < 0) {
|
||||
throw new Error(`The message it's too long`);
|
||||
}
|
||||
|
||||
const response = await axios.post(props.url, {
|
||||
destination: props.destination,
|
||||
destinationFk: props.destinationFk,
|
||||
message: message.value,
|
||||
...props.data,
|
||||
});
|
||||
|
||||
if (response.data) {
|
||||
emit('sent', response.data);
|
||||
notify('globals.smsSent', 'positive');
|
||||
}
|
||||
emit('ok', response.data);
|
||||
emit('hide', response.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<QCard class="full-width dialog">
|
||||
<QCardSection class="row">
|
||||
<span v-if="title" class="text-h6">{{ title }}</span>
|
||||
<QSpace />
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QForm @submit="onSubmit">
|
||||
<QCardSection>
|
||||
<VnInput
|
||||
v-model="message"
|
||||
type="textarea"
|
||||
:rules="smsRules"
|
||||
:label="t('Message')"
|
||||
:placeholder="t('Message')"
|
||||
:rows="5"
|
||||
required
|
||||
clearable
|
||||
no-error-icon
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="info">
|
||||
<QTooltip>
|
||||
{{
|
||||
t(
|
||||
'Special characters like accents counts as a multiple'
|
||||
)
|
||||
}}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</VnInput>
|
||||
<p class="q-mb-none q-mt-md">
|
||||
{{ t('Characters remaining') }}:
|
||||
<QChip :color="charactersChipColor">
|
||||
{{ charactersRemaining }}
|
||||
</QChip>
|
||||
</p>
|
||||
</QCardSection>
|
||||
<QCardActions align="right">
|
||||
<QBtn type="button" flat v-close-popup class="text-primary">
|
||||
{{ t('globals.cancel') }}
|
||||
</QBtn>
|
||||
<QBtn type="submit" color="primary">{{ t('Send') }}</QBtn>
|
||||
</QCardActions>
|
||||
</QForm>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
Message: Mensaje
|
||||
Send: Enviar
|
||||
Characters remaining: Carácteres restantes
|
||||
Special characters like accents counts as a multiple: Carácteres especiales como los acentos cuentan como varios
|
||||
The destination can't be empty: El destinatario no puede estar vacio
|
||||
The message can't be empty: El mensaje no puede estar vacio
|
||||
The message it's too long: El mensaje es demasiado largo
|
||||
</i18n>
|
|
@ -5,16 +5,16 @@ import { useQuasar } from 'quasar';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useCamelCase } from 'src/composables/useCamelCase';
|
||||
|
||||
const router = useRouter();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const { currentRoute } = useRouter();
|
||||
const { screen } = useQuasar();
|
||||
const { t, te } = useI18n();
|
||||
|
||||
let matched = ref([]);
|
||||
let breadcrumbs = ref([]);
|
||||
let root = ref(null);
|
||||
|
||||
watchEffect(() => {
|
||||
matched.value = router.currentRoute.value.matched.filter(
|
||||
matched.value = currentRoute.value.matched.filter(
|
||||
(matched) => Object.keys(matched.meta).length
|
||||
);
|
||||
breadcrumbs.value.length = 0;
|
||||
|
@ -34,13 +34,17 @@ function getBreadcrumb(param) {
|
|||
icon: param.meta.icon,
|
||||
path: param.path,
|
||||
root: root.value,
|
||||
locale: t(`globals.pageTitles.${param.meta.title}`),
|
||||
};
|
||||
|
||||
if (quasar.screen.gt.sm) {
|
||||
if (screen.gt.sm) {
|
||||
breadcrumb.name = param.name;
|
||||
breadcrumb.title = useCamelCase(param.meta.title);
|
||||
}
|
||||
|
||||
const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`;
|
||||
if (te(moduleLocale)) breadcrumb.locale = t(moduleLocale);
|
||||
|
||||
return breadcrumb;
|
||||
}
|
||||
</script>
|
||||
|
@ -50,7 +54,7 @@ function getBreadcrumb(param) {
|
|||
v-for="(breadcrumb, index) of breadcrumbs"
|
||||
:key="index"
|
||||
:icon="breadcrumb.icon"
|
||||
:label="t(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)"
|
||||
:label="breadcrumb.locale"
|
||||
:to="breadcrumb.path"
|
||||
/>
|
||||
</QBreadcrumbs>
|
||||
|
@ -71,7 +75,7 @@ function getBreadcrumb(param) {
|
|||
}
|
||||
&--last,
|
||||
&__separator {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
}
|
||||
@media (max-width: $breakpoint-md) {
|
||||
|
|
|
@ -27,6 +27,10 @@ const $props = defineProps({
|
|||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const warehouses = ref();
|
||||
|
@ -65,14 +69,15 @@ function mapperDms(data) {
|
|||
}
|
||||
|
||||
function getUrl() {
|
||||
if ($props.url) return $props.url;
|
||||
if ($props.formInitialData) return 'dms/' + $props.formInitialData.id + '/updateFile';
|
||||
return `${$props.model}/${route.params.id}/uploadFile`;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
const body = mapperDms(dms.value);
|
||||
await axios.post(getUrl(), body[0], body[1]);
|
||||
emit('onDataSaved', body[1].params);
|
||||
const response = await axios.post(getUrl(), body[0], body[1]);
|
||||
emit('onDataSaved', body[1].params, response);
|
||||
}
|
||||
|
||||
function defaultData() {
|
||||
|
|
|
@ -218,7 +218,6 @@ function parseDms(data) {
|
|||
/>
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
hide-bottom
|
||||
|
@ -304,7 +303,7 @@ function parseDms(data) {
|
|||
row-gap: 20px;
|
||||
}
|
||||
.labelColor {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
|
||||
|
@ -17,7 +17,7 @@ const $props = defineProps({
|
|||
|
||||
const { t } = useI18n();
|
||||
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
|
||||
|
||||
const vnInputRef = ref(null);
|
||||
const value = computed({
|
||||
get() {
|
||||
return $props.modelValue;
|
||||
|
@ -40,6 +40,14 @@ const styleAttrs = computed(() => {
|
|||
const onEnterPress = () => {
|
||||
emit('keyup.enter');
|
||||
};
|
||||
|
||||
const focus = () => {
|
||||
vnInputRef.value.focus();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { toDate } from 'src/filters';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import isValidDate from "filters/isValidDate";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
@ -17,12 +18,25 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const joinDateAndTime = (date, time) => {
|
||||
if (!date) {
|
||||
return null;
|
||||
}
|
||||
if (!time) {
|
||||
return new Date(date).toISOString();
|
||||
}
|
||||
const [year, month, day] = date.split('/');
|
||||
return new Date(`${year}-${month}-${day}T${time}`).toISOString();
|
||||
};
|
||||
|
||||
const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value ? new Date(value).toISOString() : null);
|
||||
emit('update:modelValue', joinDateAndTime(value, time.value));
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -40,6 +54,16 @@ const formatDate = (dateString) => {
|
|||
date.getDate()
|
||||
)}`;
|
||||
};
|
||||
const displayDate = (dateString) => {
|
||||
if (!dateString || !isValidDate(dateString)) {
|
||||
return '';
|
||||
}
|
||||
return new Date(dateString).toLocaleDateString([], {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
const styleAttrs = computed(() => {
|
||||
return props.isOutlined
|
||||
|
@ -53,12 +77,12 @@ const styleAttrs = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QInput
|
||||
<VnInput
|
||||
class="vn-input-date"
|
||||
rounded
|
||||
readonly
|
||||
:model-value="toDate(value)"
|
||||
:model-value="displayDate(value)"
|
||||
v-bind="{ ...$attrs, ...styleAttrs }"
|
||||
readonly
|
||||
@click="isPopupOpen = true"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
|
@ -76,7 +100,7 @@ const styleAttrs = computed(() => {
|
|||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</VnInput>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { toHour } from 'src/filters';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import isValidDate from 'filters/isValidDate';
|
||||
import VnInput from "components/common/VnInput.vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
@ -26,8 +26,8 @@ const value = computed({
|
|||
},
|
||||
set(value) {
|
||||
const [hours, minutes] = value.split(':');
|
||||
const date = new Date();
|
||||
date.setUTCHours(
|
||||
const date = new Date(props.modelValue);
|
||||
date.setHours(
|
||||
Number.parseInt(hours) || 0,
|
||||
Number.parseInt(minutes) || 0,
|
||||
0,
|
||||
|
@ -37,6 +37,7 @@ const value = computed({
|
|||
},
|
||||
});
|
||||
|
||||
const isPopupOpen = ref(false);
|
||||
const onDateUpdate = (date) => {
|
||||
internalValue.value = date;
|
||||
};
|
||||
|
@ -45,7 +46,7 @@ const save = () => {
|
|||
value.value = internalValue.value;
|
||||
};
|
||||
const formatTime = (dateString) => {
|
||||
if (!isValidDate(dateString)) {
|
||||
if (!dateString || !isValidDate(dateString)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
|
@ -70,16 +71,17 @@ const styleAttrs = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QInput
|
||||
<VnInput
|
||||
class="vn-input-time"
|
||||
rounded
|
||||
readonly
|
||||
:model-value="toHour(value)"
|
||||
:model-value="formatTime(value)"
|
||||
v-bind="{ ...$attrs, ...styleAttrs }"
|
||||
@click="isPopupOpen = true"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
v-model="isPopupOpen"
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
|
@ -109,7 +111,7 @@ const styleAttrs = computed(() => {
|
|||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</VnInput>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -403,7 +403,7 @@ setLogTree();
|
|||
auto-load
|
||||
/>
|
||||
<div
|
||||
class="column items-center logs origin-log"
|
||||
class="column items-center logs origin-log q-mt-md"
|
||||
v-for="(originLog, originLogIndex) in logTree"
|
||||
:key="originLogIndex"
|
||||
>
|
||||
|
@ -819,7 +819,7 @@ setLogTree();
|
|||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
background-color: var(--vn-gray);
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
.q-item {
|
||||
min-height: 0px;
|
||||
|
@ -836,7 +836,7 @@ setLogTree();
|
|||
max-width: 400px;
|
||||
|
||||
& > .header {
|
||||
color: $dark;
|
||||
color: var(--vn-section-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -916,7 +916,7 @@ setLogTree();
|
|||
font-style: italic;
|
||||
}
|
||||
.model-id {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.q-btn {
|
||||
|
@ -942,7 +942,7 @@ setLogTree();
|
|||
}
|
||||
.change-info {
|
||||
overflow: hidden;
|
||||
background-color: var(--vn-dark);
|
||||
background-color: var(--vn-section-color);
|
||||
& > .date {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
@ -981,7 +981,7 @@ setLogTree();
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: var(--vn-gray);
|
||||
background-color: var(--vn-section-color);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
& > .q-icon {
|
||||
|
@ -1036,7 +1036,6 @@ en:
|
|||
claimStateFk: Claim State
|
||||
workerFk: Worker
|
||||
clientFk: Customer
|
||||
rma: RMA
|
||||
responsibility: Responsibility
|
||||
packages: Packages
|
||||
es:
|
||||
|
@ -1046,7 +1045,7 @@ es:
|
|||
tooltips:
|
||||
search: Buscar por identificador o concepto
|
||||
changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
|
||||
Audit logs: Registros de auditoría
|
||||
Audit logs: Historial
|
||||
Property: Propiedad
|
||||
Before: Antes
|
||||
After: Después
|
||||
|
@ -1076,7 +1075,6 @@ es:
|
|||
claimStateFk: Estado de la reclamación
|
||||
workerFk: Trabajador
|
||||
clientFk: Cliente
|
||||
rma: RMA
|
||||
responsibility: Responsabilidad
|
||||
packages: Bultos
|
||||
</i18n>
|
||||
|
|
|
@ -59,6 +59,9 @@ const toggleForm = () => {
|
|||
:name="actionIcon"
|
||||
:size="actionIcon === 'add' ? 'xs' : 'sm'"
|
||||
:class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
|
||||
:style="{
|
||||
'font-variation-settings': `'FILL' ${1}`,
|
||||
}"
|
||||
>
|
||||
<QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
|
||||
</QIcon>
|
||||
|
@ -79,7 +82,7 @@ const toggleForm = () => {
|
|||
border-radius: 50px;
|
||||
|
||||
&.--add-icon {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -51,8 +51,8 @@ const $props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 30,
|
||||
type: [Number, String],
|
||||
default: '30',
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -151,7 +151,7 @@ watch(modelValue, (newValue) => {
|
|||
@on-fetch="(data) => setOptions(data)"
|
||||
:where="where || { [optionValue]: value }"
|
||||
:limit="limit"
|
||||
:order-by="orderBy"
|
||||
:sort-by="sortBy"
|
||||
:fields="fields"
|
||||
/>
|
||||
<QSelect
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<script setup>
|
||||
const $props = defineProps({
|
||||
url: { type: String, default: null },
|
||||
text: { type: String, default: null },
|
||||
icon: { type: String, default: 'open_in_new' },
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="titleBox">
|
||||
<div class="header-link">
|
||||
<a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
|
||||
{{ $props.text }}
|
||||
<QIcon v-if="url" :name="$props.icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
a {
|
||||
font-size: large;
|
||||
}
|
||||
.titleBox {
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
</style>
|
|
@ -1,9 +1,10 @@
|
|||
<script setup>
|
||||
import { onMounted, useSlots, watch, computed, ref } from 'vue';
|
||||
import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { useState } from 'src/composables/useState';
|
||||
|
||||
const $props = defineProps({
|
||||
url: {
|
||||
|
@ -35,35 +36,37 @@ const $props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const state = useState();
|
||||
const slots = useSlots();
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const entity = computed(() => useArrayData($props.dataKey).store.data);
|
||||
const arrayData = useArrayData($props.dataKey || $props.module, {
|
||||
url: $props.url,
|
||||
filter: $props.filter,
|
||||
skip: 0,
|
||||
});
|
||||
const { store } = arrayData;
|
||||
const entity = computed(() => store.data);
|
||||
const isLoading = ref(false);
|
||||
|
||||
defineExpose({
|
||||
getData,
|
||||
});
|
||||
onMounted(async () => {
|
||||
onBeforeMount(async () => {
|
||||
await getData();
|
||||
watch(
|
||||
() => $props.url,
|
||||
async (newUrl, lastUrl) => {
|
||||
if (newUrl == lastUrl) return;
|
||||
await getData();
|
||||
}
|
||||
async () => await getData()
|
||||
);
|
||||
});
|
||||
|
||||
async function getData() {
|
||||
const arrayData = useArrayData($props.dataKey, {
|
||||
url: $props.url,
|
||||
filter: $props.filter,
|
||||
skip: 0,
|
||||
});
|
||||
store.url = $props.url;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||
state.set($props.dataKey, data);
|
||||
emit('onFetch', data);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
|
@ -171,6 +174,7 @@ const emit = defineEmits(['onFetch']);
|
|||
|
||||
<style lang="scss">
|
||||
.body {
|
||||
background-color: var(--vn-section-color);
|
||||
.text-h5 {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
@ -186,14 +190,15 @@ const emit = defineEmits(['onFetch']);
|
|||
display: flex;
|
||||
padding: 2px 16px;
|
||||
.label {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
font-size: 12px;
|
||||
::after {
|
||||
|
||||
&:not(:has(a))::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
overflow: hidden;
|
||||
|
@ -218,15 +223,13 @@ const emit = defineEmits(['onFetch']);
|
|||
}
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.list-box {
|
||||
background-color: var(--vn-gray);
|
||||
|
||||
.q-item__label {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
}
|
||||
.descriptor {
|
||||
|
|
|
@ -61,7 +61,7 @@ const toggleCardCheck = (item) => {
|
|||
}
|
||||
|
||||
.q-chip-color {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color) !important;
|
||||
}
|
||||
|
||||
.card-list-body {
|
||||
|
@ -75,7 +75,7 @@ const toggleCardCheck = (item) => {
|
|||
width: 50%;
|
||||
.label {
|
||||
width: 35%;
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
@ -117,7 +117,7 @@ const toggleCardCheck = (item) => {
|
|||
transition: background-color 0.2s;
|
||||
}
|
||||
.card:hover {
|
||||
background-color: var(--vn-gray);
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
.list-items {
|
||||
width: 75%;
|
||||
|
|
|
@ -1,12 +1,10 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { ref, computed, watch, onBeforeMount } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
|
||||
onMounted(() => fetch());
|
||||
|
||||
const entity = ref();
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
|
@ -16,39 +14,65 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
entityId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['onFetch']);
|
||||
const route = useRoute();
|
||||
const isSummary = ref();
|
||||
const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
|
||||
url: props.url,
|
||||
filter: props.filter,
|
||||
skip: 0,
|
||||
});
|
||||
const { store } = arrayData;
|
||||
const entity = computed(() => store.data);
|
||||
const isLoading = ref(false);
|
||||
|
||||
defineExpose({
|
||||
entity,
|
||||
fetch,
|
||||
});
|
||||
|
||||
async function fetch() {
|
||||
const params = {};
|
||||
|
||||
if (props.filter) params.filter = JSON.stringify(props.filter);
|
||||
|
||||
const { data } = await axios.get(props.url, { params });
|
||||
entity.value = data;
|
||||
|
||||
emit('onFetch', data);
|
||||
}
|
||||
|
||||
watch(props, async () => {
|
||||
entity.value = null;
|
||||
fetch();
|
||||
onBeforeMount(async () => {
|
||||
isSummary.value = String(route.path).endsWith('/summary');
|
||||
await fetch();
|
||||
watch(props, async () => await fetch());
|
||||
});
|
||||
|
||||
async function fetch() {
|
||||
store.url = props.url;
|
||||
isLoading.value = true;
|
||||
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
|
||||
emit('onFetch', data);
|
||||
isLoading.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="summary container">
|
||||
<QCard class="cardSummary">
|
||||
<SkeletonSummary v-if="!entity" />
|
||||
<template v-if="entity">
|
||||
<div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
|
||||
<SkeletonSummary v-if="!entity || isLoading" />
|
||||
<template v-if="entity && !isLoading">
|
||||
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
|
||||
<slot name="header-left">
|
||||
<span></span>
|
||||
<router-link
|
||||
v-if="!isSummary && route.meta.moduleName"
|
||||
class="header link"
|
||||
:to="{
|
||||
name: `${route.meta.moduleName}Summary`,
|
||||
params: { id: entityId || entity.id },
|
||||
}"
|
||||
>
|
||||
<QIcon name="open_in_new" color="white" size="sm" />
|
||||
</router-link>
|
||||
<span v-else></span>
|
||||
</slot>
|
||||
<slot name="header" :entity="entity">
|
||||
<VnLv :label="`${entity.id} -`" :value="entity.name" />
|
||||
|
@ -85,9 +109,9 @@ watch(props, async () => {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background-color: var(--vn-gray);
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background-color: var(--vn-section-color);
|
||||
|
||||
> .q-card.vn-one {
|
||||
flex: 1;
|
||||
|
@ -104,17 +128,17 @@ watch(props, async () => {
|
|||
|
||||
> .q-card {
|
||||
width: 100%;
|
||||
background-color: var(--vn-gray);
|
||||
padding: 15px;
|
||||
background-color: var(--vn-section-color);
|
||||
padding: 7px;
|
||||
font-size: 16px;
|
||||
min-width: 275px;
|
||||
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5px;
|
||||
margin-top: 2px;
|
||||
.label {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
width: 8em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
@ -124,20 +148,33 @@ watch(props, async () => {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
.value {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.header.link:hover {
|
||||
color: lighten($primary, 20%);
|
||||
}
|
||||
.q-checkbox {
|
||||
display: flex;
|
||||
margin-bottom: 9px;
|
||||
& .q-checkbox__label {
|
||||
margin-left: 31px;
|
||||
color: var(--vn-text-color);
|
||||
}
|
||||
& .q-checkbox__inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,8 +10,8 @@ const $props = defineProps({
|
|||
size: { type: String, default: null },
|
||||
title: { type: String, default: null },
|
||||
});
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
const { t } = useI18n();
|
||||
|
||||
const title = computed(() => $props.title ?? t('globals.system'));
|
||||
|
|
|
@ -164,7 +164,11 @@ function formatValue(value) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<<<<<<< HEAD
|
||||
<QForm @submit="search" @keyup.enter="search">
|
||||
=======
|
||||
<QForm @submit="search" id="filterPanelForm">
|
||||
>>>>>>> a9f7cfb8d4acc624cee336bed47618e6d53c3476
|
||||
<QList dense>
|
||||
<QItem class="q-mt-xs">
|
||||
<QItemSection top>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useClipboard } from 'src/composables/useClipboard';
|
||||
|
@ -16,7 +15,6 @@ const $props = defineProps({
|
|||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
||||
const { copyText } = useClipboard();
|
||||
|
||||
function copyValueText() {
|
||||
|
@ -42,14 +40,7 @@ function copyValueText() {
|
|||
</slot>
|
||||
</div>
|
||||
<div class="value">
|
||||
<span v-if="isBooleanValue">
|
||||
<QIcon
|
||||
:name="$props.value ? `check` : `close`"
|
||||
:color="$props.value ? `positive` : `negative`"
|
||||
size="sm"
|
||||
/>
|
||||
</span>
|
||||
<slot v-else name="value">
|
||||
<slot name="value">
|
||||
<span :title="$props.value">
|
||||
{{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
|
||||
</span>
|
||||
|
|
|
@ -8,7 +8,6 @@ import VnPaginate from './VnPaginate.vue';
|
|||
import VnUserLink from '../ui/VnUserLink.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: { type: String, required: true },
|
||||
url: { type: String, default: null },
|
||||
filter: { type: Object, default: () => {} },
|
||||
body: { type: Object, default: () => {} },
|
||||
|
@ -28,7 +27,7 @@ async function insert() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center full-height">
|
||||
<div class="column items-center full-height full-width">
|
||||
<VnPaginate
|
||||
:data-key="$props.url"
|
||||
:url="$props.url"
|
||||
|
@ -39,28 +38,38 @@ async function insert() {
|
|||
ref="vnPaginateRef"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
|
||||
<QCardSection horizontal>
|
||||
<slot name="picture">
|
||||
<VnAvatar :descriptor="false" :worker-id="note.workerFk" />
|
||||
</slot>
|
||||
<QItem class="full-width justify-between items-start">
|
||||
<VnUserLink
|
||||
:name="`${note.worker.user.nickname}`"
|
||||
:worker-id="note.worker.id"
|
||||
/>
|
||||
|
||||
<slot name="actions">
|
||||
{{ toDateHour(note.created) }}
|
||||
<div class="column items-center full-width">
|
||||
<QCard
|
||||
class="q-pa-xs q-mb-sm full-width"
|
||||
v-for="(note, index) in rows"
|
||||
:key="index"
|
||||
>
|
||||
<QCardSection horizontal>
|
||||
<slot name="picture">
|
||||
<VnAvatar
|
||||
:descriptor="false"
|
||||
:worker-id="note.workerFk"
|
||||
size="md"
|
||||
/>
|
||||
</slot>
|
||||
</QItem>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-sm">
|
||||
<slot name="text">
|
||||
{{ note.text }}
|
||||
</slot>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<div class="full-width row justify-between q-pa-xs">
|
||||
<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">
|
||||
|
@ -108,8 +117,10 @@ async function insert() {
|
|||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
max-width: 80em;
|
||||
|
||||
width: 90%;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
&__section {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
|
@ -44,7 +44,7 @@ const props = defineProps({
|
|||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
default: 0,
|
||||
},
|
||||
skeleton: {
|
||||
type: Boolean,
|
||||
|
@ -54,6 +54,10 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
disableInfiniteScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onFetch', 'onPaginate']);
|
||||
|
@ -122,10 +126,11 @@ async function paginate() {
|
|||
emit('onPaginate');
|
||||
}
|
||||
|
||||
async function onLoad(...params) {
|
||||
if (!store.data) return;
|
||||
async function onLoad(index, done) {
|
||||
if (!store.data) {
|
||||
return done();
|
||||
}
|
||||
|
||||
const done = params[1];
|
||||
if (store.data.length === 0 || !props.url) return done(false);
|
||||
|
||||
pagination.value.page = pagination.value.page + 1;
|
||||
|
@ -138,7 +143,7 @@ async function onLoad(...params) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="full-width">
|
||||
<div
|
||||
v-if="!props.autoLoad && !store.data && !isLoading"
|
||||
class="info-row q-pa-md text-center"
|
||||
|
@ -174,7 +179,9 @@ async function onLoad(...params) {
|
|||
v-if="store.data"
|
||||
@load="onLoad"
|
||||
:offset="offset"
|
||||
class="full-width full-height"
|
||||
:disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
|
||||
class="full-width"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot name="body" :rows="store.data"></slot>
|
||||
<div v-if="isLoading" class="info-row q-pa-md text-center">
|
||||
|
|
|
@ -81,8 +81,9 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
async function search() {
|
||||
const staticParams = Object.entries(store.userParams)
|
||||
.filter(([key, value]) => value && (props.staticParams || []).includes(key));
|
||||
const staticParams = Object.entries(store.userParams).filter(
|
||||
([key, value]) => value && (props.staticParams || []).includes(key)
|
||||
);
|
||||
await arrayData.applyFilter({
|
||||
params: {
|
||||
...Object.fromEntries(staticParams),
|
||||
|
@ -107,7 +108,7 @@ async function search() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QForm @submit="search">
|
||||
<QForm @submit="search" id="searchbarForm">
|
||||
<VnInput
|
||||
id="searchbar"
|
||||
v-model="searchText"
|
||||
|
@ -117,7 +118,12 @@ async function search() {
|
|||
autofocus
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="search" v-if="!quasar.platform.is.mobile" />
|
||||
<QIcon
|
||||
v-if="!quasar.platform.is.mobile"
|
||||
class="cursor-pointer"
|
||||
name="search"
|
||||
@click="search"
|
||||
/>
|
||||
</template>
|
||||
<template #append>
|
||||
<QIcon
|
||||
|
@ -155,11 +161,14 @@ async function search() {
|
|||
.cursor-info {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.body--light #searchbar {
|
||||
#searchbar {
|
||||
.q-field--standout.q-field--highlighted .q-field__control {
|
||||
background-color: $grey-7;
|
||||
color: #333;
|
||||
background-color: white;
|
||||
color: black;
|
||||
.q-field__native,
|
||||
.q-icon {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,7 +14,7 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QToolbar class="bg-vn-dark justify-end sticky">
|
||||
<QToolbar class="justify-end sticky">
|
||||
<slot name="st-data">
|
||||
<div id="st-data"></div>
|
||||
</slot>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { useSession } from 'src/composables/useSession';
|
||||
import { getUrl } from './getUrl';
|
||||
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const {getTokenMultimedia} = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
export async function downloadFile(dmsId) {
|
||||
let appUrl = await getUrl('', 'lilium');
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import { useQuasar } from 'quasar';
|
||||
|
||||
export default function() {
|
||||
const quasar = useQuasar();
|
||||
return quasar.screen.gt.xs ? 'q-pa-md': 'q-pa-xs';
|
||||
|
||||
}
|
|
@ -1,30 +1,56 @@
|
|||
import { useState } from './useState';
|
||||
import { useRole } from './useRole';
|
||||
import { useUserConfig } from './useUserConfig';
|
||||
|
||||
import axios from 'axios';
|
||||
import useNotify from './useNotify';
|
||||
|
||||
export function useSession() {
|
||||
const { notify } = useNotify();
|
||||
|
||||
function getToken() {
|
||||
const localToken = localStorage.getItem('token');
|
||||
const sessionToken = sessionStorage.getItem('token');
|
||||
|
||||
return localToken || sessionToken || '';
|
||||
}
|
||||
function getTokenMultimedia() {
|
||||
const localTokenMultimedia = localStorage.getItem('tokenMultimedia');
|
||||
const sessionTokenMultimedia = sessionStorage.getItem('tokenMultimedia');
|
||||
|
||||
return localTokenMultimedia || sessionTokenMultimedia || '';
|
||||
}
|
||||
|
||||
function setToken(data) {
|
||||
if (data.keepLogin) {
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('tokenMultimedia', data.tokenMultimedia);
|
||||
} else {
|
||||
sessionStorage.setItem('token', data.token);
|
||||
sessionStorage.setItem('tokenMultimedia', data.tokenMultimedia);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
if (localStorage.getItem('token'))
|
||||
localStorage.removeItem('token')
|
||||
|
||||
if (sessionStorage.getItem('token'))
|
||||
sessionStorage.removeItem('token');
|
||||
async function destroyToken(url, storage, key) {
|
||||
if (storage.getItem(key)) {
|
||||
try {
|
||||
await axios.post(url, null, {
|
||||
headers: { Authorization: storage.getItem(key) },
|
||||
});
|
||||
} catch (error) {
|
||||
notify('errors.statusUnauthorized', 'negative');
|
||||
} finally {
|
||||
storage.removeItem(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
async function destroy() {
|
||||
const tokens = {
|
||||
tokenMultimedia: 'Accounts/logout',
|
||||
token: 'VnUsers/logout',
|
||||
};
|
||||
for (const [key, url] of Object.entries(tokens)) {
|
||||
await destroyToken(url, localStorage, key);
|
||||
await destroyToken(url, sessionStorage, key);
|
||||
}
|
||||
|
||||
const { setUser } = useState();
|
||||
|
||||
|
@ -37,8 +63,8 @@ export function useSession() {
|
|||
});
|
||||
}
|
||||
|
||||
async function login(token, keepLogin) {
|
||||
setToken({ token, keepLogin });
|
||||
async function login(token, tokenMultimedia, keepLogin) {
|
||||
setToken({ token, tokenMultimedia, keepLogin });
|
||||
|
||||
await useRole().fetch();
|
||||
await useUserConfig().fetch();
|
||||
|
@ -53,6 +79,7 @@ export function useSession() {
|
|||
|
||||
return {
|
||||
getToken,
|
||||
getTokenMultimedia,
|
||||
setToken,
|
||||
destroy,
|
||||
login,
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export function useVnConfirm() {
|
||||
const quasar = useQuasar();
|
||||
|
||||
const openConfirmationModal = (title, message, promise, successFn) => {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: title,
|
||||
message: message,
|
||||
promise: promise,
|
||||
},
|
||||
})
|
||||
.onOk(async () => {
|
||||
if (successFn) successFn();
|
||||
});
|
||||
};
|
||||
|
||||
return { openConfirmationModal };
|
||||
}
|
104
src/css/app.scss
104
src/css/app.scss
|
@ -1,55 +1,84 @@
|
|||
// app global css in SCSS form
|
||||
@import './icons.scss';
|
||||
|
||||
body.body--light {
|
||||
--font-color: black;
|
||||
--vn-section-color: #e0e0e0;
|
||||
--vn-page-color: #ffffff;
|
||||
--vn-text-color: var(--font-color);
|
||||
--vn-label-color: #5f5f5f;
|
||||
--vn-accent-color: #e7e3e3;
|
||||
|
||||
background-color: var(--vn-page-color);
|
||||
|
||||
.q-header .q-toolbar {
|
||||
color: var(--font-color);
|
||||
}
|
||||
.q-card,
|
||||
.q-table,
|
||||
.q-table__bottom,
|
||||
.q-drawer {
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
}
|
||||
|
||||
body.body--dark {
|
||||
--vn-section-color: #403c3c;
|
||||
--vn-text-color: white;
|
||||
--vn-label-color: #a8a8a8;
|
||||
--vn-accent-color: #424242;
|
||||
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $primary;
|
||||
color: $color-link;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tx-color-link {
|
||||
color: $color-link !important;
|
||||
}
|
||||
.tx-color-font {
|
||||
color: $color-link !important;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
color: $color-link !important;
|
||||
cursor: pointer;
|
||||
border-bottom: solid $primary;
|
||||
border-width: 2px;
|
||||
width: 100%;
|
||||
.q-icon {
|
||||
float: right;
|
||||
}
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $orange-4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Removes chrome autofill background
|
||||
input:-webkit-autofill,
|
||||
select:-webkit-autofill {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
font-family: $typography-font-family;
|
||||
-webkit-text-fill-color: var(--vn-text);
|
||||
-webkit-text-fill-color: var(--vn-text-color);
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
}
|
||||
|
||||
body.body--light {
|
||||
.q-header .q-toolbar {
|
||||
background-color: $white;
|
||||
color: #555;
|
||||
}
|
||||
--vn-text: #000000;
|
||||
--vn-gray: #f5f5f5;
|
||||
--vn-label: #5f5f5f;
|
||||
--vn-dark: white;
|
||||
--vn-light-gray: #e7e3e3;
|
||||
}
|
||||
|
||||
body.body--dark {
|
||||
--vn-text: #ffffff;
|
||||
--vn-gray: #313131;
|
||||
--vn-label: #a8a8a8;
|
||||
--vn-dark: #292929;
|
||||
--vn-light-gray: #424242;
|
||||
}
|
||||
|
||||
.bg-vn-dark {
|
||||
background-color: var(--vn-dark);
|
||||
.bg-vn-section-color {
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
.color-vn-text {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
}
|
||||
|
||||
.color-vn-white {
|
||||
|
@ -57,8 +86,8 @@ body.body--dark {
|
|||
}
|
||||
|
||||
.vn-card {
|
||||
background-color: var(--vn-gray);
|
||||
color: var(--vn-text);
|
||||
background-color: var(--vn-section-color);
|
||||
color: var(--vn-text-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
@ -68,11 +97,20 @@ body.body--dark {
|
|||
}
|
||||
|
||||
.bg-vn-primary-row {
|
||||
background-color: var(--vn-dark);
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
.bg-vn-secondary-row {
|
||||
background-color: var(--vn-light-gray);
|
||||
background-color: var(--vn-accent-color);
|
||||
}
|
||||
|
||||
.fill-icon {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
.vn-table-separation-row {
|
||||
height: 16px !important;
|
||||
background-color: var(--vn-section-color) !important;
|
||||
}
|
||||
|
||||
/* Estilo para el asterisco en campos requeridos */
|
||||
|
@ -80,6 +118,10 @@ body.body--dark {
|
|||
content: ' *';
|
||||
}
|
||||
|
||||
.q-chip {
|
||||
color: black;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
|
|
@ -11,26 +11,32 @@
|
|||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
|
||||
$primary: #ec8916;
|
||||
$primary-light: lighten($primary, 35%);
|
||||
$secondary: #26a69a;
|
||||
$accent: #9c27b0;
|
||||
$white: #fff;
|
||||
|
||||
$positive: #21ba45;
|
||||
$negative: #c10015;
|
||||
$info: #31ccec;
|
||||
$warning: #f2c037;
|
||||
$vnColor: #8ebb27;
|
||||
|
||||
$secondary: $primary;
|
||||
$positive: #c8e484;
|
||||
$negative: #fb5252;
|
||||
$info: #84d0e2;
|
||||
$warning: #f4b974;
|
||||
// Pendiente de cuadrar con la base de datos
|
||||
$success: $positive;
|
||||
$alert: $negative;
|
||||
$white: #fff;
|
||||
$dark: #3c3b3b;
|
||||
// custom
|
||||
$color-link: #66bfff;
|
||||
$color-spacer-light: #a3a3a31f;
|
||||
$color-spacer: #7979794d;
|
||||
$border-thin-light: 1px solid $color-spacer-light;
|
||||
$primary-light: lighten($primary, 35%);
|
||||
$dark-shadow-color: black;
|
||||
$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
|
||||
$spacing-md: 16px;
|
||||
|
||||
.bg-success {
|
||||
background-color: $positive;
|
||||
}
|
||||
|
||||
.bg-notice {
|
||||
background-color: $info;
|
||||
}
|
||||
|
@ -40,12 +46,3 @@ $alert: $negative;
|
|||
.bg-alert {
|
||||
background-color: $negative;
|
||||
}
|
||||
|
||||
$color-spacer-light: rgba(255, 255, 255, 0.12);
|
||||
$color-spacer: rgba(255, 255, 255, 0.3);
|
||||
$border-thin-light: 1px solid $color-spacer-light;
|
||||
|
||||
$dark-shadow-color: #000;
|
||||
$dark: #292929;
|
||||
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
|
||||
$spacing-md: 16px;
|
||||
|
|
|
@ -0,0 +1,93 @@
|
|||
/**
|
||||
* Checks if a given date is valid.
|
||||
*
|
||||
* @param {number|string|Date} date - The date to be checked.
|
||||
* @returns {boolean} True if the date is valid, false otherwise.
|
||||
*
|
||||
* @example
|
||||
* // returns true
|
||||
* isValidDate(new Date());
|
||||
*
|
||||
* @example
|
||||
* // returns false
|
||||
* isValidDate('invalid date');
|
||||
*/
|
||||
export function isValidDate(date) {
|
||||
return date && !isNaN(new Date(date).getTime());
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a given date to a specific format.
|
||||
*
|
||||
* @param {number|string|Date} date - The date to be formatted.
|
||||
* @returns {string} The formatted date as a string in 'dd/mm/yyyy' format. If the provided date is not valid, an empty string is returned.
|
||||
*
|
||||
* @example
|
||||
* // returns "02/12/2022"
|
||||
* toDateFormat(new Date(2022, 11, 2));
|
||||
*/
|
||||
export function toDateFormat(date) {
|
||||
if (!isValidDate(date)) {
|
||||
return '';
|
||||
}
|
||||
return new Date(date).toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a given date to a specific time format.
|
||||
*
|
||||
* @param {number|string|Date} date - The date to be formatted.
|
||||
* @param {boolean} [showSeconds=false] - Whether to include seconds in the output format.
|
||||
* @returns {string} The formatted time as a string in 'hh:mm:ss' format. If the provided date is not valid, an empty string is returned. If showSeconds is false, seconds are not included in the output format.
|
||||
*
|
||||
* @example
|
||||
* // returns "00:00"
|
||||
* toTimeFormat(new Date(2022, 11, 2));
|
||||
*
|
||||
* @example
|
||||
* // returns "00:00:00"
|
||||
* toTimeFormat(new Date(2022, 11, 2), true);
|
||||
*/
|
||||
export function toTimeFormat(date, showSeconds = false) {
|
||||
if (!isValidDate(date)) {
|
||||
return '';
|
||||
}
|
||||
return new Date(date).toLocaleDateString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: showSeconds ? '2-digit' : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a given date to a specific date and time format.
|
||||
*
|
||||
* @param {number|string|Date} date - The date to be formatted.
|
||||
* @param {boolean} [showSeconds=false] - Whether to include seconds in the output format.
|
||||
* @returns {string} The formatted date as a string in 'dd/mm/yyyy, hh:mm:ss' format. If the provided date is not valid, an empty string is returned. If showSeconds is false, seconds are not included in the output format.
|
||||
*
|
||||
* @example
|
||||
* // returns "02/12/2022, 00:00"
|
||||
* toDateTimeFormat(new Date(2022, 11, 2));
|
||||
*
|
||||
* @example
|
||||
* // returns "02/12/2022, 00:00:00"
|
||||
* toDateTimeFormat(new Date(2022, 11, 2), true);
|
||||
*/
|
||||
export function toDateTimeFormat(date, showSeconds = false) {
|
||||
if (!isValidDate(date)) {
|
||||
return '';
|
||||
}
|
||||
return new Date(date).toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: showSeconds ? '2-digit' : undefined,
|
||||
});
|
||||
}
|
|
@ -31,6 +31,7 @@ export default {
|
|||
close: 'Close',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
assign: 'Assign',
|
||||
back: 'Back',
|
||||
yes: 'Yes',
|
||||
no: 'No',
|
||||
|
@ -73,6 +74,7 @@ export default {
|
|||
company: 'Company',
|
||||
fieldRequired: 'Field required',
|
||||
allowedFilesText: 'Allowed file types: { allowedContentTypes }',
|
||||
smsSent: 'SMS sent',
|
||||
confirmDeletion: 'Confirm deletion',
|
||||
confirmDeletionMessage: 'Are you sure you want to delete this?',
|
||||
description: 'Description',
|
||||
|
@ -82,6 +84,14 @@ export default {
|
|||
file: 'File',
|
||||
selectFile: 'Select a file',
|
||||
copyClipboard: 'Copy on clipboard',
|
||||
salesPerson: 'SalesPerson',
|
||||
code: 'Code',
|
||||
pageTitles: {
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic data',
|
||||
log: 'Logs',
|
||||
parkingList: 'Parkings list',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Access denied',
|
||||
|
@ -172,6 +182,7 @@ export default {
|
|||
hasDebt: 'Customer has debt',
|
||||
notChecked: 'Customer not checked',
|
||||
noWebAccess: 'Web access is disabled',
|
||||
businessTypeFk: 'Business type',
|
||||
},
|
||||
summary: {
|
||||
basicData: 'Basic data',
|
||||
|
@ -437,6 +448,7 @@ export default {
|
|||
shipped: 'Shipped',
|
||||
warehouse: 'Warehouse',
|
||||
customerCard: 'Customer card',
|
||||
alias: 'Alias',
|
||||
},
|
||||
boxing: {
|
||||
expedition: 'Expedition',
|
||||
|
@ -494,11 +506,9 @@ export default {
|
|||
claims: 'Claims',
|
||||
list: 'List',
|
||||
createClaim: 'Create claim',
|
||||
rmaList: 'RMA',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
lines: 'Lines',
|
||||
rma: 'RMA',
|
||||
photos: 'Photos',
|
||||
development: 'Development',
|
||||
log: 'Audit logs',
|
||||
|
@ -515,10 +525,6 @@ export default {
|
|||
code: 'Code',
|
||||
records: 'records',
|
||||
},
|
||||
rma: {
|
||||
user: 'User',
|
||||
created: 'Created',
|
||||
},
|
||||
card: {
|
||||
claimId: 'Claim ID',
|
||||
assignedTo: 'Assigned',
|
||||
|
@ -527,6 +533,8 @@ export default {
|
|||
ticketId: 'Ticket ID',
|
||||
customerSummary: 'Customer summary',
|
||||
claimedTicket: 'Claimed ticket',
|
||||
saleTracking: 'Sale tracking',
|
||||
ticketTracking: 'Ticket tracking',
|
||||
commercial: 'Commercial',
|
||||
province: 'Province',
|
||||
zone: 'Zone',
|
||||
|
@ -557,7 +565,6 @@ export default {
|
|||
responsible: 'Responsible',
|
||||
worker: 'Worker',
|
||||
redelivery: 'Redelivery',
|
||||
returnOfMaterial: 'RMA',
|
||||
},
|
||||
basicData: {
|
||||
customer: 'Customer',
|
||||
|
@ -565,7 +572,6 @@ export default {
|
|||
created: 'Created',
|
||||
state: 'State',
|
||||
picked: 'Picked',
|
||||
returnOfMaterial: 'Return of material authorization (RMA)',
|
||||
},
|
||||
photo: {
|
||||
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}',
|
||||
|
@ -593,6 +599,7 @@ export default {
|
|||
company: 'Company',
|
||||
dued: 'Due date',
|
||||
shortDued: 'Due date',
|
||||
amount: 'Amount',
|
||||
},
|
||||
card: {
|
||||
issued: 'Issued',
|
||||
|
@ -626,7 +633,7 @@ export default {
|
|||
fillDates: 'Invoice date and the max date should be filled',
|
||||
invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
|
||||
invoiceWithFutureDate: 'Exists an invoice with a future date',
|
||||
noTicketsToInvoice: 'There are not clients to invoice',
|
||||
noTicketsToInvoice: 'There are not tickets to invoice',
|
||||
criticalInvoiceError: 'Critical invoicing error, process stopped',
|
||||
},
|
||||
table: {
|
||||
|
@ -686,6 +693,19 @@ export default {
|
|||
recyclable: 'Recyclable',
|
||||
},
|
||||
},
|
||||
parking: {
|
||||
pickingOrder: 'Picking order',
|
||||
sector: 'Sector',
|
||||
row: 'Row',
|
||||
column: 'Column',
|
||||
pageTitles: {
|
||||
parking: 'Parking',
|
||||
},
|
||||
searchBar: {
|
||||
info: 'You can search by parking code',
|
||||
label: 'Search parking...',
|
||||
},
|
||||
},
|
||||
invoiceIn: {
|
||||
pageTitles: {
|
||||
invoiceIns: 'Invoices In',
|
||||
|
@ -836,6 +856,8 @@ export default {
|
|||
notifications: 'Notifications',
|
||||
workerCreate: 'New worker',
|
||||
department: 'Department',
|
||||
pda: 'PDA',
|
||||
log: 'Log',
|
||||
},
|
||||
list: {
|
||||
name: 'Name',
|
||||
|
@ -877,6 +899,13 @@ export default {
|
|||
subscribed: 'Subscribed to the notification',
|
||||
unsubscribed: 'Unsubscribed from the notification',
|
||||
},
|
||||
pda: {
|
||||
newPDA: 'New PDA',
|
||||
currentPDA: 'Current PDA',
|
||||
model: 'Model',
|
||||
serialNumber: 'Serial number',
|
||||
removePDA: 'Deallocate PDA',
|
||||
},
|
||||
create: {
|
||||
name: 'Name',
|
||||
lastName: 'Last name',
|
||||
|
@ -942,6 +971,22 @@ export default {
|
|||
uncompleteTrays: 'There are incomplete trays',
|
||||
},
|
||||
},
|
||||
'route/roadmap': {
|
||||
pageTitles: {
|
||||
roadmap: 'Roadmap',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
stops: 'Stops',
|
||||
},
|
||||
},
|
||||
roadmap: {
|
||||
pageTitles: {
|
||||
roadmap: 'Roadmap',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
stops: 'Stops',
|
||||
},
|
||||
},
|
||||
route: {
|
||||
pageTitles: {
|
||||
routes: 'Routes',
|
||||
|
@ -950,6 +995,11 @@ export default {
|
|||
create: 'Create',
|
||||
basicData: 'Basic Data',
|
||||
summary: 'Summary',
|
||||
RouteRoadmap: 'Roadmaps',
|
||||
RouteRoadmapCreate: 'Create roadmap',
|
||||
tickets: 'Tickets',
|
||||
log: 'Log',
|
||||
autonomous: 'Autonomous',
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
|
@ -1174,6 +1224,11 @@ export default {
|
|||
copyToken: 'Token copied to clipboard',
|
||||
settings: 'Settings',
|
||||
logOut: 'Log Out',
|
||||
localWarehouse: 'Local warehouse',
|
||||
localBank: 'Local bank',
|
||||
localCompany: 'Local company',
|
||||
userWarehouse: 'User warehouse',
|
||||
userCompany: 'User company',
|
||||
},
|
||||
smartCard: {
|
||||
downloadFile: 'Download file',
|
||||
|
|
|
@ -31,6 +31,7 @@ export default {
|
|||
close: 'Cerrar',
|
||||
cancel: 'Cancelar',
|
||||
confirm: 'Confirmar',
|
||||
assign: 'Asignar',
|
||||
back: 'Volver',
|
||||
yes: 'Si',
|
||||
no: 'No',
|
||||
|
@ -73,6 +74,7 @@ export default {
|
|||
company: 'Empresa',
|
||||
fieldRequired: 'Campo requerido',
|
||||
allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
|
||||
smsSent: 'SMS enviado',
|
||||
confirmDeletion: 'Confirmar eliminación',
|
||||
confirmDeletionMessage: '¿Seguro que quieres eliminar?',
|
||||
description: 'Descripción',
|
||||
|
@ -82,6 +84,14 @@ export default {
|
|||
file: 'Fichero',
|
||||
selectFile: 'Seleccione un fichero',
|
||||
copyClipboard: 'Copiar en portapapeles',
|
||||
salesPerson: 'Comercial',
|
||||
code: 'Código',
|
||||
pageTitles: {
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
log: 'Historial',
|
||||
parkingList: 'Listado de parkings',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Acceso denegado',
|
||||
|
@ -171,6 +181,7 @@ export default {
|
|||
hasDebt: 'El cliente tiene riesgo',
|
||||
notChecked: 'El cliente no está comprobado',
|
||||
noWebAccess: 'El acceso web está desactivado',
|
||||
businessTypeFk: 'Tipo de negocio',
|
||||
},
|
||||
summary: {
|
||||
basicData: 'Datos básicos',
|
||||
|
@ -307,8 +318,8 @@ export default {
|
|||
reference: 'Referencia',
|
||||
invoiceNumber: 'Núm. factura',
|
||||
ordered: 'Pedida',
|
||||
confirmed: 'Confirmado',
|
||||
booked: 'Asentado',
|
||||
confirmed: 'Confirmada',
|
||||
booked: 'Contabilizada',
|
||||
raid: 'Redada',
|
||||
excludedFromAvailable: 'Inventario',
|
||||
travelReference: 'Referencia',
|
||||
|
@ -436,6 +447,7 @@ export default {
|
|||
shipped: 'Enviado',
|
||||
warehouse: 'Almacén',
|
||||
customerCard: 'Ficha del cliente',
|
||||
alias: 'Alias',
|
||||
},
|
||||
boxing: {
|
||||
expedition: 'Expedición',
|
||||
|
@ -493,14 +505,12 @@ export default {
|
|||
claims: 'Reclamaciones',
|
||||
list: 'Listado',
|
||||
createClaim: 'Crear reclamación',
|
||||
rmaList: 'RMA',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
lines: 'Líneas',
|
||||
rma: 'RMA',
|
||||
development: 'Trazabilidad',
|
||||
photos: 'Fotos',
|
||||
log: 'Registros de auditoría',
|
||||
log: 'Historial',
|
||||
notes: 'Notas',
|
||||
action: 'Acción',
|
||||
},
|
||||
|
@ -514,10 +524,6 @@ export default {
|
|||
code: 'Código',
|
||||
records: 'registros',
|
||||
},
|
||||
rma: {
|
||||
user: 'Usuario',
|
||||
created: 'Creado',
|
||||
},
|
||||
card: {
|
||||
claimId: 'ID reclamación',
|
||||
assignedTo: 'Asignada a',
|
||||
|
@ -526,6 +532,8 @@ export default {
|
|||
ticketId: 'ID ticket',
|
||||
customerSummary: 'Resumen del cliente',
|
||||
claimedTicket: 'Ticket reclamado',
|
||||
saleTracking: 'Líneas preparadas',
|
||||
ticketTracking: 'Estados del ticket',
|
||||
commercial: 'Comercial',
|
||||
province: 'Provincia',
|
||||
zone: 'Zona',
|
||||
|
@ -556,7 +564,6 @@ export default {
|
|||
responsible: 'Responsable',
|
||||
worker: 'Trabajador',
|
||||
redelivery: 'Devolución',
|
||||
returnOfMaterial: 'RMA',
|
||||
},
|
||||
basicData: {
|
||||
customer: 'Cliente',
|
||||
|
@ -564,7 +571,6 @@ export default {
|
|||
created: 'Creada',
|
||||
state: 'Estado',
|
||||
picked: 'Recogida',
|
||||
returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
|
||||
},
|
||||
photo: {
|
||||
fileDescription:
|
||||
|
@ -593,6 +599,7 @@ export default {
|
|||
company: 'Empresa',
|
||||
dued: 'Fecha vencimineto',
|
||||
shortDued: 'F. vencimiento',
|
||||
amount: 'Importe',
|
||||
},
|
||||
card: {
|
||||
issued: 'Fecha emisión',
|
||||
|
@ -628,7 +635,7 @@ export default {
|
|||
invoiceDateLessThanMaxDate:
|
||||
'La fecha de la factura no puede ser menor que la fecha máxima',
|
||||
invoiceWithFutureDate: 'Existe una factura con una fecha futura',
|
||||
noTicketsToInvoice: 'No hay clientes para facturar',
|
||||
noTicketsToInvoice: 'No existen tickets para facturar',
|
||||
criticalInvoiceError: 'Error crítico en la facturación, proceso detenido',
|
||||
},
|
||||
table: {
|
||||
|
@ -723,7 +730,7 @@ export default {
|
|||
create: 'Crear',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
log: 'Registros de auditoría',
|
||||
log: 'Historial',
|
||||
},
|
||||
list: {
|
||||
parking: 'Parking',
|
||||
|
@ -744,6 +751,18 @@ export default {
|
|||
recyclable: 'Reciclable',
|
||||
},
|
||||
},
|
||||
parking: {
|
||||
pickingOrder: 'Orden de recogida',
|
||||
row: 'Fila',
|
||||
column: 'Columna',
|
||||
pageTitles: {
|
||||
parking: 'Parking',
|
||||
},
|
||||
searchBar: {
|
||||
info: 'Puedes buscar por código de parking',
|
||||
label: 'Buscar parking...',
|
||||
},
|
||||
},
|
||||
invoiceIn: {
|
||||
pageTitles: {
|
||||
invoiceIns: 'Fact. recibidas',
|
||||
|
@ -755,7 +774,7 @@ export default {
|
|||
dueDay: 'Vencimiento',
|
||||
intrastat: 'Intrastat',
|
||||
corrective: 'Rectificativa',
|
||||
log: 'Registros de auditoría',
|
||||
log: 'Historial',
|
||||
},
|
||||
list: {
|
||||
ref: 'Referencia',
|
||||
|
@ -836,6 +855,8 @@ export default {
|
|||
notifications: 'Notificaciones',
|
||||
workerCreate: 'Nuevo trabajador',
|
||||
department: 'Departamentos',
|
||||
pda: 'PDA',
|
||||
log: 'Historial',
|
||||
},
|
||||
list: {
|
||||
name: 'Nombre',
|
||||
|
@ -877,6 +898,13 @@ export default {
|
|||
subscribed: 'Se ha suscrito a la notificación',
|
||||
unsubscribed: 'Se ha dado de baja de la notificación',
|
||||
},
|
||||
pda: {
|
||||
newPDA: 'Nueva PDA',
|
||||
currentPDA: 'PDA Actual',
|
||||
model: 'Modelo',
|
||||
serialNumber: 'Número de serie',
|
||||
removePDA: 'Desasignar PDA',
|
||||
},
|
||||
create: {
|
||||
name: 'Nombre',
|
||||
lastName: 'Apellido',
|
||||
|
@ -942,6 +970,22 @@ export default {
|
|||
uncompleteTrays: 'Hay bandejas sin completar',
|
||||
},
|
||||
},
|
||||
'route/roadmap': {
|
||||
pageTitles: {
|
||||
roadmap: 'Troncales',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
stops: 'Paradas',
|
||||
},
|
||||
},
|
||||
roadmap: {
|
||||
pageTitles: {
|
||||
roadmap: 'Troncales',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
stops: 'Paradas',
|
||||
},
|
||||
},
|
||||
route: {
|
||||
pageTitles: {
|
||||
routes: 'Rutas',
|
||||
|
@ -949,7 +993,12 @@ export default {
|
|||
RouteList: 'Listado',
|
||||
create: 'Crear',
|
||||
basicData: 'Datos básicos',
|
||||
summary: 'Summary',
|
||||
summary: 'Resumen',
|
||||
RouteRoadmap: 'Troncales',
|
||||
RouteRoadmapCreate: 'Crear troncal',
|
||||
tickets: 'Tickets',
|
||||
log: 'Historial',
|
||||
autonomous: 'Autónomos',
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
|
@ -1174,6 +1223,11 @@ export default {
|
|||
copyToken: 'Token copiado al portapapeles',
|
||||
settings: 'Configuración',
|
||||
logOut: 'Cerrar sesión',
|
||||
localWarehouse: 'Almacén local',
|
||||
localBank: 'Banco local',
|
||||
localCompany: 'Empresa local',
|
||||
userWarehouse: 'Almacén del usuario',
|
||||
userCompany: 'Empresa del usuario',
|
||||
},
|
||||
smartCard: {
|
||||
downloadFile: 'Descargar archivo',
|
||||
|
|
|
@ -11,5 +11,3 @@ const quasar = useQuasar();
|
|||
<QFooter v-if="quasar.platform.is.mobile"></QFooter>
|
||||
</QLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
@ -40,7 +40,7 @@ const langs = ['en', 'es'];
|
|||
|
||||
<template>
|
||||
<QLayout view="hHh LpR fFf">
|
||||
<QHeader reveal class="bg-dark">
|
||||
<QHeader reveal class="bg-vn-section-color">
|
||||
<QToolbar class="justify-end">
|
||||
<QBtn
|
||||
id="switchLanguage"
|
||||
|
|
|
@ -291,8 +291,6 @@ async function importToNewRefundTicket() {
|
|||
selection="multiple"
|
||||
v-model:selected="selectedRows"
|
||||
:grid="$q.screen.lt.md"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:hide-bottom="true"
|
||||
>
|
||||
<template #body-cell-ticket="{ value }">
|
||||
<QTd align="center">
|
||||
|
|
|
@ -13,8 +13,8 @@ import { useSession } from 'src/composables/useSession';
|
|||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const claimFilter = {
|
||||
fields: [
|
||||
|
@ -24,7 +24,6 @@ const claimFilter = {
|
|||
'workerFk',
|
||||
'claimStateFk',
|
||||
'packages',
|
||||
'rma',
|
||||
'hasToPickUp',
|
||||
],
|
||||
include: [
|
||||
|
@ -169,13 +168,6 @@ const statesFilter = {
|
|||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.rma"
|
||||
:label="t('claim.basicData.returnOfMaterial')"
|
||||
:rules="validate('claim.rma')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import ClaimDescriptor from './ClaimDescriptor.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import useCardSize from 'src/composables/useCardSize';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
|
@ -28,7 +29,9 @@ const { t } = useI18n();
|
|||
<QPageContainer>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
<div :class="useCardSize()">
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
|
@ -105,21 +105,24 @@ onMounted(async () => {
|
|||
<ClaimDescriptorMenu :claim="entity" />
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
|
||||
<VnLv v-if="entity.claimState" :label="t('claim.card.state')">
|
||||
<template #value>
|
||||
<QBadge :color="stateColor(entity.claimState.code)" dense>
|
||||
<QBadge
|
||||
:color="stateColor(entity.claimState.code)"
|
||||
text-color="black"
|
||||
dense
|
||||
>
|
||||
{{ entity.claimState.description }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.ticketId')">
|
||||
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
|
||||
<VnLv :label="t('claim.card.commercial')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
|
||||
<TicketDescriptorProxy :id="entity.ticketFk" />
|
||||
</span>
|
||||
<VnUserLink
|
||||
:name="entity.client?.salesPersonUser?.name"
|
||||
:worker-id="entity.client?.salesPersonFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
|
@ -134,19 +137,20 @@ onMounted(async () => {
|
|||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.commercial')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="entity.client?.salesPersonUser?.name"
|
||||
:worker-id="entity.client?.salesPersonFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
|
||||
<VnLv
|
||||
:label="t('claim.card.province')"
|
||||
:value="entity.ticket?.address?.province?.name"
|
||||
/>
|
||||
<VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
|
||||
<VnLv :label="t('claim.card.ticketId')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
|
||||
<TicketDescriptorProxy :id="entity.ticketFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('claimRate')"
|
||||
:value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
|
||||
|
@ -176,6 +180,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
@ -183,6 +188,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</template>
|
||||
|
|
|
@ -150,10 +150,8 @@ const columns = computed(() => [
|
|||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
row-key="$index"
|
||||
selection="multiple"
|
||||
hide-pagination
|
||||
v-model:selected="selected"
|
||||
:grid="$q.screen.lt.md"
|
||||
table-header-class="text-left"
|
||||
|
|
|
@ -161,7 +161,7 @@ function showImportDialog() {
|
|||
<div class="row q-gutter-md">
|
||||
<div>
|
||||
{{ t('Amount') }}
|
||||
<QChip :dense="$q.screen.lt.sm">
|
||||
<QChip :dense="$q.screen.lt.sm" text-color="white">
|
||||
{{ toCurrency(amount) }}
|
||||
</QChip>
|
||||
</div>
|
||||
|
@ -201,11 +201,9 @@ function showImportDialog() {
|
|||
:columns="columns"
|
||||
:rows="rows"
|
||||
:dense="$q.screen.lt.md"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
hide-pagination
|
||||
:grid="$q.screen.lt.md"
|
||||
>
|
||||
<template #body-cell-claimed="{ row, value }">
|
||||
|
|
|
@ -121,7 +121,6 @@ function cancel() {
|
|||
class="my-sticky-header-table"
|
||||
:columns="columns"
|
||||
:rows="claimableSales"
|
||||
:pagination="{ rowsPerPage: 10 }"
|
||||
row-key="saleFk"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import VnNotes from 'src/components/ui/VnNotes.vue';
|
||||
|
@ -6,14 +7,15 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
|
|||
const route = useRoute();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const id = route.params.id;
|
||||
|
||||
const $props = defineProps({
|
||||
id: { type: Number, default: null },
|
||||
addNote: { type: Boolean, default: true },
|
||||
});
|
||||
const claimId = computed(() => $props.id || route.params.id);
|
||||
|
||||
const claimFilter = {
|
||||
where: { claimFk: id },
|
||||
where: { claimFk: claimId.value },
|
||||
fields: ['created', 'workerFk', 'text'],
|
||||
include: {
|
||||
relation: 'worker',
|
||||
|
@ -30,19 +32,16 @@ const claimFilter = {
|
|||
};
|
||||
|
||||
const body = {
|
||||
claimFk: id,
|
||||
claimFk: claimId.value,
|
||||
workerFk: user.value.id,
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center">
|
||||
<VnNotes
|
||||
style="overflow-y: scroll"
|
||||
:add-note="$props.addNote"
|
||||
:id="id"
|
||||
url="claimObservations"
|
||||
:filter="claimFilter"
|
||||
:body="body"
|
||||
/>
|
||||
</div>
|
||||
<VnNotes
|
||||
style="overflow-y: auto"
|
||||
:add-note="$props.addNote"
|
||||
url="claimObservations"
|
||||
:filter="claimFilter"
|
||||
:body="body"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -11,8 +11,8 @@ import FetchData from 'components/FetchData.vue';
|
|||
const router = useRouter();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const claimId = computed(() => router.currentRoute.value.params.id);
|
||||
|
||||
|
|
|
@ -1,145 +0,0 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { watch, ref, computed, onUnmounted, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
import CrudModel from 'components/CrudModel.vue';
|
||||
import { useState } from 'src/composables/useState';
|
||||
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const state = useState();
|
||||
const { t } = useI18n();
|
||||
const selected = ref([]);
|
||||
const claimRmaRef = ref();
|
||||
const claim = computed(() => state.get('ClaimDescriptor'));
|
||||
|
||||
const claimRmaFilter = {
|
||||
include: {
|
||||
relation: 'worker',
|
||||
scope: {
|
||||
include: {
|
||||
relation: 'user',
|
||||
},
|
||||
},
|
||||
},
|
||||
order: 'created DESC',
|
||||
where: {
|
||||
code: claim.value?.rma,
|
||||
},
|
||||
};
|
||||
|
||||
async function addRow() {
|
||||
if (!claim.value.rma) {
|
||||
return quasar.notify({
|
||||
message: `This claim is not associated to any RMA`,
|
||||
type: 'negative',
|
||||
});
|
||||
}
|
||||
const formData = {
|
||||
code: claim.value.rma,
|
||||
};
|
||||
|
||||
await axios.post(`ClaimRmas`, formData);
|
||||
await claimRmaRef.value.reload();
|
||||
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('globals.rowAdded'),
|
||||
icon: 'check',
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (claim.value) claimRmaRef.value.reload();
|
||||
});
|
||||
watch(
|
||||
claim,
|
||||
() => {
|
||||
claimRmaRef.value.reload();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center">
|
||||
<div class="list">
|
||||
<CrudModel
|
||||
data-key="ClaimRma"
|
||||
url="ClaimRmas"
|
||||
model="ClaimRma"
|
||||
:filter="claimRmaFilter"
|
||||
v-model:selected="selected"
|
||||
ref="claimRmaRef"
|
||||
:default-save="false"
|
||||
:default-reset="false"
|
||||
:default-remove="false"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard>
|
||||
<template v-for="(row, index) of rows" :key="row.id">
|
||||
<QItem class="q-pa-none items-start">
|
||||
<QItemSection class="q-pa-md">
|
||||
<QList>
|
||||
<QItem class="q-pa-none">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('claim.rma.user') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
{{ row?.worker?.user?.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-pa-none">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('claim.rma.created') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
{{
|
||||
toDate(row.created, {
|
||||
timeStyle: 'medium',
|
||||
})
|
||||
}}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QItemSection>
|
||||
<QCardActions vertical class="justify-between">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
color="orange"
|
||||
icon="vn:bin"
|
||||
@click="claimRmaRef.remove([row])"
|
||||
>
|
||||
<QTooltip>{{ t('globals.remove') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</QItem>
|
||||
<QSeparator v-if="index !== rows.length - 1" />
|
||||
</template>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
</div>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||
<QBtn fab color="primary" icon="add" @click="addRow()" />
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
|
||||
</i18n>
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed, watch } from 'vue';
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
|
@ -11,11 +11,12 @@ import VnLv from 'src/components/ui/VnLv.vue';
|
|||
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
|
||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
@ -70,7 +71,7 @@ const detailsColumns = ref([
|
|||
},
|
||||
{
|
||||
name: 'description',
|
||||
label: 'claim.summary.description',
|
||||
label: 'globals.description',
|
||||
field: (row) => row.sale.concept,
|
||||
},
|
||||
{
|
||||
|
@ -172,6 +173,7 @@ function openDialog(dmsId) {
|
|||
<CardSummary
|
||||
ref="summary"
|
||||
:url="`Claims/${entityId}/getSummary`"
|
||||
:entity-id="entityId"
|
||||
@on-fetch="getClaimDms"
|
||||
>
|
||||
<template #header="{ entity: { claim } }">
|
||||
|
@ -179,10 +181,10 @@ function openDialog(dmsId) {
|
|||
</template>
|
||||
<template #body="{ entity: { claim, salesClaimed, developments } }">
|
||||
<QCard class="vn-one">
|
||||
<a class="header" :href="`#/claim/${entityId}/basic-data`">
|
||||
{{ t('claim.pageTitles.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/claim/${entityId}/basic-data`"
|
||||
:text="t('claim.pageTitles.basicData')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('claim.summary.created')"
|
||||
:value="toDate(claim.created)"
|
||||
|
@ -194,19 +196,19 @@ function openDialog(dmsId) {
|
|||
</QChip>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.summary.assignedTo')">
|
||||
<VnLv :label="t('globals.salesPerson')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="claim.worker?.user?.nickname"
|
||||
:worker-id="claim.workerFk"
|
||||
:name="claim.client?.salesPersonUser?.name"
|
||||
:worker-id="claim.client?.salesPersonFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.summary.attendedBy')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="claim.client?.salesPersonUser?.name"
|
||||
:worker-id="claim.client?.salesPersonFk"
|
||||
:name="claim.worker?.user?.nickname"
|
||||
:worker-id="claim.workerFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
|
@ -218,26 +220,37 @@ function openDialog(dmsId) {
|
|||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
|
||||
<QCheckbox
|
||||
:align-items="right"
|
||||
:label="t('claim.basicData.picked')"
|
||||
v-model="claim.hasToPickUp"
|
||||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-three claimVnNotes full-height">
|
||||
<a class="header" :href="`#/claim/${entityId}/notes`">
|
||||
{{ t('claim.summary.notes') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
|
||||
<QCard class="vn-three">
|
||||
<VnTitle
|
||||
:url="`#/claim/${entityId}/notes`"
|
||||
:text="t('claim.summary.notes')"
|
||||
/>
|
||||
<ClaimNotes
|
||||
:id="entityId"
|
||||
:add-note="false"
|
||||
style="max-height: 300px"
|
||||
order="created ASC"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-two" v-if="salesClaimed.length > 0">
|
||||
<a class="header" :href="`#/claim/${entityId}/lines`">
|
||||
{{ t('claim.summary.details') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QTable :columns="detailsColumns" :rows="salesClaimed" flat>
|
||||
<VnTitle
|
||||
:url="`#/claim/${entityId}/lines`"
|
||||
:text="t('claim.summary.details')"
|
||||
/>
|
||||
<QTable
|
||||
:columns="detailsColumns"
|
||||
:rows="salesClaimed"
|
||||
flat
|
||||
dense
|
||||
:rows-per-page-options="[0]"
|
||||
hide-bottom
|
||||
>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
||||
|
@ -259,7 +272,7 @@ function openDialog(dmsId) {
|
|||
>
|
||||
<ItemDescriptorProxy
|
||||
v-if="col.name == 'description'"
|
||||
:id="props.row.id"
|
||||
:id="props.row.sale.itemFk"
|
||||
:sale-fk="props.row.saleFk"
|
||||
></ItemDescriptorProxy>
|
||||
</QTh>
|
||||
|
@ -268,11 +281,18 @@ function openDialog(dmsId) {
|
|||
</QTable>
|
||||
</QCard>
|
||||
<QCard class="vn-two" v-if="developments.length > 0">
|
||||
<a class="header" :href="claimUrl + 'development'">
|
||||
{{ t('claim.summary.development') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QTable :columns="developmentColumns" :rows="developments" flat>
|
||||
<VnTitle
|
||||
:url="claimUrl + 'development'"
|
||||
:text="t('claim.summary.development')"
|
||||
/>
|
||||
<QTable
|
||||
:columns="developmentColumns"
|
||||
:rows="developments"
|
||||
flat
|
||||
dense
|
||||
:rows-per-page-options="[0]"
|
||||
hide-bottom
|
||||
>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
||||
|
@ -283,10 +303,10 @@ function openDialog(dmsId) {
|
|||
</QTable>
|
||||
</QCard>
|
||||
<QCard class="vn-max" v-if="claimDms.length > 0">
|
||||
<a class="header" :href="`#/claim/${entityId}/photos`">
|
||||
{{ t('claim.summary.photos') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/claim/${entityId}/photos`"
|
||||
:text="t('claim.summary.photos')"
|
||||
/>
|
||||
<div class="container">
|
||||
<div
|
||||
class="multimedia-container"
|
||||
|
@ -302,7 +322,7 @@ function openDialog(dmsId) {
|
|||
v-if="media.isVideo"
|
||||
@click.stop="openDialog(media.dmsFk)"
|
||||
>
|
||||
<QTooltip>Video</QTooltip>
|
||||
<QTooltip>Video</QTooltip>header
|
||||
</QIcon>
|
||||
<QCard class="multimedia relative-position">
|
||||
<QImg
|
||||
|
@ -326,17 +346,14 @@ function openDialog(dmsId) {
|
|||
</QCard>
|
||||
|
||||
<QCard class="vn-max">
|
||||
<a class="header" :href="claimUrl + 'action'">
|
||||
{{ t('claim.summary.actions') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
|
||||
<div id="slider-container" class="q-px-xl q-py-md">
|
||||
<QSlider
|
||||
v-model="claim.responsibility"
|
||||
label
|
||||
:label-value="t('claim.summary.responsibility')"
|
||||
label-always
|
||||
color="primary"
|
||||
color="var()"
|
||||
markers
|
||||
:marker-labels="[
|
||||
{ value: 1, label: t('claim.summary.company') },
|
||||
|
@ -390,13 +407,7 @@ function openDialog(dmsId) {
|
|||
</template>
|
||||
</CardSummary>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.claimVnNotes {
|
||||
.q-card {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-dialog__inner--minimized > div {
|
||||
max-width: 80%;
|
||||
|
@ -406,7 +417,6 @@ function openDialog(dmsId) {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
flex-basis: 30%;
|
||||
}
|
||||
.multimedia-container {
|
||||
flex: 1 0 21%;
|
||||
|
|
|
@ -108,23 +108,20 @@ function navigate(event, id) {
|
|||
/>
|
||||
<VnLv :label="t('claim.list.state')">
|
||||
<template #value>
|
||||
<QBadge :color="stateColor(row.stateCode)" dense>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="stateColor(row.stateCode)"
|
||||
dense
|
||||
>
|
||||
{{ row.stateDescription }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id)"
|
||||
class="bg-vn-dark"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.description')"
|
||||
@click.stop
|
||||
class="bg-vn-dark"
|
||||
outline
|
||||
style="margin-top: 15px"
|
||||
>
|
||||
|
|
|
@ -1,171 +0,0 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import axios from 'axios';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
||||
const arrayData = useArrayData('ClaimRmaList');
|
||||
const isLoading = ref(false);
|
||||
const input = ref();
|
||||
|
||||
const newRma = ref({
|
||||
code: '',
|
||||
crated: Date.vnNew(),
|
||||
});
|
||||
|
||||
function onInputUpdate(value) {
|
||||
newRma.value.code = value.toUpperCase();
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
const formData = newRma.value;
|
||||
if (formData.code === '') return;
|
||||
|
||||
isLoading.value = true;
|
||||
await axios.post('ClaimRmas', formData);
|
||||
await arrayData.refresh();
|
||||
isLoading.value = false;
|
||||
input.value.$el.focus();
|
||||
|
||||
newRma.value = {
|
||||
code: '',
|
||||
created: Date.vnNew(),
|
||||
};
|
||||
}
|
||||
|
||||
function confirm(id) {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
data: { id },
|
||||
promise: remove,
|
||||
},
|
||||
})
|
||||
.onOk(async () => await arrayData.refresh());
|
||||
}
|
||||
|
||||
async function remove({ id }) {
|
||||
await axios.delete(`ClaimRmas/${id}`);
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('globals.rowRemoved'),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md sticky">
|
||||
<QPageSticky expand position="top" :offset="[16, 16]">
|
||||
<QCard class="card q-pa-md">
|
||||
<QForm @submit="submit">
|
||||
<VnInput
|
||||
ref="input"
|
||||
v-model="newRma.code"
|
||||
:label="t('claim.rmaList.code')"
|
||||
@update:model-value="onInputUpdate"
|
||||
class="q-mb-md"
|
||||
:readonly="isLoading"
|
||||
:loading="isLoading"
|
||||
autofocus
|
||||
/>
|
||||
<div class="text-caption">
|
||||
{{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
|
||||
</div>
|
||||
</QForm>
|
||||
</QCard>
|
||||
</QPageSticky>
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="ClaimRmaList"
|
||||
url="ClaimRmas"
|
||||
order="id DESC"
|
||||
:offset="50"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="card">
|
||||
<template v-if="isLoading">
|
||||
<QItem class="q-pa-none items-start">
|
||||
<QItemSection class="q-pa-md">
|
||||
<QList>
|
||||
<QItem class="q-pa-none">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
<QSkeleton />
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
<QSkeleton type="text" />
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QItemSection>
|
||||
<QCardActions vertical class="justify-between">
|
||||
<QSkeleton
|
||||
type="circle"
|
||||
class="q-mb-md"
|
||||
size="40px"
|
||||
/>
|
||||
</QCardActions>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
</template>
|
||||
<template v-for="row of rows" :key="row.id">
|
||||
<QItem class="q-pa-none items-start">
|
||||
<QItemSection class="q-pa-md">
|
||||
<QList>
|
||||
<QItem class="q-pa-none">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>{{
|
||||
t('claim.rmaList.code')
|
||||
}}</QItemLabel>
|
||||
<QItemLabel>{{ row.code }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QItemSection>
|
||||
<QCardActions vertical class="justify-between">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="vn:bin"
|
||||
@click="confirm(row.id)"
|
||||
>
|
||||
<QTooltip>{{ t('globals.remove') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
</template>
|
||||
</QCard>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sticky {
|
||||
padding-top: 156px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
.q-page-sticky {
|
||||
z-index: 2998;
|
||||
}
|
||||
</style>
|
|
@ -198,7 +198,6 @@ const updateCompanyId = (id) => {
|
|||
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
|
|
|
@ -11,8 +11,8 @@ import VnInput from 'src/components/common/VnInput.vue';
|
|||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const workers = ref([]);
|
||||
const workersCopy = ref([]);
|
||||
|
|
|
@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
|
|||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import useCardSize from 'src/composables/useCardSize';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
|
@ -30,7 +31,9 @@ const { t } = useI18n();
|
|||
<QPageContainer>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
<div :class="useCardSize()">
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
|
@ -150,14 +150,14 @@ const toCustomerConsigneeEdit = (consigneeId) => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.consignees-card {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border: 2px solid var(--vn-accent-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--vn-light-gray);
|
||||
background-color: var(--vn-accent-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -97,13 +97,7 @@ const toCustomerCreditCreate = () => {
|
|||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
>
|
||||
<QTable :columns="columns" :rows="rows" class="full-width q-mt-md" row-key="id">
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<QTr :props="props" class="cursor-pointer">
|
||||
|
|
|
@ -40,6 +40,15 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
|
|||
data-key="customerData"
|
||||
>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />
|
||||
|
||||
<VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
|
||||
<VnLv
|
||||
:label="t('customer.card.securedCredit')"
|
||||
:value="toCurrency(entity.creditInsurance)"
|
||||
/>
|
||||
|
||||
<VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
|
||||
<VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
|
@ -48,13 +57,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
|
|||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
|
||||
<VnLv
|
||||
:label="t('customer.card.securedCredit')"
|
||||
:value="toCurrency(entity.creditInsurance)"
|
||||
:label="t('customer.card.businessTypeFk')"
|
||||
:value="entity.businessTypeFk"
|
||||
/>
|
||||
<VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />
|
||||
<VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
|
||||
</template>
|
||||
<template #icons="{ entity }">
|
||||
<QCardActions>
|
||||
|
|
|
@ -140,7 +140,6 @@ const toCustomerGreugeCreate = () => {
|
|||
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
|
@ -180,13 +179,13 @@ const toCustomerGreugeCreate = () => {
|
|||
|
||||
<style lang="scss">
|
||||
.consignees-card {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border: 2px solid var(--vn-accent-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -85,12 +85,12 @@ const toCustomerNoteCreate = () => {
|
|||
|
||||
<style lang="scss">
|
||||
.custom-border {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border: 2px solid var(--vn-accent-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -97,7 +97,6 @@ const toCustomerRecoverieCreate = () => {
|
|||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
|
@ -137,13 +136,13 @@ const toCustomerRecoverieCreate = () => {
|
|||
|
||||
<style lang="scss">
|
||||
.consignees-card {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border: 2px solid var(--vn-accent-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -7,6 +7,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
|
|||
import { getUrl } from 'src/composables/getUrl';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
|
||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
@ -62,10 +63,10 @@ const creditWarning = computed(() => {
|
|||
<CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
|
||||
<template #body="{ entity }">
|
||||
<QCard class="vn-one">
|
||||
<a class="header" :href="`#/customer/${entityId}/basic-data`">
|
||||
{{ t('customer.summary.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/basic-data`"
|
||||
:text="t('customer.summary.basicData')"
|
||||
/>
|
||||
<VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
|
||||
<VnLv :label="t('customer.summary.name')" :value="entity.name" />
|
||||
<VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
|
||||
|
@ -96,10 +97,10 @@ const creditWarning = computed(() => {
|
|||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<a class="header" :href="`#/customer/${entityId}/fiscal-data`">
|
||||
{{ t('customer.summary.fiscalAddress') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/fiscal-data`"
|
||||
:text="t('customer.summary.fiscalAddress')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('customer.summary.socialName')"
|
||||
:value="entity.socialName"
|
||||
|
@ -121,59 +122,80 @@ const creditWarning = computed(() => {
|
|||
<VnLv :label="t('customer.summary.street')" :value="entity.street" />
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<a class="header link" :href="`#/customer/${entityId}/fiscal-data`" link>
|
||||
{{ t('customer.summary.fiscalData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnLv
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/fiscal-data`"
|
||||
:text="t('customer.summary.fiscalData')"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.isEqualizated')"
|
||||
:value="entity.isEqualizated"
|
||||
v-model="entity.isEqualizated"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.isActive')"
|
||||
v-model="entity.isActive"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.invoiceByAddress')"
|
||||
:value="entity.hasToInvoiceByAddress"
|
||||
v-model="entity.hasToInvoiceByAddress"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.verifiedData')"
|
||||
:value="entity.isTaxDataChecked"
|
||||
v-model="entity.isTaxDataChecked"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.hasToInvoice')"
|
||||
:value="entity.hasToInvoice"
|
||||
v-model="entity.hasToInvoice"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.notifyByEmail')"
|
||||
:value="entity.isToBeMailed"
|
||||
v-model="entity.isToBeMailed"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.vies')"
|
||||
v-model="entity.isVies"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<a class="header link" :href="`#/customer/${entityId}/billing-data`" link>
|
||||
{{ t('customer.summary.billingData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/billing-data`"
|
||||
:text="t('customer.summary.billingData')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('customer.summary.payMethod')"
|
||||
:value="entity.payMethod.name"
|
||||
/>
|
||||
<VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
|
||||
<VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
|
||||
<VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
|
||||
<VnLv
|
||||
:label="t('customer.summary.hasCoreVnl')"
|
||||
:value="entity.hasCoreVnl"
|
||||
<QCheckbox
|
||||
style="padding: 0"
|
||||
:label="t('customer.summary.hasLcr')"
|
||||
v-model="entity.hasLcr"
|
||||
:disable="true"
|
||||
/>
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.hasCoreVnl')"
|
||||
v-model="entity.hasCoreVnl"
|
||||
:disable="true"
|
||||
/>
|
||||
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.hasB2BVnl')"
|
||||
:value="entity.hasSepaVnl"
|
||||
v-model="entity.hasSepaVnl"
|
||||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one" v-if="entity.defaultAddress">
|
||||
<a class="header link" :href="`#/customer/${entityId}/consignees`" link>
|
||||
{{ t('customer.summary.consignee') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/consignees`"
|
||||
:text="t('customer.summary.consignee')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('customer.summary.addressName')"
|
||||
:value="entity.defaultAddress.nickname"
|
||||
|
@ -188,23 +210,22 @@ const creditWarning = computed(() => {
|
|||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one" v-if="entity.account">
|
||||
<a class="header link" :href="`#/customer/${entityId}/web-access`">
|
||||
{{ t('customer.summary.webAccess') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/customer/${entityId}/web-access`"
|
||||
:text="t('customer.summary.webAccess')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('customer.summary.username')"
|
||||
:value="entity.account.name"
|
||||
/>
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('customer.summary.webAccess')"
|
||||
:value="entity.account.active"
|
||||
v-model="entity.account.active"
|
||||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one" v-if="entity.account">
|
||||
<div class="header">
|
||||
{{ t('customer.summary.businessData') }}
|
||||
</div>
|
||||
<VnTitle :text="t('customer.summary.businessData')" />
|
||||
<VnLv
|
||||
:label="t('customer.summary.totalGreuge')"
|
||||
:value="toCurrency(entity.totalGreuge)"
|
||||
|
@ -229,6 +250,7 @@ const creditWarning = computed(() => {
|
|||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one" v-if="entity.account">
|
||||
<<<<<<< HEAD
|
||||
<a
|
||||
class="header link"
|
||||
:href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
|
||||
|
@ -237,6 +259,13 @@ const creditWarning = computed(() => {
|
|||
{{ t('customer.summary.financialData') }}
|
||||
<QIcon name="vn:grafana" color="primary" />
|
||||
</a>
|
||||
=======
|
||||
<VnTitle
|
||||
:url="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
|
||||
:text="t('customer.summary.financialData')"
|
||||
icon="vn:grafana"
|
||||
/>
|
||||
>>>>>>> a9f7cfb8d4acc624cee336bed47618e6d53c3476
|
||||
<VnLv
|
||||
:label="t('customer.summary.risk')"
|
||||
:value="toCurrency(entity?.debt?.debt)"
|
||||
|
|
|
@ -84,7 +84,6 @@ const redirectToCreateView = () => {
|
|||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id)"
|
||||
class="bg-vn-dark"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
|
|
|
@ -30,16 +30,16 @@ const { t } = useI18n();
|
|||
border: 1px solid black;
|
||||
}
|
||||
.title_balance {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.key_balance {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.value_balance {
|
||||
color: var(--vn-text);
|
||||
color: var(--vn-text-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -207,7 +207,7 @@ const refreshData = () => {
|
|||
</QScrollArea>
|
||||
</QDrawer>
|
||||
|
||||
<VnSubToolbar class="bg-vn-dark">
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
|
||||
<div class="flex items-center q-ml-lg">
|
||||
|
@ -224,10 +224,8 @@ const refreshData = () => {
|
|||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
hide-bottom
|
||||
row-key="clientFk"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
|
|
|
@ -510,7 +510,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
|
|||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
|
|
|
@ -108,10 +108,8 @@ const selectCustomerId = (id) => {
|
|||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
hide-bottom
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
|
|
|
@ -151,10 +151,8 @@ function stateColor(row) {
|
|||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:grid="grid || $q.screen.lt.sm"
|
||||
class="q-mt-xs custom-table"
|
||||
hide-pagination
|
||||
>
|
||||
<template #body-cell-actions="{ row }">
|
||||
<QTd auto-width class="text-center">
|
||||
|
@ -196,7 +194,7 @@ function stateColor(row) {
|
|||
</template>
|
||||
<template #body-cell-state="{ row }">
|
||||
<QTd auto-width class="text-center">
|
||||
<QBadge :color="stateColor(row)">
|
||||
<QBadge text-color="black" :color="stateColor(row)">
|
||||
{{
|
||||
row.isConfirmed
|
||||
? t('Confirmed')
|
||||
|
@ -227,6 +225,7 @@ function stateColor(row) {
|
|||
v-if="col.name == 'state'"
|
||||
>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="
|
||||
stateColor(row)
|
||||
"
|
||||
|
|
|
@ -112,7 +112,7 @@ const onDataSaved = async () => {
|
|||
:filter="filterBanks"
|
||||
@on-fetch="(data) => (bankOptions = data)"
|
||||
auto-load
|
||||
url="Banks"
|
||||
url="Accountings"
|
||||
/>
|
||||
<fetch-data
|
||||
:filter="filterClientFindOne"
|
||||
|
|
|
@ -21,7 +21,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
|
|||
:width="256"
|
||||
:breakpoint="1000"
|
||||
>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<QScrollArea class="fit">
|
||||
<LeftMenu />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
|
@ -67,6 +67,10 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-menu {
|
||||
color: var(--vn-font-color);
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
@ -36,13 +37,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body="{ entity: department }">
|
||||
<QCard class="column">
|
||||
<a
|
||||
class="header"
|
||||
:href="`#/department/department/${entityId}/basic-data`"
|
||||
>
|
||||
{{ t('Basic data') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<VnTitle
|
||||
:url="`#/department/department/${entityId}/basic-data`"
|
||||
:text="t('Basic data')"
|
||||
/>
|
||||
<div class="full-width row wrap justify-between content-between">
|
||||
<div class="column" style="min-width: 50%">
|
||||
<VnLv
|
||||
|
|
|
@ -61,6 +61,7 @@ const onFilterTravelSelected = (formData, id) => {
|
|||
:url-update="`Entries/${route.params.id}`"
|
||||
model="entry"
|
||||
auto-load
|
||||
:clear-store-on-unmount="false"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
|
|
|
@ -43,7 +43,7 @@ const tableColumnComponents = computed(() => ({
|
|||
item: {
|
||||
component: QBtn,
|
||||
props: {
|
||||
color: 'blue',
|
||||
color: 'primary',
|
||||
flat: true,
|
||||
},
|
||||
event: () => ({}),
|
||||
|
@ -54,6 +54,7 @@ const tableColumnComponents = computed(() => ({
|
|||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -67,6 +68,7 @@ const tableColumnComponents = computed(() => ({
|
|||
'use-input': true,
|
||||
'hide-selected': true,
|
||||
options: packagingsOptions.value,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -76,6 +78,7 @@ const tableColumnComponents = computed(() => ({
|
|||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -84,6 +87,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -92,6 +96,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -100,6 +105,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -108,6 +114,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -116,6 +123,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -124,6 +132,7 @@ const tableColumnComponents = computed(() => ({
|
|||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
dense: true,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
|
@ -276,7 +285,7 @@ const toggleGroupingMode = async (buy, mode) => {
|
|||
}
|
||||
};
|
||||
|
||||
const showLockIcon = (groupingMode, mode) => {
|
||||
const lockIconType = (groupingMode, mode) => {
|
||||
if (mode === 'packing') {
|
||||
return groupingMode === 2 ? 'lock' : 'lock_open';
|
||||
} else {
|
||||
|
@ -320,17 +329,21 @@ const showLockIcon = (groupingMode, mode) => {
|
|||
:columns="entriesTableColumns"
|
||||
selection="multiple"
|
||||
row-key="id"
|
||||
hide-bottom
|
||||
class="full-width q-mt-md"
|
||||
:grid="$q.screen.lt.md"
|
||||
v-model:selected="rowsSelected"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
>
|
||||
<template #body="props">
|
||||
<QTr>
|
||||
<QTd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</QTd>
|
||||
<QTd v-for="col in props.cols" :key="col.name">
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="tableColumnComponents[col.name].component"
|
||||
v-bind="tableColumnComponents[col.name].props"
|
||||
|
@ -350,7 +363,7 @@ const showLockIcon = (groupingMode, mode) => {
|
|||
>
|
||||
<QBtn
|
||||
:icon="
|
||||
showLockIcon(props.row.groupingMode, col.name)
|
||||
lockIconType(props.row.groupingMode, col.name)
|
||||
"
|
||||
@click="toggleGroupingMode(props.row, col.name)"
|
||||
class="cursor-pointer"
|
||||
|
@ -359,6 +372,16 @@ const showLockIcon = (groupingMode, mode) => {
|
|||
dense
|
||||
unelevated
|
||||
push
|
||||
:style="{
|
||||
'font-variation-settings': `'FILL' ${
|
||||
lockIconType(
|
||||
props.row.groupingMode,
|
||||
col.name
|
||||
) === 'lock'
|
||||
? 1
|
||||
: 0
|
||||
}`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
|
@ -397,7 +420,7 @@ const showLockIcon = (groupingMode, mode) => {
|
|||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
<QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
|
||||
<QTd colspan="12" style="height: 24px" />
|
||||
<QTd colspan="12" class="vn-table-separation-row" />
|
||||
</QTr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
|
@ -449,7 +472,7 @@ const showLockIcon = (groupingMode, mode) => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.separation-row {
|
||||
background-color: var(--vn-gray) !important;
|
||||
background-color: var(--vn-section-color) !important;
|
||||
}
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
|
|
|
@ -238,12 +238,7 @@ const redirectToBuysView = () => {
|
|||
</div>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="importData.buys"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
hide-pagination
|
||||
>
|
||||
<QTable :columns="columns" :rows="importData.buys">
|
||||
<template #body-cell-item="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnSelectDialog
|
||||
|
|
|
@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|||
import EntryDescriptor from './EntryDescriptor.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import useCardSize from 'src/composables/useCardSize';
|
||||
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
|
@ -33,7 +34,9 @@ const stateStore = useStateStore();
|
|||
<QPage>
|
||||
<VnSubToolbar />
|
||||
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
<div :class="useCardSize()">
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { toDate } from 'src/filters';
|
||||
import { usePrintService } from 'composables/usePrintService';
|
||||
|
||||
|
@ -25,6 +26,8 @@ const $props = defineProps({
|
|||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { openReport } = usePrintService();
|
||||
const state = useState();
|
||||
const entryDescriptorRef = ref(null);
|
||||
|
||||
const entryFilter = {
|
||||
include: [
|
||||
|
@ -71,6 +74,8 @@ const data = ref(useCardDescription());
|
|||
const setData = (entity) =>
|
||||
(data.value = useCardDescription(entity.supplier.nickname, entity.id));
|
||||
|
||||
const currentEntry = computed(() => state.get('entry'));
|
||||
|
||||
const getEntryRedirectionFilter = (entry) => {
|
||||
let entryTravel = entry && entry.travel;
|
||||
|
||||
|
@ -95,17 +100,20 @@ const getEntryRedirectionFilter = (entry) => {
|
|||
const showEntryReport = () => {
|
||||
openReport(`Entries/${route.params.id}/entry-order-pdf`);
|
||||
};
|
||||
|
||||
watch;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardDescriptor
|
||||
ref="entryDescriptorRef"
|
||||
module="Entry"
|
||||
:url="`Entries/${entityId}`"
|
||||
:filter="entryFilter"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
data-key="entryData"
|
||||
data-key="entry"
|
||||
>
|
||||
<template #menu="{ entity }">
|
||||
<QItem v-ripple clickable @click="showEntryReport(entity)">
|
||||
|
@ -126,17 +134,17 @@ const showEntryReport = () => {
|
|||
:value="entity.travel?.warehouseOut?.name"
|
||||
/>
|
||||
</template>
|
||||
<template #icons="{ entity }">
|
||||
<template #icons>
|
||||
<QCardActions class="q-gutter-x-md">
|
||||
<QIcon
|
||||
v-if="entity.isExcludedFromAvailable"
|
||||
v-if="currentEntry.isExcludedFromAvailable"
|
||||
name="vn:inventory"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
<QTooltip>{{ t('Inventory entry') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon v-if="entity.isRaid" name="vn:web" color="primary" size="xs">
|
||||
<QIcon v-if="currentEntry.isRaid" name="vn:net" color="primary" size="xs">
|
||||
<QTooltip>{{ t('Virtual entry') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QCardActions>
|
||||
|
|
|
@ -5,9 +5,8 @@ import { useI18n } from 'vue-i18n';
|
|||
|
||||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
|
@ -164,16 +163,28 @@ const fetchEntryBuys = async () => {
|
|||
:url="`Entries/${entityId}/getEntry`"
|
||||
@on-fetch="(data) => setEntryData(data)"
|
||||
>
|
||||
<template #header-left>
|
||||
<router-link
|
||||
v-if="route.name !== 'EntrySummary'"
|
||||
:to="{ name: 'EntrySummary', params: { id: entityId } }"
|
||||
class="header link"
|
||||
:href="entryUrl"
|
||||
>
|
||||
<QIcon name="open_in_new" color="white" size="sm" />
|
||||
</router-link>
|
||||
</template>
|
||||
<template #header>
|
||||
<span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<QCard class="vn-one">
|
||||
<a class="header link" :href="`#/entry/${entityId}/basic-data`">
|
||||
<router-link
|
||||
:to="{ name: 'EntryBasicData', params: { id: entityId } }"
|
||||
class="header header-link"
|
||||
>
|
||||
{{ t('globals.summary.basicData') }}
|
||||
<QIcon name="open_in_new" color="primary" />
|
||||
</a>
|
||||
<QIcon name="open_in_new" />
|
||||
</router-link>
|
||||
|
||||
<VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
|
||||
|
||||
|
@ -187,24 +198,15 @@ const fetchEntryBuys = async () => {
|
|||
:label="t('entry.summary.invoiceNumber')"
|
||||
:value="entry.invoiceNumber"
|
||||
/>
|
||||
|
||||
<VnLv :label="t('entry.summary.ordered')" :value="entry.isOrdered" />
|
||||
|
||||
<VnLv :label="t('entry.summary.confirmed')" :value="entry.isConfirmed" />
|
||||
|
||||
<VnLv :label="t('entry.summary.booked')" :value="entry.isBooked" />
|
||||
|
||||
<VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
|
||||
|
||||
<VnLv
|
||||
:label="t('entry.summary.excludedFromAvailable')"
|
||||
:value="entry.isExcludedFromAvailable"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<a class="header">
|
||||
{{ t('Travel data') }}
|
||||
</a>
|
||||
<router-link
|
||||
:to="{ name: 'EntryBasicData', params: { id: entityId } }"
|
||||
class="header header-link"
|
||||
>
|
||||
{{ t('globals.summary.basicData') }}
|
||||
<QIcon name="open_in_new" />
|
||||
</router-link>
|
||||
|
||||
<VnLv :label="t('entry.summary.travelReference')">
|
||||
<template #value>
|
||||
|
@ -230,11 +232,11 @@ const fetchEntryBuys = async () => {
|
|||
:value="entry.travel.warehouseOut.name"
|
||||
/>
|
||||
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.travelDelivered')"
|
||||
:value="entry.travel.isDelivered"
|
||||
v-model="entry.travel.isDelivered"
|
||||
:disable="true"
|
||||
/>
|
||||
|
||||
<VnLv
|
||||
:label="t('entry.summary.travelLanded')"
|
||||
:value="toDate(entry.travel.landed)"
|
||||
|
@ -245,21 +247,57 @@ const fetchEntryBuys = async () => {
|
|||
:value="entry.travel.warehouseIn.name"
|
||||
/>
|
||||
|
||||
<VnLv
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.travelReceived')"
|
||||
:value="entry.travel.isReceived"
|
||||
v-model="entry.travel.isReceived"
|
||||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-one">
|
||||
<router-link
|
||||
:to="{ name: 'TravelSummary', params: { id: entry.travel.id } }"
|
||||
class="header header-link"
|
||||
>
|
||||
{{ t('Travel data') }}
|
||||
<QIcon name="open_in_new" />
|
||||
</router-link>
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.ordered')"
|
||||
v-model="entry.isOrdered"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.confirmed')"
|
||||
v-model="entry.isConfirmed"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.booked')"
|
||||
v-model="entry.isBooked"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.raid')"
|
||||
v-model="entry.isRaid"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('entry.summary.excludedFromAvailable')"
|
||||
v-model="entry.isExcludedFromAvailable"
|
||||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-two" style="min-width: 100%">
|
||||
<a class="header">
|
||||
<a class="header header-link">
|
||||
{{ t('entry.summary.buys') }}
|
||||
<QIcon name="open_in_new" />
|
||||
</a>
|
||||
<QTable
|
||||
:rows="entryBuys"
|
||||
:columns="entriesTableColumns"
|
||||
hide-bottom
|
||||
row-key="index"
|
||||
class="full-width q-mt-md"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
>
|
||||
<template #body="{ cols, row, rowIndex }">
|
||||
<QTr no-hover>
|
||||
|
@ -305,11 +343,8 @@ const fetchEntryBuys = async () => {
|
|||
</QTd>
|
||||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
<QTr
|
||||
v-if="rowIndex !== entryBuys.length - 1"
|
||||
class="separation-row"
|
||||
>
|
||||
<QTd colspan="10" style="height: 24px" />
|
||||
<QTr v-if="rowIndex !== entryBuys.length - 1">
|
||||
<QTd colspan="10" class="vn-table-separation-row" />
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
|
@ -320,11 +355,11 @@ const fetchEntryBuys = async () => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.separation-row {
|
||||
background-color: var(--vn-gray) !important;
|
||||
background-color: var(--vn-section-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Travel data: 'Datos envío'
|
||||
Travel data: Datos envío
|
||||
</i18n>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
@ -8,24 +8,90 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
|
|||
import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
|
||||
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const router = useRouter();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const rowsFetchDataRef = ref(null);
|
||||
const itemTypesOptions = ref([]);
|
||||
const originsOptions = ref([]);
|
||||
const itemFamiliesOptions = ref([]);
|
||||
const intrastatOptions = ref([]);
|
||||
const packagingsOptions = ref([]);
|
||||
const editTableCellDialogRef = ref(null);
|
||||
const visibleColumns = ref([]);
|
||||
const allColumnNames = ref([]);
|
||||
const rows = ref([]);
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'id':
|
||||
case 'size':
|
||||
case 'weightByPiece':
|
||||
case 'isActive':
|
||||
case 'family':
|
||||
case 'minPrice':
|
||||
case 'packingOut':
|
||||
return { [`i.${param}`]: value };
|
||||
case 'name':
|
||||
case 'description':
|
||||
return { [`i.${param}`]: { like: `%${value}%` } };
|
||||
case 'code':
|
||||
return { 'it.code': value };
|
||||
case 'intrastat':
|
||||
return { 'intr.description': value };
|
||||
case 'origin':
|
||||
return { 'ori.code': value };
|
||||
case 'landing':
|
||||
return { [`lb.${param}`]: value };
|
||||
case 'packing':
|
||||
case 'grouping':
|
||||
case 'quantity':
|
||||
case 'entryFk':
|
||||
case 'buyingValue':
|
||||
case 'freightValue':
|
||||
case 'comissionValue':
|
||||
case 'packageValue':
|
||||
case 'isIgnored':
|
||||
case 'price2':
|
||||
case 'price3':
|
||||
case 'ektFk':
|
||||
case 'weight':
|
||||
case 'packagingFk':
|
||||
return { [`b.${param}`]: value };
|
||||
}
|
||||
};
|
||||
|
||||
const params = reactive({});
|
||||
const arrayData = useArrayData('EntryLatestBuys', {
|
||||
url: 'Buys/latestBuysFilter',
|
||||
order: ['itemFk DESC'],
|
||||
exprBuilder: exprBuilder,
|
||||
});
|
||||
const store = arrayData.store;
|
||||
const rows = computed(() => store.data);
|
||||
const rowsSelected = ref([]);
|
||||
|
||||
const getInputEvents = (col) => {
|
||||
return col.columnFilter.type === 'select'
|
||||
? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
: {
|
||||
'keyup.enter': () => applyColumnFilter(col),
|
||||
};
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('entry.latestBuys.picture'),
|
||||
|
@ -37,12 +103,32 @@ const columns = computed(() => [
|
|||
name: 'itemFk',
|
||||
field: 'itemFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.packing'),
|
||||
field: 'packing',
|
||||
name: 'packing',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -50,6 +136,16 @@ const columns = computed(() => [
|
|||
field: 'grouping',
|
||||
name: 'grouping',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -57,12 +153,32 @@ const columns = computed(() => [
|
|||
field: 'quantity',
|
||||
name: 'quantity',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('globals.description'),
|
||||
field: 'description',
|
||||
name: 'description',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -70,35 +186,104 @@ const columns = computed(() => [
|
|||
field: 'size',
|
||||
name: 'size',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.tags'),
|
||||
name: 'tags',
|
||||
align: 'left',
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.type'),
|
||||
field: 'code',
|
||||
name: 'type',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelectFilter,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: itemTypesOptions.value,
|
||||
'option-value': 'code',
|
||||
'option-label': 'code',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.intrastat'),
|
||||
field: 'intrastat',
|
||||
name: 'intrastat',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelectFilter,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: intrastatOptions.value,
|
||||
'option-value': 'description',
|
||||
'option-label': 'description',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.origin'),
|
||||
field: 'origin',
|
||||
name: 'origin',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelectFilter,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: originsOptions.value,
|
||||
'option-value': 'code',
|
||||
'option-label': 'code',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.weightByPiece'),
|
||||
field: 'weightByPiece',
|
||||
name: 'weightByPiece',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -106,24 +291,67 @@ const columns = computed(() => [
|
|||
field: 'isActive',
|
||||
name: 'isActive',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.family'),
|
||||
field: 'family',
|
||||
name: 'family',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelectFilter,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: itemFamiliesOptions.value,
|
||||
'option-value': 'code',
|
||||
'option-label': 'code',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.entryFk'),
|
||||
field: 'entryFk',
|
||||
name: 'entryFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.buyingValue'),
|
||||
field: 'buyingValue',
|
||||
name: 'buyingValue',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -131,6 +359,16 @@ const columns = computed(() => [
|
|||
field: 'freightValue',
|
||||
name: 'freightValue',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -138,6 +376,16 @@ const columns = computed(() => [
|
|||
field: 'comissionValue',
|
||||
name: 'comissionValue',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -145,6 +393,16 @@ const columns = computed(() => [
|
|||
field: 'packageValue',
|
||||
name: 'packageValue',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -152,12 +410,33 @@ const columns = computed(() => [
|
|||
field: 'isIgnored',
|
||||
name: 'isIgnored',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.price2'),
|
||||
field: 'price2',
|
||||
name: 'price2',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -165,6 +444,16 @@ const columns = computed(() => [
|
|||
field: 'price3',
|
||||
name: 'price3',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -172,6 +461,16 @@ const columns = computed(() => [
|
|||
field: 'minPrice',
|
||||
name: 'minPrice',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toCurrency(val),
|
||||
},
|
||||
{
|
||||
|
@ -179,6 +478,16 @@ const columns = computed(() => [
|
|||
field: 'ektFk',
|
||||
name: 'ektFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -186,18 +495,51 @@ const columns = computed(() => [
|
|||
field: 'weight',
|
||||
name: 'weight',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.packagingFk'),
|
||||
field: 'packagingFk',
|
||||
name: 'packagingFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnSelectFilter,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
options: packagingsOptions.value,
|
||||
'option-value': 'id',
|
||||
'option-label': 'id',
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('entry.latestBuys.packingOut'),
|
||||
field: 'packingOut',
|
||||
name: 'packingOut',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
{
|
||||
|
@ -205,6 +547,16 @@ const columns = computed(() => [
|
|||
field: 'landing',
|
||||
name: 'landing',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
columnFilter: {
|
||||
component: VnInput,
|
||||
type: 'text',
|
||||
filterValue: null,
|
||||
event: getInputEvents,
|
||||
attrs: {
|
||||
dense: true,
|
||||
},
|
||||
},
|
||||
format: (val) => toDate(val),
|
||||
},
|
||||
]);
|
||||
|
@ -234,22 +586,57 @@ const redirectToEntryBuys = (entryFk) => {
|
|||
router.push({ name: 'EntryBuys', params: { id: entryFk } });
|
||||
};
|
||||
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
params[col.field] = col.columnFilter.filterValue;
|
||||
await arrayData.addFilter({ params });
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
await arrayData.fetch({ append: false });
|
||||
});
|
||||
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
ref="rowsFetchDataRef"
|
||||
url="Buys/latestBuysFilter"
|
||||
:filter="{ order: 'itemFk DESC', limit: 20 }"
|
||||
@on-fetch="(data) => (rows = data)"
|
||||
url="ItemTypes"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||
/>
|
||||
<QToolbar class="bg-vn-dark justify-end">
|
||||
<FetchData
|
||||
url="Origins"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (originsOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="ItemFamilies"
|
||||
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemFamiliesOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Packagings"
|
||||
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (packagingsOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Intrastats"
|
||||
:filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (intrastatOptions = data)"
|
||||
/>
|
||||
<QToolbar class="justify-end">
|
||||
<div id="st-data">
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
|
@ -261,19 +648,42 @@ onMounted(async () => {
|
|||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
hide-bottom
|
||||
selection="multiple"
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:selected="rowsSelected"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
@row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
|
||||
>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.name !== 'picture'"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell-picture="{ row }">
|
||||
<QTd>
|
||||
<QImg
|
||||
|
@ -288,9 +698,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-itemFk="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="blue">
|
||||
<QBtn flat color="primary">
|
||||
{{ row.itemFk }}
|
||||
</QBtn>
|
||||
<ItemDescriptorProxy :id="row.itemFk" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-tags="{ row }">
|
||||
|
@ -300,7 +711,7 @@ onMounted(async () => {
|
|||
</template>
|
||||
<template #body-cell-entryFk="{ row }">
|
||||
<QTd @click.stop>
|
||||
<QBtn flat color="blue">
|
||||
<QBtn flat color="primary">
|
||||
<EntryDescriptorProxy :id="row.entryFk" />
|
||||
{{ row.entryFk }}
|
||||
</QBtn>
|
||||
|
|
|
@ -0,0 +1,474 @@
|
|||
<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 VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const itemCategories = ref([]);
|
||||
const selectedCategoryFk = ref(null);
|
||||
const selectedTypeFk = ref(null);
|
||||
const itemTypesOptions = ref([]);
|
||||
const itemTypeWorkersOptions = 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="TicketRequests/getItemTypeWorker"
|
||||
limit="30"
|
||||
auto-load
|
||||
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
|
||||
@on-fetch="(data) => (itemTypeWorkersOptions = 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="['tags']"
|
||||
@init="onFilterInit"
|
||||
@remove="clearFilter"
|
||||
>
|
||||
<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(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #customTags="{ tags: customTags, params }">
|
||||
<template v-for="tag in customTags" :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>
|
||||
<VnSelectFilter
|
||||
:label="t('params.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>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="t('params.salesPersonFk')"
|
||||
v-model="params.salesPersonFk"
|
||||
:options="itemTypeWorkersOptions"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
use-input
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="t('params.supplier')"
|
||||
v-model="params.supplierFk"
|
||||
:options="suppliersOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
use-input
|
||||
@update:model-value="searchFn()"
|
||||
>
|
||||
<template #option="{ itemProps, opt }">
|
||||
<QItem v-bind="itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ opt.name }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ opt.nickname }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
:label="t('params.from')"
|
||||
v-model="params.from"
|
||||
is-outlined
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
:label="t('params.to')"
|
||||
v-model="params.to"
|
||||
is-outlined
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
:label="t('params.active')"
|
||||
v-model="params.active"
|
||||
toggle-indeterminate
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
:label="t('params.visible')"
|
||||
v-model="params.visible"
|
||||
toggle-indeterminate
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
:label="t('params.floramondo')"
|
||||
v-model="params.floramondo"
|
||||
toggle-indeterminate
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QItem
|
||||
v-for="(value, index) in tagValues"
|
||||
:key="value"
|
||||
class="q-mt-md filter-value"
|
||||
>
|
||||
<QItemSection class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('params.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">
|
||||
<VnSelectFilter
|
||||
v-if="!value?.selectedTag?.isFree && value.valueOptions"
|
||||
:label="t('params.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"
|
||||
class="filter-input"
|
||||
@update:model-value="applyTags(params, searchFn)"
|
||||
/>
|
||||
<VnInput
|
||||
v-else
|
||||
v-model="value.value"
|
||||
:label="t('params.value')"
|
||||
:disable="!value"
|
||||
is-outlined
|
||||
class="filter-input"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="applyTags(params, searchFn)"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QIcon
|
||||
name="delete"
|
||||
class="filter-icon"
|
||||
@click="removeTag(index, params, searchFn)"
|
||||
/>
|
||||
</QItem>
|
||||
<QItem class="q-mt-lg">
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
class="filter-icon"
|
||||
@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-icon {
|
||||
font-size: 24px;
|
||||
color: $primary;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
supplier: Supplier
|
||||
from: From
|
||||
to: To
|
||||
active: Is active
|
||||
visible: Is visible
|
||||
floramondo: Is floramondo
|
||||
salesPersonFk: Buyer
|
||||
categoryFk: Category
|
||||
typeFk: Type
|
||||
tag: Tag
|
||||
value: Value
|
||||
es:
|
||||
params:
|
||||
supplier: Proveedor
|
||||
from: Desde
|
||||
to: Hasta
|
||||
active: Activo
|
||||
visible: Visible
|
||||
floramondo: Floramondo
|
||||
salesPersonFk: Comprador
|
||||
categoryFk: Categoría
|
||||
typeFk: Tipo
|
||||
tag: Etiqueta
|
||||
value: Valor
|
||||
Plant: Planta
|
||||
Flower: Flor
|
||||
Handmade: Confección
|
||||
Green: Verde
|
||||
Accessories: Complemento
|
||||
Fruit: Fruta
|
||||
</i18n>
|
|
@ -74,7 +74,7 @@ onMounted(async () => {
|
|||
</QIcon>
|
||||
<QIcon
|
||||
v-if="row.isRaid"
|
||||
name="vn:web"
|
||||
name="vn:net"
|
||||
color="primary"
|
||||
size="xs"
|
||||
>
|
||||
|
|
|
@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { onMounted, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import useCardSize from 'src/composables/useCardSize';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
|
@ -74,7 +75,9 @@ watch(
|
|||
<QPageContainer>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
<div class="q-pa-md"><RouterView></RouterView></div>
|
||||
<div :class="useCardSize()">
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
|
@ -111,7 +111,6 @@ const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/s
|
|||
:rows="rows"
|
||||
row-key="$index"
|
||||
selection="single"
|
||||
hide-pagination
|
||||
:grid="$q.screen.lt.sm"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
>
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
<script setup>
|
||||
import InvoiceInDescriptor from "pages/InvoiceIn/Card/InvoiceInDescriptor.vue";
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<QPopupProxy>
|
||||
<InvoiceInDescriptor v-if="$props.id" :id="$props.id" />
|
||||
</QPopupProxy>
|
||||
</template>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue