ta264
4 years ago
parent
e014826b17
commit
c3a89c46f5
@ -0,0 +1,61 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import { sizes } from 'Helpers/Props';
|
||||
import ExportCustomFormatModalContentConnector from './ExportCustomFormatModalContentConnector';
|
||||
|
||||
class ExportCustomFormatModal extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
height: 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onContentHeightChange = (height) => {
|
||||
if (this.state.height === 'auto' || height > this.state.height) {
|
||||
this.setState({ height });
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
style={{ height: `${this.state.height}px` }}
|
||||
isOpen={isOpen}
|
||||
size={sizes.LARGE}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<ExportCustomFormatModalContentConnector
|
||||
{...otherProps}
|
||||
onContentHeightChange={this.onContentHeightChange}
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ExportCustomFormatModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default ExportCustomFormatModal;
|
||||
@ -0,0 +1,5 @@
|
||||
.button {
|
||||
composes: button from '~Components/Link/Button.css';
|
||||
|
||||
position: relative;
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'Components/Link/Button';
|
||||
import ClipboardButton from 'Components/Link/ClipboardButton';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import ModalBody from 'Components/Modal/ModalBody';
|
||||
import ModalContent from 'Components/Modal/ModalContent';
|
||||
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||
import { kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './ExportCustomFormatModalContent.css';
|
||||
|
||||
class ExportCustomFormatModalContent extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
error,
|
||||
json,
|
||||
specificationsPopulated,
|
||||
onModalClose
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
|
||||
<ModalHeader>
|
||||
{translate('ExportCustomFormat')}
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
<div>
|
||||
{
|
||||
isFetching &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<div>
|
||||
{translate('UnableToLoadCustomFormats')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !error && specificationsPopulated &&
|
||||
<div>
|
||||
<pre>
|
||||
{json}
|
||||
</pre>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<ClipboardButton
|
||||
className={styles.button}
|
||||
value={json}
|
||||
kind={kinds.DEFAULT}
|
||||
/>
|
||||
<Button
|
||||
onPress={onModalClose}
|
||||
>
|
||||
{translate('Close')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ExportCustomFormatModalContent.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
json: PropTypes.string.isRequired,
|
||||
specificationsPopulated: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default ExportCustomFormatModalContent;
|
||||
@ -0,0 +1,83 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { fetchCustomFormatSpecifications } from 'Store/Actions/settingsActions';
|
||||
import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
|
||||
import ExportCustomFormatModalContent from './ExportCustomFormatModalContent';
|
||||
|
||||
const blacklistedProperties = ['id', 'implementationName', 'infoLink'];
|
||||
|
||||
function replacer(key, value) {
|
||||
if (blacklistedProperties.includes(key)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// provider fields
|
||||
if (key === 'fields') {
|
||||
return value.reduce((acc, cur) => {
|
||||
acc[cur.name] = cur.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
// regular setting values
|
||||
if (value.hasOwnProperty('value')) {
|
||||
return value.value;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.settings.advancedSettings,
|
||||
createProviderSettingsSelector('customFormats'),
|
||||
(state) => state.settings.customFormatSpecifications,
|
||||
(advancedSettings, customFormat, specifications) => {
|
||||
const json = customFormat.item ? JSON.stringify(customFormat.item, replacer, 2) : '';
|
||||
return {
|
||||
advancedSettings,
|
||||
...customFormat,
|
||||
json,
|
||||
specificationsPopulated: specifications.isPopulated,
|
||||
specifications: specifications.items
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
fetchCustomFormatSpecifications
|
||||
};
|
||||
|
||||
class ExportCustomFormatModalContentConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
const {
|
||||
id
|
||||
} = this.props;
|
||||
this.props.fetchCustomFormatSpecifications({ id });
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ExportCustomFormatModalContent
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ExportCustomFormatModalContentConnector.propTypes = {
|
||||
id: PropTypes.number,
|
||||
fetchCustomFormatSpecifications: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(ExportCustomFormatModalContentConnector);
|
||||
@ -0,0 +1,61 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import { sizes } from 'Helpers/Props';
|
||||
import ImportCustomFormatModalContentConnector from './ImportCustomFormatModalContentConnector';
|
||||
|
||||
class ImportCustomFormatModal extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
height: 'auto'
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onContentHeightChange = (height) => {
|
||||
if (this.state.height === 'auto' || height > this.state.height) {
|
||||
this.setState({ height });
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
style={{ height: `${this.state.height}px` }}
|
||||
isOpen={isOpen}
|
||||
size={sizes.LARGE}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<ImportCustomFormatModalContentConnector
|
||||
{...otherProps}
|
||||
onContentHeightChange={this.onContentHeightChange}
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ImportCustomFormatModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default ImportCustomFormatModal;
|
||||
@ -0,0 +1,5 @@
|
||||
.input {
|
||||
composes: input from '~Components/Form/TextArea.css';
|
||||
|
||||
font-family: $monoSpaceFontFamily;
|
||||
}
|
||||
@ -0,0 +1,152 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Form from 'Components/Form/Form';
|
||||
import FormGroup from 'Components/Form/FormGroup';
|
||||
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||
import FormLabel from 'Components/Form/FormLabel';
|
||||
import Button from 'Components/Link/Button';
|
||||
import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import ModalBody from 'Components/Modal/ModalBody';
|
||||
import ModalContent from 'Components/Modal/ModalContent';
|
||||
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||
import { inputTypes, sizes } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './ImportCustomFormatModalContent.css';
|
||||
|
||||
class ImportCustomFormatModalContent extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this._importTimeout = null;
|
||||
|
||||
this.state = {
|
||||
json: '',
|
||||
isSpinning: false,
|
||||
parseError: null
|
||||
};
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this._importTimeout) {
|
||||
clearTimeout(this._importTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Control
|
||||
|
||||
onChange = (event) => {
|
||||
this.setState({ json: event.value });
|
||||
}
|
||||
|
||||
onImportPress = () => {
|
||||
this.setState({ isSpinning: true });
|
||||
// this is a bodge as we need to register a isSpinning: true to get the spinner button to update
|
||||
this._importTimeout = setTimeout(this.doImport, 250);
|
||||
}
|
||||
|
||||
doImport = () => {
|
||||
const parseError = this.props.onImportPress(this.state.json);
|
||||
this.setState({
|
||||
parseError,
|
||||
isSpinning: false
|
||||
});
|
||||
|
||||
if (!parseError) {
|
||||
this.props.onModalClose();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
error,
|
||||
specificationsPopulated,
|
||||
onModalClose
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
json,
|
||||
isSpinning,
|
||||
parseError
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
|
||||
<ModalHeader>
|
||||
{translate('ImportCustomFormat')}
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
<div>
|
||||
{
|
||||
isFetching &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<div>
|
||||
{translate('UnableToLoadCustomFormats')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !error && specificationsPopulated &&
|
||||
<Form>
|
||||
<FormGroup size={sizes.MEDIUM}>
|
||||
<FormLabel>
|
||||
{translate('CustomFormatJSON')}
|
||||
</FormLabel>
|
||||
<FormInputGroup
|
||||
key={0}
|
||||
inputClassName={styles.input}
|
||||
type={inputTypes.TEXT_AREA}
|
||||
name="customFormatJson"
|
||||
value={json}
|
||||
onChange={this.onChange}
|
||||
placeholder={'{\n "name": "Custom Format"\n}'}
|
||||
errors={parseError ? [parseError] : []}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
}
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
onPress={onModalClose}
|
||||
>
|
||||
{translate('Cancel')}
|
||||
</Button>
|
||||
<SpinnerErrorButton
|
||||
onPress={this.onImportPress}
|
||||
isSpinning={isSpinning}
|
||||
error={parseError}
|
||||
>
|
||||
{translate('Import')}
|
||||
</SpinnerErrorButton>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ImportCustomFormatModalContent.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
specificationsPopulated: PropTypes.bool.isRequired,
|
||||
onImportPress: PropTypes.func.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default ImportCustomFormatModalContent;
|
||||
@ -0,0 +1,146 @@
|
||||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { clearPendingChanges } from 'Store/Actions/baseActions';
|
||||
import { clearCustomFormatSpecificationPending, deleteAllCustomFormatSpecification, fetchCustomFormatSpecificationSchema, saveCustomFormatSpecification, selectCustomFormatSpecificationSchema, setCustomFormatSpecificationFieldValue, setCustomFormatSpecificationValue, setCustomFormatValue } from 'Store/Actions/settingsActions';
|
||||
import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import ImportCustomFormatModalContent from './ImportCustomFormatModalContent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.settings.advancedSettings,
|
||||
createProviderSettingsSelector('customFormats'),
|
||||
(state) => state.settings.customFormatSpecifications,
|
||||
(advancedSettings, customFormat, specifications) => {
|
||||
return {
|
||||
advancedSettings,
|
||||
...customFormat,
|
||||
specificationsPopulated: specifications.isPopulated,
|
||||
specificationSchema: specifications.schema
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
deleteAllCustomFormatSpecification,
|
||||
clearCustomFormatSpecificationPending,
|
||||
clearPendingChanges,
|
||||
saveCustomFormatSpecification,
|
||||
selectCustomFormatSpecificationSchema,
|
||||
setCustomFormatSpecificationFieldValue,
|
||||
setCustomFormatSpecificationValue,
|
||||
setCustomFormatValue,
|
||||
fetchCustomFormatSpecificationSchema
|
||||
};
|
||||
|
||||
class ImportCustomFormatModalContentConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchCustomFormatSpecificationSchema();
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
clearPending = () => {
|
||||
this.props.clearPendingChanges({ section: 'settings.customFormats' });
|
||||
this.props.clearCustomFormatSpecificationPending();
|
||||
this.props.deleteAllCustomFormatSpecification();
|
||||
}
|
||||
|
||||
onImportPress = (payload) => {
|
||||
|
||||
this.clearPending();
|
||||
|
||||
try {
|
||||
const cf = JSON.parse(payload);
|
||||
this.parseCf(cf);
|
||||
} catch (err) {
|
||||
this.clearPending();
|
||||
return {
|
||||
message: err.message,
|
||||
detailedMessage: err.stack
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
parseCf = (cf) => {
|
||||
for (const [key, value] of Object.entries(cf)) {
|
||||
if (key === 'specifications') {
|
||||
for (const spec of value) {
|
||||
this.parseSpecification(spec);
|
||||
}
|
||||
} else if (key !== 'id') {
|
||||
this.props.setCustomFormatValue({ name: key, value });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parseSpecification = (spec) => {
|
||||
const selectedImplementation = _.find(this.props.specificationSchema, { implementation: spec.implementation });
|
||||
|
||||
if (!selectedImplementation) {
|
||||
throw new Error(translate('CustomFormatUnknownCondition', [spec.implementation]));
|
||||
}
|
||||
|
||||
this.props.selectCustomFormatSpecificationSchema({ implementation: spec.implementation });
|
||||
|
||||
for (const [key, value] of Object.entries(spec)) {
|
||||
if (key === 'fields') {
|
||||
this.parseFields(value, selectedImplementation);
|
||||
} else if (key !== 'id') {
|
||||
this.props.setCustomFormatSpecificationValue({ name: key, value });
|
||||
}
|
||||
}
|
||||
|
||||
this.props.saveCustomFormatSpecification();
|
||||
}
|
||||
|
||||
parseFields = (fields, schema) => {
|
||||
for (const [key, value] of Object.entries(fields)) {
|
||||
const field = _.find(schema.fields, { name: key });
|
||||
if (!field) {
|
||||
throw new Error(translate('CustomFormatUnknownConditionOption', [key, schema.implementationName]));
|
||||
}
|
||||
|
||||
this.props.setCustomFormatSpecificationFieldValue({ name: key, value });
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ImportCustomFormatModalContent
|
||||
{...this.props}
|
||||
onImportPress={this.onImportPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ImportCustomFormatModalContentConnector.propTypes = {
|
||||
specificationSchema: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
clearPendingChanges: PropTypes.func.isRequired,
|
||||
deleteAllCustomFormatSpecification: PropTypes.func.isRequired,
|
||||
clearCustomFormatSpecificationPending: PropTypes.func.isRequired,
|
||||
saveCustomFormatSpecification: PropTypes.func.isRequired,
|
||||
fetchCustomFormatSpecificationSchema: PropTypes.func.isRequired,
|
||||
selectCustomFormatSpecificationSchema: PropTypes.func.isRequired,
|
||||
setCustomFormatSpecificationValue: PropTypes.func.isRequired,
|
||||
setCustomFormatSpecificationFieldValue: PropTypes.func.isRequired,
|
||||
setCustomFormatValue: PropTypes.func.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(ImportCustomFormatModalContentConnector);
|
||||
Loading…
Reference in new issue