feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/views/settings/Shares.vue

@@ -1,18 +1,20 @@
 <template>
   <errors v-if="error" :errorCode="error.status" />
-  <div class="row" v-else-if="!loading">
+  <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t("settings.shareManagement") }}</h2>
+          <h2>{{ t("settings.shareManagement") }}</h2>
         </div>
 
         <div class="card-content full" v-if="links.length > 0">
           <table>
             <tr>
-              <th>{{ $t("settings.path") }}</th>
-              <th>{{ $t("settings.shareDuration") }}</th>
-              <th v-if="user.perm.admin">{{ $t("settings.username") }}</th>
+              <th>{{ t("settings.path") }}</th>
+              <th>{{ t("settings.shareDuration") }}</th>
+              <th v-if="authStore.user?.perm.admin">
+                {{ t("settings.username") }}
+              </th>
               <th></th>
               <th></th>
             </tr>
@@ -25,15 +27,15 @@
                 <template v-if="link.expire !== 0">{{
                   humanTime(link.expire)
                 }}</template>
-                <template v-else>{{ $t("permanent") }}</template>
+                <template v-else>{{ t("permanent") }}</template>
               </td>
-              <td v-if="user.perm.admin">{{ link.username }}</td>
+              <td v-if="authStore.user?.perm.admin">{{ link.username }}</td>
               <td class="small">
                 <button
                   class="action"
                   @click="deleteLink($event, link)"
-                  :aria-label="$t('buttons.delete')"
-                  :title="$t('buttons.delete')"
+                  :aria-label="t('buttons.delete')"
+                  :title="t('buttons.delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
@@ -41,9 +43,9 @@
               <td class="small">
                 <button
                   class="action copy-clipboard"
-                  :data-clipboard-text="buildLink(link)"
-                  :aria-label="$t('buttons.copyToClipboard')"
-                  :title="$t('buttons.copyToClipboard')"
+                  :aria-label="t('buttons.copyToClipboard')"
+                  :title="t('buttons.copyToClipboard')"
+                  @click="copyToClipboard(buildLink(link))"
                 >
                   <i class="material-icons">content_paste</i>
                 </button>
@@ -53,89 +55,95 @@
         </div>
         <h2 class="message" v-else>
           <i class="material-icons">sentiment_dissatisfied</i>
-          <span>{{ $t("files.lonely") }}</span>
+          <span>{{ t("files.lonely") }}</span>
         </h2>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import { share as api, users } from "@/api";
-import { mapState, mapMutations } from "vuex";
-import moment from "moment/min/moment-with-locales";
-import Clipboard from "clipboard";
+import dayjs from "dayjs";
 import Errors from "@/views/Errors.vue";
+import { inject, ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
+import { copy } from "@/utils/clipboard";
 
-export default {
-  name: "shares",
-  components: {
-    Errors,
-  },
-  computed: mapState(["user", "loading"]),
-  data: function () {
-    return {
-      error: null,
-      links: [],
-      clip: null,
-    };
-  },
-  async created() {
-    this.setLoading(true);
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+const { t } = useI18n();
 
-    try {
-      let links = await api.list();
-      if (this.user.perm.admin) {
-        let userMap = new Map();
-        for (let user of await users.getAll())
-          userMap.set(user.id, user.username);
-        for (let link of links)
-          link.username = userMap.has(link.userID)
-            ? userMap.get(link.userID)
-            : "";
+const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
+
+const error = ref<StatusError | null>(null);
+const links = ref<Share[]>([]);
+
+onMounted(async () => {
+  layoutStore.loading = true;
+
+  try {
+    let newLinks = await api.list();
+    if (authStore.user?.perm.admin) {
+      let userMap = new Map<number, string>();
+      for (let user of await users.getAll())
+        userMap.set(user.id, user.username);
+      for (let link of newLinks) {
+        if (link.userID && userMap.has(link.userID))
+          link.username = userMap.get(link.userID);
       }
-      this.links = links;
-    } catch (e) {
-      this.error = e;
-    } finally {
-      this.setLoading(false);
     }
-  },
-  mounted() {
-    this.clip = new Clipboard(".copy-clipboard");
-    this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
-    });
-  },
-  beforeDestroy() {
-    this.clip.destroy();
-  },
-  methods: {
-    ...mapMutations(["setLoading"]),
-    deleteLink: async function (event, link) {
-      event.preventDefault();
+    links.value = newLinks;
+  } catch (err) {
+    if (err instanceof Error) {
+      error.value = err;
+    }
+  } finally {
+    layoutStore.loading = false;
+  }
+});
 
-      this.$store.commit("showHover", {
-        prompt: "share-delete",
-        confirm: () => {
-          this.$store.commit("closeHovers");
+const copyToClipboard = (text: string) => {
+  copy(text).then(
+    () => {
+      // clipboard successfully set
+      $showSuccess(t("success.linkCopied"));
+    },
+    () => {
+      // clipboard write failed
+    }
+  );
+};
 
-          try {
-            api.remove(link.hash);
-            this.links = this.links.filter((item) => item.hash !== link.hash);
-            this.$showSuccess(this.$t("settings.shareDeleted"));
-          } catch (e) {
-            this.$showError(e);
-          }
-        },
-      });
+const deleteLink = async (event: Event, link: any) => {
+  event.preventDefault();
+
+  layoutStore.showHover({
+    prompt: "share-delete",
+    confirm: () => {
+      layoutStore.closeHovers();
+
+      try {
+        api.remove(link.hash);
+        links.value = links.value.filter((item) => item.hash !== link.hash);
+        $showSuccess(t("settings.shareDeleted"));
+      } catch (err) {
+        if (err instanceof Error) {
+          $showError(err);
+        }
+      }
     },
-    humanTime(time) {
-      return moment(time * 1000).fromNow();
-    },
-    buildLink(share) {
-      return api.getShareURL(share);
-    },
-  },
+  });
+};
+const humanTime = (time: number) => {
+  return dayjs(time * 1000).fromNow();
+};
+
+const buildLink = (share: Share) => {
+  return api.getShareURL(share);
 };
 </script>