feat: add drag and drop to the board

Author: Kholid060

electron-vendors.config.json

@@ -1,4 +1,4 @@
 {
   "chrome": "91",
-  "node": "14"
+  "node": "16.4.0"
 }

package.json

@@ -1,9 +1,6 @@
 {
   "name": "vite-electron-builder",
   "private": true,
-  "engines": {
-    "node": ">=v14.16"
-  },
   "main": "packages/main/dist/index.cjs",
   "scripts": {
     "buildEnvTypes": "node scripts/buildEnvTypes.js",
@@ -14,7 +11,7 @@
     "test": "node tests/app.spec.js",
     "watch": "node scripts/watch.js",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "anu": "cd .\\node_modules\\node-pty && node-gyp rebuild --target=13.1.0 --arch=x64 --target_platform=darwin --dist-url=https://atom.io/download/atom-shell"
+    "rebuild": "./node_modules/.bin/electron-rebuild.cmd"
   },
   "browserslist": [
     "Chrome 91"
@@ -24,10 +21,6 @@
   },
   "dependencies": {
     "@mdi/js": "^5.9.55",
-    "@tiptap/extension-task-item": "^2.0.0-beta.16",
-    "@tiptap/extension-task-list": "^2.0.0-beta.16",
-    "@tiptap/starter-kit": "^2.0.0-beta.76",
-    "@tiptap/vue-3": "^2.0.0-beta.40",
     "@vuex-orm/core": "^0.36.4",
     "@vuex-orm/plugin-search": "^0.23.4",
     "dayjs": "^1.10.5",
@@ -50,6 +43,7 @@
     "vue-mdijs": "^0.5.0",
     "vue-router": "^4.0.8",
     "vue-toastification": "^2.0.0-rc.1",
+    "vuedraggable": "^4.0.3",
     "vuex": "^4.0.1",
     "xterm": "^4.13.0"
   },

packages/main/src/index.js

@@ -161,7 +161,7 @@ ipcMain.on('node-pty', (event, options = {}) => {
   if (options.write) ptyProcess.write(options.write);
 
   ptyProcess.on('data', function(data) {
-    ipcMain.send('pty-data', { name: options.name, data });
+    mainWindow.webContents.send('pty-data', { name: options.name, data });
   });
 
   allPtyProcess[options.name] = ptyProcess;

packages/renderer/src/components/boards/AddCard.vue

@@ -104,10 +104,17 @@ export default {
       card.data.tasks.splice(index, 1);
     }
     function saveCard() {
+      let maxOrder = Card.query().where('boardId', props.boardId).max('order');
+
+      if (card.id) {
+        maxOrder = card.order;
+      }
+
       Card.insertOrUpdate({
         data: {
           ...card,
           type: 'card',
+          order: card.id ? maxOrder : maxOrder + 1,
           id: card.id ? card.id : nanoid(),
           boardId: props.boardId,
         },

packages/renderer/src/components/boards/AddIssueCard.vue

@@ -116,7 +116,11 @@ export default {
     function addCard() {
       if (!props.boardId || state.selectedIssues.length === 0) return;
 
+      let maxOrder =
+        (Card.query().where('boardId', props.boardId).max('order') || 0) - 1;
+
       const data = state.selectedIssues.map((id) => ({
+        order: (maxOrder += 1),
         type: 'issue',
         boardId: props.boardId,
         data: issues.value.find((issue) => issue.id === id) || {},

packages/renderer/src/components/boards/BoardCard.vue

@@ -1,10 +1,7 @@
 <template>
   <ui-card class="group">
     <div class="flex items-center">
-      <p
-        class="text-overflow font-semibold flex-1 cursor-pointer pr-2"
-        @click="editCard"
-      >
+      <p class="text-overflow flex-1 cursor-pointer pr-2" @click="editCard">
         {{ card.name }}
       </p>
       <ui-popover>

packages/renderer/src/components/boards/BoardColumn.vue

@@ -55,28 +55,35 @@
         </ui-list>
       </ui-popover>
     </div>
-    <div class="space-y-2 overflow-auto flex-1 scroll pb-4">
-      <transition-group-list>
+    <draggable
+      v-model="cards"
+      :animation="500"
+      item-key="id"
+      group="cards"
+      class="space-y-2 overflow-auto flex-1 scroll"
+      @change="onDragChange"
+    >
+      <template #item="{ element }">
         <component
-          v-bind="{ key: card.id, card }"
-          v-for="card in board.cards"
-          :is="card.type === 'issue' ? 'board-issue-card' : 'board-card'"
-          :key="card.id"
-          class="transition-list"
+          v-bind="{ card: element }"
+          :is="element.type === 'issue' ? 'board-issue-card' : 'board-card'"
           @edit="$emit('modal', { ...$event, id: board.id })"
         ></component>
-      </transition-group-list>
-    </div>
+      </template>
+    </draggable>
   </div>
 </template>
 <script>
+import { computed } from 'vue';
+import Draggable from 'vuedraggable/src/vuedraggable';
 import { useDialog } from '@/composable/dialog';
 import Board from '@/models/board';
+import Card from '@/models/card';
 import BoardCard from './BoardCard.vue';
 import BoardIssueCard from './BoardIssueCard.vue';
 
 export default {
-  components: { BoardCard, BoardIssueCard },
+  components: { BoardCard, BoardIssueCard, Draggable },
   props: {
     board: {
       type: Object,
@@ -91,6 +98,22 @@ export default {
   setup(props) {
     const dialog = useDialog();
 
+    const cards = computed({
+      get() {
+        return Card.query()
+          .where('boardId', props.board.id)
+          .orderBy('order')
+          .get();
+      },
+      set(value) {
+        const data = value.map((item, index) => ({ ...item, order: index }));
+        console.log(data);
+        Card.update({
+          data,
+        });
+      },
+    });
+
     function editBoard() {
       dialog.prompt({
         title: 'Edit board',
@@ -116,10 +139,23 @@ export default {
         Board.delete(props.board.id);
       }
     }
+    function onDragChange(event) {
+      if (event.added) {
+        Card.update({
+          where: event.added.element.id,
+          data: {
+            order: event.added.newIndex,
+            boardId: props.board.id,
+          },
+        });
+      }
+    }
 
     return {
+      cards,
       editBoard,
       deleteBoard,
+      onDragChange,
     };
   },
 };

packages/renderer/src/components/package/PackageDetails.vue

@@ -80,7 +80,7 @@
         </div>
         <ui-tabs
           v-model="state.activeTab"
-          class="bg-gray-800 z-50 sticky top-0"
+          class="bg-gray-800 z-50 sticky top-0 mb-4"
         >
           <ui-tab
             v-for="tab in tabs"

packages/renderer/src/components/ui/Checkbox.vue

@@ -7,8 +7,7 @@
       text-primary
       shadow-sm
       cursor-pointer
-      focus:border-primary
-      focus:ring focus:ring-primary
+      focus:border-primary focus:ring focus:ring-primary
       transition
       h-4
       w-4

packages/renderer/src/models/board.js

@@ -13,6 +13,7 @@ class Board extends Model {
       name: this.string(''),
       projectId: this.attr(null),
       cards: this.hasMany(Card, 'boardId'),
+      order: this.number(0),
       createdAt: this.number(Date.now()),
     };
   }

packages/renderer/src/models/card.js

@@ -12,6 +12,7 @@ class Card extends Model {
       name: this.string(''),
       type: this.string(''),
       data: this.attr(null),
+      order: this.number(0),
       boardId: this.attr(null),
       description: this.string(''),
     };

packages/renderer/src/pages/project/[id].vue

@@ -1,6 +1,10 @@
 <template>
   <div class="px-5 pt-5 h-full">
-    <router-view v-bind="{ project, packageJSON }"></router-view>
+    <router-view v-slot="{ Component }">
+      <keep-alive include="MoviesList">
+        <component :is="Component" v-bind="{ project, packageJSON }" />
+      </keep-alive>
+    </router-view>
   </div>
 </template>
 <script>

packages/renderer/src/pages/project/[id]/boards.vue

@@ -11,19 +11,22 @@
     <p v-if="boards.length === 0" class="text-center text-gray-200">
       You have no boards
     </p>
-    <template v-else>
-      <div
-        class="flex space-x-6 scroll pb-4 overflow-auto"
-        style="height: calc(100vh - 6.5rem)"
-      >
+    <draggable
+      v-else
+      v-model="boards"
+      :animation="250"
+      item-key="id"
+      group="boards"
+      class="flex space-x-6 scroll pb-4 overflow-auto"
+      style="height: calc(100vh - 6.5rem)"
+    >
+      <template #item="{ element }">
         <board-column
-          v-for="board in boards"
-          v-bind="{ key: board.id, board, repository: project.repository }"
-          :key="board.id"
+          v-bind="{ board: element, repository: project.repository }"
           @modal="showModal"
         ></board-column>
-      </div>
-    </template>
+      </template>
+    </draggable>
     <ui-modal v-model="modalState.show" position="items-start">
       <template #header>
         <p>{{ modalState.type === 'issue' ? 'Add Issue Card' : 'Add Card' }}</p>
@@ -42,14 +45,15 @@
 import { computed, shallowReactive } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
+import Draggable from 'vuedraggable/src/vuedraggable';
 import { useDialog } from '@/composable/dialog';
 import Board from '@/models/board';
 import AddCard from '@/components/boards/AddCard.vue';
 import BoardColumn from '@/components/boards/BoardColumn.vue';
 import AddIssueCard from '@/components/boards/AddIssueCard.vue';
 
 export default {
-  components: { AddCard, AddIssueCard, BoardColumn },
+  components: { AddCard, AddIssueCard, BoardColumn, Draggable },
   props: {
     packageJSON: {
       type: Object,
@@ -72,18 +76,31 @@ export default {
       boardId: '',
     });
 
-    const boards = computed(() =>
-      Board.query().where('projectId', route.params.id).with('cards').get()
-    );
+    const boards = computed({
+      get() {
+        return Board.query()
+          .where('projectId', route.params.id)
+          .orderBy('order')
+          .get();
+      },
+      set(value) {
+        const data = value.map((item, index) => ({ ...item, order: index }));
+
+        Board.update({ data });
+      },
+    });
 
     function addBoard() {
       dialog.prompt({
         title: 'Add board',
         label: 'Board name',
         onConfirm(name) {
+          const maxOrder = Board.query().max('order');
+
           Board.insert({
             data: {
               name,
+              order: maxOrder + 1,
               projectId: route.params.id,
             },
           });