331 files

custom_components/maintenance_supporter/frontend-src/components/complete-dialog.ts

@@ -14,6 +14,7 @@ import { REQUIRED_COMPLETION_LABELS } from "./required-completion-labels";
 import { PhotoUploadController } from "../helpers/photo-upload-controller";
 import { parseDurationMinutes } from "../helpers/duration";
 import "./ms-date-field";
+import "./ms-cost-input";
 import "./ms-photo-picker";
 import { photoPickerStyles } from "./ms-photo-picker";
 
@@ -173,10 +174,14 @@ export class MaintenanceCompleteDialog extends LitElement {
       entry_id: this.entryId,
       task_id: this.taskId,
     };
-    if (this._notes) data.notes = this._notes;
+    // Trimmed like the required check reads it: a text area easily keeps a
+    // trailing line break, which the history would show as an empty line.
+    const notes = this._notes.trim();
+    if (notes) data.notes = notes;
     if (this._cost) {
+      // #200: a credit is negative; the server holds the bounds.
       const cost = parseFloat(this._cost);
-      if (!isNaN(cost) && cost >= 0) data.cost = cost;
+      if (!isNaN(cost)) data.cost = cost;
     }
     // Whole minutes — the server coerces to int (helpers/duration).
     const dur = parseDurationMinutes(this._duration);
@@ -309,9 +314,15 @@ export class MaintenanceCompleteDialog extends LitElement {
     return this.requiredFields.filter((f) => !filled[f]);
   }
 
+  /** Does the task demand this detail? Its label then drops "(optional)" —
+   *  "Notes (optional) *" contradicted itself. */
+  private _demands(field: string): boolean {
+    return this.requiredFields.includes(field);
+  }
+
   /** Marker appended to a required field's label. */
   private _req(field: string) {
-    return this.requiredFields.includes(field) ? html`<span class="req-mark" aria-hidden="true">*</span>` : nothing;
+    return this._demands(field) ? html`<span class="req-mark" aria-hidden="true">*</span>` : nothing;
   }
 
   /** A buy task's price: restock qty (packages) × the part's price per
@@ -485,20 +496,22 @@ export class MaintenanceCompleteDialog extends LitElement {
                only sees the title + Cancel/Complete buttons — the original
                bug report. Native inputs always render. -->
           <label class="field">
-            <span class="field-label">${t("notes_optional", L)}${this._req("notes")}</span>
-            <input type="text" class="field-input"
+            <span class="field-label">${this._demands("notes") ? t("notes_label", L) : t("notes_optional", L)}${this._req("notes")}</span>
+            <!-- Several lines (#202): what was done, one line each. The
+                 history and the printouts keep the line breaks; they show
+                 notes as plain text, so no Markdown hint here. -->
+            <textarea class="field-input notes-input" rows="3"
               .value=${this._notes}
-              @input=${(e: Event) => (this._notes = (e.target as HTMLInputElement).value)} />
+              @input=${(e: Event) => (this._notes = (e.target as HTMLTextAreaElement).value)}></textarea>
           </label>
-          <label class="field">
-            <span class="field-label">${t("cost_optional", L)}${this._req("cost")}</span>
-            <input type="number" step="0.01" min="0" class="field-input"
-              .value=${this._cost}
-              @input=${(e: Event) => (this._cost = (e.target as HTMLInputElement).value)} />
+          <div class="field">
+            <span class="field-label">${this._demands("cost") ? t("cost", L) : t("cost_optional", L)}${this._req("cost")}</span>
+            <ms-cost-input .lang=${L} .value=${this._cost}
+              @value-changed=${(e: CustomEvent<{ value: string }>) => (this._cost = e.detail.value)}></ms-cost-input>
             ${this._renderCostSuggestion(L)}
-          </label>
+          </div>
           <label class="field">
-            <span class="field-label">${t("duration_minutes", L)}${this._req("duration")}</span>
+            <span class="field-label">${this._demands("duration") ? t("quick_complete_defaults_duration", L) : t("duration_minutes", L)}${this._req("duration")}</span>
             <input type="number" step="1" min="0" inputmode="numeric" class="field-input"
               .value=${this._duration}
               @input=${(e: Event) => (this._duration = (e.target as HTMLInputElement).value)} />
@@ -519,7 +532,7 @@ export class MaintenanceCompleteDialog extends LitElement {
                 </button>`}
           </div>
           <div class="field">
-            <span class="field-label">${t("completion_photos_optional", L)}${this._req("photo")}</span>
+            <span class="field-label">${this._demands("photo") ? t("completion_photos", L) : t("completion_photos_optional", L)}${this._req("photo")}</span>
             ${this._photos.photos.length > 0
               ? html`<div class="photo-strip">
                   ${this._photos.photos.map((p) => html`
@@ -582,6 +595,7 @@ export class MaintenanceCompleteDialog extends LitElement {
       margin-left: 2px;
       font-weight: 600;
     }
+    .notes-input { resize: vertical; line-height: 1.4; }
     /* #104: one-click cost suggestion from parts — quiet link-style chip. */
     .cost-note {
       font-size: 12px;