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 NULL;

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;

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

@@ -0,0 +1,26 @@
+<?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::getDocument()->getWebAssetManager()
+    ->useScript('webcomponent.toolbar-button');
+
+$title = Text::_('COM_WORKFLOW_REDO');
+?>
+<joomla-toolbar-button>
+    <button class="btn btn-info" onclick="WorkflowGraph.Event.fire('onClickRedoWorkflow')">
+        <span class="icon-redo icon-fw" aria-hidden="true"></span>
+        <?php echo $title; ?>
+    </button>
+</joomla-toolbar-button>

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

@@ -0,0 +1,26 @@
+<?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::getDocument()->getWebAssetManager()
+    ->useScript('webcomponent.toolbar-button');
+
+$title = Text::_('COM_WORKFLOW_UNDO');
+?>
+<joomla-toolbar-button>
+    <button class="btn btn-info" onclick="WorkflowGraph.Event.fire('onClickUndoWorkflow')">
+        <span class="icon-undo-2 icon-fw" aria-hidden="true"></span>
+        <?php echo $title; ?>
+    </button>
+</joomla-toolbar-button>

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

@@ -0,0 +1,32 @@
+/**
+ * Workflow Graph Event bus - used for communication between joomla and vue
+ */
+export default class Event {
+  /**
+     * Workflow Event constructor
+     */
+  constructor() {
+    this.events = {};
+  }
+
+  /**
+     * Fire an event
+     * @param event
+     * @param data
+     */
+  fire(event, data = null) {
+    if (this.events[event]) {
+      this.events[event].forEach((fn) => fn(data));
+    }
+  }
+
+  /**
+     * Listen to events
+     * @param event
+     * @param callback
+     */
+  listen(event, callback) {
+    this.events[event] = this.events[event] || [];
+    this.events[event].push(callback);
+  }
+}

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

@@ -0,0 +1,183 @@
+import Event from './Event.es6.js';
+
+class WorkflowGraphApi {
+  constructor() {
+    const options = Joomla.getOptions('com_workflow', {});
+    if (!options.apiBaseUrl) {
+      throw new TypeError('Workflow API baseUrl is not defined');
+    }
+    this.baseUrl = options.apiBaseUrl;
+
+    if (!options.extension) {
+      throw new TypeError('Workflow API extension is not defined');
+    }
+    this.extension = options.extension;
+    this.csrfToken = Joomla.getOptions('csrf.token');
+    if (!this.csrfToken) {
+      console.warn('CSRF token not found');
+    }
+  }
+
+  /**
+   * Generic request method with better error handling
+   */
+  async makeRequest(url, options = {}) {
+    const defaultOptions = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+    };
+
+    // add csrf for all request as data [token] = 1
+    if (this.csrfToken) {
+      if (!options.data) {
+        options.data = {};
+      }
+      options.data[this.csrfToken] = '1';
+    }
+
+    const config = { ...defaultOptions, ...options };
+
+    if (options.data instanceof FormData) {
+      delete config.headers['Content-Type'];
+    }
+    return new Promise((resolve, reject) => {
+      Joomla.request({
+        url: `${this.baseUrl}${url}&extension=${this.extension}`,
+        ...config,
+        onSuccess: (response) => {
+          resolve(response);
+        },
+        onError: (xhr) => {
+          let message = 'Network error';
+          try {
+            const errorData = JSON.parse(xhr.responseText);
+            message = errorData.message || message;
+          } catch (e) {
+            message = xhr.statusText || message;
+          }
+          reject(new Error(message));
+        }
+      });
+    });
+  }
+
+  async getWorkflow(id) {
+    try {
+      const response = await this.makeRequest(`&task=graph.getWorkflow&id=${id}&format=json`);
+      const data = typeof response === 'string' ? JSON.parse(response) : response;
+
+      if (data.success === false) {
+        WorkflowGraph.Event.fire('onWorkflowError', { error: data.message || 'Failed to load workflow' });
+        return;
+      }
+
+      return data.data || data;
+    } catch (error) {
+      WorkflowGraph.Event.fire('onWorkflowError', { error: error.message });
+      throw error;
+    }
+  }
+
+  async getStages(workflowId) {
+    try {
+      const response = await this.makeRequest(`&task=graph.getStages&workflow_id=${workflowId}&format=json`);
+      const data = typeof response === 'string' ? JSON.parse(response) : response;
+
+      if (data.success === false) {
+        WorkflowGraph.Event.fire('onStagesError', { error: data.message || 'Failed to load stages' });
+        return;
+      }
+
+      return data.data || data;
+    } catch (error) {
+      WorkflowGraph.Event.fire('onStagesError', { error: error.message });
+      throw error;
+    }
+  }
+
+  async getTransitions(workflowId) {
+    try {
+      const response = await this.makeRequest(`&task=graph.getTransitions&workflow_id=${workflowId}&format=json`);
+      const data = typeof response === 'string' ? JSON.parse(response) : response;
+
+      if (data.success === false) {
+        WorkflowGraph.Event.fire('onTransitionsError', { error: data.message || 'Failed to load transitions' });
+        return;
+      }
+
+      return data.data || data;
+    } catch (error) {
+      WorkflowGraph.Event.fire('onTransitionsError', { error: error.message });
+      throw error;
+    }
+  }
+
+  async deleteStage(id, workflowId) {
+    try {
+      const formData = new FormData();
+      formData.append('cid[]', id);
+      formData.append('workflow_id', workflowId);
+
+      if (this.csrfToken) {
+        formData.append(this.csrfToken, '1');
+      }
+
+      const response = await this.makeRequest(`&task=stages.trash&format=raw`, {
+        method: 'POST',
+        data: formData,
+        processData: false,
+        contentType: false
+      });
+
+      if (response.success === false) {
+        WorkflowGraph.Event.fire('onStageError', { error: response.message || 'Failed to delete stage' });
+        return false;
+      }
+
+      return true;
+    } catch (error) {
+      WorkflowGraph.Event.fire('onStageError', { error: error.message });
+      throw error;
+    }
+  }
+
+  async deleteTransition(id, workflowId) {
+    try {
+      const formData = new FormData();
+      formData.append('cid[]', id);
+      formData.append('workflow_id', workflowId);
+
+      if (this.csrfToken) {
+        formData.append(this.csrfToken, '1');
+      }
+
+      await this.makeRequest(`&task=transitions.trash&format=raw`, {
+        method: 'POST',
+        data: formData,
+        processData: false,
+        contentType: false
+      });
+
+      WorkflowGraph.Event.fire('onTransitionDeleted', { id });
+      return true;
+    } catch (error) {
+      WorkflowGraph.Event.fire('onTransitionError', { error: error.message });
+      throw error;
+    }
+  }
+
+  // async updateStagePosition(stageId, position) {
+  //   try {
+  //     const stage = { id: stageId, position: position };
+  //     return await this.saveStage(stage);
+  //   } catch (error) {
+  //     WorkflowGraph.WorkflowGraph.Event.fire('onStageError', { error: error.message });
+  //     throw error;
+  //   }
+  // }
+}
+
+export default new WorkflowGraphApi();

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

@@ -0,0 +1,52 @@
+<template>
+    <div class="d-flex flex-column flex-grow-1" style="min-height: 75vh" role="application" aria-label="Workflow Builder Application">
+      <div class="d-flex flex-column flex-grow-0">
+        <WorkflowTitlebar />
+      </div>
+      <div class="d-flex flex-grow-1 overflow-hidden">
+        <main
+          class="flex-grow-1 position-relative"
+          id="main-canvas"
+          role="main"
+          aria-label="Workflow Canvas"
+        >
+          <WorkflowCanvas />
+        </main>
+      </div>
+    </div>
+</template>
+
+<script>
+import { onMounted } from 'vue';
+import { useStore } from 'vuex';
+import WorkflowTitlebar from "./titlebar/titlebar.vue";
+import WorkflowCanvas from "./canvas/WorkflowCanvas.vue";
+
+export default {
+  name: 'WorkflowGraphApp',
+  components: {
+    WorkflowCanvas,
+    WorkflowTitlebar,
+  },
+  setup() {
+    const store = useStore();
+
+    onMounted(() => {
+      // Extract workflow ID from the URL or from Joomla options
+      const options = Joomla.getOptions('com_workflow', {});
+      const workflowId = options.workflowId || parseInt(new URL(window.location.href).searchParams.get('id'), 10);
+
+      if (workflowId) {
+        store.dispatch('loadWorkflow', workflowId);
+      } else {
+        console.error('No workflow ID provided');
+      }
+
+      const tokenEl = document.querySelector('input[name="<?php echo JSession::getFormToken(); ?>"]')
+      if (tokenEl) {
+        tokenEl.name = Joomla.getOptions('csrf.token', '')
+      }
+    });
+  }
+};
+</script>