Adding select/clear all buttons to group selection in collective assignment creation form.

Author: krulis-martin

src/components/forms/EditAssignmentForm/AssignmentFormGroupsList.js

@@ -4,11 +4,19 @@ import { injectIntl, FormattedMessage } from 'react-intl';
 import { Field } from 'redux-form';
 
 import { CheckboxField } from '../Fields';
-import Icon from '../../icons';
-import Button from '../../widgets/TheButton';
+import Icon, { SquareIcon } from '../../icons';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import { getGroupCanonicalLocalizedName } from '../../../helpers/localizedData.js';
 
-const AssignmentFormGroupsList = ({ groups, groupsAccessor, isOpen, toggleOpenState, intl: { locale } }) => (
+const AssignmentFormGroupsList = ({
+  groups,
+  groupsAccessor,
+  isOpen,
+  toggleOpenState,
+  selectAllGroupsHandler,
+  clearAllGroupsHandler,
+  intl: { locale },
+}) => (
   <>
     {groups.map((group, i) => (
       <Field
@@ -20,21 +28,35 @@ const AssignmentFormGroupsList = ({ groups, groupsAccessor, isOpen, toggleOpenSt
     ))}
 
     <div className="text-center">
-      {toggleOpenState !== null && (
-        <Button size="xs" variant="primary" onClick={toggleOpenState}>
-          {isOpen ? (
-            <span>
-              <Icon icon="minus-square" gapRight={2} />
-              <FormattedMessage id="app.multiAssignForm.showMyGroups" defaultMessage="Show My Groups Only" />
-            </span>
-          ) : (
-            <span>
-              <Icon icon="plus-square" gapRight={2} />
-              <FormattedMessage id="app.multiAssignForm.showAllGroups" defaultMessage="Show All Groups" />
-            </span>
-          )}
-        </Button>
-      )}
+      <TheButtonGroup>
+        {Boolean(selectAllGroupsHandler) && (
+          <Button onClick={selectAllGroupsHandler} variant="primary" size="sm">
+            <SquareIcon checked gapRight={2} />
+            <FormattedMessage id="generic.selectAll" defaultMessage="Select All" />
+          </Button>
+        )}
+        {Boolean(clearAllGroupsHandler) && (
+          <Button onClick={clearAllGroupsHandler} variant="primary" size="sm">
+            <SquareIcon gapRight={2} />
+            <FormattedMessage id="generic.clearAll" defaultMessage="Clear All" />
+          </Button>
+        )}
+        {toggleOpenState !== null && (
+          <Button size="sm" variant="secondary" onClick={toggleOpenState}>
+            {isOpen ? (
+              <span>
+                <Icon icon="minus-square" gapRight={2} />
+                <FormattedMessage id="app.multiAssignForm.showMyGroups" defaultMessage="Show My Groups Only" />
+              </span>
+            ) : (
+              <span>
+                <Icon icon="plus-square" gapRight={2} />
+                <FormattedMessage id="app.multiAssignForm.showAllGroups" defaultMessage="Show All Groups" />
+              </span>
+            )}
+          </Button>
+        )}
+      </TheButtonGroup>
     </div>
     <hr />
   </>
@@ -45,6 +67,8 @@ AssignmentFormGroupsList.propTypes = {
   groupsAccessor: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   toggleOpenState: PropTypes.func,
+  selectAllGroupsHandler: PropTypes.func,
+  clearAllGroupsHandler: PropTypes.func,
   intl: PropTypes.object.isRequired,
 };
 

src/components/forms/EditAssignmentForm/EditAssignmentForm.js

@@ -294,6 +294,41 @@ class EditAssignmentForm extends Component {
     this.props.change('maxPointsBeforeSecondDeadline', maxPointsBeforeSecondDeadline);
   };
 
+  selectAllGroups = () => {
+    this.clearAllGroups(); // clears really all
+
+    const {
+      change,
+      groups,
+      userId,
+      groupsAccessor,
+      intl: { locale },
+    } = this.props;
+
+    // checks only those visible
+    const visibleGroups = this.state.open
+      ? getAllGroups(groups, groupsAccessor, locale)
+      : getUserGroups(groups, userId, groupsAccessor, locale);
+
+    visibleGroups.forEach(group => {
+      change(`groups.id${group.id}`, true);
+    });
+  };
+
+  clearAllGroups = () => {
+    const {
+      change,
+      groups,
+      groupsAccessor,
+      intl: { locale },
+    } = this.props;
+
+    const visibleGroups = getAllGroups(groups, groupsAccessor, locale);
+    visibleGroups.forEach(group => {
+      change(`groups.id${group.id}`, false);
+    });
+  };
+
   /**
    * Wraps the onSubmit callback passed from the parent component.
    * (note that submitHandler in which this function is used is redux-form internal routine to handle submits)
@@ -376,6 +411,8 @@ class EditAssignmentForm extends Component {
                 ? this.toggleOpenState
                 : null
             }
+            selectAllGroupsHandler={this.selectAllGroups}
+            clearAllGroupsHandler={this.clearAllGroups}
           />
         )}