show progress when api calling

Author: tokibito

note_client/src/components/Note.vue

@@ -55,6 +55,17 @@
     centered>
     削除してもよろしいですか？
   </b-modal>
+  <b-modal
+    ref="progressModal"
+    hide-header
+    hide-footer
+    no-fade
+    no-close-on-backdrop
+    no-close-on-esc
+    centered>
+    {{ message }}
+    <b-progress :value="10" :max="10" animated></b-progress>
+  </b-modal>
 </div>
 </template>
 
@@ -75,6 +86,13 @@ module.exports = {
       this.message = message
       this.$refs.errorModal.show()
     },
+    showProgress(message) {
+      this.message = message
+      this.$refs.progressModal.show()
+    },
+    hideProgress() {
+      this.$refs.progressModal.hide()
+    },
     selectPage(page) {
       let result, message
       [result, message] = this.controller.selectPage(page)
@@ -83,18 +101,27 @@ module.exports = {
       }
     },
     save() {
-      let result, message
-      [result, message] = this.controller.save(
+      let result, message, promise
+      [result, message, promise] = this.controller.save(
         csrfToken.getCsrfTokenFromCookie(document.cookie))
       if (!result) {
         this.showError(message)
+      } else {
+        this.showProgress(message)
+        promise.then(this.hideProgress)
       }
     },
     revert() {
       this.controller.revert()
     },
     destroy() {
-      this.controller.destroy(csrfToken.getCsrfTokenFromCookie(document.cookie))
+      let result, message, promise
+      [result, message, promise] = this.controller.destroy(
+        csrfToken.getCsrfTokenFromCookie(document.cookie))
+      if (result && promise) {
+        this.showProgress(message)
+        promise.then(this.hideProgress)
+      }
     },
     create() {
       this.controller.create()

note_client/src/controller/note.js

@@ -32,13 +32,13 @@ class NoteController {
 
   save(csrfToken=null) {
     if (!this.selectedPage.title || !this.selectedPage.content) {
-      return [false, "タイトルと内容は必須です。"]
+      return [false, "タイトルと内容は必須です。", null]
     }
-    this.pageApi.save(this.selectedPage, csrfToken)
+    let promise = this.pageApi.save(this.selectedPage, csrfToken)
     .then((instance) => {
       Object.assign(this.selectedPage, instance)
     })
-    return [true, null]
+    return [true, "保存しています...", promise]
   }
 
   revert() {
@@ -51,13 +51,14 @@ class NoteController {
     if (this.selectedPage.id == null) {
       this.pages.pop()
       this.selectedPage = null
-      return
+      return [true, null, null]
     }
-    this.pageApi.destroy(this.selectedPage, csrfToken)
+    let promise = this.pageApi.destroy(this.selectedPage, csrfToken)
     .then(() => {
       this.selectedPage = null
       this.load()
     })
+    return [true, "削除しています...", promise]
   }
 
   create(csrfToken=null) {