Gsoc workflow dileep

administrator/components/com_admin/sql/updates/mysql/6.0.0-2025-07-03.sql

@@ -0,0 +1 @@
+ALTER TABLE `#__workflow_stages` ADD COLUMN `position` text DEFAULT NULL  AFTER `default`;

administrator/components/com_admin/sql/updates/postgresql/6.0.0-2025-07-03.sql

@@ -0,0 +1 @@
+ALTER TABLE "#__workflow_stages" ADD COLUMN "position" text DEFAULT NULL;

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();

administrator/components/com_workflow/resources/scripts/components/App.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    id="workflow-app"
+    class="workflow-app-container d-flex flex-column flex-grow-1 min-vh-80"
+    role="application"
+    aria-label="appTitle"
+  >
+    <div
+      class="d-flex flex-column flex-shrink-0"
+      role="banner"
+    >
+      <WorkflowTitlebar
+        :save-status="saveStatus"
+      />
+    </div>
+    <div class="d-flex flex-grow-1 overflow-hidden">
+      <div
+        id="main-canvas"
+        class="flex-grow-1 position-relative"
+        role="main"
+        aria-labelledby="workflow-heading"
+      >
+        <WorkflowCanvas
+          ref="canvas"
+          :save-status="saveStatus"
+          :set-save-status="setSaveStatus"
+          @focus-request="handleCanvasFocus"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import WorkflowTitlebar from './Titlebar.vue';
+import WorkflowCanvas from './canvas/WorkflowCanvas.vue';
+
+const store = useStore();
+const saveStatus = ref('upToDate');
+function setSaveStatus(val) {
+  saveStatus.value = val;
+}
+const canvas = ref(null);
+
+function handleCanvasFocus() {
+  canvas.value?.focus();
+}
+
+onMounted(() => {
+  const { workflowId: idFromOpts = null } = Joomla.getOptions('com_workflow', {});
+  const idFromURL = parseInt(new URL(window.location.href).searchParams.get('id'), 10);
+  const workflowIdFinal = idFromOpts || idFromURL;
+
+  if (workflowIdFinal !== null && !Number.isNaN(workflowIdFinal)) {
+    store.dispatch('loadWorkflow', workflowIdFinal);
+  } else {
+    throw new Error('COM_WORKFLOW_GRAPH_ERROR_INVALID_ID');
+  }
+});
+</script>
+
+<script>
+export default {
+  name: 'WorkflowGraphApp',
+};
+</script>