Selectし、値を表示することが出来るようになった

diff --git a/src/components/todoAppJava.vue b/src/components/todoAppJava.vue
index 6a2bad6..8b64d07 100644 (file)
--- a/src/components/todoAppJava.vue
+++ b/src/components/todoAppJava.vue
@@ -33,8 +33,7 @@
       </div>
       <div class="py-10 px-5 rounded-md shadow-lg">
         <div>Todo リスト</div>
-        <div v-if="loading()">Loading...</div>
-        <div v-else class="py-1" v-for="list in todo_list" :key="list.id">
+        <div class="py-1" v-for="list in todo_list" :key="list.id">
           <todo :data="list"
                 @onCheckChange="onCheckChange"
                 @onTextChange="onTextChange"
@@ -90,11 +89,8 @@ export default {
     , selectPanel
     , spinner
   },
-  beforeMount() {
-    this.$store.dispatch('test');
-    this.$apollo.queries.todo_list.refetch({
-        selectedHeadrId: 0
-    })
+  mounted() {
+    this.reFetch(0)
   },
   computed: {
     // 選択中のオプションオブジェクト。任意入力値の場合は null を返す
@@ -144,10 +140,7 @@ export default {
       if(this.selectedOption){
         this.selectedTitle(this.selectedOption.id)
       } else {
-        this.$apollo.queries.todo_list.refetch({
-          selectedHeadrId: 0
-        })
-        this.selectedHeadrId = 0
+        this.reFetch(0)
       }
     },
     addHeader(){
@@ -162,9 +155,10 @@ export default {
     },
     searchHeader(){
       this.$refs.spinner.show()
-      this.$apollo.queries.todo_header.refetch()
-      .then(() => {
-          this.$refs.selectPanel.show()
+      this.$store.dispatch('findHeaders')
+      .then((result) => {
+        this.todo_header = result
+        this.$refs.selectPanel.show()
       }).catch((error) => {
         this.$refs.snackBar.setMessageAndshow('db error?')
         console.error(error)
@@ -265,9 +259,6 @@ export default {
         this.$refs.spinner.close()
       })
     },
-    loading(){
-      return this.$apollo.queries.todo_list.loading
-    },
     getNowFormatted(){
       return this.formattedData()
     },
@@ -276,10 +267,13 @@ export default {
     },
     reFetch(titleId){
       this.$refs.spinner.show()
-      this.$apollo.queries.todo_list.refetch({
-        selectedHeadrId: titleId
-      }).then(() => {
+      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()
       })
@@ -301,6 +295,8 @@ export default {
   },
   data() {
     return {
+      todo_header: [],
+      todo_list: [],
       selectedHeadrId: 0,
       titleName: '',
       snackText: '',
@@ -308,22 +304,6 @@ export default {
   },
   apollo: {
     // Simple query that will update the 'hello' vue property
-    todo_header: gql`query {
-        todo_header {
-        id
-        name
-      }
-    }`,
-    todo_list: gql`query ($selectedHeadrId: Int){
-        todo_list (where: {header_id: {_eq: $selectedHeadrId}}, order_by: {id: asc}) {
-          created
-          done
-          header_id
-          id
-          name
-          updated
-        }
-    }`,
     todo_list_aggregate: gql`query ($selectedHeadrId: Int){
         todo_list_aggregate(where: {header_id: {_eq: $selectedHeadrId}}) {
           aggregate {

diff --git a/src/store/index.js b/src/store/index.js
index 0ac53a3..982d3da 100644 (file)
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,20 +5,34 @@ import VueAxios from 'vue-axios'
 
 Vue.use(Vuex, VueAxios, axios)
 
+const context = 'http://localhost:19080/todo/api'
+
 export default new Vuex.Store({
   state: {
   },
   mutations: {
   },
   actions: {
-    test(){
-      axios.get('http://localhost:19080/todo/api/findHeaders')
-      .then((response) => {
-        console.error(response)
-      }).catch((error) => {
-        console.error(error)
-      });
-    }
+    findHeaders(){
+      return new Promise((resolve, reject) => {
+        axios.get(context + '/findHeaders')
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
+    findTodoLists({ commit, state }, param){ // eslint-disable-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        axios.get(context + '/getLists?headerId=' + param.headerId)
+        .then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    },
   },
   modules: {
   }