Merge pull request #244 from performant-software/feature/cdc60_data_entry_form

CDC #60 - Data Entry Form

Author: dleadbetter

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.0",
-    "@performant-software/shared-components": "^1.1.0",
+    "@performant-software/semantic-components": "^1.1.1",
+    "@performant-software/shared-components": "^1.1.1",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/geospatial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "TODO: ADD",
   "license": "MIT",
   "main": "./build/index.js",

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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": "^1.1.0",
+    "@performant-software/shared-components": "^1.1.1",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

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

@@ -2,7 +2,12 @@
 
 import { Timer } from '@performant-software/shared-components';
 import React, { Component, type ComponentType } from 'react';
-import { Button, Dropdown, Message } from 'semantic-ui-react';
+import {
+  Button,
+  Dropdown,
+  Message,
+  type ButtonProps
+} from 'semantic-ui-react';
 import _ from 'underscore';
 import EditModal from './EditModal';
 import i18n from '../i18n/i18n';
@@ -16,6 +21,7 @@ type Option = {
 };
 
 type Props = {
+  buttons?: Array<ButtonProps>,
   className?: string,
   collectionName: string,
   header?: ComponentType<any>,
@@ -45,6 +51,10 @@ type State = {
   value: ?number | ?string
 };
 
+const BUTTON_ADD = 'add';
+const BUTTON_CLEAR = 'clear';
+const BUTTON_EDIT = 'edit';
+
 const TIMEOUT = 500;
 
 class AssociatedDropdown extends Component<Props, State> {
@@ -243,13 +253,33 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
+    return this.renderButton(BUTTON_ADD, {
+      basic: true,
+      content: i18n.t('Common.buttons.add'),
+      icon: 'plus',
+      onClick: () => this.setState({ modalAdd: true }),
+      type: 'button'
+    });
+  }
+
+  /**
+   * Renders the button with the passed name using the provided props.
+   *
+   * @param name
+   * @param defaults
+   *
+   * @returns {JSX.Element|null}
+   */
+  renderButton(name, defaults) {
+    const button = _.findWhere(this.props.buttons, { name }) || {};
+
+    if (button.accept && !button.accept()) {
+      return null;
+    }
+
     return (
       <Button
-        basic
-        content={i18n.t('Common.buttons.add')}
-        icon='plus'
-        onClick={() => this.setState({ modalAdd: true })}
-        type='button'
+        {..._.defaults(button, defaults)}
       />
     );
   }
@@ -264,15 +294,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.clear')}
-        icon='times'
-        onClick={this.onClear.bind(this)}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_CLEAR, {
+      basic: true,
+      content: i18n.t('Common.buttons.clear'),
+      icon: 'times',
+      onClick: this.onClear.bind(this),
+      type: 'button'
+    });
   }
 
   /**
@@ -285,15 +313,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.edit')}
-        icon='pencil'
-        onClick={() => this.setState({ modalEdit: true })}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_EDIT, {
+      basic: true,
+      content: i18n.t('Common.buttons.edit'),
+      icon: 'pencil',
+      onClick: () => this.setState({ modalEdit: true }),
+      type: 'button'
+    });
   }
 
   /**

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

@@ -43,7 +43,12 @@ type Props = ListProps & {
    * If a <code>render</code> callback is provided, the item will be passed to the function and the return JSX
    * will display as the property value.
    */
-  columns: Array<Column>
+  columns: Array<Column>,
+
+  /**
+   * If <code>true</code>, columns can be shown/hidden by the user.
+   */
+  configurable?: boolean
 };
 
 type State = {
@@ -139,7 +144,9 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
           {...this.props}
           className={`data-table-column-selector ${this.props.className}`}
           columns={this.state.columns}
-          renderListHeader={this.renderHeader.bind(this)}
+          renderListHeader={this.props.configurable
+            ? this.renderHeader.bind(this)
+            : undefined}
         />
       );
     }

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

@@ -45,6 +45,11 @@ type Props = ListProps & {
    */
   items: Array<any>,
 
+  /**
+   * The number of cards to display per row in the grid view.
+   */
+  itemsPerRow?: number,
+
   /**
    * If true, the list items will be formatted as a link.
    */
@@ -270,6 +275,7 @@ class ItemsClass extends Component<Props, {}> {
                 icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
                 key={actionIndex}
                 onClick={action.onClick.bind(this, item)}
+                size={action.size}
               />
             ))}
             { this.isSelectable() && (
@@ -346,7 +352,9 @@ class ItemsClass extends Component<Props, {}> {
     }
 
     return (
-      <Card.Group>
+      <Card.Group
+        itemsPerRow={this.props.itemsPerRow}
+      >
         { _.map(this.props.items, this.renderCard.bind(this)) }
       </Card.Group>
     );
@@ -403,6 +411,7 @@ class ItemsClass extends Component<Props, {}> {
               key={actionIndex}
               icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
               onClick={action.onClick.bind(this, item)}
+              size={action.size}
             />
           ))}
         </Item.Content>

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

@@ -9,11 +9,6 @@ import useDataList, { SORT_ASCENDING, SORT_DESCENDING, type Props as DataListPro
 import './ListTable.css';
 
 type Props = DataListProps & DataTableProps & {
-  /**
-   * If true, columns can be shown/hidden by the user.
-   */
-  configurable?: boolean,
-
   /**
    * The name of the default sort column.
    */

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",

packages/storybook/src/semantic-ui/AssociatedDropdown.stories.js

@@ -427,3 +427,41 @@ export const FormField = () => (
     </Form.Input>
   </Form>
 );
+
+export const CustomButtons = () => (
+  <AssociatedDropdown
+    buttons={[{
+      name: 'edit',
+      icon: 'edit'
+    }, {
+      basic: false,
+      color: 'orange',
+      name: 'add',
+      icon: 'coffee'
+    }, {
+      name: 'clear',
+      content: 'Clear Value!'
+    }]}
+    collectionName='items'
+    modal={{
+      component: AddModal,
+      props: {
+        onInitialize: () => Promise.resolve({ })
+      },
+      onSave: () => {
+        action('save')();
+        return Promise.resolve({});
+      }
+    }}
+    onSearch={(search) => Api.onLoad({ items, search, sort_by: 'text' })}
+    onSelection={action('selection')}
+    placeholder={text('Placeholder', 'Search')}
+    renderOption={(item) => ({
+      key: item.id,
+      value: item.id,
+      text: item.company,
+      description: item.country
+    })}
+    upward={boolean('Open upward', false)}
+  />
+);

packages/storybook/src/semantic-ui/EmbeddedList.stories.js

@@ -228,3 +228,14 @@ export const TabbedModalConfig = useDragDrop(() => {
     </Container>
   );
 });
+
+export const NoColumnSelector = useDragDrop(() => (
+  <EmbeddedList
+    actions={actions}
+    configurable={false}
+    onDelete={action('delete')}
+    columns={columns}
+    items={items}
+    showRecordCount
+  />
+));