@plusscommunities/pluss-circles-web 1.0.3 → 1.0.8

package/src/screens/Circles.js

@@ -0,0 +1,345 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+import { PlussCore } from '../feature.config';
+import { circlesLoaded } from '../actions';
+import { circleActions } from '../apis';
+import { Table } from 'react-bootstrap';
+import FontAwesome from 'react-fontawesome';
+
+const { Components, Session, Helper } = PlussCore;
+
+class Circles extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userSearch: '',
+    };
+  }
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  getData = () => {
+    const { auth } = this.props;
+    this.setState({ loadingAll: true }, async () => {
+      try {
+        const res = await circleActions.getAll(auth.site);
+        console.log('getData', res.data);
+        this.props.circlesLoaded(res.data);
+        this.setState({ loadingAll: false });
+      } catch (error) {
+        console.error('getData', error);
+        this.setState({ loadingAll: false });
+      }
+    });
+  };
+
+  getCircles() {
+    let result = this.props.circles;
+    if (this.state.selectedTypeFilter) {
+      result = _.filter(result, (circle) => {
+        return this.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
+      });
+    }
+    if (this.state.selectedUserFilter) {
+      result = _.filter(result, (circle) => {
+        return _.some(circle.Audience, (user) => {
+          return user.userId === this.state.selectedUserFilter.userId;
+        });
+      });
+    }
+    return result;
+  }
+
+  getUsers() {
+    let users = [];
+    this.props.circles.forEach((circle) => {
+      circle.Audience.forEach((user) => {
+        users.push(user);
+      });
+    });
+    users = _.sortBy(
+      _.uniqBy(users, (user) => {
+        return user.userId;
+      }),
+      'displayName',
+    );
+    return _.filter(users, (u) => {
+      if (!_.isEmpty(this.state.userSearch)) {
+        return (u.displayName || '').toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
+      }
+      return true;
+    });
+  }
+
+  validateCircleAdmin(circle) {
+    if (Session.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
+      return true;
+    }
+    return _.some(circle.Audience, (user) => {
+      return user.userId === this.props.user.Id && user.isAdmin;
+    });
+  }
+
+  canAddNew = () => {
+    const { auth } = this.props;
+    return Session.validateAccess(auth.site, 'circles', auth);
+  };
+
+  onAddNew = () => {
+    const { auth } = this.props;
+    if (Session.validateAccess(auth.site, 'circles', auth)) {
+      this.props.history.push(`/circles/add`);
+    }
+  };
+
+  openUserFilter = () => {
+    this.setState({
+      userFilterOpen: true,
+    });
+  };
+
+  closeUserFilter = () => {
+    this.setState({
+      userFilterOpen: false,
+    });
+  };
+
+  selectUserFilter = (user) => {
+    this.setState({
+      selectedUserFilter: user,
+      userFilterOpen: false,
+    });
+  };
+
+  removeUserFilter = (event) => {
+    event.stopPropagation();
+    this.setState({
+      selectedUserFilter: null,
+    });
+  };
+
+  openTypeFilter = () => {
+    this.setState({
+      typeFilterOpen: true,
+    });
+  };
+
+  closeTypeFilter = () => {
+    this.setState({
+      typeFilterOpen: false,
+    });
+  };
+
+  selectTypeFilter = (type) => {
+    this.setState({
+      selectedTypeFilter: type,
+      typeFilterOpen: false,
+    });
+  };
+
+  removeTypeFilter = (event) => {
+    event.stopPropagation();
+    this.setState({
+      selectedTypeFilter: null,
+    });
+  };
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  getTypeFilterText = (type) => {
+    if (type === 'private') {
+      return 'Private Message';
+    }
+    return 'Circle';
+  };
+
+  getTitle = (circle) => {
+    if (circle.IsPrivate) {
+      return `PM: ${circle.Audience.map((user) => {
+        return user.displayName;
+      }).join(', ')}`;
+    }
+    return circle.Title;
+  };
+
+  renderRow(circle) {
+    return (
+      <tr key={circle.Id}>
+        <td className="table-TitleColumn">
+          <Link to={`/circles/circle/${circle.Id}`}>{this.getTitle(circle)}</Link>
+        </td>
+        <td>{moment(circle.Changed).local().format('D MMM YYYY')}</td>
+        <td>
+          {circle.Audience.map((user) => {
+            return (
+              <Components.ProfilePic
+                size={30}
+                image={user.profilePic}
+                hoverText={user.displayName}
+                containerClass="circleTableProfilePic"
+              />
+            );
+          })}
+        </td>
+        <td>
+          {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
+            <Link to={`/circles/edit/${circle.Id}`}>
+              <FontAwesome
+                style={{
+                  fontSize: 20,
+                  padding: 5,
+                  marginLeft: 12,
+                  cursor: 'pointer',
+                }}
+                name="pencil"
+              />
+            </Link>
+          )}
+        </td>
+      </tr>
+    );
+  }
+
+  renderFilters() {
+    let userFilter = <Components.Tag className="marginRight-10" onClick={this.openUserFilter} text="User" />;
+    let typeFilter = <Components.Tag className="marginRight-10" onClick={this.openTypeFilter} text="Type" />;
+
+    if (this.state.selectedUserFilter) {
+      userFilter = (
+        <Components.Tag className="marginRight-10" onClick={this.openUserFilter} rightIcon="close" rightClick={this.removeUserFilter}>
+          <Components.UserListing size={15} user={this.state.selectedUserFilter} textClass="tag_text" />
+        </Components.Tag>
+      );
+    }
+    if (this.state.selectedTypeFilter) {
+      typeFilter = (
+        <Components.Tag
+          className="marginRight-10"
+          onClick={this.openTypeFilter}
+          rightIcon="close"
+          rightClick={this.removeTypeFilter}
+          text={this.getTypeFilterText(this.state.selectedTypeFilter)}
+        />
+      );
+    }
+    return (
+      <div className="flex flex-center marginTop-20">
+        <Components.Text type="h5" className="marginRight-20">
+          Filter by
+        </Components.Text>
+        {userFilter}
+        {typeFilter}
+      </div>
+    );
+  }
+
+  renderUserFilterPopup() {
+    if (!this.state.userFilterOpen) {
+      return null;
+    }
+    return (
+      <Components.Popup title="Select User" maxWidth={600} minWidth={400} minHeight={400} hasPadding onClose={this.closeUserFilter}>
+        <Components.GenericInput
+          id="userSearch"
+          type="text"
+          label="Search"
+          placeholder="Enter name"
+          value={this.state.userSearch}
+          onChange={(e) => this.onHandleChange(e)}
+          alwaysShowLabel
+        />
+        {this.getUsers().map((user) => {
+          return (
+            <Components.UserListing
+              key={user.userId}
+              user={user}
+              onClick={() => {
+                this.selectUserFilter(user);
+              }}
+            />
+          );
+        })}
+      </Components.Popup>
+    );
+  }
+
+  renderTypeFilterPopup() {
+    if (!this.state.typeFilterOpen) {
+      return null;
+    }
+    return (
+      <Components.Popup title="Select Type" maxWidth={600} minWidth={400} hasPadding onClose={this.closeTypeFilter}>
+        <Components.Tag
+          onClick={() => {
+            this.selectTypeFilter('circle');
+          }}
+          text="Circle"
+          className="marginRight-10"
+        />
+        <Components.Tag
+          onClick={() => {
+            this.selectTypeFilter('private');
+          }}
+          text="Private Message"
+        />
+      </Components.Popup>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderTypeFilterPopup()}
+        {this.renderUserFilterPopup()}
+        <Components.Header>{this.canAddNew() && <Components.AddButton onClick={this.onAddNew} text="NEW CIRCLE" />}</Components.Header>
+        <div className="pageContainer paddingVertical-20 paddingHorizontal-40">
+          <Components.Text type="h1" className="">
+            Circles
+          </Components.Text>
+          {this.renderFilters()}
+
+          <Table className="plussTable" striped bordered condensed hover style={{ minWidth: '100%' }}>
+            <thead>
+              <tr>
+                <th>Title</th>
+                <th>Last updated</th>
+                <th>Members</th>
+                <th style={{ width: 50 }} />
+              </tr>
+            </thead>
+            <tbody>
+              {this.getCircles().map((circle) => {
+                return this.renderRow(circle);
+              })}
+            </tbody>
+          </Table>
+          <div className="hub_tidioPadding"></div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = {};
+
+const mapStateToProps = (state) => {
+  const { circles } = state.circles;
+  const { auth } = state;
+
+  return {
+    circles,
+    auth,
+    user: Helper.getUserFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, { circlesLoaded })(Circles);