260 lines
8.8 KiB
TypeScript
260 lines
8.8 KiB
TypeScript
/** Dialog for editing an existing history entry (timestamp / notes / cost /
|
|
* duration / completed_by). Backed by maintenance_supporter/task/history/update.
|
|
*
|
|
* Opened from:
|
|
* - Task detail page → history tab → Edit button per entry
|
|
* - Calendar past-window event click (via ll-custom dispatch from
|
|
* maintenance-supporter-calendar-card)
|
|
*/
|
|
|
|
import { LitElement, html, css, nothing } from "lit";
|
|
import { property, state } from "lit/decorators.js";
|
|
import { t } from "../styles";
|
|
import type { HomeAssistant } from "../types";
|
|
import { describeWsError } from "../ws-errors";
|
|
|
|
export interface HistoryEntryDraft {
|
|
entry_id: string;
|
|
task_id: string;
|
|
original_timestamp: string; // identifies the entry on save
|
|
type: string; // for display only — read-only
|
|
timestamp: string;
|
|
notes: string | null;
|
|
cost: number | null;
|
|
duration: number | null;
|
|
completed_by: string | null;
|
|
}
|
|
|
|
export class MaintenanceHistoryEditDialog extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@state() private _open = false;
|
|
@state() private _saving = false;
|
|
@state() private _error = "";
|
|
@state() private _draft: HistoryEntryDraft | null = null;
|
|
|
|
// Original snapshot so we can detect "no change" and skip the WS call
|
|
private _originalSnapshot: HistoryEntryDraft | null = null;
|
|
|
|
private get _lang(): string {
|
|
return this.hass?.language || "en";
|
|
}
|
|
|
|
/** Open the dialog with the given history-entry data. The caller must
|
|
* pass `original_timestamp` (the entry's current timestamp before edit)
|
|
* so the backend can find the entry. */
|
|
public openEdit(draft: HistoryEntryDraft): void {
|
|
this._draft = { ...draft };
|
|
this._originalSnapshot = { ...draft };
|
|
this._error = "";
|
|
this._open = true;
|
|
}
|
|
|
|
public close(): void {
|
|
this._open = false;
|
|
this._error = "";
|
|
this._draft = null;
|
|
this._originalSnapshot = null;
|
|
}
|
|
|
|
private _set<K extends keyof HistoryEntryDraft>(
|
|
key: K, value: HistoryEntryDraft[K],
|
|
): void {
|
|
if (!this._draft) return;
|
|
this._draft = { ...this._draft, [key]: value };
|
|
}
|
|
|
|
private async _save(): Promise<void> {
|
|
if (!this._draft || !this._originalSnapshot) return;
|
|
this._saving = true;
|
|
this._error = "";
|
|
try {
|
|
const patch: Record<string, unknown> = {
|
|
type: "maintenance_supporter/task/history/update",
|
|
entry_id: this._draft.entry_id,
|
|
task_id: this._draft.task_id,
|
|
original_timestamp: this._originalSnapshot.original_timestamp,
|
|
};
|
|
// Only send fields that actually changed — keeps the patch minimal
|
|
// and the WS schema happy (it treats missing as "no change").
|
|
if (this._draft.timestamp !== this._originalSnapshot.timestamp) {
|
|
patch.timestamp = this._draft.timestamp;
|
|
}
|
|
if (this._draft.notes !== this._originalSnapshot.notes) {
|
|
patch.notes = this._draft.notes;
|
|
}
|
|
if (this._draft.cost !== this._originalSnapshot.cost) {
|
|
patch.cost = this._draft.cost;
|
|
}
|
|
if (this._draft.duration !== this._originalSnapshot.duration) {
|
|
patch.duration = this._draft.duration;
|
|
}
|
|
if (this._draft.completed_by !== this._originalSnapshot.completed_by) {
|
|
patch.completed_by = this._draft.completed_by;
|
|
}
|
|
// Nothing changed → close without WS call
|
|
const changedKeys = Object.keys(patch).filter(
|
|
(k) => !["type", "entry_id", "task_id", "original_timestamp"].includes(k),
|
|
);
|
|
if (changedKeys.length === 0) {
|
|
this.close();
|
|
return;
|
|
}
|
|
await this.hass.connection.sendMessagePromise(patch);
|
|
// Notify upstream so they can refresh
|
|
this.dispatchEvent(
|
|
new CustomEvent("history-entry-saved", {
|
|
detail: {
|
|
entry_id: this._draft.entry_id,
|
|
task_id: this._draft.task_id,
|
|
new_timestamp: this._draft.timestamp,
|
|
},
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
this.close();
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
} finally {
|
|
this._saving = false;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (!this._open || !this._draft) return nothing;
|
|
const L = this._lang;
|
|
const d = this._draft;
|
|
return html`
|
|
<div class="backdrop" @click=${this.close}></div>
|
|
<div class="dialog" role="dialog" aria-modal="true">
|
|
<h2>${t("history_edit_title", L) || "Edit history entry"}</h2>
|
|
<div class="entry-type">
|
|
<ha-icon icon="mdi:tag-outline"></ha-icon>
|
|
<span>${t(d.type, L) || d.type}</span>
|
|
</div>
|
|
<label>
|
|
<span>${t("history_edit_timestamp", L) || "Timestamp"}</span>
|
|
<input type="datetime-local"
|
|
.value=${d.timestamp.length >= 16 ? d.timestamp.slice(0, 16) : d.timestamp}
|
|
@change=${(e: Event) => {
|
|
const v = (e.target as HTMLInputElement).value;
|
|
// Re-add seconds if input drops them
|
|
this._set("timestamp", v.length === 16 ? `${v}:00` : v);
|
|
}} />
|
|
</label>
|
|
<label>
|
|
<span>${t("notes_label", L)}</span>
|
|
<textarea
|
|
rows="3"
|
|
@input=${(e: Event) => {
|
|
const v = (e.target as HTMLTextAreaElement).value;
|
|
this._set("notes", v ? v : null);
|
|
}}
|
|
.value=${d.notes ?? ""}></textarea>
|
|
</label>
|
|
<div class="row">
|
|
<label>
|
|
<span>${t("cost", L) || "Cost"}</span>
|
|
<input type="number" min="0" step="0.01"
|
|
.value=${d.cost != null ? String(d.cost) : ""}
|
|
@input=${(e: Event) => {
|
|
const v = (e.target as HTMLInputElement).value;
|
|
this._set("cost", v ? Number(v) : null);
|
|
}} />
|
|
</label>
|
|
<label>
|
|
<span>${t("duration", L) || "Duration (min)"}</span>
|
|
<input type="number" min="0"
|
|
.value=${d.duration != null ? String(d.duration) : ""}
|
|
@input=${(e: Event) => {
|
|
const v = (e.target as HTMLInputElement).value;
|
|
this._set("duration", v ? Number(v) : null);
|
|
}} />
|
|
</label>
|
|
</div>
|
|
${this._error ? html`<div class="error">${this._error}</div>` : nothing}
|
|
<div class="actions">
|
|
<button class="cancel" @click=${this.close} ?disabled=${this._saving}>
|
|
${t("cancel", L) || "Cancel"}
|
|
</button>
|
|
<button class="save" @click=${this._save} ?disabled=${this._saving}>
|
|
${this._saving ? (t("saving", L) || "Saving…") : (t("save", L) || "Save")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static styles = css`
|
|
:host { display: contents; }
|
|
.backdrop {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 100;
|
|
}
|
|
.dialog {
|
|
position: fixed; left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 95vw; max-width: 480px;
|
|
background: var(--card-background-color, var(--ha-card-background, #1c1c1c));
|
|
color: var(--primary-text-color);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
|
|
padding: 20px;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
z-index: 101;
|
|
max-height: 90vh; overflow: auto;
|
|
}
|
|
h2 { margin: 0; font-size: 18px; }
|
|
.entry-type {
|
|
display: flex; align-items: center; gap: 6px;
|
|
color: var(--secondary-text-color); font-size: 13px;
|
|
}
|
|
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
|
|
label span { color: var(--secondary-text-color); }
|
|
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
input, textarea {
|
|
padding: 8px; font-size: 14px;
|
|
background: var(--secondary-background-color, #2c2c2c);
|
|
color: var(--primary-text-color);
|
|
border: 1px solid var(--divider-color, #444);
|
|
border-radius: 6px;
|
|
width: 100%; box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
.actions {
|
|
display: flex; gap: 8px; justify-content: flex-end;
|
|
margin-top: 8px;
|
|
}
|
|
button {
|
|
padding: 8px 16px; font-size: 14px;
|
|
border-radius: 6px; cursor: pointer;
|
|
border: none; font-weight: 500;
|
|
}
|
|
button.cancel {
|
|
background: transparent;
|
|
color: var(--primary-text-color);
|
|
border: 1px solid var(--divider-color);
|
|
}
|
|
button.save {
|
|
background: var(--primary-color);
|
|
color: var(--text-primary-color, white);
|
|
}
|
|
button[disabled] { opacity: 0.5; cursor: wait; }
|
|
.error {
|
|
color: var(--error-color, #d32f2f);
|
|
font-size: 13px; padding: 8px;
|
|
background: rgba(211,47,47,0.1);
|
|
border-radius: 6px;
|
|
}
|
|
`;
|
|
}
|
|
|
|
if (!customElements.get("maintenance-history-edit-dialog")) {
|
|
customElements.define(
|
|
"maintenance-history-edit-dialog",
|
|
MaintenanceHistoryEditDialog,
|
|
);
|
|
}
|