-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dialog for new diagram, isExecutable to true
Co-Authored-By: LaviniaStiliadou <livia_16@live.de>
- Loading branch information
1 parent
0b3b030
commit f24afa8
Showing
3 changed files
with
113 additions
and
28 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
components/bpmn-q/modeler-component/editor/ui/ConfirmationModal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /** | ||
| * Copyright (c) 2023 Institute of Architecture of Application Systems - | ||
| * University of Stuttgart | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms the Apache Software License 2.0 | ||
| * which is available at https://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
| import React from 'react'; | ||
| import Modal from '../ui/modal/Modal'; | ||
|
|
||
| // polyfill upcoming structural components | ||
| const Title = Modal.Title || (({children}) => <h2>{children}</h2>); | ||
| const Body = Modal.Body || (({children}) => <div>{children}</div>); | ||
| const Footer = Modal.Footer || (({children}) => <div>{children}</div>); | ||
|
|
||
| /** | ||
| * Modal component for confirming the discard of changes in the editor. | ||
| * | ||
| * @param onClose Function called when the modal is closed. | ||
| * @param onConfirm Function called when the "Yes" button is clicked to confirm discarding changes. | ||
| * @returns {JSX.Element} The modal as a React component. | ||
| * @constructor | ||
| */ | ||
| export default function ConfirmationModal({onClose, onConfirm}) { | ||
|
|
||
| return <Modal onClose={onClose}> | ||
| <Title> | ||
| Confirm Discard Changes | ||
| </Title> | ||
| <Body> | ||
| There are unsaved changes. Are you sure you want to discard all changes and generate a new diagram? | ||
| </Body> | ||
| <Footer> | ||
| <div id="configFormButtons"> | ||
| <button type="submit" className="qwm-btn qwm-btn-primary" onClick={() => onConfirm()}>Yes</button> | ||
| <button type="button" className="qwm-btn qwm-btn-secondary" onClick={() => onClose()}>No</button> | ||
| </div> | ||
| </Footer> | ||
| </Modal>; | ||
| } |
80 changes: 59 additions & 21 deletions
80
components/bpmn-q/modeler-component/editor/ui/NewDiagramButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,63 @@ | ||
| import React from "react"; | ||
| import { createNewDiagram } from "../util/IoUtilities"; | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { createNewDiagram } from '../util/IoUtilities'; | ||
| import { getModeler } from '../ModelerHandler'; | ||
| import ConfirmationModal from './ConfirmationModal'; | ||
|
|
||
| /** | ||
| * React button which creates a new workflow. | ||
| * | ||
| * @param props | ||
| * @returns {JSX.Element} | ||
| * @constructor | ||
| */ | ||
| export default function NewDiagramButton(props) { | ||
| const { modeler } = props; | ||
| const { modeler } = props; | ||
| const [unsavedChanges, setUnsavedChanges] = useState(false); | ||
| const [showConfirmationModal, setShowConfirmationModal] = useState(false); | ||
|
|
||
| return ( | ||
| <button | ||
| className="qwm-toolbar-btn" | ||
| title="Create new workflow diagram" | ||
| onClick={() => createNewDiagram(modeler)} | ||
| > | ||
| <span className="qwm-icon-new-file"> | ||
| <span className="qwm-indent">New Diagram</span> | ||
| </span> | ||
| </button> | ||
| ); | ||
| useEffect(() => { | ||
| if (unsavedChanges) { | ||
| setShowConfirmationModal(true); | ||
| } else { | ||
| createNewDiagram(modeler); | ||
| } | ||
| }, [unsavedChanges, modeler]); | ||
|
|
||
| const checkUnsavedChanges = () => { | ||
| getModeler().saveXML({ format: true }, function (err, xml) { | ||
| if (!err) { | ||
| let oldXml = getModeler().oldXml; | ||
| if (oldXml !== undefined) { | ||
| oldXml = oldXml.trim(); | ||
| } | ||
| if (oldXml !== xml.trim() && oldXml !== undefined) { | ||
| setUnsavedChanges(true); | ||
| setShowConfirmationModal(true); | ||
| } else { | ||
| setShowConfirmationModal(false); | ||
| createNewDiagram(modeler); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const handleConfirmDiscard = () => { | ||
| createNewDiagram(modeler); | ||
| setUnsavedChanges(false); | ||
| setShowConfirmationModal(false); | ||
| }; | ||
|
|
||
| const handleCancelDiscard = () => { | ||
| setShowConfirmationModal(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <button className="qwm-toolbar-btn" title="Create a new workflow diagram" onClick={checkUnsavedChanges}> | ||
| <span className="qwm-icon-new-file"> | ||
| <span className="qwm-indent">New Diagram</span> | ||
| </span> | ||
| </button> | ||
|
|
||
| {showConfirmationModal && ( | ||
| <ConfirmationModal | ||
| onClose={handleCancelDiscard} | ||
| onConfirm={handleConfirmDiscard} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters