FOUR-12581:Process Launchpad: Create the initial mockup

ProcessMaker/Http/Controllers/ProcessesCatalogueController.php

@@ -4,11 +4,26 @@
 
 use Illuminate\Http\Request;
 use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessCategory;
 
 class ProcessesCatalogueController extends Controller
 {
     public function index(Request $request)
     {
         return view('processes-catalogue.index');
     }
+    /**
+     * @param Process $process
+     * @param string $id
+     * 
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function open(Process $process, $id)
+    {
+        return view('processes-catalogue.open', [
+            'process' => $process,
+            'processId' => $id
+        ]);
+    }
 }

resources/js/components/shared/ellipsisMenuActions.js

@@ -23,7 +23,7 @@ export default {
           value: "open-launchpad",
           content: "Open Launchpad",
           link: true,
-          href: "/processes-catalogue/",
+          href: "/processes-catalogue/{{id}}",
           permission: ["edit-processes", "create-projects", "view-projects"],
           icon: "fas fa-file-export",
         },

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

@@ -0,0 +1,41 @@
+<template>
+  <b-row>
+    <b-col cols="2">
+      <h4> {{ $t('Processes Browser') }} </h4>
+      <!--
+      Menu Catalogue FOUR-12111
+      <MenuCatologue
+        :data="listCategories"
+        :select="selectCategorie"
+        class="mt-3"
+      />
+      -->
+    </b-col>
+    <b-col cols="10">
+      <div class="d-flex">
+        <b-col cols="9">
+          Process Map
+        </b-col>
+        <b-col cols="3">
+          Process Options
+        </b-col>
+      </div>
+      <b-col cols="12">
+        Process Tab
+      </b-col>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      fields: [],
+    };
+  },
+  methods: {
+  },
+};
+</script>

resources/js/processes-catalogue/open.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import ProcessInfo from "./components/ProcessInfo.vue";
+
+new Vue({
+  el: "#open-process",
+  components: { ProcessInfo },
+  data: {},
+  methods: {},
+});

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

@@ -0,0 +1,19 @@
+@extends('layouts.layout')
+
+@section('title')
+  {{__('Processes Catalogue')}}
+@endsection
+
+@section('sidebar')
+  @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_processes_catalogue')])
+@endsection
+
+@section('content')
+  <div id="open-process" class="px-3 page-content mb-0">
+    <process-info :processId={{$processId}}></process-info>
+  </div>
+@endsection
+
+@section('js')
+  <script src="{{mix('js/processes-catalogue/open.js')}}"></script>
+@endsection

webpack.mix.js

@@ -117,6 +117,7 @@ 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")