ある程度完成

diff --git a/src/components/todoApp.vue b/src/components/todoApp.vue
index 6cb2fc3..5f1fbe0 100644 (file)
--- a/src/components/todoApp.vue
+++ b/src/components/todoApp.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="bg-gray-50">
+    <div class="text-center items-center justify-center">Todo GraphQl(Hasura)版</div>
     <div class="max-w-xl mx-auto py-1 divide-y md:max-w-4xl">
       <div class="py-10 px-5 rounded-md shadow-lg">
         <div>Todo タイトル</div>
@@ -71,7 +72,7 @@
 <script>
 
 import moment from 'moment'
-import _ from 'lodash' // eslint-disable-line no-unused-vars
+import _ from 'lodash'
 //import { useQuery, useResult } from '@vue/apollo-composable' // eslint-disable-line no-unused-vars
 import gql from 'graphql-tag'
 import selectBox from '@/components/selectBox.vue'

diff --git a/src/components/todoAppJava.vue b/src/components/todoAppJava.vue
index 8b64d07..2ddcfd1 100644 (file)
--- a/src/components/todoAppJava.vue
+++ b/src/components/todoAppJava.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="bg-gray-50">
+    <div class="text-center items-center justify-center">Todo Java版</div>
     <div class="max-w-xl mx-auto py-1 divide-y md:max-w-4xl">
       <div class="py-10 px-5 rounded-md shadow-lg">
         <div>Todo タイトル</div>
@@ -71,9 +72,7 @@
 <script>
 
 import moment from 'moment'
-import _ from 'lodash' // eslint-disable-line no-unused-vars
-//import { useQuery, useResult } from '@vue/apollo-composable' // eslint-disable-line no-unused-vars
-import gql from 'graphql-tag'
+import _ from 'lodash'
 import selectBox from '@/components/selectBox.vue'
 import todo from '@/components/todo.vue'
 import snackBar from '@/components/snackBar.vue'
@@ -174,42 +173,29 @@ export default {
       this.updateMutate(data);
     },
     updateMutate(data){
-      const UPDATE_DONE = gql`mutation updateTodoMutation($header_id: Int!, $id: Int!, $done: Boolean = false, $name: String = "", $updated: timestamp = "") {
-                                        update_todo_list_by_pk(pk_columns: {header_id: $header_id, id: $id}, _set: {updated: $updated, name: $name, done: $done}) {
-                                          id
-                                          header_id
-                                        }
-                                      }`
       this.$refs.spinner.show()
-      this.$apollo.mutate({
-            mutation: UPDATE_DONE,
-            variables: {
-                        header_id: data.header_id
+      this.$store.dispatch('updateTodoList', {
+                        headerId: data.headerId
                         , id: data.id
                         , done: data.done
                         , name: data.name
                         , updated: this.getNowFormatted()
-                      }
-          })
-      .catch((error) => {
-        this.$refs.snackBar.setMessageAndshow('update error!')
+      }).then(() => {
+        return this.reFetchPromise(this.selectedHeadrId)
+      }).catch((error) => {
+        this.$refs.snackBar.setMessageAndshow('delete error!')
         console.error(error)
       }).finally(() => {
         this.$refs.spinner.close()
       })
     },
     onDelete(data){
-      const DELETE_TODO = gql`mutation deleteTodoMutation($header_id: Int!, $id: Int!) {
-                                        delete_todo_list_by_pk(id: $id, header_id: $header_id) {
-                                          header_id
-                                          id
-                                        }
-                                      }`
-      this.$refs.spinner.show()
-      this.mutateApollo(DELETE_TODO, {
-                        header_id: data.header_id
+      this.$store.dispatch('deleteTodoList', {
+                        headerId: data.headerId
                         , id: data.id
-       }).catch((error) => {
+      }).then(() => {
+        return this.reFetchPromise(this.selectedHeadrId)
+      }).catch((error) => {
         this.$refs.snackBar.setMessageAndshow('delete error!')
         console.error(error)
       }).finally(() => {
@@ -224,34 +210,19 @@ export default {
         return
       }
       
-      const CREATE_TODO = gql`mutation createTodoMutation($header_id: Int!, 
-                                                  $id: Int!, 
-                                                  $done: Boolean = false, 
-                                                  $name: String = "", 
-                                                  $created: timestamp = "", 
-                                                  $updated: timestamp = "") {
-                                insert_todo_list_one(object: {header_id: $header_id, id: $id, done: $done, name: $name, created: $created, updated: $updated}) {
-                                  header_id
-                                  id
-                                  done
-                                  name
-                                  created
-                                  updated
-                                }
-                              }`
-
       this.$refs.spinner.show()
-      this.$apollo.queries.todo_list_aggregate.refetch({
-          selectedHeadrId: this.selectedHeadrId
-      }).then(() => {
-        return this.mutateApollo(CREATE_TODO, {
-                        header_id:this.selectedHeadrId
-                        , id:this.todo_list_aggregate.aggregate.max.id + 1
+      this.$store.dispatch('getMaxId', { headerId: this.selectedHeadrId})
+      .then((result) => {
+        return this.$store.dispatch('createTodoList', {
+                        headerId:this.selectedHeadrId
+                        , id:result + 1
                         , done: false
                         , name: ""
                         , created: now
                         , updated: now
-                      });
+                      })
+      }).then(() => {
+        return this.reFetchPromise(this.selectedHeadrId)
       }).catch((error) => {
         this.$refs.snackBar.setMessageAndshow('add error!')
         console.error(error)
@@ -267,15 +238,19 @@ export default {
     },
     reFetch(titleId){
       this.$refs.spinner.show()
-      this.$store.dispatch('findTodoLists', { headerId: titleId })
+      this.reFetchPromise(titleId)
+      .finally(() => {
+        this.$refs.spinner.close()
+      })
+    },
+    reFetchPromise(titleId){
+      return this.$store.dispatch('findTodoLists', { headerId: titleId })
       .then((result) => {
         this.todo_list = result
         this.selectedHeadrId = titleId
       }).catch((error) => {
         this.$refs.snackBar.setMessageAndshow('db error?')
         console.error(error)
-      }).finally(() => {
-        this.$refs.spinner.close()
       })
     },
     mutateApollo(gqlMutation, variables){
@@ -302,19 +277,6 @@ export default {
       snackText: '',
     }
   },
-  apollo: {
-    // Simple query that will update the 'hello' vue property
-    todo_list_aggregate: gql`query ($selectedHeadrId: Int){
-        todo_list_aggregate(where: {header_id: {_eq: $selectedHeadrId}}) {
-          aggregate {
-            max {
-              id
-            }
-          }
-        }
-    }`,
-    
-  },
 }
 </script>
 

diff --git a/src/store/index.js b/src/store/index.js
index 982d3da..e105514 100644 (file)
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -33,6 +33,46 @@ export default new Vuex.Store({
         })
       })
     },
+    getMaxId({ commit, state }, param){ // eslint-disable-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        axios.get(context + '/getMaxId?headerId=' + param.headerId)
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
+    createTodoList({ commit, state }, param){ // eslint-disable-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        axios.post(context + '/createTodoList', param)
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
+    deleteTodoList({ commit, state }, param){ // eslint-disable-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        axios.post(context + '/deleteTodoList', param)
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
+    updateTodoList({ commit, state }, param){ // eslint-disable-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        axios.post(context + '/updateTodoList', param)
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
   },
   modules: {
   }