src/components/todoApp.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.$apollo.queries.todo_list.refetch({
  95         selectedHeadrId: 0
  96     })
  97   },
  98   computed: {
  99     // 選択中のオプションオブジェクト。任意入力値の場合は null を返す
 100     selectedOption() {
 101       if(!this.todo_header){
 102         return null
 103       }
 104       const selected = this.todo_header.find(item => item.name === this.titleName)
 105       return selected || null
 106     }
 107   },
 108   //Vue2.6なのでsetupが…
 109   // setup() {
 110   //   // const { result, loading, error, refetch } = useQuery(gql`
 111   //   //   query todo_header {
 112   //   //     todo_header {
 113   //   //       id
 114   //   //       name
 115   //   //     }
 116   //   //   }
 117   //   // `)
 118
 119   //   // const users = useResult(result)
 120
 121   //   // return {
 122   //   //   users,
 123   //   //   loading,
 124   //   //   error,
 125   //   //   refetch,
 126   //   // }
 127   //   onBeforeMount(() => {
 128   //     console.log('Component is onBeforeMount!')
 129   //     // this.$apollo.queries.todo_list.refetch({
 130   //     //   selectedHeadrId: 0
 131   //     // })
 132   //   })
 133   // },
 134   methods: {
 135     selectedTitle(id){
 136       this.reFetch(id)
 137     },
 138     onSelected(head){
 139       this.titleName = head.name
 140       this.selectedTitle(head.id)
 141     },
 142     onHeaderChange() {
 143       if(this.selectedOption){
 144         this.selectedTitle(this.selectedOption.id)
 145       } else {
 146         this.$apollo.queries.todo_list.refetch({
 147           selectedHeadrId: 0
 148         })
 149         this.selectedHeadrId = 0
 150       }
 151     },
 152     addHeader(){
 153       if(_.isEmpty(this.titleName)){
 154         this.$refs.snackBar.setMessageAndshow('タイトルが入ってないよ！')
 155         return
 156       }
 157
 158     },
 159     deleteHeader(){
 160
 161     },
 162     searchHeader(){
 163       this.$refs.spinner.show()
 164       this.$apollo.queries.todo_header.refetch()
 165       .then(() => {
 166           this.$refs.selectPanel.show()
 167       }).catch((error) => {
 168         this.$refs.snackBar.setMessageAndshow('db error?')
 169         console.error(error)
 170       }).finally(() => {
 171         this.$refs.spinner.close()
 172       })
 173
 174     },
 175     onCheckChange(data) {
 176       this.updateMutate(data);
 177     },
 178     onTextChange(data) {
 179       this.updateMutate(data);
 180     },
 181     updateMutate(data){
 182       const UPDATE_DONE = gql`mutation updateTodoMutation($header_id: Int!, $id: Int!, $done: Boolean = false, $name: String = "", $updated: timestamp = "") {
 183                                         update_todo_list_by_pk(pk_columns: {header_id: $header_id, id: $id}, _set: {updated: $updated, name: $name, done: $done}) {
 184                                           id
 185                                           header_id
 186                                         }
 187                                       }`
 188       this.$refs.spinner.show()
 189       this.$apollo.mutate({
 190             mutation: UPDATE_DONE,
 191             variables: {
 192                         header_id: data.header_id
 193                         , id: data.id
 194                         , done: data.done
 195                         , name: data.name
 196                         , updated: this.getNowFormatted()
 197                       }
 198           })
 199       .catch((error) => {
 200         this.$refs.snackBar.setMessageAndshow('update error!')
 201         console.error(error)
 202       }).finally(() => {
 203         this.$refs.spinner.close()
 204       })
 205     },
 206     onDelete(data){
 207       const DELETE_TODO = gql`mutation deleteTodoMutation($header_id: Int!, $id: Int!) {
 208                                         delete_todo_list_by_pk(id: $id, header_id: $header_id) {
 209                                           header_id
 210                                           id
 211                                         }
 212                                       }`
 213       this.$refs.spinner.show()
 214       this.mutateApollo(DELETE_TODO, {
 215                         header_id: data.header_id
 216                         , id: data.id
 217        }).catch((error) => {
 218         this.$refs.snackBar.setMessageAndshow('delete error!')
 219         console.error(error)
 220       }).finally(() => {
 221         this.$refs.spinner.close()
 222       })
 223     },
 224     onAdd(){
 225       const now = this.getNowFormatted()
 226
 227       if(this.selectedHeadrId === 0){
 228         console.error("未選択")
 229         return
 230       }
 231
 232       const CREATE_TODO = gql`mutation createTodoMutation($header_id: Int!,
 233                                                   $id: Int!,
 234                                                   $done: Boolean = false,
 235                                                   $name: String = "",
 236                                                   $created: timestamp = "",
 237                                                   $updated: timestamp = "") {
 238                                 insert_todo_list_one(object: {header_id: $header_id, id: $id, done: $done, name: $name, created: $created, updated: $updated}) {
 239                                   header_id
 240                                   id
 241                                   done
 242                                   name
 243                                   created
 244                                   updated
 245                                 }
 246                               }`
 247
 248       this.$refs.spinner.show()
 249       this.$apollo.queries.todo_list_aggregate.refetch({
 250           selectedHeadrId: this.selectedHeadrId
 251       }).then(() => {
 252         return this.mutateApollo(CREATE_TODO, {
 253                         header_id:this.selectedHeadrId
 254                         , id:this.todo_list_aggregate.aggregate.max.id + 1
 255                         , done: false
 256                         , name: ""
 257                         , created: now
 258                         , updated: now
 259                       });
 260       }).catch((error) => {
 261         this.$refs.snackBar.setMessageAndshow('add error!')
 262         console.error(error)
 263       }).finally(() => {
 264         this.$refs.spinner.close()
 265       })
 266     },
 267     loading(){
 268       return this.$apollo.queries.todo_list.loading
 269     },
 270     getNowFormatted(){
 271       return this.formattedData()
 272     },
 273     formattedData(param){
 274       return moment(param).format("YYYY-MM-DDTHH:mm:ss.SSS")
 275     },
 276     reFetch(titleId){
 277       this.$refs.spinner.show()
 278       this.$apollo.queries.todo_list.refetch({
 279         selectedHeadrId: titleId
 280       }).then(() => {
 281         this.selectedHeadrId = titleId
 282       }).finally(() => {
 283         this.$refs.spinner.close()
 284       })
 285     },
 286     mutateApollo(gqlMutation, variables){
 287       const promise = this.$apollo.mutate({
 288             mutation: gqlMutation,
 289             variables: variables
 290           })
 291       .then(() => {
 292         this.reFetch(this.selectedHeadrId)
 293         return new Promise(resolve => {resolve()})
 294       })
 295       .catch((error) => {
 296         return new Promise((resolve, reject) => {reject(error)})
 297       })
 298       return promise
 299     },
 300   },
 301   data() {
 302     return {
 303       selectedHeadrId: 0,
 304       titleName: '',
 305       snackText: '',
 306     }
 307   },
 308   apollo: {
 309     // Simple query that will update the 'hello' vue property
 310     todo_header: gql`query {
 311         todo_header {
 312         id
 313         name
 314       }
 315     }`,
 316     todo_list: gql`query ($selectedHeadrId: Int){
 317         todo_list (where: {header_id: {_eq: $selectedHeadrId}}, order_by: {id: asc}) {
 318           created
 319           done
 320           header_id
 321           id
 322           name
 323           updated
 324         }
 325     }`,
 326     todo_list_aggregate: gql`query ($selectedHeadrId: Int){
 327         todo_list_aggregate(where: {header_id: {_eq: $selectedHeadrId}}) {
 328           aggregate {
 329             max {
 330               id
 331             }
 332           }
 333         }
 334     }`,
 335
 336   },
 337 }
 338 </script>
 339
 340 <!-- Add "scoped" attribute to limit CSS to this component only -->
 341 <style scoped>
 342 </style>