New: Project Aphrodite

frontend/src/Settings/Metadata/Metadata/EditMetadataModal.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { sizes } from 'Helpers/Props';
+import Modal from 'Components/Modal/Modal';
+import EditMetadataModalContentConnector from './EditMetadataModalContentConnector';
+
+function EditMetadataModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditMetadataModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditMetadataModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditMetadataModal;

frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditMetadataModal from './EditMetadataModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  const section = 'settings.metadata';
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    }
+  };
+}
+
+class EditMetadataModalConnector extends Component {
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.dispatchClearPendingChanges({ section: 'metadata' });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditMetadataModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditMetadataModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(null, createMapDispatchToProps)(EditMetadataModalConnector);

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.js

@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+
+function EditMetadataModalContent(props) {
+  const {
+    isSaving,
+    saveError,
+    item,
+    onInputChange,
+    onFieldChange,
+    onModalClose,
+    onSavePress,
+    ...otherProps
+  } = props;
+
+  const {
+    name,
+    enable,
+    fields
+  } = item;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        Edit {name.value} Metadata
+      </ModalHeader>
+
+      <ModalBody>
+        <Form {...otherProps}>
+          <FormGroup>
+            <FormLabel>Enable</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="enable"
+              helpText="Enable metadata file creation for this metadata type"
+              {...enable}
+              onChange={onInputChange}
+            />
+          </FormGroup>
+
+          {
+            fields.map((field) => {
+              return (
+                <ProviderFieldFormGroup
+                  key={field.name}
+                  provider="metadata"
+                  {...field}
+                  isDisabled={!enable.value}
+                  onChange={onFieldChange}
+                />
+              );
+            })
+          }
+
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          onPress={onModalClose}
+        >
+          Cancel
+        </Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={onSavePress}
+        >
+          Save
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+EditMetadataModalContent.propTypes = {
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onDeleteMetadataPress: PropTypes.func
+};
+
+export default EditMetadataModalContent;

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContentConnector.js

@@ -0,0 +1,93 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import selectSettings from 'Store/Selectors/selectSettings';
+import { setMetadataValue, setMetadataFieldValue, saveMetadata } from 'Store/Actions/settingsActions';
+import EditMetadataModalContent from './EditMetadataModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { id }) => id,
+    (state) => state.settings.metadata,
+    (id, metadata) => {
+      const {
+        isSaving,
+        saveError,
+        pendingChanges,
+        items
+      } = metadata;
+
+      const settings = selectSettings(_.find(items, { id }), pendingChanges, saveError);
+
+      return {
+        id,
+        isSaving,
+        saveError,
+        item: settings.settings,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setMetadataValue,
+  setMetadataFieldValue,
+  saveMetadata
+};
+
+class EditMetadataModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setMetadataValue({ name, value });
+  }
+
+  onFieldChange = ({ name, value }) => {
+    this.props.setMetadataFieldValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveMetadata({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditMetadataModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onInputChange={this.onInputChange}
+        onFieldChange={this.onFieldChange}
+      />
+    );
+  }
+}
+
+EditMetadataModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setMetadataValue: PropTypes.func.isRequired,
+  setMetadataFieldValue: PropTypes.func.isRequired,
+  saveMetadata: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditMetadataModalContentConnector);

frontend/src/Settings/Metadata/Metadata/Metadata.css

@@ -0,0 +1,15 @@
+.metadata {
+  composes: card from 'Components/Card.css';
+
+  width: 290px;
+}
+
+.name {
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.section {
+  margin-top: 10px;
+}

frontend/src/Settings/Metadata/Metadata/Metadata.js

@@ -0,0 +1,149 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { kinds } from 'Helpers/Props';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import EditMetadataModalConnector from './EditMetadataModalConnector';
+import styles from './Metadata.css';
+
+class Metadata extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditMetadataModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditMetadataPress = () => {
+    this.setState({ isEditMetadataModalOpen: true });
+  }
+
+  onEditMetadataModalClose = () => {
+    this.setState({ isEditMetadataModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      name,
+      enable,
+      fields
+    } = this.props;
+
+    const metadataFields = [];
+    const imageFields = [];
+
+    fields.forEach((field) => {
+      if (field.section === 'metadata') {
+        metadataFields.push(field);
+      } else {
+        imageFields.push(field);
+      }
+    });
+
+    return (
+      <Card
+        className={styles.metadata}
+        overlayContent={true}
+        onPress={this.onEditMetadataPress}
+      >
+        <div className={styles.name}>
+          {name}
+        </div>
+
+        <div>
+          {
+            enable ?
+              <Label kind={kinds.SUCCESS}>
+                Enabled
+              </Label> :
+              <Label
+                kind={kinds.DISABLED}
+                outline={true}
+              >
+                Disabled
+              </Label>
+          }
+        </div>
+
+        {
+          enable && !!metadataFields.length &&
+            <div>
+              <div className={styles.section}>
+                Metadata
+              </div>
+
+              {
+                metadataFields.map((field) => {
+                  if (!field.value) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={field.label}
+                      kind={kinds.SUCCESS}
+                    >
+                      {field.label}
+                    </Label>
+                  );
+                })
+              }
+            </div>
+        }
+
+        {
+          enable && !!imageFields.length &&
+            <div>
+              <div className={styles.section}>
+                Images
+              </div>
+
+              {
+                imageFields.map((field) => {
+                  if (!field.value) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={field.label}
+                      kind={kinds.SUCCESS}
+                    >
+                      {field.label}
+                    </Label>
+                  );
+                })
+              }
+            </div>
+        }
+
+        <EditMetadataModalConnector
+          id={id}
+          isOpen={this.state.isEditMetadataModalOpen}
+          onModalClose={this.onEditMetadataModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+Metadata.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  enable: PropTypes.bool.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Metadata;

frontend/src/Settings/Metadata/Metadata/Metadatas.css

@@ -0,0 +1,4 @@
+.metadatas {
+  display: flex;
+  flex-wrap: wrap;
+}

frontend/src/Settings/Metadata/Metadata/Metadatas.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import sortByName from 'Utilities/Array/sortByName';
+import FieldSet from 'Components/FieldSet';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import Metadata from './Metadata';
+import styles from './Metadatas.css';
+
+function Metadatas(props) {
+  const {
+    items,
+    ...otherProps
+  } = props;
+
+  return (
+    <FieldSet legend="Metadata">
+      <PageSectionContent
+        errorMessage="Unable to load Metadata"
+        {...otherProps}
+      >
+        <div className={styles.metadatas}>
+          {
+            items.sort(sortByName).map((item) => {
+              return (
+                <Metadata
+                  key={item.id}
+                  {...item}
+                />
+              );
+            })
+          }
+        </div>
+      </PageSectionContent>
+    </FieldSet>
+  );
+}
+
+Metadatas.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Metadatas;

frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchMetadata } from 'Store/Actions/settingsActions';
+import Metadatas from './Metadatas';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.metadata,
+    (metadata) => {
+      return {
+        ...metadata
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchMetadata
+};
+
+class MetadatasConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchMetadata();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Metadatas
+        {...this.props}
+        onConfirmDeleteMetadata={this.onConfirmDeleteMetadata}
+      />
+    );
+  }
+}
+
+MetadatasConnector.propTypes = {
+  fetchMetadata: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MetadatasConnector);

frontend/src/Settings/Metadata/MetadataSettings.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import MetadatasConnector from './Metadata/MetadatasConnector';
+
+function MetadataSettings() {
+  return (
+    <PageContent title="Metadata Settings">
+      <SettingsToolbarConnector
+        showSave={false}
+      />
+
+      <PageContentBodyConnector>
+        <MetadatasConnector />
+      </PageContentBodyConnector>
+    </PageContent>
+  );
+}
+
+export default MetadataSettings;