feat(table): show spinner while saving

projectcaluma · May 8, 2019 · fe4fc33 · fe4fc33
1 parent 3a2a3df
commit fe4fc33
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 42 deletions.
diff --git a/addon/components/cf-field/input/table.js b/addon/components/cf-field/input/table.js
@@ -56,52 +56,53 @@ export default Component.extend(ComponentQueryManager, {
     this.set("field.answer.rowDocuments", remainingDocuments);
   }),
 
-  actions: {
-    async save() {
-      try {
-        const newDocument = this.get("documentToEdit");
-        await all(newDocument.fields.map(f => f.validate.perform()));
-        if (newDocument.fields.map(f => f.errors).flat().length) {
-          return;
-        }
+  save: task(function*() {
+    try {
+      const newDocument = this.get("documentToEdit");
+      yield all(newDocument.fields.map(f => f.validate.perform()));
+      if (newDocument.fields.map(f => f.errors).flat().length) {
+        return;
+      }
 
-        const rows = this.getWithDefault("field.answer.rowDocuments", []);
-
-        if (!rows.find(doc => doc.id === newDocument.id)) {
-          // add document to table
-          await this.get("apollo").mutate({
-            mutation: saveDocumentTableAnswerMutation,
-            variables: {
-              input: {
-                question: this.get("field.question.slug"),
-                document: this.get("field.document.id"),
-                value: [
-                  ...this.getWithDefault("field.answer.rowDocuments", []).map(
-                    doc => doc.id
-                  ),
-                  newDocument.id
-                ]
-              }
+      const rows = this.getWithDefault("field.answer.rowDocuments", []);
+
+      if (!rows.find(doc => doc.id === newDocument.id)) {
+        // add document to table
+        yield this.get("apollo").mutate({
+          mutation: saveDocumentTableAnswerMutation,
+          variables: {
+            input: {
+              question: this.get("field.question.slug"),
+              document: this.get("field.document.id"),
+              value: [
+                ...this.getWithDefault("field.answer.rowDocuments", []).map(
+                  doc => doc.id
+                ),
+                newDocument.id
+              ]
             }
-          });
-
-          // update client-side state
-          this.set("field.answer.rowDocuments", [
-            ...(this.get("field.answer.rowDocuments") || []),
-            newDocument
-          ]);
-          this.get("notification").success(
-            this.get("intl").t("caluma.form.notification.table.add.success")
-          );
-        }
+          }
+        });
 
-        this.set("showModal", false);
-      } catch (e) {
-        this.get("notification").danger(
-          this.get("intl").t("caluma.form.notification.table.add.error")
+        // update client-side state
+        this.set("field.answer.rowDocuments", [
+          ...(this.get("field.answer.rowDocuments") || []),
+          newDocument
+        ]);
+        this.get("notification").success(
+          this.get("intl").t("caluma.form.notification.table.add.success")
         );
       }
-    },
+
+      this.set("showModal", false);
+    } catch (e) {
+      this.get("notification").danger(
+        this.get("intl").t("caluma.form.notification.table.add.error")
+      );
+    }
+  }),
+
+  actions: {
     editRow(document) {
       this.setProperties({
         documentToEdit: document,

diff --git a/addon/templates/components/cf-field/input/table.hbs b/addon/templates/components/cf-field/input/table.hbs
@@ -32,7 +32,12 @@
   {{#uk-modal visible=(and showModal documentToEdit)}}
     {{cf-form document=documentToEdit}}
     <p class="uk-text-right">
-      {{uk-button label=(t "caluma.form.save") on-click=(action "save")}}
+      {{uk-button
+        label=(t "caluma.form.save")
+        disabled=save.isRunning
+        loading=save.isRunning
+        on-click=(perform save)
+      }}
     </p>
   {{/uk-modal}}
 {{/with}}