@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -7,8 +7,14 @@ import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import { Icon } from '@plone/volto/components';
+import editSVG from '@plone/volto/icons/editing.svg';
+import { Icon, ModalForm, Toast } from '@plone/volto/components';
+import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { messages } from '@plone/volto/helpers';
+import { toast } from 'react-toastify';
 
 /**
  * UsersControlpanelUser class.
@@ -43,9 +49,14 @@ class RenderUsers extends Component {
    */
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      user: {},
+    };
     this.onChange = this.onChange.bind(this);
+    this.onEditUserError = this.onEditUserError.bind(this);
+    this.onEditUserSubmit = this.onEditUserSubmit.bind(this);
   }
+
   /**
    * @param {*} event
    * @param {*} { value }
@@ -53,9 +64,52 @@ class RenderUsers extends Component {
    */
 
   onChange(event, { value }) {
-    const [user, role] = value.split('.');
+    const [user, role] = value.split('&role=');
     this.props.updateUser(user, role);
   }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.updateRequest.loading &&
+      this.props.updateRequest.loaded &&
+      this.state?.user?.id === this.props?.user?.id
+    ) {
+      this.setState({ user: {} });
+      this.props.listUsers();
+      return toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.success)}
+          content={this.props.intl.formatMessage(messages.updateUserSuccess)}
+        />,
+      );
+    }
+  }
+
+  onEditUserSubmit(data, callback) {
+    // Do not handle groups and roles in this form
+    delete data.groups;
+    delete data.roles;
+    this.props.updateUserData(data.id, data);
+  }
+
+  onEditUserError() {
+    return toast.error(
+      <Toast
+        error
+        title={this.props.intl.formatMessage(messages.error)}
+        content={this.props.intl.formatMessage(
+          messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
+        )}
+      />,
+    );
+  }
+
+  onClickEdit(props) {
+    const { formData } = props;
+    this.setState({ user: { ...formData } });
+  }
+
   /**
    * Render method.
    * @method render
@@ -67,7 +121,8 @@ class RenderUsers extends Component {
         <Table.Cell className="fullname">
           {this.props.user.fullname
             ? this.props.user.fullname
-            : this.props.user.username}
+            : this.props.user.username}{' '}
+          ({this.props.user.username})
         </Table.Cell>
         {this.props.roles.map((role) => (
           <Table.Cell key={role.id}>
@@ -83,7 +138,7 @@ class RenderUsers extends Component {
               <Checkbox
                 checked={this.props.user.roles.includes(role.id)}
                 onChange={this.onChange}
-                value={`${this.props.user.id}.${role.id}`}
+                value={`${this.props.user.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>
@@ -91,7 +146,20 @@ class RenderUsers extends Component {
         <Table.Cell textAlign="right">
           <Dropdown icon="ellipsis horizontal">
             <Dropdown.Menu className="left">
+              {this.props.userschema && (
+                <Dropdown.Item
+                  id="edit-user-button"
+                  onClick={() => {
+                    this.onClickEdit({ formData: this.props.user });
+                  }}
+                  value={this.props.user['@id']}
+                >
+                  <Icon name={editSVG} size="15px" />
+                  <FormattedMessage id="Edit" defaultMessage="Edit" />
+                </Dropdown.Item>
+              )}
               <Dropdown.Item
+                id="delete-user-button"
                 onClick={this.props.onDelete}
                 value={this.props.user['@id']}
               >
@@ -101,9 +169,31 @@ class RenderUsers extends Component {
             </Dropdown.Menu>
           </Dropdown>
         </Table.Cell>
+        {Object.keys(this.state.user).length > 0 &&
+          this.props.userschema.loaded && (
+            <ModalForm
+              className="modal"
+              onSubmit={this.onEditUserSubmit}
+              submitError={this.state.editUserError}
+              formData={this.state.user}
+              onCancel={() => this.setState({ user: {} })}
+              title={this.props.intl.formatMessage(
+                messages.updateUserFormTitle,
+              )}
+              loading={this.props.updateRequest.loading}
+              schema={this.props.userschema.userschema}
+            />
+          )}
       </Table.Row>
     );
   }
 }
-
-export default injectIntl(RenderUsers);
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      updateRequest: state.users?.update,
+    }),
+    { updateUserData: updateUser },
+  ),
+)(RenderUsers);

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx

@@ -9,7 +9,7 @@ import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Container, Segment } from 'semantic-ui-react';
+import { Segment } from 'semantic-ui-react';
 import { Helmet, messages } from '@plone/volto/helpers';
 import {
   getControlpanel,
@@ -63,7 +63,7 @@ const UserGroupMembershipPanel = () => {
 
   return (
     <>
-      <Container className="users-control-panel">
+      <div className="users-control-panel">
         <Helmet title={intl.formatMessage(messages.usergroupmemberbership)} />
         <Segment.Group raised>
           <Segment className="primary">
@@ -106,7 +106,7 @@ const UserGroupMembershipPanel = () => {
             </Segment>
           )}
         </Segment.Group>
-      </Container>
+      </div>
 
       {__CLIENT__ && (
         <Portal node={document.getElementById('toolbar')}>

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -9,8 +9,6 @@ import { listGroups } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
-import add from '@plone/volto/icons/add.svg';
-import remove from '@plone/volto/icons/remove.svg';
 import down_key from '@plone/volto/icons/down-key.svg';
 
 const ListingTemplate = ({
@@ -116,7 +114,7 @@ const ListingTemplate = ({
     }
   }, [dispatch, query_group, show_matrix_options, groups_filter]);
 
-  const onSelectOptionHandler = (item, selectedvalue, checked, singleClick) => {
+  const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;
     let group = selectedvalue.y;
     let username = selectedvalue.x;
@@ -150,17 +148,14 @@ const ListingTemplate = ({
       });
   };
 
-  const onSelectAllHandler = (mtxoption, checked) => {
-    let elements = document.querySelectorAll(`div.checkbox_${mtxoption} input`);
-    let identifier;
+  const onSelectAllHandler = (group, items_ids, checked) => {
     let usersgroupmapping = {};
-    elements.forEach((element) => {
-      identifier = element.name.split('_-_');
-      usersgroupmapping[identifier[1]] = checked ? true : false;
+    items_ids.forEach((el) => {
+      usersgroupmapping[el] = checked ? true : false;
     });
 
     dispatch(
-      updateGroup(identifier[2], {
+      updateGroup(group, {
         users: usersgroupmapping,
       }),
     )
@@ -188,93 +183,68 @@ const ListingTemplate = ({
     <div className="administration_matrix">
       {matrix_options && matrix_options?.length > 0 && (
         <div className="label-options">
-          {matrix_options?.map((matrix_option) => (
-            <div
-              className="label-options-label inclined"
-              key={matrix_option.value}
-            >
-              <div>
-                <span className="label">{matrix_option.label}</span>
+          <div className="target-labels">
+            <div>
+              <h3>{items.length} users</h3>
+            </div>
+            <div>
+              {matrix_options?.map((matrix_option) => (
+                <div
+                  className="label-options-label inclined"
+                  key={matrix_option.value}
+                >
+                  <div>
+                    <span className="label">{matrix_option.label}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="listing-row selectall" key="selectall">
+            <div className="listing-item">
+              <div />
+              <div className="matrix_options">
+                {matrix_options?.map((matrix_option) => (
+                  <div key={matrix_option.value}>
+                    <Checkbox
+                      className="toggle-target"
+                      defaultChecked={false}
+                      onChange={(event, { checked }) =>
+                        onSelectAllHandler(
+                          matrix_option.value,
+                          items.map((el) => el.id),
+                          checked,
+                        )
+                      }
+                    />
+                  </div>
+                ))}
               </div>
             </div>
-          ))}
+          </div>
         </div>
       )}
 
       <div className="items">
         {items.length > 0 ? (
           <>
-            <div className="listing-row selectall" key="selectall">
-              <div className="listing-item">
-                <div />
-                <div className="matrix_options">
-                  {matrix_options?.map((matrix_option) => (
-                    <div key={matrix_option.value}>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, true)
-                        }
-                        className="add-button"
-                        aria-label={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={add}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, false)
-                        }
-                        className="remove-button"
-                        aria-label={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={remove}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <h3>{items.length} users </h3>
             {items.map((item) => (
-              <div className="listing-row" key={item.id}>
+              <div
+                className="listing-row"
+                key={item.id}
+                id={`source-row-${item.id}`}
+              >
                 <div className="listing-item" key={item['@id']}>
                   <div>
-                    <h4>
-                      {item.fullname} ({item.id})
+                    <h4 title={`${item.fullname} ${item.id}`}>
+                      {item.fullname?.length > 25
+                        ? item.fullname.slice(0, 22) + '...'
+                        : item.fullname || item.id}
                     </h4>
                   </div>
                   <div className="matrix_options">
                     {matrix_options?.map((matrix_option) => (
                       <Checkbox
-                        name={`member_-_${item.id}_-_${matrix_option.value}`}
                         className={`checkbox_${matrix_option.value}`}
                         key={matrix_option.value}
                         title={matrix_option.title}
@@ -283,7 +253,6 @@ const ListingTemplate = ({
                           .includes(matrix_option.value)}
                         onChange={(event, { checked }) => {
                           onSelectOptionHandler(
-                            item,
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -122,83 +122,87 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
 
   return (
     <div className="controlpanel_matrix">
-      <div className="controlpanel_search_y">
-        <Form className="search_users" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchUser"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchUsers)}
-              onChange={onChangeSearchUsers}
-              onKeyDown={onChangeSearchUsers}
-              id="user-search-input"
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_search_wrapper">
+        <div className="controlpanel_search_y">
+          <Form className="search_users" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchUser"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchUsers)}
+                onChange={onChangeSearchUsers}
+                onKeyDown={onChangeSearchUsers}
+                id="user-search-input"
+              />
+            </Form.Field>
+          </Form>
+        </div>
+        <div className="controlpanel_search_x">
+          <Form className="search_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroup"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroups}
+                onKeyDown={onChangeSearchGroups}
+                id="group-search-input"
+              />
+            </Form.Field>
+            <Form.Field>
+              <Checkbox
+                name="addJoinedGroups"
+                label={intl.formatMessage(messages.addJoinedGroups)}
+                title={intl.formatMessage(messages.addJoinedGroups)}
+                defaultChecked={false}
+                onChange={(event, { checked }) => {
+                  onToggleJoinedGroups(checked);
+                }}
+              />
+            </Form.Field>
+          </Form>
+        </div>
       </div>
-      <div className="controlpanel_search_x">
-        <Form className="search_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroup"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroups}
-              onKeyDown={onChangeSearchGroups}
-              id="group-search-input"
-            />
-          </Form.Field>
-          <Form.Field>
-            <Checkbox
-              name="addJoinedGroups"
-              label={intl.formatMessage(messages.addJoinedGroups)}
-              title={intl.formatMessage(messages.addJoinedGroups)}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onToggleJoinedGroups(checked);
-              }}
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_listing_wrapper">
+        <div className="controlpanel_filter">
+          <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
+          <Form className="search_filter_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroupFilter"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroupsFilter}
+                onKeyDown={onChangeSearchGroupsFilter}
+                id="groupfilter-search-input"
+              />
+            </Form.Field>
+          </Form>
+          {(!many_groups || query_group_filter.length > 1) &&
+            filter_options?.map((filter_option) => (
+              <Form.Field>
+                <Checkbox
+                  name={`filter_option_${filter_option.value}`}
+                  key={filter_option.value}
+                  title={filter_option.label}
+                  label={filter_option.label}
+                  defaultChecked={false}
+                  onChange={(event, { checked }) => {
+                    onSelectOptionHandler(filter_option, checked);
+                  }}
+                />
+              </Form.Field>
+            ))}
+        </div>
+        <UserGroupMembershipListing
+          query_user={query_user}
+          query_group={query_group}
+          groups_filter={groups_filter}
+          add_joined_groups={add_joined_groups}
+          many_users={many_users}
+          many_groups={many_groups}
+        />
       </div>
-      <div className="controlpanel_filter">
-        <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
-
-        <Form className="search_filter_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroupFilter"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroupsFilter}
-              onKeyDown={onChangeSearchGroupsFilter}
-              id="groupfilter-search-input"
-            />
-          </Form.Field>
-        </Form>
-
-        {(!many_groups || query_group_filter.length > 1) &&
-          filter_options?.map((filter_option) => (
-            <Checkbox
-              name={`filter_option_${filter_option.value}`}
-              key={filter_option.value}
-              title={filter_option.label}
-              label={filter_option.label}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onSelectOptionHandler(filter_option, checked);
-              }}
-            />
-          ))}
-      </div>
-      <UserGroupMembershipListing
-        query_user={query_user}
-        query_group={query_group}
-        groups_filter={groups_filter}
-        add_joined_groups={add_joined_groups}
-        many_users={many_users}
-        many_groups={many_groups}
-      />
     </div>
   );
 };