Epic/FOUR-11531: Process LaunchPad - Initial changes

ProcessMaker/Http/Controllers/Api/ProcessController.php

@@ -107,6 +107,11 @@ public function index(Request $request)
         if (!empty($filter)) {
             $processes->filter($filter);
         }
+        // Filter by category
+        $category = $request->input('category', null);
+        if (!empty($category)) {
+            $processes->processCategory($category);
+        }
 
         if (!empty($pmql)) {
             try {

ProcessMaker/Http/Controllers/ProcessesCatalogueController.php

@@ -20,11 +20,9 @@ public function index(Request $request)
      *
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
-    public function open(Process $process, $id)
+    public function open(Process $process, Request $request)
     {
-        return view('processes-catalogue.open', [
-            'process' => $process,
-            'processId' => $id,
-        ]);
+        $category = $request->input('category') ?? 0;
+        return view('processes-catalogue.open', compact('process', 'category'));
     }
 }

ProcessMaker/Http/Middleware/GenerateMenus.php

@@ -29,18 +29,18 @@ public function handle(Request $request, Closure $next)
                     )->active('home/*');
                 });
             }
-            $menu->group(['prefix' => 'requests'], function ($request_items) {
-                $request_items->add(
-                    __('Requests'),
-                    ['route' => 'requests.index', 'id' => 'requests']
-                )->active('requests/*');
-            });
             $menu->group(['prefix' => 'processes'], function ($request_items) {
                 $request_items->add(
                     __('Processes'),
                     ['route' => 'processes.catalogue.index', 'id' => 'processes-catalogue']
                 )->active('processes-catalogue/*');
             });
+            $menu->group(['prefix' => 'requests'], function ($request_items) {
+                $request_items->add(
+                    __('Requests'),
+                    ['route' => 'requests.index', 'id' => 'requests']
+                )->active('requests/*');
+            });
             //@TODO change the index to the correct blade
             $menu->group(['prefix' => 'tasks'], function ($request_items) {
                 $request_items->add(

ProcessMaker/Models/Bookmark.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace ProcessMaker\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use ProcessMaker\Models\ProcessMakerModel;
+
+class Bookmark extends ProcessMakerModel
+{
+    use HasFactory;
+
+    protected $connection = 'processmaker';
+
+    protected $table = 'user_process_bookmarks';
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'user_id',
+        'process_id',
+    ];
+}

ProcessMaker/Models/Process.php

@@ -450,6 +450,14 @@ public function scopeArchived($query)
         return $query->where('processes.status', 'ARCHIVED');
     }
 
+    /**
+     * Scope a query to include a specific category
+     */
+    public function scopeProcessCategory($query, int $id)
+    {
+        return $query->where('processes.process_category_id', $id);
+    }
+
     public function getCollaborations()
     {
         $this->bpmnDefinitions = app(BpmnDocumentInterface::class, ['process' => $this]);

database/migrations/2023_11_30_165723_add_launchpad_properties_at_processes.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('processes', function (Blueprint $table) {
+            $table->json('launchpad_properties')->nullable();
+        });
+        Schema::table('process_versions', function (Blueprint $table) {
+            $table->json('launchpad_properties')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('processes', function (Blueprint $table) {
+            $table->dropColumn(['launchpad_properties']);
+        });
+        Schema::table('process_versions', function (Blueprint $table) {
+            $table->dropColumn(['launchpad_properties']);
+        });
+    }
+};

database/migrations/2023_11_30_170839_create_user_process_bookmarks_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('user_process_bookmarks', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->unsignedBigInteger('user_id');
+            $table->unsignedInteger('process_id');
+            $table->timestamps();
+
+            // Foreign keys
+            $table->foreign('process_id')->references('id')->on('processes')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('user_process_bookmarks');
+    }
+};

resources/js/components/shared/EllipsisMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <b-dropdown
+    v-if="filterActions.length > 0"
     :variant="variant ? variant : 'ellipsis'"
     no-caret
     no-flip
@@ -9,7 +10,6 @@
     class="ellipsis-dropdown-main"
     @show="onShow"
     @hide="onHide"
-    v-if="filterActions.length > 0"    
   >
     <template v-if="customButton" #button-content>
       <i
@@ -20,6 +20,9 @@
         {{ customButton.content }} <b v-if="showProgress && data && data.batch"> {{ getTotalProgress(data.batch, data.progress) }}%</b>
       </span>
     </template>
+    <template v-else-if="lauchpad" #button-content>
+      <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
+    </template>
     <template v-else #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
     </template>
@@ -74,21 +77,21 @@
       </div>
       <div v-for="action in filterActions">
         <b-dropdown-divider v-if="action.value == 'divider'"/>
-        <b-dropdown-item v-else
-            :key="action.value"
-            :href="action.link ? itemLink(action, data) : null"
-            class="ellipsis-dropdown-item mx-auto"
-            @click="!action.link ? onClick(action, data) : null"
+        <b-dropdown-item
+          v-else
+          :key="action.value"
+          :href="action.link ? itemLink(action, data) : null"
+          class="ellipsis-dropdown-item mx-auto"
+          @click="!action.link ? onClick(action, data) : null"
         >
           <div class="ellipsis-dropdown-content">
             <i
-                class="pr-1 fa-fw"
-                :class="action.icon"
+              class="pr-1 fa-fw"
+              :class="action.icon"
             />
             <span>{{ $t(action.content) }}</span>
           </div>
         </b-dropdown-item>
-
       </div>
     </div>
   </b-dropdown>
@@ -103,7 +106,7 @@ export default {
   components: { PmqlInput },
   filters: { },
   mixins: [],
-  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant"],
+  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "lauchpad", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant"],
   data() {
     return {
       active: false,
@@ -166,7 +169,7 @@ export default {
       return this.actions.filter(action => {
         // Check if the action has a 'permission' property and it's a non-empty string
         if (!action.permission || typeof action.permission === 'string' && action.permission.trim() === '') {
-            return true; // No specific permission required or invalid format, so allow the action.
+          return true; // No specific permission required or invalid format, so allow the action.
         }
         let requiredPermissions;
         // Check if this.permission is of type string
@@ -175,7 +178,7 @@ export default {
         } else {
           requiredPermissions = action.permission;
         }
-        
+
         // Check if this.permission is of type object
         if (typeof this.permission === 'object' && this.permission !== null) {
           const keys = Object.keys(this.permission);

resources/js/components/shared/ellipsisMenuActions.js

@@ -30,8 +30,8 @@ export default {
           icon: "fas fa-file-export",
         },
         {
-          value: "edit-designer",
-          content: "Edit Process",
+          value: "open-in-modeler",
+          content: "Open in Modeler",
           link: true,
           href: "/modeler/{{id}}",
           permission: ["edit-processes", "view-additional-asset-actions"],

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

@@ -0,0 +1,55 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb bg-transparent p-0 mb-3">
+      <li class="breadcrumb-item">
+        <a href="/" :aria-label="$t('Home')">
+          <i class="fas fa-home" />
+        </a>
+      </li>
+
+      <li class="breadcrumb-item">
+        <a href="/processes-catalogue" :aria-label="$t('Home')">
+          {{ $t('Processes') }}
+        </a>
+      </li>
+
+      <li v-if="category" class="breadcrumb-item">
+        <a :aria-label="categoryName">
+          {{ categoryName }}
+        </a>
+      </li>
+
+      <li v-if="process" class="breadcrumb-item">
+        {{ process }}
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+export default {
+  router: window.ProcessMaker.Router,
+  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;
+          });
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="container processList">
+    <b-card
+      v-for="process in processList"
+      :key="process.id"
+      class="card-process"
+      @click="openProcessInfo(process.id)"
+    >
+      <b-card-text>
+        <img
+          class="icon-process"
+          src="/img/default-process.svg"
+          :alt="$t('Default Icon')"
+        >
+        <span class="title-process">{{ process.name }}</span>
+      </b-card-text>
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["category"],
+  data() {
+    return {
+      processList: [],
+    };
+  },
+  watch: {
+    category() {
+      this.loadCard();
+    },
+  },
+  mounted() {
+    this.loadCard();
+  },
+  methods: {
+    loadCard() {
+      /* TODO complete the new API */
+      ProcessMaker.apiClient
+        .get("processes")
+        .then((response) => {
+          this.processList = response.data.data;
+        });
+    },
+    openProcessInfo(process) {
+      window.location = `/processes-catalogue/${process}`;
+    },
+  },
+};
+</script>
+
+<style>
+.processList {
+  display: flex;
+  flex-wrap: wrap;
+}
+.card-process {
+  width: 350px;
+  height: 240px;
+  margin-top: 1rem;
+  margin-right: 1rem;
+  border-radius: 16px;
+}
+.card-text {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  padding-top: 15%;
+}
+.icon-process {
+  font-size: 68px;
+  margin-bottom: 1rem;
+}
+.title-process {
+  color: #556271;
+  font-family: Poppins, sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.4px;
+  text-transform: uppercase;
+}
+</style>