Merge pull request #130 from performant-software/feature/rc129_customize_axios

RC #129 - Customize Axios

Author: dleadbetter

package.json

@@ -6,7 +6,9 @@
     "packages/*"
   ],
   "scripts": {
-    "build-storybook": "yarn --cwd packages/storybook build",
+    "build-semantic": "yarn --cwd packages/semantic-ui build",
+    "build-shared": "yarn --cwd packages/shared build",
+    "build-storybook": "yarn build-shared && yarn build-semantic && yarn --cwd packages/storybook build",
     "flow": "flow",
     "storybook": "yarn --cwd packages/storybook storybook",
     "test": "jest"

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,7 +9,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^0.5.2",
+    "@performant-software/shared-components": "^0.5.3",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "flow-copy-source": "^2.0.9",
@@ -30,7 +30,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.2",
+    "@performant-software/webpack-config": "^0.5.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

packages/semantic-ui/src/components/ReferenceCodeDropdown.css

@@ -0,0 +1,118 @@
+// @flow
+
+import { ReferenceCodesService } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+import { Dropdown } from 'semantic-ui-react';
+
+type Item = {
+  reference_table_id: number,
+  key: string
+};
+
+type Props = {
+  fluid?: boolean,
+  multiple?: boolean,
+  onChange: (item: Item) => void,
+  placeholder?: string,
+  referenceTable: string,
+  value: Item | Array<Item>
+};
+
+const ReferenceCodeDropdown = (props: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+
+  /**
+   * Converts the passed ID to a reference code item.
+   *
+   * @type {function(*): {reference_code_id: *}}
+   */
+  const toItem = useCallback((id) => ({
+    reference_code_id: id
+  }), []);
+
+  /**
+   * Converts the passed reference code to a dropdown option.
+   *
+   * @type {function(*): {text: *, value: *, key: *}}
+   */
+  const toOption = useCallback((referenceCode) => ({
+    key: referenceCode.id,
+    value: referenceCode.id,
+    text: referenceCode.name
+  }), []);
+
+  /**
+   * Converts the selected values and calls the onChange prop.
+   *
+   * @type {(function(*, {value: *}): void)|*}
+   */
+  const onChange = useCallback((e, { value }) => {
+    let values;
+
+    if (props.multiple) {
+      values = value;
+    } else {
+      values = _.compact([value]);
+    }
+
+    props.onChange(_.map(values, toItem));
+  }, [toItem, props.multiple, props.onChange]);
+
+  /**
+   * Sets the "value" variable for the Dropdown component.
+   */
+  const value = useMemo(() => {
+    const v = _.pluck(_.filter(props.value, (x) => !x._destroy), 'reference_code_id');
+    return props.multiple ? v : _.first(v);
+  }, [props.multiple, props.value]);
+
+  /**
+   * Loads the list of reference codes from the server.
+   */
+  useEffect(() => {
+    setLoading(true);
+
+    const params = {
+      per_page: 0,
+      reference_table: props.referenceTable,
+      sort_by: 'name'
+    };
+
+    ReferenceCodesService
+      .fetchAll(params)
+      .then(({ data }) => setOptions(_.map(data.reference_codes, toOption)))
+      .finally(() => setLoading(false));
+  }, [toOption]);
+
+  return (
+    <Dropdown
+      clearable
+      disabled={loading}
+      fluid={props.fluid}
+      loading={loading}
+      multiple={props.multiple}
+      onChange={onChange}
+      options={options}
+      placeholder={props.placeholder}
+      search
+      selection
+      selectOnBlur={false}
+      value={value}
+    />
+  );
+};
+
+ReferenceCodeDropdown.defaultProps = {
+  fluid: true,
+  multiple: false,
+  placeholder: undefined
+};
+
+export default ReferenceCodeDropdown;

packages/semantic-ui/src/components/ReferenceCodeDropdown.js

@@ -0,0 +1,32 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+const ReferenceCodeModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    open
+  >
+    <Modal.Header
+      content={props.item.id
+        ? i18n.t('ReferenceCodeModal.title.edit')
+        : i18n.t('ReferenceCodeModal.title.add')}
+    />
+    <Modal.Content>
+      <Form.Input
+        error={props.isError('name')}
+        label={i18n.t('ReferenceCodeModal.labels.name')}
+        onChange={props.onTextInputChange.bind(this, 'name')}
+        required={props.isRequired('name')}
+        value={props.item.name}
+      />
+    </Modal.Content>
+    { props.children }
+  </Modal>
+);
+
+export default ReferenceCodeModal;

packages/semantic-ui/src/components/ReferenceCodeModal.css

@@ -0,0 +1,67 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Header, Modal } from 'semantic-ui-react';
+import EmbeddedList from './EmbeddedList';
+import ReferenceCodeModal from './ReferenceCodeModal';
+import i18n from '../i18n/i18n';
+
+const ReferenceTableModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    className='reference-table-modal'
+    open
+  >
+    <Modal.Header
+      content={props.item.id
+        ? i18n.t('ReferenceTableModal.title.edit')
+        : i18n.t('ReferenceTableModal.title.add')}
+    />
+    <Modal.Content>
+      <Form.Input
+        error={props.isError('name')}
+        label={i18n.t('ReferenceTableModal.labels.name')}
+        onChange={props.onTextInputChange.bind(this, 'name')}
+        required={props.isRequired('name')}
+        value={props.item.name}
+      />
+      <Form.Input
+        error={props.isError('key')}
+        label={i18n.t('ReferenceTableModal.labels.key')}
+        onChange={props.onTextInputChange.bind(this, 'key')}
+        required={props.isRequired('key')}
+        value={props.item.key}
+      />
+      <Header
+        content={i18n.t('ReferenceTableModal.labels.referenceCodes')}
+      />
+      <EmbeddedList
+        actions={[{
+          name: 'edit'
+        }, {
+          name: 'copy'
+        }, {
+          name: 'delete'
+        }]}
+        columns={[{
+          name: 'name',
+          label: i18n.t('ReferenceTableModal.referenceCodes.columns.name')
+        }]}
+        items={props.item.reference_codes}
+        modal={{
+          component: ReferenceCodeModal,
+          props: {
+            required: ['name']
+          }
+        }}
+        onDelete={props.onDeleteChildAssociation.bind(this, 'reference_codes')}
+        onSave={props.onSaveChildAssociation.bind(this, 'reference_codes')}
+      />
+    </Modal.Content>
+    { props.children }
+  </Modal>
+);
+
+export default ReferenceTableModal;

packages/semantic-ui/src/components/ReferenceCodeModal.js

@@ -0,0 +1,44 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React from 'react';
+import ListTable from './ListTable';
+import ReferenceTableModal from './ReferenceTableModal';
+
+const ReferenceTablesList = () => (
+  <ListTable
+    actions={[{
+      name: 'edit'
+    }, {
+      name: 'copy'
+    }, {
+      name: 'delete'
+    }]}
+    collectionName='reference_tables'
+    columns={[{
+      name: 'name',
+      label: 'Name',
+      sortable: true
+    }, {
+      name: 'key',
+      label: 'Key',
+      sortable: true
+    }]}
+    modal={{
+      component: ReferenceTableModal,
+      props: {
+        onInitialize: (id) => (
+          ReferenceTablesService
+            .fetchOne(id)
+            .then(({ data }) => data.reference_table)
+        ),
+        required: ['name', 'key']
+      }
+    }}
+    onDelete={(referenceTable) => ReferenceTablesService.delete(referenceTable)}
+    onLoad={(params) => ReferenceTablesService.fetchAll(params)}
+    onSave={(referenceTable) => ReferenceTablesService.save(referenceTable)}
+  />
+);
+
+export default ReferenceTablesList;