src/components/todoAppJava.vue

   1 <template>
   2   <div class="bg-gray-50">
   3     <div class="max-w-xl mx-auto py-1 divide-y md:max-w-4xl">
   4       <div class="py-10 px-5 rounded-md shadow-lg">
   5         <div>Todo タイトル</div>
   6         <input type="text"
   7               list="todo_header"
   8               v-model="titleName"
   9               @input="onHeaderChange"
  10               class="w-10/12 px-1 py-2 mb-1 border-b border-gray-500 focus:outline-none focus:border-indigo-500 transition-colors text-gray-900" />
  11         <button class="bg-gray-200 w-12 h-12 px-3 py-2 mb-1 ml-0 text-sm font-bold tracking-wider text-gray hover:bg-gray-400 inline-flex items-center justify-center"
  12           @click="searchHeader">
  13           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16">
  14             <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
  15           </svg>
  16         </button>
  17         <button class="bg-blue-500 w-10 h-10 p-3 ml-3 text-sm font-bold tracking-wider text-white rounded-full hover:bg-red-600 inline-flex items-center justify-center"
  18           v-if="selectedOption == null"
  19           @click="addHeader">
  20           <svg xmlns="http://www.w3.org/2000/svg" class="fill-current" viewBox="0 0 24 24">
  21             <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
  22           </svg>
  23         </button>
  24         <button class="bg-blue-500 w-10 h-10 p-3 ml-3 text-sm font-bold tracking-wider text-white rounded-full hover:bg-red-600 inline-flex items-center justify-center"
  25           v-else
  26           @click="deleteHeader">
  27           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
  28             <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
  29             <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
  30           </svg>
  31         </button>
  32
  33       </div>
  34       <div class="py-10 px-5 rounded-md shadow-lg">
  35         <div>Todo リスト</div>
  36         <div v-if="loading()">Loading...</div>
  37         <div v-else class="py-1" v-for="list in todo_list" :key="list.id">
  38           <todo :data="list"
  39                 @onCheckChange="onCheckChange"
  40                 @onTextChange="onTextChange"
  41                 @onDelete="onDelete"/>
  42         </div>
  43         <div class="py-5">
  44           <button
  45                 class="p-0 w-10 h-10 bg-blue-600 rounded-full hover:bg-blue-700 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none"
  46                 @click="onAdd"
  47                 v-if="selectedHeadrId != 0">
  48             <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
  49               <path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
  50                                       C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
  51                                       C15.952,9,16,9.447,16,10z" />
  52             </svg>
  53           </button>
  54         </div>
  55       </div>
  56
  57       <select-box/>
  58
  59       <snack-bar :msg="snackText" ref="snackBar"/>
  60       <select-panel
  61         :dataList="todo_header"
  62         title="Todoリスト選択"
  63         ref="selectPanel"
  64         @onSelected="onSelected"/>
  65
  66       <spinner ref="spinner"/>
  67
  68     </div>
  69   </div>
  70 </template>
  71
  72 <script>
  73
  74 import moment from 'moment'
  75 import _ from 'lodash' // eslint-disable-line no-unused-vars
  76 //import { useQuery, useResult } from '@vue/apollo-composable' // eslint-disable-line no-unused-vars
  77 import gql from 'graphql-tag'
  78 import selectBox from '@/components/selectBox.vue'
  79 import todo from '@/components/todo.vue'
  80 import snackBar from '@/components/snackBar.vue'
  81 import selectPanel from '@/components/selectPanel.vue'
  82 import spinner from '@/components/spinner.vue'
  83
  84 export default {
  85   name: 'todoApp',
  86   components: {
  87     selectBox
  88     , todo
  89     , snackBar
  90     , selectPanel
  91     , spinner
  92   },
  93   beforeMount() {
  94     this.$store.dispatch('test');
  95     this.$apollo.queries.todo_list.refetch({
  96         selectedHeadrId: 0
  97     })
  98   },
  99   computed: {
 100     // 選択中のオプションオブジェクト。任意入力値の場合は null を返す
 101     selectedOption() {
 102       if(!this.todo_header){
 103         return null
 104       }
 105       const selected = this.todo_header.find(item => item.name === this.titleName)
 106       return selected || null
 107     }
 108   },
 109   //Vue2.6なのでsetupが…
 110   // setup() {
 111   //   // const { result, loading, error, refetch } = useQuery(gql`
 112   //   //   query todo_header {
 113   //   //     todo_header {
 114   //   //       id
 115   //   //       name
 116   //   //     }
 117   //   //   }
 118   //   // `)
 119
 120   //   // const users = useResult(result)
 121
 122   //   // return {
 123   //   //   users,
 124   //   //   loading,
 125   //   //   error,
 126   //   //   refetch,
 127   //   // }
 128   //   onBeforeMount(() => {
 129   //     console.log('Component is onBeforeMount!')
 130   //     // this.$apollo.queries.todo_list.refetch({
 131   //     //   selectedHeadrId: 0
 132   //     // })
 133   //   })
 134   // },
 135   methods: {
 136     selectedTitle(id){
 137       this.reFetch(id)
 138     },
 139     onSelected(head){
 140       this.titleName = head.name
 141       this.selectedTitle(head.id)
 142     },
 143     onHeaderChange() {
 144       if(this.selectedOption){
 145         this.selectedTitle(this.selectedOption.id)
 146       } else {
 147         this.$apollo.queries.todo_list.refetch({
 148           selectedHeadrId: 0
 149         })
 150         this.selectedHeadrId = 0
 151       }
 152     },
 153     addHeader(){
 154       if(_.isEmpty(this.titleName)){
 155         this.$refs.snackBar.setMessageAndshow('タイトルが入ってないよ！')
 156         return
 157       }
 158
 159     },
 160     deleteHeader(){
 161
 162     },
 163     searchHeader(){
 164       this.$refs.spinner.show()
 165       this.$apollo.queries.todo_header.refetch()
 166       .then(() => {
 167           this.$refs.selectPanel.show()
 168       }).catch((error) => {
 169         this.$refs.snackBar.setMessageAndshow('db error?')
 170         console.error(error)
 171       }).finally(() => {
 172         this.$refs.spinner.close()
 173       })
 174
 175     },
 176     onCheckChange(data) {
 177       this.updateMutate(data);
 178     },
 179     onTextChange(data) {
 180       this.updateMutate(data);
 181     },
 182     updateMutate(data){
 183       const UPDATE_DONE = gql`mutation updateTodoMutation($header_id: Int!, $id: Int!, $done: Boolean = false, $name: String = "", $updated: timestamp = "") {
 184                                         update_todo_list_by_pk(pk_columns: {header_id: $header_id, id: $id}, _set: {updated: $updated, name: $name, done: $done}) {
 185                                           id
 186                                           header_id
 187                                         }
 188                                       }`
 189       this.$refs.spinner.show()
 190       this.$apollo.mutate({
 191             mutation: UPDATE_DONE,
 192             variables: {
 193                         header_id: data.header_id
 194                         , id: data.id
 195                         , done: data.done
 196                         , name: data.name
 197                         , updated: this.getNowFormatted()
 198                       }
 199           })
 200       .catch((error) => {
 201         this.$refs.snackBar.setMessageAndshow('update error!')
 202         console.error(error)
 203       }).finally(() => {
 204         this.$refs.spinner.close()
 205       })
 206     },
 207     onDelete(data){
 208       const DELETE_TODO = gql`mutation deleteTodoMutation($header_id: Int!, $id: Int!) {
 209                                         delete_todo_list_by_pk(id: $id, header_id: $header_id) {
 210                                           header_id
 211                                           id
 212                                         }
 213                                       }`
 214       this.$refs.spinner.show()
 215       this.mutateApollo(DELETE_TODO, {
 216                         header_id: data.header_id
 217                         , id: data.id
 218        }).catch((error) => {
 219         this.$refs.snackBar.setMessageAndshow('delete error!')
 220         console.error(error)
 221       }).finally(() => {
 222         this.$refs.spinner.close()
 223       })
 224     },
 225     onAdd(){
 226       const now = this.getNowFormatted()
 227
 228       if(this.selectedHeadrId === 0){
 229         console.error("未選択")
 230         return
 231       }
 232
 233       const CREATE_TODO = gql`mutation createTodoMutation($header_id: Int!,
 234                                                   $id: Int!,
 235                                                   $done: Boolean = false,
 236                                                   $name: String = "",
 237                                                   $created: timestamp = "",
 238                                                   $updated: timestamp = "") {
 239                                 insert_todo_list_one(object: {header_id: $header_id, id: $id, done: $done, name: $name, created: $created, updated: $updated}) {
 240                                   header_id
 241                                   id
 242                                   done
 243                                   name
 244                                   created
 245                                   updated
 246                                 }
 247                               }`
 248
 249       this.$refs.spinner.show()
 250       this.$apollo.queries.todo_list_aggregate.refetch({
 251           selectedHeadrId: this.selectedHeadrId
 252       }).then(() => {
 253         return this.mutateApollo(CREATE_TODO, {
 254                         header_id:this.selectedHeadrId
 255                         , id:this.todo_list_aggregate.aggregate.max.id + 1
 256                         , done: false
 257                         , name: ""
 258                         , created: now
 259                         , updated: now
 260                       });
 261       }).catch((error) => {
 262         this.$refs.snackBar.setMessageAndshow('add error!')
 263         console.error(error)
 264       }).finally(() => {
 265         this.$refs.spinner.close()
 266       })
 267     },
 268     loading(){
 269       return this.$apollo.queries.todo_list.loading
 270     },
 271     getNowFormatted(){
 272       return this.formattedData()
 273     },
 274     formattedData(param){
 275       return moment(param).format("YYYY-MM-DDTHH:mm:ss.SSS")
 276     },
 277     reFetch(titleId){
 278       this.$refs.spinner.show()
 279       this.$apollo.queries.todo_list.refetch({
 280         selectedHeadrId: titleId
 281       }).then(() => {
 282         this.selectedHeadrId = titleId
 283       }).finally(() => {
 284         this.$refs.spinner.close()
 285       })
 286     },
 287     mutateApollo(gqlMutation, variables){
 288       const promise = this.$apollo.mutate({
 289             mutation: gqlMutation,
 290             variables: variables
 291           })
 292       .then(() => {
 293         this.reFetch(this.selectedHeadrId)
 294         return new Promise(resolve => {resolve()})
 295       })
 296       .catch((error) => {
 297         return new Promise((resolve, reject) => {reject(error)})
 298       })
 299       return promise
 300     },
 301   },
 302   data() {
 303     return {
 304       selectedHeadrId: 0,
 305       titleName: '',
 306       snackText: '',
 307     }
 308   },
 309   apollo: {
 310     // Simple query that will update the 'hello' vue property
 311     todo_header: gql`query {
 312         todo_header {
 313         id
 314         name
 315       }
 316     }`,
 317     todo_list: gql`query ($selectedHeadrId: Int){
 318         todo_list (where: {header_id: {_eq: $selectedHeadrId}}, order_by: {id: asc}) {
 319           created
 320           done
 321           header_id
 322           id
 323           name
 324           updated
 325         }
 326     }`,
 327     todo_list_aggregate: gql`query ($selectedHeadrId: Int){
 328         todo_list_aggregate(where: {header_id: {_eq: $selectedHeadrId}}) {
 329           aggregate {
 330             max {
 331               id
 332             }
 333           }
 334         }
 335     }`,
 336
 337   },
 338 }
 339 </script>
 340
 341 <!-- Add "scoped" attribute to limit CSS to this component only -->
 342 <style scoped>
 343 </style>