149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<header-bar
|
|
v-if="error || fileStore.req?.type === null"
|
|
showMenu
|
|
showLogo
|
|
/>
|
|
|
|
<breadcrumbs base="/files" />
|
|
|
|
<errors v-if="error" :errorCode="error?.status" />
|
|
<component v-else-if="currentView" :is="currentView"></component>
|
|
<div v-else>
|
|
<h2 class="message delayed">
|
|
<div class="spinner">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div class="bounce3"></div>
|
|
</div>
|
|
<span>{{ t("files.loading") }}</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
computed,
|
|
defineAsyncComponent,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
onUnmounted,
|
|
ref,
|
|
watch,
|
|
} from "vue";
|
|
import { files as api } from "@/api";
|
|
import { useFileStore } from "@/stores/file";
|
|
import { useLayoutStore } from "@/stores/layout";
|
|
import { useUploadStore } from "@/stores/upload";
|
|
|
|
import HeaderBar from "@/components/header/HeaderBar.vue";
|
|
import Breadcrumbs from "@/components/Breadcrumbs.vue";
|
|
import Errors from "@/views/Errors.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
const layoutStore = useLayoutStore();
|
|
const fileStore = useFileStore();
|
|
const uploadStore = useUploadStore();
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const { t } = useI18n({});
|
|
|
|
const clean = (path: string) => {
|
|
return path.endsWith("/") ? path.slice(0, -1) : path;
|
|
};
|
|
|
|
const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
|
|
const error = ref<any | null>(null);
|
|
const width = computed(() => window.innerWidth);
|
|
|
|
const currentView = computed(() => {
|
|
if (fileStore.req?.type == undefined) {
|
|
return null;
|
|
}
|
|
|
|
if (fileStore.req.isDir) {
|
|
return "file-listing";
|
|
} else if (
|
|
fileStore.req.type === "text" ||
|
|
fileStore.req.type === "textImmutable"
|
|
) {
|
|
return "editor";
|
|
} else {
|
|
return "preview";
|
|
}
|
|
});
|
|
|
|
// Define hooks
|
|
onMounted(() => {
|
|
fetchData();
|
|
fileStore.isFiles = true;
|
|
window.addEventListener("keydown", keyEvent);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("keydown", keyEvent);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
fileStore.isFiles = false;
|
|
if (layoutStore.showShell) {
|
|
layoutStore.toggleShell();
|
|
}
|
|
fileStore.updateRequest(null);
|
|
});
|
|
|
|
watch(route, () => fetchData());
|
|
// @ts-ignore
|
|
watch(fileStore.reload, (val) => {
|
|
if (val) {
|
|
fetchData();
|
|
}
|
|
});
|
|
watch(uploadStore.error, (newValue, oldValue) => {
|
|
newValue && newValue !== oldValue && layoutStore.showError();
|
|
});
|
|
|
|
// Define functions
|
|
|
|
const fetchData = async () => {
|
|
// Reset view information.
|
|
fileStore.reload = false;
|
|
fileStore.selected = [];
|
|
fileStore.multiple = false;
|
|
layoutStore.closeHovers();
|
|
|
|
// Set loading to true and reset the error.
|
|
layoutStore.loading = true;
|
|
error.value = null;
|
|
|
|
let url = route.path;
|
|
if (url === "") url = "/";
|
|
if (url[0] !== "/") url = "/" + url;
|
|
try {
|
|
const res = await api.fetch(url);
|
|
|
|
if (clean(res.path) !== clean(`/${[...route.params.path].join("/")}`)) {
|
|
throw new Error("Data Mismatch!");
|
|
}
|
|
|
|
fileStore.updateRequest(res);
|
|
document.title = `${res.name} - ${document.title}`;
|
|
} catch (e: any) {
|
|
error.value = e;
|
|
} finally {
|
|
layoutStore.loading = false;
|
|
}
|
|
};
|
|
const keyEvent = (event: KeyboardEvent) => {
|
|
if (event.key === "F1") {
|
|
event.preventDefault();
|
|
layoutStore.showHover("help");
|
|
}
|
|
};
|
|
</script>
|