canape/frontend/js/components/admins/users.js

import React, { useState } from "react"
import PropTypes from "prop-types"
import { List } from "immutable"

import { Button, Modal } from "react-bootstrap"
import Toggle from "react-bootstrap-toggle";

export const UserList = props => (
  <div className="table-responsive my-2">
    <table className="table table-striped">
    <thead className="table-secondary">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Activated</th>
        <th>Admin</th>
        <th>Polochon URL</th>
        <th>Polochon token</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {props.users.map((el, index) =>
        <User key={index} data={el} updateUser={props.updateUser}/>)}
      </tbody>
    </table>
  </div>
);
UserList.propTypes = {
  users: PropTypes.PropTypes.instanceOf(List),
  updateUser: PropTypes.func,
};

const User = function(props) {
  const polochonConfig = props.data.get("RawConfig").get("polochon");
  const polochonUrl = polochonConfig ? polochonConfig.get("url") : "-";
  const polochonToken = polochonConfig ? polochonConfig.get("token") : "-";
  return (
    <tr>
      <td>{props.data.get("id")}</td>
      <td>{props.data.get("Name")}</td>
      <td><UserActivationStatus activated={props.data.get("Activated")}/></td>
      <td><UserAdminStatus admin={props.data.get("Admin")}/></td>
      <td>{polochonUrl}</td>
      <td>{polochonToken}</td>
      <td>
        <UserEdit
          data={props.data}
          updateUser={props.updateUser}
          polochonUrl={polochonUrl}
          polochonToken={polochonToken}
        />
      </td>
    </tr>
  );
}
User.propTypes = {
  data: PropTypes.object,
  updateUser: PropTypes.func,
};

const UserAdminStatus = props => (
  <span className={props.admin ? "fa fa-check" : "fa fa-times"}></span>
);
UserAdminStatus.propTypes = { admin: PropTypes.bool.isRequired };

const UserActivationStatus = props => (
  <span className={props.activated ? "fa fa-check" : "fa fa-times text-danger"}></span>
);
UserActivationStatus.propTypes = { activated: PropTypes.bool.isRequired };

function UserEdit(props) {
  const [modal, setModal] = useState(false);
  const [admin, setAdmin] = useState(props.data.get("Admin"));
  const [activated, setActivated] = useState(props.data.get("Activated"));
  const [url, setUrl] = useState(props.polochonUrl);
  const [token, setToken] = useState(props.polochonToken);

  const handleSubmit = function(e) {
    if (e) { e.preventDefault(); }
    props.updateUser({
      userId: props.data.get("id"),
      admin: admin,
      activated: activated,
      polochonUrl: url,
      polochonToken: token,
    });
    setModal(false);
  };

  return (
    <span>
      <span className="fa fa-pencil clickable" onClick={() => setModal(true)}></span>
      <Modal show={modal} onHide={() => setModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>
            <i className="fa fa-pencil"></i>
            &nbsp; Edit user - {props.data.get("Name")}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body bsPrefix="modal-body admin-edit-user-modal">
          <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
            <div className="form-group">
              <label>Account status</label>
              <Toggle className="pull-right" on="Activated" off="Deactivated" active={activated}
                offstyle="danger" handlestyle="secondary" onClick={() => setActivated(!activated)}
              />
            </div>
            <div className="form-group">
              <label>Admin status</label>
              <Toggle className="pull-right" on="Admin" off="User" active={admin}
                offstyle="info" handlestyle="secondary" onClick={() => setAdmin(!admin)} />
            </div>
            <div className="form-group">
              <label className="control-label">Polochon URL</label>
              <input className="form-control" value={url} onChange={(e) => setUrl(e.target.value)}/>
            </div>
            <div className="form-group">
              <label className="control-label">Polochon token</label>
              <input className="form-control" value={token} onChange={(e) => setToken(e.target.value)} />
            </div>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="success" onClick={handleSubmit}>Apply</Button>
          <Button onClick={() => setModal(false)}>Close</Button>
        </Modal.Footer>
      </Modal>
    </span>
  );
}
UserEdit.propTypes = {
  data: PropTypes.object,
  updateUser: PropTypes.func,
  polochonUrl: PropTypes.string,
  polochonToken: PropTypes.string,
};