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

package/dist/index.esm.js

@@ -21,30 +21,30 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faUserGroup, faMessage, faUserTie, faUsers, faUsersRectangle, faPeopleArrows } from '@fortawesome/free-solid-svg-icons';
 
 var values = {
-  featureKey: 'circles',
-  entityKey: 'circle',
-  entityName: 'circle',
-  serviceKey: 'circles',
-  permission: 'circles',
-  menuIcon: 'circle-o',
+  featureKey: 'groups',
+  entityKey: 'group',
+  entityName: 'group',
+  serviceKey: 'groups',
+  permission: 'groups',
+  menuIcon: 'comments',
   isFontAwesome: true,
-  reducerKey: 'circles',
-  actionCircleKey: 'CIRCLE',
-  textFeatureTitle: 'Circles',
-  textAddMenuTitle: 'Circle',
-  textEmptyGroups: "You aren't in any Circles",
+  reducerKey: 'groups',
+  actionCircleKey: 'GROUP',
+  textFeatureTitle: 'Groups',
+  textAddMenuTitle: 'Group',
+  textEmptyGroups: "You aren't in any Groups",
   textEmptyPeople: 'Contacts will show here',
-  componentCircles: 'Circles',
-  componentAddCircle: 'AddCircle',
-  componentCircle: 'Circle',
-  inviteKey: 'circleInvite',
-  messageKey: 'circleMessage',
-  chatRoute: 'circleChat',
-  updateKeyUserCircles: 'userCircles',
-  allowPublicKey: 'circleAllowPublicCircles',
-  allowPublicKeyDefault: false,
+  componentCircles: 'Groups',
+  componentAddCircle: 'AddGroup',
+  componentCircle: 'Group',
+  inviteKey: 'groupInvite',
+  messageKey: 'groupMessage',
+  chatRoute: 'groupChat',
+  updateKeyUserCircles: 'userGroups',
+  allowPublicKey: 'groupAllowPublicGroups',
+  allowPublicKeyDefault: true,
   settings: {
-    allowAnyCreate: false
+    allowAnyCreate: true
   }
 };
 
@@ -333,12 +333,46 @@ var circleActions = {
     }
 
     return deleteMessage;
+  }(),
+  markAsRead: function () {
+    var _markAsRead = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(circleId, userId) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              return _context4.abrupt("return", Session$4.authedFunction({
+                method: 'post',
+                url: Helper$3.getUrl('groups', 'resetunread'),
+                data: {
+                  groupID: circleId,
+                  userID: userId
+                }
+              }));
+
+            case 1:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    function markAsRead(_x9, _x10) {
+      return _markAsRead.apply(this, arguments);
+    }
+
+    return markAsRead;
   }()
 };
 
 var Apis$1 = PlussCore.Apis;
 var analyticsActions = Apis$1.analyticsActions;
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = "/* Badge styling for unread count */\n:root {\n  --badge-bg-color: #597db4; /* COLOUR_BRANDING_OFF */\n}\n\n.badgeTag {\n  font-size: 11px;\n  font-weight: 400;\n  padding: 3px 10px;\n  background-color: var(--badge-bg-color) !important;\n  color: #fff !important;\n  border-radius: 999px !important;\n  border: none !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  letter-spacing: 0.02em;\n}\n\n/* Unread filter info banner */\n.unreadFilterBanner {\n  background-color: #f0f4f8;\n  border-left: 3px solid var(--badge-bg-color);\n  border-radius: 4px;\n  padding: 12px 16px;\n  margin-top: 16px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n}\n\n.unreadFilterContent {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n}\n\n.unreadFilterIcon {\n  font-size: 16px;\n  color: var(--badge-bg-color);\n  flex-shrink: 0;\n}\n\n.unreadFilterText {\n  font-size: 14px;\n  line-height: 1.5;\n  color: #333333;\n}\n\n.unreadFilterButton {\n  background: none;\n  border: none;\n  color: var(--badge-bg-color);\n  font-size: 14px;\n  font-weight: 500;\n  text-decoration: underline;\n  cursor: pointer;\n  padding: 4px 8px;\n  margin-left: 4px;\n  min-height: 32px;\n  min-width: 32px;\n  transition: all 0.2s ease;\n}\n\n.unreadFilterButton:hover {\n  background-color: rgba(89, 125, 180, 0.1);\n  text-decoration: none;\n}\n\n.unreadFilterButton:focus {\n  outline: 2px solid var(--badge-bg-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Mobile responsiveness */\n@media (max-width: 768px) {\n  .unreadFilterBanner {\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 12px;\n  }\n\n  .unreadFilterContent {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .unreadFilterText {\n    font-size: 13px;\n  }\n}\n\n";
+n(css,{});
+
 function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -404,6 +438,12 @@ var Circles = /*#__PURE__*/function (_Component) {
       })));
     });
 
+    _defineProperty(_assertThisInitialized(_this), "selectUnreadFilter", function (showUnreadOnly) {
+      _this.setState({
+        showUnreadOnly: showUnreadOnly
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "canAddNew", function () {
       var auth = _this.props.auth;
       return Session$3.validateAccess(auth.site, values.permission, auth);
@@ -516,7 +556,9 @@ var Circles = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       userSearch: "",
-      sortBy: "newest"
+      sortBy: "newest",
+      showUnreadOnly: false,
+      pollingInterval: null
     };
     return _this;
   }
@@ -524,25 +566,60 @@ var Circles = /*#__PURE__*/function (_Component) {
   _createClass(Circles, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.getData();
+      var _this2 = this;
+
+      this.getData(); // Poll for updates every 10 seconds
+
+      this.pollingInterval = setInterval(function () {
+        _this2.getData();
+      }, 10000);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.pollingInterval) {
+        clearInterval(this.pollingInterval);
+      }
+    }
+  }, {
+    key: "isCircleUnread",
+    value: function isCircleUnread(circle) {
+      var userId = this.props.user.Id;
+
+      if (!circle.Unread || !circle.Unread[userId]) {
+        return false;
+      }
+
+      return circle.Unread[userId] > 0;
+    }
+  }, {
+    key: "getUnreadCount",
+    value: function getUnreadCount(circle) {
+      var userId = this.props.user.Id;
+
+      if (!circle.Unread || !circle.Unread[userId]) {
+        return 0;
+      }
+
+      return circle.Unread[userId];
     }
   }, {
     key: "getCircles",
     value: function getCircles() {
-      var _this2 = this;
+      var _this3 = this;
 
       var result = this.props.circles;
 
       if (this.state.selectedTypeFilter) {
         result = _.filter(result, function (circle) {
-          return _this2.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
+          return _this3.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
         });
       }
 
       if (this.state.selectedUserFilter) {
         result = _.filter(result, function (circle) {
           return _.some(circle.Audience, function (user) {
-            return user.userId === _this2.state.selectedUserFilter.userId;
+            return user.userId === _this3.state.selectedUserFilter.userId;
           });
         });
       } // Apply sorting
@@ -554,6 +631,12 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       if (this.state.sortBy === "newest") {
         result.reverse();
+
+        if (this.state.showUnreadOnly) {
+          result = _.filter(result, function (circle) {
+            return _this3.isCircleUnread(circle);
+          });
+        }
       }
 
       return result;
@@ -561,7 +644,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "getUsers",
     value: function getUsers() {
-      var _this3 = this;
+      var _this4 = this;
 
       var users = [];
       this.props.circles.forEach(function (circle) {
@@ -573,8 +656,8 @@ var Circles = /*#__PURE__*/function (_Component) {
         return user.userId;
       }), "displayName");
       return _.filter(users, function (u) {
-        if (!_.isEmpty(_this3.state.userSearch)) {
-          return (u.displayName || "").toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
+        if (!_.isEmpty(_this4.state.userSearch)) {
+          return (u.displayName || "").toLowerCase().indexOf(_this4.state.userSearch.toLowerCase()) > -1;
         }
 
         return true;
@@ -583,7 +666,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "validateCircleAdmin",
     value: function validateCircleAdmin(circle, onlyCreator) {
-      var _this4 = this;
+      var _this5 = this;
 
       if (Session$3.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
         return true;
@@ -594,21 +677,31 @@ var Circles = /*#__PURE__*/function (_Component) {
       }
 
       return _.some(circle.Audience, function (user) {
-        return user.userId === _this4.props.user.Id && user.isAdmin;
+        return user.userId === _this5.props.user.Id && user.isAdmin;
       });
     }
   }, {
     key: "renderRow",
     value: function renderRow(circle) {
-      var _this5 = this;
+      var _this6 = this;
 
+      var unreadCount = this.getUnreadCount(circle);
+      var badge = unreadCount > 0 ? /*#__PURE__*/React.createElement(Components$4.Tag, {
+        className: css.badgeTag,
+        text: "".concat(unreadCount, " new")
+      }) : null;
       return /*#__PURE__*/React.createElement("tr", {
         key: circle.Id
       }, /*#__PURE__*/React.createElement("td", {
         className: "table-TitleColumn"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-center",
+        style: {
+          gap: "8px"
+        }
       }, /*#__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)), badge)), /*#__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,
@@ -634,7 +727,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         name: "pencil"
       })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React.createElement("a", {
         onClick: function onClick() {
-          _this5.removeCircle(circle);
+          _this6.removeCircle(circle);
         }
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         style: {
@@ -646,16 +739,52 @@ var Circles = /*#__PURE__*/function (_Component) {
         name: "minus-circle"
       })))));
     }
+  }, {
+    key: "renderUnreadFilterInfo",
+    value: function renderUnreadFilterInfo() {
+      var _this7 = this;
+
+      var showUnreadOnly = this.state.showUnreadOnly;
+
+      if (!showUnreadOnly) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: css.unreadFilterBanner
+      }, /*#__PURE__*/React.createElement("div", {
+        className: css.unreadFilterContent
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
+        name: "info-circle",
+        className: css.unreadFilterIcon
+      }), /*#__PURE__*/React.createElement("span", {
+        className: css.unreadFilterText
+      }, "Showing only items with new messages.", " ", /*#__PURE__*/React.createElement("button", {
+        className: css.unreadFilterButton,
+        onClick: function onClick() {
+          return _this7.selectUnreadFilter(false);
+        },
+        "aria-label": "Turn off unread filter"
+      }, "Turn off filter"))));
+    }
   }, {
     key: "renderFilters",
     value: function renderFilters() {
-      var _this6 = this;
+      var _this8 = this;
 
       var userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
         text: "User"
       });
+      var unreadFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
+        className: "marginRight-10",
+        onClick: function onClick() {
+          return _this8.selectUnreadFilter(!_this8.state.showUnreadOnly);
+        },
+        leftIcon: this.state.showUnreadOnly ? "check" : null,
+        text: "Unread Only"
+      });
       var typeFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openTypeFilter,
@@ -690,19 +819,19 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), userFilter, typeFilter, /*#__PURE__*/React.createElement(Components$4.Text, {
+      }, "Filter by"), userFilter, typeFilter, unreadFilter, /*#__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");
+          return _this8.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");
+          return _this8.selectSort("oldest");
         },
         leftIcon: this.state.sortBy === "oldest" ? "check" : null,
         text: "Oldest first"
@@ -711,7 +840,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this7 = this;
+      var _this9 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -731,7 +860,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this7.onHandleChange(e);
+          return _this9.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -739,7 +868,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this7.selectUserFilter(user);
+            _this9.selectUserFilter(user);
           }
         });
       }));
@@ -747,7 +876,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this8 = this;
+      var _this10 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -761,13 +890,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this8.selectTypeFilter("circle");
+          _this10.selectTypeFilter("circle");
         },
         text: _.capitalize(values.entityName),
         className: "marginRight-10"
       }), /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this8.selectTypeFilter("private");
+          _this10.selectTypeFilter("private");
         },
         text: "Private Message"
       }));
@@ -775,7 +904,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this9 = this;
+      var _this11 = 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,
@@ -785,7 +914,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h1",
         className: ""
-      }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React.createElement(Table, {
+      }, values.textFeatureTitle), this.renderFilters(), this.renderUnreadFilterInfo(), /*#__PURE__*/React.createElement(Table, {
         className: "plussTable",
         striped: true,
         bordered: true,
@@ -799,7 +928,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           width: 50
         }
       }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this9.renderRow(circle);
+        return _this11.renderRow(circle);
       })))));
     }
   }]);
@@ -1763,6 +1892,32 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "markCircleAsRead", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.prev = 0;
+              _context5.next = 3;
+              return circleActions.markAsRead(_this.state.circleId, _this.props.user.Id);
+
+            case 3:
+              _context5.next = 8;
+              break;
+
+            case 5:
+              _context5.prev = 5;
+              _context5.t0 = _context5["catch"](0);
+              console.error("Failed to mark circle as read:", _context5.t0);
+
+            case 8:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5, null, [[0, 5]]);
+    })));
+
     _defineProperty(_assertThisInitialized(_this), "sendMessage", function () {
       var message = {
         _id: Helper.randomString(),
@@ -1847,6 +2002,7 @@ var Circle = /*#__PURE__*/function (_Component) {
   _createClass(Circle, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.markCircleAsRead();
       this.checkGetData();
       this.connect();
       this.props.setNavData({
@@ -1983,8 +2139,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.imageInputShowing ? "block" : "none"
         }
       }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
-        ref: function ref(_ref5) {
-          _this5.imageInput = _ref5;
+        ref: function ref(_ref6) {
+          _this5.imageInput = _ref6;
         },
         multiple: true,
         limit: 10,
@@ -1998,8 +2154,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.fileInputShowing ? "block" : "none"
         }
       }, /*#__PURE__*/React.createElement(Components$2.FileInput, {
-        ref: function ref(_ref6) {
-          _this5.fileInput = _ref6;
+        ref: function ref(_ref7) {
+          _this5.fileInput = _ref7;
         },
         multiple: true,
         limit: 10,
@@ -2293,8 +2449,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "chat_newMessage"
       }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref7) {
-          return _this8.chat = _ref7;
+        ref: function ref(_ref8) {
+          return _this8.chat = _ref8;
         },
         className: "chat_messages"
       }, _.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {