feat: Filter: Add date-range to custom date range filter value compon…

…ent [GAUD-6578] (#4764)

* feat: Filter: Add date-range to custom date range filter value component

* Updating vdiff goldens (#4765)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

components/filter/demo/filter.html

@@ -171,7 +171,8 @@ <h2>Date Filter</h2>
 						<d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
 						<d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
 						<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
-						<d2l-filter-dimension-set-date-time-range-value key="custom" ></d2l-filter-dimension-set-date-time-range-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></d2l-filter-dimension-set-date-time-range-value>
 					</d2l-filter-dimension-set>
 				</d2l-filter>
 			</template>

components/filter/filter-dimension-set-date-time-range-value.js

@@ -1,4 +1,6 @@
+import '../inputs/input-date-range.js';
 import '../inputs/input-date-time-range.js';
+import { getLocalDateTimeFromUTCDateTime, getUTCDateTimeFromLocalDateTime } from '../../helpers/dateTime.js';
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -39,14 +41,20 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 			 * Defaults to "Custom Date Range" (localized). Can be overridden if desired.
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true }
+			text: { type: String, reflect: true },
+			/**
+			 * Date/time range input type
+			 * @type {'date'|'date-time'}
+			 */
+			type: { type: String }
 		};
 	}
 
 	constructor() {
 		super();
 		this.disabled = false;
 		this.selected = false;
+		this.type = 'date-time';
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
@@ -104,13 +112,21 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 	}
 
 	_getAdditionalContent() {
-		return html`
-			<d2l-input-date-time-range
+		return this.type === 'date'
+			? html`<d2l-input-date-range
+				@change="${this._handleDateChange}"
+				child-labels-hidden
+				end-value="${ifDefined(this.endValue ? getLocalDateTimeFromUTCDateTime(this.endValue) : undefined)}"
+				label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
+				label-hidden
+				prefer-fixed-positioning
+				start-value="${ifDefined(this.startValue ? getLocalDateTimeFromUTCDateTime(this.startValue) : undefined)}"
+			></d2l-input-date-range>`
+			: html`<d2l-input-date-time-range
 				@change="${this._handleDateChange}"
 				child-labels-hidden
-				data-dimensionvaluekey="${this.key}"
 				end-value="${ifDefined(this.endValue)}"
-				label="Custom Range"
+				label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
 				label-hidden
 				prefer-fixed-positioning
 				start-value="${ifDefined(this.startValue)}"
@@ -124,8 +140,13 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 	}
 
 	async _handleDateChange(e) {
-		this.startValue = e.target.startValue;
-		this.endValue = e.target.endValue;
+		if (this.type === 'date') {
+			this.startValue = e.target.startValue ? getUTCDateTimeFromLocalDateTime(e.target.startValue, '0:0') : undefined;
+			this.endValue = e.target.endValue ? getUTCDateTimeFromLocalDateTime(e.target.endValue, '0:0') : undefined;
+		} else {
+			this.startValue = e.target.startValue;
+			this.endValue = e.target.endValue;
+		}
 
 		this._dispatchFilterChangeEvent = true;
 	}

components/filter/test/filter.test.js

@@ -29,6 +29,13 @@ const singleSetDimensionDateTimeRangeFixture = html`
 			<d2l-filter-dimension-set-date-text-value key="2" range="7days"></d2l-filter-dimension-set-date-text-value>
 		</d2l-filter-dimension-set>
 	</d2l-filter>`;
+const singleSetDimensionDateTimeRangeDateFixture = html`
+<d2l-filter>
+	<d2l-filter-dimension-set key="dim" text="Dim">
+		<d2l-filter-dimension-set-date-time-range-value key="1" selected type="date"></d2l-filter-dimension-set-date-time-range-value>
+		<d2l-filter-dimension-set-date-text-value key="2" range="7days"></d2l-filter-dimension-set-date-text-value>
+	</d2l-filter-dimension-set>
+</d2l-filter>`;
 const singleSetDimensionSingleSelectionFixture = html`
 	<d2l-filter>
 		<d2l-filter-dimension-set key="dim" text="Dim" selection-single>
@@ -618,6 +625,77 @@ describe('d2l-filter', () => {
 				expect(elem._dimensions[0].values[1].selected).to.be.false;
 			});
 
+			it('single set date-time range where type is "date" dimension fires change events', async() => {
+				const elem = await fixture(singleSetDimensionDateTimeRangeDateFixture);
+				const selectedElem = elem.querySelector('d2l-filter-dimension-set-date-time-range-value[selected]');
+				expect(selectedElem.startValue).to.equal(undefined);
+				expect(selectedElem.endValue).to.equal(undefined);
+				expect(elem._dimensions[0].values[0].selected).to.be.true;
+				expect(elem._dimensions[0].values[1].selected).to.be.false;
+
+				// set startValue and wait for event
+				const dateRange = elem.shadowRoot.querySelector('d2l-input-date-range');
+				dateRange.startValue = '2019-02-12T20:00:00.000Z';
+				dateRange.dispatchEvent(new CustomEvent(
+					'change', {
+						bubbles: true,
+						composed: false
+					}
+				));
+
+				let e = await oneEvent(elem, 'd2l-filter-change');
+				let dimensions = e.detail.dimensions;
+				expect(dimensions.length).to.equal(1);
+				expect(dimensions[0].dimensionKey).to.equal('dim');
+				expect(dimensions[0].cleared).to.be.false;
+				let changes = dimensions[0].changes;
+				expect(changes.length).to.equal(1);
+				expect(changes[0].valueKey).to.equal('1');
+				expect(changes[0].selected).to.be.true;
+				expect(changes[0].startValue).to.equal('2019-02-12T05:00:00.000Z');
+
+				// select other item
+				const secondElem = elem.shadowRoot.querySelector('d2l-list-item[key="2"]');
+				setTimeout(() => secondElem.setSelected(true));
+				e = await oneEvent(elem, 'd2l-filter-change');
+				expect(e.detail.allCleared).to.be.false;
+				dimensions = e.detail.dimensions;
+				expect(dimensions.length).to.equal(1);
+				expect(dimensions[0].dimensionKey).to.equal('dim');
+				expect(dimensions[0].cleared).to.be.false;
+				changes = dimensions[0].changes;
+				expect(changes.length).to.equal(2);
+				expect(changes[0].valueKey).to.equal('2');
+				expect(changes[0].selected).to.be.true;
+				expect(elem._dimensions[0].values[1].selected).to.be.true;
+				expect(changes[1].valueKey).to.equal('1');
+				expect(changes[1].selected).to.be.false;
+				expect(changes[1].startValue).to.be.undefined;
+				expect(changes[1].endValue).to.be.undefined;
+				expect(elem._dimensions[0].values[0].selected).to.be.false;
+
+				// re-select first item, make sure start-value is maintained
+				const firstElem = elem.shadowRoot.querySelector('d2l-list-item[key="1"]');
+				setTimeout(() => firstElem.setSelected(true));
+				e = await oneEvent(elem, 'd2l-filter-change');
+				expect(e.detail.allCleared).to.be.false;
+				dimensions = e.detail.dimensions;
+				expect(dimensions.length).to.equal(1);
+				expect(dimensions[0].dimensionKey).to.equal('dim');
+				expect(dimensions[0].cleared).to.be.false;
+				changes = dimensions[0].changes;
+				expect(changes.length).to.equal(2);
+				expect(changes[0].valueKey).to.equal('1');
+				expect(changes[0].selected).to.be.true;
+				expect(changes[0].startValue).to.equal('2019-02-12T05:00:00.000Z');
+				expect(elem._dimensions[0].values[0].selected).to.be.true;
+				expect(changes[1].valueKey).to.equal('2');
+				expect(changes[1].selected).to.be.false;
+				expect(changes[1].startValue).to.be.undefined;
+				expect(changes[1].endValue).to.be.undefined;
+				expect(elem._dimensions[0].values[1].selected).to.be.false;
+			});
+
 			it('single set dimension with selection-single on fires change events', async() => {
 				const elem = await fixture(singleSetDimensionSingleSelectionFixture);
 				const value = elem.shadowRoot.querySelector('d2l-list-item[key="2"]');

components/filter/test/filter.vdiff.js

@@ -89,7 +89,7 @@ function createSingleDimDate() {
 	`;
 }
 function createSingleDimDateCustom(opts) {
-	const { long, customSelected, longCustomSelected, opened, startValue } = { long: false, customSelected: false, longCustomSelected: false, opened: false, ...opts };
+	const { long, customSelected, longCustomSelected, opened, startValue, type } = { long: false, customSelected: false, longCustomSelected: false, opened: false, type: 'date-time', ...opts };
 	return html`
 		<d2l-filter ?opened="${opened}">
 			<d2l-filter-dimension-set key="dates" text="Dates">
@@ -98,7 +98,7 @@ function createSingleDimDateCustom(opts) {
 				<d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
 				<d2l-filter-dimension-set-date-text-value key="14days" range="14days"></d2l-filter-dimension-set-date-text-value>
 				<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
-				<d2l-filter-dimension-set-date-time-range-value key="custom" ?selected="${customSelected && !longCustomSelected}" start-value="${ifDefined(startValue)}"></d2l-filter-dimension-set-date-time-range-value>
+				<d2l-filter-dimension-set-date-time-range-value key="custom" ?selected="${customSelected && !longCustomSelected}" start-value="${ifDefined(startValue)}" type="${type}"></d2l-filter-dimension-set-date-time-range-value>
 				<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Other text" ></d2l-filter-dimension-set-date-time-range-value>
 				${ long ? html`<d2l-filter-dimension-set-date-time-range-value key="custom3" text="Very Long Dimension Title For Testing Text Line Clamp Truncation that would span multiple lines." ?selected="${longCustomSelected}"></d2l-filter-dimension-set-date-time-range-value>` : nothing }
 			</d2l-filter-dimension-set>
@@ -159,6 +159,7 @@ describe('filter', () => {
 				{ name: 'dates-long', template: createSingleDimDateCustom({ long: true }) },
 				{ name: 'dates-custom-selected', template: createSingleDimDateCustom({ customSelected: true }) },
 				{ name: 'dates-custom-selected-start-value', template: createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z' }) },
+				{ name: 'dates-custom-selected-start-value-date', template: createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z', type: 'date' }) },
 				{ name: 'dates-long-custom-selected', template: createSingleDimDateCustom({ long: true, longCustomSelected: true }) },
 			].forEach(({ name, template }) => {
 				it(`${rtl ? 'rtl-' : ''}${name}`, async() => {
@@ -270,6 +271,12 @@ describe('filter', () => {
 				elem.shadowRoot.querySelector('d2l-list-item[label="Custom date range"]').querySelector('d2l-input-date-time-range').setAttribute('start-opened', 'start-opened');
 				await expect(elem).to.be.golden();
 			});
+
+			it('open custom date input type date', async() => {
+				const elem = await fixture(createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z', opened: true, type: 'date' }));
+				elem.shadowRoot.querySelector('d2l-list-item[label="Custom date range"]').querySelector('d2l-input-date-range').setAttribute('start-opened', 'start-opened');
+				await expect(elem).to.be.golden();
+			});
 		});
 	});