#6911 save on enter #207

Merged
jsegarra merged 50 commits from 6911-saveOnEnter into dev 2024-06-07 07:20:48 +00:00
12 changed files with 276 additions and 239 deletions

View File

@ -1,21 +1,48 @@
import { getCurrentInstance } from 'vue'; import { getCurrentInstance } from 'vue';
const filterAvailableInput = element => element.classList.contains('q-field__native') && !element.disabled const filterAvailableInput = (element) => {
const filterAvailableText = element => element.__vueParentComponent.type.name === 'QInput' && element.__vueParentComponent?.attrs?.class !== 'vn-input-date'; return element.classList.contains('q-field__native') && !element.disabled;
};
const filterAvailableText = (element) => {
return (
element.__vueParentComponent.type.name === 'QInput' &&
element.__vueParentComponent?.attrs?.class !== 'vn-input-date'
);
};
export default { export default {
mounted: function () { mounted: function () {
const vm = getCurrentInstance(); const vm = getCurrentInstance();
if (vm.type.name === 'QForm') if (vm.type.name === 'QForm') {
if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) { if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
// AUTOFOCUS // AUTOFOCUS
const elementsArray = Array.from(this.$el.elements); const elementsArray = Array.from(this.$el.elements);
const firstInputElement = elementsArray.filter(filterAvailableInput).find(filterAvailableText); const availableInputs = elementsArray.filter(filterAvailableInput);
const firstInputElement = availableInputs.find(filterAvailableText);
if (firstInputElement) { if (firstInputElement) {
firstInputElement.focus(); firstInputElement.focus();
} }
const that = this;
this.$el.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter') {
const input = evt.target;
console.log('input', input);
if (input.type == 'textarea' && evt.shiftKey) {
evt.preventDefault();
let { selectionStart, selectionEnd } = input;
input.value =
input.value.substring(0, selectionStart) +
'\n' +
input.value.substring(selectionEnd);
selectionStart = selectionEnd = selectionStart + 1;
return;
}
evt.preventDefault();
that.onSubmit();
}
});
}
} }
}, },
}; };

View File

@ -155,7 +155,7 @@ const rotateRight = () => {
editor.value.rotate(-90); editor.value.rotate(-90);
}; };
const onUploadAccept = () => { const onSubmit = () => {
try { try {
if (!newPhoto.files && !newPhoto.url) { if (!newPhoto.files && !newPhoto.url) {
notify(t('Select an image'), 'negative'); notify(t('Select an image'), 'negative');
@ -206,7 +206,7 @@ const makeRequest = async () => {
@on-fetch="(data) => (allowedContentTypes = data.join(', '))" @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
auto-load auto-load
/> />
<QForm @submit="onUploadAccept()" class="all-pointer-events"> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />

View File

@ -50,7 +50,7 @@ const onDataSaved = () => {
closeForm(); closeForm();
}; };
const submitData = async () => { const onSubmit = async () => {
try { try {
isLoading.value = true; isLoading.value = true;
const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk })); const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
@ -74,7 +74,7 @@ const closeForm = () => {
</script> </script>
<template> <template>
<QForm @submit="submitData()" class="all-pointer-events"> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />

View File

@ -83,7 +83,7 @@ const tableColumns = computed(() => [
}, },
]); ]);
const fetchResults = async () => { const onSubmit = async () => {
try { try {
let filter = itemFilter; let filter = itemFilter;
const params = itemFilterParams; const params = itemFilterParams;
@ -145,7 +145,7 @@ const selectItem = ({ id }) => {
@on-fetch="(data) => (InksOptions = data)" @on-fetch="(data) => (InksOptions = data)"
auto-load auto-load
/> />
<QForm @submit="fetchResults()" class="all-pointer-events"> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="column" style="padding: 32px; z-index: 100"> <QCard class="column" style="padding: 32px; z-index: 100">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />

View File

@ -85,7 +85,7 @@ const tableColumns = computed(() => [
}, },
]); ]);
const fetchResults = async () => { const onSubmit = async () => {
try { try {
let filter = travelFilter; let filter = travelFilter;
const params = travelFilterParams; const params = travelFilterParams;
@ -138,7 +138,7 @@ const selectTravel = ({ id }) => {
@on-fetch="(data) => (warehousesOptions = data)" @on-fetch="(data) => (warehousesOptions = data)"
auto-load auto-load
/> />
<QForm @submit="fetchResults()" class="all-pointer-events"> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="column" style="padding: 32px; z-index: 100"> <QCard class="column" style="padding: 32px; z-index: 100">
<span ref="closeButton" class="close-icon" v-close-popup> <span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" /> <QIcon name="close" size="sm" />

View File

@ -20,7 +20,12 @@ const state = useState();
const currentUser = ref(state.getUser()); const currentUser = ref(state.getUser());
const newNote = ref(''); const newNote = ref('');
const vnPaginateRef = ref(); const vnPaginateRef = ref();
function handleKeyUp(event) {
jsegarra marked this conversation as resolved
Review
    if (event.key === 'Enter') {
        event.preventDefault();
        if (!event.shiftKey) insert();
    }
``` if (event.key === 'Enter') { event.preventDefault(); if (!event.shiftKey) insert(); } ```
if (event.key === 'Enter') {
event.preventDefault();
if (!event.shiftKey) insert();
}
}
async function insert() { async function insert() {
const body = $props.body; const body = $props.body;
Object.assign(body, { text: newNote.value }); Object.assign(body, { text: newNote.value });
@ -48,12 +53,12 @@ async function insert() {
size="lg" size="lg"
autogrow autogrow
autofocus autofocus
@keyup.ctrl.enter.stop="insert" @keyup="handleKeyUp"
clearable clearable
> >
<template #append <template #append>
><QBtn <QBtn
:title="t('Save (ctrl + Enter)')" :title="t('Save (Enter)')"
icon="save" icon="save"
color="primary" color="primary"
flat flat
@ -130,6 +135,6 @@ async function insert() {
es: es:
Add note here...: Añadir nota aquí... Add note here...: Añadir nota aquí...
New note: Nueva nota New note: Nueva nota
Save (ctrl + Enter): Guardar (Ctrl + Intro) Save (Enter): Guardar (Intro)
</i18n> </i18n>

View File

@ -158,8 +158,7 @@ const statesFilter = {
map-options map-options
use-input use-input
:input-debounce="0" :input-debounce="0"
> />
</QSelect>
</VnRow> </VnRow>
</template> </template>
</FormModel> </FormModel>

View File

@ -174,7 +174,7 @@ const redirectToBuysView = () => {
@on-fetch="(data) => (packagingsOptions = data)" @on-fetch="(data) => (packagingsOptions = data)"
auto-load auto-load
/> />
<QForm> <QForm @submit="onSubmit()">
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<div> <div>
<QBtnGroup push class="q-gutter-x-sm"> <QBtnGroup push class="q-gutter-x-sm">

View File

@ -81,7 +81,7 @@ async function setCreateDms() {
createDmsRef.value.show(); createDmsRef.value.show();
} }
async function upsert() { async function onSubmit() {
try { try {
const isEdit = !!dms.value.id; const isEdit = !!dms.value.id;
const errors = { const errors = {
@ -318,15 +318,15 @@ async function upsert() {
</template> </template>
</FormModel> </FormModel>
<QDialog ref="editDmsRef"> <QDialog ref="editDmsRef">
<QCard> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCardSection class="q-pb-none"> <QCard class="q-pa-sm">
<QItem class="q-px-none"> <QCardSection class="row items-center q-pb-none">
<span class="text-primary text-h6 full-width"> <span class="text-primary text-h6">
<QIcon name="edit" class="q-mr-xs" /> <QIcon name="edit" class="q-mr-xs" />
{{ t('Edit document') }} {{ t('Edit document') }}
</span> </span>
<QSpace />
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QItem>
</QCardSection> </QCardSection>
<QCardSection class="q-py-none"> <QCardSection class="q-py-none">
<QItem> <QItem>
@ -423,21 +423,27 @@ async function upsert() {
</QItem> </QItem>
</QCardSection> </QCardSection>
<QCardActions class="justify-end"> <QCardActions class="justify-end">
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup /> <QBtn
<QBtn :label="t('globals.save')" color="primary" @click="upsert" /> flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
</QCardActions> </QCardActions>
</QCard> </QCard>
</QForm>
</QDialog> </QDialog>
<QDialog ref="createDmsRef"> <QDialog ref="createDmsRef">
<QCard> <QForm @submit="onSubmit()" class="all-pointer-events">
<QCardSection class="q-pb-none"> <QCard class="q-pa-sm">
<QItem> <QCardSection class="row items-center q-pb-none">
<span class="text-primary text-h6 full-width"> <span class="text-primary text-h6">
<QIcon name="edit" class="q-mr-xs" /> <QIcon name="edit" class="q-mr-xs" />
{{ t('Create document') }} {{ t('Create document') }}
</span> </span>
<QBtn icon="close" flat round dense v-close-popup align="right" /> <QSpace />
</QItem> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QCardSection class="q-pb-none"> <QCardSection class="q-pb-none">
<QItem> <QItem>
@ -532,10 +538,16 @@ async function upsert() {
</QItem> </QItem>
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup /> <QBtn
<QBtn :label="t('globals.save')" color="primary" @click="upsert" /> flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
</QCardActions> </QCardActions>
</QCard> </QCard>
</QForm>
</QDialog> </QDialog>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -487,9 +487,6 @@ const createInvoiceInCorrection = async () => {
.q-dialog { .q-dialog {
.q-card { .q-card {
max-width: 45em; max-width: 45em;
.q-item__section > .q-input {
padding-bottom: 1.4em;
}
} }
} }

View File

@ -33,7 +33,7 @@ const addToOrder = async () => {
<template> <template>
<div class="container order-catalog-item q-pb-md"> <div class="container order-catalog-item q-pb-md">
<QForm @submit.prevent="addToOrder"> <QForm @submit="addToOrder">
<QMarkupTable class="shadow-0"> <QMarkupTable class="shadow-0">
<tbody> <tbody>
<tr v-for="item in fields" :key="item.warehouse"> <tr v-for="item in fields" :key="item.warehouse">

View File

@ -13,7 +13,6 @@ describe('AgencyWorkCenter', () => {
cy.get( cy.get(
'.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container' '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
).type('workCenterOne{enter}'); ).type('workCenterOne{enter}');
cy.get('.q-btn--standard > .q-btn__content > .block').click();
cy.get('.q-notification__message').should('have.text', 'Data created'); cy.get('.q-notification__message').should('have.text', 'Data created');
}); });
@ -35,13 +34,11 @@ describe('AgencyWorkCenter', () => {
cy.get( cy.get(
'.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container' '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
).type('workCenterOne{enter}'); ).type('workCenterOne{enter}');
cy.get('.q-btn--standard > .q-btn__content > .block').click();
cy.get('.q-notification__message').should('have.text', 'Data created'); cy.get('.q-notification__message').should('have.text', 'Data created');
cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click(); cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
cy.get( cy.get(
'.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container' '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
).type('workCenterOne{enter}'); ).type('workCenterOne{enter}');
cy.get('.q-btn--standard > .q-btn__content > .block').click();
cy.get( cy.get(
':nth-child(2) > .q-notification__wrapper > .q-notification__content > .q-notification__message' ':nth-child(2) > .q-notification__wrapper > .q-notification__content > .q-notification__message'