Skip to content

Commit a446fc0

Browse files
DileepadariDileepadari
committed
implemented all the changes regarding dropdowns
1 parent 16e1dc1 commit a446fc0

File tree

16 files changed

+430
-388
lines changed

16 files changed

+430
-388
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div
33
id="workflow-app"
4-
class="workflow-app-container d-flex flex-column flex-grow-1 min-vh-80"
4+
class="d-flex flex-column flex-grow-1 min-vh-80"
55
role="application"
6-
aria-label="appTitle"
76
>
87
<div
8+
id="workflow-title"
99
class="d-flex flex-column flex-shrink-0"
1010
role="banner"
1111
>
@@ -18,7 +18,6 @@
1818
id="main-canvas"
1919
class="flex-grow-1 position-relative"
2020
role="main"
21-
aria-labelledby="workflow-heading"
2221
>
2322
<WorkflowCanvas
2423
ref="canvas"
@@ -51,10 +50,10 @@ function handleCanvasFocus() {
5150
onMounted(() => {
5251
const { workflowId: idFromOpts = null } = Joomla.getOptions('com_workflow', {});
5352
const idFromURL = parseInt(new URL(window.location.href).searchParams.get('id'), 10);
54-
const workflowIdFinal = idFromOpts || idFromURL;
53+
const currentWorkflowId = idFromOpts || idFromURL;
5554
56-
if (workflowIdFinal !== null && !Number.isNaN(workflowIdFinal)) {
57-
store.dispatch('loadWorkflow', workflowIdFinal);
55+
if (currentWorkflowId !== null && !Number.isNaN(currentWorkflowId)) {
56+
store.dispatch('loadWorkflow', currentWorkflowId);
5857
} else {
5958
throw new Error('COM_WORKFLOW_GRAPH_ERROR_INVALID_ID');
6059
}

‎administrator/components/com_workflow/resources/scripts/components/Titlebar.vue‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,42 @@
11
<template>
22
<section
3-
class="workflow-graph-titlebar d-flex flex-wrap align-items-center justify-content-between"
3+
class="d-flex flex-wrap align-items-center justify-content-between"
44
aria-labelledby="workflow-title"
55
role="region"
66
>
77
<div class="col-md-6 d-flex flex-column">
8-
<h2
9-
id="workflow-title"
10-
class="mb-2"
11-
>
8+
<h2 class="mb-2">
129
{{ translate(workflow?.title) }}
1310
</h2>
1411
<dl
1512
class="d-flex align-items-center flex-wrap mb-0"
1613
aria-label="workflow details"
1714
>
18-
<div class="me-3 mb-1 d-flex align-items-center">
15+
<div class="me-3 mb-1 d-flex">
1916
<dt class="visually-hidden">
20-
{{ translate('COM_WORKFLOW_GRAPH_STATUS') }}
17+
{{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
2118
</dt>
2219
<dd>
2320
<span
2421
class="badge"
25-
:class="workflow.published ? 'bg-success text-white' : 'bg-warning text-dark'"
22+
:class="workflow.published ? 'bg-success' : 'bg-warning'"
2623
role="status"
2724
>
2825
{{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
2926
</span>
3027
</dd>
3128
</div>
32-
<div class="me-3 mb-1 d-flex align-items-center">
29+
<div class="me-3 mb-1 d-flex">
3330
<dt class="visually-hidden">
34-
{{ translate('COM_WORKFLOW_GRAPH_STAGE_COUNT') }}
31+
{{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
3532
</dt>
3633
<dd>
3734
{{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
3835
</dd>
3936
</div>
40-
<div class="me-3 mb-1 d-flex align-items-center">
37+
<div class="me-3 mb-1 d-flex">
4138
<dt class="visually-hidden">
42-
{{ translate('COM_WORKFLOW_GRAPH_TRANSITION_COUNT') }}
39+
{{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
4340
</dt>
4441
<dd>
4542
{{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION') :
@@ -50,10 +47,10 @@
5047
</div>
5148
<div
5249
id="save-message"
50+
class="mb-2 fw-bold"
5351
:class="{
5452
'text-warning': saveStatus.value === 'unsaved',
5553
}"
56-
class="mb-2 fw-bold"
5754
>
5855
{{
5956
saveStatus.value === 'unsaved'

‎administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,6 @@
2929
/>
3030
{{ translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION') }}
3131
</button>
32-
33-
<!--<button
34-
:class="['btn toolbar-button', isTransitionMode ? 'btn-success' : 'btn-primary', 'd-flex', 'align-items-center', 'gap-1']"
35-
tabindex="0"
36-
:aria-pressed="isTransitionMode"
37-
:aria-label="isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE')
38-
: translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE')"
39-
@click="$emit('toggle-transition-mode')"
40-
>
41-
<span
42-
:class="isTransitionMode ? 'icon icon-toggle-on' : 'icon icon-toggle-off'"
43-
aria-hidden="true"
44-
/>
45-
{{ isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE') }}
46-
</button> -->
4732
</Panel>
4833
</template>
4934

@@ -53,12 +38,6 @@ import { Panel } from '@vue-flow/core';
5338
export default {
5439
name: 'ControlsPanel',
5540
components: { Panel },
56-
props: {
57-
isTransitionMode: {
58-
type: Boolean,
59-
default: false,
60-
},
61-
},
62-
emits: ['add-stage', 'add-transition', 'toggle-transition-mode'],
41+
emits: ['add-stage', 'add-transition'],
6342
};
6443
</script>

‎administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
ref="controlsContainer"
4-
class="custom-controls"
4+
class="custom-controls z-10"
55
tabindex="0"
66
>
77
<button

‎administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue‎

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
22
<div
3-
id="main-canvas"
4-
ref="canvasRegion"
53
class="w-100 h-100 position-relative"
64
role="region"
75
>
@@ -10,14 +8,15 @@
108
class="workflow-canvas"
119
max-zoom="2.5"
1210
min-zoom=".3"
13-
:nodes="positionedNodes"
1411
:edges="styledEdges"
12+
:nodes="positionedNodes"
1513
:node-types="nodeTypes"
1614
:edge-types="edgeTypes"
1715
:nodes-connectable="workflow?.canCreate"
1816
:elements-selectable="true"
1917
:snap-to-grid="true"
2018
:snap-grid="[40, 40]"
19+
:disable-keyboard-a11y="true"
2120
@connect="handleConnect"
2221
@pane-click="clearSelection"
2322
@edge-click="selectEdge"
@@ -30,9 +29,8 @@
3029

3130
<button
3231
id="toggle-minimap"
33-
class="toolbar-button custom-controls-button position-absolute"
32+
class="toolbar-button custom-controls-button position-absolute z-20"
3433
tabindex="0"
35-
style="z-index: 1003"
3634
:style="showMiniMap ? 'bottom: 130px; left: 180px;' : 'bottom: 10px; left: 10px;'"
3735
:aria-label="showMiniMap ? translate('COM_WORKFLOW_GRAPH_MINIMAP_HIDE') : translate('COM_WORKFLOW_GRAPH_MINIMAP_SHOW')"
3836
:title="showMiniMap ? translate('COM_WORKFLOW_GRAPH_MINIMAP_HIDE') : translate('COM_WORKFLOW_GRAPH_MINIMAP_SHOW')"
@@ -49,21 +47,21 @@
4947
</button>
5048
<MiniMap
5149
v-if="showMiniMap"
50+
class="z-10"
5251
position="bottom-left"
5352
pannable
5453
zoomable
5554
:node-color="(node) => node.data?.stage?.color || '#0d6efd'"
5655
:mask-color="'rgba(255, 255, 255, .6)'"
57-
:aria-label="translate('COM_WORKFLOW_GRAPH_MINIMAP')"
5856
/>
59-
<CustomControls aria-label="Graph controls" />
57+
<CustomControls
58+
aria-label="Graph controls"
59+
/>
6060
<ControlsPanel
6161
v-if="workflow?.canCreate"
6262
class="canvas-controls-panel"
63-
:is-transition-mode="isTransitionMode"
6463
@add-stage="addStage"
6564
@add-transition="addTransition"
66-
@toggle-transition-mode="toggleTransitionMode"
6765
/>
6866
</VueFlow>
6967
<div
@@ -122,7 +120,7 @@ export default {
122120
fitView, zoomIn, zoomOut, viewport, setViewport, onViewportChange,
123121
} = useVueFlow();
124122
125-
const isTransitionMode = ref(true);
123+
const isTransitionMode = ref(false);
126124
const selectedStage = ref(null);
127125
const selectedTransition = ref(null);
128126
const liveRegion = ref(null);
@@ -191,11 +189,13 @@ export default {
191189
}
192190
193191
function selectStage(id) {
192+
isTransitionMode.value = false;
194193
selectedStage.value = parseInt(id, 10);
195194
selectedTransition.value = null;
196195
}
197196
198197
function selectTransition(id) {
198+
isTransitionMode.value = true;
199199
selectedTransition.value = parseInt(id, 10);
200200
selectedStage.value = null;
201201
}
@@ -217,6 +217,7 @@ export default {
217217
function clearSelection() {
218218
selectedStage.value = null;
219219
selectedTransition.value = null;
220+
isTransitionMode.value = false;
220221
}
221222
222223
function deleteStage(id) {
@@ -275,21 +276,11 @@ export default {
275276
announce(liveRegion.value, translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION_DIALOG_OPENED'));
276277
}
277278
278-
function toggleTransitionMode() {
279-
isTransitionMode.value = !isTransitionMode.value;
280-
announce(
281-
liveRegion.value,
282-
isTransitionMode.value
283-
? translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_ON')
284-
: translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_OFF'),
285-
);
286-
}
287-
288279
function handleConnect({ source, target }) {
289280
if (!workflow?.value?.canCreate) {
290281
return;
291282
}
292-
if (isTransitionMode.value && source && target) {
283+
if (source && target) {
293284
openModal('transition', null, { from_stage_id: source, to_stage_id: target });
294285
}
295286
}
@@ -335,7 +326,7 @@ export default {
335326
336327
const positionedNodes = computed(() => {
337328
const nodes = generatePositionedNodes(stages.value);
338-
const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#EF4444', 'From Any', selectStage, isTransitionMode.value, true);
329+
const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#ffff00', 'From Any', selectStage, false);
339330
return [...nodes.map((n) => ({
340331
...n,
341332
data: {
@@ -346,18 +337,17 @@ export default {
346337
onEdit: () => editStage(n.id),
347338
onDelete: () => showDeleteModal('stage', n.id),
348339
},
349-
// draggable: !isTransitionMode.value,
350340
})), special];
351341
});
352342
353343
const styledEdges = computed(() => generateStyledEdges(transitions.value, {
354-
transitionMode: isTransitionMode.value,
355344
selectedId: selectedTransition.value,
356345
}).map((edge) => ({
357346
...edge,
358347
data: {
359348
...edge.data,
360349
onSelect: () => selectTransition(edge.id),
350+
onEscape: () => clearSelection(),
361351
onDelete: () => showDeleteModal('transition', edge.id),
362352
onEdit: () => editTransition(edge.id),
363353
},
@@ -375,7 +365,6 @@ export default {
375365
if (selectedStage.value) showDeleteModal('stage', selectedStage.value);
376366
else if (selectedTransition.value) showDeleteModal('transition', selectedTransition.value);
377367
},
378-
toggleMode: toggleTransitionMode,
379368
undo: () => {
380369
if (!store.getters.canUndo) {
381370
return;
@@ -434,15 +423,6 @@ export default {
434423
saveNodePosition();
435424
});
436425
437-
// window.WorkflowGraph.Event.fire('Error', { error: error.message });
438-
window.WorkflowGraph.Event.listen('Error', (event) => {
439-
if (window.Joomla && window.Joomla.renderMessages) {
440-
window.Joomla.renderMessages({
441-
error: [event.error.message],
442-
});
443-
}
444-
});
445-
446426
let isRestoringViewport = false;
447427
watch([loading, error], () => {
448428
setTimeout(() => {
@@ -485,13 +465,11 @@ export default {
485465
positionedNodes,
486466
styledEdges,
487467
liveRegion,
488-
isTransitionMode,
489468
handleConnect,
490469
selectEdge,
491470
handleDeleteConfirm,
492471
addStage,
493472
addTransition,
494-
toggleTransitionMode,
495473
clearSelection,
496474
handleNodeDragStop,
497475
};

0 commit comments

Comments
 (0)