Merge pull request #9 from micromata/feature/confirm-modal

Kai Reinhard

05.37.2019 6e3037f62a5049c4473d26345ed28f1b9b9f8370

Merge pull request #9 from micromata/feature/confirm-modal

Feature/confirm modal

 borgbutler-webapp/src/components/general/modal/ConfirmModal.jsx

New file
@@ -0,0 +1,50 @@
import React from 'react';
import * as PropTypes from 'prop-types';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';

class ConfirmModal extends React.Component {

    constructor(props) {
        super(props);

        this.confirm = this.confirm.bind(this);
    }

    confirm() {
        this.props.toggle();
        this.props.onConfirm();
    }

    render() {
        return (
            <Modal isOpen={this.props.open} toggle={this.props.toggle}>
                <ModalHeader toggle={this.props.toggle}>Modal title</ModalHeader>
                <ModalBody>
                    {this.props.children}
                </ModalBody>
                <ModalFooter>
                    <Button color={'primary'} onClick={this.confirm}>{this.props.confirmButton}</Button>
                    <Button color={'secondary'} onClick={this.props.toggle}>{this.props.cancelButton}</Button>
                </ModalFooter>
            </Modal>
        );
    }
}

ConfirmModal.propTypes = {
    onConfirm: PropTypes.func.isRequired,
    title: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired,
    toggle: PropTypes.func.isRequired,
    open: PropTypes.bool,
    confirmButton: PropTypes.string,
    cancelButton: PropTypes.string
};

ConfirmModal.defaultProps = {
    open: false,
    confirmButton: 'Ok',
    cancelButton: 'Cancel'
};

export default ConfirmModal;

 borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx

@@ -1,9 +1,10 @@
import React from 'react';
import {FormButton, FormCheckbox, FormLabelField, FormLabelInputField} from "../../general/forms/FormComponents";
import {getRestServiceUrl, isDevelopmentMode} from "../../../utilities/global";
import I18n from "../../general/translation/I18n";
import {FormButton, FormCheckbox, FormLabelField, FormLabelInputField} from '../../general/forms/FormComponents';
import {getRestServiceUrl, isDevelopmentMode} from '../../../utilities/global';
import I18n from '../../general/translation/I18n';
import ErrorAlertGenericRestFailure from '../../general/ErrorAlertGenericRestFailure';
import Loading from "../../general/Loading";
import Loading from '../../general/Loading';
import ConfirmModal from '../../general/modal/ConfirmModal';

class ConfigServerTab extends React.Component {
    loadConfig = () => {
@@ -45,13 +46,14 @@
            port: 9042,
            webdevelopmentMode: false,
            maxArchiveContentCacheCapacityMb: 100,
            redirect: false
            redirect: false,
            confirmModal: false
        };

        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
        this.onClearAllCaches = this.onClearAllCaches.bind(this);
        this.loadConfig = this.loadConfig.bind(this);
        this.toggleModal = this.toggleModal.bind(this);
    }

    componentDidMount() {
@@ -82,16 +84,20 @@
        })
    }

    onClearAllCaches() {
        if (window.confirm('Do you really want to clear all caches? All Archive file lists and caches for repo and archive informatino will be cleared.')) {
            fetch(getRestServiceUrl("configuration/clearAllCaches"), {
                method: "GET",
                dataType: "JSON",
                headers: {
                    "Content-Type": "text/plain; charset=utf-8"
                }
            })
        }
    static clearAllCaches() {
        fetch(getRestServiceUrl('configuration/clearAllCaches'), {
            method: 'GET',
            dataType: 'JSON',
            headers: {
                'Content-Type': 'text/plain; charset=utf-8'
            }
        })
    }

    toggleModal() {
        this.setState({
            confirmModal: !this.state.confirmModal
        })
    }

    render() {
@@ -112,30 +118,43 @@
        }

        return (
            <form>
                <FormLabelField>
                    <FormButton id={'clearAllCaches'} onClick={this.onClearAllCaches}> Clear all caches
                    </FormButton>
                </FormLabelField>
                <FormLabelInputField label={'Port'} fieldLength={2} type="number" min={0} max={65535}
                                     step={1}
                                     name={'port'} value={this.state.port}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter port"/>
                <FormLabelInputField label={'Maximum disc capacity (MB)'} fieldLength={2} type="number" min={50} max={10000}
                                     step={50}
                                     name={'maxArchiveContentCacheCapacityMb'} value={this.state.maxArchiveContentCacheCapacityMb}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter maximum Capacity"
                hint={`Limits the cache size of archive file lists in the local cache directory: ${this.state.cacheDir}`}/>
                <FormLabelField label={<I18n name={'configuration.webDevelopmentMode'}/>} fieldLength={2}>
                    <FormCheckbox checked={this.state.webDevelopmentMode}
                                  hintKey={'configuration.webDevelopmentMode.hint'}
                                  name="webDevelopmentMode"
                                  onChange={this.handleCheckboxChange}/>
                </FormLabelField>
                {todo}
            </form>
            <div>
                <ConfirmModal
                    onConfirm={ConfigServerTab.clearAllCaches}
                    title={'Are you sure?'}
                    toggle={this.toggleModal}
                    open={this.state.confirmModal}
                >
                    Do you really want to clear all caches? All Archive file lists and caches for repo and archive
                    information will be cleared.
                </ConfirmModal>
                <form>
                    <FormLabelField>
                        <FormButton id={'clearAllCaches'} onClick={this.toggleModal}> Clear all caches
                        </FormButton>
                    </FormLabelField>
                    <FormLabelInputField label={'Port'} fieldLength={2} type="number" min={0} max={65535}
                                         step={1}
                                         name={'port'} value={this.state.port}
                                         onChange={this.handleTextChange}
                                         placeholder="Enter port" />
                    <FormLabelInputField label={'Maximum disc capacity (MB)'} fieldLength={2} type="number" min={50}
                                         max={10000}
                                         step={50}
                                         name={'maxArchiveContentCacheCapacityMb'}
                                         value={this.state.maxArchiveContentCacheCapacityMb}
                                         onChange={this.handleTextChange}
                                         placeholder="Enter maximum Capacity"
                                         hint={`Limits the cache size of archive file lists in the local cache directory: ${this.state.cacheDir}`} />
                    <FormLabelField label={<I18n name={'configuration.webDevelopmentMode'} />} fieldLength={2}>
                        <FormCheckbox checked={this.state.webDevelopmentMode}
                                      hintKey={'configuration.webDevelopmentMode.hint'}
                                      name="webDevelopmentMode"
                                      onChange={this.handleCheckboxChange} />
                    </FormLabelField>
                    {todo}
                </form>
            </div>
        );
    }
}

 borgbutler-webapp/src/css/my-style.css

@@ -45,6 +45,10 @@
    margin-bottom: 10px;
}

h5.modal-title {
    margin-top: 0;
}

/* Navbar */

.navbar.bg-light {
@@ -428,4 +432,4 @@
.tooltip:hover:after {
    transition: all .2s .1s ease-in-out;
}
*/
*/