@performant-software/semantic-components 0.5.11 → 0.5.12

package/package.json

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

package/src/components/KeyValuePairs.js

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { Button, Grid, Input } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import withBatchEdit, { type BatchEditProps } from '../hooks/BatchEdit';
+
+type Item = {
+  key: string,
+  value: string
+};
+
+type Props = BatchEditProps & {
+  items: Array<Item>,
+  onChange: (items: Array<Item>) => void
+};
+
+const KeyValuePairs: ComponentType<any> = withBatchEdit((props: Props) => (
+  <div>
+    <Button
+      basic
+      content={i18n.t('Common.buttons.add')}
+      icon='plus'
+      onClick={props.onAddItem.bind(this)}
+      type='button'
+    />
+    <Grid
+      padded='vertically'
+    >
+      { _.map(props.items, (item, index) => (
+        <Grid.Row
+          columns={3}
+        >
+          <Grid.Column
+            width={8}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'key')}
+              placeholder={i18n.t('KeyValuePairs.labels.key')}
+              value={item.key}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={7}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'value')}
+              placeholder={i18n.t('KeyValuePairs.labels.value')}
+              value={item.value}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={1}
+          >
+            <Button
+              color='red'
+              icon='trash'
+              onClick={props.onRemoveItem.bind(this, index)}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      ))}
+      { _.isEmpty(props.items) && (
+        <Grid.Row
+          columns={1}
+        >
+          <Grid.Column>
+            { i18n.t('Common.labels.noRecords') }
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </Grid>
+  </div>
+));
+
+export default KeyValuePairs;

package/src/components/ReferenceCodeFormDropdown.js

@@ -0,0 +1,81 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React, { type ComponentType, useEffect, useState } from 'react';
+import { Form } from 'semantic-ui-react';
+import EditModal from './EditModal';
+import ReferenceCodeDropdown from './ReferenceCodeDropdown';
+import ReferenceCodeFormLabel from './ReferenceCodeFormLabel';
+import ReferenceTableModal from './ReferenceTableModal';
+
+type Props = {
+  error?: boolean,
+  label?: string,
+  required?: boolean,
+  referenceTable: string
+};
+
+const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
+  const {
+    error,
+    label,
+    required,
+    referenceTable: key,
+    ...rest
+  } = props;
+
+  const [modal, setModal] = useState(false);
+  const [dropdownKey, setDropdownKey] = useState(0);
+  const [referenceTable, setReferenceTable] = useState({ key });
+
+  /**
+   * Looks up the existing reference table base on the passed key.
+   */
+  useEffect(() => (
+    ReferenceTablesService
+      .fetchByKey(key)
+      .then(({ data }) => setReferenceTable((prevTable) => ({
+        ...prevTable,
+        ...data.reference_table
+      })))
+  ), [key]);
+
+  return (
+    <>
+      <Form.Input
+        error={error}
+        label={(
+          <ReferenceCodeFormLabel
+            label={label}
+            onClick={() => setModal(true)}
+            referenceTable={referenceTable.key}
+          />
+        )}
+        required={required}
+      >
+        <ReferenceCodeDropdown
+          {...rest}
+          id={referenceTable}
+          referenceTable={referenceTable.key}
+          key={dropdownKey}
+        />
+      </Form.Input>
+      { modal && (
+        <EditModal
+          component={ReferenceTableModal}
+          item={referenceTable}
+          onClose={() => setModal(false)}
+          onSave={(record) => (
+            ReferenceTablesService
+              .save(record)
+              .then(({ data }) => data.reference_table)
+              .then(() => setDropdownKey((prevKey) => prevKey + 1))
+              .finally(() => setModal(false))
+          )}
+        />
+      )}
+    </>
+  );
+};
+
+export default ReferenceCodeFormDropdown;

package/src/components/ReferenceCodeFormLabel.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  Header,
+  Icon,
+  Popup
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  label: string,
+  onClick: () => void,
+  referenceTable: string
+};
+
+const ReferenceCodeFormLabel: ComponentType<any> = withTranslation()((props: Props) => (
+  <div>
+    <label
+      htmlFor={props.referenceTable}
+    >
+      { props.label }
+    </label>
+    <Popup
+      hoverable
+      trigger={(
+        <Icon
+          name='info circle'
+          style={{
+            marginLeft: '0.3em'
+          }}
+        />
+      )}
+    >
+      <Header
+        content={props.label}
+      />
+      <p>{ i18n.t('ReferenceCodeFormLabel.content', { name: props.label })}</p>
+      <Button
+        content={i18n.t('Common.buttons.edit')}
+        icon='edit'
+        primary
+        onClick={props.onClick}
+      />
+    </Popup>
+  </div>
+));
+
+export default ReferenceCodeFormLabel;

package/src/hooks/BatchEdit.js

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useCallback, type ComponentType } from 'react';
+import _ from 'underscore';
+
+type Props = {
+  items: Array<any>,
+  onChange: (items: Array<any>) => void
+};
+
+const withBatchEdit = (WrappedComponent: ComponentType<any>): any => (props: Props) => {
+  /**
+   * Adds a new item to the list.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAddItem = useCallback(() => {
+    props.onChange([...props.items, {}]);
+  }, [props.items]);
+
+  /**
+   * Removes the item at the passed index from the list.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onRemoveItem = useCallback((findIndex) => {
+    props.onChange(_.reject(props.items, (item, index) => index === findIndex));
+  }, [props.items]);
+
+  /**
+   * Updates the passed attribute of the item at the passed index.
+   *
+   * @type {(function(number, string, ?Event, {value: *}): void)|*}
+   */
+  const onUpdateItem = useCallback((findIndex: number, attribute: string, e: ?Event, { value }) => {
+    props.onChange(_.map(props.items, (item, index) => (
+      index !== findIndex ? item : ({ ...item, [attribute]: value })
+    )));
+  }, [props.items]);
+
+  return (
+    <WrappedComponent
+      {...props}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      onUpdateItem={onUpdateItem}
+    />
+  );
+};
+
+export default withBatchEdit;
+
+export type BatchEditProps = {
+  onAddItem: () => void,
+  onRemoveItem: (index: number) => void,
+  onUpdateItem: (index: number, attribute: string, e: Event, data: any) => void
+};

package/src/i18n/en.json

@@ -21,6 +21,9 @@
     "errors": {
       "title": "Oops!"
     },
+    "labels": {
+      "noRecords": "No records."
+    },
     "messages": {
       "error": {
         "header": "Oops!"
@@ -126,6 +129,12 @@
       "showKeyboard": "Show Keyboard"
     }
   },
+  "KeyValuePairs": {
+    "labels": {
+      "key": "Key",
+      "value": "Value"
+    }
+  },
   "LazyDocument": {
     "buttons": {
       "download": "Download"
@@ -184,6 +193,9 @@
     "loginErrorHeader": "Invalid Credentials",
     "password": "Password"
   },
+  "ReferenceCodeFormLabel": {
+    "content": "The values in this list can be edited via the {{name}} reference table."
+  },
   "ReferenceCodeModal": {
     "labels": {
       "name": "Name"

package/src/index.js

@@ -38,6 +38,7 @@ export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
 export { default as KeyboardField } from './components/KeyboardField';
+export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyDocument } from './components/LazyDocument';
 export { default as LazyImage } from './components/LazyImage';
 export { default as LazyVideo } from './components/LazyVideo';
@@ -59,6 +60,8 @@ export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
 export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeFormDropdown } from './components/ReferenceCodeFormDropdown';
+export { default as ReferenceCodeFormLabel } from './components/ReferenceCodeFormLabel';
 export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
 export { default as ReferenceTableModal } from './components/ReferenceTableModal';
 export { default as ReferenceTablesList } from './components/ReferenceTablesList';
@@ -77,10 +80,14 @@ export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
 export { default as ViewXML } from './components/ViewXML';
 
+// Hooks
+export { default as BatchEdit } from './hooks/BatchEdit';
+
 // Types
 export type { EditPageProps } from './components/EditPage';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
+export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants
 export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';

package/types/components/KeyValuePairs.js.flow

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { Button, Grid, Input } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import withBatchEdit, { type BatchEditProps } from '../hooks/BatchEdit';
+
+type Item = {
+  key: string,
+  value: string
+};
+
+type Props = BatchEditProps & {
+  items: Array<Item>,
+  onChange: (items: Array<Item>) => void
+};
+
+const KeyValuePairs: ComponentType<any> = withBatchEdit((props: Props) => (
+  <div>
+    <Button
+      basic
+      content={i18n.t('Common.buttons.add')}
+      icon='plus'
+      onClick={props.onAddItem.bind(this)}
+      type='button'
+    />
+    <Grid
+      padded='vertically'
+    >
+      { _.map(props.items, (item, index) => (
+        <Grid.Row
+          columns={3}
+        >
+          <Grid.Column
+            width={8}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'key')}
+              placeholder={i18n.t('KeyValuePairs.labels.key')}
+              value={item.key}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={7}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'value')}
+              placeholder={i18n.t('KeyValuePairs.labels.value')}
+              value={item.value}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={1}
+          >
+            <Button
+              color='red'
+              icon='trash'
+              onClick={props.onRemoveItem.bind(this, index)}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      ))}
+      { _.isEmpty(props.items) && (
+        <Grid.Row
+          columns={1}
+        >
+          <Grid.Column>
+            { i18n.t('Common.labels.noRecords') }
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </Grid>
+  </div>
+));
+
+export default KeyValuePairs;

package/types/components/ReferenceCodeFormDropdown.js.flow

@@ -0,0 +1,81 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React, { type ComponentType, useEffect, useState } from 'react';
+import { Form } from 'semantic-ui-react';
+import EditModal from './EditModal';
+import ReferenceCodeDropdown from './ReferenceCodeDropdown';
+import ReferenceCodeFormLabel from './ReferenceCodeFormLabel';
+import ReferenceTableModal from './ReferenceTableModal';
+
+type Props = {
+  error?: boolean,
+  label?: string,
+  required?: boolean,
+  referenceTable: string
+};
+
+const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
+  const {
+    error,
+    label,
+    required,
+    referenceTable: key,
+    ...rest
+  } = props;
+
+  const [modal, setModal] = useState(false);
+  const [dropdownKey, setDropdownKey] = useState(0);
+  const [referenceTable, setReferenceTable] = useState({ key });
+
+  /**
+   * Looks up the existing reference table base on the passed key.
+   */
+  useEffect(() => (
+    ReferenceTablesService
+      .fetchByKey(key)
+      .then(({ data }) => setReferenceTable((prevTable) => ({
+        ...prevTable,
+        ...data.reference_table
+      })))
+  ), [key]);
+
+  return (
+    <>
+      <Form.Input
+        error={error}
+        label={(
+          <ReferenceCodeFormLabel
+            label={label}
+            onClick={() => setModal(true)}
+            referenceTable={referenceTable.key}
+          />
+        )}
+        required={required}
+      >
+        <ReferenceCodeDropdown
+          {...rest}
+          id={referenceTable}
+          referenceTable={referenceTable.key}
+          key={dropdownKey}
+        />
+      </Form.Input>
+      { modal && (
+        <EditModal
+          component={ReferenceTableModal}
+          item={referenceTable}
+          onClose={() => setModal(false)}
+          onSave={(record) => (
+            ReferenceTablesService
+              .save(record)
+              .then(({ data }) => data.reference_table)
+              .then(() => setDropdownKey((prevKey) => prevKey + 1))
+              .finally(() => setModal(false))
+          )}
+        />
+      )}
+    </>
+  );
+};
+
+export default ReferenceCodeFormDropdown;

package/types/components/ReferenceCodeFormLabel.js.flow

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  Header,
+  Icon,
+  Popup
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  label: string,
+  onClick: () => void,
+  referenceTable: string
+};
+
+const ReferenceCodeFormLabel: ComponentType<any> = withTranslation()((props: Props) => (
+  <div>
+    <label
+      htmlFor={props.referenceTable}
+    >
+      { props.label }
+    </label>
+    <Popup
+      hoverable
+      trigger={(
+        <Icon
+          name='info circle'
+          style={{
+            marginLeft: '0.3em'
+          }}
+        />
+      )}
+    >
+      <Header
+        content={props.label}
+      />
+      <p>{ i18n.t('ReferenceCodeFormLabel.content', { name: props.label })}</p>
+      <Button
+        content={i18n.t('Common.buttons.edit')}
+        icon='edit'
+        primary
+        onClick={props.onClick}
+      />
+    </Popup>
+  </div>
+));
+
+export default ReferenceCodeFormLabel;

package/types/hooks/BatchEdit.js.flow

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useCallback, type ComponentType } from 'react';
+import _ from 'underscore';
+
+type Props = {
+  items: Array<any>,
+  onChange: (items: Array<any>) => void
+};
+
+const withBatchEdit = (WrappedComponent: ComponentType<any>): any => (props: Props) => {
+  /**
+   * Adds a new item to the list.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAddItem = useCallback(() => {
+    props.onChange([...props.items, {}]);
+  }, [props.items]);
+
+  /**
+   * Removes the item at the passed index from the list.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onRemoveItem = useCallback((findIndex) => {
+    props.onChange(_.reject(props.items, (item, index) => index === findIndex));
+  }, [props.items]);
+
+  /**
+   * Updates the passed attribute of the item at the passed index.
+   *
+   * @type {(function(number, string, ?Event, {value: *}): void)|*}
+   */
+  const onUpdateItem = useCallback((findIndex: number, attribute: string, e: ?Event, { value }) => {
+    props.onChange(_.map(props.items, (item, index) => (
+      index !== findIndex ? item : ({ ...item, [attribute]: value })
+    )));
+  }, [props.items]);
+
+  return (
+    <WrappedComponent
+      {...props}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      onUpdateItem={onUpdateItem}
+    />
+  );
+};
+
+export default withBatchEdit;
+
+export type BatchEditProps = {
+  onAddItem: () => void,
+  onRemoveItem: (index: number) => void,
+  onUpdateItem: (index: number, attribute: string, e: Event, data: any) => void
+};

package/types/index.js.flow

@@ -38,6 +38,7 @@ export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
 export { default as KeyboardField } from './components/KeyboardField';
+export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyDocument } from './components/LazyDocument';
 export { default as LazyImage } from './components/LazyImage';
 export { default as LazyVideo } from './components/LazyVideo';
@@ -59,6 +60,8 @@ export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
 export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeFormDropdown } from './components/ReferenceCodeFormDropdown';
+export { default as ReferenceCodeFormLabel } from './components/ReferenceCodeFormLabel';
 export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
 export { default as ReferenceTableModal } from './components/ReferenceTableModal';
 export { default as ReferenceTablesList } from './components/ReferenceTablesList';
@@ -77,10 +80,14 @@ export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
 export { default as ViewXML } from './components/ViewXML';
 
+// Hooks
+export { default as BatchEdit } from './hooks/BatchEdit';
+
 // Types
 export type { EditPageProps } from './components/EditPage';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
+export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants
 export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';