Port shuffle groups

packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Group.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { DropTarget } from 'react-dnd'
+
+import classnames from 'classnames'
+
+import Item from './Item'
+
+const groupTarget = {
+  drop: (targetProps, monitor) => {
+    const { column } = monitor.getItem()
+    targetProps.move(
+      column, // id
+      targetProps.groupId // target
+    )
+  },
+}
+
+function collect(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  }
+}
+
+const Group = ({ columns=[], title, connectDropTarget, isOver, children }) =>
+  connectDropTarget(
+    <tr
+      className={ classnames({
+        'bg-light': isOver,
+      }) }
+    >
+      <td style={{ padding: '0.75rem 1.25rem', width: '8rem' }}>
+        <small className="text-muted">{ title }</small>
+      </td>
+      <td className="text-center" style={{ padding: '0.75rem 1.25rem' }}>
+        {
+          children || columns.map((c, i) =>
+            <Item
+              key={ i }
+              column={ c.id }
+              name={ c.name }
+            />
+          )
+        }
+      </td>
+      <td style={{ padding: '0.75rem 1.25rem', width: '8rem' }}>
+      </td>
+    </tr>
+  )
+
+export default DropTarget('item', groupTarget, collect)(Group)

packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Item.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { DragSource } from 'react-dnd'
+
+const itemSource = {
+  beginDrag: ({ column }) => {
+    return { column }
+  },
+}
+
+function collect(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging(),
+  }
+}
+
+const Item = ({ name, connectDragSource, isDragging }) =>
+  connectDragSource(
+    <div
+      className="d-inline-block m-1 mr-2 p-2 px-4 border rounded-pill"
+      style={{
+        opacity: isDragging ? 0.4 : 1,
+        transform: 'translate(0, 0)',
+        cursor: isDragging ? 'grabbing' : 'grab',
+      }}
+    >
+      <span style={{ position: 'relative', top: '1px' }}>
+        { name }
+      </span>
+    </div>
+  )
+
+export default DragSource('item', itemSource, collect)(Item)

packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/index.js

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import { useFormikContext } from 'formik'
+import { groupBy } from 'lodash'
+import { Table } from 'reactstrap'
+
+import Group from './Group'
+import Icon from '../../../../../Icon'
+
+export default () => {
+  const { values, setFieldValue } = useFormikContext()
+  const globalShuffle = values.shuffle
+
+  const groups = groupBy(
+    values.templateParameters.columns
+      .filter(c => c.name !== '')
+      .map((c, i) => ({ ...c, id: i })),
+    'shuffleGroup'
+  )
+  const entries = Object.entries(groups)
+
+  const moveHandler = (key, target) =>
+    setFieldValue(
+      `templateParameters.columns[${ key }]['shuffleGroup']`,
+      target
+    )
+
+  const nextGroup = Math.max(
+    ...Object.keys(groups)
+      .map(Number)
+      .filter(x => !isNaN(x)),
+    0
+  ) + 1
+
+  return (
+    <Table className="border-top-0">
+      <tbody>
+        {/* Default group */}
+        <Group
+          title={ globalShuffle ? "Default" : "Not shuffled" }
+          groupId={ undefined }
+          key={ -1 }
+          columns={ groups['undefined'] }
+          move={ moveHandler }
+          children={
+            entries.length > 0
+              ? undefined
+              : <small className="text-muted font-italic">
+                  (no columns yet)
+                </small>
+          }
+        />
+        {/* Actual shuffled groups */}
+        {
+          entries
+            .filter(([group]) => group !== 'undefined')
+            .map(([group, columns]) =>
+              <Group
+                groupId={ group }
+                key={ group }
+                columns={ columns }
+                move={ moveHandler }
+              />
+          )
+        }
+        {/* Empty group */}
+        <Group
+          groupId={ nextGroup }
+          key={ nextGroup }
+          move={ moveHandler }
+        >
+          <small className="text-muted">
+            <span
+              className="text-right d-inline d-lg-inline-block"
+              style={{ width: '45%' }}
+            >
+              Drag columns into rows
+            </span>
+            <Icon icon="ellipsis-v" className="text-muted m-2" />
+            <span
+              className="text-left d-inline d-lg-inline-block"
+              style={{ width: '45%' }}
+            >
+              to create independently shuffled groups
+            </span>
+          </small>
+        </Group>
+      </tbody>
+    </Table>
+  )
+}

packages/builder/src/components/ComponentOptions/components/Content/Loop/index.js

@@ -1,24 +1,38 @@
 import React from 'react'
 
 import { CardBody } from 'reactstrap'
+import { uniqBy } from 'lodash'
 
 import Card from '../../../../Card'
 import Form from '../../Form'
 
 import SampleWidget from './SampleWidget'
+import ShuffleGroups from './ShuffleGroups'
 
 export default ({ id, data }) =>
   <Form
     id={ id } data={ data }
-    keys={ [ 'sample' ] }
+    keys={ [ 'sample', 'shuffle', 'templateParameters' ] }
   >
     <Card title="Loop" wrapContent={ false }>
       <CardBody>
         <SampleWidget />
       </CardBody>
     </Card>
     <Card title="Further options"
-      /* ... */
+      open={
+        uniqBy(
+          data.templateParameters.columns,
+          c => c.shuffleGroup
+        ).length > 1
+      }
+      collapsable={ true }
+      wrapContent={ false }
+      className="mt-4"
     >
+      <CardBody className="pb-0">
+        <h2 className="h6">Parameter groups</h2>
+      </CardBody>
+      <ShuffleGroups />
     </Card>
   </Form>