Converted views/settings/Shares.vue to composition api & ts

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.path") }}</th>
-              <th>{{ $t("settings.shareDuration") }}</th>
+              <th>{{ t("settings.shareDuration") }}</th>
-              <th v-if="user.perm.admin">{{ $t("settings.username") }}</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')"
+                  :aria-label="t('buttons.delete')"
-                  :title="$t('buttons.delete')"
+                  :title="t('buttons.delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
@@ -42,8 +44,8 @@
                 <button
                   class="action copy-clipboard"
                   :data-clipboard-text="buildLink(link)"
-                  :aria-label="$t('buttons.copyToClipboard')"
+                  :aria-label="t('buttons.copyToClipboard')"
-                  :title="$t('buttons.copyToClipboard')"
+                  :title="t('buttons.copyToClipboard')"
                 >
                   <i class="material-icons">content_paste</i>
                 </button>
@@ -53,94 +55,87 @@
         </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 { mapState, mapWritableState } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { share as api, users } from "@/api";
 import dayjs from "dayjs";
 import Clipboard from "clipboard";
 import Errors from "@/views/Errors.vue";
+import { inject, onBeforeUnmount, ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
+const $showError = inject("$showError") as TToast;
-  name: "shares",
+const $showSuccess = inject("$showSuccess") as TToast;
-  components: {
+const { t } = useI18n();
-    Errors,
-  },
-  inject: ["$showError", "$showSuccess"],
-  computed: {
-    ...mapState(useAuthStore, ["user"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-  },
-  data: function () {
-    return {
-      error: null,
-      links: [],
-      clip: null,
-    };
-  },
-  async created() {
-    this.loading = true;
 
-    try {
+const layoutStore = useLayoutStore();
-      let links = await api.list();
+const authStore = useAuthStore();
-      if (this.user.perm.admin) {
+
-        let userMap = new Map();
+// ...mapState(useAuthStore, ["user"]),
-        for (let user of await users.getAll())
+// ...mapWritableState(useLayoutStore, ["loading"]),
-          userMap.set(user.id, user.username);
+const error = ref<any>(null);
-        for (let link of links)
+const links = ref<any[]>([]);
-          link.username = userMap.has(link.userID)
+const clip = ref<Clipboard | null>(null);
-            ? userMap.get(link.userID)
+
-            : "";
+onMounted(async () => {
-      }
+  layoutStore.loading = true;
-      this.links = links;
+
-    } catch (e) {
+  try {
-      this.error = e;
+    let newLinks = await api.list();
-    } finally {
+    if (authStore.user?.perm.admin) {
-      this.loading = false;
+      let userMap = new Map();
+      for (let user of await users.getAll())
+        userMap.set(user.id, user.username);
+      for (let link of newLinks)
+        link.username = userMap.has(link.userID)
+          ? userMap.get(link.userID)
+          : "";
     }
-  },
+    links.value = newLinks;
-  mounted() {
+  } catch (e: any) {
-    this.clip = new Clipboard(".copy-clipboard");
+    error.value = e;
-    this.clip.on("success", () => {
+  } finally {
-      this.$showSuccess(this.$t("success.linkCopied"));
+    layoutStore.loading = false;
-    });
+  }
-  },
+  clip.value = new Clipboard(".copy-clipboard");
-  beforeUnmount() {
+  clip.value.on("success", () => {
-    this.clip.destroy();
+    $showSuccess(t("success.linkCopied"));
-  },
+  });
-  methods: {
+});
-    deleteLink: async function (event, link) {
-      event.preventDefault();
 
-      this.showHover({
+onBeforeUnmount(() => clip.value?.destroy());
-        prompt: "share-delete",
-        confirm: () => {
-          this.closeHovers();
 
-          try {
+const deleteLink = async (event: Event, link: any) => {
-            api.remove(link.hash);
+  event.preventDefault();
-            this.links = this.links.filter((item) => item.hash !== link.hash);
+
-            this.$showSuccess(this.$t("settings.shareDeleted"));
+  layoutStore.showHover({
-          } catch (e) {
+    prompt: "share-delete",
-            this.$showError(e);
+    confirm: () => {
-          }
+      layoutStore.closeHovers();
-        },
+
-      });
+      try {
+        api.remove(link.hash);
+        links.value = links.value.filter((item) => item.hash !== link.hash);
+        $showSuccess(t("settings.shareDeleted"));
+      } catch (e: any) {
+        $showError(e);
+      }
     },
-    humanTime(time) {
+  });
-      return dayjs(time * 1000).fromNow();
+};
-    },
+const humanTime = (time: number) => {
-    buildLink(share) {
+  return dayjs(time * 1000).fromNow();
-      return api.getShareURL(share);
+};
-    },
+
-  },
+const buildLink = (share: IShare) => {
+  return api.getShareURL(share);
 };
 </script>