From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../components/util/modals/ConfirmationModal.js    | 27 +++++++++
 .../src/components/util/modals/Modal.js            | 38 ++++++++++++
 .../src/components/util/modals/TextInputModal.js   | 70 ++++++++++++++++++++++
 3 files changed, 135 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js

(limited to 'opendc-web/opendc-web-ui/src/components/util')

diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
new file mode 100644
index 00000000..f6e1c98b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Modal from './Modal'
+
+function ConfirmationModal({ title, message, isOpen, callback }) {
+    return (
+        <Modal
+            title={title}
+            isOpen={isOpen}
+            onSubmit={() => callback(true)}
+            onCancel={() => callback(false)}
+            submitButtonType="danger"
+            submitButtonText="Confirm"
+        >
+            {message}
+        </Modal>
+    )
+}
+
+ConfirmationModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+}
+
+export default ConfirmationModal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
new file mode 100644
index 00000000..d4577062
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
+
+function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const actions = [
+        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
+            {submitButtonText}
+        </Button>,
+        <Button variant="link" onClick={onCancel} key="cancel">
+            Cancel
+        </Button>,
+    ]
+
+    return (
+        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
+            {children}
+        </PModal>
+    )
+}
+
+Modal.propTypes = {
+    title: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    submitButtonType: PropTypes.string,
+    submitButtonText: PropTypes.string,
+    children: PropTypes.node,
+}
+
+Modal.defaultProps = {
+    submitButtonType: 'primary',
+    submitButtonText: 'Save',
+    isOpen: false,
+}
+
+export default Modal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
new file mode 100644
index 00000000..392a729e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from './Modal'
+import { Form, FormGroup, TextInput } from '@patternfly/react-core'
+
+function TextInputModal({ title, label, isOpen, callback, initialValue }) {
+    const textInput = useRef(null)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [isValid, setValid] = useState(true)
+
+    const resetState = () => {
+        textInput.current.value = ''
+        setSubmitted(false)
+        setValid(false)
+    }
+    const onSubmit = (event) => {
+        const value = textInput.current.value
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!value) {
+            setValid(false)
+            return false
+        }
+
+        callback(value)
+        resetState()
+        return true
+    }
+    const onCancel = () => {
+        callback(undefined)
+        resetState()
+    }
+
+    return (
+        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label={label}
+                    fieldId="text-input"
+                    isRequired
+                    validated={isSubmitted && !isValid ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput
+                        id="text-input"
+                        name="text-input"
+                        isRequired
+                        type="text"
+                        ref={textInput}
+                        defaultValue={initialValue}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+TextInputModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+    initialValue: PropTypes.string,
+}
+
+export default TextInputModal
-- 
cgit v1.2.3