Converted view/Share.vue to composition api
This commit is contained in:
Joep
parent
22854bf699
commit
ef5c8b0d8e
@ -3,10 +3,14 @@
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:vue/vue3-essential",
|
||||
"@vue/eslint-config-prettier"
|
||||
|
||||
],
|
||||
"rules": {
|
||||
"vue/multi-word-component-names": "off",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { fetchURL, removePrefix, createURL } from "./utils";
|
||||
import { baseURL } from "@/utils/constants";
|
||||
|
||||
export async function fetch(url: apiUrl, password: string = "") {
|
||||
export async function fetch(url: ApiUrl, password: string = "") {
|
||||
url = removePrefix(url);
|
||||
|
||||
const res = await fetchURL(
|
||||
@ -33,35 +33,35 @@ export async function fetch(url: apiUrl, password: string = "") {
|
||||
}
|
||||
|
||||
// Is this redundant code?
|
||||
// export function download(format, hash, token, ...files) {
|
||||
// let url = `${baseURL}/api/public/dl/${hash}`;
|
||||
export function download(format: any, hash: string, token: string, ...files: any) {
|
||||
let url = `${baseURL}/api/public/dl/${hash}`;
|
||||
|
||||
// if (files.length === 1) {
|
||||
// url += encodeURIComponent(files[0]) + "?";
|
||||
// } else {
|
||||
// let arg = "";
|
||||
if (files.length === 1) {
|
||||
url += encodeURIComponent(files[0]) + "?";
|
||||
} else {
|
||||
let arg = "";
|
||||
|
||||
// for (let file of files) {
|
||||
// arg += encodeURIComponent(file) + ",";
|
||||
// }
|
||||
for (let file of files) {
|
||||
arg += encodeURIComponent(file) + ",";
|
||||
}
|
||||
|
||||
// arg = arg.substring(0, arg.length - 1);
|
||||
// arg = encodeURIComponent(arg);
|
||||
// url += `/?files=${arg}&`;
|
||||
// }
|
||||
arg = arg.substring(0, arg.length - 1);
|
||||
arg = encodeURIComponent(arg);
|
||||
url += `/?files=${arg}&`;
|
||||
}
|
||||
|
||||
// if (format) {
|
||||
// url += `algo=${format}&`;
|
||||
// }
|
||||
if (format) {
|
||||
url += `algo=${format}&`;
|
||||
}
|
||||
|
||||
// if (token) {
|
||||
// url += `token=${token}&`;
|
||||
// }
|
||||
if (token) {
|
||||
url += `token=${token}&`;
|
||||
}
|
||||
|
||||
// window.open(url);
|
||||
// }
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
export function getDownloadURL(share: share, inline = false) {
|
||||
export function getDownloadURL(share: IFile, inline = false) {
|
||||
const params = {
|
||||
...(inline && { inline: "true" }),
|
||||
...(share.token && { token: share.token }),
|
||||
|
||||
@ -3,7 +3,7 @@ import { renew, logout } from "@/utils/auth";
|
||||
import { baseURL } from "@/utils/constants";
|
||||
import { encodePath } from "@/utils/url";
|
||||
|
||||
export async function fetchURL(url: apiUrl, opts: apiOpts, auth = true) {
|
||||
export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
opts = opts || {};
|
||||
@ -46,7 +46,7 @@ export async function fetchURL(url: apiUrl, opts: apiOpts, auth = true) {
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function fetchJSON(url: apiUrl, opts?: any) {
|
||||
export async function fetchJSON(url: ApiUrl, opts?: any) {
|
||||
const res = await fetchURL(url, opts);
|
||||
|
||||
if (res.status === 200) {
|
||||
@ -56,7 +56,7 @@ export async function fetchJSON(url: apiUrl, opts?: any) {
|
||||
}
|
||||
}
|
||||
|
||||
export function removePrefix(url: apiUrl) {
|
||||
export function removePrefix(url: ApiUrl) {
|
||||
url = url.split("/").splice(2).join("/");
|
||||
|
||||
if (url === "") url = "/";
|
||||
@ -64,7 +64,7 @@ export function removePrefix(url: apiUrl) {
|
||||
return url;
|
||||
}
|
||||
|
||||
export function createURL(endpoint: apiUrl, params = {}, auth = true) {
|
||||
export function createURL(endpoint: ApiUrl, params = {}, auth = true) {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
let prefix = baseURL;
|
||||
|
||||
@ -13,6 +13,8 @@ import dayjs from "dayjs";
|
||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import "./css/styles.css";
|
||||
|
||||
// register dayjs plugins globally
|
||||
dayjs.extend(localizedFormat);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
@ -3,15 +3,15 @@ import { defineStore } from "pinia";
|
||||
export const useFileStore = defineStore("file", {
|
||||
// convert to a function
|
||||
state: (): {
|
||||
req: req,
|
||||
oldReq: req,
|
||||
req: IFile | null,
|
||||
oldReq: IFile | null,
|
||||
reload: boolean,
|
||||
selected: any[],
|
||||
multiple: boolean,
|
||||
isFiles: boolean
|
||||
} => ({
|
||||
req: {},
|
||||
oldReq: {},
|
||||
req: null,
|
||||
oldReq: null,
|
||||
reload: false,
|
||||
selected: [],
|
||||
multiple: false,
|
||||
@ -28,7 +28,7 @@ export const useFileStore = defineStore("file", {
|
||||
// return !layoutStore.loading && state.route._value.name === "Files";
|
||||
// },
|
||||
isListing: (state) => {
|
||||
return state.isFiles && state.req.isDir;
|
||||
return state.isFiles && state?.req?.isDir;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
@ -36,7 +36,7 @@ export const useFileStore = defineStore("file", {
|
||||
toggleMultiple() {
|
||||
this.multiple = !this.multiple;
|
||||
},
|
||||
updateRequest(value: req) {
|
||||
updateRequest(value: IFile) {
|
||||
this.oldReq = this.req;
|
||||
this.req = value;
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ export const useLayoutStore = defineStore("layout", {
|
||||
state: (): {
|
||||
loading: boolean,
|
||||
show: string | null | boolean,
|
||||
showConfirm: boolean | null,
|
||||
showConfirm: Function | null,
|
||||
showAction: boolean | null,
|
||||
showShell: boolean | null
|
||||
} => ({
|
||||
|
||||
11
frontend/src/types/api.d.ts
vendored
11
frontend/src/types/api.d.ts
vendored
@ -1,14 +1,13 @@
|
||||
type apiUrl = string // Can also be set as a path eg: "path1" | "path2"
|
||||
type ApiUrl = string // Can also be set as a path eg: "path1" | "path2"
|
||||
|
||||
type resourcePath = string
|
||||
|
||||
type apiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
|
||||
type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
|
||||
|
||||
// type apiContent = string | Blob | File
|
||||
type apiContent = Blob | File | Pick<ReadableStreamDefaultReader<any>, "read"> | ""
|
||||
type ApiContent = Blob | File | Pick<ReadableStreamDefaultReader<any>, "read"> | ""
|
||||
|
||||
interface apiOpts {
|
||||
method?: apiMethod,
|
||||
interface ApiOpts {
|
||||
method?: ApiMethod,
|
||||
headers?: object,
|
||||
body?: any
|
||||
}
|
||||
|
||||
41
frontend/src/types/file.d.ts
vendored
41
frontend/src/types/file.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
|
||||
interface file {
|
||||
interface IFile {
|
||||
index?: number
|
||||
name: string,
|
||||
modified: string,
|
||||
path: string,
|
||||
@ -7,27 +7,32 @@ interface file {
|
||||
isDir: boolean,
|
||||
size: number,
|
||||
fullPath: string,
|
||||
type: uploadType
|
||||
type: uploadType,
|
||||
items: IFile[]
|
||||
token?: string,
|
||||
hash: string,
|
||||
url?: string
|
||||
}
|
||||
|
||||
interface item {
|
||||
id: number,
|
||||
path: string,
|
||||
file: file,
|
||||
url?: string,
|
||||
dir?: boolean,
|
||||
from?: string,
|
||||
to?: string,
|
||||
name?: string,
|
||||
type?: uploadType
|
||||
overwrite: boolean
|
||||
}
|
||||
|
||||
|
||||
type uploadType = "video" | "audio" | "image" | "pdf" | "text" | "blob"
|
||||
|
||||
interface req {
|
||||
isDir?: boolean
|
||||
}
|
||||
type req = {
|
||||
path: string
|
||||
name: string
|
||||
size: number
|
||||
extension: string
|
||||
modified: string
|
||||
mode: number
|
||||
isDir: boolean
|
||||
isSymlink: boolean
|
||||
type: string
|
||||
url: string
|
||||
hash: string
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface uploads {
|
||||
[key: string]: upload
|
||||
|
||||
3
frontend/src/types/global.d.ts
vendored
3
frontend/src/types/global.d.ts
vendored
@ -5,4 +5,7 @@ declare global {
|
||||
FileBrowser: any;
|
||||
grecaptcha: any
|
||||
}
|
||||
interface HTMLAttributes extends HTMLAttributes {
|
||||
title: any
|
||||
}
|
||||
}
|
||||
6
frontend/src/types/layout.d.ts
vendored
6
frontend/src/types/layout.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
interface LayoutValue {
|
||||
prompt: boolean,
|
||||
confirm: boolean,
|
||||
action: boolean,
|
||||
prompt: string,
|
||||
confirm: Function,
|
||||
action?: boolean,
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<header-bar v-if="error || req.type == null" showMenu showLogo />
|
||||
<header-bar v-if="error || req?.type === null" showMenu showLogo />
|
||||
|
||||
<breadcrumbs base="/files" />
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
uploadError: "error",
|
||||
}),
|
||||
currentView() {
|
||||
if (this.req.type == undefined) {
|
||||
if (this.req?.type == undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -129,7 +129,6 @@ export default {
|
||||
let url = this.$route.path;
|
||||
if (url === "") url = "/";
|
||||
if (url[0] !== "/") url = "/" + url;
|
||||
|
||||
try {
|
||||
const res = await api.fetch(url);
|
||||
|
||||
|
||||
@ -3,32 +3,18 @@
|
||||
<header-bar showMenu showLogo>
|
||||
<title />
|
||||
|
||||
<action
|
||||
v-if="selectedCount"
|
||||
icon="file_download"
|
||||
:label="$t('buttons.download')"
|
||||
@action="download"
|
||||
:counter="selectedCount"
|
||||
/>
|
||||
<button
|
||||
v-if="isSingleFile()"
|
||||
class="action copy-clipboard"
|
||||
:data-clipboard-text="linkSelected()"
|
||||
:aria-label="$t('buttons.copyDownloadLinkToClipboard')"
|
||||
:title="$t('buttons.copyDownloadLinkToClipboard')"
|
||||
>
|
||||
<action v-if="fileStore.selectedCount" icon="file_download" :label="$t('buttons.download')" @action="download"
|
||||
:counter="fileStore.selectedCount" />
|
||||
<button v-if="isSingleFile()" class="action copy-clipboard" :data-clipboard-text="linkSelected()"
|
||||
:aria-label="$t('buttons.copyDownloadLinkToClipboard')" :data-title="$t('buttons.copyDownloadLinkToClipboard')">
|
||||
<i class="material-icons">content_paste</i>
|
||||
</button>
|
||||
<action
|
||||
icon="check_circle"
|
||||
:label="$t('buttons.selectMultiple')"
|
||||
@action="toggleMultipleSelection"
|
||||
/>
|
||||
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
|
||||
</header-bar>
|
||||
|
||||
<breadcrumbs :base="'/share/' + hash" />
|
||||
|
||||
<div v-if="loading">
|
||||
<div v-if="layoutStore.loading">
|
||||
<h2 class="message delayed">
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
@ -49,21 +35,12 @@
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<input
|
||||
v-focus
|
||||
type="password"
|
||||
:placeholder="$t('login.password')"
|
||||
v-model="password"
|
||||
@keyup.enter="fetchData"
|
||||
/>
|
||||
<input v-focus type="password" :placeholder="$t('login.password')" v-model="password"
|
||||
@keyup.enter="fetchData" />
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button
|
||||
class="button button--flat"
|
||||
@click="fetchData"
|
||||
:aria-label="$t('buttons.submit')"
|
||||
:title="$t('buttons.submit')"
|
||||
>
|
||||
<button class="button button--flat" @click="fetchData" :aria-label="$t('buttons.submit')"
|
||||
:data-title="$t('buttons.submit')">
|
||||
{{ $t("buttons.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
@ -71,14 +48,14 @@
|
||||
</div>
|
||||
<errors v-else :errorCode="error.status" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else-if="req !== null">
|
||||
<div class="share">
|
||||
<div class="share__box share__box__info">
|
||||
<div class="share__box__header">
|
||||
{{
|
||||
req.isDir
|
||||
? $t("download.downloadFolder")
|
||||
: $t("download.downloadFile")
|
||||
? $t("download.downloadFolder")
|
||||
: $t("download.downloadFile")
|
||||
}}
|
||||
</div>
|
||||
<div class="share__box__element share__box__center share__box__icon">
|
||||
@ -87,7 +64,7 @@
|
||||
<div class="share__box__element">
|
||||
<strong>{{ $t("prompts.displayName") }}</strong> {{ req.name }}
|
||||
</div>
|
||||
<div class="share__box__element" :title="modTime">
|
||||
<div class="share__box__element" :data-title="modTime">
|
||||
<strong>{{ $t("prompts.lastModified") }}:</strong> {{ humanTime }}
|
||||
</div>
|
||||
<div class="share__box__element">
|
||||
@ -96,19 +73,12 @@
|
||||
<div class="share__box__element share__box__center">
|
||||
<a target="_blank" :href="link" class="button button--flat">
|
||||
<div>
|
||||
<i class="material-icons">file_download</i
|
||||
>{{ $t("buttons.download") }}
|
||||
<i class="material-icons">file_download</i>{{ $t("buttons.download") }}
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="inlineLink"
|
||||
class="button button--flat"
|
||||
v-if="!req.isDir"
|
||||
>
|
||||
<a target="_blank" :href="inlineLink" class="button button--flat" v-if="!req.isDir">
|
||||
<div>
|
||||
<i class="material-icons">open_in_new</i
|
||||
>{{ $t("buttons.openFile") }}
|
||||
<i class="material-icons">open_in_new</i>{{ $t("buttons.openFile") }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -116,56 +86,31 @@
|
||||
<qrcode-vue :value="link" :size="200" level="M"></qrcode-vue>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="req.isDir && req.items.length > 0"
|
||||
class="share__box share__box__items"
|
||||
>
|
||||
<div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
|
||||
<div class="share__box__header" v-if="req.isDir">
|
||||
{{ $t("files.files") }}
|
||||
</div>
|
||||
<div id="listing" class="list file-icons">
|
||||
<item
|
||||
v-for="item in req.items.slice(0, this.showLimit)"
|
||||
:key="base64(item.name)"
|
||||
v-bind:index="item.index"
|
||||
v-bind:name="item.name"
|
||||
v-bind:isDir="item.isDir"
|
||||
v-bind:url="item.url"
|
||||
v-bind:modified="item.modified"
|
||||
v-bind:type="item.type"
|
||||
v-bind:size="item.size"
|
||||
readOnly
|
||||
>
|
||||
<item v-for="item in req.items.slice(0, showLimit)" :key="base64(item.name)" v-bind:index="item.index"
|
||||
v-bind:name="item.name" v-bind:isDir="item.isDir" v-bind:url="item.url" v-bind:modified="item.modified"
|
||||
v-bind:type="item.type" v-bind:size="item.size" readOnly>
|
||||
</item>
|
||||
<div
|
||||
v-if="req.items.length > showLimit"
|
||||
class="item"
|
||||
@click="showLimit += 100"
|
||||
>
|
||||
<div v-if="req.items.length > showLimit" class="item" @click="showLimit += 100">
|
||||
<div>
|
||||
<p class="name">+ {{ req.items.length - showLimit }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="{ active: multiple }" id="multiple-selection">
|
||||
<div :class="{ active: fileStore.multiple }" id="multiple-selection">
|
||||
<p>{{ $t("files.multipleSelectionEnabled") }}</p>
|
||||
<div
|
||||
@click="() => (multiple = false)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:title="$t('files.clear')"
|
||||
:aria-label="$t('files.clear')"
|
||||
class="action"
|
||||
>
|
||||
<div @click="() => (fileStore.multiple = false)" tabindex="0" role="button" :data-title="$t('files.clear')"
|
||||
:aria-label="$t('files.clear')" class="action">
|
||||
<i class="material-icons">clear</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="req.isDir && req.items.length === 0"
|
||||
class="share__box share__box__items"
|
||||
>
|
||||
<div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
|
||||
<h2 class="message">
|
||||
<i class="material-icons">sentiment_dissatisfied</i>
|
||||
<span>{{ $t("files.lonely") }}</span>
|
||||
@ -176,9 +121,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions, mapWritableState } from "pinia";
|
||||
import { pub as api } from "@/api";
|
||||
<script setup lang="ts">
|
||||
import { pub as api, files } from "@/api";
|
||||
import { filesize } from "filesize";
|
||||
import dayjs from "dayjs";
|
||||
import { Base64 } from "js-base64";
|
||||
@ -192,171 +136,160 @@ import Item from "@/components/files/ListingItem.vue";
|
||||
import Clipboard from "clipboard";
|
||||
import { useFileStore } from "@/stores/file";
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
export default {
|
||||
name: "share",
|
||||
components: {
|
||||
HeaderBar,
|
||||
Action,
|
||||
Breadcrumbs,
|
||||
Item,
|
||||
QrcodeVue,
|
||||
Errors,
|
||||
},
|
||||
data: () => ({
|
||||
error: null,
|
||||
showLimit: 100,
|
||||
password: "",
|
||||
attemptedPasswordLogin: false,
|
||||
hash: null,
|
||||
token: null,
|
||||
clip: null,
|
||||
}),
|
||||
inject: ["$showSuccess"],
|
||||
watch: {
|
||||
$route: function () {
|
||||
this.showLimit = 100;
|
||||
const error = ref<null | any>(null)
|
||||
const showLimit = ref<number>(100)
|
||||
const password = ref<string>("")
|
||||
const attemptedPasswordLogin = ref<boolean>(false)
|
||||
const hash = ref<any>(null)
|
||||
const token = ref<any>(null)
|
||||
const clip = ref<any>(null)
|
||||
|
||||
this.fetchData();
|
||||
},
|
||||
},
|
||||
created: async function () {
|
||||
const hash = this.$route.params.path[0];
|
||||
this.hash = hash;
|
||||
await this.fetchData();
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("keydown", this.keyEvent);
|
||||
this.clip = new Clipboard(".copy-clipboard");
|
||||
this.clip.on("success", () => {
|
||||
this.$showSuccess(this.$t("success.linkCopied"));
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("keydown", this.keyEvent);
|
||||
this.clip.destroy();
|
||||
},
|
||||
computed: {
|
||||
...mapState(useFileStore, ["req", "selectedCount"]),
|
||||
...mapWritableState(useFileStore, ["reload", "multiple", "selected"]),
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
icon: function () {
|
||||
if (this.req.isDir) return "folder";
|
||||
if (this.req.type === "image") return "insert_photo";
|
||||
if (this.req.type === "audio") return "volume_up";
|
||||
if (this.req.type === "video") return "movie";
|
||||
return "insert_drive_file";
|
||||
},
|
||||
link: function () {
|
||||
return api.getDownloadURL(this.req);
|
||||
},
|
||||
inlineLink: function () {
|
||||
return api.getDownloadURL(this.req, true);
|
||||
},
|
||||
humanSize: function () {
|
||||
if (this.req.isDir) {
|
||||
return this.req.items.length;
|
||||
const route = useRoute()
|
||||
const fileStore = useFileStore()
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
watch(route, (newValue, oldValue) => {
|
||||
showLimit.value = 100
|
||||
fetchData();
|
||||
})
|
||||
|
||||
const req = computed(() => fileStore.req)
|
||||
|
||||
// inject: ["$showSuccess"],
|
||||
|
||||
|
||||
// Define computes
|
||||
|
||||
const icon = computed(() => {
|
||||
if (req.value === null) return "insert_drive_file"
|
||||
if (req.value.isDir) return "folder";
|
||||
if (req.value.type === "image") return "insert_photo";
|
||||
if (req.value.type === "audio") return "volume_up";
|
||||
if (req.value.type === "video") return "movie";
|
||||
return "insert_drive_file";
|
||||
})
|
||||
|
||||
const link = computed(() => (req.value ? api.getDownloadURL(req.value) : ""))
|
||||
const inlineLink = computed(() => (req.value ? api.getDownloadURL(req.value, true) : ""))
|
||||
const humanSize = computed(() => {
|
||||
if (req.value) {
|
||||
return (req.value.isDir ? req.value.items.length : filesize(req.value.size ?? 0))
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
})
|
||||
const humanTime = computed(() => dayjs(req.value?.modified).fromNow())
|
||||
const modTime = computed(() => (req.value ? new Date(Date.parse(req.value.modified)).toLocaleString() : new Date()))
|
||||
|
||||
// Functions
|
||||
const base64 = (name: any) => Base64.encodeURI(name);
|
||||
const fetchData = async () => {
|
||||
fileStore.reload = false;
|
||||
fileStore.selected = [];
|
||||
fileStore.multiple = false;
|
||||
// fileStore.closeHovers();
|
||||
|
||||
// Set loading to true and reset the error.
|
||||
layoutStore.loading = true;
|
||||
error.value = null;
|
||||
if (password.value !== "") {
|
||||
attemptedPasswordLogin.value = true;
|
||||
}
|
||||
|
||||
let url = route.path;
|
||||
if (url === "") url = "/";
|
||||
if (url[0] !== "/") url = "/" + url;
|
||||
|
||||
try {
|
||||
let file = await api.fetch(url, password.value);
|
||||
file.hash = hash.value;
|
||||
|
||||
|
||||
token.value = file.token || "";
|
||||
|
||||
fileStore.updateRequest(file);
|
||||
document.title = `${file.name} - ${document.title}`;
|
||||
} catch (e) {
|
||||
error.value = e;
|
||||
} finally {
|
||||
layoutStore.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const keyEvent = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
// If we're on a listing, unselect all
|
||||
// files and folders.
|
||||
if (fileStore.selectedCount > 0) {
|
||||
fileStore.selected = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMultipleSelection = () => {
|
||||
// toggle
|
||||
}
|
||||
|
||||
const isSingleFile = () => fileStore.selectedCount === 1 && !req.value?.items[fileStore.selected[0]].isDir
|
||||
|
||||
const download = () => {
|
||||
if (isSingleFile()) {
|
||||
api.download(
|
||||
null,
|
||||
hash.value,
|
||||
token.value,
|
||||
req.value?.items[fileStore.selected[0]].path
|
||||
);
|
||||
return;
|
||||
}
|
||||
layoutStore.showHover({
|
||||
prompt: "download",
|
||||
confirm: (format: any) => {
|
||||
if (req.value === null) return false
|
||||
layoutStore.closeHovers();
|
||||
|
||||
let files: string[] = [];
|
||||
|
||||
for (let i of fileStore.selected) {
|
||||
files.push(req.value.items[i].path);
|
||||
}
|
||||
|
||||
return filesize(this.req.size);
|
||||
// @ts-ignore
|
||||
api.download(format, hash.value, token.value, ...files);
|
||||
},
|
||||
humanTime: function () {
|
||||
return dayjs(this.req.modified).fromNow();
|
||||
},
|
||||
modTime: function () {
|
||||
return new Date(Date.parse(this.req.modified)).toLocaleString();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useFileStore, ["updateRequest", "toggleMultiple"]),
|
||||
...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
|
||||
base64: function (name) {
|
||||
return Base64.encodeURI(name);
|
||||
},
|
||||
fetchData: async function () {
|
||||
// Reset view information.
|
||||
this.reload = false;
|
||||
this.selected = [];
|
||||
this.multiple = false;
|
||||
this.closeHovers();
|
||||
});
|
||||
}
|
||||
|
||||
// Set loading to true and reset the error.
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
const linkSelected = () => {
|
||||
return isSingleFile() && req.value
|
||||
// @ts-ignore
|
||||
? api.getDownloadURL({
|
||||
hash: hash.value,
|
||||
path: req.value.items[fileStore.selected[0]].path,
|
||||
})
|
||||
: "";
|
||||
}
|
||||
|
||||
if (this.password !== "") {
|
||||
this.attemptedPasswordLogin = true;
|
||||
}
|
||||
|
||||
let url = this.$route.path;
|
||||
if (url === "") url = "/";
|
||||
if (url[0] !== "/") url = "/" + url;
|
||||
onMounted(async () => {
|
||||
// Created
|
||||
hash.value = route.params.path[0];
|
||||
await fetchData();
|
||||
|
||||
try {
|
||||
let file = await api.fetch(url, this.password);
|
||||
file.hash = this.hash;
|
||||
|
||||
this.token = file.token || "";
|
||||
// window.addEventListener("keydown", this.keyEvent);
|
||||
// this.clip = new Clipboard(".copy-clipboard");
|
||||
// this.clip.on("success", () => {
|
||||
// this.$showSuccess(this.$t("success.linkCopied"));
|
||||
// });
|
||||
})
|
||||
|
||||
this.updateRequest(file);
|
||||
document.title = `${file.name} - ${document.title}`;
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
keyEvent(event) {
|
||||
if (event.key === "Escape") {
|
||||
// If we're on a listing, unselect all
|
||||
// files and folders.
|
||||
if (this.selectedCount > 0) {
|
||||
this.selected = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleMultipleSelection() {
|
||||
this.toggleMultiple();
|
||||
},
|
||||
isSingleFile: function () {
|
||||
return (
|
||||
this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir
|
||||
);
|
||||
},
|
||||
download() {
|
||||
if (this.isSingleFile()) {
|
||||
api.download(
|
||||
null,
|
||||
this.hash,
|
||||
this.token,
|
||||
this.req.items[this.selected[0]].path
|
||||
);
|
||||
return;
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
// window.removeEventListener("keydown", this.keyEvent);
|
||||
// this.clip.destroy();
|
||||
})
|
||||
|
||||
this.showHover({
|
||||
prompt: "download",
|
||||
confirm: (format) => {
|
||||
this.closeHovers();
|
||||
|
||||
let files = [];
|
||||
|
||||
for (let i of this.selected) {
|
||||
files.push(this.req.items[i].path);
|
||||
}
|
||||
|
||||
api.download(format, this.hash, this.token, ...files);
|
||||
},
|
||||
});
|
||||
},
|
||||
linkSelected: function () {
|
||||
return this.isSingleFile()
|
||||
? api.getDownloadURL({
|
||||
hash: this.hash,
|
||||
path: this.req.items[this.selected[0]].path,
|
||||
})
|
||||
: "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
@ -616,7 +616,7 @@ export default {
|
||||
if (!items) return;
|
||||
|
||||
let columns = Math.floor(
|
||||
document.querySelector("main").offsetWidth / this.columnWidth
|
||||
document.querySelector("main")?.offsetWidth / this.columnWidth
|
||||
);
|
||||
if (columns === 0) columns = 1;
|
||||
items.style.width = `calc(${100 / columns}% - 1em)`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user