More refactoring

nolanpro · Jun 10, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 4, 2024 · Jun 4, 2024
commit 02c085d389aa54ea31d5fa2ddcce6cd1c9688f40
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -100,7 +100,7 @@ export default {
      * Build URL for Process Cards
      */
     buildURL() {
-      if (!this.categoryId || this.categoryId === -1) {
+      if (!this.categoryId || this.categoryId === 'all_processes') {
         return "process_bookmarks/processes?"
           + `&page=${this.currentPage}`
           + `&per_page=${this.perPage}`
@@ -110,7 +110,7 @@ export default {
           + "&cat_status=ACTIVE"
           + "&order_by=name&order_direction=asc";
       }
-      if (this.categoryId === 0) {
+      if (this.categoryId === 'bookmarks') {
         return `process_bookmarks?page=${this.currentPage}`
           + `&per_page=${this.perPage}`
           + `&pmql=${encodeURIComponent(this.pmql)}`

diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue
@@ -3,11 +3,13 @@
     <ProcessInfo
       :process="selectedProcess"
       :permission="permission"
+      @goBackCategory="goBackCategory"
     />
     <ProcessScreen
       v-if="verifyScreen"
       :process="selectedProcess"
       :permission="permission"
+      @goBackCategory="goBackCategory"
     />
     <wizard-templates
       :template="guidedTemplates"
@@ -58,6 +60,11 @@ export default {
       return screenId !== 0;
     },
   },
+  methods: {
+    goBackCategory() {
+      this.$emit("goBackCategory");
+    },
+  },
   mounted() {
     if (!this.process && this.processId) {
       ProcessMaker.apiClient

diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -19,12 +19,10 @@
           :category-count="categoryCount"
           :data="listCategories"
           :from-process-list="fromProcessList"
-          :select="selectCategorie"
+          @categorySelected="selectCategory"
           :filter-categories="filterCategories"
           :permission="permission"
-          @wizardLinkSelect="wizardTemplatesSelected"
           @addCategories="addCategories"
-          @selectedCategoryName="selectedCategoryName = $event"
         />
         <div class="mobile-slide-close">
           <b-button variant="light" @click="showMenu = false" size="lg">
@@ -50,42 +48,12 @@
           <div class="mobile-menu-control">
             <span @click="showMenu = !showMenu">
               <i class="fa fa-bars"></i>
-              {{ selectedCategoryName }}
+              {{ category?.name || 'N/A' }}
             </span>
           </div>
 
-          <router-view :permission="permission"></router-view>
+          <router-view :permission="permission" @goBackCategory="goBackCategory"></router-view>
 
-          <!-- TODO: add to routes
-          <CardProcess
-            v-if="showCardProcesses && !showWizardTemplates && !showProcess"
-            :key="key"
-            :category="category"
-            @openProcess="openProcess"
-            @wizardLinkSelect="wizardTemplatesSelected"
-          />
-          <ProcessInfo
-            v-if="showProcess && !showWizardTemplates && !showCardProcesses && !showProcessScreen"
-            :process="selectedProcess"
-            :current-user-id="currentUserId"
-            :current-user="currentUser"
-            :permission="permission"
-            :is-documenter-installed="isDocumenterInstalled"
-            @goBackCategory="returnedFromInfo"
-          />
-          <ProcessScreen
-            v-if="showProcessScreen && !showCardProcesses && !showWizardTemplates"
-            :process="selectedProcess"
-            :current-user-id="currentUserId"
-            :permission="permission"
-            :is-documenter-installed="isDocumenterInstalled"
-            @goBackCategory="returnedFromInfo"
-          />
-          <wizard-templates
-            v-if="showWizardTemplates"
-            :template="guidedTemplates"
-          />
-        </div> -->
       </div>
     </div>
   </div>
@@ -105,7 +73,6 @@ export default {
   data() {
     return {
       showMenu: false,
-      selectedCategoryName: '',
       isMobile: window.screen.width < 650,
       listCategories: [],
       defaultOptions: [
@@ -114,11 +81,11 @@ export default {
           name: this.$t("Recent Cases"),
         },
         {
-          id: -1,
+          id: 'all_processes',
           name: this.$t("All Processes"),
         },
         {
-          id: 0,
+          id: 'bookmarks',
           name: this.$t("My Bookmarks"),
         },
       ],
@@ -136,7 +103,6 @@ export default {
       key: 0,
       totalPages: 1,
       filter: "",
-      markCategory: false,
       fromProcessList: false,
       categoryCount: 0,
       hideLaunchpad: true,
@@ -145,14 +111,6 @@ export default {
   mounted() {
     const url = new URL(window.location.href);
     this.getCategories();
-    setTimeout(() => {
-      this.checkSelectedProcess();
-      if (this.hasGuidedTemplateParamsOnly(url) || this.hasTemplateParams(url)) {
-        // Loaded from URL with guided template parameters to show guided templates
-        // Dynamically load the component
-        this.$refs.categoryList.selectTemplateItem();
-      }
-    }, 500);
     this.$root.$on("clickCarouselImage", (val) => {
         this.hideLaunchpad = !val.hideLaunchpad;
     });
@@ -163,10 +121,13 @@ export default {
     }
   },
   watch: {
-    selectedCategoryName() {
-      // Only hide the menu automatically if we are on mobile
-      if (this.isMobile) {
-        this.showMenu = false;
+    category: {
+      deep: true,
+      handler() {
+        // Only hide the menu automatically if we are on mobile
+        if (this.isMobile) {
+          this.showMenu = false;
+        }
       }
     }
   },
@@ -200,17 +161,15 @@ export default {
             + `&per_page=${this.numCategories}`
             + `&filter=${this.filter}`)
           .then((response) => {
-            if (!this.checkDefaultOptions()) {
-              this.listCategories = [...this.defaultOptions, ...this.listCategories];
-            }
-            this.listCategories = [...this.listCategories, ...response.data.data];
+
+            const loadedCategories = response.data.data.filter(category => {
+              // filter if category exists in the default options
+              return !this.defaultOptions.some(defaultOption => defaultOption.name === category.name);
+            });
+            this.listCategories = [...this.defaultOptions, ...loadedCategories]; 
+
             this.totalPages = response.data.meta.total_pages !== 0 ? response.data.meta.total_pages : 1;
             this.categoryCount = response.data.meta.total;
-            if (this.markCategory) {
-              const indexCategory = this.listCategories.findIndex((category) => category.name === this.category.name);
-              this.$refs.categoryList.markCategory(this.listCategories[indexCategory]);
-              this.markCategory = false;
-            }
           });
       }
     },
@@ -235,18 +194,6 @@ export default {
           const categories = this.process.process_category_id;
           categoryId = typeof categories === "string" ? categories.split(",")[0] : categories;
         }
-        if (categoryId !== "0" && categoryId !== "-1") {
-          ProcessMaker.apiClient
-            .get(`process_bookmarks/${categoryId}`)
-            .then((response) => {
-              this.category = response.data;
-              this.markCategory = true;
-              this.filterCategories(this.category.name);
-            });
-        } else {
-          this.category = this.getDefaultCategory(categoryId);
-          this.$refs.categoryList.markCategory(this.category, false);
-        }
       }
     },
     /**
@@ -258,69 +205,34 @@ export default {
     /**
      * Select a category and show display
      */
-    selectCategorie(value) {
-      // const url = new URL(window.location.href);
-
-      // // If url has Template Params, don't replace state.
-      // if (!this.hasTemplateParams(url)) {
-      //   window.history.replaceState(null, null, "/process-browser");
-      //   this.key += 1;
-      //   this.category = value;
-      //   this.selectedProcess = null;
-      //   this.showCardProcesses = true;
-      //   this.guidedTemplates = false;
-      //   this.showWizardTemplates = false;
-      // }
-
-      // this.showProcess = false;
-
+    selectCategory(value) {
       if (!value) {
         return;
       }
-      this.$router.push({ name: 'index', query: { categoryId: value.id } });
-      this.showMenu = false;
-    },
-    /**
-     * Select a wizard templates and show display
-     */
-    wizardTemplatesSelected(hasUrlParams = false) {
-      if (!hasUrlParams) {
-        // Add the params if the guided template link was selected
-        const url = new URL(window.location.href);
-        if (!url.search.includes("?guided_templates=true")) {
-          url.searchParams.append("guided_templates", true);
-          // history.pushState(null, "", url); // Update the URL without triggering a page reload
-        }
+
+      this.category = value;
+
+      // Do not set the query if we are already on the route
+      if (String(this.$route.query.categoryId) === String(value.id)) {
+        return;
       }
 
-      // Update state variables
-      this.showWizardTemplates = true;
-      this.guidedTemplates = true;
-      this.showCardProcesses = false;
-      this.showProcess = false;
-      this.selectedProcess = null;
-      this.category = null;
+      this.$router.push({ name: 'index', query: { categoryId: value.id } });
     },
     /**
      * Select a process and show display
      */
     openProcess(process) {
       this.showCardProcesses = false;
       this.guidedTemplates = false;
-      // if (this.verifyScreen(process)) {
-      //   this.showProcess = false;
-      //   this.showProcessScreen = true;
-      // } else {
-      //   this.showProcess = true;
-      //   this.showProcessScreen = false;
-      // }
       this.selectedProcess = process;
     },
     /**
      * Return a process cards from process info
      */
-    returnedFromInfo() {
-      this.selectCategorie(this.category);
+    goBackCategory() {
+      const categoryId = this.category ? this.category.id : 'recent'
+      this.$router.push({ name: "index", query: { categoryId } });
     },
     hasGuidedTemplateParamsOnly(url) {
       return url.search.includes("?guided_templates=true") && !url.search.includes("?guided_templates=true&template=");
@@ -356,7 +268,7 @@ export default {
   overflow: hidden;
   margin-top: 15px;
   transition: flex 0.3s;
-  flex: 0 0 315px;
+  flex: 0 0 0px;
 
   .menu-catalog {
     background-color: #F7F9FB;
@@ -398,7 +310,7 @@ export default {
 }
 
 .menu-open .menu {
-  flex: 0 0 0px;
+  flex: 0 0 315px;
   @media (max-width: $lp-breakpoint) {
     left: 0%;
   }

diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -114,7 +114,6 @@ export default {
   },
   props: [
     "data",
-    "select",
     "title",
     "preicon",
     "filterCategories",
@@ -176,30 +175,47 @@ export default {
     selectedProcessItem: {
       deep: true,
       handler: function () {
-        this.$emit('selectedCategoryName', this.selectedProcessItem?.name);
+        this.$emit('categorySelected', this.selectedProcessItem);
       },
+    },
+    $route(r) {
+      this.handleRouteQuery();
+    },
+    data() {
+      this.handleRouteQuery();
     }
   },
   methods: {
+    handleRouteQuery() {
+
+      // Do not change the selected category if we are not in the index route.
+      // This way, we preserve the selected category when returning from process details.
+
+      if (this.$route.name !== "index") {
+        return;
+      }
+
+      const query = this.$route.query;
+
+      this.selectedProcessItem = null;
+      this.selectedTemplateItem = null;
+
+      if (query.categoryId) {
+        this.selectedProcessItem = this.data.find((category) => {
+          return String(category.id) === String(query.categoryId);
+        });
+      }
+    },
     /**
      * Adding categories
      */
     loadMore() {
       this.$emit("addCategories");
     },
-    markCategory(item, filter = true) {
-      this.comeFromProcess = true;
-      this.selectedProcessItem = item;
-      this.selectedTemplateItem = null;
-      if (filter) {
-        this.$refs.searchCategory.fillFilter(item.name);
-      }
-    },
     selectProcessItem(item) {
       this.comeFromProcess = false;
       this.selectedProcessItem = item;
       this.selectedTemplateItem = null;
-      this.select(item);
     },
     /**
      * Enables All Templates option only if user has create-processes permission
@@ -219,8 +235,7 @@ export default {
       }
       this.selectedTemplateItem = item;
       this.selectedProcessItem = null;
-      this.select(item);
-      this.$emit("wizardLinkSelect");
+      this.$emit("wizardLinkSelect", item);
     },
     /**
      * This method opens New Process modal window