zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add new folder button to move/create dialogs (#2667)

Browse Source 
---------

Co-authored-by: Oleg Lobanov <oleg@lobanov.me>
This commit is contained in:
ArthurMousatov
2023-08-26 18:28:58 -04:00
committed by GitHub
parent 374bbd3ec1
commit 5994224468
21 changed files with 199 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Search.vue
View File

@@ -90,10 +90,10 @@ export default {
};
},
watch: {
show(val, old) {
this.active = val === "search";
currentPrompt(val, old) {
this.active = val?.prompt === "search";
if (old === "search" && !this.active) {
if (old?.prompt === "search" && !this.active) {
if (this.reload) {
this.setReload(true);
}
@@ -116,8 +116,8 @@ export default {
},
},
computed: {
...mapState(["user", "show"]),
...mapGetters(["isListing"]),
...mapState(["user"]),
...mapGetters(["isListing", "currentPrompt"]),
boxes() {
return boxes;
},

4
frontend/src/components/Sidebar.vue
View File

@@ -133,9 +133,9 @@ export default {
},
computed: {
...mapState(["user"]),
...mapGetters(["isLogged"]),
...mapGetters(["isLogged", "currentPrompt"]),
active() {
return this.$store.state.show === "sidebar";
return this.currentPrompt?.prompt === "sidebar";
},
signup: () => signup,
version: () => version,

8
frontend/src/components/header/HeaderBar.vue
View File

@@ -11,7 +11,7 @@
<slot />
<div id="dropdown" :class="{ active: this.$store.state.show === 'more' }">
<div id="dropdown" :class="{ active: this.currentPromptName === 'more' }">
<slot name="actions" />
</div>
@@ -25,7 +25,7 @@
<div
class="overlay"
v-show="this.$store.state.show == 'more'"
v-show="this.currentPromptName == 'more'"
@click="$store.commit('closeHovers')"
/>
</header>
@@ -35,6 +35,7 @@
import { logoURL } from "@/utils/constants";
import Action from "@/components/header/Action.vue";
import { mapGetters } from "vuex";
export default {
name: "header-bar",
@@ -52,6 +53,9 @@ export default {
this.$store.commit("showHover", "sidebar");
},
},
computed: {
...mapGetters(["currentPromptName"]),
},
};
</script>

55
frontend/src/components/prompts/Copy.vue
View File

@@ -6,26 +6,43 @@
<div class="card-content">
<p>{{ $t("prompts.copyMessage") }}</p>
<file-list @update:selected="(val) => (dest = val)"></file-list>
<file-list ref="fileList" @update:selected="(val) => (dest = val)">
</file-list>
</div>
<div class="card-action">
<button
class="button button--flat button--grey"
@click="$store.commit('closeHovers')"
:aria-label="$t('buttons.cancel')"
:title="$t('buttons.cancel')"
>
{{ $t("buttons.cancel") }}
</button>
<button
class="button button--flat"
@click="copy"
:aria-label="$t('buttons.copy')"
:title="$t('buttons.copy')"
>
{{ $t("buttons.copy") }}
</button>
<div
class="card-action"
style="display: flex; align-items: center; justify-content: space-between;"
>
<template v-if="user.perm.create">
<button
class="button button--flat"
@click="$refs.fileList.createDir()"
:aria-label="$t('sidebar.newFolder')"
:title="$t('sidebar.newFolder')"
style="justify-self: left;"
>
<span>{{ $t("sidebar.newFolder") }}</span>
</button>
</template>
<div>
<button
class="button button--flat button--grey"
@click="$store.commit('closeHovers')"
:aria-label="$t('buttons.cancel')"
:title="$t('buttons.cancel')"
>
{{ $t("buttons.cancel") }}
</button>
<button
class="button button--flat"
@click="copy"
:aria-label="$t('buttons.copy')"
:title="$t('buttons.copy')"
>
{{ $t("buttons.copy") }}
</button>
</div>
</div>
</div>
</template>
@@ -46,7 +63,7 @@ export default {
dest: null,
};
},
computed: mapState(["req", "selected"]),
computed: mapState(["req", "selected", "user"]),
methods: {
copy: async function (event) {
event.preventDefault();

6
frontend/src/components/prompts/Delete.vue
View File

@@ -37,8 +37,8 @@ import buttons from "@/utils/buttons";
export default {
name: "delete",
computed: {
...mapGetters(["isListing", "selectedCount"]),
...mapState(["req", "selected", "showConfirm"]),
...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
...mapState(["req", "selected"]),
},
methods: {
...mapMutations(["closeHovers"]),
@@ -50,7 +50,7 @@ export default {
await api.remove(this.$route.path);
buttons.success("delete");
this.showConfirm();
this.currentPrompt?.confirm();
this.closeHovers();
return;
}

8
frontend/src/components/prompts/Download.vue
View File

@@ -11,7 +11,7 @@
v-for="(ext, format) in formats"
:key="format"
class="button button--block"
@click="showConfirm(format)"
@click="currentPrompt.confirm(format)"
v-focus
>
{{ ext }}
@@ -21,7 +21,7 @@
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "download",
@@ -38,6 +38,8 @@ export default {
},
};
},
computed: mapState(["showConfirm"]),
computed: {
...mapGetters(["currentPrompt"]),
},
};
</script>

11
frontend/src/components/prompts/FileList.vue
View File

@@ -133,6 +133,17 @@ export default {
this.selected = event.currentTarget.dataset.url;
this.$emit("update:selected", this.selected);
},
createDir: async function () {
this.$store.commit("showHover", {
prompt: "newDir",
action: null,
confirm: null,
props: {
redirect: false,
base: this.current === this.$route.path ? null : this.current,
},
});
},
},
};
</script>

57
frontend/src/components/prompts/Move.vue
View File

@@ -5,27 +5,44 @@
</div>
<div class="card-content">
<file-list @update:selected="(val) => (dest = val)"></file-list>
<file-list ref="fileList" @update:selected="(val) => (dest = val)">
</file-list>
</div>
<div class="card-action">
<button
class="button button--flat button--grey"
@click="$store.commit('closeHovers')"
:aria-label="$t('buttons.cancel')"
:title="$t('buttons.cancel')"
>
{{ $t("buttons.cancel") }}
</button>
<button
class="button button--flat"
@click="move"
:disabled="$route.path === dest"
:aria-label="$t('buttons.move')"
:title="$t('buttons.move')"
>
{{ $t("buttons.move") }}
</button>
<div
class="card-action"
style="display: flex; align-items: center; justify-content: space-between;"
>
<template v-if="user.perm.create">
<button
class="button button--flat"
@click="$refs.fileList.createDir()"
:aria-label="$t('sidebar.newFolder')"
:title="$t('sidebar.newFolder')"
style="justify-self: left;"
>
<span>{{ $t("sidebar.newFolder") }}</span>
</button>
</template>
<div>
<button
class="button button--flat button--grey"
@click="$store.commit('closeHovers')"
:aria-label="$t('buttons.cancel')"
:title="$t('buttons.cancel')"
>
{{ $t("buttons.cancel") }}
</button>
<button
class="button button--flat"
@click="move"
:disabled="$route.path === dest"
:aria-label="$t('buttons.move')"
:title="$t('buttons.move')"
>
{{ $t("buttons.move") }}
</button>
</div>
</div>
</div>
</template>
@@ -46,7 +63,7 @@ export default {
dest: null,
};
},
computed: mapState(["req", "selected"]),
computed: mapState(["req", "selected", "user"]),
methods: {
move: async function (event) {
event.preventDefault();

24
frontend/src/components/prompts/NewDir.vue
View File

@@ -43,6 +43,16 @@ import url from "@/utils/url";
export default {
name: "new-dir",
props: {
redirect: {
type: Boolean,
default: true,
},
base: {
type: [String, null],
default: null,
},
},
data: function () {
return {
name: "",
@@ -57,7 +67,11 @@ export default {
if (this.new === "") return;
// Build the path of the new directory.
let uri = this.isFiles ? this.$route.path + "/" : "/";
let uri;
if (this.base) uri = this.base;
else if (this.isFiles) uri = this.$route.path + "/";
else uri = "/";
if (!this.isListing) {
uri = url.removeLastDir(uri) + "/";
@@ -65,10 +79,14 @@ export default {
uri += encodeURIComponent(this.name) + "/";
uri = uri.replace("//", "/");
try {
await api.post(uri);
this.$router.push({ path: uri });
if (this.redirect) {
this.$router.push({ path: uri });
} else if (!this.base) {
const res = await api.fetch(url.removeLastDir(uri) + "/");
this.$store.commit("updateRequest", res);
}
} catch (e) {
this.$showError(e);
}

44
frontend/src/components/prompts/Prompts.vue
View File

@@ -1,6 +1,12 @@
<template>
<div>
<component ref="currentComponent" :is="currentComponent"></component>
<component
v-if="showOverlay"
:ref="currentPromptName"
:is="currentPromptName"
v-bind="currentPrompt.props"
>
</component>
<div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
</div>
</template>
@@ -20,7 +26,8 @@ import ReplaceRename from "./ReplaceRename.vue";
import Share from "./Share.vue";
import Upload from "./Upload.vue";
import ShareDelete from "./ShareDelete.vue";
import { mapState } from "vuex";
import Sidebar from "../Sidebar.vue";
import { mapGetters, mapState } from "vuex";
import buttons from "@/utils/buttons";
export default {
@@ -40,6 +47,7 @@ export default {
ReplaceRename,
Upload,
ShareDelete,
Sidebar
},
data: function () {
return {
@@ -52,7 +60,7 @@ export default {
},
created() {
window.addEventListener("keydown", (event) => {
if (this.show == null) return;
if (this.currentPrompt == null) return;
let prompt = this.$refs.currentComponent;
@@ -64,7 +72,7 @@ export default {
// Enter
if (event.keyCode == 13) {
switch (this.show) {
switch (this.currentPrompt.prompt) {
case "delete":
prompt.submit();
break;
@@ -82,31 +90,13 @@ export default {
});
},
computed: {
...mapState(["show", "plugins"]),
currentComponent: function () {
const matched =
[
"info",
"help",
"delete",
"rename",
"move",
"copy",
"newFile",
"newDir",
"download",
"replace",
"replace-rename",
"share",
"upload",
"share-delete",
].indexOf(this.show) >= 0;
return (matched && this.show) || null;
},
...mapState(["plugins"]),
...mapGetters(["currentPrompt", "currentPromptName"]),
showOverlay: function () {
return (
this.show !== null && this.show !== "search" && this.show !== "more"
this.currentPrompt !== null &&
this.currentPrompt.prompt !== "search" &&
this.currentPrompt.prompt !== "more"
);
},
},

8
frontend/src/components/prompts/Replace.vue
View File

@@ -19,7 +19,7 @@
</button>
<button
class="button button--flat button--blue"
@click="showAction"
@click="currentPrompt.action"
:aria-label="$t('buttons.continue')"
:title="$t('buttons.continue')"
>
@@ -27,7 +27,7 @@
</button>
<button
class="button button--flat button--red"
@click="showConfirm"
@click="currentPrompt.confirm"
:aria-label="$t('buttons.replace')"
:title="$t('buttons.replace')"
>
@@ -38,10 +38,10 @@
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "replace",
computed: mapState(["showConfirm", "showAction"]),
computed: mapGetters(["currentPrompt"]),
};
</script>

8
frontend/src/components/prompts/ReplaceRename.vue
View File

@@ -19,7 +19,7 @@
</button>
<button
class="button button--flat button--blue"
@click="(event) => showConfirm(event, 'rename')"
@click="(event) => currentPrompt.confirm(event, 'rename')"
:aria-label="$t('buttons.rename')"
:title="$t('buttons.rename')"
>
@@ -27,7 +27,7 @@
</button>
<button
class="button button--flat button--red"
@click="(event) => showConfirm(event, 'overwrite')"
@click="(event) => currentPrompt.confirm(event, 'overwrite')"
:aria-label="$t('buttons.replace')"
:title="$t('buttons.replace')"
>
@@ -38,10 +38,10 @@
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "replace-rename",
computed: mapState(["showConfirm"]),
computed: mapGetters(["currentPrompt"]),
};
</script>

6
frontend/src/components/prompts/ShareDelete.vue
View File

@@ -25,16 +25,16 @@
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "share-delete",
computed: {
...mapState(["showConfirm"]),
...mapGetters(["currentPrompt"]),
},
methods: {
submit: function () {
this.showConfirm();
this.currentPrompt?.confirm();
},
},
};