Skip to content

Commit 5153db2

Browse files
DileepadariDileepadari
committed
the modal logic enhnaced using joomla.dialog
1 parent 439e5d9 commit 5153db2

File tree

10 files changed

+64
-198
lines changed

10 files changed

+64
-198
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { useVueFlow } from '@vue-flow/core'
3434
export default {
3535
name: 'CustomControls',
3636
setup() {
37-
const { zoomIn, zoomOut, fitView, viewport } = useVueFlow();
37+
const { zoomIn, zoomOut, fitView } = useVueFlow();
3838
const controlsContainer = ref(null);
3939
4040
return {

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

Lines changed: 27 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -44,43 +44,14 @@
4444
@toggle-transition-mode="toggleTransitionMode"
4545
/>
4646
</VueFlow>
47-
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-
62-
<button
63-
ref="ModalDialog"
64-
class="d-none"
65-
data-joomla-dialog=""
66-
data-checkin-url=""
67-
data-close-on-message=""
68-
aria-hidden="true"
69-
></button>
70-
<button
71-
ref="deleteDialog"
72-
class="d-none"
73-
data-joomla-dialog=""
74-
aria-hidden="true"
75-
/>
76-
7747
<div ref="liveRegion" aria-live="polite" role="status" class="visually-hidden"></div>
7848
</div>
7949
</template>
8050

8151
<script>
82-
import { ref, computed, onMounted, onUnmounted } from 'vue';
52+
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
8353
import { useStore } from 'vuex';
54+
import JoomlaDialog from 'joomla.dialog';
8455
import { VueFlow, useVueFlow } from '@vue-flow/core';
8556
import { Background } from '@vue-flow/background';
8657
import { MiniMap } from '@vue-flow/minimap';
@@ -123,8 +94,6 @@ export default {
12394
const selectedStage = ref(null);
12495
const selectedTransition = ref(null);
12596
const liveRegion = ref(null);
126-
const ModalDialog = ref(null);
127-
const deleteDialog = ref(null);
12897
const saveStatus = ref('upToDate');
12998
const previouslyFocusedElement = ref(null);
13099
const deleteModal = ref({ visible: false, type: '', id: null, title: '', message: '' });
@@ -199,31 +168,19 @@ export default {
199168
}
200169
201170
function showDeleteModal(type, id) {
202-
deleteModal.value = {
203-
visible: true,
204-
type,
205-
id,
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')
208-
};
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();
171+
const title = translate(type === 'stage' ? 'COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE' : 'COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE');
172+
const message = translate(type === 'stage' ? 'COM_WORKFLOW_GRAPH_DELETE_STAGE_CONFIRM' : 'COM_WORKFLOW_GRAPH_DELETE_TRANSITION_CONFIRM')
173+
JoomlaDialog.confirm(message,title)
174+
.then((result) => {
175+
if(result){
176+
handleDeleteConfirm(type, id);
177+
}
178+
});
220179
}
221-
function handleDeleteConfirm() {
222-
if (deleteModal.value.type === 'stage') deleteStage(deleteModal.value.id.toString());
223-
else deleteTransition(deleteModal.value.id.toString());
224-
deleteModal.value.visible = false;
180+
function handleDeleteConfirm(type, id) {
181+
if (type === 'stage') deleteStage(id.toString());
182+
else deleteTransition(id.toString());
225183
}
226-
function handleDeleteCancel() { deleteModal.value.visible = false; }
227184
function deleteStage(id) {
228185
store.dispatch('deleteStage', { id, workflowId: workflowId.value });
229186
selectedStage.value = null;
@@ -278,20 +235,16 @@ export default {
278235
const baseUrl = `index.php?option=com_workflow&view=${type}&workflow_id=${workflowId.value}&extension=${extension}&layout=modal&tmpl=component`;
279236
const src = id ? `${baseUrl}&id=${id}` : baseUrl;
280237
const textHeader = id
281-
? translate(`COM_WORKFLOW_EDIT_${type.toUpperCase()}`)
282-
: translate(`COM_WORKFLOW_ADD_${type.toUpperCase()}`);
283-
const popupOptions = {
238+
? translate(`COM_WORKFLOW_GRAPH_EDIT_${type.toUpperCase()}`)
239+
: translate(`COM_WORKFLOW_GRAPH_ADD_${type.toUpperCase()}`);
240+
241+
const dialog = new JoomlaDialog({
284242
popupType: 'iframe',
285243
textHeader: textHeader,
286244
src: src
287-
};
288-
let dialogRef = ModalDialog?.value;
289-
dialogRef.setAttribute('data-joomla-dialog', JSON.stringify(popupOptions));
290-
dialogRef.setAttribute('data-checkin-url', '');
291-
dialogRef.setAttribute('data-close-on-message', '');
292-
dialogRef.setAttribute('data-reload-on-close', '');
293-
setupDialogFocusHandlers(previouslyFocusedElement);
294-
dialogRef.click();
245+
});
246+
dialog.show();
247+
setupDialogFocusHandlers(previouslyFocusedElement, store);
295248
}
296249
297250
// Bind keyboard shortcuts
@@ -326,30 +279,27 @@ export default {
326279
saveNodePosition,
327280
store,
328281
});
329-
document.addEventListener('joomla:confirm', (e) => {
330-
if (e.detail.confirm && deleteModal.value.visible) {
331-
handleDeleteConfirm();
332-
}
333-
deleteModal.value.visible = false;
334-
});
335-
336282
onUnmounted(detach);
337283
});
338284
285+
watch([positionedNodes, styledEdges], () => {
286+
setTimeout(() => {
287+
fitView({ padding: 0.2, duration: 300 });
288+
}, 0);
289+
});
290+
291+
339292
return {
340293
loading,
341294
error,
342295
positionedNodes,
343296
styledEdges,
344-
ModalDialog,
345-
deleteDialog,
346297
liveRegion,
347298
deleteModal,
348299
isTransitionMode,
349300
handleConnect,
350301
selectEdge,
351302
handleDeleteConfirm,
352-
handleDeleteCancel,
353303
addStage,
354304
addTransition,
355305
toggleTransitionMode,

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

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎administrator/components/com_workflow/resources/scripts/components/utils/focus-utils.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function cycleFocus(selector, reverse = false) {
5151
*
5252
*
5353
*/
54-
export function setupDialogFocusHandlers(previouslyFocusedElement) {
54+
export function setupDialogFocusHandlers(previouslyFocusedElement, store) {
5555
setTimeout(() => {
5656
const dialog = document.querySelector('joomla-dialog dialog[open]');
5757
if (dialog) {
@@ -62,7 +62,10 @@ export function setupDialogFocusHandlers(previouslyFocusedElement) {
6262
handleDialogIframeLoad(iframe);
6363
});
6464
}
65-
dialog.addEventListener('close', handleDialogClose);
65+
66+
dialog.addEventListener('close', () =>
67+
handleDialogClose(previouslyFocusedElement, store)
68+
);
6669
dialog.addEventListener('keydown', handleDialogKeydown);
6770
}
6871
}, 100);
@@ -78,19 +81,29 @@ function handleDialogIframeLoad(iframe) {
7881
} else {
7982
iframeDoc.body.focus();
8083
}
84+
85+
iframeDoc.addEventListener('keydown', (e) => {
86+
if (e.key === 'Escape') {
87+
e.preventDefault();
88+
const parentDialog = document.querySelector('joomla-dialog dialog[open]');
89+
if (parentDialog && parentDialog.close) {
90+
parentDialog.close();
91+
}
92+
}
93+
});
94+
8195
}
8296
} catch (error) {
8397
iframe.focus();
8498
}
8599
}
86100

87-
function handleDialogClose(previouslyFocusedElement) {
101+
function handleDialogClose(previouslyFocusedElement, store) {
88102
if (previouslyFocusedElement.value) {
89-
nextTick(() => {
90103
previouslyFocusedElement.value.focus();
91104
previouslyFocusedElement.value = null;
92-
});
93105
}
106+
store.dispatch('loadWorkflow', store.getters.workflowId);
94107
}
95108
function handleDialogKeydown(e) {
96109
if (e.key === 'Escape') {

‎administrator/components/com_workflow/resources/scripts/store/actions.es6‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default {
2929
commit('SET_TRANSITIONS', transitions);
3030

3131
dispatch('saveToHistory');
32-
return { workflow, stages, transitions };
3332
} catch (error) {
3433
const errorMessage = error.message || 'Failed to load workflow';
3534
commit('SET_ERROR', errorMessage);

‎administrator/components/com_workflow/src/Controller/StageController.php‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -194,14 +194,11 @@ public function save($key = null, $urlVar = null)
194194
$task = $this->getTask();
195195

196196
if ($isModal && $result && $task === 'save') {
197-
$id = $this->input->getInt('id', 0);
198-
$this->setRedirect(
199-
Route::_(
200-
'index.php?option=com_workflow&view=stage&layout=modalreturn&tmpl=component&workflow_id=' . $id. '&extension=' . $this->extension,
201-
false
202-
)
203-
);
204-
return true;
197+
$id = $this->input->get('id');
198+
$return = 'index.php?option=' . $this->option . '&view=' . $this->view_item . $this->getRedirectToItemAppend($id)
199+
. '&layout=modalreturn&from-task=save';
200+
201+
$this->setRedirect(Route::_($return, false));
205202
}
206203
return $result;
207204
}
@@ -222,14 +219,11 @@ public function cancel($key = null)
222219
$isModal = $input->get('layout') === 'modal' || $input->get('tmpl') === 'component';
223220

224221
if ($isModal) {
225-
$id = $this->input->getInt('id', 0);
226-
$this->setRedirect(
227-
\Joomla\CMS\Router\Route::_(
228-
'index.php?option=com_workflow&view=stage&layout=modalreturn&tmpl=component&workflow_id=' . $id . '&extension=' . $this->extension,
229-
false
230-
)
231-
);
232-
return true;
222+
$id = $this->input->get('id');
223+
$return = 'index.php?option=' . $this->option . '&view=' . $this->view_item . $this->getRedirectToItemAppend($id)
224+
. '&layout=modalreturn&from-task=cancel';
225+
226+
$this->setRedirect(Route::_($return, false));
233227
}
234228
return $result;
235229
}

‎administrator/components/com_workflow/tmpl/graph/default.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
$wa = $this->getDocument()->getWebAssetManager();
2222
$wa->useScript('keepalive');
2323
$wa->useScript('form.validate');
24-
$wa->useScript('bootstrap.dropdown');
24+
$wa->useScript('joomla.dialog');
2525
$wa->useScript('joomla.dialog-autocreate');
2626
$wa->useStyle('com_workflow.workflowgraph');
2727

‎administrator/components/com_workflow/tmpl/stage/modalreturn.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
// phpcs:enable PSR1.Files.SideEffects
66

77
?>
8-
<script type="text/javascript">
9-
if (window.parent && window.parent.Joomla && window.parent.Joomla.Modal) {
10-
window.parent.Joomla.Modal.getCurrent().close();
8+
<script>
9+
if(window.top && window.top.document.querySelector('dialog[open]')) {
10+
window.top.document.querySelector('dialog[open]').close();
1111
}
1212
</script>

‎administrator/components/com_workflow/tmpl/transition/modalreturn.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
// phpcs:enable PSR1.Files.SideEffects
66

77
?>
8-
<script type="text/javascript">
9-
if (window.parent && window.parent.Joomla && window.parent.Joomla.Modal) {
10-
window.parent.Joomla.Modal.getCurrent().close();
8+
<script>
9+
if(window.top && window.top.document.querySelector('dialog[open]')) {
10+
window.top.document.querySelector('dialog[open]').close();
1111
}
1212
</script>

0 commit comments

Comments
 (0)