fix: Fixed some null issues + added props attribute for dialog prop passing (#2659)

frontend/src/components/Search.vue

@@ -91,9 +91,9 @@ export default {
   },
   watch: {
     currentPrompt(val, old) {
-      this.active = val.prompt === "search";
+      this.active = val?.prompt === "search";
 
-      if (old.prompt === "search" && !this.active) {
+      if (old?.prompt === "search" && !this.active) {
         if (this.reload) {
           this.setReload(true);
         }

frontend/src/components/Sidebar.vue

@@ -135,7 +135,7 @@ export default {
     ...mapState(["user"]),
     ...mapGetters(["isLogged", "currentPrompt"]),
     active() {
-      return this.currentPrompt.prompt === "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.currentPrompt.prompt === 'more' }">
+    <div id="dropdown" :class="{ active: this.currentPromptName === 'more' }">
       <slot name="actions" />
     </div>
 
@@ -25,7 +25,7 @@
 
     <div
       class="overlay"
-      v-show="this.currentPrompt.prompt == 'more'"
+      v-show="this.currentPromptName == 'more'"
       @click="$store.commit('closeHovers')"
     />
   </header>
@@ -54,7 +54,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(["currentPrompt"]),
+    ...mapGetters(["currentPromptName"]),
   }
 };
 </script>

frontend/src/components/prompts/Prompts.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <component ref="getCurrentPrompt" :is="getCurrentPrompt"></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>
@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     ...mapState(["plugins"]),
-    ...mapGetters(["currentPrompt"]),
+    ...mapGetters(["currentPrompt", "currentPromptName"]),
     showOverlay: function () {
       return (
         this.currentPrompt !== null &&

frontend/src/store/getters.js

@@ -46,6 +46,9 @@ const getters = {
   currentPrompt: (state) => {
     return state.prompts.length > 0 ? state.prompts[state.prompts.length - 1] : null;
   },
+  currentPromptName: (_, getters) => {
+    return getters.currentPrompt?.prompt;
+  }
 };
 
 export default getters;

frontend/src/store/mutations.js

@@ -13,12 +13,14 @@ const mutations = {
     state.showShell = !state.showShell;
   },
   showHover: (state, value) => {
+    console.log(value);
     if (typeof value !== "object") {
       state.show = value;
       state.prompts.push({
         prompt: value,
         confirm: null,
-        action: null
+        action: null,
+        props: {}
       });
       return;
     }

frontend/src/views/Layout.vue

@@ -38,7 +38,7 @@ export default {
     $route: function () {
       this.$store.commit("resetSelected");
       this.$store.commit("multiple", false);
-      if (this.currentPrompt.prompt !== "success")
+      if (this.currentPrompt?.prompt !== "success")
         this.$store.commit("closeHovers");
     },
   },

frontend/src/views/files/Preview.vue

@@ -196,7 +196,7 @@ export default {
       return api.getDownloadURL(this.req, true);
     },
     showMore() {
-      return this.currentPrompt.prompt === "more";
+      return this.currentPrompt?.prompt === "more";
     },
     isResizeEnabled() {
       return resizePreview;

frontend/src/views/settings/User.vue

@@ -37,7 +37,7 @@
       </form>
     </div>
 
-    <div v-if="this.currentPrompt.prompt === 'deleteUser'" class="card floating">
+    <div v-if="this.currentPromptName === 'deleteUser'" class="card floating">
       <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
       </div>
@@ -89,7 +89,7 @@ export default {
       return this.$route.path === "/settings/users/new";
     },
     ...mapState(["loading"]),
-    ...mapGetters(["currentPrompt"])
+    ...mapGetters(["currentPrompt", "currentPromptName"])
   },
   watch: {
     $route: "fetchData",