You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@age.apache.org by hb...@apache.org on 2023/01/04 02:00:14 UTC
[age-viewer] branch main updated: modal update (#98)
This is an automated email from the ASF dual-hosted git repository.
hbshin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/age-viewer.git
The following commit(s) were added to refs/heads/main by this push:
new 5290553 modal update (#98)
5290553 is described below
commit 52905535d1ad52ae2a4ab29cb38c71732e10d8c0
Author: MJinH <97...@users.noreply.github.com>
AuthorDate: Tue Jan 3 18:00:10 2023 -0800
modal update (#98)
Co-authored-by: moon19960501@gmail.com <we...@gmail.com>
---
frontend/src/components/modal/containers/Modal.js | 10 +++--
.../presentations/{Modal.jsx => ModalDialog.jsx} | 46 ++++++++++++++--------
frontend/src/static/style.css | 29 ++------------
3 files changed, 40 insertions(+), 45 deletions(-)
diff --git a/frontend/src/components/modal/containers/Modal.js b/frontend/src/components/modal/containers/Modal.js
index f34aed1..97dcc31 100644
--- a/frontend/src/components/modal/containers/Modal.js
+++ b/frontend/src/components/modal/containers/Modal.js
@@ -19,12 +19,16 @@
import { connect } from 'react-redux';
import { closeModal, removeGraphHistory, removeElementHistory } from '../../../features/modal/ModalSlice';
-import Modal from '../presentations/Modal';
+import ModalDialog from '../presentations/ModalDialog';
+import { getMetaData } from '../../../features/database/MetadataSlice';
const mapStateToProps = (state) => ({
graphHistory: state.modal.graphHistory,
elementHistory: state.modal.elementHistory,
+ currentGraph: state.metadata.currentGraph,
});
-const mapDispatchToProps = { closeModal, removeGraphHistory, removeElementHistory };
+const mapDispatchToProps = {
+ closeModal, removeGraphHistory, removeElementHistory, getMetaData,
+};
-export default connect(mapStateToProps, mapDispatchToProps)(Modal);
+export default connect(mapStateToProps, mapDispatchToProps)(ModalDialog);
diff --git a/frontend/src/components/modal/presentations/Modal.jsx b/frontend/src/components/modal/presentations/ModalDialog.jsx
similarity index 66%
rename from frontend/src/components/modal/presentations/Modal.jsx
rename to frontend/src/components/modal/presentations/ModalDialog.jsx
index 71854cc..b07ff54 100644
--- a/frontend/src/components/modal/presentations/Modal.jsx
+++ b/frontend/src/components/modal/presentations/ModalDialog.jsx
@@ -20,13 +20,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
+import { Button, Modal } from 'react-bootstrap';
-const Modal = ({
+const ModalDialog = ({
closeModal,
graphHistory,
elementHistory,
removeGraphHistory,
removeElementHistory,
+ getMetaData,
+ currentGraph,
}) => {
const dispatch = useDispatch();
@@ -45,31 +48,40 @@ const Modal = ({
dispatch(removeGraphHistory());
dispatch(removeElementHistory());
dispatch(closeModal());
- alert('The node has been deleted from your database. Please refresh the page or frame.');
+ alert('The node has been deleted from your database. Please re-run the query.');
+ getMetaData({ currentGraph });
}
});
};
return (
<div className="modal-container">
- <div className="modal-wrapper">
- <h4>
- After clicking on confirm, the node and related edge will be deleted from the database.
- </h4>
- <div className="btn-container">
- <button type="button" className="btn confirm-btn" onClick={() => { dispatch(closeModal()); }}>
- cancel
- </button>
- <button type="button" className="btn clear-btn" onClick={() => { removeNode(); }}>
- confirm
- </button>
- </div>
+ <div
+ style={{ display: 'block', position: 'initial' }}
+ >
+ <Modal.Dialog>
+ <Modal.Header closeButton onClick={() => { dispatch(closeModal()); }}>
+ <Modal.Title>Delete Confirmation</Modal.Title>
+ </Modal.Header>
+
+ <Modal.Body>
+ <p>
+ After clicking on confirm,
+ the node and related edge will be deleted from the database.
+ </p>
+ </Modal.Body>
+
+ <Modal.Footer>
+ <Button variant="secondary" onClick={() => { dispatch(closeModal()); }}>Cancel</Button>
+ <Button variant="primary" onClick={() => { removeNode(); }}>Confirm</Button>
+ </Modal.Footer>
+ </Modal.Dialog>
</div>
</div>
);
};
-Modal.propTypes = {
+ModalDialog.propTypes = {
closeModal: PropTypes.func.isRequired,
// eslint-disable-next-line react/forbid-prop-types
graphHistory: PropTypes.any.isRequired,
@@ -77,6 +89,8 @@ Modal.propTypes = {
elementHistory: PropTypes.any.isRequired,
removeGraphHistory: PropTypes.func.isRequired,
removeElementHistory: PropTypes.func.isRequired,
+ getMetaData: PropTypes.func.isRequired,
+ currentGraph: PropTypes.string.isRequired,
};
-export default Modal;
+export default ModalDialog;
diff --git a/frontend/src/static/style.css b/frontend/src/static/style.css
index 19e4186..d00f15d 100644
--- a/frontend/src/static/style.css
+++ b/frontend/src/static/style.css
@@ -807,31 +807,8 @@ textarea.editorTextarea
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
- display: flex;
+ font-size: 16px;
+ display:flex;
align-items: center;
justify-content: center;
- }
-
- .modal-wrapper {
- background: #F8F8F8;
- width: 80vw;
- max-width: 400px;
- border-radius: 10px;
- padding: 2rem 1rem;
- text-align: center;
- }
- .modal-wrapper h4 {
- margin-bottom: 0;
- line-height: 1.5;
- font-size: 1.2rem;
- }
- .modal-wrapper .clear-btn,
- .modal-wrapper .confirm-btn {
- margin-top: 1rem;
- cursor: pointer;
- }
- .btn-container {
- display: flex;
- justify-content: space-around;
- }
-
\ No newline at end of file
+}
\ No newline at end of file