[update] complete drag task function

src/app/App.vue

@@ -15,7 +15,7 @@ export default {
       // Temporary config for 2.1.
       contextConfig: {
         gradient: true,
-        shadow: 'lg', // 3 states: 'sm', 'lg', undefined (no shadow).
+        shadow: 'lg', // 3 states: 'sm', 'sddssslg', undefined (no shadow).
         invertedColor: false,
       },
     }

src/components/project/Project.vue

@@ -170,8 +170,10 @@ export default {
       header: 'get_device_info_all/0',
     }))
     const project = await this.API.project.getAll()
+    console.log('project: ', project)
     this.projectConfigList.length = 0
     this.projectConfigList.push(...project.data)
+    console.log('projectConfigList: ', this.projectConfigList)
 
     this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
       header: 'get_running_project/0',

src/components/project/task/config/ProjectTaskConfigParameter.vue

@@ -90,7 +90,11 @@ export default {
       // get Device
       this.device = this.getDeviceProject(this.deviceSelectKey)
       // get Config
-      this.config = configTable.getConfig(this.device.library.value)
+      if (typeof this.device.library === 'string') { // string
+        this.config = configTable.getConfig(this.device.library)
+      } else { // object
+        this.config = configTable.getConfig(this.device.library.value)
+      }
       // create default parameter
       const defaultValue = {}
       for (const key in this.config) {

src/components/project/view/ProjectView.vue

@@ -5,9 +5,6 @@
         <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
         <h5 class="mt-0 mb-0"> {{ getSelectProject ? getSelectProject.name : '' }}</h5>
       </template>
-      <!-- <pre>
-        {{ getSelectProject ? getSelectProject: '' }}
-      </pre> -->
       <div v-if="getSelectProject === undefined">
         <span>please select project</span>
       </div>
@@ -47,6 +44,7 @@ export default {
       'projectList',
       'deviceConnectList',
       'projectSelectIndex',
+      'projectLibrary',
     ]),
   },
   data () {
@@ -83,6 +81,9 @@ export default {
             isSelect: [],
           }
           await this.addDeviceProject({ device: newDevice })
+          if (device.library_name !== undefined) {
+            this.projectLibrary = device.library_name
+          }
         }
       },
     },

src/components/project/view/table/ProjectTable.vue

@@ -19,10 +19,10 @@
             <th align="center"></th>
           </tr>
         </thead>
-
-        <tbody>
-          <template v-for="(task, taskIndex) in getSelectProject.task">
-            <tr v-if="task.device.length === 0" :key="taskIndex" height="80px">
+        <!-- <tbody> -->
+        <vuedraggable class="draggable" v-model="getSelectProject.task" @start="() => {}" @end="() => {}" tag="tbody" animation="500">
+          <template class="item" v-for="(task, taskIndex) in getSelectProject.task">
+            <tr v-if="task.device && task.device.length === 0" :key="taskIndex" height="80px">
               <td v-if="lockMode === false">
                 <va-checkbox
                   v-model="tableColumn.checked"
@@ -36,19 +36,19 @@
                 {{ task.name }}
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add device</va-button>
+                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add Device</va-button>
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(3, taskIndex)" small>Add event</va-button>
+                <va-button :flat="true" @click="openConfig(3, taskIndex)" small>+ New Action/Condition</va-button>
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add parameter</va-button>
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add Parameter</va-button>
               </td>
               <td align="center">
                 <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
               </td>
             </tr>
-            <tr v-for="(deviceUUID) in task.device" :key="taskIndex + deviceUUID" height="80px">
+            <tr v-else v-for="(deviceUUID) in task.device" :key="taskIndex + deviceUUID" height="80px">
               <td v-if="lockMode === false">
                 <va-checkbox
                   v-model="tableColumn.checked"
@@ -68,12 +68,15 @@
                   />
                 </div>
                 <div v-else>
+                  <!-- <vuedraggable class="draggable">
+                    {{ task.name }}
+                  </vuedraggable> -->
                   {{ task.name }}
                 </div>
               </td>
               <!-- device -->
               <td align="center">
-                <div v-if="task.device.length === 0">
+                <div v-if="task.device && task.device.length === 0">
                   <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
                     Add device
                   </va-button>
@@ -98,21 +101,21 @@
                       <div v-for="conditionKey in action.condition" :key="conditionKey">
                         <div small>
                           {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
-                          <va-icon class="fa fa-close" @click.native="delAction(action, conditionKey)"/>
+                          <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/>
                         </div>
-                        <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
-                          + New Action/Condition
-                        </va-button>
                       </div>
                     </div>
                   </div>
+                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
+                    + New Action/Condition
+                  </va-button>
                 </div>
               </td>
               <!-- action end -->
               <td align="center">
                 <div v-if="Object.keys(task.parameter_set).length === 0">
                   <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" small>
-                    Add parameter
+                    Add Parameter
                   </va-button>
                 </div>
                 <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" v-else class="flex d-flex">
@@ -130,6 +133,8 @@
                 </va-button>
               </td>
               <td align="center" v-if="lockMode === false">
+                <va-icon v-if="String(taskIndex) !== '0'" class="fa fa-toggle-up" @click.native="swapTask(taskIndex, 0)"/>
+                <va-icon v-if="parseInt(taskIndex) !== getSelectProject.task.length - 1" class="fa fa-toggle-down" @click.native="swapTask(taskIndex, 1)"/>
                 <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
               </td>
               <td align="center" v-if="lockMode === true">
@@ -144,7 +149,8 @@
               </td>
             </tr>
           </template>
-        </tbody>
+        </vuedraggable>
+      <!-- </tbody> -->
       </table>
     </div>
   </div>
@@ -155,11 +161,13 @@ import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import configTable from '@/data/config-table/index'
+import vuedraggable from 'vuedraggable'
 
 export default {
   name: 'project-table',
   components: {
     FulfillingBouncingCircleSpinner,
+    vuedraggable,
   },
   computed: {
     config () {
@@ -191,19 +199,66 @@ export default {
     }
   },
   methods: {
-    delAction: function (action, conditionKey) {
-      // console.log(action.condition)
-      console.log(action.condition)
+    dragEnd: function (event) {
+      console.log('event', event)
+      console.log('from', event.oldDraggableIndex)
+      console.log('to', event.newDraggableIndex)
+      const newTaskList = JSON.parse(JSON.stringify(this.getSelectProject.task))
+      console.log('this.getSelectProject.task', newTaskList, this.getSelectProject.task)
+      const b = newTaskList[event.oldDraggableIndex]
+      const a = newTaskList[event.newDraggableIndex]
+      console.log('a', a)
+      console.log('b', b)
+      console.log('b.device.length', b.device.length)
+      if (b && b.device.length === 0) return
+      console.log('1')
+      // newTaskList.splice(event.newDraggableIndex, 1, this.getSelectProject.task[event.oldDraggableIndex])
+      if (a === undefined) return
+      console.log('2')
+      // newTaskList.splice(event.oldDraggableIndex, 1, a)
+      newTaskList.filter(ele => ele != null)
+      console.log('newTaskList', newTaskList)
+      // this.getSelectProject.task = newTaskList
+    },
+    swapTask: function (taskIndex, upDown) {
+      taskIndex = parseInt(taskIndex)
+      if (upDown === 0) {
+        const a = this.getSelectProject.task[taskIndex]
+        this.getSelectProject.task.splice(taskIndex, 1, this.getSelectProject.task[taskIndex - 1])
+        this.getSelectProject.task.splice(taskIndex - 1, 1, a)
+      } else {
+        const a = this.getSelectProject.task[taskIndex]
+        this.getSelectProject.task.splice(taskIndex, 1, this.getSelectProject.task[taskIndex + 1])
+        this.getSelectProject.task.splice(taskIndex + 1, 1, a)
+      }
+    },
+    delSelected: function () {
+      for (const indexSelected of this.tableColumn.checked) {
+        this.deleteTask({ index: indexSelected })
+      }
+    },
+    delAction: function (task, actionKey, conditionKey) {
+      // console.log(action)
       // console.log(conditionKey)
       // console.log(action.condition[0])
       // console.log(action.condition.length)
-      for (let i = 0; i < action.condition.length; i++) {
-        if (String(action.condition[i]) === String(conditionKey)) {
-          delete action.condition[i]
-          break
-        }
-      }
-      console.log(action.condition)
+      // for (let i = 0; i < action.condition.length; i++) {
+      //   if (String(action.condition[i]) === String(conditionKey)) {
+      //     delete action.condition[i]
+      //     break
+      //   }
+      // }
+      const _action = JSON.parse(JSON.stringify(task.action))
+      const _condition = JSON.parse(JSON.stringify(task.condition))
+      // console.log(Object.keys(_task.action))
+      delete _action[actionKey]
+      delete _condition[conditionKey]
+      // delete _task.action[actionKey]
+      // delete _task.condition[conditionKey]
+      // console.log(Object.keys(_task.action))
+      task.action = _action
+      task.condition = _condition
+      console.log('task', task)
       // delete action.condition[0]
     },
     switchInput: function (tag, index) {
@@ -268,6 +323,21 @@ export default {
 </script>
 
 <style lang="scss">
+  .draggable {
+    width: 500px;
+    margin: auto;
+  }
+
+  // .item {
+  //   height: 40px;
+  //   line-height: 40px;
+  //   margin-bottom: 20px;
+  //   background-color: skyblue;
+  //   text-align: center;
+  //   color: #ffffff;
+  //   cursor: move;
+  // }
+
   .markup-tables {
     width: 100%;
 

src/store/modules/project/actions/projectAct.js

@@ -80,6 +80,7 @@ const projectActs = {
     await api.project.update(project.id, { deleted: true })
     await api.project.del()
     state.projectList.splice(index, 1)
+    state.projectSelectIndex = -1
     return true
   },