[6.1] Implementation of graphical workflow editor feature

administrator/components/com_admin/sql/updates/mysql/6.0.0-2025-08-26.sql

@@ -0,0 +1,5 @@
+--
+-- Add position column to workflow stages table
+--
+
+ALTER TABLE `#__workflow_stages` ADD COLUMN `position` text DEFAULT NULL  AFTER `default`;

administrator/components/com_admin/sql/updates/postgresql/6.0.0-2025-08-26.sql

@@ -0,0 +1,5 @@
+--
+-- Add position column to workflow stages table
+--
+
+ALTER TABLE "#__workflow_stages" ADD COLUMN "position" text DEFAULT NULL;

administrator/components/com_content/src/Model/ArticleModel.php

@@ -1044,6 +1044,8 @@ protected function preprocessForm(Form $form, $data, $group = 'content')
 
         $this->workflowPreprocessForm($form, $data);
 
+        $form->setFieldAttribute('transition', 'layout', 'joomla.form.field.groupedlist-transition');
+
         parent::preprocessForm($form, $data, $group);
     }
 

administrator/components/com_workflow/layouts/toolbar/redo.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_workflow
+ *
+ * @copyright   (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\Language\Text;
+
+Factory::getApplication()->getDocument()->getWebAssetManager()
+    ->useScript('webcomponent.toolbar-button');
+
+?>
+<joomla-toolbar-button>
+    <button id="redo-workflow" class="btn btn-info action-button" tabindex="0">
+        <span class="icon-redo icon-fw" aria-hidden="true"></span>
+        <?php echo Text::_('COM_WORKFLOW_REDO'); ?>
+    </button>
+</joomla-toolbar-button>
+
+<script>
+    document.getElementById('redo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickRedoWorkflow');
+    });
+</script>

administrator/components/com_workflow/layouts/toolbar/shortcuts.php

@@ -0,0 +1,37 @@
+<?php
+
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_workflow
+ *
+ * @copyright   (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\Language\Text;
+
+Factory::getApplication()->getDocument()->getWebAssetManager()
+    ->useScript('webcomponent.toolbar-button');
+
+$shortcutsPopupOptions = json_encode([
+    'src'             => '#shortcuts-popup-content',
+    'width'           => '800px',
+    'height'          => 'fit-content',
+    'textHeader'      => Text::_('COM_WORKFLOW_GRAPH_SHORTCUTS_TITLE'),
+    'preferredParent' => 'body',
+]);
+?>
+<joomla-toolbar-button>
+    <button
+        class="btn btn-info action-button"
+        data-joomla-dialog="<?php echo htmlspecialchars($shortcutsPopupOptions, ENT_QUOTES, 'UTF-8'); ?>"
+        tabindex="0"
+        title
+    >
+        <span class="fa fa-keyboard" aria-hidden="true"></span>
+        <?php echo Text::_('COM_WORKFLOW_GRAPH_SHORTCUTS'); ?>
+    </button>
+</joomla-toolbar-button>

administrator/components/com_workflow/layouts/toolbar/undo.php

@@ -0,0 +1,33 @@
+<?php
+
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_workflow
+ *
+ * @copyright   (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\Language\Text;
+
+Factory::getApplication()->getDocument()->getWebAssetManager()
+    ->useScript('webcomponent.toolbar-button');
+
+?>
+<joomla-toolbar-button>
+    <button id="undo-workflow" class="btn btn-info action-button" tabindex="0">
+        <span class="icon-undo-2 icon-fw" aria-hidden="true"></span>
+        <?php echo Text::_('COM_WORKFLOW_UNDO'); ?>
+    </button>
+</joomla-toolbar-button>
+
+
+<script>
+    document.getElementById('undo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickUndoWorkflow');
+    });
+</script>
+

administrator/components/com_workflow/resources/scripts/app/Event.es6.js

@@ -0,0 +1,45 @@
+/**
+ * Simple Event Bus for cross-module communication
+ * Used to communicate between Joomla buttons and Vue app
+ */
+export default new class EventBus {
+  /**
+   * Internal registry of events
+   * @type {Object<string, Function[]>}
+   */
+  constructor() {
+    this.events = {};
+  }
+
+  /**
+   * Trigger a custom event with optional payload
+   * @param {string} event - Event name
+   * @param {*} [data=null] - Optional payload
+   */
+  fire(event, data = null) {
+    (this.events[event] || []).forEach((fn) => fn(data));
+  }
+
+  /**
+   * Register a callback for an event
+   * @param {string} event - Event name
+   * @param {Function} callback - Function to invoke on event
+   */
+  listen(event, callback) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(callback);
+  }
+
+  /**
+   * Remove a listener from an event
+   * @param {string} event - Event name
+   * @param {Function} callback - Function to remove
+   */
+  off(event, callback) {
+    if (this.events[event]) {
+      this.events[event] = this.events[event].filter((fn) => fn !== callback);
+    }
+  }
+}();

administrator/components/com_workflow/resources/scripts/app/WorkflowGraphApi.es6.js

@@ -0,0 +1,206 @@
+/**
+ * Handles API communication for the workflow graph.
+ */
+class WorkflowGraphApi {
+  /**
+   * Initializes the WorkflowGraphApi instance.
+   *
+   * @throws {TypeError} If required options are missing.
+   */
+  constructor() {
+    const {
+      apiBaseUrl,
+      extension,
+    } = Joomla.getOptions('com_workflow', {});
+
+    if (!apiBaseUrl) {
+      throw new TypeError(Joomla.Text._('COM_WORKFLOW_GRAPH_API_BASEURL_NOT_SET', 'Workflow API baseUrl is not defined'));
+    }
+
+    if (!extension) {
+      throw new TypeError(Joomla.Text._('COM_WORKFLOW_GRAPH_ERROR_EXTENSION_NOT_SET', 'Workflow extension is not set'));
+    }
+
+    this.baseUrl = apiBaseUrl;
+    this.extension = extension;
+    this.csrfToken = Joomla.getOptions('csrf.token', null);
+
+    if (!this.csrfToken) {
+      throw new TypeError(Joomla.Text._('COM_WORKFLOW_GRAPH_ERROR_CSRF_TOKEN_NOT_SET', 'CSRF token is not set'));
+    }
+  }
+
+  /**
+   * Makes a request using Joomla.request with better error handling.
+   *
+   * @param {string} url - The endpoint relative to baseUrl.
+   * @param {Object} [options={}] - Request config (method, data, headers).
+   * @returns {Promise<any>} The parsed response or error.
+   */
+  async makeRequest(url, options = {}) {
+    const headers = options.headers || {};
+    headers['X-Requested-With'] = 'XMLHttpRequest';
+    options.headers = headers;
+    options[this.csrfToken] = 1;
+
+    return new Promise((resolve, reject) => {
+      Joomla.request({
+        url: `${this.baseUrl}${url}&extension=${this.extension}`,
+        ...options,
+        onSuccess: (response) => {
+          const data = JSON.parse(response);
+          resolve(data);
+        },
+        onError: (xhr) => {
+          let message = 'Network error';
+          try {
+            const errorData = JSON.parse(xhr.responseText);
+            message = errorData.data || errorData.message || message;
+          } catch (e) {
+            message = xhr.statusText || message;
+          }
+          if (window.Joomla && window.Joomla.renderMessages) {
+            window.Joomla.renderMessages({ error: [message] });
+          }
+          reject(new Error(message));
+        },
+      });
+    });
+  }
+
+  /**
+   * Fetches workflow data by ID.
+   *
+   * @param {number} id - Workflow ID.
+   * @returns {Promise<Object|null>}
+   */
+  async getWorkflow(id) {
+    return this.makeRequest(`&task=graph.getWorkflow&workflow_id=${id}&format=json`);
+  }
+
+  /**
+   * Fetches stages for a given workflow.
+   *
+   * @param {number} workflowId - Workflow ID.
+   * @returns {Promise<Object[]|null>}
+   */
+  async getStages(workflowId) {
+    return this.makeRequest(`&task=graph.getStages&workflow_id=${workflowId}&format=json`);
+  }
+
+  /**
+   * Fetches transitions for a given workflow.
+   *
+   * @param {number} workflowId - Workflow ID.
+   * @returns {Promise<Object[]|null>}
+   */
+  async getTransitions(workflowId) {
+    return this.makeRequest(`&task=graph.getTransitions&workflow_id=${workflowId}&format=json`);
+  }
+
+  /**
+   * Deletes a stage from a workflow.
+   *
+   * @param {number} id - Stage ID.
+   * @param {number} workflowId - Workflow ID.
+   * @param {boolean} [stageDelete=0] - Optional flag to indicate if the stage should be deleted or just trashed.
+   *
+   * @returns {Promise<boolean>}
+   */
+  async deleteStage(id, workflowId, stageDelete = false) {
+    try {
+      const formData = new FormData();
+      formData.append('cid[]', id);
+      formData.append('workflow_id', workflowId);
+      formData.append('type', 'stage');
+      formData.append(this.csrfToken, '1');
+
+      const response = await this.makeRequest(`&task=${stageDelete ? 'graph.delete' : 'graph.trash'}&workflow_id=${workflowId}&format=json`, {
+        method: 'POST',
+        data: formData,
+      });
+
+      if (response && response.success) {
+        if (window.Joomla && window.Joomla.renderMessages) {
+          window.Joomla.renderMessages({
+            success: [response?.data?.message || response?.message],
+          });
+        }
+      }
+    } catch (error) {
+      window.WorkflowGraph.Event.fire('Error', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Deletes a transition from a workflow.
+   *
+   * @param {number} id - Transition ID.
+   * @param {number} workflowId - Workflow ID.
+   * @param {boolean} [transitionDelete=false] - Optional flag to indicate if the transition should be deleted or just trashed.
+   *
+   * @returns {Promise<boolean>}
+   */
+  async deleteTransition(id, workflowId, transitionDelete = false) {
+    try {
+      const formData = new FormData();
+      formData.append('cid[]', id);
+      formData.append('workflow_id', workflowId);
+      formData.append('type', 'transition');
+      formData.append(this.csrfToken, '1');
+
+      const response = await this.makeRequest(`&task=${transitionDelete ? 'graph.delete' : 'graph.trash'}&workflow_id=${workflowId}&format=json`, {
+        method: 'POST',
+        data: formData,
+      });
+
+      if (response && response.success) {
+        if (window.Joomla && window.Joomla.renderMessages) {
+          window.Joomla.renderMessages({
+            success: [response?.data?.message || response?.message],
+          });
+        }
+      }
+    } catch (error) {
+      window.WorkflowGraph.Event.fire('Error', { error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * Updates the position of a stage.
+   *
+   * @param {number} workflowId - Workflow ID.
+   * @param {Object} positions - Position objects {x, y} of updated stages.
+   * @returns {Promise<Object|null>}
+   */
+  async updateStagePosition(workflowId, positions) {
+    try {
+      const formData = new FormData();
+      formData.append('workflow_id', workflowId);
+      formData.append(this.csrfToken, '1');
+
+      if (positions === null || Object.keys(positions).length === 0) {
+        return true;
+      }
+
+      Object.entries(positions).forEach(([id, position]) => {
+        formData.append(`positions[${id}][x]`, position.x);
+        formData.append(`positions[${id}][y]`, position.y);
+      });
+
+      const response = await this.makeRequest('&task=stages.updateStagesPosition&format=json', {
+        method: 'POST',
+        data: formData,
+      });
+
+      return !!(response && response.success);
+    } catch (error) {
+      window.WorkflowGraph.Event.fire('Error', { error });
+      throw error;
+    }
+  }
+}
+
+export default new WorkflowGraphApi();