#7136 - Enable paginate event in VnSelectFilter #255

Closed
jsegarra wants to merge 86 commits from 7136_vnselectFilter_paginate into dev
14 changed files with 241 additions and 70 deletions
Showing only changes of commit b3a7574595 - Show all commits

View File

@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- (Tickets) => Se añade la opción de clonar ticket. #6951
### Changed
### Fixed

View File

@ -29,7 +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', 'validations'],
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar'],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'],

21
src/boot/qformMixin.js Normal file
View File

@ -0,0 +1,21 @@
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 {
mounted: function () {
const vm = getCurrentInstance();
if (vm.type.name === 'QForm')
if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) {
// AUTOFOCUS
const elementsArray = Array.from(this.$el.elements);
const firstInputElement = elementsArray.filter(filterAvailableInput).find(filterAvailableText);
if (firstInputElement) {
firstInputElement.focus();
}
}
},
};

6
src/boot/quasar.js Normal file
View File

@ -0,0 +1,6 @@
import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin';
export default boot(({ app }) => {
app.mixin(qFormMixin);
});

View File

@ -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() {
@ -45,6 +49,9 @@ const darkMode = computed({
const user = state.getUser();
const token = session.getTokenMultimedia();
const warehousesData = ref();
const companiesData = ref();
const accountBankData = ref();
onMounted(async () => {
updatePreferences();
@ -87,10 +94,28 @@ function copyUserToken() {
</script>
<template>
<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,20 +165,81 @@ 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('localWarehouse')"
v-model="user.localWarehouseFk"
:options="warehousesData"
option-label="name"
option-value="id"
/>
<VnSelectFilter
:label="t('localBank')"
hide-selected
v-model="user.localBankFk"
:options="accountBankData"
option-label="bank"
option-value="id"
></VnSelectFilter>
</VnRow>
<VnRow>
<VnSelectFilter
:label="t('localCompany')"
hide-selected
v-model="user.companyFk"
:options="companiesData"
option-label="code"
option-value="id"
/>
<VnSelectFilter
:label="t('userWarehouse')"
hide-selected
v-model="user.warehouseFk"
:options="warehousesData"
option-label="name"
option-value="id"
/>
</VnRow>
<VnRow>
<VnSelectFilter
:label="t('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;
}
}
</style>
<i18n>
en:
localWarehouse: Local warehouse
localBank: Local bank
localCompany: Local company
userWarehouse: User warehouse
userCompany: User company
es:
localWarehouse: Almacén local
localBank: Banco local
localCompany: Empresa local
userWarehouse: Almacén del usuario
userCompany: Empresa del usuario
</i18n>

View File

@ -164,7 +164,7 @@ function formatValue(value) {
</script>
<template>
<QForm @submit="search">
<QForm @submit="search" id="filterPanelForm">
<QList dense>
<QItem class="q-mt-xs">
<QItemSection top>

View File

@ -108,7 +108,7 @@ async function search() {
</script>
<template>
<QForm @submit="search">
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"

View File

@ -955,7 +955,7 @@ export default {
roadmap: 'Roadmap',
summary: 'Summary',
basicData: 'Basic Data',
stops: 'Stops'
stops: 'Stops',
},
},
roadmap: {
@ -963,7 +963,7 @@ export default {
roadmap: 'Roadmap',
summary: 'Summary',
basicData: 'Basic Data',
stops: 'Stops'
stops: 'Stops',
},
},
route: {

View File

@ -955,7 +955,7 @@ export default {
roadmap: 'Troncales',
summary: 'Resumen',
basicData: 'Datos básicos',
stops: 'Paradas'
stops: 'Paradas',
},
},
roadmap: {
@ -963,7 +963,7 @@ export default {
roadmap: 'Troncales',
summary: 'Resumen',
basicData: 'Datos básicos',
stops: 'Paradas'
stops: 'Paradas',
},
},
route: {

View File

@ -204,7 +204,7 @@ function navigateToRouteSummary(event, row) {
<QPage class="column items-center">
<div class="route-list">
<div class="q-pa-md">
<QCard class="vn-one q-py-sm q-px-lg">
<QCard class="vn-one q-py-sm q-px-lg flex justify-between">
<VnLv class="flex">
<template #label>
<span class="text-h6">{{ t('Total') }}</span>
@ -213,6 +213,16 @@ function navigateToRouteSummary(event, row) {
<span class="text-h6 q-ml-md">{{ toCurrency(total) }}</span>
</template>
</VnLv>
<QBtn
icon="vn:invoice-in-create"
color="primary"
:disable="!selectedRows?.length"
@click="openDmsUploadDialog"
>
<QTooltip>
{{ t('Create invoiceIn') }}
</QTooltip>
</QBtn>
</QCard>
</div>
<VnPaginate
@ -289,18 +299,6 @@ function navigateToRouteSummary(event, row) {
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]" v-if="selectedRows?.length">
<QBtn
fab
icon="vn:invoice-in-create"
color="primary"
@click="openDmsUploadDialog"
>
<QTooltip>
{{ t('Create invoiceIn') }}
</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
<QDialog v-model="dmsDialog.show">
<VnDms

View File

@ -3,7 +3,7 @@ import axios from 'axios';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { usePrintService } from 'composables/usePrintService';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
@ -17,13 +17,49 @@ const props = defineProps({
},
});
const router = useRouter();
const route = useRoute();
const quasar = useQuasar();
const { push, currentRoute } = useRouter();
const { dialog, notify } = useQuasar();
const { t } = useI18n();
const { openReport, sendEmail } = usePrintService();
const ticket = ref(props.ticket);
const ticketId = currentRoute.value.params.id;
const actions = {
clone: async () => {
const opts = { message: t('Ticket cloned'), type: 'positive' };
let clonedTicketId;
try {
const { data } = await axios.post(`Tickets/${ticketId}/clone`, {
shipped: ticket.value.shipped,
});
clonedTicketId = data;
} catch (e) {
opts.message = t('It was not able to clone the ticket');
opts.type = 'negative';
} finally {
notify(opts);
if (clonedTicketId)
push({ name: 'TicketSummary', params: { id: clonedTicketId } });
}
},
remove: async () => {
try {
await axios.post(`Tickets/${ticketId}/setDeleted`);
notify({ message: t('Ticket deleted'), type: 'positive' });
notify({
message: t('You can undo this action within the first hour'),
icon: 'info',
});
push({ name: 'TicketList' });
} catch (e) {
notify({ message: e.message, type: 'negative' });
}
},
};
function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
const path = `Tickets/${ticket.value.id}/delivery-note-${documentType}`;
@ -35,7 +71,7 @@ function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
function sendDeliveryNoteConfirmation(type = 'deliveryNote', documentType = 'pdf') {
const customer = ticket.value.client;
quasar.dialog({
dialog({
component: SendEmailDialog,
componentProps: {
data: {
@ -67,7 +103,7 @@ function showSmsDialog(template, customData) {
const address = ticket.value.address;
const client = ticket.value.client;
const phone =
route.params.phone ||
currentRoute.value.params.phone ||
address.mobile ||
address.phone ||
client.mobile ||
@ -82,7 +118,7 @@ function showSmsDialog(template, customData) {
Object.assign(data, customData);
}
quasar.dialog({
dialog({
component: VnSmsDialog,
componentProps: {
phone: phone,
@ -95,42 +131,26 @@ function showSmsDialog(template, customData) {
}
async function showSmsDialogWithChanges() {
const query = `TicketLogs/${route.params.id}/getChanges`;
const query = `TicketLogs/${ticketId}/getChanges`;
const response = await axios.get(query);
showSmsDialog('orderChanges', { changes: response.data });
}
async function sendSms(body) {
await axios.post(`Tickets/${route.params.id}/sendSms`, body);
quasar.notify({
await axios.post(`Tickets/${ticketId}/sendSms`, body);
notify({
message: 'Notification sent',
type: 'positive',
});
}
function confirmDelete() {
quasar
.dialog({
component: VnConfirm,
componentProps: {
promise: remove,
},
})
.onOk(async () => await router.push({ name: 'TicketList' }));
}
async function remove() {
const id = route.params.id;
await axios.post(`Tickets/${id}/setDeleted`);
quasar.notify({
message: t('Ticket deleted'),
type: 'positive',
});
quasar.notify({
message: t('You can undo this action within the first hour'),
icon: 'info',
function openConfirmDialog(callback) {
dialog({
component: VnConfirm,
componentProps: {
promise: actions[callback],
},
});
}
</script>
@ -227,9 +247,15 @@ async function remove() {
</QList>
</QMenu>
</QItem>
<QItem @click="openConfirmDialog('clone')" v-ripple clickable>
<QItemSection avatar>
<QIcon name="content_copy" />
</QItemSection>
<QItemSection>{{ t('To clone ticket') }}</QItemSection>
</QItem>
<template v-if="!ticket.isDeleted">
<QSeparator />
<QItem @click="confirmDelete()" v-ripple clickable>
<QItem @click="openConfirmDialog('remove')" v-ripple clickable>
<QItemSection avatar>
<QIcon name="delete" />
</QItemSection>
@ -253,4 +279,7 @@ es:
Order changes: Cambios del pedido
Ticket deleted: Ticket eliminado
You can undo this action within the first hour: Puedes deshacer esta acción dentro de la primera hora
To clone ticket: Clonar ticket
Ticket cloned: Ticked clonado
It was not able to clone the ticket: No se pudo clonar el ticket
</i18n>

View File

@ -60,15 +60,6 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params, searchFn }">
<QItem>
<QItemSection>
<VnInput
v-model="params.search"
:label="t('params.search')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter

View File

@ -8,6 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import TravelSummary from './Card/TravelSummary.vue';
import TravelFilter from './TravelFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index';
@ -59,6 +60,15 @@ onMounted(async () => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="TravelList"
:limit="20"
:label="t('searchByIdOrReference')"
/>
</Teleport>
</template>
<FetchData
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
@ -172,7 +182,9 @@ onMounted(async () => {
<i18n>
en:
addEntry: Add entry
searchByIdOrReference: Search by ID or reference
es:
addEntry: Añadir entrada
searchByIdOrReference: Buscar por ID o por referencia
</i18n>

View File

@ -0,0 +1,27 @@
/// <reference types="cypress" />
describe('Ticket descriptor', () => {
const toCloneOpt = '.q-list > :nth-child(5)';
const warehouseValue = '.summaryBody > :nth-child(2) > :nth-child(6) > .value > span';
const summaryHeader = '.summaryHeader > div';
beforeEach(() => {
const ticketId = 1;
cy.login('developer');
cy.visit(`/#/ticket/${ticketId}/summary`);
});
it('should clone the ticket without warehouse', () => {
cy.openLeftMenu();
cy.openActionsDescriptor();
cy.get(toCloneOpt).click();
cy.clickConfirm();
cy.get(warehouseValue).contains('-');
cy.get(summaryHeader)
.invoke('text')
.then((text) => {
const [, owner] = text.split('-');
cy.wrap(owner.trim()).should('eq', 'Bruce Wayne (1101)');
});
});
});