Fixed issues in filelisting
This commit is contained in:
Joep
parent
3d6328fbb3
commit
7bc4a21a9d
@ -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')"
|
||||
@action="upload"
|
||||
:label="t('buttons.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')"
|
||||
:aria-label="$t('files.sortByName')"
|
||||
:title="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')"
|
||||
:aria-label="$t('files.sortBySize')"
|
||||
:title="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')"
|
||||
:aria-label="$t('files.sortByLastModified')"
|
||||
:title="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,8 +224,8 @@
|
||||
</item>
|
||||
</div>
|
||||
|
||||
<h2 v-if="fileStore.req?.numFiles ?? 0 > 0">{{ $t("files.files") }}</h2>
|
||||
<div v-if="fileStore.req?.numFiles ?? 0> 0">
|
||||
<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"
|
||||
:key="base64(item.name)"
|
||||
@ -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')"
|
||||
:aria-label="$t('files.clear')"
|
||||
:title="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 { RouteLocation, useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
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 columnWidth = ref<number>(280)
|
||||
const dragCounter = ref<number>(0)
|
||||
const width = ref<number>(window.innerWidth)
|
||||
const itemWeight = ref<number>(0)
|
||||
const showLimit = ref<number>(50);
|
||||
const columnWidth = ref<number>(280);
|
||||
const dragCounter = ref<number>(0);
|
||||
const width = ref<number>(window.innerWidth);
|
||||
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,89 +335,98 @@ 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[] = [];
|
||||
const files: any[] = [];
|
||||
const dirs: any[] = [];
|
||||
const files: any[] = [];
|
||||
|
||||
fileStore.req?.items.forEach((item) => {
|
||||
if (item.isDir) {
|
||||
dirs.push(item);
|
||||
} else {
|
||||
files.push(item);
|
||||
}
|
||||
});
|
||||
fileStore.req?.items.forEach((item) => {
|
||||
if (item.isDir) {
|
||||
dirs.push(item);
|
||||
} else {
|
||||
files.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return { dirs, files };
|
||||
})
|
||||
return { dirs, files };
|
||||
});
|
||||
|
||||
const files = computed(() => {
|
||||
let _showLimit = showLimit.value - items.value.dirs.length;
|
||||
const files = computed((): Resource[] => {
|
||||
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(() => {
|
||||
if (nameSorted.value && !ascOrdered.value) {
|
||||
return "arrow_upward";
|
||||
}
|
||||
if (nameSorted.value && !ascOrdered.value) {
|
||||
return "arrow_upward";
|
||||
}
|
||||
|
||||
return "arrow_downward";
|
||||
})
|
||||
return "arrow_downward";
|
||||
});
|
||||
|
||||
const sizeIcon = computed(() => {
|
||||
if (sizeSorted.value && ascOrdered.value) {
|
||||
return "arrow_downward";
|
||||
}
|
||||
if (sizeSorted.value && ascOrdered.value) {
|
||||
return "arrow_downward";
|
||||
}
|
||||
|
||||
return "arrow_upward";
|
||||
})
|
||||
return "arrow_upward";
|
||||
});
|
||||
|
||||
const modifiedIcon = computed(() => {
|
||||
if (modifiedSorted.value && ascOrdered.value) {
|
||||
return "arrow_downward";
|
||||
}
|
||||
if (modifiedSorted.value && ascOrdered.value) {
|
||||
return "arrow_downward";
|
||||
}
|
||||
|
||||
return "arrow_upward";
|
||||
})
|
||||
return "arrow_upward";
|
||||
});
|
||||
|
||||
const viewIcon = computed(() => {
|
||||
const icons = {
|
||||
list: "view_module",
|
||||
mosaic: "grid_view",
|
||||
"mosaic gallery": "view_list",
|
||||
};
|
||||
return (authStore.user === null ? icons['list']: icons[authStore.user.viewMode])
|
||||
})
|
||||
const icons = {
|
||||
list: "view_module",
|
||||
mosaic: "grid_view",
|
||||
"mosaic gallery": "view_list",
|
||||
};
|
||||
return authStore.user === null
|
||||
? icons["list"]
|
||||
: icons[authStore.user.viewMode];
|
||||
});
|
||||
|
||||
const headerButtons = computed(() => {
|
||||
return {
|
||||
upload: authStore.user?.perm.create,
|
||||
download: authStore.user?.perm.download,
|
||||
shell: authStore.user?.perm.execute && enableExec,
|
||||
delete: fileStore.selectedCount > 0 && authStore.user?.perm.delete,
|
||||
rename: fileStore.selectedCount === 1 && authStore.user?.perm.rename,
|
||||
share: fileStore.selectedCount === 1 && authStore.user?.perm.share,
|
||||
move: fileStore.selectedCount > 0 && authStore.user?.perm.rename,
|
||||
copy: fileStore.selectedCount > 0 && authStore.user?.perm.create,
|
||||
};
|
||||
})
|
||||
return {
|
||||
upload: authStore.user?.perm.create,
|
||||
download: authStore.user?.perm.download,
|
||||
shell: authStore.user?.perm.execute && enableExec,
|
||||
delete: fileStore.selectedCount > 0 && authStore.user?.perm.delete,
|
||||
rename: fileStore.selectedCount === 1 && authStore.user?.perm.rename,
|
||||
share: fileStore.selectedCount === 1 && authStore.user?.perm.share,
|
||||
move: fileStore.selectedCount > 0 && authStore.user?.perm.rename,
|
||||
copy: fileStore.selectedCount > 0 && authStore.user?.perm.create,
|
||||
};
|
||||
});
|
||||
|
||||
const isMobile = computed(() => {
|
||||
return width.value <= 736;
|
||||
})
|
||||
return width.value <= 736;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
// TODO
|
||||
@ -407,39 +434,37 @@ watch(fileStore.req, () => {
|
||||
// Reset the show value
|
||||
showLimit.value = 50;
|
||||
|
||||
// Ensures that the listing is displayed
|
||||
// TODO: implement nextTick
|
||||
// this.$nextTick(() => {
|
||||
// // How much every listing item affects the window height
|
||||
// setItemWeight();
|
||||
|
||||
// // Fill and fit the window with listing items
|
||||
// fillWindow(true);
|
||||
// });
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// Check the columns size for the first time.
|
||||
colunmsResize();
|
||||
|
||||
nextTick(() => {
|
||||
// Ensures that the listing is displayed
|
||||
// How much every listing item affects the window height
|
||||
setItemWeight();
|
||||
|
||||
// Fill and fit the window with listing items
|
||||
fillWindow(true);
|
||||
});
|
||||
});
|
||||
|
||||
// Add the needed event listeners to the window and document.
|
||||
window.addEventListener("keydown", keyEvent);
|
||||
window.addEventListener("scroll", scrollEvent);
|
||||
window.addEventListener("resize", windowsResize);
|
||||
onMounted(() => {
|
||||
// Check the columns size for the first time.
|
||||
colunmsResize();
|
||||
|
||||
if (!authStore.user?.perm.create) return;
|
||||
document.addEventListener("dragover", preventDefault);
|
||||
document.addEventListener("dragenter", dragEnter);
|
||||
document.addEventListener("dragleave", dragLeave);
|
||||
document.addEventListener("drop", drop);
|
||||
})
|
||||
// How much every listing item affects the window height
|
||||
setItemWeight();
|
||||
|
||||
// Fill and fit the window with listing items
|
||||
fillWindow(true);
|
||||
|
||||
// Add the needed event listeners to the window and document.
|
||||
window.addEventListener("keydown", keyEvent);
|
||||
window.addEventListener("scroll", scrollEvent);
|
||||
window.addEventListener("resize", windowsResize);
|
||||
|
||||
if (!authStore.user?.perm.create) return;
|
||||
document.addEventListener("dragover", preventDefault);
|
||||
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"]),
|
||||
// ...mapActions(useLayoutStore, ["showHover", "closeHovers", "layoutStore.toggleShell"]),
|
||||
|
||||
|
||||
const base64 = (name: string) => Base64.encodeURI(name)
|
||||
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;
|
||||
const copyCut = (event: Event, key: string): void => {
|
||||
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("/")
|
||||
? item.from.slice(0, -1)
|
||||
: item.from;
|
||||
const from = item.from.endsWith("/") ? 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"]);
|
||||
if (items === null) return;
|
||||
let items_ = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
|
||||
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(
|
||||
(window.innerHeight * 2) / itemWeight.value
|
||||
);
|
||||
const showQuantity = Math.ceil((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("/")
|
||||
? route.path
|
||||
: route.path + "/";
|
||||
let path = route.path.endsWith("/") ? route.path : route.path + "/";
|
||||
|
||||
if (
|
||||
el !== null &&
|
||||
@ -725,7 +741,7 @@ const drop = async (event: DragEvent) => {
|
||||
layoutStore.showHover({
|
||||
prompt: "replace",
|
||||
// TODO: don't know yet
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
action: (event: Event) => {
|
||||
event.preventDefault();
|
||||
layoutStore.closeHovers();
|
||||
@ -742,13 +758,13 @@ const drop = async (event: DragEvent) => {
|
||||
}
|
||||
|
||||
upload.handleFiles(files, path);
|
||||
}
|
||||
};
|
||||
|
||||
const uploadInput = (event: Event) => {
|
||||
layoutStore.closeHovers();
|
||||
|
||||
let files = (event.currentTarget as HTMLInputElement)?.files;
|
||||
if(files === null) return;
|
||||
if (files === null) return;
|
||||
|
||||
let folder_upload =
|
||||
files[0].webkitRelativePath !== undefined &&
|
||||
@ -762,9 +778,7 @@ const uploadInput = (event: Event) => {
|
||||
}
|
||||
}
|
||||
|
||||
let path = route.path.endsWith("/")
|
||||
? route.path
|
||||
: route.path + "/";
|
||||
let path = route.path.endsWith("/") ? 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;
|
||||
@ -820,7 +834,7 @@ const sort = async (by: string) => {
|
||||
}
|
||||
|
||||
try {
|
||||
if(authStore.user?.id) {
|
||||
if (authStore.user?.id) {
|
||||
// @ts-ignore
|
||||
await users.update({ id: authStore.user?.id, sorting: { by, asc } }, [
|
||||
"sorting",
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user