Updated Search & progressbar to composition api & typescript

frontend/src/components/ProgressBar.vue

@@ -45,6 +45,7 @@ https://raw.githubusercontent.com/dzwillia/vue-simple-progress/master/src/compon
 </template>
 
 <script>
+// We're leaving this untouched as you can read in the beginning
 var isNumber = function (n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 };

frontend/src/components/Search.vue

@@ -64,143 +64,153 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapState, mapWritableState } from "pinia";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 
 import url from "@/utils/url";
 import { search } from "@/api";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 
-var boxes = {
+const boxes = {
   image: { label: "images", icon: "insert_photo" },
   audio: { label: "music", icon: "volume_up" },
   video: { label: "video", icon: "movie" },
   pdf: { label: "pdf", icon: "picture_as_pdf" },
 };
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "search",
+const fileStore = useFileStore();
-  data: function () {
-    return {
-      value: "",
-      active: false,
-      ongoing: false,
-      results: [],
-      reload: false,
-      resultsCount: 50,
-      scrollable: null,
-    };
-  },
-  inject: ["$showError"],
-  watch: {
-    show(val, old) {
-      this.active = val === "search";
 
-      if (old === "search" && !this.active) {
+const value = ref<string>("");
-        if (this.reload) {
+const active = ref<boolean>(false);
-          this.sReload = true;
+const ongoing = ref<boolean>(false);
+const results = ref<any[]>([]);
+const reload = ref<boolean>(false);
+const resultsCount = ref<number>(50);
+
+const $showError = inject<IToastError>("$showError")!;
+
+const input = ref<HTMLInputElement | null>(null);
+const result = ref<HTMLElement | null>(null);
+
+const { t } = useI18n();
+
+const route = useRoute();
+
+// @ts-ignore
+watch(layoutStore.show, (newVal: string, oldVal: string) => {
+  active.value = newVal === "search";
+
+  if (oldVal === "search" && !active.value) {
+    if (reload.value) {
+      fileStore.reload = true;
     }
 
     document.body.style.overflow = "auto";
-        this.reset();
+    reset();
-        this.value = "";
+    value.value = "";
-        this.active = false;
+    active.value = false;
-        this.$refs.input.blur();
+    input.value?.blur();
-      } else if (this.active) {
+  } else if (active.value) {
-        this.reload = false;
+    reload.value = false;
-        this.$refs.input.focus();
+    input.value?.focus();
     document.body.style.overflow = "hidden";
   }
-    },
+});
-    value() {
+
-      if (this.results.length) {
+watch(value, () => {
-        this.reset();
+  if (results.value.length) {
+    reset();
   }
-    },
+});
-  },
+
-  computed: {
+// ...mapState(useFileStore, ["isListing"]),
-    ...mapState(useFileStore, ["isListing"]),
+// ...mapState(useLayoutStore, ["show"]),
-    ...mapState(useLayoutStore, ["show"]),
+// ...mapWritableState(useFileStore, { sReload: "reload" }),
-    ...mapWritableState(useFileStore, { sReload: "reload" }),
+
-    boxes() {
+const isEmpty = computed(() => {
-      return boxes;
+  return results.value.length === 0;
-    },
+});
-    isEmpty() {
+const text = computed(() => {
-      return this.results.length === 0;
+  if (ongoing.value) {
-    },
-    text() {
-      if (this.ongoing) {
     return "";
   }
 
-      return this.value === ""
+  return value.value === ""
-        ? this.$t("search.typeToSearch")
+    ? t("search.typeToSearch")
-        : this.$t("search.pressToSearch");
+    : t("search.pressToSearch");
-    },
+});
-    filteredResults() {
+const filteredResults = computed(() => {
-      return this.results.slice(0, this.resultsCount);
+  return results.value.slice(0, resultsCount.value);
-    },
+});
-  },
+
-  mounted() {
+onMounted(() => {
-    this.$refs.result.addEventListener("scroll", (event) => {
+  if (result.value === null) {
+    return;
+  }
+  result.value.addEventListener("scroll", (event: Event) => {
     if (
-        event.target.offsetHeight + event.target.scrollTop >=
+      (event.target as HTMLElement).offsetHeight +
-        event.target.scrollHeight - 100
+        (event.target as HTMLElement).scrollTop >=
+      (event.target as HTMLElement).scrollHeight - 100
     ) {
-        this.resultsCount += 50;
+      resultsCount.value += 50;
     }
   });
-  },
+});
-  methods: {
+
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
+const open = () => {
-    open() {
+  layoutStore.showHover("search");
-      this.showHover("search");
+};
-    },
+
-    close(event) {
+const close = (event: Event) => {
   event.stopPropagation();
   event.preventDefault();
-      this.closeHovers();
+  layoutStore.closeHovers();
-    },
+};
-    keyup(event) {
+
+const keyup = (event: KeyboardEvent) => {
   if (event.key === "Escape") {
-        this.close(event);
+    close(event);
     return;
   }
+  results.value.length = 0;
+};
 
-      this.results.length = 0;
+const init = (string: string) => {
-    },
+  value.value = `${string} `;
-    init(string) {
+  input.value !== null ? input.value.focus() : "";
-      this.value = `${string} `;
+};
-      this.$refs.input.focus();
+
-    },
+const reset = () => {
-    reset() {
+  ongoing.value = false;
-      this.ongoing = false;
+  resultsCount.value = 50;
-      this.resultsCount = 50;
+  results.value = [];
-      this.results = [];
+};
-    },
+
-    async submit(event) {
+const submit = async (event: Event) => {
   event.preventDefault();
 
-      if (this.value === "") {
+  if (value.value === "") {
     return;
   }
 
-      let path = this.$route.path;
+  let path = route.path;
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     path = url.removeLastDir(path) + "/";
   }
 
-      this.ongoing = true;
+  ongoing.value = true;
 
   try {
-        this.results = await search(path, this.value);
+    results.value = await search(path, value.value);
-      } catch (error) {
+  } catch (error: any) {
-        this.$showError(error);
+    $showError(error);
   }
 
-      this.ongoing = false;
+  ongoing.value = false;
-    },
-  },
 };
 </script>