Feat/table (#105)

* feat/table add react-table
* feat/table add protected table route
* feat/table upgrade dependencies
* feat/table support parsing of new properties

Co-authored-by: DeepSource Bot <bot@deepsource.io>

client/src/features/table/tableElements/EditableCell.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { AutoTextArea } from '../../../common/input/AutoTextArea';
+import PropTypes from 'prop-types';
+
+/**
+ * Shamelessly copied from react-table docs
+ * Plugged into chakra-ui editable component
+ * @description Custom editable field for table component
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+export default function EditableCell(props) {
+  const {
+    value: initialValue,
+    row: { index },
+    column: { id },
+    handleUpdate,
+  } = props;
+
+  // We need to keep and update the state of the cell normally
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  // We'll only update the external data when the input is blurred
+  const onBlur = () => {
+    handleUpdate(index, id, value);
+  };
+
+  // If the initialValue is changed external, sync it up with our state
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return (
+    <AutoTextArea
+      size='sm'
+      borderColor='#0001'
+      defaultValue={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      rows={3}
+      transition='none'
+    />
+  );
+}
+
+EditableCell.propTypes = {
+  value: PropTypes.string,
+  row: PropTypes.object,
+  column: PropTypes.object,
+  handleUpdate: PropTypes.func,
+};

client/src/features/table/tableElements/PlaybackIcon.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Tooltip } from '@chakra-ui/tooltip';
+
+export default function PlaybackIcon(props) {
+  const { state } = props;
+
+  if (state === 'stop') {
+    return (
+      <Tooltip openDelay={300} label='Timer Stopped' shouldWrapChildren>
+        <IoStop />
+      </Tooltip>
+    );
+  }
+
+  if (state === 'start') {
+    return (
+      <Tooltip openDelay={300} label='Timer Playing' shouldWrapChildren>
+        <IoPlay />
+      </Tooltip>
+    );
+  }
+
+  if (state === 'pause') {
+    return (
+      <Tooltip openDelay={300} label='Timer Paused' shouldWrapChildren>
+        <IoPause />
+      </Tooltip>
+    );
+  }
+
+  if (state === 'roll') {
+    return (
+      <Tooltip openDelay={300} label='Timer Rolling' shouldWrapChildren>
+        <IoTimeOutline />
+      </Tooltip>
+    );
+  }
+
+  return '';
+}
+
+PlaybackIcon.propTypes = {
+  state: PropTypes.string,
+};

client/src/features/table/tableElements/SortableCell.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import PropTypes from 'prop-types';
+import styles from '../Table.module.scss';
+
+export default function SortableCell({ column }) {
+  const { key, style, ...restColumn } = column.getHeaderProps();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: column.id,
+  });
+
+  // prevent scaling on drag
+  const cssTransform = {
+    ...transform,
+    scaleX: 1,
+    scaleY: 1,
+  }
+
+  // build drag styles
+  const dragStyle = {
+    transform: CSS.Transform.toString(cssTransform),
+    transition,
+    ...style,
+  };
+
+  return (
+    <th {...restColumn} ref={setNodeRef} style={{...dragStyle}} className={isDragging ? styles.dragging: ''}>
+      <div {...attributes} {...listeners}>
+        <Tooltip label={column.Header} openDelay={300}>
+          {column.render('Header')}
+        </Tooltip>
+      </div>
+      <div {...column.getResizerProps()} className={styles.resizer} />
+    </th>
+  );
+}
+
+SortableCell.propTypes = {
+  column: PropTypes.object.isRequired,
+};

client/src/features/table/tableElements/TableSettings.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button } from '@chakra-ui/button';
+import PropTypes from 'prop-types';
+import style from '../Table.module.scss';
+
+// reusable button styles
+const buttonProps = {
+  colorScheme: 'blue',
+  size: 'sm',
+  variant: 'ghost',
+};
+
+export default function TableSettings(props) {
+  const {
+    columns,
+    handleResetResizing,
+    handleResetReordering,
+    handleResetToggles,
+    handleClearToggles,
+  } = props;
+
+  return (
+    <div className={style.tableSettings}>
+      <div className={style.hSeparator}>Select and order fields to show in table</div>
+      <div className={style.options}>
+        {columns.map((column) => (
+          <label key={column.id}>
+            <input type='checkbox' {...column.getToggleHiddenProps()} /> {column.Header}
+          </label>
+        ))}
+      </div>
+      <div className={style.buttonRow}>
+        <Button onClick={handleResetResizing} {...buttonProps}>
+          Reset Resizing
+        </Button>
+        <Button onClick={handleResetReordering} {...buttonProps}>
+          Reset Reordering
+        </Button>
+        <Button onClick={handleResetToggles} {...buttonProps}>
+          Reset Toggles
+        </Button>
+        <Button onClick={handleClearToggles} {...buttonProps}>
+          Show All
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+TableSettings.propTypes = {
+  columns: PropTypes.array,
+  handleResetResizing: PropTypes.func.isRequired,
+  handleResetReordering: PropTypes.func.isRequired,
+  handleResetToggles: PropTypes.func.isRequired,
+  handleClearToggles: PropTypes.func.isRequired,
+};