From bcfd07be73258a46d4110dbfdcfb8994ca36d888 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Tue, 2 May 2023 19:00:34 +0530 Subject: [PATCH] fix: added sidebar to show workflow data --- .../js/workflow_builder/WorkflowBuilder.vue | 67 +++++++++++-------- .../components/Properties.vue | 58 ++++++++++++++++ .../workflow_builder/components/Sidebar.vue | 21 ++++++ frappe/public/js/workflow_builder/globals.js | 56 ++++++++++++++++ frappe/public/js/workflow_builder/store.js | 8 +++ .../workflow_builder.bundle.js | 4 ++ 6 files changed, 185 insertions(+), 29 deletions(-) create mode 100644 frappe/public/js/workflow_builder/components/Properties.vue create mode 100644 frappe/public/js/workflow_builder/components/Sidebar.vue create mode 100644 frappe/public/js/workflow_builder/globals.js diff --git a/frappe/public/js/workflow_builder/WorkflowBuilder.vue b/frappe/public/js/workflow_builder/WorkflowBuilder.vue index 4bc726a266..9007701461 100644 --- a/frappe/public/js/workflow_builder/WorkflowBuilder.vue +++ b/frappe/public/js/workflow_builder/WorkflowBuilder.vue @@ -5,6 +5,7 @@ import TransitionEdge from "./components/TransitionEdge.vue"; import StateNode from "./components/StateNode.vue"; import ActionNode from "./components/ActionNode.vue"; import ConnectionLine from "./components/ConnectionLine.vue"; +import Sidebar from "./components/Sidebar.vue"; import { useStore } from "./store"; import { nextTick, onMounted, watch } from "vue"; import { useMagicKeys, whenever } from "@vueuse/core"; @@ -185,36 +186,39 @@ onMounted(() => store.fetch()); @@ -222,6 +226,11 @@ onMounted(() => store.fetch()); @import "@vue-flow/core/dist/style.css"; @import "@vue-flow/core/dist/theme-default.css"; +.main { + display: flex; + flex-direction: row; + height: calc(100vh - var(--navbar-height) - var(--page-head-height) - 65px); +} .workflow-container { width: 100%; height: calc(100vh - var(--navbar-height) - var(--page-head-height) - 65px); diff --git a/frappe/public/js/workflow_builder/components/Properties.vue b/frappe/public/js/workflow_builder/components/Properties.vue new file mode 100644 index 0000000000..d7cf08a9d1 --- /dev/null +++ b/frappe/public/js/workflow_builder/components/Properties.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/frappe/public/js/workflow_builder/components/Sidebar.vue b/frappe/public/js/workflow_builder/components/Sidebar.vue new file mode 100644 index 0000000000..cf1310b3c7 --- /dev/null +++ b/frappe/public/js/workflow_builder/components/Sidebar.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/frappe/public/js/workflow_builder/globals.js b/frappe/public/js/workflow_builder/globals.js new file mode 100644 index 0000000000..0356bdc7a8 --- /dev/null +++ b/frappe/public/js/workflow_builder/globals.js @@ -0,0 +1,56 @@ +import AttachControl from "../form_builder/components/controls/AttachControl.vue"; +import ButtonControl from "../form_builder/components/controls/ButtonControl.vue"; +import CheckControl from "../form_builder/components/controls/CheckControl.vue"; +import CodeControl from "../form_builder/components/controls/CodeControl.vue"; +import DataControl from "../form_builder/components/controls/DataControl.vue"; +import GeolocationControl from "../form_builder/components/controls/GeolocationControl.vue"; +import ImageControl from "../form_builder/components/controls/ImageControl.vue"; +import LinkControl from "../form_builder/components/controls/LinkControl.vue"; +import RatingControl from "../form_builder/components/controls/RatingControl.vue"; +import SelectControl from "../form_builder/components/controls/SelectControl.vue"; +import SignatureControl from "../form_builder/components/controls/SignatureControl.vue"; +import TableControl from "../form_builder/components/controls/TableControl.vue"; +import TextControl from "../form_builder/components/controls/TextControl.vue"; +import TextEditorControl from "../form_builder/components/controls/TextEditorControl.vue"; + +export function registerGlobalComponents(app) { + app.component("AttachControl", AttachControl) + .component("AttachImageControl", AttachControl) + .component("AutocompleteControl", DataControl) + .component("BarcodeControl", DataControl) + .component("ButtonControl", ButtonControl) + .component("CheckControl", CheckControl) + .component("CodeControl", CodeControl) + .component("ColorControl", DataControl) + .component("CurrencyControl", DataControl) + .component("DataControl", DataControl) + .component("DateControl", DataControl) + .component("DatetimeControl", DataControl) + .component("DurationControl", DataControl) + .component("DynamicLinkControl", DataControl) + .component("FloatControl", DataControl) + .component("GeolocationControl", GeolocationControl) + .component("HeadingControl", ButtonControl) + .component("HTMLControl", DataControl) + .component("HTMLEditorControl", CodeControl) + .component("IconControl", DataControl) + .component("ImageControl", ImageControl) + .component("IntControl", DataControl) + .component("JSONControl", CodeControl) + .component("LinkControl", LinkControl) + .component("LongTextControl", TextControl) + .component("MarkdownEditorControl", CodeControl) + .component("PasswordControl", DataControl) + .component("PercentControl", DataControl) + .component("PhoneControl", DataControl) + .component("ReadOnlyControl", DataControl) + .component("RatingControl", RatingControl) + .component("SelectControl", SelectControl) + .component("SignatureControl", SignatureControl) + .component("SmallTextControl", TextControl) + .component("TableControl", TableControl) + .component("TableMultiSelectControl", DataControl) + .component("TextControl", TextControl) + .component("TextEditorControl", TextEditorControl) + .component("TimeControl", DataControl); +} diff --git a/frappe/public/js/workflow_builder/store.js b/frappe/public/js/workflow_builder/store.js index 13e738ca1e..44d05f9d43 100644 --- a/frappe/public/js/workflow_builder/store.js +++ b/frappe/public/js/workflow_builder/store.js @@ -9,6 +9,7 @@ export const useStore = defineStore("workflow-builder-store", () => { let workflow = ref({ elements: [], }); + let workflowfields = ref([]); let ref_history = ref(null); async function fetch() { @@ -18,6 +19,11 @@ export const useStore = defineStore("workflow-builder-store", () => { workflow_doc.value = frappe.get_doc("Workflow", workflow_name.value); await frappe.model.with_doctype(workflow_doc.value.document_type); + if (!workflowfields.value.length) { + await frappe.model.with_doctype("Workflow"); + workflowfields.value = frappe.get_meta("Workflow").fields; + } + if ( workflow_doc.value.workflow_data && JSON.parse(workflow_doc.value.workflow_data).length && @@ -75,7 +81,9 @@ export const useStore = defineStore("workflow-builder-store", () => { return { workflow_name, + workflow_doc, workflow, + workflowfields, ref_history, fetch, reset_changes, diff --git a/frappe/public/js/workflow_builder/workflow_builder.bundle.js b/frappe/public/js/workflow_builder/workflow_builder.bundle.js index 7f1db78c13..89a995fdae 100644 --- a/frappe/public/js/workflow_builder/workflow_builder.bundle.js +++ b/frappe/public/js/workflow_builder/workflow_builder.bundle.js @@ -2,6 +2,7 @@ import { createApp } from "vue"; import { createPinia } from "pinia"; import { useStore } from "./store"; import WorkflowBuilderComponent from "./WorkflowBuilder.vue"; +import { registerGlobalComponents } from "./globals.js"; class WorkflowBuilder { constructor({ wrapper, page, workflow }) { @@ -53,6 +54,9 @@ class WorkflowBuilder { this.store = useStore(); this.store.workflow_name = this.workflow; + // register global components + registerGlobalComponents(app); + // mount the app this.$workflow_builder = app.mount(this.$wrapper.get(0)); }