@plusscommunities/pluss-circles-web 1.5.6 → 1.5.7-beta.0

package/dist/index.cjs.js

@@ -418,7 +418,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
               case 3:
                 res = _context.sent;
-                console.log('getData', res.data);
+                console.log("getData", res.data);
 
                 _this.props.circlesLoaded(res.data);
 
@@ -432,7 +432,7 @@ var Circles = /*#__PURE__*/function (_Component) {
               case 9:
                 _context.prev = 9;
                 _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
+                console.error("getData", _context.t0);
 
                 _this.setState({
                   loadingAll: false
@@ -514,9 +514,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "selectSort", function (sortType) {
+      _this.setState({
+        sortBy: sortType
+      });
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandleChange", function (event) {
       var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
+      stateChange[event.target.getAttribute("id")] = event.target.value;
 
       _this.setState(stateChange);
     });
@@ -528,14 +534,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         circleActions.delete(circle.Id).then(function (res) {
           _this.getData();
         }).catch(function (res) {
-          alert('Something went wrong with the request. Please try again.');
+          alert("Something went wrong with the request. Please try again.");
         });
       }
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getTypeFilterText", function (type) {
-      if (type === 'private') {
-        return 'Private Message';
+      if (type === "private") {
+        return "Private Message";
       }
 
       return ___default['default'].capitalize(values.entityName);
@@ -545,14 +551,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       if (circle.IsPrivate) {
         return "PM: ".concat(circle.Audience.map(function (user) {
           return user.displayName;
-        }).join(', '));
+        }).join(", "));
       }
 
       return circle.Title;
     });
 
     _this.state = {
-      userSearch: ''
+      userSearch: "",
+      sortBy: "newest"
     };
     return _this;
   }
@@ -571,7 +578,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       if (this.state.selectedTypeFilter) {
         result = ___default['default'].filter(result, function (circle) {
-          return _this2.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
+          return _this2.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
         });
       }
 
@@ -581,6 +588,15 @@ var Circles = /*#__PURE__*/function (_Component) {
             return user.userId === _this2.state.selectedUserFilter.userId;
           });
         });
+      } // Apply sorting
+
+
+      result = ___default['default'].sortBy(result, function (circle) {
+        return moment__default['default'](circle.Changed).valueOf();
+      });
+
+      if (this.state.sortBy === "newest") {
+        result.reverse();
       }
 
       return result;
@@ -598,10 +614,10 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
       users = ___default['default'].sortBy(___default['default'].uniqBy(users, function (user) {
         return user.userId;
-      }), 'displayName');
+      }), "displayName");
       return ___default['default'].filter(users, function (u) {
         if (!___default['default'].isEmpty(_this3.state.userSearch)) {
-          return (u.displayName || '').toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
+          return (u.displayName || "").toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
         }
 
         return true;
@@ -635,7 +651,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-TitleColumn"
       }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
         to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
-      }, this.getTitle(circle))), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
+      }, this.getTitle(circle))), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format("D MMM YYYY")), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
         return /*#__PURE__*/React__default['default'].createElement(Components$4.ProfilePic, {
           size: 30,
           image: user.profilePic,
@@ -646,8 +662,8 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-options"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         style: {
-          display: 'flex',
-          alignItems: 'center'
+          display: "flex",
+          alignItems: "center"
         }
       }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
         to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
@@ -656,7 +672,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "pencil"
       })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement("a", {
@@ -668,7 +684,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "minus-circle"
       })))));
@@ -676,6 +692,8 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilters",
     value: function renderFilters() {
+      var _this6 = this;
+
       var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
@@ -715,12 +733,28 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), userFilter, typeFilter);
+      }, "Filter by"), userFilter, typeFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
+        type: "h5",
+        className: "marginRight-20 marginLeft-20"
+      }, "Sort by:"), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+        className: "marginRight-10",
+        onClick: function onClick() {
+          return _this6.selectSort("newest");
+        },
+        leftIcon: this.state.sortBy === "newest" ? "check" : null,
+        text: "Newest first"
+      }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+        onClick: function onClick() {
+          return _this6.selectSort("oldest");
+        },
+        leftIcon: this.state.sortBy === "oldest" ? "check" : null,
+        text: "Oldest first"
+      }));
     }
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -740,7 +774,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this6.onHandleChange(e);
+          return _this7.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -748,7 +782,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this6.selectUserFilter(user);
+            _this7.selectUserFilter(user);
           }
         });
       }));
@@ -756,7 +790,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -770,13 +804,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('circle');
+          _this8.selectTypeFilter("circle");
         },
         text: ___default['default'].capitalize(values.entityName),
         className: "marginRight-10"
       }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('private');
+          _this8.selectTypeFilter("private");
         },
         text: "Private Message"
       }));
@@ -784,7 +818,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this9 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$4.AddButton, {
         onClick: this.onAddNew,
@@ -801,14 +835,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         condensed: true,
         hover: true,
         style: {
-          minWidth: '100%'
+          minWidth: "100%"
         }
       }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", null, "Title"), /*#__PURE__*/React__default['default'].createElement("th", null, "Last updated"), /*#__PURE__*/React__default['default'].createElement("th", null, "Members"), /*#__PURE__*/React__default['default'].createElement("th", {
         style: {
           width: 50
         }
       }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this8.renderRow(circle);
+        return _this9.renderRow(circle);
       })))));
     }
   }]);

package/dist/index.esm.js

@@ -375,7 +375,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
               case 3:
                 res = _context.sent;
-                console.log('getData', res.data);
+                console.log("getData", res.data);
 
                 _this.props.circlesLoaded(res.data);
 
@@ -389,7 +389,7 @@ var Circles = /*#__PURE__*/function (_Component) {
               case 9:
                 _context.prev = 9;
                 _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
+                console.error("getData", _context.t0);
 
                 _this.setState({
                   loadingAll: false
@@ -471,9 +471,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "selectSort", function (sortType) {
+      _this.setState({
+        sortBy: sortType
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
       var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
+      stateChange[event.target.getAttribute("id")] = event.target.value;
 
       _this.setState(stateChange);
     });
@@ -485,14 +491,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         circleActions.delete(circle.Id).then(function (res) {
           _this.getData();
         }).catch(function (res) {
-          alert('Something went wrong with the request. Please try again.');
+          alert("Something went wrong with the request. Please try again.");
         });
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "getTypeFilterText", function (type) {
-      if (type === 'private') {
-        return 'Private Message';
+      if (type === "private") {
+        return "Private Message";
       }
 
       return _.capitalize(values.entityName);
@@ -502,14 +508,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       if (circle.IsPrivate) {
         return "PM: ".concat(circle.Audience.map(function (user) {
           return user.displayName;
-        }).join(', '));
+        }).join(", "));
       }
 
       return circle.Title;
     });
 
     _this.state = {
-      userSearch: ''
+      userSearch: "",
+      sortBy: "newest"
     };
     return _this;
   }
@@ -528,7 +535,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       if (this.state.selectedTypeFilter) {
         result = _.filter(result, function (circle) {
-          return _this2.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
+          return _this2.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
         });
       }
 
@@ -538,6 +545,15 @@ var Circles = /*#__PURE__*/function (_Component) {
             return user.userId === _this2.state.selectedUserFilter.userId;
           });
         });
+      } // Apply sorting
+
+
+      result = _.sortBy(result, function (circle) {
+        return moment(circle.Changed).valueOf();
+      });
+
+      if (this.state.sortBy === "newest") {
+        result.reverse();
       }
 
       return result;
@@ -555,10 +571,10 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
       users = _.sortBy(_.uniqBy(users, function (user) {
         return user.userId;
-      }), 'displayName');
+      }), "displayName");
       return _.filter(users, function (u) {
         if (!_.isEmpty(_this3.state.userSearch)) {
-          return (u.displayName || '').toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
+          return (u.displayName || "").toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
         }
 
         return true;
@@ -592,7 +608,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-TitleColumn"
       }, /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
-      }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
+      }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format("D MMM YYYY")), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
         return /*#__PURE__*/React.createElement(Components$4.ProfilePic, {
           size: 30,
           image: user.profilePic,
@@ -603,8 +619,8 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-options"
       }, /*#__PURE__*/React.createElement("div", {
         style: {
-          display: 'flex',
-          alignItems: 'center'
+          display: "flex",
+          alignItems: "center"
         }
       }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
@@ -613,7 +629,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "pencil"
       })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React.createElement("a", {
@@ -625,7 +641,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "minus-circle"
       })))));
@@ -633,6 +649,8 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilters",
     value: function renderFilters() {
+      var _this6 = this;
+
       var userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
@@ -672,12 +690,28 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), userFilter, typeFilter);
+      }, "Filter by"), userFilter, typeFilter, /*#__PURE__*/React.createElement(Components$4.Text, {
+        type: "h5",
+        className: "marginRight-20 marginLeft-20"
+      }, "Sort by:"), /*#__PURE__*/React.createElement(Components$4.Tag, {
+        className: "marginRight-10",
+        onClick: function onClick() {
+          return _this6.selectSort("newest");
+        },
+        leftIcon: this.state.sortBy === "newest" ? "check" : null,
+        text: "Newest first"
+      }), /*#__PURE__*/React.createElement(Components$4.Tag, {
+        onClick: function onClick() {
+          return _this6.selectSort("oldest");
+        },
+        leftIcon: this.state.sortBy === "oldest" ? "check" : null,
+        text: "Oldest first"
+      }));
     }
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -697,7 +731,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this6.onHandleChange(e);
+          return _this7.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -705,7 +739,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this6.selectUserFilter(user);
+            _this7.selectUserFilter(user);
           }
         });
       }));
@@ -713,7 +747,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -727,13 +761,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('circle');
+          _this8.selectTypeFilter("circle");
         },
         text: _.capitalize(values.entityName),
         className: "marginRight-10"
       }), /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('private');
+          _this8.selectTypeFilter("private");
         },
         text: "Private Message"
       }));
@@ -741,7 +775,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this9 = this;
 
       return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$4.AddButton, {
         onClick: this.onAddNew,
@@ -758,14 +792,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         condensed: true,
         hover: true,
         style: {
-          minWidth: '100%'
+          minWidth: "100%"
         }
       }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Title"), /*#__PURE__*/React.createElement("th", null, "Last updated"), /*#__PURE__*/React.createElement("th", null, "Members"), /*#__PURE__*/React.createElement("th", {
         style: {
           width: 50
         }
       }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this8.renderRow(circle);
+        return _this9.renderRow(circle);
       })))));
     }
   }]);