forked from verdnatura/salix-front
Merge pull request '#6917 - inputDate_inputTime_improviments' (!552) from 6917-inputDate_inputTime_improviments into test
Reviewed-on: verdnatura/salix-front#552 Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
commit
3decadc64f
|
@ -78,7 +78,7 @@ const defaultComponents = {
|
|||
date: {
|
||||
component: markRaw(VnInputDate),
|
||||
attrs: {
|
||||
readonly: true,
|
||||
readonly: !$props.isEditable,
|
||||
disable: !$props.isEditable,
|
||||
style: 'min-width: 125px',
|
||||
class: 'fit',
|
||||
|
|
|
@ -407,7 +407,7 @@ defineExpose({
|
|||
<VnTableColumn
|
||||
:column="col"
|
||||
:row="row"
|
||||
:is-editable="false"
|
||||
:is-editable="col.isEditable ?? isEditable"
|
||||
v-model="row[col.name]"
|
||||
component-prop="columnField"
|
||||
/>
|
||||
|
|
|
@ -44,15 +44,18 @@ const formattedDate = computed({
|
|||
let newDate;
|
||||
if (value) {
|
||||
// parse input
|
||||
if (value.includes('/') && value.length >= 10) {
|
||||
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
|
||||
value = date.formatDate(
|
||||
new Date(value).toISOString(),
|
||||
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
||||
);
|
||||
if (value.includes('/')) {
|
||||
if (value.length == 6) value = value + new Date().getFullYear();
|
||||
if (value.length >= 10) {
|
||||
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
|
||||
value = date.formatDate(
|
||||
new Date(value).toISOString(),
|
||||
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
||||
);
|
||||
}
|
||||
}
|
||||
let ymd = value.split('-').map((e) => parseInt(e));
|
||||
newDate = new Date(ymd[0], ymd[1] - 1, ymd[2]);
|
||||
const [year, month, day] = value.split('-').map((e) => parseInt(e));
|
||||
newDate = new Date(year, month - 1, day);
|
||||
if (model.value) {
|
||||
const orgDate =
|
||||
model.value instanceof Date ? model.value : new Date(model.value);
|
||||
|
@ -107,7 +110,12 @@ watch(
|
|||
isPopupOpen = false;
|
||||
"
|
||||
/>
|
||||
<QIcon name="event" class="cursor-pointer" />
|
||||
<QIcon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
@click="isPopupOpen = !isPopupOpen"
|
||||
:title="t('Open date')"
|
||||
/>
|
||||
</template>
|
||||
<QMenu
|
||||
transition-show="scale"
|
||||
|
@ -116,6 +124,7 @@ watch(
|
|||
anchor="bottom left"
|
||||
self="top start"
|
||||
:no-focus="true"
|
||||
:no-parent-event="true"
|
||||
>
|
||||
<QDate
|
||||
v-model="popupDate"
|
||||
|
@ -132,7 +141,6 @@ watch(
|
|||
</QInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
|
||||
border-bottom-style: solid;
|
||||
|
@ -142,3 +150,7 @@ watch(
|
|||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
Open date: Abrir fecha
|
||||
</i18n>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { watch, computed, ref } from 'vue';
|
||||
import { watch, computed, ref, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { date } from 'quasar';
|
||||
|
||||
|
@ -20,6 +20,7 @@ const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
|
|||
const dateFormat = 'HH:mm';
|
||||
const isPopupOpen = ref();
|
||||
const hover = ref();
|
||||
const inputRef = ref();
|
||||
|
||||
const styleAttrs = computed(() => {
|
||||
return props.isOutlined
|
||||
|
@ -41,11 +42,17 @@ const formattedTime = computed({
|
|||
let time = value;
|
||||
if (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) {
|
||||
const hours = time.split(':');
|
||||
const date = new Date(model.value);
|
||||
date.setHours(hours[0], hours[1], 0);
|
||||
time = date.toISOString();
|
||||
const [hh, mm] = time.split(':');
|
||||
const date = new Date(model.value ? model.value : null);
|
||||
date.setHours(hh, mm, 0);
|
||||
time = date?.toISOString();
|
||||
}
|
||||
}
|
||||
model.value = time;
|
||||
|
@ -61,11 +68,31 @@ watch(
|
|||
(val) => (formattedTime.value = val),
|
||||
{ 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>
|
||||
|
||||
<template>
|
||||
<div @mouseover="hover = true" @mouseleave="hover = false">
|
||||
<QInput
|
||||
ref="inputRef"
|
||||
class="vn-input-time"
|
||||
mask="##:##"
|
||||
placeholder="--:--"
|
||||
|
@ -74,6 +101,8 @@ watch(
|
|||
:class="{ required: $attrs.required }"
|
||||
style="min-width: 100px"
|
||||
:rules="$attrs.required ? [requiredFieldRule] : null"
|
||||
@click="isPopupOpen = false"
|
||||
@focus="inputRef.getNativeElement().setSelectionRange(0, 0)"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon
|
||||
|
@ -90,7 +119,12 @@ watch(
|
|||
isPopupOpen = false;
|
||||
"
|
||||
/>
|
||||
<QIcon name="Schedule" class="cursor-pointer" />
|
||||
<QIcon
|
||||
name="Schedule"
|
||||
class="cursor-pointer"
|
||||
@click="isPopupOpen = !isPopupOpen"
|
||||
:title="t('Open time')"
|
||||
/>
|
||||
</template>
|
||||
<QMenu
|
||||
transition-show="scale"
|
||||
|
@ -99,6 +133,7 @@ watch(
|
|||
anchor="bottom left"
|
||||
self="top start"
|
||||
:no-focus="true"
|
||||
:no-parent-event="true"
|
||||
>
|
||||
<QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
|
||||
</QMenu>
|
||||
|
@ -114,3 +149,8 @@ watch(
|
|||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
Open time: Abrir tiempo
|
||||
</i18n>
|
||||
, nextTick
|
||||
|
|
|
@ -176,8 +176,6 @@ function confirmRemove(item) {
|
|||
}
|
||||
|
||||
async function remove(item) {
|
||||
console.log('item: ', item);
|
||||
console.log('id: ', route.params.id);
|
||||
await axios.post('OrderRows/removes', {
|
||||
actualOrderId: route.params.id,
|
||||
rows: [item.id],
|
||||
|
|
|
@ -126,7 +126,6 @@ const columns = computed(() => [
|
|||
]);
|
||||
|
||||
async function fetchClientAddress(id, data) {
|
||||
console.log('data: ', data);
|
||||
const clientData = await axios.get(`Clients/${id}`);
|
||||
selectedAddress.value = clientData.data.defaultAddressFk;
|
||||
data.addressId = selectedAddress.value;
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('WorkerCreate', () => {
|
|||
Phone: { val: '123456789' },
|
||||
'Worker code': { val: 'DWW' },
|
||||
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 = {
|
||||
Fi: { val: 'Z4531219V' },
|
||||
|
|
|
@ -87,7 +87,6 @@ Cypress.Commands.add('selectOption', (selector, option) => {
|
|||
});
|
||||
|
||||
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.get(`${form} input`).each(([el]) => {
|
||||
cy.wrap(el)
|
||||
|
@ -96,17 +95,14 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
|
|||
const field = obj[ariaLabel];
|
||||
if (!field) return;
|
||||
|
||||
const { type, val, day } = field;
|
||||
const { type, val } = field;
|
||||
switch (type) {
|
||||
case 'select':
|
||||
cy.wrap(el).type(val);
|
||||
cy.get('.q-menu .q-item').contains(val).click();
|
||||
break;
|
||||
case 'date':
|
||||
cy.wrap(el).click();
|
||||
cy.get(days)
|
||||
.eq(day ? day - 1 : 0)
|
||||
.click();
|
||||
cy.wrap(el).type(val.split('-').join(''));
|
||||
break;
|
||||
default:
|
||||
cy.wrap(el).type(val);
|
||||
|
|
Loading…
Reference in New Issue