Fixed issues in filelisting

frontend/src/views/files/FileListing.vue

@@ -6,7 +6,7 @@
       <action
         class="search-button"
         icon="search"
-        :label="$t('buttons.search')"
+        :label="t('buttons.search')"
         @action="openSearch()"
       />
 
@@ -15,34 +15,34 @@
           <action
             v-if="headerButtons.share"
             icon="share"
-            :label="$t('buttons.share')"
+            :label="t('buttons.share')"
             show="share"
           />
           <action
             v-if="headerButtons.rename"
             icon="mode_edit"
-            :label="$t('buttons.rename')"
+            :label="t('buttons.rename')"
             show="rename"
           />
           <action
             v-if="headerButtons.copy"
             id="copy-button"
             icon="content_copy"
-            :label="$t('buttons.copyFile')"
+            :label="t('buttons.copyFile')"
             show="copy"
           />
           <action
             v-if="headerButtons.move"
             id="move-button"
             icon="forward"
-            :label="$t('buttons.moveFile')"
+            :label="t('buttons.moveFile')"
             show="move"
           />
           <action
             v-if="headerButtons.delete"
             id="delete-button"
             icon="delete"
-            :label="$t('buttons.delete')"
+            :label="t('buttons.delete')"
             show="delete"
           />
         </template>
@@ -50,18 +50,18 @@
         <action
           v-if="headerButtons.shell"
           icon="code"
-          :label="$t('buttons.shell')"
+          :label="t('buttons.shell')"
           @action="layoutStore.toggleShell"
         />
         <action
           :icon="viewIcon"
-          :label="$t('buttons.switchView')"
+          :label="t('buttons.switchView')"
           @action="switchView"
         />
         <action
           v-if="headerButtons.download"
           icon="file_download"
-          :label="$t('buttons.download')"
+          :label="t('buttons.download')"
           @action="download"
           :counter="fileStore.selectedCount"
         />
@@ -69,48 +69,50 @@
           v-if="headerButtons.upload"
           icon="file_upload"
           id="upload-button"
-          :label="$t('buttons.upload')"
+          :label="t('buttons.upload')"
-          @action="upload"
+          @action="uploadFunc"
         />
-        <action icon="info" :label="$t('buttons.info')" show="info" />
+        <action icon="info" :label="t('buttons.info')" show="info" />
         <action
           icon="check_circle"
-          :label="$t('buttons.selectMultiple')"
+          :label="t('buttons.selectMultiple')"
           @action="toggleMultipleSelection"
         />
       </template>
     </header-bar>
 
     <div v-if="isMobile" id="file-selection">
-      <span v-if="fileStore.selectedCount > 0">{{ fileStore.selectedCount }} selected</span>
+      <span v-if="fileStore.selectedCount > 0"
+        >{{ fileStore.selectedCount }} selected</span
+      >
       <action
         v-if="headerButtons.share"
         icon="share"
-        :label="$t('buttons.share')"
+        :label="t('buttons.share')"
         show="share"
       />
       <action
         v-if="headerButtons.rename"
         icon="mode_edit"
-        :label="$t('buttons.rename')"
+        :label="t('buttons.rename')"
         show="rename"
       />
       <action
         v-if="headerButtons.copy"
         icon="content_copy"
-        :label="$t('buttons.copyFile')"
+        :label="t('buttons.copyFile')"
         show="copy"
       />
       <action
         v-if="headerButtons.move"
         icon="forward"
-        :label="$t('buttons.moveFile')"
+        :label="t('buttons.moveFile')"
         show="move"
       />
       <action
         v-if="headerButtons.delete"
         icon="delete"
-        :label="$t('buttons.delete')"
+        :label="t('buttons.delete')"
         show="delete"
       />
     </div>
@@ -122,14 +124,18 @@
           <div class="bounce2"></div>
           <div class="bounce3"></div>
         </div>
-        <span>{{ $t("files.loading") }}</span>
+        <span>{{ t("files.loading") }}</span>
       </h2>
     </div>
     <template v-else>
-      <div v-if="(fileStore.req?.numDirs ?? 0) + (fileStore.req?.numFiles ?? 0) == 0">
+      <div
+        v-if="
+          (fileStore.req?.numDirs ?? 0) + (fileStore.req?.numFiles ?? 0) == 0
+        "
+      >
         <h2 class="message">
           <i class="material-icons">sentiment_dissatisfied</i>
-          <span>{{ $t("files.lonely") }}</span>
+          <span>{{ t("files.lonely") }}</span>
         </h2>
         <input
           style="display: none"
@@ -151,7 +157,8 @@
         v-else
         id="listing"
         ref="listing"
-        :class="authStore.user?.viewMode ?? '' + ' file-icons'"
+        class="file-icons"
+        :class="authStore.user?.viewMode ?? ''"
       >
         <div>
           <div class="item header">
@@ -163,10 +170,10 @@
                 role="button"
                 tabindex="0"
                 @click="sort('name')"
-                :title="$t('files.sortByName')"
+                :title="t('files.sortByName')"
-                :aria-label="$t('files.sortByName')"
+                :aria-label="t('files.sortByName')"
               >
-                <span>{{ $t("files.name") }}</span>
+                <span>{{ t("files.name") }}</span>
                 <i class="material-icons">{{ nameIcon }}</i>
               </p>
 
@@ -176,10 +183,10 @@
                 role="button"
                 tabindex="0"
                 @click="sort('size')"
-                :title="$t('files.sortBySize')"
+                :title="t('files.sortBySize')"
-                :aria-label="$t('files.sortBySize')"
+                :aria-label="t('files.sortBySize')"
               >
-                <span>{{ $t("files.size") }}</span>
+                <span>{{ t("files.size") }}</span>
                 <i class="material-icons">{{ sizeIcon }}</i>
               </p>
               <p
@@ -188,17 +195,19 @@
                 role="button"
                 tabindex="0"
                 @click="sort('modified')"
-                :title="$t('files.sortByLastModified')"
+                :title="t('files.sortByLastModified')"
-                :aria-label="$t('files.sortByLastModified')"
+                :aria-label="t('files.sortByLastModified')"
               >
-                <span>{{ $t("files.lastModified") }}</span>
+                <span>{{ t("files.lastModified") }}</span>
                 <i class="material-icons">{{ modifiedIcon }}</i>
               </p>
             </div>
           </div>
         </div>
 
-        <h2 v-if="fileStore.req?.numDirs ?? 0 > 0">{{ $t("files.folders") }}</h2>
+        <h2 v-if="fileStore.req?.numDirs ?? 0 > 0">
+          {{ t("files.folders") }}
+        </h2>
         <div v-if="fileStore.req?.numDirs ?? 0 > 0">
           <item
             v-for="item in dirs"
@@ -215,7 +224,7 @@
           </item>
         </div>
 
-        <h2 v-if="fileStore.req?.numFiles ?? 0 > 0">{{ $t("files.files") }}</h2>
+        <h2 v-if="fileStore.req?.numFiles ?? 0 > 0">{{ t("files.files") }}</h2>
         <div v-if="fileStore.req?.numFiles ?? 0 > 0">
           <item
             v-for="item in files"
@@ -249,13 +258,13 @@
         />
 
         <div :class="{ active: fileStore.multiple }" id="multiple-selection">
-          <p>{{ $t("files.multipleSelectionEnabled") }}</p>
+          <p>{{ t("files.multipleSelectionEnabled") }}</p>
           <div
             @click="() => (fileStore.multiple = false)"
             tabindex="0"
             role="button"
-            :title="$t('files.clear')"
+            :title="t('files.clear')"
-            :aria-label="$t('files.clear')"
+            :aria-label="t('files.clear')"
             class="action"
           >
             <i class="material-icons">clear</i>
@@ -267,7 +276,6 @@
 </template>
 
 <script setup lang="ts">
-import { mapState, mapWritableState, mapActions, mapStores } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useClipboardStore } from "@/stores/clipboard";
 import { useFileStore } from "@/stores/file";
@@ -284,16 +292,25 @@ import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import Search from "@/components/Search.vue";
 import Item from "@/components/files/ListingItem.vue";
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
-import { RouteLocation, useRoute, useRouter } from "vue-router";
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-const showLimit = ref<number>(50)
+const showLimit = ref<number>(50);
-const columnWidth = ref<number>(280)
+const columnWidth = ref<number>(280);
-const dragCounter = ref<number>(0)
+const dragCounter = ref<number>(0);
-const width = ref<number>(window.innerWidth)
+const width = ref<number>(window.innerWidth);
-const itemWeight = ref<number>(0)
+const itemWeight = ref<number>(0);
 
-const $showError = inject<IToastError>('$showError')!
+const $showError = inject<IToastError>("$showError")!;
 
 const clipboardStore = useClipboardStore();
 const authStore = useAuthStore();
@@ -301,9 +318,10 @@ const fileStore = useFileStore();
 const layoutStore = useLayoutStore();
 
 const route = useRoute();
-const router = useRouter();
 
-const listing = ref<HTMLElement | null>(null)
+const { t } = useI18n();
+
+const listing = ref<HTMLElement | null>(null);
 
 // ...mapStores(useClipboardStore),
 // ...mapState(useAuthStore, ["user"]),
@@ -317,16 +335,23 @@ const listing = ref<HTMLElement | null>(null)
 //   "reload",
 // ])
 
+const nameSorted = computed(() =>
+  fileStore.req ? fileStore.req.sorting.by === "name" : false
+);
 
-const nameSorted = computed(() => (fileStore.req ? fileStore.req.sorting.by === "name" : false))
+const sizeSorted = computed(() =>
+  fileStore.req ? fileStore.req.sorting.by === "size" : false
+);
 
-const sizeSorted = computed(() => (fileStore.req ? fileStore.req.sorting.by === "size" : false))
+const modifiedSorted = computed(() =>
+  fileStore.req ? fileStore.req.sorting.by === "modified" : false
+);
 
-const modifiedSorted = computed(() => (fileStore.req ? fileStore.req.sorting.by === "modified" : false))
+const ascOrdered = computed(() =>
+  fileStore.req ? fileStore.req.sorting.asc : false
+);
 
-const ascOrdered = computed(() => (fileStore.req ? fileStore.req.sorting.asc : false))
+const dirs = computed(() => items.value.dirs.slice(0, showLimit.value));
-
-const dirs = computed(() =>  items.value.dirs.slice(0, showLimit.value))
 
 const items = computed(() => {
   const dirs: any[] = [];
@@ -341,15 +366,15 @@ const items = computed(() => {
   });
 
   return { dirs, files };
-})
+});
 
-const files = computed(() => {
+const files = computed((): Resource[] => {
   let _showLimit = showLimit.value - items.value.dirs.length;
 
   if (_showLimit < 0) _showLimit = 0;
 
   return items.value.files.slice(0, _showLimit);
-})
+});
 
 const nameIcon = computed(() => {
   if (nameSorted.value && !ascOrdered.value) {
@@ -357,7 +382,7 @@ const nameIcon = computed(() => {
   }
 
   return "arrow_downward";
-})
+});
 
 const sizeIcon = computed(() => {
   if (sizeSorted.value && ascOrdered.value) {
@@ -365,7 +390,7 @@ const sizeIcon = computed(() => {
   }
 
   return "arrow_upward";
-})
+});
 
 const modifiedIcon = computed(() => {
   if (modifiedSorted.value && ascOrdered.value) {
@@ -373,7 +398,7 @@ const modifiedIcon = computed(() => {
   }
 
   return "arrow_upward";
-})
+});
 
 const viewIcon = computed(() => {
   const icons = {
@@ -381,8 +406,10 @@ const viewIcon = computed(() => {
     mosaic: "grid_view",
     "mosaic gallery": "view_list",
   };
-      return (authStore.user === null ? icons['list']: icons[authStore.user.viewMode])
+  return authStore.user === null
-})
+    ? icons["list"]
+    : icons[authStore.user.viewMode];
+});
 
 const headerButtons = computed(() => {
   return {
@@ -395,11 +422,11 @@ const headerButtons = computed(() => {
     move: fileStore.selectedCount > 0 && authStore.user?.perm.rename,
     copy: fileStore.selectedCount > 0 && authStore.user?.perm.create,
   };
-})
+});
 
 const isMobile = computed(() => {
   return width.value <= 736;
-})
+});
 
 // @ts-ignore
 // TODO
@@ -407,17 +434,15 @@ watch(fileStore.req, () => {
   // Reset the show value
   showLimit.value = 50;
 
+  nextTick(() => {
     // Ensures that the listing is displayed
-  // TODO: implement nextTick
+    // How much every listing item affects the window height
-  // this.$nextTick(() => {
+    setItemWeight();
-  //   // How much every listing item affects the window height
-  //   setItemWeight();
-
-  //   // Fill and fit the window with listing items
-  //   fillWindow(true);
-  // });
-})
 
+    // Fill and fit the window with listing items
+    fillWindow(true);
+  });
+});
 
 onMounted(() => {
   // Check the columns size for the first time.
@@ -439,7 +464,7 @@ onMounted(() => {
   document.addEventListener("dragenter", dragEnter);
   document.addEventListener("dragleave", dragLeave);
   document.addEventListener("drop", drop);
-})
+});
 
 onBeforeUnmount(() => {
   // Remove event listeners before destroying this page.
@@ -452,13 +477,9 @@ onBeforeUnmount(() => {
   document.removeEventListener("dragenter", dragEnter);
   document.removeEventListener("dragleave", dragLeave);
   document.removeEventListener("drop", drop);
-})
+});
 
-// ...mapActions(useAuthStore, ["updateUser"]),
+const base64 = (name: string) => Base64.encodeURI(name);
-// ...mapActions(useLayoutStore, ["showHover", "closeHovers", "layoutStore.toggleShell"]),
-
-
-const base64 = (name: string) => Base64.encodeURI(name)
 
 const keyEvent = (event: KeyboardEvent) => {
   // No prompts are shown
@@ -522,28 +543,28 @@ const keyEvent = (event: KeyboardEvent) => {
       document.getElementById("download-button")?.click();
       break;
   }
-}
+};
 
 const preventDefault = (event: Event) => {
   // Wrapper around prevent default.
   event.preventDefault();
-}
+};
 
 const copyCut = (event: Event, key: string): void => {
-  if ((<HTMLElement>event.target).tagName?.toLowerCase() === "input") return;
+  if ((event.target as HTMLElement).tagName?.toLowerCase() === "input") return;
 
-  if(fileStore.req === null) return
+  if (fileStore.req === null) return;
 
   let items = [];
 
   for (let i of fileStore.selected) {
     items.push({
       from: fileStore.req.items[i].url,
-      name: fileStore.req.items[i].name
+      name: fileStore.req.items[i].name,
-    })
+    });
   }
 
-  if (items.length == 0) {
+  if (items.length === 0) {
     return;
   }
 
@@ -552,18 +573,16 @@ const copyCut = (event: Event, key: string ): void => {
     items,
     path: route.path,
   });
-}
+};
 
 const paste = (event: Event) => {
-  if ((<HTMLElement>event.target).tagName?.toLowerCase() === "input") return;
+  if ((event.target as HTMLElement).tagName?.toLowerCase() === "input") return;
 
   // TODO router location should it be
   let items: any[] = [];
 
   for (let item of clipboardStore.items) {
-    const from = item.from.endsWith("/")
+    const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
-      ? item.from.slice(0, -1)
-      : item.from;
     const to = route.path + encodeURIComponent(item.name);
     items.push({ from, to, name: item.name });
   }
@@ -622,23 +641,24 @@ const paste = (event: Event) => {
   }
 
   action(overwrite, rename);
-}
+};
 
 const colunmsResize = () => {
   // Update the columns size based on the window width.
-  let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
+  let items_ = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
-  if (items === null) return;
+  if (items_ === null) return;
 
   let columns = Math.floor(
-    document.querySelector("main")?.offsetWidth ?? 0 / columnWidth.value
+    (document.querySelector("main")?.offsetWidth ?? 0) / columnWidth.value
   );
   if (columns === 0) columns = 1;
   // @ts-ignore never type error
-  items.style.width = `calc(${100 / columns}% - 1em)`;
+  items_.style.width = `calc(${100 / columns}% - 1em)`;
-}
+};
 
 const scrollEvent = throttle(() => {
-  const totalItems = (fileStore.req?.numDirs ?? 0) + (fileStore.req?.numFiles ?? 0);
+  const totalItems =
+    (fileStore.req?.numDirs ?? 0) + (fileStore.req?.numFiles ?? 0);
 
   // All items are displayed
   if (showLimit.value >= totalItems) return;
@@ -650,14 +670,12 @@ const scrollEvent = throttle(() => {
 
   if (currentPos > triggerPos) {
     // Quantity of items needed to fill 2x of the window height
-    const showQuantity = Math.ceil(
+    const showQuantity = Math.ceil((window.innerHeight * 2) / itemWeight.value);
-      (window.innerHeight * 2) / itemWeight.value
-    );
 
     // Increase the number of displayed items
     showLimit.value += showQuantity;
   }
-}, 100)
+}, 100);
 
 const dragEnter = () => {
   dragCounter.value++;
@@ -670,7 +688,7 @@ const dragEnter = () => {
   Array.from(items).forEach((file: HTMLElement) => {
     file.style.opacity = "0.5";
   });
-}
+};
 
 const dragLeave = () => {
   dragCounter.value--;
@@ -678,7 +696,7 @@ const dragLeave = () => {
   if (dragCounter.value == 0) {
     resetOpacity();
   }
-}
+};
 
 const drop = async (event: DragEvent) => {
   event.preventDefault();
@@ -686,9 +704,9 @@ const drop = async (event: DragEvent) => {
   resetOpacity();
 
   let dt = event.dataTransfer;
-  let el: HTMLElement | null = <HTMLElement>event.target;
+  let el: HTMLElement | null = event.target as HTMLElement;
 
-  if ( fileStore.req === null || dt === null || (dt?.files.length ?? 0) <= 0) return;
+  if (fileStore.req === null || dt === null || dt.files.length <= 0) return;
 
   for (let i = 0; i < 5; i++) {
     if (el !== null && !el.classList.contains("item")) {
@@ -696,11 +714,9 @@ const drop = async (event: DragEvent) => {
     }
   }
 
-  let files: UploadList = <UploadList>(await upload.scanFiles(dt));
+  let files: UploadList = (await upload.scanFiles(dt)) as UploadList;
   let items = fileStore.req.items;
-  let path = route.path.endsWith("/")
+  let path = route.path.endsWith("/") ? route.path : route.path + "/";
-    ? route.path
-    : route.path + "/";
 
   if (
     el !== null &&
@@ -742,7 +758,7 @@ const drop = async (event: DragEvent) => {
   }
 
   upload.handleFiles(files, path);
-}
+};
 
 const uploadInput = (event: Event) => {
   layoutStore.closeHovers();
@@ -762,9 +778,7 @@ const uploadInput = (event: Event) => {
     }
   }
 
-  let path = route.path.endsWith("/")
+  let path = route.path.endsWith("/") ? route.path : route.path + "/";
-    ? route.path
-    : route.path + "/";
   // @ts-ignore
   let conflict = upload.checkConflict(files, fileStore.req.items);
 
@@ -791,7 +805,7 @@ const uploadInput = (event: Event) => {
 
   // @ts-ignore
   upload.handleFiles(files, path);
-}
+};
 
 const resetOpacity = () => {
   let items = document.getElementsByClassName("item");
@@ -800,7 +814,7 @@ const resetOpacity = () => {
   Array.from(items).forEach((file: HTMLElement) => {
     file.style.opacity = "1";
   });
-}
+};
 
 const sort = async (by: string) => {
   let asc = false;
@@ -831,16 +845,16 @@ const sort = async (by: string) => {
   }
 
   fileStore.reload = true;
-}
+};
 
 const openSearch = () => {
   layoutStore.showHover("search");
-}
+};
 
 const toggleMultipleSelection = () => {
   fileStore.toggleMultiple();
   layoutStore.closeHovers();
-}
+};
 
 const windowsResize = throttle(() => {
   colunmsResize();
@@ -854,12 +868,15 @@ const windowsResize = throttle(() => {
 
   // Fill but not fit the window
   fillWindow();
-}, 100)
+}, 100);
 
 const download = () => {
-  if(fileStore.req === null) return
+  if (fileStore.req === null) return;
 
-  if (fileStore.selectedCount === 1 && !fileStore.req.items[fileStore.selected[0]].isDir) {
+  if (
+    fileStore.selectedCount === 1 &&
+    !fileStore.req.items[fileStore.selected[0]].isDir
+  ) {
     api.download(null, fileStore.req.items[fileStore.selected[0]].url);
     return;
   }
@@ -882,7 +899,7 @@ const download = () => {
       api.download(format, ...files);
     },
   });
-}
+};
 
 const switchView = async () => {
   layoutStore.closeHovers();
@@ -906,7 +923,7 @@ const switchView = async () => {
 
   setItemWeight();
   fillWindow();
-}
+};
 
 const uploadFunc = () => {
   if (
@@ -917,7 +934,7 @@ const uploadFunc = () => {
   } else {
     document.getElementById("upload-input")?.click();
   }
-}
+};
 
 const setItemWeight = () => {
   // Listing element is not displayed
@@ -928,7 +945,7 @@ const setItemWeight = () => {
 
   // How much every listing item affects the window height
   itemWeight.value = listing.value.offsetHeight / itemQuantity;
-}
+};
 
 const fillWindow = (fit = false) => {
   if (fileStore.req === null) return;
@@ -950,7 +967,5 @@ const fillWindow = (fit = false) => {
 
   // Set the number of displayed items
   showLimit.value = showQuantity > totalItems ? totalItems : showQuantity;
-}
+};
-
-
 </script>