Merge pull request #4 from jingchenxu/win

(feature)完成label部分的业务逻辑

main.js

@@ -88,10 +88,14 @@ app.on('activate', () => {
 ipcMain.on('renderFinish', (event, value) => {
   console.log('--------->', 'render finished', value)
   let storage = new StorageInit()
-  storage.SEARCH({}).then(function (res) {
+  storage.SEARCH({ tableName: 'Note' }).then(function (res) {
     console.log('--------->', 'load pageList')
     win.webContents.send('initNoteList', res)
   })
+  storage.SEARCH({ tableName: 'Label' }).then(function (res) {
+    console.log('--------->', 'load pageList')
+    win.webContents.send('initLabelList', res)
+  })
 })
 
 // 添加note
@@ -103,6 +107,15 @@ ipcMain.on('addNote', (event, value) => {
   })
 })
 
+// 更新note
+ipcMain.on('updateNote', (event, value) => {
+  console.log('--------->', 'updateNote')
+  let storage = new StorageInit()
+  storage.UPDATE(value).then(function (res) {
+    console.dir(res)
+  })
+})
+
 // 删除note
 ipcMain.on('deleteNote', (event, value) => {
   console.log('--------->', 'deleteNote')
@@ -112,6 +125,33 @@ ipcMain.on('deleteNote', (event, value) => {
   })
 })
 
+// 添加label
+ipcMain.on('addLabel', (event, value) => {
+  console.log('--------->', 'addLabel')
+  let storage = new StorageInit()
+  storage.INSERT(value).then(function (res) {
+    console.dir(res)
+  })
+})
+
+// 更新label
+ipcMain.on('updateLabel', (event, value) => {
+  console.log('--------->', 'updateLabel')
+  let storage = new StorageInit()
+  storage.UPDATE(value).then(function (res) {
+    console.dir(res)
+  })
+})
+
+// 删除label
+ipcMain.on('deleteLabel', (event, value) => {
+  console.log('--------->', 'deleteLabel')
+  let storage = new StorageInit()
+  storage.REMOVE(value).then(function (res) {
+    console.dir(res)
+  })
+})
+
 // 修改软件配置
 ipcMain.on('updateSettings', (event, value) => {
   console.log('--------->', 'updateSettings')

package.json

@@ -61,6 +61,7 @@
     "readable-stream": "^2.3.6",
     "register-service-worker": "^1.0.0",
     "safe-buffer": "^5.1.2",
+    "sortablejs": "^1.7.0",
     "sqlstring": "^2.3.1",
     "underscore": "^1.4.4",
     "util-deprecate": "^1.0.2",

rosa

@@ -1,4 +1,12 @@
-{"color":"indigo accent-2","height":400,"id":1537511399039,"noteContent":"13","noteTitle":"13","width":300,"_id":"AABziUjd7EcPMs5B","createdAt":{"$$date":1537511399195},"updatedAt":{"$$date":1537511399195}}
-{"color":"light-blue accent-1","height":400,"id":1537511409632,"noteContent":"14","noteTitle":"14","width":300,"_id":"bEwmpvUjugmnA5AM","createdAt":{"$$date":1537511409696},"updatedAt":{"$$date":1537511409696}}
-{"color":"deep-purple accent-2","height":400,"id":1537511423928,"noteContent":"18989","noteTitle":"1817","width":300,"_id":"rI5zpWsnSEHGid85","createdAt":{"$$date":1537511424115},"updatedAt":{"$$date":1537511424115}}
-{"color":"white","height":400,"id":1537511392511,"noteContent":"12","noteTitle":"12","width":300,"_id":"sgPWCdMUaIq2qKF2","createdAt":{"$$date":1537511392636},"updatedAt":{"$$date":1537511392636}}
+{"id":1537844243894,"labelName":"67","tableName":"Label","_id":"4voQg36dxHmW8Shb","createdAt":{"$$date":1537844244052},"updatedAt":{"$$date":1537844244052}}
+{"id":1537844756205,"labelName":"56","tableName":"Label","_id":"5KsOxxonU2WQUZxz","createdAt":{"$$date":1537844756334},"updatedAt":{"$$date":1537844756334}}
+{"id":1537844117111,"labelName":"89","tableName":"Label","_id":"H02H9VyDrtkaJufF","createdAt":{"$$date":1537844117281},"updatedAt":{"$$date":1537844117281}}
+{"id":1537844242247,"labelName":"67","tableName":"Label","_id":"LlxRg3oOfc3eeOEw","createdAt":{"$$date":1537844242366},"updatedAt":{"$$date":1537844242366}}
+{"id":1537844238606,"labelName":"67","tableName":"Label","_id":"SqxvLOu66c35jqVQ","createdAt":{"$$date":1537844238778},"updatedAt":{"$$date":1537844238778}}
+{"id":1537844104463,"labelName":"67","tableName":"Label","_id":"WRw2aQtTFlFaBPBd","createdAt":{"$$date":1537844104641},"updatedAt":{"$$date":1537844104641}}
+{"id":1537844110967,"labelName":"78","tableName":"Label","_id":"Ye3LhLDXqw5ZV5gY","createdAt":{"$$date":1537844111114},"updatedAt":{"$$date":1537844111114}}
+{"color":"white","height":400,"id":1537844512247,"noteContent":"13","noteTitle":"13","tableName":"Note","width":300,"_id":"dlBSPfuGdFKLLsl4","createdAt":{"$$date":1537844512369},"updatedAt":{"$$date":1537844512369}}
+{"color":"white","height":400,"id":1537844507583,"noteContent":"12","noteTitle":"12","tableName":"Note","width":300,"_id":"j2XKLkUBzwjsMzIG","createdAt":{"$$date":1537844507704},"updatedAt":{"$$date":1537844507704}}
+{"id":1537844478262,"labelName":"12","tableName":"Label","_id":"kiU9fJ01hUuHJpjl","createdAt":{"$$date":1537844478385},"updatedAt":{"$$date":1537844478385}}
+{"id":1537844240679,"labelName":"67","tableName":"Label","_id":"pYWTUnyOYxlUHpd2","createdAt":{"$$date":1537844240879},"updatedAt":{"$$date":1537844240879}}
+{"id":1537844498958,"labelName":"12","tableName":"Label","_id":"yg8hmYalJQiSmdh0","createdAt":{"$$date":1537844499078},"updatedAt":{"$$date":1537844499078}}

src/App.vue

@@ -67,6 +67,10 @@ export default {
       console.dir(arg)
       me.$store.commit('setNoteList', arg)
     })
+    ipcRenderer.on('initLabelList', (event, arg) => {
+      console.dir(arg)
+      me.$store.commit('setLabelList', arg)
+    })
   },
   computed: {
     listType () {

src/components/AddCard.vue

@@ -90,7 +90,7 @@
             </v-text-field>
           </v-flex>
           <v-flex xs12>
-            <v-textarea full-width auto-grow flat solo name="input-7-4" placeholder="添加记事..." label="Solo textarea" v-model="note.noteContent"></v-textarea>
+            <DragList/>
           </v-flex>
         </v-layout>
 
@@ -138,12 +138,14 @@
 
 <script>
 import ColorSelector from './ColorSelector'
+import DragList from './DragList'
 const { ipcRenderer } = window.require('electron')
 
 export default {
   name: 'add-card',
   components: {
-    ColorSelector
+    ColorSelector,
+    DragList
   },
   data () {
     return {
@@ -222,7 +224,8 @@ export default {
         width: 300,
         height: 400,
         id: Number(new Date()),
-        color: this.bgcolor
+        color: this.bgcolor,
+        tableName: 'Note'
       }
       if (this.note.noteTitle || this.note.noteContent) {
         ipcRenderer.send('addNote', note)

src/components/AddLabelItem.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="add-label-item">
+    <v-icon style="line-height: 0.6;" v-if="isBlur" normal>mdi-plus</v-icon>
+    <v-icon style="line-height: 0.6;" v-if="isFocus" normal>mdi-close</v-icon>
+    <input v-model="value" @focus="inputFocus" @blur="inputBlur" class="add-input" placeholder="创建新标签" type="text">
+    <v-icon v-show="isFocus" @click="addLabel" style="line-height: 0.6;" normal>mdi-check</v-icon>
+  </div>
+</template>
+
+<script>
+const { ipcRenderer } = window.require('electron')
+
+export default {
+  name: 'add-label-item',
+  data () {
+    return {
+      isFocus: false,
+      isBlur: true,
+      value: ''
+    }
+  },
+  methods: {
+    inputFocus () {
+      console.log('获取到焦点')
+      let me = this
+      setTimeout(function () {
+        me.isFocus = true
+        me.isBlur = false
+      }, 500)
+    },
+    inputBlur () {
+      console.log('失去焦点')
+      let me = this
+      setTimeout(function () {
+        me.isFocus = false
+        me.isBlur = true
+      }, 500)
+    },
+    addLabel () {
+      let label = {
+        id: Number(new Date()),
+        labelName: this.value,
+        tableName: 'Label'
+      }
+      if (this.value) {
+        ipcRenderer.send('addLabel', label)
+        this.$store.commit('addLabel', label)
+        this.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-label-item {
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 10px;
+}
+.add-input {
+  height: 36px;
+  margin: 0 10px;
+  width: 200px;
+  line-height: 36px;
+  border-bottom: 1px solid transparent;
+}
+.add-input:focus {
+  border: none;
+  border-bottom: 1px solid grey;
+  outline-color: transparent;
+  outline-style: none;
+  outline-width: 0ch;
+}
+</style>

src/components/DragList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="drag-list" class="drag-list">
+    <div class="drag-item" :key="index" v-for="(item, index) of dragList">
+      {{item.id}}
+    </div>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'drag-list',
+  props: {
+    dragList: {
+      type: Array,
+      required: false,
+      default: function () {
+        return [{
+          id: 1
+        }, {
+          id: 2
+        }]
+      }
+    }
+  },
+  data () {
+    return {}
+  },
+  mounted () {
+    let el = document.getElementById('drag-list')
+    let sortable = Sortable.create(el)
+  }
+}
+</script>
+
+<style scoped>
+.drag-item {
+  width: 100%;
+  height: 36px;
+  border-bottom: 1px solid grey;
+  line-height: 36px;
+}
+</style>

src/components/LabelItem.vue

@@ -1,35 +1,66 @@
 <template>
-  <v-layout row wrap>
-    <v-flex xs12>
-      <v-text-field v-model="message" type="text">
-        <v-tooltip slot="prepend" bottom>
-          <v-icon slot="activator">mdi-label</v-icon>
-          I'm a tooltip
-        </v-tooltip>
-        <v-icon slot="append-outer" color="grey">mdi-pencil</v-icon>
-      </v-text-field>
-    </v-flex>
-  </v-layout>
+  <div class="add-label-item">
+    <v-icon style="line-height: 0.6;" v-if="isBlur" normal>mdi-delete</v-icon>
+    <v-icon style="line-height: 0.6;" v-if="isFocus" normal>mdi-label</v-icon>
+    <input v-model="value" @focus="inputFocus" @blur="inputBlur" class="add-input" type="text">
+    <v-icon @click="labelSubmit" style="line-height: 0.6;" v-if="isFocus" normal>mdi-check</v-icon>
+    <v-icon style="line-height: 0.6;" v-if="isBlur" normal>mdi-pencil</v-icon>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'label-item',
+  name: 'add-label-item',
+  props: {
+    labelDetail: {
+      type: Object,
+      required: true
+    }
+  },
   data () {
     return {
-      message: 'Hey!',
-      loading: false
+      isFocus: false,
+      isBlur: true,
+      value: ''
     }
   },
+  mounted () {
+    this.value = this._props.labelDetail.labelName
+  },
   methods: {
-    clickMe () {
-      this.loading = true
-      this.message = 'Wait for it...'
-      setTimeout(() => {
-        this.loading = false
-        this.message = 'You\'ve clicked me!'
-      }, 2000)
+    inputFocus () {
+      console.log('获取到焦点')
+      this.isFocus = true
+      this.isBlur = false
+    },
+    inputBlur () {
+      console.log('失去焦点')
+      this.isFocus = false
+      this.isBlur = true
     }
   }
 }
 </script>
+
+<style scoped>
+.add-label-item {
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 10px;
+}
+.add-input {
+  height: 36px;
+  margin: 0 10px;
+  width: 200px;
+  line-height: 36px;
+  border-bottom: 1px solid transparent;
+}
+.add-input:focus {
+  border: none;
+  border-bottom: 1px solid grey;
+  outline-color: transparent;
+  outline-style: none;
+  outline-width: 0ch;
+}
+</style>

src/components/NoteCard.vue

@@ -10,7 +10,7 @@
       </v-badge>
     </v-card-title>
     <v-card-actions>
-      <NoteCardActions></NoteCardActions>
+      <NoteCardActions @updateColor="updateColor"></NoteCardActions>
     </v-card-actions>
     <v-dialog v-model="dialog">
       <v-card>
@@ -160,6 +160,12 @@ export default {
         }
       }
       me.$store.commit('setNoteList', noteList)
+    },
+    updateColor (color) {
+      let note = this._props.noteDetail
+      note.color = color
+      this.$store.commit('updateNote', note)
+      // TODO 通知后台修改数据库
     }
   }
 }

src/components/NoteCardActions.vue

@@ -148,6 +148,7 @@ export default {
           this.colorList[i].isCheck = false
         }
       }
+      this.$emit('updateColor', item.color)
     }
   }
 }