nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed issues in filelisting

Browse Source
This commit is contained in:
Joep 2023-09-21 22:04:46 +02:00
parent 3d6328fbb3
commit 7bc4a21a9d
No known key found for this signature in database
GPG Key ID: 6F5588F1DC2A8209
1 changed files with 207 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
frontend/src/views/files/FileListing.vue
View File

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