@plusscommunities/pluss-circles-web-groups 1.0.11-beta.0

package/src/screens/Circles.js

@@ -0,0 +1,388 @@
+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, circleRemoved } from '../actions';
+import { circleActions } from '../apis';
+import { Table } from 'react-bootstrap';
+import FontAwesome from 'react-fontawesome';
+import { values } from '../values.config';
+
+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, onlyCreator) {
+    if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
+      return true;
+    }
+    if (onlyCreator) {
+      return (circle.Creator && circle.Creator.userId === this.props.user.Id) || circle.CreatorId === this.props.user.Id;
+    }
+    return _.some(circle.Audience, (user) => {
+      return user.userId === this.props.user.Id && user.isAdmin;
+    });
+  }
+
+  canAddNew = () => {
+    const { auth } = this.props;
+    return Session.validateAccess(auth.site, values.permission, auth);
+  };
+
+  onAddNew = () => {
+    const { auth } = this.props;
+    if (Session.validateAccess(auth.site, values.permission, auth)) {
+      this.props.history.push(`/${values.featureKey}/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);
+  };
+
+  removeCircle = (circle) => {
+    if (
+      window.confirm(
+        `Are you sure you want to delete that ${values.entityName}? You will no longer be able to access the messages in the ${values.entityName}.`,
+      )
+    ) {
+      this.props.circleRemoved(circle.Id);
+      circleActions
+        .delete(circle.Id)
+        .then((res) => {
+          this.getData();
+        })
+        .catch((res) => {
+          alert('Something went wrong with the request. Please try again.');
+        });
+    }
+  };
+
+  getTypeFilterText = (type) => {
+    if (type === 'private') {
+      return 'Private Message';
+    }
+    return _.capitalize(values.entityName);
+  };
+
+  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={`/${values.featureKey}/${values.entityKey}/${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 className="table-options">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
+              <Link to={`/${values.featureKey}/edit/${circle.Id}`}>
+                <FontAwesome
+                  style={{
+                    fontSize: 20,
+                    padding: 5,
+                    marginLeft: 12,
+                    cursor: 'pointer',
+                  }}
+                  name="pencil"
+                />
+              </Link>
+            )}
+            {this.validateCircleAdmin(circle, true) && !circle.IsPrivate && (
+              <a
+                onClick={() => {
+                  this.removeCircle(circle);
+                }}
+              >
+                <FontAwesome
+                  style={{
+                    fontSize: 20,
+                    padding: 5,
+                    marginLeft: 12,
+                    cursor: 'pointer',
+                  }}
+                  name="minus-circle"
+                />
+              </a>
+            )}
+          </div>
+        </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={_.capitalize(values.entityName)}
+          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 ${_.upperCase(values.entityName)}`} />}
+        </Components.Header>
+        <div className="pageContainer paddingVertical-20 paddingHorizontal-40">
+          <Components.Text type="h1" className="">
+            {values.textFeatureTitle}
+          </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[values.reducerKey];
+  const { auth } = state;
+
+  return {
+    circles,
+    auth,
+    user: Helper.getUserFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, { circlesLoaded, circleRemoved })(Circles);

package/src/values.config.default.js

@@ -0,0 +1,35 @@
+const values = {
+  featureKey: 'circles',
+  entityKey: 'circle',
+  entityName: 'circle',
+  serviceKey: 'circles',
+  permission: 'circles',
+  menuIcon: 'circle-o',
+  isFontAwesome: true,
+
+  reducerKey: 'circles',
+
+  actionCircleKey: 'CIRCLE',
+
+  textFeatureTitle: 'Circles',
+  textAddMenuTitle: 'Circle',
+  textEmptyGroups: "You aren't in any Circles",
+  textEmptyPeople: 'Contacts will show here',
+
+  componentCircles: 'Circles',
+  componentAddCircle: 'AddCircle',
+  componentCircle: 'Circle',
+
+  inviteKey: 'circleInvite',
+  messageKey: 'circleMessage',
+  chatRoute: 'circleChat',
+  updateKeyUserCircles: 'userCircles',
+  allowPublicKey: 'circleAllowPublicCircles',
+  allowPublicKeyDefault: false,
+
+  settings: {
+    allowAnyCreate: false,
+  },
+};
+
+export { values };

package/src/values.config.groups.js

@@ -0,0 +1,35 @@
+const values = {
+  featureKey: 'groups',
+  entityKey: 'group',
+  entityName: 'group',
+  serviceKey: 'groups',
+  permission: 'groups',
+  menuIcon: 'comments',
+  isFontAwesome: true,
+
+  reducerKey: 'groups',
+
+  actionCircleKey: 'GROUP',
+
+  textFeatureTitle: 'Groups',
+  textAddMenuTitle: 'Group',
+  textEmptyGroups: "You aren't in any Groups",
+  textEmptyPeople: 'Contacts will show here',
+
+  componentCircles: 'Groups',
+  componentAddCircle: 'AddGroup',
+  componentCircle: 'Group',
+
+  inviteKey: 'groupInvite',
+  messageKey: 'groupMessage',
+  chatRoute: 'groupChat',
+  updateKeyUserCircles: 'userGroups',
+  allowPublicKey: 'groupAllowPublicGroups',
+  allowPublicKeyDefault: true,
+
+  settings: {
+    allowAnyCreate: true,
+  },
+};
+
+export { values };

package/src/values.config.js

@@ -0,0 +1,35 @@
+const values = {
+  featureKey: 'groups',
+  entityKey: 'group',
+  entityName: 'group',
+  serviceKey: 'groups',
+  permission: 'groups',
+  menuIcon: 'comments',
+  isFontAwesome: true,
+
+  reducerKey: 'groups',
+
+  actionCircleKey: 'GROUP',
+
+  textFeatureTitle: 'Groups',
+  textAddMenuTitle: 'Group',
+  textEmptyGroups: "You aren't in any Groups",
+  textEmptyPeople: 'Contacts will show here',
+
+  componentCircles: 'Groups',
+  componentAddCircle: 'AddGroup',
+  componentCircle: 'Group',
+
+  inviteKey: 'groupInvite',
+  messageKey: 'groupMessage',
+  chatRoute: 'groupChat',
+  updateKeyUserCircles: 'userGroups',
+  allowPublicKey: 'groupAllowPublicGroups',
+  allowPublicKeyDefault: true,
+
+  settings: {
+    allowAnyCreate: true,
+  },
+};
+
+export { values };