@plusscommunities/pluss-feeds-web 1.0.7 → 1.0.9-beta.0

package/src/components/FeedList.js

@@ -1,685 +0,0 @@
-import React, { Component } from 'react';
-import { Table } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
-import { Link } from 'react-router-dom';
-import FontAwesome from 'react-fontawesome';
-import moment from 'moment';
-import _ from 'lodash';
-import { feedsLoaded, removeFeed, usersLoaded } from '../actions';
-import { PlussCore } from '../feature.config';
-import { feedActions, userActions } from '../apis';
-import { Colours } from '@plusscommunities/pluss-core-web';
-import { values } from '../values.config';
-
-const { Session, Components, Analytics } = PlussCore;
-
-class FeedList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sortColumn: 'created',
-      sortDesc: true,
-      selectedTimeFilter: Analytics.getAnalyticsFilterOptions()[1],
-      selectedTimeFilterStart: null,
-      selectedTimeFilterEnd: null,
-      selectedTimeFilterText: null,
-      selectedUserFilter: null,
-      selectedUserFilterText: null,
-      selectedUser: null,
-      selectedAuthorFilter: null,
-      selectedAuthorFilterText: null,
-      selectedAuthor: null,
-      selectedTypeFilter: null,
-    };
-
-    this.exportColumns = [
-      { label: 'Select All', key: '' },
-      { label: 'System Id', key: 'id' },
-      { label: 'Type', key: 'type' },
-      { label: 'Title', key: 'title' },
-      { label: 'Text', key: 'text' },
-      { label: 'User Name', key: 'userName' },
-      { label: 'User ID', key: 'userId' },
-      { label: 'Author Name', key: 'authorName' },
-      { label: 'Author ID', key: 'authorId' },
-      { label: 'Post Time', key: 'created' },
-    ];
-  }
-
-  UNSAFE_componentWillMount() {
-    Session.checkLoggedIn(this);
-  }
-
-  componentDidMount() {
-    this.getUsers();
-    this.getFeeds();
-  }
-
-  getUsers = async () => {
-    const { auth } = this.props;
-    try {
-      const res = await userActions.fetchUsers(auth.site);
-      if (res.data != null && !_.isEmpty(res.data.results.Items) && res.data.results.Items[0].site === auth.site) {
-        this.props.usersLoaded(res.data.results.Items);
-      }
-    } catch (error) {
-      console.error('getUsers', error);
-    }
-  };
-
-  getFeeds = async () => {
-    const { auth } = this.props;
-    try {
-      const res = await feedActions.getFeedsRecursive(auth.site);
-      if (!_.isEmpty(res) && res[0].site === auth.site) {
-        this.props.feedsLoaded(res);
-      }
-    } catch (error) {
-      console.error('getFeeds', error);
-    }
-  };
-
-  sortByCol = (col) => {
-    const { sortColumn, sortDesc } = this.state;
-    if (sortColumn === col) {
-      this.setState({ sortDesc: !sortDesc });
-    } else {
-      this.setState({ sortColumn: col, sortDesc: false });
-    }
-  };
-
-  onRemoveFeed = async (feed) => {
-    if (window.confirm(values.textAreYouSureYouWantToDelete)) {
-      this.props.removeFeed(feed.id);
-      try {
-        await feedActions.deleteFeed(feed.id);
-        this.getFeeds();
-      } catch (error) {
-        console.log('onRemoveFeed', error);
-        alert('Something went wrong with the request. Please try again.');
-      }
-    }
-  };
-
-  openFilter = (filter) => {
-    this.setState({ filterOpen: filter });
-  };
-
-  closeFilter = () => {
-    this.setState({ filterOpen: null });
-  };
-
-  selectTypeFilter = (filter) => {
-    this.setState({ selectedTypeFilter: filter });
-    this.closeFilter();
-  };
-
-  timeFilterChanged = (selectedTimeFilter) => {
-    this.setState({ selectedTimeFilter });
-  };
-
-  timeFilterDateRangeChanged = (startDate, endDate) => {
-    this.setState({ timeFilterStart: startDate, timeFilterEnd: endDate });
-  };
-
-  isValidTimeFilter = () => {
-    if (!this.state.selectedTimeFilter) return false;
-    if (this.state.selectedTimeFilter.dayCount > 0) return true;
-    return moment(this.state.timeFilterStart).startOf('d').valueOf() < moment(this.state.timeFilterEnd).endOf('d').valueOf();
-  };
-
-  saveTimeFilter = () => {
-    if (!this.isValidTimeFilter()) return;
-
-    let startTime = 0;
-    let endTime = moment().endOf('d').valueOf();
-    let text = '';
-    if (this.state.selectedTimeFilter.dayCount > 0) {
-      startTime = moment().add(-this.state.selectedTimeFilter.dayCount, 'd').startOf('d').valueOf();
-      text = this.state.selectedTimeFilter.text;
-    } else {
-      const startDate = moment(this.state.timeFilterStart).startOf('d');
-      const endDate = moment(this.state.timeFilterEnd).endOf('d');
-      startTime = startDate.valueOf();
-      endTime = endDate.valueOf();
-      text = `${startDate.format('DD/MM/YYYY')}  to  ${endDate.format('DD/MM/YYYY')}`;
-    }
-    this.setState({
-      selectedTimeFilterStart: startTime,
-      selectedTimeFilterEnd: endTime,
-      selectedTimeFilterText: text,
-    });
-    this.closeFilter();
-  };
-
-  removeTimeFilter = () => {
-    this.setState({
-      selectedTimeFilterStart: null,
-      selectedTimeFilterEnd: null,
-      selectedTimeFilterText: null,
-    });
-  };
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onSelectUser = (userKey, user = null) => {
-    this.setState({ [userKey]: user });
-  };
-
-  removeUserFilter = (userKey) => {
-    this.setState({
-      [`${userKey}Filter`]: null,
-      [`${userKey}FilterText`]: null,
-    });
-    // Notifiy user filter reset (for preselecting user in add)
-    if (userKey === 'selectedUser' && this.props.onUserSelected) this.props.onUserSelected('');
-  };
-
-  saveUserFilter = (userKey) => {
-    const selected = this.state[userKey];
-    let userId = '';
-    if (!selected) {
-      this.removeUserFilter(userKey);
-    } else {
-      userId = selected.id || selected.Id;
-      this.setState({
-        [`${userKey}Filter`]: userId,
-        [`${userKey}FilterText`]: selected.displayName,
-        [userKey]: null,
-      });
-      // Notifiy user filter set (for preselecting user in add)
-      if (userKey === 'selectedUser' && this.props.onUserSelected) this.props.onUserSelected(userId);
-    }
-    this.closeFilter();
-  };
-
-  getSource = () => {
-    const { selectedTimeFilterStart, selectedTimeFilterEnd, selectedTypeFilter, selectedUserFilter, selectedAuthorFilter } = this.state;
-    let source = this.props.source;
-
-    // filter by time
-    if (selectedTimeFilterStart && selectedTimeFilterEnd) {
-      // console.log('getSource - time filter', {
-      //   selectedTimeFilterStart: moment(selectedTimeFilterStart).format('D MMM YYYY h:mma'),
-      //   selectedTimeFilterEnd: moment(selectedTimeFilterEnd).format('D MMM YYYY h:mma'),
-      // });
-      source = _.filter(source, (r) => {
-        return r.created >= selectedTimeFilterStart && r.created <= selectedTimeFilterEnd;
-      });
-    }
-
-    // filter by type
-    if (selectedTypeFilter) {
-      // console.log('getSource - type filter', { selectedTypeFilter });
-      source = _.filter(source, (r) => {
-        return r.type === selectedTypeFilter;
-      });
-    }
-
-    // filter by user
-    if (selectedUserFilter) {
-      // console.log('getSource - user filter', { selectedUserFilter });
-      source = _.filter(source, (r) => {
-        return r.user.id === selectedUserFilter;
-      });
-    }
-
-    // filter by author
-    if (selectedAuthorFilter) {
-      // console.log('getSource - author filter', { selectedAuthorFilter });
-      source = _.filter(source, (r) => {
-        return r.author.id === selectedAuthorFilter;
-      });
-    }
-
-    if (!_.isEmpty(this.state.searchTerm)) {
-      source = _.filter(source, (r) => {
-        if (r.jobId && r.jobId === this.state.searchTerm) {
-          return true;
-        }
-        if (r.room && r.room.toLowerCase().indexOf(this.state.searchTerm.toLowerCase()) > -1) {
-          return true;
-        }
-        if (r.title && r.title.toLowerCase().indexOf(this.state.searchTerm.toLowerCase()) > -1) {
-          return true;
-        }
-        return false;
-      });
-    }
-
-    source = _.sortBy(source, (event) => {
-      if (this.state.sortColumn === 'userName') return event.user.displayName;
-      if (this.state.sortColumn === 'authorName') return event.author.displayName;
-      if (this.state.sortColumn !== 'created') return event[this.state.sortColumn];
-      return event.created;
-    });
-    if (this.state.sortDesc) source.reverse();
-    return source;
-  };
-
-  getExportSource = () => {
-    return this.getSource().map((r) => {
-      const userName = r.user.displayName;
-      const userId = r.user.id;
-      const authorName = r.author.displayName;
-      const authorId = r.author.id;
-      const created = moment.utc(r.created).format();
-      return { ...r, userName, userId, authorName, authorId, created };
-    });
-  };
-
-  isExportReady = () => {
-    return !_.isEmpty(this.getSource());
-  };
-
-  onOpenExportCsv = () => {
-    if (!this.isExportReady()) return;
-    this.setState({ exportCsvOpen: true });
-  };
-
-  onCloseExportCsv = () => {
-    this.setState({ exportCsvOpen: false });
-  };
-
-  renderTimePopup() {
-    const { selectedTimeFilter } = this.state;
-
-    return (
-      <Components.Popup
-        title="Select Time"
-        maxWidth={600}
-        minWidth={400}
-        minHeight={400}
-        hasPadding
-        onClose={this.closeFilter}
-        buttons={[
-          {
-            type: 'primaryAction',
-            onClick: this.saveTimeFilter,
-            text: 'Select',
-            isActive: this.isValidTimeFilter(),
-          },
-        ]}
-      >
-        <div style={{ minHeight: 150 }}>
-          <Components.AnalyticsFilter
-            defaultFilter={selectedTimeFilter}
-            filterChanged={this.timeFilterChanged}
-            filterDateRangeChanged={this.timeFilterDateRangeChanged}
-          />
-        </div>
-      </Components.Popup>
-    );
-  }
-
-  renderUserPopup(userKey, label) {
-    const { userSearch } = this.state;
-    const selected = this.state[userKey];
-
-    let userContent = null;
-    if (selected) {
-      userContent = (
-        <div>
-          <Components.UserListing
-            key={selected.id || selected.Id}
-            user={selected}
-            rightContent={
-              <Components.SVGIcon
-                className="removeIcon"
-                icon="close"
-                onClick={() => this.onSelectUser(userKey)}
-                colour={Colours.COLOUR_DUSK}
-              />
-            }
-          />
-        </div>
-      );
-    } else {
-      userContent = (
-        <div>
-          <Components.GenericInput
-            id="userSearch"
-            type="text"
-            // label="Search"
-            placeholder="Search name"
-            value={userSearch}
-            onChange={(e) => this.onHandleChange(e)}
-            alwaysShowLabel
-          />
-          {_.sortBy(this.props.users, (u) => u.displayName.toUpperCase())
-            .filter((u) => {
-              if (_.isEmpty(userSearch)) return true;
-              return u.displayName.toUpperCase().indexOf(userSearch.toUpperCase()) > -1;
-            })
-            .map((user) => {
-              return <Components.UserListing key={user.Id} user={user} onClick={() => this.onSelectUser(userKey, user)} />;
-            })}
-        </div>
-      );
-    }
-    return (
-      <Components.Popup
-        title={`Select ${label}`}
-        maxWidth={600}
-        minWidth={400}
-        hasPadding
-        onClose={this.closeFilter}
-        buttons={[
-          {
-            type: 'primaryAction',
-            onClick: () => this.saveUserFilter(userKey),
-            text: 'Select',
-            isActive: true,
-          },
-        ]}
-      >
-        {userContent}
-      </Components.Popup>
-    );
-  }
-
-  renderTypePopup() {
-    const validTypes = _.uniq(this.props.source.map((r) => r.type)).filter((t) => t);
-    const orderedTypes = _.sortBy(validTypes, (t) => t.toLowerCase());
-
-    return (
-      <Components.Popup title="Select Type" maxWidth={600} minWidth={400} hasPadding onClose={this.closeFilter}>
-        {orderedTypes.map((type) => {
-          return (
-            <Components.Tag key={type} onClick={() => this.selectTypeFilter(type)} text={type} className="marginRight-10 marginBottom-8" />
-          );
-        })}
-      </Components.Popup>
-    );
-  }
-
-  renderFilterPopup() {
-    if (!this.state.filterOpen) return null;
-
-    if (this.state.filterOpen === 'time') return this.renderTimePopup();
-    if (this.state.filterOpen === 'user') return this.renderUserPopup('selectedUser', 'User');
-    if (this.state.filterOpen === 'author') return this.renderUserPopup('selectedAuthor', 'Author');
-    if (this.state.filterOpen === 'type') return this.renderTypePopup();
-    return null;
-  }
-
-  renderFeeds() {
-    // Posts can only be edited or deleted by those with full admin privileges
-    const canEdit = Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth);
-
-    return this.getSource().map((feed, index) => {
-      if (!feed) {
-        return null;
-      }
-
-      return (
-        <tr key={index}>
-          <td className="table-TitleColumn">
-            <Link to={`${values.routeFeedDetails}/${feed.id}`}>
-              <span>{feed.title}</span>
-            </Link>
-          </td>
-          <td>{moment.utc(feed.created).local().format('ddd D MMM YYYY h:mma')}</td>
-          <td>{feed.user && feed.user.displayName}</td>
-          <td>{feed.author && feed.author.displayName}</td>
-          <td className="table-options">
-            {canEdit ? (
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Link to={`${values.routeFeedDetails}/${feed.id}`}>
-                  <FontAwesome style={{ fontSize: 20, padding: 5, cursor: 'pointer' }} name="pencil" />
-                </Link>
-                <a onClick={() => this.onRemoveFeed(feed)}>
-                  <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 8, cursor: 'pointer' }} name="minus-circle" />
-                </a>
-              </div>
-            ) : null}
-          </td>
-        </tr>
-      );
-    });
-  }
-
-  renderSort(col) {
-    const { sortColumn, sortDesc } = this.state;
-    if (col !== sortColumn) return null;
-    return <FontAwesome style={{ marginLeft: 5 }} name={sortDesc ? 'chevron-up' : 'chevron-down'} />;
-  }
-
-  sortIsActive(col) {
-    if (col !== this.state.sortColumn) return '';
-    return ' table--columnActive';
-  }
-
-  renderEmpty() {
-    const title = this.props.strings[`${values.featureKey}_textTitleRequests`] || values.textTitleRequests;
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 32 }}>
-        <div className="emptyState" />
-        <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
-          <span className="fontRegular fontSize-13">
-            <span className="fontHeavy text-brandingColour">{title} </span>
-            {values.textEmptyDescription}
-          </span>
-        </div>
-        <div className="marginTop-8 fontRegular fontSize-13" style={{ maxWidth: 500, textAlign: 'center' }}>
-          {values.textEmptyExample}
-        </div>
-      </div>
-    );
-  }
-
-  renderContent() {
-    if (_.isEmpty(this.props.source)) return this.renderEmpty();
-
-    return (
-      <Table className="plussTable" striped bordered condensed hover style={{ minWidth: '100%', marginTop: 32 }}>
-        <thead>
-          <tr>
-            <th
-              className={`${this.sortIsActive('title')}`}
-              style={{ cursor: 'pointer', minWidth: 200 }}
-              onClick={() => {
-                this.sortByCol('title');
-              }}
-            >
-              Title{this.renderSort('title')}
-            </th>
-            <th
-              className={`${this.sortIsActive('created')}`}
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                this.sortByCol('created');
-              }}
-            >
-              Time{this.renderSort('created')}
-            </th>
-            <th
-              className={`${this.sortIsActive('userName')}`}
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                this.sortByCol('userName');
-              }}
-            >
-              Posted To{this.renderSort('userName')}
-            </th>
-            <th
-              className={`${this.sortIsActive('authorName')}`}
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                this.sortByCol('authorName');
-              }}
-            >
-              Author{this.renderSort('authorName')}
-            </th>
-            <th style={{ width: 50 }} />
-          </tr>
-        </thead>
-        <tbody>{this.renderFeeds()}</tbody>
-      </Table>
-    );
-  }
-
-  renderFilters() {
-    let typeFilter = <Components.Tag className="marginRight-10" onClick={() => this.openFilter('type')} text="Type" />;
-    if (this.state.selectedTypeFilter) {
-      typeFilter = (
-        <Components.Tag
-          className="marginRight-10"
-          onClick={() => {
-            this.openFilter('type');
-          }}
-          rightIcon="close"
-          rightClick={(e) => {
-            e.stopPropagation();
-            this.selectTypeFilter();
-          }}
-          text={this.state.selectedTypeFilter}
-        />
-      );
-    }
-    let timeFilter = (
-      <Components.Tag
-        className="marginRight-10"
-        onClick={() => {
-          this.openFilter('time');
-        }}
-        text="Time"
-      />
-    );
-    if (this.state.selectedTimeFilterText) {
-      timeFilter = (
-        <Components.Tag
-          className="marginRight-10"
-          onClick={() => {
-            this.openFilter('time');
-          }}
-          rightIcon="close"
-          rightClick={(e) => {
-            e.stopPropagation();
-            this.removeTimeFilter();
-          }}
-          text={this.state.selectedTimeFilterText}
-        />
-      );
-    }
-    let userFilter = (
-      <Components.Tag
-        className="marginRight-10"
-        onClick={() => {
-          this.openFilter('user');
-        }}
-        text="User"
-      />
-    );
-    if (this.state.selectedUserFilter) {
-      userFilter = (
-        <Components.Tag
-          className="marginRight-10"
-          onClick={() => {
-            this.openFilter('user');
-          }}
-          rightIcon="close"
-          rightClick={(e) => {
-            e.stopPropagation();
-            this.removeUserFilter('selectedUser');
-          }}
-          text={this.state.selectedUserFilterText}
-        />
-      );
-    }
-    let authorFilter = (
-      <Components.Tag
-        className="marginRight-10"
-        onClick={() => {
-          this.openFilter('author');
-        }}
-        text="Author"
-      />
-    );
-    if (this.state.selectedAuthorFilter) {
-      authorFilter = (
-        <Components.Tag
-          className="marginRight-10"
-          onClick={() => {
-            this.openFilter('author');
-          }}
-          rightIcon="close"
-          rightClick={(e) => {
-            e.stopPropagation();
-            this.removeUserFilter('selectedAuthor');
-          }}
-          text={this.state.selectedAuthorFilterText}
-        />
-      );
-    }
-    return (
-      <div>
-        <div className="marginTop-20 flex flex-between flex-center">
-          <div className="flex flex-center">
-            <Components.Text type="h5" className="marginRight-20">
-              Filter by
-            </Components.Text>
-            {timeFilter}
-            {userFilter}
-            {authorFilter}
-            {typeFilter}
-          </div>
-          <Components.Button
-            inline
-            buttonType="primaryAction"
-            leftIcon="file-code-o"
-            onClick={this.onOpenExportCsv}
-            isActive={!_.isEmpty(this.getSource())}
-          >
-            Export CSV
-          </Components.Button>
-        </div>
-      </div>
-    );
-  }
-
-  renderCSVPopup() {
-    if (!this.state.exportCsvOpen) {
-      return null;
-    }
-
-    return (
-      <Components.ExportCsvPopup
-        onClose={this.onCloseExportCsv}
-        columns={this.exportColumns}
-        source={this.getExportSource()}
-        filename="feeds.csv"
-      />
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ minWidth: '100%' }}>
-        {this.renderFilterPopup()}
-        {this.renderCSVPopup()}
-        {this.renderFilters()}
-        {this.renderContent()}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  const { users } = state.users;
-  const { auth } = state;
-  return {
-    users,
-    feeds: state[values.reducerKey].feeds,
-    auth,
-    strings: (state.strings && state.strings.config) || {},
-  };
-};
-
-export default connect(mapStateToProps, { feedsLoaded, removeFeed, usersLoaded })(withRouter(FeedList));