list action menu is now part of the component

src/components/PreviewPanel.vue

@@ -31,7 +31,7 @@ export default {
 }
 
 .shadow {
-  box-shadow: 0 2px 5px rgba(0,0,0,.1);
+  box-shadow: 0 2px 5px rgba(0,0,0,.2);
 }
 
 .preview-panel > p {

src/views/Home.vue

@@ -19,7 +19,12 @@
     <template #body>
       <div class="main-view">
         <div class="main-view-col">
-          <DirectoryView @selection-changed="onSelectionChanged" @item-activated="onItemActivated" :context-menu="contextMenuModel" :items="items"/>
+          <DirectoryView
+            @selection-changed="onSelectionChanged"
+            @item-activated="onItemActivated"
+            :delete-handler="deleteHandler"
+            :items="items"
+          />
         </div>
         <div class="main-view-col" style="max-width: 300px;">
           <PreviewPanel :item="activeItem || activeDirectoryItem"/>
@@ -78,34 +83,7 @@ export default {
       selectedAppId: '',
       activeApp: null,
       // contextMenuModel will have activeItem attached if any command() is called
-      contextMenuModel: [{
-        label: 'Open',
-        icon:'pi pi-fw pi-reply',
-        disabled: () => {
-          return this.selectedItems.length > 1;
-        },
-        command: () => {
-          this.onItemActivated(this.selectedItems[0]);
-        }
-      }, {
-        separator:true
-      }, {
-        label: 'Copy',
-        icon:'pi pi-fw pi-copy'
-      }, {
-        label: 'Rename',
-        icon:'pi pi-fw pi-pencil',
-        command: this.onRenameItem,
-        disabled: () => {
-          return this.selectedItems.length > 1;
-        }
-      }, {
-        separator:true
-      }, {
-        label: 'Delete',
-        icon:'pi pi-fw pi-trash',
-        command: this.onDeleteItem
-      }],
+
       createMenuModel: [{
         label: 'File',
         icon: 'pi pi-file',
@@ -156,22 +134,6 @@ export default {
     onRenameItem($event) {
       console.log($event, this.contextMenuModel.activeItem);
     },
-    onDeleteItem($event) {
-      this.$confirm.require({
-          header: '',
-          message: 'Really delete files?',
-          icon: 'pi pi-exclamation-triangle',
-          accept: async () => {
-            for (let item of this.selectedItems) {
-              const [error] = await safe(superagent.del(utils.injectFilePathInUrl(`${BASE_URL}/api/v1/apps/${this.selectedAppId}/files/$PATH`, this.cwd, item.name)).query({ access_token: this.accessToken }));
-              if (error) console.error(`Failed to delete file ${item.name}`, error);
-            }
-
-            await this.loadCwd();
-            this.$confirm.close();
-          }
-      });
-    },
     onLogout() {
       delete localStorage.accessToken;
       this.$router.push('/login');
@@ -189,6 +151,10 @@ export default {
       if (item.type === 'directory') this.cwd = sanitize(this.cwd + '/' + item.name);
       else this.$router.push(`/viewer/${this.activeApp.id}${sanitize(this.cwd + '/' + item.name)}`);
     },
+    async deleteHandler(files) {
+      console.log('now delete', files);
+      await this.loadCwd();
+    },
     async loadCwd() {
       const items = await this.directoryModel.listFiles(this.cwd);