filebrowser/frontend/src/views/Files.vue

148 lines
3.9 KiB
Vue
Raw Normal View History

2018-02-01 12:17:04 +00:00
<template>
<div>
2021-03-03 12:25:59 +00:00
<breadcrumbs base="/files" />
<errors v-if="error" :errorCode="error.status" />
2024-07-30 17:45:27 +00:00
<component v-else-if="currentViewLoaded" :is="currentView"></component>
2018-02-01 12:17:04 +00:00
<div v-else>
<h2 class="message delayed">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
2021-03-21 11:51:58 +00:00
<span>{{ $t("files.loading") }}</span>
2018-02-01 12:17:04 +00:00
</h2>
</div>
</div>
</template>
2024-08-03 15:34:12 +00:00
2018-02-01 12:17:04 +00:00
<script>
2024-11-21 00:15:30 +00:00
import { filesApi } from "@/api";
2024-07-30 17:45:27 +00:00
import Breadcrumbs from "@/components/Breadcrumbs.vue";
import Errors from "@/views/Errors.vue";
import Preview from "@/views/files/Preview.vue";
2024-02-10 00:13:02 +00:00
import ListingView from "@/views/files/ListingView.vue";
import Editor from "@/views/files/Editor.vue";
2024-07-30 17:45:27 +00:00
import { state, mutations, getters } from "@/store";
2024-12-17 00:01:55 +00:00
import { url } from "@/utils";
2024-11-21 00:15:30 +00:00
import { notify } from "@/notify";
//import { removePrefix } from "@/utils/url.js";
2018-02-01 12:17:04 +00:00
export default {
2021-03-21 11:51:58 +00:00
name: "files",
2018-02-01 12:17:04 +00:00
components: {
2021-03-03 12:25:59 +00:00
Breadcrumbs,
2021-02-25 18:37:07 +00:00
Errors,
2018-02-01 12:17:04 +00:00
Preview,
2024-02-10 00:13:02 +00:00
ListingView,
Editor,
2021-02-25 18:37:07 +00:00
},
2024-07-30 17:45:27 +00:00
data() {
2021-02-25 18:37:07 +00:00
return {
error: null,
2021-03-21 11:51:58 +00:00
width: window.innerWidth,
2024-12-17 00:01:55 +00:00
lastPath: "",
lastHash: "",
2021-03-21 11:51:58 +00:00
};
2018-02-01 12:17:04 +00:00
},
computed: {
2021-03-21 11:51:58 +00:00
currentView() {
2024-07-30 17:45:27 +00:00
return getters.currentView();
},
currentViewLoaded() {
return getters.currentView() !== null;
},
reload() {
2024-08-03 15:34:12 +00:00
return state.reload;
2018-02-01 12:17:04 +00:00
},
},
2021-03-21 11:51:58 +00:00
created() {
this.fetchData();
2018-02-01 12:17:04 +00:00
},
watch: {
2021-03-21 11:51:58 +00:00
$route: "fetchData",
2024-07-30 17:45:27 +00:00
reload(value) {
2024-08-03 15:34:12 +00:00
if (value) {
2021-03-21 11:51:58 +00:00
this.fetchData();
}
2021-03-21 11:51:58 +00:00
},
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
mounted() {
2024-12-17 00:01:55 +00:00
window.addEventListener("hashchange", this.scrollToHash);
2021-03-21 11:51:58 +00:00
window.addEventListener("keydown", this.keyEvent);
2018-02-01 12:17:04 +00:00
},
2023-09-25 01:03:09 +00:00
beforeUnmount() {
2021-03-21 11:51:58 +00:00
window.removeEventListener("keydown", this.keyEvent);
2018-02-01 12:17:04 +00:00
},
2023-09-25 01:03:09 +00:00
unmounted() {
2024-07-30 17:45:27 +00:00
mutations.replaceRequest({}); // Use mutation
2023-09-04 02:21:25 +00:00
},
2018-02-01 12:17:04 +00:00
methods: {
2024-12-17 00:01:55 +00:00
scrollToHash() {
if (window.location.hash === this.lastHash) return;
this.lastHash = window.location.hash
if (window.location.hash) {
const id = url.base64Encode(window.location.hash.slice(1));
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({
behavior: "instant",
block: "center",
});
}
}
},
2021-03-21 11:51:58 +00:00
async fetchData() {
2024-12-17 00:01:55 +00:00
if (state.route.path === this.lastPath) return;
this.lastHash = ""
2024-08-03 15:34:12 +00:00
// Set loading to true and reset the error.
2024-08-24 22:02:33 +00:00
mutations.setLoading("files", true);
2024-08-03 15:34:12 +00:00
this.error = null;
2024-07-30 17:45:27 +00:00
// Reset view information using mutations
mutations.setReload(false);
mutations.resetSelected();
mutations.setMultiple(false);
mutations.closeHovers();
2018-02-01 12:17:04 +00:00
2024-07-30 17:45:27 +00:00
let data = {};
try {
2024-07-30 17:45:27 +00:00
// Fetch initial data
2024-11-21 00:15:30 +00:00
let res = await filesApi.fetchFiles(getters.routePath());
2024-07-30 17:45:27 +00:00
// If not a directory, fetch content
2024-11-21 00:15:30 +00:00
if (res.type != "directory") {
2024-11-26 17:21:41 +00:00
let content = false;
// only check content for blob or text files
2024-12-17 00:01:55 +00:00
if (res.type.startsWith("application") || res.type.startsWith("text")) {
2024-11-26 17:21:41 +00:00
content = true;
}
res = await filesApi.fetchFiles(getters.routePath(), content);
2024-02-10 00:13:02 +00:00
}
2024-07-30 17:45:27 +00:00
data = res;
// Verify if the fetched path matches the current route
2024-12-17 00:01:55 +00:00
if (url.pathsMatch(res.path, `/${state.route.params.path}`)) {
2024-07-30 17:45:27 +00:00
document.title = `${res.name} - ${document.title}`;
}
} catch (e) {
2024-11-21 00:15:30 +00:00
notify.showError(e);
2021-03-21 11:51:58 +00:00
this.error = e;
2024-08-24 22:02:33 +00:00
mutations.replaceRequest(null);
2024-08-03 15:34:12 +00:00
} finally {
mutations.replaceRequest(data);
2024-08-24 22:02:33 +00:00
mutations.setLoading("files", false);
}
2024-12-17 00:01:55 +00:00
setTimeout(() => {
this.scrollToHash();
}, 25);
this.lastPath = state.route.path;
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
keyEvent(event) {
2018-02-01 12:17:04 +00:00
// F1!
if (event.keyCode === 112) {
2021-03-21 11:51:58 +00:00
event.preventDefault();
2024-07-30 17:45:27 +00:00
mutations.showHover("help"); // Use mutation
2018-02-01 12:17:04 +00:00
}
2021-03-21 11:51:58 +00:00
},
},
};
2018-02-01 12:17:04 +00:00
</script>