Fix Delete/rename contracts

products/neo-savant/src/components/Files/FileName.vue

@@ -1,76 +1,87 @@
 <template>
-  <div
-    class="file-name"
-    :class="{'selected' : selected}"
-    @click="$emit('select-file', file.id)"
-    @contextmenu.prevent="$refs.menu.open"
-  >
+  <div class="file-name" :class="{ 'selected': selected }" @click="$emit('select-file', file.id)"
+    @contextmenu="onContextMenu">
     <span class="editable" @dblclick="edit = true" v-if="!edit">{{ file.name }}</span>
-    <input v-if="edit" v-model="file.name" v-on:blur="handleRename" @keyup.enter="handleRename" />
+    <input v-if="edit" v-model="newFileName" @blur="edit = false; newFileName = file.name"
+      @keyup.enter="handleRename" @keyup.esc = "edit = false; newFileName = file.name"/>
     <span class="extension">.scilla</span>
-
-    <vue-context class="context-menu" ref="menu">
-      <li>
-        <a href="#" @click.prevent="edit = true">Rename</a>
-      </li>
-      <li>
-        <a href="#" @click.prevent="handleDelete">Delete</a>
-      </li>
-    </vue-context>
   </div>
 </template>
 
-<script>
-import { VueContext } from "vue-context";
+<script setup>
+import ContextMenu from '@imengyu/vue3-context-menu'
+import { defineProps, ref, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+import { notify } from "@kyvg/vue3-notification";
 
-export default {
-  data() {
-    return {
-      edit: false
-    };
-  },
-  props: ["file", "selected"],
-  components: { VueContext },
-  methods: {
-    handleRename() {
-      this.edit = false;
+const store = useStore();
+const props = defineProps(["file", "selected"])
+defineEmits(['select-file'])
+const edit = ref(false)
+const newFileName = ref(props.file.name)
 
-      this.$store
-        .dispatch("files/RenameFile", {
-          id: this.file.id,
-          name: this.file.name
-        })
-        .then(() => {
-          this.$notify({
-            group: "scilla",
-            type: "success",
-            position: "bottom right",
-            title: "Files",
-            text: "File has been renamed"
-          });
-        });
-    },
-    handleDelete() {
-      const confirmed = confirm("Are you sure you want to delete this file?");
+const handleRename = () => {
+  console.log("here")
+  edit.value = false;
 
-      if (confirmed) {
-        this.$store
-          .dispatch("files/RemoveFile", {
-            id: this.file.id
-          })
-          .then(() => {
-            this.$notify({
-              group: "scilla",
-              type: "success",
-              position: "bottom right",
-              title: "Files",
-              text: "File has been deleted"
-            });
-          });
-      }
-    }
+  store
+    .dispatch("files/RenameFile", {
+      id: props.file.id,
+      name: newFileName.value
+    })
+    .then(() => {
+      notify({
+        group: "scilla",
+        type: "success",
+        position: "bottom right",
+        title: "Files",
+        text: "File has been renamed"
+      });
+    });
+}
+
+const handleDelete = () => {
+  const confirmed = confirm("Are you sure you want to delete this file?");
+
+  if (confirmed) {
+    store
+      .dispatch("files/RemoveFile", {
+        id: props.file.id
+      })
+      .then(() => {
+        notify({
+          group: "scilla",
+          type: "success",
+          position: "bottom right",
+          title: "Files",
+          text: "File has been deleted"
+        });
+      });
   }
-};
+}
+
+const onContextMenu = (e) => {
+  // Prevent the browser's default menu
+  e.preventDefault();
+  ContextMenu.showContextMenu({
+    x: e.x,
+    y: e.y,
+    items: [
+      {
+        label: "Rename",
+        onClick: () => {
+          edit.value = true;
+        }
+      },
+      {
+        label: "Delete",
+        onClick: () => {
+          handleDelete()
+        }
+      },
+    ]
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -95,4 +106,4 @@ export default {
     }
   }
 }
-</style>
+</style>