2018-02-01 12:17:04 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-03-24 12:23:05 +00:00
|
|
|
<header-bar v-if="error || req.type == null" showMenu showLogo />
|
2021-02-25 18:37:07 +00:00
|
|
|
|
2021-03-03 12:25:59 +00:00
|
|
|
<breadcrumbs base="/files" />
|
2020-07-14 01:18:53 +00:00
|
|
|
|
2021-04-16 14:01:10 +00:00
|
|
|
<errors v-if="error" :errorCode="error.message" />
|
2021-03-01 16:12:17 +00:00
|
|
|
<component v-else-if="currentView" :is="currentView"></component>
|
2018-02-01 12:17:04 +00:00
|
|
|
<div v-else>
|
2021-04-16 12:47:50 +00:00
|
|
|
<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>
|
|
|
|
|
|
|
|
<script>
|
2021-03-21 11:51:58 +00:00
|
|
|
import { files as api } from "@/api";
|
|
|
|
import { mapState, mapMutations } from "vuex";
|
2021-02-25 18:37:07 +00:00
|
|
|
|
2021-03-21 11:51:58 +00:00
|
|
|
import HeaderBar from "@/components/header/HeaderBar";
|
|
|
|
import Breadcrumbs from "@/components/Breadcrumbs";
|
|
|
|
import Errors from "@/views/Errors";
|
|
|
|
import Preview from "@/views/files/Preview";
|
|
|
|
import Listing from "@/views/files/Listing";
|
2022-03-24 11:01:19 +00:00
|
|
|
import { name } from "@/utils/constants";
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2021-03-21 11:51:58 +00:00
|
|
|
function clean(path) {
|
|
|
|
return path.endsWith("/") ? path.slice(0, -1) : path;
|
2019-01-05 16:12:09 +00:00
|
|
|
}
|
|
|
|
|
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-02-25 18:37:07 +00:00
|
|
|
HeaderBar,
|
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,
|
|
|
|
Listing,
|
2021-03-21 11:51:58 +00:00
|
|
|
Editor: () => import("@/views/files/Editor"),
|
2021-02-25 18:37:07 +00:00
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
error: null,
|
2021-03-21 11:51:58 +00:00
|
|
|
width: window.innerWidth,
|
|
|
|
};
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
computed: {
|
2021-03-21 11:51:58 +00:00
|
|
|
...mapState(["req", "reload", "loading", "show"]),
|
2022-03-24 11:01:19 +00:00
|
|
|
name: () => name,
|
2021-03-21 11:51:58 +00:00
|
|
|
currentView() {
|
2021-03-01 16:12:17 +00:00
|
|
|
if (this.req.type == undefined) {
|
2021-03-21 11:51:58 +00:00
|
|
|
return null;
|
2021-03-01 16:12:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.req.isDir) {
|
2021-03-21 11:51:58 +00:00
|
|
|
return "listing";
|
|
|
|
} else if (
|
|
|
|
this.req.type === "text" ||
|
|
|
|
this.req.type === "textImmutable"
|
|
|
|
) {
|
|
|
|
return "editor";
|
2021-03-01 16:12:17 +00:00
|
|
|
} else {
|
2021-03-21 11:51:58 +00:00
|
|
|
return "preview";
|
2021-03-01 16:12:17 +00:00
|
|
|
}
|
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",
|
|
|
|
reload: function (value) {
|
|
|
|
if (value === true) {
|
|
|
|
this.fetchData();
|
2021-01-11 23:00:40 +00:00
|
|
|
}
|
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() {
|
|
|
|
window.addEventListener("keydown", this.keyEvent);
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
2021-03-21 11:51:58 +00:00
|
|
|
beforeDestroy() {
|
|
|
|
window.removeEventListener("keydown", this.keyEvent);
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
2021-03-21 11:51:58 +00:00
|
|
|
destroyed() {
|
2021-02-25 18:37:07 +00:00
|
|
|
if (this.$store.state.showShell) {
|
2021-03-21 11:51:58 +00:00
|
|
|
this.$store.commit("toggleShell");
|
2021-02-25 18:37:07 +00:00
|
|
|
}
|
2021-03-21 11:51:58 +00:00
|
|
|
this.$store.commit("updateRequest", {});
|
2018-02-01 12:17:04 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-03-21 11:51:58 +00:00
|
|
|
...mapMutations(["setLoading"]),
|
|
|
|
async fetchData() {
|
2018-02-01 12:17:04 +00:00
|
|
|
// Reset view information.
|
2021-03-21 11:51:58 +00:00
|
|
|
this.$store.commit("setReload", false);
|
|
|
|
this.$store.commit("resetSelected");
|
|
|
|
this.$store.commit("multiple", false);
|
|
|
|
this.$store.commit("closeHovers");
|
2018-02-01 12:17:04 +00:00
|
|
|
|
|
|
|
// Set loading to true and reset the error.
|
2021-03-21 11:51:58 +00:00
|
|
|
this.setLoading(true);
|
|
|
|
this.error = null;
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2021-03-21 11:51:58 +00:00
|
|
|
let url = this.$route.path;
|
|
|
|
if (url === "") url = "/";
|
|
|
|
if (url[0] !== "/") url = "/" + url;
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2019-01-05 16:12:09 +00:00
|
|
|
try {
|
2021-03-21 11:51:58 +00:00
|
|
|
const res = await api.fetch(url);
|
2018-02-01 12:17:04 +00:00
|
|
|
|
2019-01-05 16:12:09 +00:00
|
|
|
if (clean(res.path) !== clean(`/${this.$route.params.pathMatch}`)) {
|
2021-03-21 11:51:58 +00:00
|
|
|
return;
|
2019-01-05 16:12:09 +00:00
|
|
|
}
|
|
|
|
|
2021-03-21 11:51:58 +00:00
|
|
|
this.$store.commit("updateRequest", res);
|
2022-03-24 11:01:19 +00:00
|
|
|
document.title = `${res.name} - ${this.$route.name} - ${this.name}`;
|
2019-01-05 16:12:09 +00:00
|
|
|
} catch (e) {
|
2021-03-21 11:51:58 +00:00
|
|
|
this.error = e;
|
2019-01-05 16:12:09 +00:00
|
|
|
} finally {
|
2021-03-21 11:51:58 +00:00
|
|
|
this.setLoading(false);
|
2019-01-05 16:12:09 +00:00
|
|
|
}
|
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();
|
|
|
|
this.$store.commit("showHover", "help");
|
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>
|