feat: Added layered prompt support(#2659)

frontend/src/components/Search.vue

@@ -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;
     },

frontend/src/components/Sidebar.vue

@@ -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,

frontend/src/components/header/HeaderBar.vue

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

frontend/src/components/prompts/Delete.vue

@@ -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;
         }

frontend/src/components/prompts/Download.vue

@@ -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>

frontend/src/components/prompts/Move.vue

@@ -9,6 +9,17 @@
     </div>
 
     <div class="card-action">
+      <div v-if="user.perm.create">
+        <button
+          class="button button--flat"
+          @click="$store.commit('showHover', 'newDir')"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+        >
+          <i class="material-icons">create_new_folder</i>
+          <span>{{ $t("sidebar.newFolder") }}</span>
+        </button>
+      </div>
       <button
         class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
@@ -46,7 +57,7 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected"]),
+  computed: mapState(["req", "selected", "user"]),
   methods: {
     move: async function (event) {
       event.preventDefault();

frontend/src/components/prompts/Prompts.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <component ref="currentComponent" :is="currentComponent"></component>
+    <component ref="getCurrentPrompt" :is="getCurrentPrompt"></component>
     <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
@@ -20,7 +20,7 @@ import ReplaceRename from "./ReplaceRename";
 import Share from "./Share";
 import Upload from "./Upload";
 import ShareDelete from "./ShareDelete";
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import buttons from "@/utils/buttons";
 
 export default {
@@ -52,7 +52,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 +64,7 @@ export default {
 
       // Enter
       if (event.keyCode == 13) {
-        switch (this.show) {
+        switch (this.currentPrompt.prompt) {
           case "delete":
             prompt.submit();
             break;
@@ -82,31 +82,15 @@ 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"]),
     showOverlay: function () {
       return (
-        this.show !== null && this.show !== "search" && this.show !== "more"
+        this.currentPrompt !== null &&
+        this.currentPrompt.prompt
+        !== "search" &&
+        this.currentPrompt.prompt
+        !== "more"
       );
     },
   },

frontend/src/components/prompts/Replace.vue

@@ -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>

frontend/src/components/prompts/ReplaceRename.vue

@@ -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>

frontend/src/components/prompts/ShareDelete.vue

@@ -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();
     },
   },
 };

frontend/src/store/getters.js

@@ -43,6 +43,9 @@ const getters = {
 
     return files.sort((a, b) => a.progress - b.progress);
   },
+  currentPrompt: (state) => {
+    return state.prompts.length > 0 ? state.prompts[state.prompts.length - 1] : null;
+  },
 };
 
 export default getters;

frontend/src/store/index.js

@@ -20,10 +20,8 @@ const state = {
   reload: false,
   selected: [],
   multiple: false,
-  show: null,
+  prompts: [],
   showShell: false,
-  showConfirm: null,
-  showAction: null,
 };
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -4,6 +4,8 @@ import moment from "moment";
 const mutations = {
   closeHovers: (state) => {
     state.show = null;
+    state.prompts.pop();
+    console.log(state.prompts);
     state.showConfirm = null;
     state.showAction = null;
   },
@@ -13,10 +15,16 @@ const mutations = {
   showHover: (state, value) => {
     if (typeof value !== "object") {
       state.show = value;
+      state.prompts.push({
+        prompt: value,
+        confirm: null,
+        action: null
+      });
       return;
     }
 
     state.show = value.prompt;
+    state.prompts.push(value);
     state.showConfirm = value.confirm;
     if (value.action !== undefined) {
       state.showAction = value.action;
@@ -24,9 +32,11 @@ const mutations = {
   },
   showError: (state) => {
     state.show = "error";
+    state.prompts.push("error");
   },
   showSuccess: (state) => {
     state.show = "success";
+    state.prompts.push("success");
   },
   setLoading: (state, value) => {
     state.loading = value;

frontend/src/views/Files.vue

@@ -50,7 +50,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "reload", "loading", "show"]),
+    ...mapState(["req", "reload", "loading"]),
     currentView() {
       if (this.req.type == undefined) {
         return null;

frontend/src/views/Layout.vue

@@ -30,7 +30,7 @@ export default {
     UploadFiles,
   },
   computed: {
-    ...mapGetters(["isLogged", "progress"]),
+    ...mapGetters(["isLogged", "progress", "currentPrompt"]),
     ...mapState(["user"]),
     isExecEnabled: () => enableExec,
   },
@@ -38,7 +38,7 @@ export default {
     $route: function () {
       this.$store.commit("resetSelected");
       this.$store.commit("multiple", false);
-      if (this.$store.state.show !== "success")
+      if (this.currentPrompt.prompt !== "success")
         this.$store.commit("closeHovers");
     },
   },

frontend/src/views/files/Preview.vue

@@ -143,7 +143,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import { files as api } from "@/api";
 import { resizePreview } from "@/utils/constants";
 import url from "@/utils/url";
@@ -177,7 +177,8 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "user", "oldReq", "jwt", "loading", "show"]),
+    ...mapState(["req", "user", "oldReq", "jwt", "loading"]),
+    ...mapGetters(["currentPrompt"]),
     hasPrevious() {
       return this.previousLink !== "";
     },
@@ -195,7 +196,7 @@ export default {
       return api.getDownloadURL(this.req, true);
     },
     showMore() {
-      return this.$store.state.show === "more";
+      return this.currentPrompt.prompt === "more";
     },
     isResizeEnabled() {
       return resizePreview;
@@ -247,7 +248,7 @@ export default {
       this.$router.replace({ path: this.nextLink });
     },
     key(event) {
-      if (this.show !== null) {
+      if (this.currentPrompt !== null) {
         return;
       }
 

frontend/src/views/settings/User.vue

@@ -37,7 +37,7 @@
       </form>
     </div>
 
-    <div v-if="$store.state.show === 'deleteUser'" class="card floating">
+    <div v-if="this.currentPrompt.prompt === 'deleteUser'" class="card floating">
       <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
       </div>
@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapMutations, mapGetters } from "vuex";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm";
 import Errors from "@/views/Errors";
@@ -89,6 +89,7 @@ export default {
       return this.$route.path === "/settings/users/new";
     },
     ...mapState(["loading"]),
+    ...mapGetters(["currentPrompt"])
   },
   watch: {
     $route: "fetchData",