From 9d41dbb9a80be72a63276ec607bb72d74af23dd6 Mon Sep 17 00:00:00 2001
From: boern99 <boern99@gmail.com>
Date: Mon, 9 Dec 2024 18:06:37 +0000
Subject: [PATCH] date-range-picker prev and next design

---
 src/components/ha-date-range-picker.ts | 212 ++++++++++---------------
 src/components/ha-textarea.ts          |   6 +
 2 files changed, 90 insertions(+), 128 deletions(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 12601e2a4b50..9a397f41ad80 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -6,7 +6,6 @@ import { mdiCalendar } from "@mdi/js";
 import {
   addDays,
   addMonths,
-  addYears,
   endOfDay,
   endOfMonth,
   endOfWeek,
@@ -19,6 +18,11 @@ import {
   addMilliseconds,
   subMilliseconds,
   roundToNearestHours,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+  subMonths,
+  differenceInMonths,
+  isThisYear,
 } from "date-fns";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -26,14 +30,16 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { calcDate } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
-import { formatDate } from "../common/datetime/format_date";
-import { formatDateTime } from "../common/datetime/format_date_time";
+import {
+  formatShortDateTimeWithYear,
+  formatShortDateTime,
+} from "../common/datetime/format_date_time";
+
 import { useAmPm } from "../common/datetime/use_am_pm";
 import type { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-icon-button";
-import "./ha-svg-icon";
-import "./ha-textfield";
+import "./ha-textarea";
 import "./ha-icon-button-next";
 import "./ha-icon-button-prev";
 
@@ -141,9 +147,6 @@ export class HaDateRangePicker extends LitElement {
         [this.hass.localize(
           "ui.components.date-range-picker.ranges.this_week"
         )]: [weekStart, weekEnd],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.last_week"
-        )]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
         ...(this.extendedPresets
           ? {
               [this.hass.localize(
@@ -168,28 +171,6 @@ export class HaDateRangePicker extends LitElement {
                   }
                 ),
               ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.last_month"
-              )]: [
-                calcDate(
-                  addMonths(today, -1),
-                  startOfMonth,
-                  this.hass.locale,
-                  this.hass.config,
-                  {
-                    weekStartsOn,
-                  }
-                ),
-                calcDate(
-                  addMonths(today, -1),
-                  endOfMonth,
-                  this.hass.locale,
-                  this.hass.config,
-                  {
-                    weekStartsOn,
-                  }
-                ),
-              ],
               [this.hass.localize(
                 "ui.components.date-range-picker.ranges.this_year"
               )]: [
@@ -206,28 +187,6 @@ export class HaDateRangePicker extends LitElement {
                   weekStartsOn,
                 }),
               ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.last_year"
-              )]: [
-                calcDate(
-                  addYears(today, -1),
-                  startOfYear,
-                  this.hass.locale,
-                  this.hass.config,
-                  {
-                    weekStartsOn,
-                  }
-                ),
-                calcDate(
-                  addYears(today, -1),
-                  endOfYear,
-                  this.hass.locale,
-                  this.hass.config,
-                  {
-                    weekStartsOn,
-                  }
-                ),
-              ],
             }
           : {}),
       };
@@ -261,51 +220,44 @@ export class HaDateRangePicker extends LitElement {
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
-            ? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
-                <ha-icon-button-prev
-                  .label=${this.hass.localize("ui.common.previous")}
-                  class="prev"
-                  @click=${this._handlePrev}
-                >
-                </ha-icon-button-prev>
-                <ha-textfield
-                  .value=${this.timePicker
-                    ? formatDateTime(
+            ? html`<ha-textarea
+                  mobile2multiline
+                  .value=${(isThisYear(this.startDate)
+                    ? formatShortDateTime(
                         this.startDate,
                         this.hass.locale,
                         this.hass.config
                       )
-                    : formatDate(
+                    : formatShortDateTimeWithYear(
                         this.startDate,
                         this.hass.locale,
                         this.hass.config
-                      )}
-                  .label=${this.hass.localize(
-                    "ui.components.date-range-picker.start_date"
-                  )}
-                  .disabled=${this.disabled}
-                  @click=${this._handleInputClick}
-                  readonly
-                ></ha-textfield>
-                <ha-textfield
-                  .value=${this.timePicker
-                    ? formatDateTime(
+                      )) +
+                  " - \n" +
+                  (isThisYear(this.endDate)
+                    ? formatShortDateTime(
                         this.endDate,
                         this.hass.locale,
                         this.hass.config
                       )
-                    : formatDate(
+                    : formatShortDateTimeWithYear(
                         this.endDate,
                         this.hass.locale,
                         this.hass.config
-                      )}
+                      ))}
                   .label=${this.hass.localize(
-                    "ui.components.date-range-picker.end_date"
+                    "ui.components.selectors.selector.types.datetime"
                   )}
                   .disabled=${this.disabled}
                   @click=${this._handleInputClick}
                   readonly
-                ></ha-textfield>
+                ></ha-textarea>
+                <ha-icon-button-prev
+                  .label=${this.hass.localize("ui.common.previous")}
+                  class="prev"
+                  @click=${this._handlePrev}
+                >
+                </ha-icon-button-prev>
                 <ha-icon-button-next
                   .label=${this.hass.localize("ui.common.next")}
                   class="next"
@@ -343,39 +295,64 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _handleNext(): void {
-    const dateRange = [
-      roundToNearestHours(this.endDate),
-      subMilliseconds(
-        roundToNearestHours(
-          addMilliseconds(
-            this.endDate,
-            Math.max(
-              3600000,
-              differenceInMilliseconds(this.endDate, this.startDate)
+    let dateRange: [Date, Date];
+    if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) {
+      dateRange = [
+        roundToNearestHours(this.endDate),
+        subMilliseconds(
+          addMonths(
+            roundToNearestHours(this.endDate),
+            differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate)
+          ),
+          1
+        ),
+      ];
+    } else {
+      dateRange = [
+        roundToNearestHours(this.endDate),
+        subMilliseconds(
+          roundToNearestHours(
+            addMilliseconds(
+              this.endDate,
+              Math.max(
+                3600000,
+                differenceInMilliseconds(this.endDate, this.startDate)
+              )
             )
-          )
+          ),
+          1
         ),
-        1
-      ),
-    ];
+      ];
+    }
     const dateRangePicker = this._dateRangePicker;
     dateRangePicker.clickRange(dateRange);
     dateRangePicker.clickedApply();
   }
 
   private _handlePrev(): void {
-    const dateRange = [
-      roundToNearestHours(
-        subMilliseconds(
+    let dateRange: [Date, Date];
+    if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) {
+      dateRange = [
+        subMonths(
           this.startDate,
-          Math.max(
-            3600000,
-            differenceInMilliseconds(this.endDate, this.startDate)
+          differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate)
+        ),
+        subMilliseconds(roundToNearestHours(this.startDate), 1),
+      ];
+    } else {
+      dateRange = [
+        roundToNearestHours(
+          subMilliseconds(
+            this.startDate,
+            Math.max(
+              3600000,
+              differenceInMilliseconds(this.endDate, this.startDate)
+            )
           )
-        )
-      ),
-      subMilliseconds(roundToNearestHours(this.startDate), 1),
-    ];
+        ),
+        subMilliseconds(roundToNearestHours(this.startDate), 1),
+      ];
+    }
     const dateRangePicker = this._dateRangePicker;
     dateRangePicker.clickRange(dateRange);
     dateRangePicker.clickedApply();
@@ -430,12 +407,7 @@ export class HaDateRangePicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-svg-icon {
-        margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
-        direction: var(--direction);
-      }
+
 
       ha-icon-button {
         direction: var(--direction);
@@ -457,17 +429,13 @@ export class HaDateRangePicker extends LitElement {
         border-top: 1px solid var(--divider-color);
       }
 
-      ha-textfield {
+      ha-textarea {
         display: inline-block;
-        max-width: 250px;
-        min-width: 220px;
+        width: 340px;
       }
-
-      ha-textfield:last-child {
-        margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
-        direction: var(--direction);
+      @media only screen and (max-width: 460px) {
+      ha-textarea {
+        width: 100%
       }
 
       @media only screen and (max-width: 800px) {
@@ -476,18 +444,6 @@ export class HaDateRangePicker extends LitElement {
           border-bottom: 1px solid var(--divider-color);
         }
       }
-
-      @media only screen and (max-width: 500px) {
-        ha-textfield {
-          min-width: inherit;
-        }
-
-        ha-svg-icon,
-        .prev,
-        .next {
-          display: none;
-        }
-      }
     `;
   }
 }
diff --git a/src/components/ha-textarea.ts b/src/components/ha-textarea.ts
index 7d10e3800d05..422e5b00a314 100644
--- a/src/components/ha-textarea.ts
+++ b/src/components/ha-textarea.ts
@@ -53,6 +53,12 @@ export class HaTextArea extends TextAreaBase {
         inset-inline-end: initial !important;
         transform-origin: var(--float-start) top;
       }
+      @media only screen and (min-width: 459px) {
+        :host([mobile2multiline]) .mdc-text-field__input {
+          white-space: nowrap;
+          max-height: 16px;
+        }
+      }
     `,
   ];
 }