@plusscommunities/pluss-core-web 1.2.7 → 1.2.11

package/dist/index.umd.js

@@ -666,6 +666,14 @@
     return ['mov', 'mp4'].includes(extension);
   };
 
+  var getFirstName = function getFirstName(string) {
+    if (___default['default'].isEmpty(string)) {
+      return '';
+    }
+
+    return string.split(' ')[0];
+  };
+
   var isEmail = function isEmail(email) {
     if (___default['default'].isEmpty(email)) return false;
     var atpos = email.indexOf('@');
@@ -742,6 +750,14 @@
     }));
   };
 
+  var getSiteSettingFromState = function getSiteSettingFromState(state, key, defaultValue) {
+    if (state && state.auth && state.auth.siteSettings && !___default['default'].isUndefined(state.auth.siteSettings[key])) {
+      return state.auth.siteSettings[key];
+    }
+
+    return defaultValue || null;
+  };
+
   var readJSONFromStorage = function readJSONFromStorage(storage, key, fallback) {
     var value = storage.getItem(key);
 
@@ -814,12 +830,6 @@
   //   }
   //   return string.charAt(0).toUpperCase() + string.slice(1);
   // };
-  // export const getFirstName = (string) => {
-  //   if (_.isEmpty(string)) {
-  //     return '';
-  //   }
-  //   return string.split(' ')[0];
-  // };
   // export const get300 = (url) => {
   //   if (!url) {
   //     return url;
@@ -1541,6 +1551,7 @@
     getFileName: getFileName,
     getThumb300: getThumb300,
     isVideo: isVideo,
+    getFirstName: getFirstName,
     isEmail: isEmail,
     isUrl: isUrl,
     randomString: randomString,
@@ -1548,6 +1559,7 @@
     onlyAlphanumeric: onlyAlphanumeric,
     getSiteName: getSiteName,
     getSiteNameFromRoles: getSiteNameFromRoles,
+    getSiteSettingFromState: getSiteSettingFromState,
     readJSONFromStorage: readJSONFromStorage,
     setLocalStorage: setLocalStorage,
     getTimepickerTime: getTimepickerTime,
@@ -4317,10 +4329,10 @@
     }, {
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("p", {
+        return /*#__PURE__*/React__default['default'].createElement("p", _extends__default['default']({}, this.props, {
           className: "text-".concat(this.props.type).concat(this.getClassName()),
           style: this.props.style
-        }, this.props.children);
+        }), this.props.children);
       }
     }]);
 
@@ -4406,8 +4418,8 @@
     }
 
     _createClass__default['default'](Comment, [{
-      key: "render",
-      value: function render() {
+      key: "renderComment",
+      value: function renderComment() {
         var comment = this.props.comment;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: comment.Id,
@@ -4426,6 +4438,11 @@
           className: "comment_time"
         }, moment__default['default'].utc(comment.Timestamp).local().format('D MMM YYYY • h:mma'))));
       }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderComment(), this.props.bottomContent);
+      }
     }]);
 
     return Comment;
@@ -4476,6 +4493,58 @@
         }, _callee);
       })));
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getComments", function () {
+        if (!_this.props.onlyParents) {
+          return _this.props.comments;
+        }
+
+        return ___default['default'].filter(_this.props.comments, function (c) {
+          return !c.ParentId;
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderReplyText", function (c) {
+        if (!_this.props.onOpenThread) {
+          return null;
+        }
+
+        var threadComments = ___default['default'].filter(_this.props.comments, function (innerC) {
+          return innerC.ParentId === c.Id;
+        });
+
+        if (___default['default'].isEmpty(threadComments)) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "comment_reply"
+          }, /*#__PURE__*/React__default['default'].createElement(Text, {
+            className: "comment_reply_button",
+            type: "button",
+            onClick: function onClick() {
+              _this.props.onOpenThread(c);
+            }
+          }, "Reply to ".concat(getFirstName(c.User ? c.User.displayName : 'comment'))));
+        }
+
+        var profilePics = ___default['default'].take(___default['default'].uniqBy(threadComments, function (c) {
+          return c.UserId;
+        }), 3);
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "comment_reply comment_reply-hasReplies"
+        }, profilePics.map(function (c) {
+          return /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+            className: "comment_reply_profilePic",
+            size: 20,
+            image: c.User.profilePic
+          });
+        }), /*#__PURE__*/React__default['default'].createElement(Text, {
+          className: "comment_reply_button",
+          type: "button",
+          onClick: function onClick() {
+            _this.props.onOpenThread(c);
+          }
+        }, "".concat(threadComments.length, " repl").concat(getPluralOptions(threadComments.length, 'y', 'ies'))));
+      });
+
       _this.state = {
         commentInput: ''
       };
@@ -4492,10 +4561,11 @@
           className: "marginBottom-16"
         }, "Comments"), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "commentSection"
-        }, this.props.comments.map(function (c) {
+        }, this.getComments().map(function (c) {
           return /*#__PURE__*/React__default['default'].createElement(Comment, {
             key: c.Id,
-            comment: c
+            comment: c,
+            bottomContent: _this2.renderReplyText(c)
           });
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "commentReply"
@@ -8989,7 +9059,7 @@
             Category = _this$state2.Category,
             Tag = _this$state2.Tag,
             Type = _this$state2.Type;
-        if (AudienceType === 'Custom') return AudienceTagList;
+        if (AudienceType === 'Custom') return AudienceTagList || [];
         if (AudienceType === 'Category') return Category;
         if (AudienceType === 'UserTags') return Tag;
         return Type;
@@ -9049,7 +9119,8 @@
           Type: '',
           Category: '',
           includeList: [],
-          excludeList: []
+          excludeList: [],
+          AudienceTagList: []
         });
         setTimeout(this.onChangeSelection, 50);
       }
@@ -10162,8 +10233,6 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleColumn", function (key) {
-        var source = _this.props.source;
-
         var columns = ___default['default'].cloneDeep(_this.state.columns);
 
         var column = columns.find(function (c) {
@@ -10179,25 +10248,132 @@
           var selectedHeaders = columns.filter(function (c) {
             return c.key && c.selected;
           });
-          var selectedheaderKeys = selectedHeaders.map(function (h) {
-            return h.key;
+
+          _this.setState({
+            columns: columns,
+            selectedHeaders: selectedHeaders
           });
-          var selectedSource = source.map(function (i) {
-            return ___default['default'].pick(i, selectedheaderKeys);
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStartDateFilter", function () {
+        var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+        if (filterDateStartVisible) {
+          setTimeout(function () {
+            return _this.setState({
+              filterDateStartVisible: false
+            });
+          }, 200);
+        } else {
+          _this.setState({
+            filterDateStartVisible: true
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleEndDateFilter", function () {
+        var filterDateEndVisible = _this.state.filterDateEndVisible;
+
+        if (filterDateEndVisible) {
+          setTimeout(function () {
+            return _this.setState({
+              filterDateEndVisible: false
+            });
+          }, 200);
+        } else {
+          _this.setState({
+            filterDateEndVisible: true
           });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterStartChanged", function (date) {
+        var filterDateEnd = _this.state.filterDateEnd;
+        var start = moment__default['default'](date);
 
+        if (start.isSameOrBefore(filterDateEnd)) {
           _this.setState({
-            columns: columns,
-            selectedHeaders: selectedHeaders,
-            selectedSource: selectedSource
+            filterDateStart: start.startOf('day'),
+            filterDateStartVisible: false
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterEndChanged", function (date) {
+        var filterDateStart = _this.state.filterDateStart;
+        var end = moment__default['default'](date);
+
+        if (end.isSameOrAfter(filterDateStart)) {
+          _this.setState({
+            filterDateEnd: end.endOf('day'),
+            filterDateEndVisible: false
           });
         }
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getSelectedSource", function () {
+        var source = _this.props.source;
+        var selectedHeaders = _this.state.selectedHeaders;
+        var result = source; // apply timestamp filter
+
+        if (_this.props.timestampFilter) {
+          var _this$state = _this.state,
+              filterDateStart = _this$state.filterDateStart,
+              filterDateEnd = _this$state.filterDateEnd;
+          var filterKey = _this.props.timestampFilter.filterKey;
+          var minDate = filterDateStart.valueOf();
+          var maxDate = filterDateEnd.valueOf();
+          result = ___default['default'].filter(source, function (item) {
+            return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+          });
+        } // map result to columns
+
+
+        var selectedheaderKeys = selectedHeaders.map(function (h) {
+          return h.key;
+        });
+        return result.map(function (i) {
+          return ___default['default'].pick(i, selectedheaderKeys);
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderTimestampFilter", function () {
+        if (!_this.props.timestampFilter) {
+          return null;
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+          id: "dateStart",
+          label: "Start Date",
+          alwaysShowLabel: true,
+          placeholder: 'Select start date',
+          value: _this.state.filterDateStart.format('DD/MM/YYYY'),
+          onClick: _this.onToggleStartDateFilter,
+          readOnly: true
+        }), _this.state.filterDateStartVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+          hideTop: true,
+          selectedDate: _this.state.filterDateStart,
+          selectDate: _this.onDateFilterStartChanged
+        }) : null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+          id: "dateEnd",
+          label: "End Date",
+          alwaysShowLabel: true,
+          placeholder: 'Select end date',
+          value: _this.state.filterDateEnd.format('DD/MM/YYYY'),
+          onClick: _this.onToggleEndDateFilter,
+          readOnly: true
+        }), _this.state.filterDateEndVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+          hideTop: true,
+          selectedDate: _this.state.filterDateEnd,
+          selectDate: _this.onDateFilterEndChanged
+        }) : null);
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderContent", function () {
-        var _this$state = _this.state,
-            saving = _this$state.saving,
-            columns = _this$state.columns;
+        var _this$state2 = _this.state,
+            saving = _this$state2.saving,
+            columns = _this$state2.columns;
 
         if (saving) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10232,27 +10408,35 @@
         }));
       });
 
-      _this.state = {
+      var state = {
         columns: props.columns,
+        selectedHeaders: props.columns.filter(function (c) {
+          return c.key && c.selected;
+        }),
         selectedSource: [],
         saving: false
       };
+
+      if (props.timestampFilter) {
+        state.filterDateStart = props.timestampFilter.startDate;
+        state.filterDateEnd = props.timestampFilter.endDate;
+      }
+
+      _this.state = state;
       return _this;
     }
 
     _createClass__default['default'](ExportCsvPopup, [{
       key: "render",
       value: function render() {
-        var _this$state2 = this.state,
-            selectedHeaders = _this$state2.selectedHeaders,
-            selectedSource = _this$state2.selectedSource;
+        var selectedHeaders = this.state.selectedHeaders;
         var filename = this.props.filename;
         var buttons = [{
           type: 'primary',
           isActive: this.canSave(),
           text: /*#__PURE__*/React__default['default'].createElement(reactCsv.CSVLink, {
             headers: selectedHeaders,
-            data: selectedSource,
+            data: this.getSelectedSource(),
             style: {
               textDecoration: 'none',
               color: '#fff'
@@ -10268,7 +10452,6 @@
         }];
         return /*#__PURE__*/React__default['default'].createElement(Popup, {
           title: "Confirm Export",
-          subtitle: "Select which columns to include in the export",
           boxClasses: "flex flex-column",
           innerClasses: "flex flex-column fillSpace flex-1",
           minWidth: 500,
@@ -10278,7 +10461,9 @@
           hasPadding: true,
           onClose: this.onClose,
           buttons: buttons
-        }, this.renderContent());
+        }, this.renderTimestampFilter(), /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "bodyLarge"
+        }, "Select which columns to include in the export"), this.renderContent());
       }
     }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.7",
+  "version": "1.2.11",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/AudienceSelector.js

@@ -75,7 +75,7 @@ class AudienceSelector extends Component {
 
   getAudienceTypeSelection() {
     const { AudienceType, AudienceTagList, Category, Tag, Type } = this.state;
-    if (AudienceType === 'Custom') return AudienceTagList;
+    if (AudienceType === 'Custom') return AudienceTagList || [];
     if (AudienceType === 'Category') return Category;
     if (AudienceType === 'UserTags') return Tag;
     return Type;
@@ -135,6 +135,7 @@ class AudienceSelector extends Component {
       Category: '',
       includeList: [],
       excludeList: [],
+      AudienceTagList: [],
     });
     setTimeout(this.onChangeSelection, 50);
   }

package/src/components/Comment.js

@@ -4,7 +4,7 @@ import { toParagraphed } from '../helper';
 import { ProfilePic } from './ProfilePic';
 
 class Comment extends Component {
-  render() {
+  renderComment() {
     const { comment } = this.props;
     return (
       <div key={comment.Id} className="comment">
@@ -17,6 +17,15 @@ class Comment extends Component {
       </div>
     );
   }
+
+  render() {
+    return (
+      <div>
+        {this.renderComment()}
+        {this.props.bottomContent}
+      </div>
+    );
+  }
 }
 
 export { Comment };

package/src/components/CommentSection.js

@@ -4,6 +4,8 @@ import _ from 'lodash';
 import Textarea from 'react-textarea-autosize';
 import { Text } from './Text';
 import { Comment } from './Comment';
+import { getFirstName, getPluralOptions } from '../helper';
+import { ProfilePic } from './ProfilePic';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -26,6 +28,57 @@ class CommentSection extends Component {
     this.props.onAddComment(commentInput);
   };
 
+  getComments = () => {
+    if (!this.props.onlyParents) {
+      return this.props.comments;
+    }
+    return _.filter(this.props.comments, (c) => {
+      return !c.ParentId;
+    });
+  };
+
+  renderReplyText = (c) => {
+    if (!this.props.onOpenThread) {
+      return null;
+    }
+
+    const threadComments = _.filter(this.props.comments, (innerC) => {
+      return innerC.ParentId === c.Id;
+    });
+    if (_.isEmpty(threadComments)) {
+      return (
+        <div className="comment_reply">
+          <Text
+            className="comment_reply_button"
+            type="button"
+            onClick={() => {
+              this.props.onOpenThread(c);
+            }}
+          >{`Reply to ${getFirstName(c.User ? c.User.displayName : 'comment')}`}</Text>
+        </div>
+      );
+    }
+
+    const profilePics = _.take(
+      _.uniqBy(threadComments, (c) => c.UserId),
+      3,
+    );
+    return (
+      <div className="comment_reply comment_reply-hasReplies">
+        {profilePics.map((c) => {
+          return <ProfilePic className="comment_reply_profilePic" size={20} image={c.User.profilePic} />;
+        })}
+        <Text
+          className="comment_reply_button"
+          type="button"
+          onClick={() => {
+            this.props.onOpenThread(c);
+          }}
+        >{`${threadComments.length} repl${getPluralOptions(threadComments.length, 'y', 'ies')}`}</Text>
+      </div>
+    );
+  };
+
   render() {
     return (
       <div>
@@ -35,8 +88,8 @@ class CommentSection extends Component {
           </Text>
         )}
         <div className="commentSection">
-          {this.props.comments.map((c) => (
-            <Comment key={c.Id} comment={c} />
+          {this.getComments().map((c) => (
+            <Comment key={c.Id} comment={c} bottomContent={this.renderReplyText(c)} />
           ))}
         </div>
         <div className="commentReply">