@performant-software/semantic-components 0.5.5 → 0.5.6

package/build/main.css

@@ -215,6 +215,10 @@
   font-weight: bold;
 }
 
+.list-table .table-container {
+  margin-top: 20px;
+}
+
 .date-input.ui.icon.input > i.icon.right {
   cursor: pointer;
   pointer-events: inherit;
@@ -488,10 +492,6 @@ div.react-calendar {
   z-index: 999;
 }
 
-.list-table .table-container {
-  margin-top: 20px;
-}
-
 .login-modal .ui.grid > .column > .row {
   margin: 15px 150px 0px 150px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "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.5",
+    "@performant-software/shared-components": "^0.5.6",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -32,7 +32,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.5",
+    "@performant-software/webpack-config": "^0.5.6",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",

package/src/index.js

@@ -16,6 +16,7 @@ export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
 export { default as DataView } from './components/DataView';
+export { default as DatabaseView } from './components/DatabaseView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';

package/types/components/AccordionList.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import { Timer, Utility } from '@performant-software/shared-components';
+import { Object as ObjectUtils, Timer } from '@performant-software/shared-components';
 import React, { Component } from 'react';
 import {
   Button,
@@ -154,7 +154,7 @@ class AccordionList extends Component<Props, State> {
     let copy;
     if (this.props.onCopy) {
       copy = this.props.onCopy(selectedItem);
-      if (Utility.isPromise(copy)) {
+      if (ObjectUtils.isPromise(copy)) {
         copy.then((item) => {
           this.setState({ selectedItem: item, modalAdd: true });
         });

package/types/components/AccordionSelector.js.flow

@@ -15,6 +15,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import EditModal from './EditModal';
+import ModalContext from '../context/ModalContext';
 import NestedAccordion from './NestedAccordion';
 import SelectizeHeader from './SelectizeHeader';
 import Toaster from './Toaster';
@@ -39,7 +40,6 @@ type Props = {
   renderItem: (item: any) => string | Element<any>,
   selectedItems?: Array<any>,
   showToggle: (item: any) => boolean,
-  t: (key: string) => string,
   title?: string
 };
 
@@ -187,93 +187,100 @@ class AccordionSelector extends Component<Props, State> {
    */
   render() {
     return (
-      <Modal
-        className='accordion-selector'
-        open={this.props.open}
-        size='small'
-      >
-        <Modal.Header>
-          <Grid
-            columns={2}
-            verticalAlign='middle'
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className='accordion-selector'
+            mountNode={mountNode}
+            open={this.props.open}
+            size='small'
           >
-            <Grid.Column
-              textAlign='left'
-            >
-              <Header
-                content={this.props.title
-                  ? this.props.title
-                  : i18n.t('AccordionSelector.title')}
+            <Modal.Header>
+              <Grid
+                columns={2}
+                verticalAlign='middle'
+              >
+                <Grid.Column
+                  textAlign='left'
+                  width={7}
+                >
+                  <Header
+                    content={this.props.title
+                      ? this.props.title
+                      : i18n.t('AccordionSelector.title')}
+                  />
+                </Grid.Column>
+                <Grid.Column
+                  textAlign='right'
+                  width={9}
+                >
+                  <Input
+                    aria-label='Search'
+                    autoFocus
+                    icon='search'
+                    onKeyDown={Timer.clearSearchTimer.bind(this)}
+                    onKeyUp={Timer.setSearchTimer.bind(this, this.onSearch.bind(this))}
+                    onChange={this.onSearchChange.bind(this)}
+                    size='mini'
+                    type='text'
+                    value={this.state.searchQuery}
+                  />
+                  { this.renderAddButton() }
+                </Grid.Column>
+              </Grid>
+            </Modal.Header>
+            <Modal.Content>
+              <SelectizeHeader
+                isSelected={(item) => this.state.selectedItem === item}
+                items={this.state.selectedItems}
+                onItemClick={this.onItemSelection.bind(this)}
+                renderItem={this.props.renderItem.bind(this)}
               />
-            </Grid.Column>
-            <Grid.Column
-              textAlign='right'
-            >
-              <Input
-                autoFocus
-                icon='search'
-                onKeyDown={Timer.clearSearchTimer.bind(this)}
-                onKeyUp={Timer.setSearchTimer.bind(this, this.onSearch.bind(this))}
-                onChange={this.onSearchChange.bind(this)}
-                size='mini'
-                type='text'
-                value={this.state.searchQuery}
+              <NestedAccordion
+                getChildItems={this.props.getChildItems.bind(this, this.state.items)}
+                onItemClick={this.onItemClick.bind(this)}
+                onItemToggle={this.onItemToggle.bind(this)}
+                renderItem={this.props.renderItem.bind(this)}
+                renderRight={this.renderRight.bind(this)}
+                rootItems={this.props.getRootItems(this.state.items)}
+                showToggle={this.props.showToggle.bind(this)}
               />
-              { this.renderAddButton() }
-            </Grid.Column>
-          </Grid>
-        </Modal.Header>
-        <Modal.Content>
-          <SelectizeHeader
-            isSelected={(item) => this.state.selectedItem === item}
-            items={this.state.selectedItems}
-            onItemClick={this.onItemSelection.bind(this)}
-            renderItem={this.props.renderItem.bind(this)}
-          />
-          <NestedAccordion
-            getChildItems={this.props.getChildItems.bind(this, this.state.items)}
-            onItemClick={this.onItemClick.bind(this)}
-            onItemToggle={this.onItemToggle.bind(this)}
-            renderItem={this.props.renderItem.bind(this)}
-            renderRight={this.renderRight.bind(this)}
-            rootItems={this.props.getRootItems(this.state.items)}
-            showToggle={this.props.showToggle.bind(this)}
-          />
-          { this.renderAddModal() }
-          { this.state.saved && (
-            <Toaster
-              onDismiss={() => this.setState({ saved: false })}
-              type={Toaster.MessageTypes.positive}
-            >
-              <Message.Header
-                content={i18n.t('Common.messages.save.header')}
-              />
-              <Message.Content
-                content={i18n.t('Common.messages.save.content')}
-              />
-            </Toaster>
-          )}
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            onClick={this.props.onSave.bind(this, this.state.selectedItems)}
-            primary
-            size='medium'
-            type='submit'
-          >
-            { this.props.t('Common.buttons.save') }
-          </Button>
-          <Button
-            inverted
-            onClick={this.props.onClose.bind(this)}
-            primary
-            size='medium'
-            type='button'
-          >
-            { this.props.t('Common.buttons.cancel') }
-          </Button>
-        </Modal.Actions>
-      </Modal>
+              { this.renderAddModal() }
+              { this.state.saved && (
+                <Toaster
+                  onDismiss={() => this.setState({ saved: false })}
+                  type={Toaster.MessageTypes.positive}
+                >
+                  <Message.Header
+                    content={i18n.t('Common.messages.save.header')}
+                  />
+                  <Message.Content
+                    content={i18n.t('Common.messages.save.content')}
+                  />
+                </Toaster>
+              )}
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                onClick={this.props.onSave.bind(this, this.state.selectedItems)}
+                primary
+                size='medium'
+                type='submit'
+              >
+                { i18n.t('Common.buttons.save') }
+              </Button>
+              <Button
+                basic
+                onClick={this.props.onClose.bind(this)}
+                size='medium'
+                type='button'
+              >
+                { i18n.t('Common.buttons.cancel') }
+              </Button>
+            </Modal.Actions>
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }
 
@@ -291,7 +298,7 @@ class AccordionSelector extends Component<Props, State> {
       <Button
         basic
         className='add-button'
-        content={this.props.t('Common.buttons.add')}
+        content={i18n.t('Common.buttons.add')}
         icon='plus'
         onClick={() => this.setState({ modalAdd: true })}
       />

package/types/components/ColorPickerModal.js.flow

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { SketchPicker } from 'react-color';
 import { Button, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './ColorPickerModal.css';
 
 type Props = {
@@ -38,38 +39,42 @@ class ColorPickerModal extends Component<Props, State> {
    */
   render() {
     return (
-      <Modal
-        className='color-picker-modal'
-        onClose={this.props.onClose.bind(this)}
-        open={this.props.open}
-      >
-        <Modal.Content>
-          <SketchPicker
-            color={this.state.selectedColor}
-            disableAlpha={false}
-            onChangeComplete={(selectedColor) => this.setState({ selectedColor })}
-          />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            onClick={this.props.onSave.bind(this, this.state.selectedColor)}
-            primary
-            size='medium'
-            type='submit'
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className='color-picker-modal'
+            mountNode={mountNode}
+            onClose={this.props.onClose.bind(this)}
+            open={this.props.open}
           >
-            { i18n.t('Common.buttons.save') }
-          </Button>
-          <Button
-            inverted
-            onClick={this.props.onClose.bind(this)}
-            primary
-            size='medium'
-            type='button'
-          >
-            { i18n.t('Common.buttons.cancel') }
-          </Button>
-        </Modal.Actions>
-      </Modal>
+            <Modal.Content>
+              <SketchPicker
+                color={this.state.selectedColor}
+                disableAlpha={false}
+                onChangeComplete={(selectedColor) => this.setState({ selectedColor })}
+              />
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                onClick={this.props.onSave.bind(this, this.state.selectedColor)}
+                primary
+                size='medium'
+                type='submit'
+              >
+                { i18n.t('Common.buttons.save') }
+              </Button>
+              <Button
+                basic
+                onClick={this.props.onClose.bind(this)}
+                size='medium'
+                type='button'
+              >
+                { i18n.t('Common.buttons.cancel') }
+              </Button>
+            </Modal.Actions>
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }
 }

package/types/components/DataTableColumnSelector.js.flow

@@ -43,6 +43,17 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
       };
     }
 
+    /**
+     * Reset the columns on the state when the props change.
+     *
+     * @param prevProps
+     */
+    componentDidUpdate(prevProps: Props): * {
+      if (prevProps.columns !== this.props.columns) {
+        this.setState({ columns: this.props.columns });
+      }
+    }
+
     /**
      * Toggles the hidden property for the passed column.
      *

package/types/components/DataView.js.flow

@@ -15,6 +15,7 @@ import DropdownButton from './DropdownButton';
 import i18n from '../i18n/i18n';
 import MenuBar from './MenuBar';
 import MenuSidebar from './MenuSidebar';
+import ModalContext from '../context/ModalContext';
 import useDataList, { SORT_ASCENDING, SORT_DESCENDING } from './DataList';
 import './DataView.css';
 
@@ -362,38 +363,43 @@ const DataView = (props: Props) => {
         )}
       </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
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              centered={false}
+              className='data-view-modal'
+              closeIcon
+              mountNode={mountNode}
+              onClose={() => setSelectedRecord(null)}
+              open
             >
-              { _.map(mergeColumns([selectedRecord]), (column) => (
-                <Grid.Column
-                  as={Form.Field}
-                  key={column.name}
+              <Modal.Header
+                content={i18n.t('DataView.labels.details')}
+              />
+              <Modal.Content>
+                <Grid
+                  columns={3}
+                  doubling
                 >
-                  <span
-                    className='label'
-                  >
-                    { column.label }
-                  </span>
-                  { resolveValue(selectedRecord, column.name) }
-                </Grid.Column>
-              ))}
-            </Grid>
-          </Modal.Content>
-        </Modal>
+                  { _.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>
+          )}
+        </ModalContext.Consumer>
       )}
     </div>
   );

package/types/components/DatabaseView.js.flow

@@ -0,0 +1,126 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import axios from 'axios';
+import _ from 'underscore';
+import ListTable from './ListTable';
+import MenuSidebar from './MenuSidebar';
+
+type Props = {
+  columnCount?: number,
+  title: string,
+  url: string
+};
+
+const DatabaseView = (props: Props) => {
+  const [columns, setColumns] = useState([]);
+  const [selectedTable, setSelectedTable] = useState();
+  const [tables, setTables] = useState([]);
+
+  const menuRef = useRef();
+
+  const service = useMemo(() => ({
+    getColumns: (params) => axios.get(`${props.url}/api/columns`, { params }),
+    getData: (params) => axios.post(`${props.url}/api/search`, params),
+    getTables: () => axios.get(`${props.url}/api/tables`)
+  }), [props.url]);
+
+  const resolveValue = useCallback((column, item) => {
+    let value = item[column.column_name];
+
+    const { data_type: dataType } = column;
+
+    if (value) {
+      switch (dataType) {
+        case 'timestamp without time zone':
+          value = new Date(value).toLocaleDateString();
+          break;
+
+        default:
+        // Value is already set
+      }
+    }
+
+    return value;
+  }, []);
+
+  useEffect(() => {
+    if (service) {
+      service
+        .getTables()
+        .then(({ data }) => {
+          setTables(data);
+          setSelectedTable(_.first(data));
+        });
+    }
+  }, [service]);
+
+  useEffect(() => {
+    if (selectedTable) {
+      service
+        .getColumns({ table_name: selectedTable.table_name })
+        .then(({ data }) => setColumns(data));
+    }
+  }, [selectedTable, service]);
+
+  const test = useMemo(() => _.map(columns, (column, index) => ({
+    name: column.column_name,
+    label: column.column_name,
+    resolve: resolveValue.bind(this, column),
+    sortable: true,
+    hidden: index > props.columnCount
+  })), [columns, resolveValue, props.columnCount]);
+
+  return (
+    <div
+      className='database-view'
+    >
+      <MenuSidebar
+        contextRef={menuRef}
+        header={{
+          content: props.title,
+          inverted: true
+        }}
+        inverted
+        items={[{
+          items: _.map(tables, (table) => ({
+            active: selectedTable === table,
+            content: table.table_name,
+            onClick: () => setSelectedTable(table)
+          }))
+        }]}
+        style={{
+          overflow: 'auto',
+          width: '250px'
+        }}
+      />
+      <div
+        style={{
+          marginLeft: '250px'
+        }}
+      >
+        { selectedTable && (
+          <ListTable
+            collectionName='items'
+            columns={test}
+            onLoad={(params) => service.getData({ ...params, table_name: selectedTable.table_name })}
+            perPageOptions={[10, 25, 50, 100]}
+            searchable
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+DatabaseView.defaultProps = {
+  columnCount: Number.MAX_SAFE_INTEGER
+};
+
+export default DatabaseView;

package/types/components/DropdownMenu.js.flow

@@ -11,7 +11,8 @@ import { Dropdown, Ref } from 'semantic-ui-react';
 
 type Props = {
   children: Node,
-  onClick?: () => void
+  onClick?: () => void,
+  role?: string
 };
 
 const DropdownMenu = (props: Props) => {
@@ -38,6 +39,15 @@ const DropdownMenu = (props: Props) => {
     };
   }, [ref]);
 
+  /**
+   * Sets the "role" aria attribute on the current element if provided.
+   */
+  useEffect(() => {
+    if (ref.current && props.role) {
+      ref.current.setAttribute('role', props.role);
+    }
+  }, [ref, props.role]);
+
   return (
     <Ref
       innerRef={ref}