ヘッダー以外は大体完成

diff --git a/src/components/selectPanel.vue b/src/components/selectPanel.vue
new file mode 100644 (file)
index 0000000..eb24f8e
--- /dev/null
+++ b/src/components/selectPanel.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="border-white">
+    <div v-if="isShow" class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
+      <!-- modal -->
+      <div class="bg-white rounded shadow-lg w-6/12">
+        <!-- modal header -->
+        <div class="border-b px-4 py-2 flex justify-between items-center">
+          <h2 class="font-semibold text-lg">{{title}}</h2>
+          <button class="text-black" @click="show">&cross;</button>
+        </div>
+        <!-- modal body -->
+        <div class="p-1">
+          <ul class="select_box overflow-auto max-h-96">
+              <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
+          </ul>
+        </div>
+        <div class="flex justify-end items-center w-100 border-t p-3">
+          <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'selectPanel',
+  components: {
+  },
+  props: {
+    dataList: Array,
+    title: String,
+  },
+  computed: {
+    lists() {
+      if(!this.dataList){
+        return []
+      }
+      return this.dataList
+    }
+  },
+  methods: {
+    show() {
+      this.showToggle()
+    },
+    showToggle(){
+      this.isShow = !this.isShow
+    },
+    onSelected(_head){
+      this.showToggle()
+      this.$emit("onSelected", _head)
+    }
+  },
+  
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.select_box {
+    border: 1px solid #c5c5c5;
+}
+.select_box li {
+    cursor: default;
+    box-sizing: border-box;
+    padding: 2px 10px;
+}
+</style>

diff --git a/src/components/snackBar.vue b/src/components/snackBar.vue
index 35727f0..152992d 100644 (file)
--- a/src/components/snackBar.vue
+++ b/src/components/snackBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="border-color:#FFFFFF">
+  <div class="border-white">
     <div id="snackbar">{{msgValue}}</div>
   </div>
 </template>

diff --git a/src/components/todo.vue b/src/components/todo.vue
index 8531291..b43e229 100644 (file)
--- a/src/components/todo.vue
+++ b/src/components/todo.vue
@@ -9,7 +9,7 @@
           @change="onCheckChange(data)"/>
       </label>
 
-      <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-10/12"
+      <input class="bg-transparent border-b block px-1 border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-10/12"
               placeholder="やること/やりたいこと" 
               v-model="data.name"
               @change="onTextChange(data)"/>

diff --git a/src/components/todoApp.vue b/src/components/todoApp.vue
index 662be65..99c760e 100644 (file)
--- a/src/components/todoApp.vue
+++ b/src/components/todoApp.vue
@@ -7,10 +7,9 @@
               list="todo_header" 
               v-model="titleName" 
               @input="onHeaderChange"
-              class="w-10/12 px-3 py-2 mb-1 border-b border-gray-500 focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer text-gray-900" />
-        <button class="bg-gray-200 w-10 h-10 p-2 ml-0 text-sm font-bold tracking-wider text-gray hover:bg-gray-400 inline-flex items-center justify-center"
-          v-if="selectedOption == null"
-          @click="addHeader">
+              class="w-10/12 px-1 py-2 mb-1 border-b border-gray-500 focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer text-gray-900" />
+        <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"
+          @click="searchHeader">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16">
             <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"/>
           </svg>
@@ -24,16 +23,13 @@
         </button>
         <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"
           v-else
-          @click="addHeader">
+          @click="deleteHeader">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
             <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"/>
             <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"/>
           </svg>
         </button>
-        <datalist id="todo_header">
-          <option v-for="head in todo_header" :key="head.id" :value="head.name"/>
-        </datalist>
-
+        
       </div>
       <div class="py-5">
         <div>Todo リスト</div>
@@ -61,6 +57,11 @@
       <select-box/>
       
       <snack-bar :msg="snackText" ref="snackBar"/>
+      <select-panel 
+        :dataList="todo_header" 
+        title="Todoリスト選択" 
+        ref="selectPanel"
+        @onSelected="onSelected"/>
 
     </div>
   </div>
@@ -75,6 +76,7 @@ import gql from 'graphql-tag'
 import selectBox from '@/components/selectBox.vue'
 import todo from '@/components/todo.vue'
 import snackBar from '@/components/snackBar.vue'
+import selectPanel from '@/components/selectPanel.vue'
 
 export default {
   name: 'todoApp',
@@ -82,6 +84,7 @@ export default {
     selectBox
     , todo
     , snackBar
+    , selectPanel
   },
   beforeMount() {
     this.$apollo.queries.todo_list.refetch({
@@ -131,6 +134,10 @@ export default {
       })
       this.selectedHeadrId = id
     },
+    onSelected(head){
+      this.titleName = head.name
+      this.selectedTitle(head.id)
+    },
     onHeaderChange() {
       if(this.selectedOption){
         this.selectedTitle(this.selectedOption.id)
@@ -142,7 +149,24 @@ export default {
       }
     },
     addHeader(){
-      this.$refs.snackBar.setMessageAndshow('追加')
+      if(_.isEmpty(this.titleName)){
+        this.$refs.snackBar.setMessageAndshow('なにか入れろやボケ')
+        return
+      }
+      
+    },
+    deleteHeader(){
+
+    },
+    searchHeader(){
+      this.$apollo.queries.todo_header.refetch()
+      .then(() => {
+          this.$refs.selectPanel.show()
+      }).catch((error) => {
+        this.$refs.snackBar.setMessageAndshow('add error!')
+        console.error(error)
+      })
+      
     },
     onCheckChange(data) {
       this.updateMutate(data);