Merge pull request #321 from commandprompt/refactoring/utility-job-de…

…tail

refactor mount of UtilityJobDetail and utilityJobStore initialization

pgmanage/app/static/assets/js/pgmanage_frontend/src/App.vue

@@ -3,13 +3,15 @@
   <SideBarTabs />
   <PasswordModal />
   <MasterPasswordModal />
+  <UtilityJobsJobDetail />
 </template>
 
 <script>
 import SettingsModal from "./components/SettingsModal.vue";
 import SideBarTabs from "./components/SideBarTabs.vue";
 import PasswordModal from "./components/PasswordModal.vue";
 import MasterPasswordModal from './components/MasterPasswordModal.vue'
+import UtilityJobsJobDetail from "./components/UtilityJobsJobDetail.vue";
 import { emitter } from "./emitter";
 import { conn_app, connectionsModalInit } from "./connections_modal";
 
@@ -19,7 +21,8 @@ export default {
     SettingsModal,
     SideBarTabs,
     PasswordModal,
-    MasterPasswordModal
+    MasterPasswordModal,
+    UtilityJobsJobDetail
   },
   mounted() {
     // Ask for master password

pgmanage/app/static/assets/js/pgmanage_frontend/src/components/UtilityJobs.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { utilityJobStore } from "../stores/utility_jobs";
+import { utilityJobStore } from "../stores/stores_initializer";
 import axios from "axios";
 import moment from "moment";
 

pgmanage/app/static/assets/js/pgmanage_frontend/src/components/UtilityJobsJobDetail.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { utilityJobStore } from "../stores/utility_jobs";
+import { utilityJobStore } from "../stores/stores_initializer";
 import axios from "axios";
 import $ from "jquery";
 

pgmanage/app/static/assets/js/pgmanage_frontend/src/components/postgresql_modals.js

@@ -1,15 +1,7 @@
 import { createApp, defineAsyncComponent } from "vue";
-import UtilityJobsJobDetail from "./UtilityJobsJobDetail.vue";
 import cronLight from "@vue-js-cron/light";
 import { tabsStore } from "../stores/stores_initializer";
 
-const jobDetailModal = createApp({
-  components: {
-    "job-detail": UtilityJobsJobDetail,
-  },
-});
-
-jobDetailModal.mount("#utility-job-detail-wrap");
 
 function createExtensionModal(node, mode) {
   const wrap_div = document.getElementById("extension-modal-wrap");

pgmanage/app/static/assets/js/pgmanage_frontend/src/stores/stores_initializer.js

@@ -2,6 +2,7 @@ import { useSnippetsStore } from "./snippets";
 import { useSettingsStore } from "./settings";
 import { useTabsStore } from "./tabs";
 import { useConnectionsStore } from "./connections";
+import { useUtilityJobsStore } from "./utility_jobs";
 import { useDbMetadataStore } from "./db_metadata";
 import { createPinia, setActivePinia } from "pinia";
 
@@ -18,4 +19,13 @@ const connectionsStore = useConnectionsStore();
 
 const dbMetadataStore = useDbMetadataStore();
 
-export { snippetsStore, settingsStore, tabsStore, connectionsStore, dbMetadataStore };
+const utilityJobStore = useUtilityJobsStore();
+
+export {
+  snippetsStore,
+  settingsStore,
+  tabsStore,
+  connectionsStore,
+  utilityJobStore,
+  dbMetadataStore
+};

pgmanage/app/static/assets/js/pgmanage_frontend/src/stores/utility_jobs.js

@@ -17,6 +17,4 @@ const useUtilityJobsStore = defineStore("utilityJob", {
   },
 });
 
-const utilityJobStore = useUtilityJobsStore();
-
-export { utilityJobStore };
+export { useUtilityJobsStore };

pgmanage/app/templates/app/workspace.html

@@ -34,10 +34,6 @@
     <connections-modal></connections-modal>
   </div>
 
-  <div id="utility-job-detail-wrap">
-    <job-detail></job-detail>
-  </div>
-
   <div id="extension-modal-wrap">
   </div>