Merge pull request #342 from dotkom/fix-fix-pet-reeves

Converted the table to react

client/src/components/Admin/Users/List/List.css

@@ -1,32 +1,57 @@
-table.list {
-  width: 100%;
+.table {
   margin-top: 1rem;
-  border-collapse: collapse;
 }
 
-.list th {
-  border-bottom: 1px solid #9597b1;
-  font-weight: normal;
-  padding: 0.25rem 0.25rem;
+.center {
+  display: flex;
+  justify-content: center;
 }
 
-.list td {
-  padding: 0.5rem 0.25rem;
-  border-bottom: 1px solid #dbdce0;
+.tableCell {
+  display: flex;
+  align-items: center;
+  margin-left: 0.25rem;
 }
 
-.list tr:nth-child(even) td {
-  background: #f9f9f9;
+.action {
+  display: inline;
+  font-size: 2rem;
+  font-weight: bold;
+  color: #CCC;
+  padding: 0;
+  background: none;
+  border: none;
 }
 
-.left {
-  text-align: left;
+.action:last-child {
+  margin-left: 0.5rem;
 }
 
-.center {
-  text-align: center;
+.action:focus {
+  outline: none;
+}
+
+.success {
+  composes: icon success from 'css/flaticon.css';
+}
+
+.close {
+  composes: icon close from 'css/flaticon.css';
+}
+
+.unavailable {
+  composes: icon lock from 'css/flaticon.css';
+}
+
+.toggle.success {
+  color: #258573;
+}
+
+.toggle.close {
+  color: #c5493c;
 }
 
-.right {
-  text-align: right;
+.canNotVote {
+  color: #b73b3b;
+  font-weight: bold;
 }

client/src/components/Admin/Users/List/Table.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getPermissionDisplay } from 'common/auth/permissions';
+import classNames from 'classnames';
+import moment from 'moment';
+import css from './List.css';
+import { ToggleCanVoteContainer } from '../ToggleCanVote';
+
+export const RegisteredIndicator = props =>
+  <div
+    className={classNames(css.action,
+      {
+        [css.success]: props.value.isRegistered,
+        [css.close]: !props.value.isRegistered,
+        [css.toggle]: props.value.isRegistered,
+      },
+    )}
+    title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
+  >{props.value.isRegistered}</div>;
+
+RegisteredIndicator.propTypes = {
+  value: PropTypes.shape({
+    registeredDate: PropTypes.string,
+    isRegistered: PropTypes.bool,
+  }).isRequired,
+};
+
+export const PermissionDisplay = props =>
+  getPermissionDisplay(props.value);
+
+PermissionDisplay.propTypes = {
+  value: PropTypes.number,
+};
+
+export const ToggleCanVoteIndicator = (props, toggleCanVote) =>
+  <ToggleCanVoteContainer
+    canVote={props.value}
+    id={props.original.id}
+    permissions={props.original.permissions}
+    setPermissions={props.original.setPermissions}
+    toggleCanVote={toggleCanVote}
+  />;
+
+ToggleCanVoteIndicator.propTypes = {
+  value: PropTypes.bool.isRequired,
+  original: PropTypes.shape({
+    id: PropTypes.string,
+    permissions: PropTypes.number,
+    setPermissions: PropTypes.func.isRequired,
+  }).isRequired,
+};

client/src/components/Admin/Users/List/index.js

@@ -4,8 +4,11 @@ import { connect } from 'react-redux';
 import Fuse from 'fuse.js';
 import { CAN_VOTE } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
-import { UserContainer } from '../User';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+import classNames from 'classnames';
 import css from './List.css';
+import { RegisteredIndicator, PermissionDisplay, ToggleCanVoteIndicator } from './Table';
 
 const UserList = ({ users, toggleCanVote }) => {
   const userKeys = Object.keys(users);
@@ -19,42 +22,62 @@ const UserList = ({ users, toggleCanVote }) => {
   const usersRegistered = userKeys
     .filter(u => users[u].completedRegistration)
     .length;
+
+  const data = [...Object.keys(users)
+    .map(key => users[key])
+    .map(user => ({
+      name: user.name,
+      canVote: user.canVote,
+      registered: {
+        registeredDate: user.registered,
+        isRegistered: user.completedRegistration,
+      },
+      id: user.id,
+      permissions: user.permissions,
+      setPermissions: user.setPermissions,
+    }))];
+
+  const columns = [{
+    Header: `Navn (${totalUsers})`,
+    accessor: 'name',
+  }, {
+    Header: `Registrert (${usersRegistered})`,
+    accessor: 'registered',
+    className: css.center,
+    Cell: RegisteredIndicator,
+  }, {
+    Header: `Rettigheter (${usersHasPermsToVote})`,
+    accessor: 'permissions',
+    Cell: PermissionDisplay,
+  }, {
+    Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`,
+    accessor: 'canVote',
+    className: css.center,
+    Cell: props => ToggleCanVoteIndicator(props, toggleCanVote),
+  }];
+
   return (
-    <table className={css.list}>
-      <thead>
-        <tr>
-          <th className={css.left}>Bruker ({totalUsers})</th>
-          <th className={css.right} title="Har fullført oppmøteregistrering">
-            Registrert ({usersRegistered})
-          </th>
-          <th className={css.right} title="(Antall med stemmerett)">
-            Rettigheter ({usersHasPermsToVote})
-          </th>
-          <th className={css.right}>
-            Stemmeberettigelse ({usersCanVote}/{usersHasPermsToVote})
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {Object.keys(users)
-          .sort((a, b) => users[a].name.localeCompare(users[b].name))
-          .map((key) => {
-            const user = users[key];
-            return (<UserContainer
-              name={user.name}
-              canVote={user.canVote}
-              completedRegistration={user.completedRegistration}
-              key={user.id}
-              permissions={user.permissions}
-              registered={user.registered}
-              toggleCanVote={toggleCanVote}
-              id={user.id}
-            />);
-          },
-        )}
-      </tbody>
-    </table>
-  );
+    <ReactTable
+      data={data}
+      columns={columns}
+      className={css.table}
+      resizable={false}
+      previousText="Forrige"
+      nextText="Neste"
+      loadingText="Laster inn..."
+      noDataText="Ingen rekker funnet"
+      pageText="Side"
+      ofText="av"
+      rowsText="rekker"
+      getTrProps={(state, rowInfo) => ({
+        className: classNames({
+          [css.canNotVote]: !(rowInfo && rowInfo.row.canVote),
+        }),
+      })}
+      getTdProps={() => ({
+        className: css.tableCell,
+      })}
+    />);
 };
 
 UserList.propTypes = {

client/src/components/Admin/Users/User/User.css → client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css

@@ -3,14 +3,6 @@
   font-weight: bold;
 }
 
-.left {
-  composes: left from '../List/List.css';
-}
-
-.right {
-  composes: right from '../List/List.css';
-}
-
 .action {
   display: inline;
   font-size: 2rem;

client/src/components/Admin/Users/ToggleCanVote/index.js

@@ -0,0 +1,98 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { CAN_VOTE } from 'common/auth/permissions';
+import { adminSetPermissions } from 'features/user/actionCreators';
+import Button from '../../../Button';
+import Dialog from '../../../Dialog';
+import css from './ToggleCanVote.css';
+
+class ToggleCanVote extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showToggleCanVoteWarning: false,
+    };
+  }
+
+  canVoteHandler(id, toggleTo) {
+    this.setState({ showToggleCanVoteWarning: false });
+    this.props.setPermissions(id, toggleTo, CAN_VOTE);
+  }
+
+  render() {
+    const { id, canVote, permissions, toggleCanVote } = this.props;
+
+    const successToggle = classNames(
+      css.success,
+      { [css.toggle]: canVote },
+    );
+
+    const closeToggle = classNames(
+      css.close,
+      { [css.toggle]: !canVote },
+    );
+
+    return (
+      <Fragment>
+        <Dialog
+          title="Gi stemmerett"
+          subtitle={'Denne personen er ikke medlem av Online. Ønsker du å ' +
+            'gi dem stemmerett?'}
+          visible={this.state.showToggleCanVoteWarning}
+          onClose={() => this.setState({ showToggleCanVoteWarning: false })}
+        >
+          <p>Dette kan bare gjøres dersom generalforsamlingen vedtar det.</p>
+          <Button
+            background
+            onClick={() => this.canVoteHandler(id, true)}
+          >Bekreft</Button>
+          <Button
+            background
+            onClick={() => this.setState({ showToggleCanVoteWarning: false })}
+          >Avbryt</Button>
+        </Dialog>
+
+        <button
+          className={css.action}
+          onClick={() => (permissions >= CAN_VOTE
+              ? toggleCanVote(id, true)
+              : this.setState({ showToggleCanVoteWarning: true }))}
+        >
+          <div
+            className={permissions >= CAN_VOTE ? successToggle : css.unavailable}
+            title={permissions >= CAN_VOTE
+                ? 'Gi brukeren stemmerett'
+                : 'Brukeren har ikke rett til å få stemmerett.'}
+          />
+        </button>
+        <button
+          className={css.action}
+          onClick={() => toggleCanVote(id, false)}
+        >
+          <div className={closeToggle} title="Fjern brukerens stemmerett" />
+        </button>
+      </Fragment>
+    );
+  }
+}
+
+ToggleCanVote.propTypes = {
+  canVote: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  permissions: PropTypes.number.isRequired,
+  setPermissions: PropTypes.func.isRequired,
+  toggleCanVote: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = ({
+  setPermissions: adminSetPermissions,
+});
+
+export default ToggleCanVote;
+export const ToggleCanVoteContainer = connect(
+  null,
+  mapDispatchToProps,
+)(ToggleCanVote);