Implement composition API in Rename.vue file

frontend/src/components/prompts/Rename.vue

@@ -6,8 +6,7 @@
 
     <div class="card-content">
       <p>
-        {{ $t("prompts.renameMessage") }} <code>{{ oldName() }}</code
+        {{ $t("prompts.renameMessage") }} <code>{{ oldName() }}</code>:
-        >:
       </p>
       <input
         id="focus-prompt"
@@ -40,85 +39,75 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { mapActions, mapState, mapWritableState } from "pinia";
+import { ref, inject, onMounted } from "vue";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";
 import { removePrefix } from "@/api/utils";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-export default {
+const { t } = useI18n();
-  name: "rename",
+const $showError = inject("$showError");
-  data: function () {
+const router = useRouter();
-    return {
+
-      name: "",
+const fileStore = useFileStore();
-    };
+const layoutStore = useLayoutStore();
-  },
+
-  created() {
+const name = ref("");
-    this.name = this.oldName();
+
-  },
+const oldName = () => {
-  inject: ["$showError"],
+  if (!fileStore.isListing) {
-  computed: {
+    return fileStore.req.name;
-    ...mapState(useFileStore, [
-      "req",
-      "selected",
-      "selectedCount",
-      "isListing",
-    ]),
-    ...mapWritableState(useFileStore, ["reload", "preselect"]),
-  },
-  methods: {
-    ...mapActions(useLayoutStore, ["closeHovers"]),
-    cancel: function () {
-      this.closeHovers();
-    },
-    oldName: function () {
-      if (!this.isListing) {
-        return this.req.name;
   }
 
-      if (this.selectedCount === 0 || this.selectedCount > 1) {
+  if (fileStore.selectedCount === 0 || fileStore.selectedCount > 1) {
-        // This shouldn't happen.
     return;
   }
 
-      return this.req.items[this.selected[0]].name;
+  return fileStore.req.items[fileStore.selected[0]].name;
-    },
+};
-    submit: async function () {
+
-      if(this.name.includes('/')) {
+onMounted(() => {
-        this.$showError(new Error(this.$t('errors.invalidName')));
+  name.value = oldName();
-        this.closeHovers();
+});
+
+const submit = async () => {
+  if (name.value.includes("/")) {
+    $showError(new Error(t("errors.invalidName")));
+    layoutStore.closeHovers();
     return;
   }
+
   let oldLink = "";
   let newLink = "";
 
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
-        oldLink = this.req.url;
+    oldLink = fileStore.req.url;
   } else {
-        oldLink = this.req.items[this.selected[0]].url;
+    oldLink = fileStore.req.items[fileStore.selected[0]].url;
   }
 
-      newLink =
+  newLink = url.removeLastDir(oldLink) + "/" + encodeURIComponent(name.value);
-        url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
 
   try {
     await api.move([{ from: oldLink, to: newLink }]);
-        if (!this.isListing) {
+
-          this.$router.push({ path: newLink });
+    if (!fileStore.isListing) {
+      router.push({ path: newLink });
       return;
     }
 
-        this.preselect = removePrefix(newLink);
+    fileStore.preselect = removePrefix(newLink);
-
+    fileStore.reload = true;
-        this.reload = true;
   } catch (e) {
-        this.$showError(e);
+    $showError(e);
   }
 
-      this.closeHovers();
+  layoutStore.closeHovers();
-    },
-  },
 };
+
+const closeHovers = layoutStore.closeHovers;
 </script>