Expose completed timestamp for TodoItem (#27943)

src/data/todo.ts

@@ -28,6 +28,7 @@ export interface TodoItem {
   status: TodoItemStatus | null;
   description?: string | null;
   due?: string | null;
+  completed?: string | null;
 }
 
 export const enum TodoListEntityFeature {

src/panels/todo/dialog-todo-item-editor.ts

@@ -26,6 +26,7 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { TodoItemEditDialogParams } from "./show-dialog-todo-item-editor";
 import { supportsMarkdownHelper } from "../../common/translations/markdown_support";
+import { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
 
 @customElement("dialog-todo-item-editor")
 class DialogTodoItemEditor extends LitElement {
@@ -41,6 +42,8 @@ class DialogTodoItemEditor extends LitElement {
 
   @state() private _due?: Date;
 
+  @state() private _completedTime?: Date;
+
   @state() private _checked = false;
 
   @state() private _hasTime = false;
@@ -65,6 +68,9 @@ class DialogTodoItemEditor extends LitElement {
       this._checked = entry.status === TodoItemStatus.Completed;
       this._summary = entry.summary;
       this._description = entry.description || "";
+      this._completedTime = entry.completed
+        ? new Date(entry.completed)
+        : undefined;
       this._hasTime = entry.due?.includes("T") || false;
       this._due = entry.due
         ? new Date(this._hasTime ? entry.due : `${entry.due}T00:00:00`)
@@ -138,6 +144,17 @@ class DialogTodoItemEditor extends LitElement {
               .disabled=${!canUpdate}
             ></ha-textfield>
           </div>
+          ${this._completedTime
+            ? html`<div class="italic">
+                ${this.hass.localize("ui.components.todo.item.completed_time", {
+                  datetime: formatShortDateTimeWithConditionalYear(
+                    this._completedTime,
+                    this.hass.locale,
+                    this.hass.config
+                  ),
+                })}
+              </div>`
+            : nothing}
           ${this._todoListSupportsFeature(
             TodoListEntityFeature.SET_DESCRIPTION_ON_ITEM
           )
@@ -455,6 +472,9 @@ class DialogTodoItemEditor extends LitElement {
           display: inline-block;
           vertical-align: top;
         }
+        .italic {
+          font-style: italic;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -1130,6 +1130,7 @@
           "edit": "Edit item",
           "save": "Save item",
           "due": "Due date",
+          "completed_time": "Completed { datetime }",
           "not_all_required_fields": "Not all required fields are filled in",
           "confirm_delete": {
             "delete": "Delete item",