spinnerを追加

diff --git a/src/components/spinner.vue b/src/components/spinner.vue
new file mode 100644 (file)
index 0000000..b0591e9
--- /dev/null
+++ b/src/components/spinner.vue
@@ -0,0 +1,70 @@
+<template>
+  <transition name="spinnerPanel">
+    <div class="border-white" v-if="isShow">
+      <div class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 modal-full" >
+        <div class="loader"></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+
+export default {
+  name: 'spinner',
+  props: {
+    msg: String
+  },
+  components: {
+  },
+  created() {
+    this.msgValue = this.msg
+  },
+  computed: {
+  },
+  methods: {
+    show() {
+      this.isShow = true
+    },
+    close() {
+      this.isShow = false
+    },
+    showToggle(){
+      this.isShow = !this.isShow
+    },
+  },
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.spinnerPanel-enter-active,
+.spinnerPanel-leave-active {
+  transition: opacity 0.5s;
+}
+.spinnerPanel-enter,
+.spinnerPanel-leave-to {
+  opacity: 0;
+}
+
+.loader {
+  border-top: 16px solid blue;
+  border-right: 16px solid green;
+  border-bottom: 16px solid red;
+  border-left: 16px solid pink;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

diff --git a/src/components/todoApp.vue b/src/components/todoApp.vue
index 09efb74..751f5a4 100644 (file)
--- a/src/components/todoApp.vue
+++ b/src/components/todoApp.vue
@@ -63,6 +63,8 @@
         ref="selectPanel"
         @onSelected="onSelected"/>
 
+      <spinner ref="spinner"/>
+
     </div>
   </div>
 </template>
@@ -77,6 +79,7 @@ import selectBox from '@/components/selectBox.vue'
 import todo from '@/components/todo.vue'
 import snackBar from '@/components/snackBar.vue'
 import selectPanel from '@/components/selectPanel.vue'
+import spinner from '@/components/spinner.vue'
 
 export default {
   name: 'todoApp',
@@ -85,6 +88,7 @@ export default {
     , todo
     , snackBar
     , selectPanel
+    , spinner
   },
   beforeMount() {
     this.$apollo.queries.todo_list.refetch({
@@ -129,10 +133,7 @@ export default {
   // },
   methods: {
     selectedTitle(id){
-      this.$apollo.queries.todo_list.refetch({
-        selectedHeadrId: id
-      })
-      this.selectedHeadrId = id
+      this.reFetch(id)
     },
     onSelected(head){
       this.titleName = head.name
@@ -150,7 +151,7 @@ export default {
     },
     addHeader(){
       if(_.isEmpty(this.titleName)){
-        this.$refs.snackBar.setMessageAndshow('ã\81ªã\81«ã\81\8bå\85¥ã\82\8cã\82\8dã\82\84ã\83\9cã\82±')
+        this.$refs.snackBar.setMessageAndshow('ã\82¿ã\82¤ã\83\88ã\83«ã\81\8cå\85¥ã\81£ã\81¦ã\81ªã\81\84ã\82\88ï¼\81')
         return
       }
       
@@ -262,8 +263,13 @@ export default {
       return moment(param).format("YYYY-MM-DDTHH:mm:ss.SSS")
     },
     reFetch(titleId){
+      this.$refs.spinner.show()
       this.$apollo.queries.todo_list.refetch({
         selectedHeadrId: titleId
+      }).then(() => {
+        this.selectedHeadrId = titleId
+      }).finally(() => {
+        this.$refs.spinner.close()
       })
     },
     mutateApollo(gqlMutation, variables){