Skip to content

Commit

Permalink
Allow to clear due date
Browse files Browse the repository at this point in the history
  • Loading branch information
bramkragten committed Dec 30, 2023
1 parent c584f83 commit 3e3c3d5
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 13 deletions.
18 changes: 16 additions & 2 deletions src/components/ha-date-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export interface datePickerDialogParams {
max?: string;
locale?: string;
firstWeekday?: number;
onChange: (value: string) => void;
canClear?: boolean;
onChange: (value: string | undefined) => void;
}

const showDatePickerDialog = (
Expand Down Expand Up @@ -49,6 +50,8 @@ export class HaDateInput extends LitElement {

@property() public helper?: string;

@property({ type: Boolean }) public canClear?: boolean;

render() {
return html`<ha-textfield
.label=${this.label}
Expand All @@ -58,6 +61,7 @@ export class HaDateInput extends LitElement {
helperPersistent
readonly
@click=${this._openDialog}
@keydown=${this._keyDown}
.value=${this.value
? formatDateNumeric(
new Date(`${this.value.split("T")[0]}T00:00:00`),
Expand All @@ -82,13 +86,23 @@ export class HaDateInput extends LitElement {
min: this.min || "1970-01-01",
max: this.max,
value: this.value,
canClear: this.canClear,
onChange: (value) => this._valueChanged(value),
locale: this.locale.language,
firstWeekday: firstWeekdayIndex(this.locale),
});
}

private _valueChanged(value: string) {
private _keyDown(ev: KeyboardEvent) {
if (!this.canClear) {
return;
}
if (["Backspace", "Delete"].includes(ev.key)) {
this._valueChanged(undefined);
}
}

private _valueChanged(value: string | undefined) {
if (this.value !== value) {
this.value = value;
fireEvent(this, "change");
Expand Down
14 changes: 14 additions & 0 deletions src/components/ha-dialog-date-picker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,15 @@ export class HaDialogDatePicker extends LitElement {
@datepicker-value-updated=${this._valueChanged}
.firstDayOfWeek=${this._params.firstWeekday}
></app-datepicker>
${this._params.canClear
? html`<mwc-button
slot="secondaryAction"
@click=${this._clear}
class="warning"
>
${this.hass.localize("ui.dialogs.date-picker.clear")}
</mwc-button>`
: nothing}
<mwc-button slot="secondaryAction" @click=${this._setToday}>
${this.hass.localize("ui.dialogs.date-picker.today")}
</mwc-button>
Expand All @@ -66,6 +75,11 @@ export class HaDialogDatePicker extends LitElement {
this._value = ev.detail.value;
}

private _clear() {
this._params?.onChange(undefined);
this.closeDialog();
}

private _setToday() {
const today = new Date();
this._value = format(today, "yyyy-MM-dd");
Expand Down
8 changes: 4 additions & 4 deletions src/data/todo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export interface TodoItem {
uid: string;
summary: string;
status: TodoItemStatus;
description?: string;
due?: string;
description?: string | null;
due?: string | null;
}

export const enum TodoListEntityFeature {
Expand Down Expand Up @@ -83,9 +83,9 @@ export const updateItem = (
item: item.uid,
rename: item.summary,
status: item.status,
description: item.description || undefined,
description: item.description || null,
due_datetime: item.due?.includes("T") ? item.due : undefined,
due_date: item.due?.includes("T") ? undefined : item.due || undefined,
due_date: item.due?.includes("T") ? undefined : item.due || null,
},
{ entity_id }
);
Expand Down
17 changes: 11 additions & 6 deletions src/panels/todo/dialog-todo-item-editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,8 @@ class DialogTodoItemEditor extends LitElement {
.value=${dueDate}
.locale=${this.hass.locale}
.disabled=${!canUpdate}
@value-changed=${this._endDateChanged}
@value-changed=${this._dueDateChanged}
canClear
></ha-date-input>
${this._todoListSupportsFeature(
TodoListEntityFeature.SET_DUE_DATETIME_ON_ITEM
Expand All @@ -170,7 +171,7 @@ class DialogTodoItemEditor extends LitElement {
.value=${dueTime}
.locale=${this.hass.locale}
.disabled=${!canUpdate}
@value-changed=${this._endTimeChanged}
@value-changed=${this._dueTimeChanged}
></ha-time-input>`
: nothing}
</div>
Expand Down Expand Up @@ -259,12 +260,16 @@ class DialogTodoItemEditor extends LitElement {
this._description = ev.target.value;
}

private _endDateChanged(ev: CustomEvent) {
private _dueDateChanged(ev: CustomEvent) {
if (!ev.detail.value) {
this._due = undefined;
return;
}
const time = this._due ? this._formatTime(this._due) : undefined;
this._due = this._parseDate(`${ev.detail.value}${time ? `T${time}` : ""}`);
}

private _endTimeChanged(ev: CustomEvent) {
private _dueTimeChanged(ev: CustomEvent) {
this._hasTime = true;
this._due = this._parseDate(
`${this._formatDate(this._due || new Date())}T${ev.detail.value}`
Expand Down Expand Up @@ -320,13 +325,13 @@ class DialogTodoItemEditor extends LitElement {
TodoListEntityFeature.SET_DESCRIPTION_ON_ITEM
)
? // backend should accept null to clear the field, but it doesn't now
" "
null
: undefined),
due: this._due
? this._hasTime
? this._due.toISOString()
: this._formatDate(this._due)
: undefined,
: null,
status: this._checked
? TodoItemStatus.Completed
: TodoItemStatus.NeedsAction,
Expand Down
3 changes: 2 additions & 1 deletion src/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1009,7 +1009,8 @@
"crop_image": "Picture to crop"
},
"date-picker": {
"today": "Today"
"today": "Today",
"clear": "Clear"
},
"more_info_control": {
"dismiss": "Dismiss dialog",
Expand Down

0 comments on commit 3e3c3d5

Please sign in to comment.