fix(document): allow saving title by pressing enter

projectcaluma · Dec 5, 2023 · 9789ed1 · 9789ed1
1 parent a302d26
commit 9789ed1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/addon/components/single-document-details.hbs b/addon/components/single-document-details.hbs
@@ -24,22 +24,24 @@
         {{set-style color=@document.category.color}}
       />
       {{#if this.editTitle}}
-        <input
-          class="uk-input uk-width-auto"
-          id="alexandria-details-title"
-          type="text"
-          placeholder={{t "alexandria.document-details.name-placeholder"}}
-          value={{@document.title}}
-          data-test-title-input
-          {{on "input" this.updateDocumentTitle}}
-        />
-        <button
-          class="uk-icon-button uk-margin-small-left {{unless this.validTitle 'uk-disabled'}} cursor-pointer"
-          uk-icon="icon: check"
-          type="button"
-          data-test-save
-          {{on "click" (perform this.saveDocument)}}
-        ></button>
+        <form {{on "submit" (perform this.saveDocument)}}>
+          <input
+            class="uk-input uk-width-auto {{unless this.validTitle "uk-form-danger"}}"
+            id="alexandria-details-title"
+            type="text"
+            placeholder={{t "alexandria.document-details.title-placeholder"}}
+            value={{@document.title}}
+            data-test-title-input
+            {{on "input" this.updateDocumentTitle}}
+          />
+          <button
+            class="uk-icon-button uk-margin-small-left cursor-pointer"
+            disabled={{not this.validTitle}}
+            uk-icon="icon: check"
+            type="submit"
+            data-test-save
+          ></button>
+        </form>
       {{else}}
         <span data-test-title>{{@document.title}}</span>
       {{/if}}

diff --git a/addon/components/single-document-details.js b/addon/components/single-document-details.js
@@ -63,7 +63,9 @@ export default class SingleDocumentDetailsComponent extends DocumentCard {
     this.documents.enableShortcuts();
   }
 
-  @restartableTask *saveDocument() {
+  @restartableTask *saveDocument(event) {
+    event?.preventDefault();
+
     try {
       yield this.args.document.save();
       this.resetState();

diff --git a/tests/integration/components/single-document-details-test.js b/tests/integration/components/single-document-details-test.js
@@ -106,7 +106,7 @@ module("Integration | Component | single-document-details", function (hooks) {
 
     await fillIn("[data-test-title-input]", "");
     assert.dom("[data-test-title-input]").hasValue("");
-    assert.dom("[data-test-save]").hasClass("uk-disabled");
+    assert.dom("[data-test-save]").isDisabled();
 
     await fillIn("[data-test-title-input]", "edited");
     assert.dom("[data-test-title-input]").hasValue("edited");

diff --git a/translations/de.yaml b/translations/de.yaml
@@ -59,7 +59,7 @@ alexandria:
     document-date: "Dokumentendatum"
     metadata: "Metadaten"
     document-description: "Dokumentenbeschreibung"
-    name-placeholder: "Name..."
+    title-placeholder: "Titel..."
     version-history: "Versionsgeschichte"
     add-description: "Beschreibung hinzufügen"
     add-date: "Datum hinzufügen"

diff --git a/translations/en.yaml b/translations/en.yaml
@@ -59,7 +59,7 @@ alexandria:
     document-date: "Document date"
     metadata: "Metadata"
     document-description: "Document description"
-    name-placeholder: "Name..."
+    title-placeholder: "Title..."
     version-history: "Version history"
     add-description: "Add description"
     add-date: "Add date"