Added trash

src/components/Explorer.vue

@@ -46,7 +46,10 @@ export default {
       'toggleExplorer',
     ]),
     newItem(isFolder) {
-      const parentId = this.$store.getters['explorer/selectedNodeFolder'].item.id;
+      let parentId = this.$store.getters['explorer/selectedNodeFolder'].item.id;
+      if (parentId === 'trash') {
+        parentId = undefined;
+      }
       this.$store.dispatch('explorer/openNode', parentId);
       this.$store.commit('explorer/setNewItem', {
         type: isFolder ? 'folder' : 'file',
@@ -55,11 +58,17 @@ export default {
     },
     editItem() {
       const selectedNode = this.$store.getters['explorer/selectedNode'];
+      if (selectedNode.item.id !== 'trash') {
         this.$store.commit('explorer/setEditingId', selectedNode.item.id);
+      }
     },
     deleteItem() {
       const selectedNode = this.$store.getters['explorer/selectedNode'];
       if (!selectedNode.isNil) {
+        if (selectedNode.item.id === 'trash' || selectedNode.item.parentId === 'trash') {
+          this.$store.dispatch('modal/trashDeletion');
+          return;
+        }
         this.$store.dispatch(selectedNode.isFolder
           ? 'modal/folderDeletion'
           : 'modal/fileDeletion',
@@ -67,16 +76,22 @@ export default {
           .then(() => {
             if (selectedNode === this.$store.getters['explorer/selectedNode']) {
               if (selectedNode.isFolder) {
-                const recursiveDelete = (folderNode) => {
-                  folderNode.folders.forEach(recursiveDelete);
+                const recursiveMoveToTrash = (folderNode) => {
+                  folderNode.folders.forEach(recursiveMoveToTrash);
                   folderNode.files.forEach((fileNode) => {
-                    this.$store.commit('file/deleteItem', fileNode.item.id);
+                    this.$store.commit('file/patchItem', {
+                      id: fileNode.item.id,
+                      parentId: 'trash',
+                    });
                   });
                   this.$store.commit('folder/deleteItem', folderNode.item.id);
                 };
-                recursiveDelete(selectedNode);
+                recursiveMoveToTrash(selectedNode);
               } else {
-                this.$store.commit('file/deleteItem', selectedNode.item.id);
+                this.$store.commit('file/patchItem', {
+                  id: selectedNode.item.id,
+                  parentId: 'trash',
+                });
               }
             }
           });

src/components/ExplorerNode.vue

@@ -129,12 +129,11 @@ export default {
       this.$store.commit('explorer/setEditingId', null);
     },
     setDragSourceId(evt) {
-      const id = this.node.item.id;
-      if (id === 'fake') {
+      if (this.node.noDrag) {
         evt.preventDefault();
         return;
       }
-      this.$store.commit('explorer/setDragSourceId', id);
+      this.$store.commit('explorer/setDragSourceId', this.node.item.id);
     },
     onDrop() {
       const sourceNode = this.$store.getters['explorer/dragSourceNode'];

src/store/modules/explorer.js

@@ -42,6 +42,7 @@ const nilFileNode = new Node(emptyFile());
 nilFileNode.isNil = true;
 const fakeFileNode = new Node(emptyFile());
 fakeFileNode.item.id = 'fake';
+fakeFileNode.noDrag = true;
 
 function getParent(node, getters) {
   if (node.isNil) {
@@ -68,7 +69,13 @@ export default {
   },
   getters: {
     nodeStructure: (state, getters, rootState, rootGetters) => {
-      const nodeMap = {};
+      const trashFolderNode = new Node(emptyFolder(), [], true);
+      trashFolderNode.item.id = 'trash';
+      trashFolderNode.item.name = 'Trash';
+      trashFolderNode.noDrag = true;
+      const nodeMap = {
+        trash: trashFolderNode,
+      };
       rootGetters['folder/items'].forEach((item) => {
         nodeMap[item.id] = new Node(item, [], true);
       });
@@ -84,6 +91,9 @@ export default {
         const node = nodeMap[id];
         let parentNode = nodeMap[node.item.parentId];
         if (!parentNode || !parentNode.isFolder) {
+          if (id === 'trash') {
+            return;
+          }
           parentNode = rootNode;
         }
         if (node.isFolder) {
@@ -93,6 +103,9 @@ export default {
         }
       });
       rootNode.sortChildren();
+      if (trashFolderNode.files.length) {
+        rootNode.folders.unshift(trashFolderNode);
+      }
       // Add a fake file at the end of the root folder to always allow drag and drop into it.
       rootNode.files.push(fakeFileNode);
       return {