feature/FOUR-12713: Behaviour with the Navigation "Process Browser"

ProcessMaker/Http/Controllers/ProcessesCatalogueController.php

@@ -7,22 +7,16 @@
 use ProcessMaker\Models\Process;
 use ProcessMaker\Models\ProcessCategory;
 
+/**
+ * @param Request $request
+ * @param Process $process
+ *
+ * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+ */
 class ProcessesCatalogueController extends Controller
 {
-    public function index(Request $request)
+    public function index(Request $request, Process $process = null)
     {
-        return view('processes-catalogue.index');
-    }
-
-    /**
-     * @param Process $process
-     * @param string $id
-     *
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
-     */
-    public function open(Process $process, Request $request)
-    {
-        $category = $request->input('category') ?? 0;
-        return view('processes-catalogue.open', compact('process', 'category'));
+        return view('processes-catalogue.index', compact('process'));
     }
 }

resources/js/processes-catalogue/components/Breadcrumbs.vue

@@ -14,8 +14,8 @@
       </li>
 
       <li v-if="category" class="breadcrumb-item">
-        <a :aria-label="categoryName">
-          {{ categoryName }}
+        <a :aria-label="category">
+          {{ category }}
         </a>
       </li>
 
@@ -32,24 +32,10 @@ export default {
   props: ["process", "category"],
   data() {
     return {
-      categoryName: "",
     };
   },
   mounted() {
-    this.getCategory();
-  },
-  methods: {
-    getCategory(value = "") {
-      if (value) {
-        this.categoryName = value;
-      } else if (this.category) {
-        ProcessMaker.apiClient
-          .get(`process_categories/${this.category}`)
-          .then((response) => {
-            this.categoryName = response.data.name;
-          });
-      }
-    },
   },
+  methods: {},
 };
 </script>

resources/js/processes-catalogue/components/CardProcess.vue

@@ -4,7 +4,7 @@
       v-for="process in processList"
       :key="process.id"
       class="card-process"
-      @click="openProcessInfo(process.id)"
+      @click="openProcessInfo(process)"
     >
       <b-card-text>
         <img
@@ -43,8 +43,9 @@ export default {
           this.processList = response.data.data;
         });
     },
+    /** go to process info */
     openProcessInfo(process) {
-      window.location = `/processes-catalogue/${process}`;
+      this.$emit("openProcess", process);
     },
   },
 };

resources/js/processes-catalogue/components/ProcessInfo.vue

@@ -1,39 +1,25 @@
 <template>
   <div>
-    <breadcrumbs
-      ref="breadcrumb"
-      :category="selectCategory"
-      :process="process.name"
-    />
     <b-row>
-      <b-col cols="2">
-        <h4>{{ $t("Processes Browser") }}</h4>
-        <MenuCatologue
-          :data="listCategories"
-          :select="selectCategorie"
-          class="mt-3"
-        />
-      </b-col>
-      <b-col cols="10">
-        <div class="d-flex">
-          <b-col cols="9">
-            <process-map
-              :process="process"
-              :permission="permission"
-              :current-user-id="currentUserId"
-              :is-documenter-installed="isDocumenterInstalled"
-            />
-            <processes-carousel
-              :process="process"
-            />
-          </b-col>
-          <b-col cols="3">
-            <process-options :process="process" />
-          </b-col>
-        </div>
-        <b-col cols="12">
-          <process-tab></process-tab>
+      <div class="d-flex">
+        <b-col cols="9">
+          <process-map
+            :process="process"
+            :permission="permission"
+            :current-user-id="currentUserId"
+            :is-documenter-installed="isDocumenterInstalled"
+            @goBackCategory="goBackCategory"
+          />
+          <processes-carousel
+            :process="process"
+          />
+        </b-col>
+        <b-col cols="3">
+          <process-options :process="process" />
         </b-col>
+      </div>
+      <b-col cols="12">
+        <process-tab></process-tab>
       </b-col>
     </b-row>
   </div>
@@ -56,34 +42,15 @@ export default {
     ProcessesCarousel,
     ProcessTab,
   },
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "category"],
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
   data() {
     return {
-      listCategories: [],
-      selectCategory: 0,
     };
   },
-  created() {
-    this.selectCategory = this.selectedCategory();
-    this.getCategories();
-  },
   methods: {
-    selectedCategory() {
-      if (this.category) {
-        return this.category;
-      }
-      const categories = this.process.process_category_id;
-      return typeof categories === "string" ? categories.split(",")[0] : categories;
-    },
-    getCategories() {
-      ProcessMaker.apiClient
-        .get("process_categories")
-        .then((response) => {
-          this.listCategories = response.data.data;
-        });
-    },
-    selectCategorie(value) {
-      // TODO Flow from processInfo to ProcessesCtalogue
+    /** Rerun a process cards */
+    goBackCategory() {
+      this.$emit("goBackCategory");
     },
   },
 };

resources/js/processes-catalogue/components/ProcessMap.vue

@@ -101,9 +101,10 @@ export default {
     getActions() {
       this.processLaunchpadActions = this.processActions.filter((action) => action.value !== "open-launchpad");
     },
+    /** Rerun a process cards from process info */
     goBack() {
-      window.location = "/processes-catalogue";
-    }
+      this.$emit("goBackCategory");
+    },
   },
 };
 </script>

resources/js/processes-catalogue/components/ProcessesCatalogue.vue

@@ -2,7 +2,8 @@
   <div>
     <breadcrumbs
       ref="breadcrumb"
-      :category="category ? category.id : ''"
+      :category="category ? category.name : ''"
+      :process="selectedProcess ? selectedProcess.name : ''"
     />
     <b-row>
       <b-col cols="2">
@@ -29,7 +30,7 @@
       </b-col>
       <b-col cols="10">
         <div
-          v-if="!showWizardTemplates && !showCardProcesses"
+          v-if="!showWizardTemplates && !showCardProcesses && !showProcess"
           class="d-flex justify-content-center py-5"
         >
           <CatalogueEmpty />
@@ -38,13 +39,23 @@
         <CardProcess
           v-if="showCardProcesses"
           :category="category"
+          @openProcess="openProcess"
+        />
+        <ProcessInfo
+          v-if="showProcess"
+          :process="selectedProcess"
+          :current-user-id="currentUserId"
+          :permission="permission"
+          :is-documenter-installed="isDocumenterInstalled"
+          @goBackCategory="returnedFromInfo"
         />
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
+import ProcessInfo from "./ProcessInfo.vue";
 import MenuCatologue from "./menuCatologue.vue";
 import CatalogueEmpty from "./CatalogueEmpty.vue";
 import CardProcess from "./CardProcess.vue";
@@ -53,44 +64,77 @@ import WizardTemplates from "./WizardTemplates.vue";
 
 export default {
   components: {
-    MenuCatologue, CatalogueEmpty, Breadcrumbs, CardProcess, WizardTemplates,
+    MenuCatologue, CatalogueEmpty, Breadcrumbs, CardProcess, WizardTemplates, ProcessInfo,
   },
+  props: ["permission", "isDocumenterInstalled", "currentUserId", "process"],
   data() {
     return {
       listCategories: [],
       fields: [],
       wizardTemplates: [],
       showWizardTemplates: false,
       showCardProcesses: false,
+      showProcess: false,
       category: null,
+      selectedProcess:null,
       numCategories: 15,
       page: 1,
     };
   },
   mounted() {
     this.getCategories();
+    this.checkSelectedProcess();
   },
   methods: {
+    /** Add new page of categories */
     addCategories() {
       this.page += 1;
       this.getCategories();
     },
+    /** Get list of categories */
     getCategories() {
       ProcessMaker.apiClient
         .get(`process_categories?page=${this.page}&per_page=${this.numCategories}`)
         .then((response) => {
           this.listCategories = [...this.listCategories, ...response.data.data];
         });
     },
+    /** Check if there is a pre-selected process */
+    checkSelectedProcess() {
+      if (this.process) {
+        this.openProcess(this.process);
+        const categories = this.process.process_category_id;
+        const categoryId = typeof categories === "string" ? categories.split(",")[0] : categories;
+        ProcessMaker.apiClient
+          .get(`process_categories/${categoryId}`)
+          .then((response) => {
+            this.category = response.data;
+          });
+      }
+    },
+    /** Select a category and show display */
     selectCategorie(value) {
       this.category = value;
-      this.$refs.breadcrumb.getCategory(value.name);
+      this.selectedProcess = null;
       this.showCardProcesses = true;
       this.showWizardTemplates = false;
+      this.showProcess = false;
     },
+    /** Select a wizard templates and show display */
     wizardTemplatesSelected() {
       this.showWizardTemplates = true;
       this.showCardProcesses = false;
+      this.showProcess = false;
+    },
+    /** Select a process and show display */
+    openProcess(process) {
+      this.showCardProcesses = false;
+      this.showProcess = true;
+      this.selectedProcess = process;
+    },
+    /** Rerun a process cards from process info */
+    returnedFromInfo() {
+      this.selectCategorie(this.category);
     },
   },
 };

resources/views/processes-catalogue/index.blade.php

@@ -10,7 +10,13 @@
 
 @section('content')
   <div class="px-3 page-content mb-0" id="processes-catalogue">
-    <processes-catalogue></processes-catalogue>
+    <processes-catalogue
+      :process="{{$process ?? 0}}"
+      :current-user-id="{{ \Auth::user()->id }}"
+      :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks') }}"
+      is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"
+    >
+  </processes-catalogue>
   </div>
 @endsection
 

routes/web.php

@@ -91,9 +91,8 @@
     Route::get('designer/scripts/categories', [ScriptController::class, 'index'])->name('script-categories.index')->middleware('can:view-script-categories');
     Route::get('designer', [DesignerController::class, 'index'])->name('designer.index');
 
-    Route::get('processes-catalogue', [ProcessesCatalogueController::class, 'index'])->name('processes.catalogue.index');
-    Route::get('processes-catalogue/{process}', [ProcessesCatalogueController::class, 'open'])->name('processes.catalogue.open');
-
+    Route::get('processes-catalogue/{process?}', [ProcessesCatalogueController::class, 'index'])->name('processes.catalogue.index');
+
     Route::get('processes', [ProcessController::class, 'index'])->name('processes.index');
     Route::get('processes/{process}/edit', [ProcessController::class, 'edit'])->name('processes.edit')->middleware('can:edit-processes');
     Route::get('processes/{process}/export/{page?}', [ProcessController::class, 'export'])->name('processes.export')->middleware('can:export-processes');

webpack.mix.js

@@ -119,7 +119,6 @@ mix.js("resources/js/app-layout.js", "public/js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")
-  .js("resources/js/processes-catalogue/open.js", "public/js/processes-catalogue/open.js")
 
   .js("resources/js/tasks/index.js", "public/js/tasks/index.js")
   .js("resources/js/tasks/mobile.js", "public/js/tasks/mobile.js")