Skip to content

Commit

Permalink
feat(foxy-query-builder): switch to datetime-local for date inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pheekus
pheekus committed Aug 4, 2023
1 parent f69e38f commit e73ddab
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 35 deletions.
60 changes: 33 additions & 27 deletions src/elements/public/QueryBuilder/QueryBuilder.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { expect, fixture, oneEvent } from '@open-wc/testing';

import { QueryBuilder } from './index';
import { Type } from './types';
import { serializeDateTime } from '../../../utils/serialize-date';

describe('QueryBuilder', () => {
const OriginalResizeObserver = window.ResizeObserver;
Expand Down Expand Up @@ -358,32 +359,38 @@ describe('QueryBuilder', () => {
});

it('supports ranges for known date fields', async () => {
const fromDate = new Date(2020, 0, 1);
const toDate = new Date(2021, 0, 1);
const getRange = () => [fromDate, toDate].map(v => v.toISOString()).join('..');

const layout = html`
<foxy-query-builder
options=${JSON.stringify([{ path: 'foo', type: 'date', label: 'Foo' }])}
value="foo=2020-01-01T00%3A00%3A00.000Z..2021-01-01T00%3A00%3A00.000Z"
value="foo=${encodeURIComponent(getRange())}"
>
</foxy-query-builder>
`;

const element = await fixture<QueryBuilder>(layout);
const root = element.renderRoot;
const [from, to] = [...root.querySelectorAll<HTMLInputElement>('input[type="date"]')];
const [from, to] = [...root.querySelectorAll<HTMLInputElement>('input[type="datetime-local"]')];

expect(from).to.have.property('value', '2020-01-01');
expect(to).to.have.property('value', '2021-01-01');
expect(from).to.have.property('value', serializeDateTime(fromDate));
expect(to).to.have.property('value', serializeDateTime(toDate));

from.value = '2022-01-01';
fromDate.setFullYear(2022);
from.value = serializeDateTime(fromDate);
from.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value('foo=2022-01-01T00%3A00%3A00.000Z..2021-01-01T00%3A00%3A00.000Z');
expect(element).to.have.value(`foo=${encodeURIComponent(getRange())}`);

to.value = '2024-01-01';
toDate.setFullYear(2024);
to.value = serializeDateTime(toDate);
to.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value('foo=2022-01-01T00%3A00%3A00.000Z..2024-01-01T00%3A00%3A00.000Z');
expect(element).to.have.value(`foo=${encodeURIComponent(getRange())}`);
});

it('supports ranges for known number fields', async () => {
Expand Down Expand Up @@ -416,54 +423,53 @@ describe('QueryBuilder', () => {
});

it('supports lists for known date fields', async () => {
const date1 = new Date(2020, 0, 1);
const date2 = new Date(2021, 0, 1);
const getList = (...dates: Date[]) => dates.map(v => v.toISOString()).join();

const layout = html`
<foxy-query-builder
options=${JSON.stringify([{ path: 'foo', type: 'date', label: 'Foo' }])}
value="foo%3Ain=2020-01-01T00%3A00%3A00.000Z%2C2021-01-01T00%3A00%3A00.000Z"
value="foo%3Ain=${encodeURIComponent(getList(date1, date2))}"
>
</foxy-query-builder>
`;

const element = await fixture<QueryBuilder>(layout);
const root = element.renderRoot;
const [first, second, addNew] = [
...root.querySelectorAll<HTMLInputElement>('input[type="date"]'),
...root.querySelectorAll<HTMLInputElement>('input[type="datetime-local"]'),
];

expect(first).to.have.property('value', '2020-01-01');
expect(second).to.have.property('value', '2021-01-01');
expect(first).to.have.property('value', serializeDateTime(date1));
expect(second).to.have.property('value', serializeDateTime(date2));

first.value = '2022-01-01';
date1.setFullYear(2022);
first.value = serializeDateTime(date1);
first.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value(
'foo%3Ain=2022-01-01T00%3A00%3A00.000Z%2C2021-01-01T00%3A00%3A00.000Z'
);
expect(element).to.have.value(`foo%3Ain=${encodeURIComponent(getList(date1, date2))}`);

second.value = '2024-01-01';
date2.setFullYear(2024);
second.value = serializeDateTime(date2);
second.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value(
'foo%3Ain=2022-01-01T00%3A00%3A00.000Z%2C2024-01-01T00%3A00%3A00.000Z'
);
expect(element).to.have.value(`foo%3Ain=${encodeURIComponent(getList(date1, date2))}`);

addNew.value = '2026-01-01';
const date3 = new Date(2026, 0, 1);
addNew.value = serializeDateTime(date3);
addNew.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value(
'foo%3Ain=2022-01-01T00%3A00%3A00.000Z%2C2024-01-01T00%3A00%3A00.000Z%2C2026-01-01T00%3A00%3A00.000Z'
);
expect(element).to.have.value(`foo%3Ain=${encodeURIComponent(getList(date1, date2, date3))}`);

addNew.value = '';
addNew.dispatchEvent(new InputEvent('input'));
await element.updateComplete;

expect(element).to.have.value(
'foo%3Ain=2022-01-01T00%3A00%3A00.000Z%2C2024-01-01T00%3A00%3A00.000Z'
);
expect(element).to.have.value(`foo%3Ain=${encodeURIComponent(getList(date1, date2))}`);
});

it('supports lists for known number fields', async () => {
Expand Down
20 changes: 12 additions & 8 deletions src/elements/public/QueryBuilder/components/Input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { TemplateResult, html } from 'lit-html';
import { I18n } from '../../I18n/I18n';
import { classMap } from '../../../../utils/class-map';
import { ifDefined } from 'lit-html/directives/if-defined';
import { serializeDateUTC } from '../../../../utils/serialize-date';
import { serializeDateTime } from '../../../../utils/serialize-date';

export type InputParams = {
t: I18n['t'];
Expand All @@ -27,7 +27,7 @@ export function Input(params: InputParams): TemplateResult {

if (params.type === 'date') {
const date = new Date(params.value);
normalizedValue = isNaN(date.getTime()) ? '' : serializeDateUTC(date);
normalizedValue = isNaN(date.getTime()) ? '' : serializeDateTime(date);
}

return html`
Expand Down Expand Up @@ -61,20 +61,24 @@ export function Input(params: InputParams): TemplateResult {
'opacity-0 focus-opacity-100': hasDisplayValue,
})}
list=${ifDefined(params.list ? listId : undefined)}
type=${params.type}
max=${ifDefined(params.type === 'date' ? '9999-12-31' : '')}
type=${params.type === 'date' ? 'datetime-local' : params.type}
max=${ifDefined(params.type === 'date' ? '9999-12-31T23:59' : '')}
.value=${normalizedValue}
?disabled=${params.disabled || params.readonly}
@input=${(evt: Event) => {
const input = evt.currentTarget as HTMLInputElement;
let newValue = input.value;
try {
const valueAsDate = input.valueAsDate as Date;
if (valueAsDate.getFullYear() > 9999) valueAsDate.setFullYear(9999);
params.onChange(valueAsDate.toISOString());
if (params.type === 'date') {
const newDate = new Date(input.value);
if (!isNaN(newDate.getTime())) newValue = newDate.toISOString();
}
} catch {
params.onChange(input.value);
// ignore
}
params.onChange(newValue);
}}
/>
</div>
Expand Down

0 comments on commit e73ddab

Please sign in to comment.