From b7f5ed4176ffc8408ab415a3b5c70c536182981f Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Fri, 9 May 2025 16:56:14 -0400 Subject: [PATCH 1/6] FOUR-22734 S1: The Publish and save process needs to save the stages ##Description 1. Update the process.stages with all stages. 2. When the flow was assigned a Stage needs to show the NUMBER related to the stage. 3. Update the process.bpmn with the pm:config added in the flow, like: pm:config="{stageId:2; stageName:'Review proposal'}". --- src/components/modeler/Modeler.vue | 5 +++++ src/mixins/linkConfig.js | 15 +++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index f11dcd2fd..dc951b4a8 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -782,6 +782,11 @@ export default { this.generateAssets(); } }); + + this.paperManager.paper.on('link:pointerclick', function(linkView, evt, x, y) { + const model = linkView.model; + model.component.addCustomMarker(); + }); }, registerCustomNodes() diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 2ad3c4028..0c8b35357 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -437,6 +437,21 @@ export default { this.listeningToMouseup = false; } }, + addCustomMarker() { + //change line color + this.shape.attr({ + line: { stroke: 'red' }, + }); + + //add a square marker to the link + this.shape.attr({ + '.joint-marker-target': { + 'fill': 'red', + 'stroke': 'red', + 'stroke-width': 2, + }, + }); + }, }, created() { this.updateWaypoints = debounce(this.updateWaypoints, 100); From 0e9dbf38b8de5b870bad47439f04d0a1664498a9 Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Fri, 16 May 2025 10:00:53 -0400 Subject: [PATCH 2/6] FOUR-22734 S1: The Publish and save process needs to save the stages ##Description 1. Update the process.stages with all stages. 2. When the flow was assigned a Stage needs to show the NUMBER related to the stage. 3. Update the process.bpmn with the pm:config added in the flow, like: pm:config="{stageId:2; stageName:'Review proposal'}". --- src/components/modeler/Modeler.vue | 10 ++-- src/mixins/linkConfig.js | 78 +++++++++++++++++++++++++----- 2 files changed, 72 insertions(+), 16 deletions(-) diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index dc951b4a8..9218ae721 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -451,6 +451,7 @@ export default { ], validPreviewElements, centered: false, + currentStageModel: null }; }, watch: { @@ -783,11 +784,12 @@ export default { } }); - this.paperManager.paper.on('link:pointerclick', function(linkView, evt, x, y) { - const model = linkView.model; - model.component.addCustomMarker(); + this.paperManager.paper.on('link:pointerclick', (linkView, evt, x, y) => { + this.currentStageModel = linkView.model; }); - + }, + getCurrentStageModelComponent() { + return this.currentStageModel.component; }, registerCustomNodes() { diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 0c8b35357..99236180c 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -437,25 +437,79 @@ export default { this.listeningToMouseup = false; } }, - addCustomMarker() { - //change line color - this.shape.attr({ - line: { stroke: 'red' }, - }); - - //add a square marker to the link - this.shape.attr({ - '.joint-marker-target': { - 'fill': 'red', - 'stroke': 'red', - 'stroke-width': 2, + /** + * This function creates a label for a stage. + * @param {string} string - The text to display in the label. + * @returns {Object} The label object. + */ + stageLabel(string) { + const label = { + customType: 'stage', + position: { + distance: 0.5, + offset: { x: 0, y: 0 } }, + attrs: { + text: { + text: string, + fill: '#ffffff', + fontWeight: 'bold', + fontSize: 12 + }, + rect: { + fill: '#788793', + stroke: '#555555', + strokeWidth: 1, + rx: 3, + ry: 3, + ref: 'text', // Relate rect to text + refWidth: '250%', // Expand width in relation to text + refHeight: '100%', // Expand height in relation to text + refX: '-70%', // Move rect slightly to the left (horizontal padding) + refY: '0%' // Move rect slightly upward (vertical padding) + } + } + }; + return label; + }, + /** + * This function sets the stage label for a link. + * @returns {void} + */ + setStageLabel() { + if(!(this.node.definition?.config)) { + return; + } + const config = JSON.parse(this.node.definition.config); + if(!(config?.stage?.id)) { + return; + } + const label = this.stageLabel(config.stage.order); + this.$nextTick(()=> { + this.removeStageLabels(); + const linkView = this.shape.findView(this.paper); + const labels = linkView.model.get('labels') || []; + linkView.model.set('labels', [...labels, label]); }); }, + /** + * This function removes the stage labels for a link. + * @returns {void} + */ + removeStageLabels() { + const linkView = this.shape.findView(this.paper); + const labels = linkView.model.get('labels') || []; + for (let i = labels.length - 1; i >= 0; i--) { + if (labels[i].customType === 'stage') { + linkView.model.removeLabel(i); + } + } + } }, created() { this.updateWaypoints = debounce(this.updateWaypoints, 100); this.emitSave.bind(this); + this.setStageLabel(); }, async mounted() { await this.$nextTick(); From 312ae1fd0ac30512ae84425c98bcc9662fb6cf93 Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Fri, 16 May 2025 10:18:37 -0400 Subject: [PATCH 3/6] FOUR-22734 Fix code style. --- src/mixins/linkConfig.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 99236180c..b3fa92d0a 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -447,14 +447,14 @@ export default { customType: 'stage', position: { distance: 0.5, - offset: { x: 0, y: 0 } + offset: { x: 0, y: 0 }, }, attrs: { text: { text: string, fill: '#ffffff', fontWeight: 'bold', - fontSize: 12 + fontSize: 12, }, rect: { fill: '#788793', @@ -466,9 +466,9 @@ export default { refWidth: '250%', // Expand width in relation to text refHeight: '100%', // Expand height in relation to text refX: '-70%', // Move rect slightly to the left (horizontal padding) - refY: '0%' // Move rect slightly upward (vertical padding) - } - } + refY: '0%', // Move rect slightly upward (vertical padding) + }, + }, }; return label; }, @@ -477,11 +477,11 @@ export default { * @returns {void} */ setStageLabel() { - if(!(this.node.definition?.config)) { + if (!(this.node.definition?.config)) { return; } const config = JSON.parse(this.node.definition.config); - if(!(config?.stage?.id)) { + if (!(config?.stage?.id)) { return; } const label = this.stageLabel(config.stage.order); @@ -504,7 +504,7 @@ export default { linkView.model.removeLabel(i); } } - } + }, }, created() { this.updateWaypoints = debounce(this.updateWaypoints, 100); From b7a7744524be4cc5d1bec7e226e0de947596322c Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Fri, 16 May 2025 10:23:14 -0400 Subject: [PATCH 4/6] FOUR-22734 Fix code style. --- src/components/modeler/Modeler.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index 9218ae721..69bfb4b7a 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -451,7 +451,7 @@ export default { ], validPreviewElements, centered: false, - currentStageModel: null + currentStageModel: null, }; }, watch: { @@ -784,7 +784,7 @@ export default { } }); - this.paperManager.paper.on('link:pointerclick', (linkView, evt, x, y) => { + this.paperManager.paper.on('link:pointerclick', (linkView) => { this.currentStageModel = linkView.model; }); }, From d14749ed6f1d3ae3e75a430c59ef4fd3e8f8bf2e Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Fri, 16 May 2025 16:18:18 -0400 Subject: [PATCH 5/6] FOUR-22734 Add a tooltip to help users visualize the stage flow. --- src/mixins/linkConfig.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index b3fa92d0a..6527eebca 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -442,7 +442,7 @@ export default { * @param {string} string - The text to display in the label. * @returns {Object} The label object. */ - stageLabel(string) { + stageLabel(string, title) { const label = { customType: 'stage', position: { @@ -467,6 +467,7 @@ export default { refHeight: '100%', // Expand height in relation to text refX: '-70%', // Move rect slightly to the left (horizontal padding) refY: '0%', // Move rect slightly upward (vertical padding) + title: `${this.$t('Stage:')} ${title}`, }, }, }; @@ -484,7 +485,7 @@ export default { if (!(config?.stage?.id)) { return; } - const label = this.stageLabel(config.stage.order); + const label = this.stageLabel(config.stage.order, config.stage.label); this.$nextTick(()=> { this.removeStageLabels(); const linkView = this.shape.findView(this.paper); From c468a64c41c9c207eb8a6d901c170f4c361a2c19 Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Wed, 21 May 2025 08:14:20 -0400 Subject: [PATCH 6/6] FOUR-22734 To maintain consistency with the database columns, we changed the 'label' field to 'name'. --- src/mixins/linkConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 6527eebca..00c21c7d4 100644 --- a/src/mixins/linkConfig.js +++ b/src/mixins/linkConfig.js @@ -485,7 +485,7 @@ export default { if (!(config?.stage?.id)) { return; } - const label = this.stageLabel(config.stage.order, config.stage.label); + const label = this.stageLabel(config.stage.order, config.stage.name); this.$nextTick(()=> { this.removeStageLabels(); const linkView = this.shape.findView(this.paper);