fix(date-dropdown): fixed date from outside and added test case

siemens · Mar 29, 2024 · 303e39b · 303e39b
1 parent 02fef4b
commit 303e39b
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 6 deletions.
diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx
@@ -96,6 +96,7 @@ export class DateDropdown {
   onDateRangeIdChange() {
     this.onRangeListSelect(this.dateRangeId);
     this.updateCurrentDate();
+    this.setDateRangeSelection(this.dateRangeId);
 
     this.onDateSelect({
       from: this.currentRangeValue.from,
@@ -217,7 +218,6 @@ export class DateDropdown {
     rangeValue: { from: string; to: string; id: string },
     preserveDropdown = true
   ) {
-    console.log('on data Chjange: ',rangeValue)
     this.dateRangeChange.emit(rangeValue);
 
     if (preserveDropdown) {
@@ -249,7 +249,6 @@ export class DateDropdown {
   }
 
   private getButtonLabel() {
-    console.log('current range: ,',this.currentRangeValue);
     if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {
       let range = this.currentRangeValue.from;
 

diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts
@@ -178,7 +178,7 @@ test.describe('date dropdown tests', () => {
   });
 
   test('check initial date', async ({ page }) => {
-    const dateDropDownButton = page.locator('ix-date-dropdown');
+    const dateDropDownButton = page.locator(DATE_DROPDOWN_SELECTOR);
     await expect(dateDropDownButton).toHaveClass(/hydrated/);
 
     const initialSetDate = await dateDropDownButton.evaluate(
@@ -196,3 +196,22 @@ test.describe('date dropdown tests', () => {
     });
   });
 });
+
+test('set date from a button', async ({ mount, page }) => {
+  await mount(
+    `<ix-date-dropdown from="2024/02/16"></ix-date-dropdown><ix-button id="set-tomorrow"></ix-button>`
+  );
+  const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);
+  const setButton = page.locator('#set-tomorrow');
+  await expect(dateDropdown).toHaveClass(/hydrated/);
+
+  await setButton.click();
+
+  await dateDropdown.evaluate((el: HTMLIxDateDropdownElement) => {
+    el.from = '2024/02/17';
+    el.to = '2024/02/27';
+    return el.getDateRange();
+  });
+  const button = dateDropdown.locator('[data-date-dropdown-trigger]');
+  await expect(button).toHaveText(/2024\/02\/17 \- 2024\/02\/27/);
+});
diff --git a/packages/react-test-app/src/preview-examples/date-dropdown.tsx b/packages/react-test-app/src/preview-examples/date-dropdown.tsx
@@ -6,9 +6,110 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { IxDateDropdown } from '@siemens/ix-react';
-import React from 'react';
+import { DateRangeChangeEvent } from '@siemens/ix';
+import { IxButton, IxDateDropdown } from '@siemens/ix-react';
+import { DateTime } from 'luxon';
+import React, { useState } from 'react';
+
+const today = DateTime.now();
+const format = 'yyyy/LL/dd';
+const prevWeek = today.minus({
+  day: 7,
+});
 
 export default () => {
-  return <IxDateDropdown />;
+  const [date, setDate] = useState('2024/02/01');
+  const [customDate, setCustomDate] = useState('today');
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `auto auto`,
+        gap: '1rem',
+      }}
+    >
+      <div>
+        <h4>Date Dropdown with Range Option</h4>
+        <IxDateDropdown
+          dateRangeId={customDate}
+          customRangeAllowed
+          dateRangeOptions={[
+            {
+              id: 'no-time',
+              label: 'No time limit',
+              from: '',
+              to: today.toFormat(format),
+            },
+            {
+              id: 'today',
+              label: 'Today',
+              from: today.toFormat(format),
+              to: today.toFormat(format),
+            },
+            {
+              id: 'last-7-days',
+              label: 'Last 7 days',
+              from: today
+                .minus({
+                  day: 7,
+                })
+                .toFormat(format),
+              to: today.toFormat(format),
+            },
+            {
+              id: 'last-week',
+              label: 'Last week',
+              from: prevWeek.startOf('week').toFormat(format),
+              to: prevWeek.endOf('week').toFormat(format),
+            },
+            {
+              id: 'current-month',
+              label: 'Current month',
+              from: today.startOf('month').toFormat(format),
+              to: today.endOf('month').toFormat(format),
+            },
+          ]}
+          format="yyyy/LL/dd"
+        />
+        <br />
+        <br />
+        <IxButton outline onClick={() => setCustomDate('today')}>
+          Set Today
+        </IxButton>
+        <br />
+        <br />
+        <IxButton outline onClick={() => setCustomDate('last-7-days')}>
+          Set Last Seven Day
+        </IxButton>
+        <br />
+        <br />
+        <IxButton outline onClick={() => setCustomDate('current-month')}>
+          Set Current Date
+        </IxButton>
+      </div>
+
+      <div>
+        <h4>Set date from button</h4>
+        <IxDateDropdown
+          onDateRangeChange={(e: CustomEvent<DateRangeChangeEvent>) =>
+            setDate(e.detail.from)
+          }
+          range={false}
+          format="yyyy/LL/dd"
+          from={date}
+        />
+        <br />
+        <br />
+        <IxButton
+          outline
+          onClick={() => {
+            setDate(DateTime.now().plus({ day: 1 }).toFormat('yyyy/LL/dd'));
+          }}
+        >
+          Set Tomorrow
+        </IxButton>
+      </div>
+    </div>
+  );
 };