Skip to content

Commit 1c38d65

Browse files
DileepadariDileepadari
committed
refactored code without delete functionality
1 parent 06a36ad commit 1c38d65

File tree

20 files changed

+299
-181
lines changed

20 files changed

+299
-181
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ALTER TABLE "#__workflow_stages" ADD COLUMN "position" text DEFAULT NULL AFTER "default";
1+
ALTER TABLE "#__workflow_stages" ADD COLUMN "position" text DEFAULT NULL;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ onMounted(() => {
6262
if (workflowIdFinal !== null && !isNaN(workflowIdFinal)) {
6363
store.dispatch('loadWorkflow', workflowIdFinal);
6464
} else {
65-
throw new Error('WORKFLOW_GRAPH_INVALID_WORKFLOW_ID');
65+
throw new Error('COM_WORKFLOW_GRAPH_INVALID_WORKFLOW_ID');
6666
}
6767
});
6868
</script>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@
44
<h2 class="h2 mb-2" id="workflow-title">{{ translate(workflow?.title) }}</h2>
55
<dl class="d-flex align-items-center flex-wrap mb-0" aria-label="workflow details">
66
<div class="me-3 mb-1 d-flex align-items-center">
7-
<dt class="visually-hidden">{{ translate('WORKFLOW_GRAPH_STATUS') }}</dt>
7+
<dt class="visually-hidden">{{ translate('COM_WORKFLOW_GRAPH_STATUS') }}</dt>
88
<dd>
99
<span
1010
class="badge"
1111
:class="workflow.published ? 'bg-success text-white' : 'bg-warning text-dark'"
1212
role="status"
1313
>
14-
{{ workflow.published ? translate('WORKFLOW_GRAPH_ENABLED') : translate('WORKFLOW_GRAPH_DISABLED') }}
14+
{{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
1515
</span>
1616
</dd>
1717
</div>
1818
<div class="me-3 mb-1 d-flex align-items-center">
19-
<dt class="visually-hidden">{{ translate('WORKFLOW_GRAPH_STAGE_COUNT') }}</dt>
19+
<dt class="visually-hidden">{{ translate('COM_WORKFLOW_GRAPH_STAGE_COUNT') }}</dt>
2020
<dd>
21-
{{ stagesCount }} {{ stagesCount === 1 ? translate('WORKFLOW_GRAPH_STAGE') : translate('WORKFLOW_GRAPH_STAGES') }}
21+
{{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
2222
</dd>
2323
</div>
2424
<div class="me-3 mb-1 d-flex align-items-center">
25-
<dt class="visually-hidden">{{ translate('WORKFLOW_GRAPH_TRANSITION_COUNT') }}</dt>
25+
<dt class="visually-hidden">{{ translate('COM_WORKFLOW_GRAPH_TRANSITION_COUNT') }}</dt>
2626
<dd>
27-
{{ transitionsCount }} {{ transitionsCount === 1 ? translate('WORKFLOW_GRAPH_TRANSITION') : translate('WORKFLOW_GRAPH_TRANSITIONS') }}
27+
{{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION') : translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
2828
</dd>
2929
</div>
3030
</dl>
@@ -39,8 +39,8 @@
3939
>
4040
{{
4141
saveStatus.value === 'unsaved'
42-
? translate('WORKFLOW_GRAPH_UNSAVED_CHANGES')
43-
: translate('WORKFLOW_GRAPH_UP_TO_DATE')
42+
? translate('COM_WORKFLOW_GRAPH_UNSAVED_CHANGES')
43+
: translate('COM_WORKFLOW_GRAPH_UP_TO_DATE')
4444
}}
4545
</div>
4646
</section>
@@ -57,7 +57,7 @@ export default {
5757
},
5858
computed: {
5959
workflow() {
60-
return this.$store.getters.workflow || { title: 'WORKFLOW_GRAPH_LOADING', published: false };
60+
return this.$store.getters.workflow || { title: 'COM_WORKFLOW_GRAPH_LOADING', published: false };
6161
},
6262
stagesCount() {
6363
return this.$store.getters.stages?.length || 0;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@
33
<button
44
@click="$emit('add-stage')"
55
class="btn btn-primary d-flex align-items-center gap-1"
6-
:aria-label="translate('WORKFLOW_GRAPH_ADD_STAGE')"
6+
:aria-label="translate('COM_WORKFLOW_GRAPH_ADD_STAGE')"
77
>
88
<span class="icon icon-plus" aria-hidden="true"></span>
9-
{{ translate('WORKFLOW_GRAPH_ADD_STAGE') }}
9+
{{ translate('COM_WORKFLOW_GRAPH_ADD_STAGE') }}
1010
</button>
1111

1212
<button
1313
@click="$emit('add-transition')"
1414
class="btn btn-info d-flex align-items-center gap-1"
15-
:aria-label="translate('WORKFLOW_GRAPH_ADD_TRANSITION')"
15+
:aria-label="translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION')"
1616
>
1717
<span class="icon icon-plus" aria-hidden="true"></span>
18-
{{ translate('WORKFLOW_GRAPH_ADD_TRANSITION') }}
18+
{{ translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION') }}
1919
</button>
2020

2121
<button
2222
@click="$emit('toggle-transition-mode')"
2323
:class="['btn', isTransitionMode ? 'btn-success' : 'btn-primary', 'd-flex', 'align-items-center', 'gap-1']"
2424
:aria-pressed="isTransitionMode"
25-
:aria-label="isTransitionMode ? translate('WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('WORKFLOW_GRAPH_ENTER_TRANSITION_MODE')"
25+
:aria-label="isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE')"
2626
>
2727
<span :class="isTransitionMode ? 'icon icon-toggle-on' : 'icon icon-toggle-off'" aria-hidden="true"></span>
28-
{{ isTransitionMode ? translate('WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('WORKFLOW_GRAPH_ENTER_TRANSITION_MODE') }}
28+
{{ isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE') }}
2929
</button>
3030
</Panel>
3131
</template>

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

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
class="w-100 h-100 position-relative"
55
role="region"
66
tabindex="0"
7-
:aria-label="translate('WORKFLOW_CANVAS_REGION')"
7+
:aria-label="translate('COM_WORKFLOW_GRAPH_CANVAS_REGION')"
88
ref="canvasRegion"
99
>
1010
<VueFlow
@@ -33,7 +33,7 @@
3333
zoomable
3434
:node-color="(node) => node.data?.stage?.color || '#0d6efd'"
3535
:mask-color="'rgba(255, 255, 255, 0.6)'"
36-
:aria-label="translate('WORKFLOW_GRAPH_MINIMAP')"
36+
:aria-label="translate('COM_WORKFLOW_GRAPH_MINIMAP')"
3737
/>
3838
<CustomControls aria-label="Graph controls" />
3939
<ControlsPanel
@@ -45,39 +45,48 @@
4545
/>
4646
</VueFlow>
4747

48+
<div id="delete-dialog-template">
49+
<div class="p-3">
50+
<p>{{ deleteModal.message }}</p>
51+
<div class="d-flex justify-content-end gap-2 mt-3">
52+
<button class="btn btn-secondary" data-dialog-close>
53+
{{ translate('JCANCEL') }}
54+
</button>
55+
<button class="btn btn-danger" data-dialog-confirm>
56+
{{ translate('DELETE') }}
57+
</button>
58+
</div>
59+
</div>
60+
</div>
61+
4862
<button
4963
ref="ModalDialog"
5064
class="d-none"
5165
data-joomla-dialog=""
5266
data-checkin-url=""
5367
data-close-on-message=""
54-
data-reload-on-close=""
5568
aria-hidden="true"
5669
></button>
70+
<button
71+
ref="deleteDialog"
72+
class="d-none"
73+
data-joomla-dialog=""
74+
aria-hidden="true"
75+
/>
5776

5877
<div ref="liveRegion" aria-live="polite" role="status" class="visually-hidden"></div>
5978
</div>
60-
<ConfirmModal
61-
:visible="deleteModal.visible"
62-
:title="deleteModal.title"
63-
:message="deleteModal.message"
64-
:confirmText="translate('DELETE')"
65-
:cancelText="translate('CANCEL')"
66-
@confirm="handleDeleteConfirm"
67-
@cancel="handleDeleteCancel"
68-
/>
6979
</template>
7080

7181
<script>
72-
import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
82+
import { ref, computed, onMounted, onUnmounted } from 'vue';
7383
import { useStore } from 'vuex';
7484
import { VueFlow, useVueFlow } from '@vue-flow/core';
7585
import { Background } from '@vue-flow/background';
7686
import { MiniMap } from '@vue-flow/minimap';
7787
import stageNode from '../nodes/StageNode.vue';
7888
import customEdge from '../edges/CustomEdge.vue';
7989
import CustomControls from './CustomControls.vue';
80-
import ConfirmModal from '../modals/ConfirmModal.vue';
8190
import ControlsPanel from './ControlsPanel.vue';
8291
import { announce, setupDialogFocusHandlers } from '../utils/focus-utils.js';
8392
import { generatePositionedNodes, createSpecialNode } from '../utils/positioning.js';
@@ -92,7 +101,6 @@ export default {
92101
Background,
93102
MiniMap,
94103
CustomControls,
95-
ConfirmModal,
96104
ControlsPanel
97105
},
98106
props: {
@@ -110,14 +118,13 @@ export default {
110118
setup() {
111119
const store = useStore();
112120
const { fitView ,zoomIn, zoomOut, viewport } = useVueFlow();
113-
const instance = getCurrentInstance();
114-
const translate = instance?.proxy?.$translate || ((x) => x);
115121
116122
const isTransitionMode = ref(false);
117123
const selectedStage = ref(null);
118124
const selectedTransition = ref(null);
119125
const liveRegion = ref(null);
120126
const ModalDialog = ref(null);
127+
const deleteDialog = ref(null);
121128
const saveStatus = ref('upToDate');
122129
const previouslyFocusedElement = ref(null);
123130
const deleteModal = ref({ visible: false, type: '', id: null, title: '', message: '' });
@@ -156,6 +163,10 @@ export default {
156163
}
157164
})));
158165
166+
function translate(key){
167+
return Joomla.Text._(key);
168+
}
169+
159170
function selectStage(id) {
160171
selectedStage.value = parseInt(id);
161172
selectedTransition.value = null;
@@ -171,19 +182,19 @@ export default {
171182
function clearSelection() { selectedStage.value = null; selectedTransition.value = null; }
172183
function addStage() {
173184
openModal('stage');
174-
announce(liveRegion.value, translate('WORKFLOW_GRAPH_ADD_STAGE_DIALOG_OPENED'));
185+
announce(liveRegion.value, translate('COM_WORKFLOW_GRAPH_ADD_STAGE_DIALOG_OPENED'));
175186
}
176187
function addTransition() {
177188
openModal('transition');
178-
announce(liveRegion.value, translate('WORKFLOW_GRAPH_ADD_TRANSITION_DIALOG_OPENED'));
189+
announce(liveRegion.value, translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION_DIALOG_OPENED'));
179190
}
180191
function toggleTransitionMode() {
181192
isTransitionMode.value = !isTransitionMode.value;
182193
announce(
183194
liveRegion.value,
184195
isTransitionMode.value
185-
? translate('WORKFLOW_GRAPH_TRANSITION_MODE_ON')
186-
: translate('WORKFLOW_GRAPH_TRANSITION_MODE_OFF')
196+
? translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_ON')
197+
: translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_OFF')
187198
);
188199
}
189200
@@ -192,9 +203,20 @@ export default {
192203
visible: true,
193204
type,
194205
id,
195-
title: translate(type === 'stage' ? 'DELETE_STAGE_TITLE' : 'DELETE_TRANSITION_TITLE'),
196-
message: translate(type === 'stage' ? 'DELETE_STAGE_CONFIRM' : 'DELETE_TRANSITION_CONFIRM')
206+
title: translate(type === 'stage' ? 'COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE' : 'COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE'),
207+
message: translate(type === 'stage' ? 'COM_WORKFLOW_GRAPH_DELETE_STAGE_CONFIRM' : 'COM_WORKFLOW_GRAPH_DELETE_TRANSITION_CONFIRM')
197208
};
209+
210+
const popupOptions = {
211+
src: `#delete-dialog-template`,
212+
width: '800px',
213+
height: 'fit-content',
214+
textHeader: deleteModal.value.title,
215+
preferredParent: 'body'
216+
};
217+
218+
deleteDialog?.value.setAttribute('data-joomla-dialog', JSON.stringify(popupOptions));
219+
deleteDialog?.value.click();
198220
}
199221
function handleDeleteConfirm() {
200222
if (deleteModal.value.type === 'stage') deleteStage(deleteModal.value.id.toString());
@@ -217,10 +239,10 @@ export default {
217239
if (!el) return;
218240
if (saveStatus.value === 'unsaved') {
219241
el.classList.add('text-warning');
220-
el.textContent = translate('WORKFLOW_GRAPH_UNSAVED_CHANGES');
242+
el.textContent = translate('COM_WORKFLOW_GRAPH_UNSAVED_CHANGES');
221243
} else {
222244
el.classList.remove('text-warning');
223-
el.textContent = translate('WORKFLOW_GRAPH_UP_TO_DATE');
245+
el.textContent = translate('COM_WORKFLOW_GRAPH_UP_TO_DATE');
224246
}
225247
}
226248
async function handleNodeDragStop({ node }) {
@@ -304,6 +326,13 @@ export default {
304326
saveNodePosition,
305327
store,
306328
});
329+
document.addEventListener('joomla:confirm', (e) => {
330+
if (e.detail.confirm && deleteModal.value.visible) {
331+
handleDeleteConfirm();
332+
}
333+
deleteModal.value.visible = false;
334+
});
335+
307336
onUnmounted(detach);
308337
});
309338
@@ -313,6 +342,7 @@ export default {
313342
positionedNodes,
314343
styledEdges,
315344
ModalDialog,
345+
deleteDialog,
316346
liveRegion,
317347
deleteModal,
318348
isTransitionMode,

‎administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@
3333
@click.stop="data?.onEdit?.()"
3434
class="btn btn-lg btn-secondary py-0 px-1"
3535
:class="data?.isTransitionMode ? 'd-block' : 'd-none'"
36-
:aria-label="translate('WORKFLOW_GRAPH_EDIT_TRANSITION')"
37-
:title="translate('WORKFLOW_GRAPH_EDIT_TRANSITION')"
36+
:aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
37+
:title="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
3838
>
3939
<i class="icon icon-edit" aria-hidden="true"></i>
4040
</button>
4141
<button
4242
@click.stop="data?.onDelete?.()"
4343
class="btn btn-lg btn-danger py-0 px-1"
4444
:class="data?.isTransitionMode ? 'd-block' : 'd-none'"
45-
:aria-label="translate('WORKFLOW_GRAPH_DELETE_TRANSITION')"
46-
:title="translate('WORKFLOW_GRAPH_DELETE_TRANSITION')"
45+
:aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION')"
46+
:title="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION')"
4747
>
4848
<i class="icon icon-delete" aria-hidden="true"></i>
4949
</button>

‎administrator/components/com_workflow/resources/scripts/components/modals/ConfirmModal.vue‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
<template>
2-
<div
3-
v-if="visible"
4-
class="modal-backdrop"
5-
@keydown.esc="cancel"
6-
@keydown.tab="handleTab"
7-
tabindex="0"
8-
>
1+
<template id="delete-dialog-template">>
2+
<div v-if="visible" class="modal-backdrop" @keydown.esc="cancel" @keydown.tab="handleTab" tabindex="0">
93
<div
104
ref="modal"
115
class="modal-content"
@@ -17,28 +11,21 @@
1711
<h5 :id="titleId">{{ title }}</h5>
1812
<p :id="descId">{{ message }}</p>
1913

20-
<div class="modal-actions">
21-
<button
22-
ref="confirmBtn"
23-
@click="confirm"
24-
class="btn btn-danger"
25-
>
26-
{{ confirmText }}
27-
</button>
28-
<button
29-
ref="cancelBtn"
30-
@click="cancel"
31-
class="btn btn-secondary"
32-
>
14+
<div class="modal-actions d-flex justify-content-end gap-2 mt-3">
15+
<button class="btn btn-secondary" @click="cancel">
3316
{{ cancelText }}
3417
</button>
18+
<button class="btn btn-danger" @click="confirm">
19+
{{ confirmText }}
20+
</button>
3521
</div>
3622
</div>
3723
</div>
3824
</template>
3925

4026
<script>
4127
export default {
28+
name: 'ConfirmModal',
4229
props: {
4330
visible: Boolean,
4431
title: String,
@@ -55,8 +42,8 @@ export default {
5542
emits: ['confirm', 'cancel'],
5643
data() {
5744
return {
58-
titleId: 'modal-title',
59-
descId: 'modal-desc',
45+
titleId: 'confirm-modal-title',
46+
descId: 'confirm-modal-desc',
6047
focusableEls: [],
6148
focusIndex: 0
6249
};
@@ -66,7 +53,6 @@ export default {
6653
if (newVal) {
6754
this.$nextTick(() => {
6855
this.focusableEls = this.getFocusableElements();
69-
this.focusIndex = 0;
7056
this.focusableEls[0]?.focus();
7157
});
7258
}

0 commit comments

Comments
 (0)