@performant-software/semantic-components 0.5.1 → 0.5.4

package/types/components/DataView.js.flow

@@ -1,42 +1,263 @@
 // @flow
 
 import axios from 'axios';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Container } from 'semantic-ui-react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { Form, Grid, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
-import MenuSidebar from './MenuSidebar';
+import DataTable from './DataTable';
+import DropdownButton from './DropdownButton';
+import i18n from '../i18n/i18n';
 import MenuBar from './MenuBar';
-import ListTable from './ListTable';
+import MenuSidebar from './MenuSidebar';
+import useDataList, { SORT_ASCENDING, SORT_DESCENDING } from './DataList';
+import './DataView.css';
+
+import type { Column } from './DataTable';
+
+type Sort = {
+  label: string,
+  value: string
+};
 
 type Item = {
   id: string,
   label: string,
   group?: string,
-}
+  columns?: Array<Column>,
+  sorts?: Array<Sort>
+};
 
 type Props = {
+  columnCount?: number,
   items: Array<Item>,
   layout: 'top' | 'left',
   title: string
 };
 
+/**
+ * Sets up the List component used by the DataView component. This component is responsible for rendering the DataTable
+ * and handling sorting.
+ */
+const List = useDataList((props) => {
+  const [activeSort, setActiveSort] = useState();
+
+  /**
+   * Sets the active sort object on the state.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onSortChange = useCallback((sort) => {
+    const newSort = { ...sort };
+
+    if (activeSort && activeSort.value === sort.value) {
+      newSort.direction = activeSort.direction === SORT_DESCENDING ? SORT_ASCENDING : SORT_DESCENDING;
+    }
+
+    setActiveSort(newSort);
+  }, [props.sorts, activeSort]);
+
+  /**
+   * Calls the onSort prop when the active sort is changed.
+   */
+  useEffect(() => {
+    if (activeSort) {
+      props.onSort(activeSort.value, activeSort.direction, props.page);
+    }
+  }, [activeSort]);
+
+  /**
+   * Calls the onSort prop when the component is loaded to initialize the data set.
+   */
+  useEffect(() => {
+    const { page } = props;
+
+    let { sortColumn = '', sortDirection = SORT_ASCENDING } = props;
+
+    if (!sortColumn) {
+      const defaultSort = _.first(props.sort);
+
+      if (defaultSort) {
+        sortColumn = defaultSort.value;
+
+        if (defaultSort.direction) {
+          sortDirection = defaultSort.direction;
+        }
+      }
+    }
+
+    props.onSort(sortColumn, sortDirection, page);
+  }, []);
+
+  return (
+    <DataTable
+      {...props}
+      renderListHeader={() => props.sorts && (
+        <DropdownButton
+          basic
+          icon={activeSort && activeSort.direction === SORT_DESCENDING
+            ? 'sort alphabet down'
+            : 'sort alphabet up'}
+          onChange={() => {}}
+          options={_.map(props.sorts, (sort) => ({
+            key: sort.value,
+            value: sort.value,
+            text: sort.label,
+            onClick: () => onSortChange(sort)
+          }))}
+          text={activeSort
+            ? i18n.t('DataView.labels.sortBy', { column: activeSort.label })
+            : i18n.t('DataView.labels.noSort')}
+          value={activeSort && activeSort.value}
+        />
+      )}
+      tableProps={{
+        ...props.tableProps || {},
+        celled: true
+      }}
+    />
+  );
+});
+
 const DataView = (props: Props) => {
   const [activeItem, setActiveItem] = useState();
+  const [selectedRecord, setSelectedRecord] = useState();
+
   const [columns, setColumns] = useState([]);
   const [menu, setMenu] = useState([]);
   const [paddingLeft, setPaddingLeft] = useState();
+  const [key, setKey] = useState();
 
   const menuRef = useRef();
 
+  /**
+   * Sets the collection name based on the URL of the active item.
+   *
+   * @type {string}
+   */
+  const collectionName = useMemo(() => {
+    let name = '';
+
+    if (activeItem) {
+      name = activeItem.url.substr(activeItem.url.lastIndexOf('/') + 1, activeItem.url.length);
+    }
+
+    return name;
+  }, [activeItem]);
+
+  /**
+   * Merges the calculated columns with the columns passed with the active item. The idea is to allow customization
+   * of the columns by the implementing component, but not require it.
+   *
+   * @type {(function(*): ([]|*))|*}
+   */
+  const mergeColumns = useCallback((items) => {
+    if (!activeItem) {
+      return [];
+    }
+
+    // Build the list of columns based on the unique set of properties
+    const keys = _.chain(items)
+      .map((item) => _.keys(item))
+      .flatten()
+      .uniq()
+      .value();
+
+    // Merge any columns provided by the implementing component by name
+    let cols = _.map(keys, (col, index) => {
+      const columnValue = _.findWhere(activeItem.columns, { name: col }) || {};
+
+      const defaultValue = {
+        name: col,
+        label: col.trim().replace(/^\w/, (c) => c.toUpperCase()).replaceAll('_', ' '),
+        sortable: false,
+        resolve: (item) => resolveValue(item, col),
+        hidden: index > props.columnCount,
+        index
+      };
+
+      return _.extend(defaultValue, columnValue);
+    });
+
+    // Include any columns provided by the implementing component that do not exist on the object (i.e. extra columns)
+    cols = [
+      ...cols,
+      ..._.reject(activeItem.columns, (col) => _.contains(keys, col.name))
+    ];
+
+    // Sort the columns by the index property
+    return _.sortBy(cols, 'index');
+  }, [activeItem]);
+
+  /**
+   * Calls the "show" URL for the passed item. It's possible that the API does not implement a public "show" route. In
+   * this case and error is expected and the passed item will be set as the selected record.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onItemSelection = useCallback((item) => {
+    if (activeItem) {
+      axios
+        .get(`${activeItem.url}/${item.id}`)
+        .then(({ data }) => {
+          const itemKey = _.first(_.keys(data));
+          setSelectedRecord(data[itemKey]);
+        })
+        .catch(() => {
+          setSelectedRecord(item);
+        });
+    }
+  }, [activeItem]);
+
+  /**
+   * Calls the "index" URL to initialize the data set.
+   *
+   * @type {function(*): *}
+   */
   const onLoad = useCallback((params) => {
+    let promise;
+
     if (activeItem) {
-      axios.get
-      fetch(activeItem.url).then((response) => {
-        console.log(response);
-      });
+      promise = axios
+        .get(activeItem.url, { params })
+        .then((response) => {
+          const items = response.data[collectionName];
+          setColumns(mergeColumns(items));
+
+          return response;
+        });
+    } else {
+      promise = Promise.resolve();
     }
+
+    return promise;
   }, [activeItem]);
 
+  /**
+   * Returns the value of the passed attribute on the passed item. This function handles use cases for special
+   * types of objects.
+   *
+   * @type {function(*, *): *}
+   */
+  const resolveValue = useCallback((item, attribute) => {
+    let value = item[attribute];
+
+    if (_.isArray(value)) {
+      value = _.size(value);
+    } else if (_.isBoolean(value)) {
+      value = Boolean(value).toString();
+    } else if (_.isObject(value)) {
+      value = value[_.first(_.keys(value))];
+    }
+
+    return value;
+  }, []);
+
   /**
    * Re-formats the passed items as a menu object. If we're grouping the menu items, items will be added as
    * a child property of the group object.
@@ -66,7 +287,7 @@ const DataView = (props: Props) => {
    */
   useEffect(() => {
     if (props.items && props.items.length) {
-      setActiveItem(props.items[0]);
+      setActiveItem(_.first(props.items));
     }
   }, [props.items]);
 
@@ -79,6 +300,24 @@ const DataView = (props: Props) => {
     }
   }, [menuRef, props.layout]);
 
+  /**
+   * Calculates the key value when the active item or columns are changed. This is done to force re-rendering
+   * of the List component when the columns are loaded via the API.
+   */
+  useEffect(() => {
+    const keys = [];
+
+    if (activeItem) {
+      keys.push(activeItem.id);
+    }
+
+    if (columns && columns.length) {
+      keys.push(..._.pluck(columns, 'name'));
+    }
+
+    setKey(keys.join(''));
+  }, [activeItem, columns]);
+
   return (
     <div
       className='data-view'
@@ -100,26 +339,69 @@ const DataView = (props: Props) => {
           items={menu}
         />
       )}
-      <Container
+      <div
         style={{
-          paddingLeft
+          marginLeft: paddingLeft
         }}
       >
         { activeItem && (
-          <ListTable
-            collectionName='items'
+          <List
+            actions={[{
+              name: 'details',
+              icon: 'info',
+              onClick: onItemSelection
+            }]}
+            collectionName={collectionName}
             columns={columns}
-            onLoad={(params) => Api.onLoad(_.extend(params, {
-              items,
-              perPage: number('Per page', 10)
-            }))}
+            key={key}
+            onLoad={onLoad}
+            perPageOptions={[10, 25, 50, 100]}
             searchable
+            sorts={activeItem.sorts}
           />
         )}
-        <div>Content</div>
-      </Container>
+      </div>
+      { selectedRecord && (
+        <Modal
+          as={Form}
+          centered={false}
+          className='data-view-modal'
+          closeIcon
+          onClose={() => setSelectedRecord(null)}
+          open
+        >
+          <Modal.Header
+            content={i18n.t('DataView.labels.details')}
+          />
+          <Modal.Content>
+            <Grid
+              columns={3}
+              doubling
+            >
+              { _.map(mergeColumns([selectedRecord]), (column) => (
+                <Grid.Column
+                  as={Form.Field}
+                  key={column.name}
+                >
+                  <span
+                    className='label'
+                  >
+                    { column.label }
+                  </span>
+                  { resolveValue(selectedRecord, column.name) }
+                </Grid.Column>
+              ))}
+            </Grid>
+          </Modal.Content>
+        </Modal>
+      )}
     </div>
   );
 };
 
+DataView.defaultProps = {
+  columnCount: 5,
+  layout: 'left'
+};
+
 export default DataView;

package/types/components/MenuBar.js.flow

@@ -24,8 +24,11 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderDropdownItem = useCallback((item) => (
-    <Dropdown.Item {...item} />
+  const renderDropdownItem = useCallback((item, index) => (
+    <Dropdown.Item
+      key={index}
+      {...item}
+    />
   ), []);
 
   /**
@@ -33,8 +36,9 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderMenuItem = useCallback((item) => (
+  const renderMenuItem = useCallback((item, index) => (
     <Menu.Item
+      key={index}
       {...item}
     />
   ), []);
@@ -44,9 +48,10 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderDropdown = useCallback((item) => (
+  const renderDropdown = useCallback((item, index) => (
     <DropdownMenu
       item
+      key={index}
       text={item.content}
     >
       { _.map(item.items, (i) => (i.items ? renderDropdown(i) : renderDropdownItem(i)))}

package/types/components/MenuSidebar.js.flow

@@ -4,24 +4,35 @@ import React, { useCallback } from 'react';
 import {
   Header,
   Menu,
+  Ref,
   type HeaderProps,
-  type MenuItemProps, Ref
+  type MenuItemProps
 } from 'semantic-ui-react';
 import _ from 'underscore';
 
 type Props = {
+  contextRef: {
+    current: ?HTMLElement
+  },
   header: HeaderProps,
   items: Array<HeaderProps | MenuItemProps>
 };
 
-const MenuSidebar = ({ header, items, ...props }: Props) => {
+const MenuSidebar = ({
+  contextRef,
+  header,
+  items,
+  ...props
+}: Props) => {
   /**
    * Renders the passed item as a menu.
    *
    * @type {unknown}
    */
-  const renderMenu = useCallback((item) => (
-    <Menu.Item>
+  const renderMenu = useCallback((item, index) => (
+    <Menu.Item
+      key={index}
+    >
       <Menu.Header
         {...item}
       />
@@ -36,8 +47,9 @@ const MenuSidebar = ({ header, items, ...props }: Props) => {
    *
    * @type {unknown}
    */
-  const renderMenuItem = useCallback((item) => (
+  const renderMenuItem = useCallback((item, index) => (
     <Menu.Item
+      key={index}
       {...item}
     />
   ), []);
@@ -51,7 +63,7 @@ const MenuSidebar = ({ header, items, ...props }: Props) => {
 
   return (
     <Ref
-      innerRef={props.contextRef}
+      innerRef={contextRef}
     >
       <Menu
         {...props}

package/types/components/ReferenceCodeDropdown.js.flow

@@ -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;

package/types/components/ReferenceCodeModal.js.flow

@@ -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;

package/types/components/ReferenceTableModal.js.flow

@@ -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;