0
0
Fork 0
This commit is contained in:
Alex Moreno 2024-07-16 13:15:17 +02:00
commit 90db8b403f
8 changed files with 73 additions and 28 deletions

View File

@ -78,7 +78,7 @@ const defaultComponents = {
date: { date: {
component: markRaw(VnInputDate), component: markRaw(VnInputDate),
attrs: { attrs: {
readonly: true, readonly: !$props.isEditable,
disable: !$props.isEditable, disable: !$props.isEditable,
style: 'min-width: 125px', style: 'min-width: 125px',
class: 'fit', class: 'fit',

View File

@ -407,7 +407,7 @@ defineExpose({
<VnTableColumn <VnTableColumn
:column="col" :column="col"
:row="row" :row="row"
:is-editable="false" :is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]" v-model="row[col.name]"
component-prop="columnField" component-prop="columnField"
/> />

View File

@ -44,15 +44,18 @@ const formattedDate = computed({
let newDate; let newDate;
if (value) { if (value) {
// parse input // parse input
if (value.includes('/') && value.length >= 10) { if (value.includes('/')) {
if (value.at(2) == '/') value = value.split('/').reverse().join('/'); if (value.length == 6) value = value + new Date().getFullYear();
value = date.formatDate( if (value.length >= 10) {
new Date(value).toISOString(), if (value.at(2) == '/') value = value.split('/').reverse().join('/');
'YYYY-MM-DDTHH:mm:ss.SSSZ' value = date.formatDate(
); new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
}
} }
let ymd = value.split('-').map((e) => parseInt(e)); const [year, month, day] = value.split('-').map((e) => parseInt(e));
newDate = new Date(ymd[0], ymd[1] - 1, ymd[2]); newDate = new Date(year, month - 1, day);
if (model.value) { if (model.value) {
const orgDate = const orgDate =
model.value instanceof Date ? model.value : new Date(model.value); model.value instanceof Date ? model.value : new Date(model.value);
@ -107,7 +110,12 @@ watch(
isPopupOpen = false; isPopupOpen = false;
" "
/> />
<QIcon name="event" class="cursor-pointer" /> <QIcon
name="event"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open date')"
/>
</template> </template>
<QMenu <QMenu
transition-show="scale" transition-show="scale"
@ -116,6 +124,7 @@ watch(
anchor="bottom left" anchor="bottom left"
self="top start" self="top start"
:no-focus="true" :no-focus="true"
:no-parent-event="true"
> >
<QDate <QDate
v-model="popupDate" v-model="popupDate"
@ -132,7 +141,6 @@ watch(
</QInput> </QInput>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before { .vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid; border-bottom-style: solid;
@ -142,3 +150,7 @@ watch(
border-style: solid; border-style: solid;
} }
</style> </style>
<i18n>
es:
Open date: Abrir fecha
</i18n>

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { watch, computed, ref } from 'vue'; import { watch, computed, ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { date } from 'quasar'; import { date } from 'quasar';
@ -20,6 +20,7 @@ const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
const dateFormat = 'HH:mm'; const dateFormat = 'HH:mm';
const isPopupOpen = ref(); const isPopupOpen = ref();
const hover = ref(); const hover = ref();
const inputRef = ref();
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return props.isOutlined return props.isOutlined
@ -41,11 +42,17 @@ const formattedTime = computed({
let time = value; let time = value;
if (time) { if (time) {
if (time?.length > 5) time = dateToTime(time); if (time?.length > 5) time = dateToTime(time);
else {
if (time.length == 1 && parseInt(time) > 2) time = time.padStart(2, '0');
time = time.padEnd(5, '0');
if (!time.includes(':'))
time = time.substring(0, 2) + ':' + time.substring(3, 5);
}
if (!props.timeOnly) { if (!props.timeOnly) {
const hours = time.split(':'); const [hh, mm] = time.split(':');
const date = new Date(model.value); const date = new Date(model.value ? model.value : null);
date.setHours(hours[0], hours[1], 0); date.setHours(hh, mm, 0);
time = date.toISOString(); time = date?.toISOString();
} }
} }
model.value = time; model.value = time;
@ -61,11 +68,31 @@ watch(
(val) => (formattedTime.value = val), (val) => (formattedTime.value = val),
{ immediate: true } { immediate: true }
); );
watch(
() => formattedTime.value,
async (val) => {
let position = 3;
const input = inputRef.value?.getNativeElement();
if (!val || !input) return;
let [hh, mm] = val.split(':');
hh = parseInt(hh);
if (hh >= 10 || mm != '00') return;
await nextTick();
await nextTick();
if (!hh) position = 0;
input.setSelectionRange(position, position);
},
{ immediate: true }
);
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false"> <div @mouseover="hover = true" @mouseleave="hover = false">
<QInput <QInput
ref="inputRef"
class="vn-input-time" class="vn-input-time"
mask="##:##" mask="##:##"
placeholder="--:--" placeholder="--:--"
@ -74,6 +101,8 @@ watch(
:class="{ required: $attrs.required }" :class="{ required: $attrs.required }"
style="min-width: 100px" style="min-width: 100px"
:rules="$attrs.required ? [requiredFieldRule] : null" :rules="$attrs.required ? [requiredFieldRule] : null"
@click="isPopupOpen = false"
@focus="inputRef.getNativeElement().setSelectionRange(0, 0)"
> >
<template #append> <template #append>
<QIcon <QIcon
@ -90,7 +119,12 @@ watch(
isPopupOpen = false; isPopupOpen = false;
" "
/> />
<QIcon name="Schedule" class="cursor-pointer" /> <QIcon
name="Schedule"
class="cursor-pointer"
@click="isPopupOpen = !isPopupOpen"
:title="t('Open time')"
/>
</template> </template>
<QMenu <QMenu
transition-show="scale" transition-show="scale"
@ -99,6 +133,7 @@ watch(
anchor="bottom left" anchor="bottom left"
self="top start" self="top start"
:no-focus="true" :no-focus="true"
:no-parent-event="true"
> >
<QTime v-model="formattedTime" mask="HH:mm" landscape now-btn /> <QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
</QMenu> </QMenu>
@ -114,3 +149,8 @@ watch(
border-style: solid; border-style: solid;
} }
</style> </style>
<i18n>
es:
Open time: Abrir tiempo
</i18n>
, nextTick

View File

@ -176,8 +176,6 @@ function confirmRemove(item) {
} }
async function remove(item) { async function remove(item) {
console.log('item: ', item);
console.log('id: ', route.params.id);
await axios.post('OrderRows/removes', { await axios.post('OrderRows/removes', {
actualOrderId: route.params.id, actualOrderId: route.params.id,
rows: [item.id], rows: [item.id],

View File

@ -126,7 +126,6 @@ const columns = computed(() => [
]); ]);
async function fetchClientAddress(id, data) { async function fetchClientAddress(id, data) {
console.log('data: ', data);
const clientData = await axios.get(`Clients/${id}`); const clientData = await axios.get(`Clients/${id}`);
selectedAddress.value = clientData.data.defaultAddressFk; selectedAddress.value = clientData.data.defaultAddressFk;
data.addressId = selectedAddress.value; data.addressId = selectedAddress.value;

View File

@ -14,7 +14,7 @@ describe('WorkerCreate', () => {
Phone: { val: '123456789' }, Phone: { val: '123456789' },
'Worker code': { val: 'DWW' }, 'Worker code': { val: 'DWW' },
Boss: { val: developerBossId, type: 'select' }, Boss: { val: developerBossId, type: 'select' },
Birth: { val: '2022-12-11T23:00:00.000Z', type: 'date', day: 11 }, Birth: { val: '11-12-2022', type: 'date' },
}; };
const external = { const external = {
Fi: { val: 'Z4531219V' }, Fi: { val: 'Z4531219V' },

View File

@ -87,7 +87,6 @@ Cypress.Commands.add('selectOption', (selector, option) => {
}); });
Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => { Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
const days = '.q-date__calendar-days .q-date__calendar-item--in';
cy.waitForElement('.q-form > .q-card'); cy.waitForElement('.q-form > .q-card');
cy.get(`${form} input`).each(([el]) => { cy.get(`${form} input`).each(([el]) => {
cy.wrap(el) cy.wrap(el)
@ -96,17 +95,14 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
const field = obj[ariaLabel]; const field = obj[ariaLabel];
if (!field) return; if (!field) return;
const { type, val, day } = field; const { type, val } = field;
switch (type) { switch (type) {
case 'select': case 'select':
cy.wrap(el).type(val); cy.wrap(el).type(val);
cy.get('.q-menu .q-item').contains(val).click(); cy.get('.q-menu .q-item').contains(val).click();
break; break;
case 'date': case 'date':
cy.wrap(el).click(); cy.wrap(el).type(val.split('-').join(''));
cy.get(days)
.eq(day ? day - 1 : 0)
.click();
break; break;
default: default:
cy.wrap(el).type(val); cy.wrap(el).type(val);