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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs.js +59 -16
  2. package/dist/index.esm.js +59 -16
  3. package/dist/index.umd.js +59 -16
  4. package/package.json +1 -1
  5. package/src/apis/circleActions.js +1 -1
  6. package/src/screens/Circles.js +46 -4
  7. package/src/screens/Circles.module.css +96 -0
package/dist/index.cjs.js CHANGED
@@ -385,7 +385,7 @@ var circleActions = {
385
385
  case 0:
386
386
  return _context4.abrupt("return", Session$4.authedFunction({
387
387
  method: 'post',
388
- url: Helper$3.getUrl('notifications', 'resetunread'),
388
+ url: Helper$3.getUrl('groups', 'resetunread'),
389
389
  data: {
390
390
  groupID: circleId,
391
391
  userID: userId
@@ -411,6 +411,11 @@ var circleActions = {
411
411
  var Apis$1 = PlussCore__namespace.Apis;
412
412
  var analyticsActions = Apis$1.analyticsActions;
413
413
 
414
+ 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}}
415
+
416
+ 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";
417
+ n(css,{});
418
+
414
419
  function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
415
420
 
416
421
  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; } }
@@ -723,13 +728,23 @@ var Circles = /*#__PURE__*/function (_Component) {
723
728
  value: function renderRow(circle) {
724
729
  var _this6 = this;
725
730
 
731
+ var unreadCount = this.getUnreadCount(circle);
732
+ var badge = unreadCount > 0 ? /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
733
+ className: css.badgeTag,
734
+ text: "".concat(unreadCount, " new")
735
+ }) : null;
726
736
  return /*#__PURE__*/React__default['default'].createElement("tr", {
727
737
  key: circle.Id
728
738
  }, /*#__PURE__*/React__default['default'].createElement("td", {
729
739
  className: "table-TitleColumn"
740
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
741
+ className: "flex flex-center",
742
+ style: {
743
+ gap: "8px"
744
+ }
730
745
  }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
731
746
  to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
732
- }, 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) {
747
+ }, this.getTitle(circle)), badge)), /*#__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) {
733
748
  return /*#__PURE__*/React__default['default'].createElement(Components$4.ProfilePic, {
734
749
  size: 30,
735
750
  image: user.profilePic,
@@ -767,10 +782,38 @@ var Circles = /*#__PURE__*/function (_Component) {
767
782
  name: "minus-circle"
768
783
  })))));
769
784
  }
785
+ }, {
786
+ key: "renderUnreadFilterInfo",
787
+ value: function renderUnreadFilterInfo() {
788
+ var _this7 = this;
789
+
790
+ var showUnreadOnly = this.state.showUnreadOnly;
791
+
792
+ if (!showUnreadOnly) {
793
+ return null;
794
+ }
795
+
796
+ return /*#__PURE__*/React__default['default'].createElement("div", {
797
+ className: css.unreadFilterBanner
798
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
799
+ className: css.unreadFilterContent
800
+ }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
801
+ name: "info-circle",
802
+ className: css.unreadFilterIcon
803
+ }), /*#__PURE__*/React__default['default'].createElement("span", {
804
+ className: css.unreadFilterText
805
+ }, "Showing only items with new messages.", " ", /*#__PURE__*/React__default['default'].createElement("button", {
806
+ className: css.unreadFilterButton,
807
+ onClick: function onClick() {
808
+ return _this7.selectUnreadFilter(false);
809
+ },
810
+ "aria-label": "Turn off unread filter"
811
+ }, "Turn off filter"))));
812
+ }
770
813
  }, {
771
814
  key: "renderFilters",
772
815
  value: function renderFilters() {
773
- var _this7 = this;
816
+ var _this8 = this;
774
817
 
775
818
  var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
776
819
  className: "marginRight-10",
@@ -780,7 +823,7 @@ var Circles = /*#__PURE__*/function (_Component) {
780
823
  var unreadFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
781
824
  className: "marginRight-10",
782
825
  onClick: function onClick() {
783
- return _this7.selectUnreadFilter(!_this7.state.showUnreadOnly);
826
+ return _this8.selectUnreadFilter(!_this8.state.showUnreadOnly);
784
827
  },
785
828
  leftIcon: this.state.showUnreadOnly ? "check" : null,
786
829
  text: "Unread Only"
@@ -819,19 +862,19 @@ var Circles = /*#__PURE__*/function (_Component) {
819
862
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
820
863
  type: "h5",
821
864
  className: "marginRight-20"
822
- }, "Filter by"), userFilter, unreadFilter, typeFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
865
+ }, "Filter by"), userFilter, typeFilter, unreadFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
823
866
  type: "h5",
824
867
  className: "marginRight-20 marginLeft-20"
825
868
  }, "Sort by:"), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
826
869
  className: "marginRight-10",
827
870
  onClick: function onClick() {
828
- return _this7.selectSort("newest");
871
+ return _this8.selectSort("newest");
829
872
  },
830
873
  leftIcon: this.state.sortBy === "newest" ? "check" : null,
831
874
  text: "Newest first"
832
875
  }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
833
876
  onClick: function onClick() {
834
- return _this7.selectSort("oldest");
877
+ return _this8.selectSort("oldest");
835
878
  },
836
879
  leftIcon: this.state.sortBy === "oldest" ? "check" : null,
837
880
  text: "Oldest first"
@@ -840,7 +883,7 @@ var Circles = /*#__PURE__*/function (_Component) {
840
883
  }, {
841
884
  key: "renderUserFilterPopup",
842
885
  value: function renderUserFilterPopup() {
843
- var _this8 = this;
886
+ var _this9 = this;
844
887
 
845
888
  if (!this.state.userFilterOpen) {
846
889
  return null;
@@ -860,7 +903,7 @@ var Circles = /*#__PURE__*/function (_Component) {
860
903
  placeholder: "Enter name",
861
904
  value: this.state.userSearch,
862
905
  onChange: function onChange(e) {
863
- return _this8.onHandleChange(e);
906
+ return _this9.onHandleChange(e);
864
907
  },
865
908
  alwaysShowLabel: true
866
909
  }), this.getUsers().map(function (user) {
@@ -868,7 +911,7 @@ var Circles = /*#__PURE__*/function (_Component) {
868
911
  key: user.userId,
869
912
  user: user,
870
913
  onClick: function onClick() {
871
- _this8.selectUserFilter(user);
914
+ _this9.selectUserFilter(user);
872
915
  }
873
916
  });
874
917
  }));
@@ -876,7 +919,7 @@ var Circles = /*#__PURE__*/function (_Component) {
876
919
  }, {
877
920
  key: "renderTypeFilterPopup",
878
921
  value: function renderTypeFilterPopup() {
879
- var _this9 = this;
922
+ var _this10 = this;
880
923
 
881
924
  if (!this.state.typeFilterOpen) {
882
925
  return null;
@@ -890,13 +933,13 @@ var Circles = /*#__PURE__*/function (_Component) {
890
933
  onClose: this.closeTypeFilter
891
934
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
892
935
  onClick: function onClick() {
893
- _this9.selectTypeFilter("circle");
936
+ _this10.selectTypeFilter("circle");
894
937
  },
895
938
  text: ___default['default'].capitalize(values.entityName),
896
939
  className: "marginRight-10"
897
940
  }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
898
941
  onClick: function onClick() {
899
- _this9.selectTypeFilter("private");
942
+ _this10.selectTypeFilter("private");
900
943
  },
901
944
  text: "Private Message"
902
945
  }));
@@ -904,7 +947,7 @@ var Circles = /*#__PURE__*/function (_Component) {
904
947
  }, {
905
948
  key: "render",
906
949
  value: function render() {
907
- var _this10 = this;
950
+ var _this11 = this;
908
951
 
909
952
  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, {
910
953
  onClick: this.onAddNew,
@@ -914,7 +957,7 @@ var Circles = /*#__PURE__*/function (_Component) {
914
957
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
915
958
  type: "h1",
916
959
  className: ""
917
- }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
960
+ }, values.textFeatureTitle), this.renderFilters(), this.renderUnreadFilterInfo(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
918
961
  className: "plussTable",
919
962
  striped: true,
920
963
  bordered: true,
@@ -928,7 +971,7 @@ var Circles = /*#__PURE__*/function (_Component) {
928
971
  width: 50
929
972
  }
930
973
  }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
931
- return _this10.renderRow(circle);
974
+ return _this11.renderRow(circle);
932
975
  })))));
933
976
  }
934
977
  }]);
package/dist/index.esm.js CHANGED
@@ -342,7 +342,7 @@ var circleActions = {
342
342
  case 0:
343
343
  return _context4.abrupt("return", Session$4.authedFunction({
344
344
  method: 'post',
345
- url: Helper$3.getUrl('notifications', 'resetunread'),
345
+ url: Helper$3.getUrl('groups', 'resetunread'),
346
346
  data: {
347
347
  groupID: circleId,
348
348
  userID: userId
@@ -368,6 +368,11 @@ var circleActions = {
368
368
  var Apis$1 = PlussCore.Apis;
369
369
  var analyticsActions = Apis$1.analyticsActions;
370
370
 
371
+ 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}}
372
+
373
+ 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";
374
+ n(css,{});
375
+
371
376
  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); }; }
372
377
 
373
378
  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; } }
@@ -680,13 +685,23 @@ var Circles = /*#__PURE__*/function (_Component) {
680
685
  value: function renderRow(circle) {
681
686
  var _this6 = this;
682
687
 
688
+ var unreadCount = this.getUnreadCount(circle);
689
+ var badge = unreadCount > 0 ? /*#__PURE__*/React.createElement(Components$4.Tag, {
690
+ className: css.badgeTag,
691
+ text: "".concat(unreadCount, " new")
692
+ }) : null;
683
693
  return /*#__PURE__*/React.createElement("tr", {
684
694
  key: circle.Id
685
695
  }, /*#__PURE__*/React.createElement("td", {
686
696
  className: "table-TitleColumn"
697
+ }, /*#__PURE__*/React.createElement("div", {
698
+ className: "flex flex-center",
699
+ style: {
700
+ gap: "8px"
701
+ }
687
702
  }, /*#__PURE__*/React.createElement(Link, {
688
703
  to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
689
- }, 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) {
704
+ }, 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) {
690
705
  return /*#__PURE__*/React.createElement(Components$4.ProfilePic, {
691
706
  size: 30,
692
707
  image: user.profilePic,
@@ -724,10 +739,38 @@ var Circles = /*#__PURE__*/function (_Component) {
724
739
  name: "minus-circle"
725
740
  })))));
726
741
  }
742
+ }, {
743
+ key: "renderUnreadFilterInfo",
744
+ value: function renderUnreadFilterInfo() {
745
+ var _this7 = this;
746
+
747
+ var showUnreadOnly = this.state.showUnreadOnly;
748
+
749
+ if (!showUnreadOnly) {
750
+ return null;
751
+ }
752
+
753
+ return /*#__PURE__*/React.createElement("div", {
754
+ className: css.unreadFilterBanner
755
+ }, /*#__PURE__*/React.createElement("div", {
756
+ className: css.unreadFilterContent
757
+ }, /*#__PURE__*/React.createElement(FontAwesome, {
758
+ name: "info-circle",
759
+ className: css.unreadFilterIcon
760
+ }), /*#__PURE__*/React.createElement("span", {
761
+ className: css.unreadFilterText
762
+ }, "Showing only items with new messages.", " ", /*#__PURE__*/React.createElement("button", {
763
+ className: css.unreadFilterButton,
764
+ onClick: function onClick() {
765
+ return _this7.selectUnreadFilter(false);
766
+ },
767
+ "aria-label": "Turn off unread filter"
768
+ }, "Turn off filter"))));
769
+ }
727
770
  }, {
728
771
  key: "renderFilters",
729
772
  value: function renderFilters() {
730
- var _this7 = this;
773
+ var _this8 = this;
731
774
 
732
775
  var userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
733
776
  className: "marginRight-10",
@@ -737,7 +780,7 @@ var Circles = /*#__PURE__*/function (_Component) {
737
780
  var unreadFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
738
781
  className: "marginRight-10",
739
782
  onClick: function onClick() {
740
- return _this7.selectUnreadFilter(!_this7.state.showUnreadOnly);
783
+ return _this8.selectUnreadFilter(!_this8.state.showUnreadOnly);
741
784
  },
742
785
  leftIcon: this.state.showUnreadOnly ? "check" : null,
743
786
  text: "Unread Only"
@@ -776,19 +819,19 @@ var Circles = /*#__PURE__*/function (_Component) {
776
819
  }, /*#__PURE__*/React.createElement(Components$4.Text, {
777
820
  type: "h5",
778
821
  className: "marginRight-20"
779
- }, "Filter by"), userFilter, unreadFilter, typeFilter, /*#__PURE__*/React.createElement(Components$4.Text, {
822
+ }, "Filter by"), userFilter, typeFilter, unreadFilter, /*#__PURE__*/React.createElement(Components$4.Text, {
780
823
  type: "h5",
781
824
  className: "marginRight-20 marginLeft-20"
782
825
  }, "Sort by:"), /*#__PURE__*/React.createElement(Components$4.Tag, {
783
826
  className: "marginRight-10",
784
827
  onClick: function onClick() {
785
- return _this7.selectSort("newest");
828
+ return _this8.selectSort("newest");
786
829
  },
787
830
  leftIcon: this.state.sortBy === "newest" ? "check" : null,
788
831
  text: "Newest first"
789
832
  }), /*#__PURE__*/React.createElement(Components$4.Tag, {
790
833
  onClick: function onClick() {
791
- return _this7.selectSort("oldest");
834
+ return _this8.selectSort("oldest");
792
835
  },
793
836
  leftIcon: this.state.sortBy === "oldest" ? "check" : null,
794
837
  text: "Oldest first"
@@ -797,7 +840,7 @@ var Circles = /*#__PURE__*/function (_Component) {
797
840
  }, {
798
841
  key: "renderUserFilterPopup",
799
842
  value: function renderUserFilterPopup() {
800
- var _this8 = this;
843
+ var _this9 = this;
801
844
 
802
845
  if (!this.state.userFilterOpen) {
803
846
  return null;
@@ -817,7 +860,7 @@ var Circles = /*#__PURE__*/function (_Component) {
817
860
  placeholder: "Enter name",
818
861
  value: this.state.userSearch,
819
862
  onChange: function onChange(e) {
820
- return _this8.onHandleChange(e);
863
+ return _this9.onHandleChange(e);
821
864
  },
822
865
  alwaysShowLabel: true
823
866
  }), this.getUsers().map(function (user) {
@@ -825,7 +868,7 @@ var Circles = /*#__PURE__*/function (_Component) {
825
868
  key: user.userId,
826
869
  user: user,
827
870
  onClick: function onClick() {
828
- _this8.selectUserFilter(user);
871
+ _this9.selectUserFilter(user);
829
872
  }
830
873
  });
831
874
  }));
@@ -833,7 +876,7 @@ var Circles = /*#__PURE__*/function (_Component) {
833
876
  }, {
834
877
  key: "renderTypeFilterPopup",
835
878
  value: function renderTypeFilterPopup() {
836
- var _this9 = this;
879
+ var _this10 = this;
837
880
 
838
881
  if (!this.state.typeFilterOpen) {
839
882
  return null;
@@ -847,13 +890,13 @@ var Circles = /*#__PURE__*/function (_Component) {
847
890
  onClose: this.closeTypeFilter
848
891
  }, /*#__PURE__*/React.createElement(Components$4.Tag, {
849
892
  onClick: function onClick() {
850
- _this9.selectTypeFilter("circle");
893
+ _this10.selectTypeFilter("circle");
851
894
  },
852
895
  text: _.capitalize(values.entityName),
853
896
  className: "marginRight-10"
854
897
  }), /*#__PURE__*/React.createElement(Components$4.Tag, {
855
898
  onClick: function onClick() {
856
- _this9.selectTypeFilter("private");
899
+ _this10.selectTypeFilter("private");
857
900
  },
858
901
  text: "Private Message"
859
902
  }));
@@ -861,7 +904,7 @@ var Circles = /*#__PURE__*/function (_Component) {
861
904
  }, {
862
905
  key: "render",
863
906
  value: function render() {
864
- var _this10 = this;
907
+ var _this11 = this;
865
908
 
866
909
  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, {
867
910
  onClick: this.onAddNew,
@@ -871,7 +914,7 @@ var Circles = /*#__PURE__*/function (_Component) {
871
914
  }, /*#__PURE__*/React.createElement(Components$4.Text, {
872
915
  type: "h1",
873
916
  className: ""
874
- }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React.createElement(Table, {
917
+ }, values.textFeatureTitle), this.renderFilters(), this.renderUnreadFilterInfo(), /*#__PURE__*/React.createElement(Table, {
875
918
  className: "plussTable",
876
919
  striped: true,
877
920
  bordered: true,
@@ -885,7 +928,7 @@ var Circles = /*#__PURE__*/function (_Component) {
885
928
  width: 50
886
929
  }
887
930
  }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
888
- return _this10.renderRow(circle);
931
+ return _this11.renderRow(circle);
889
932
  })))));
890
933
  }
891
934
  }]);
package/dist/index.umd.js CHANGED
@@ -365,7 +365,7 @@
365
365
  case 0:
366
366
  return _context4.abrupt("return", Session$4.authedFunction({
367
367
  method: 'post',
368
- url: Helper$3.getUrl('notifications', 'resetunread'),
368
+ url: Helper$3.getUrl('groups', 'resetunread'),
369
369
  data: {
370
370
  groupID: circleId,
371
371
  userID: userId
@@ -391,6 +391,11 @@
391
391
  var Apis$1 = PlussCore__namespace.Apis;
392
392
  var analyticsActions = Apis$1.analyticsActions;
393
393
 
394
+ 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}}
395
+
396
+ 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";
397
+ n(css,{});
398
+
394
399
  function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
395
400
 
396
401
  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; } }
@@ -703,13 +708,23 @@
703
708
  value: function renderRow(circle) {
704
709
  var _this6 = this;
705
710
 
711
+ var unreadCount = this.getUnreadCount(circle);
712
+ var badge = unreadCount > 0 ? /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
713
+ className: css.badgeTag,
714
+ text: "".concat(unreadCount, " new")
715
+ }) : null;
706
716
  return /*#__PURE__*/React__default['default'].createElement("tr", {
707
717
  key: circle.Id
708
718
  }, /*#__PURE__*/React__default['default'].createElement("td", {
709
719
  className: "table-TitleColumn"
720
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
721
+ className: "flex flex-center",
722
+ style: {
723
+ gap: "8px"
724
+ }
710
725
  }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
711
726
  to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
712
- }, 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) {
727
+ }, this.getTitle(circle)), badge)), /*#__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) {
713
728
  return /*#__PURE__*/React__default['default'].createElement(Components$4.ProfilePic, {
714
729
  size: 30,
715
730
  image: user.profilePic,
@@ -747,10 +762,38 @@
747
762
  name: "minus-circle"
748
763
  })))));
749
764
  }
765
+ }, {
766
+ key: "renderUnreadFilterInfo",
767
+ value: function renderUnreadFilterInfo() {
768
+ var _this7 = this;
769
+
770
+ var showUnreadOnly = this.state.showUnreadOnly;
771
+
772
+ if (!showUnreadOnly) {
773
+ return null;
774
+ }
775
+
776
+ return /*#__PURE__*/React__default['default'].createElement("div", {
777
+ className: css.unreadFilterBanner
778
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
779
+ className: css.unreadFilterContent
780
+ }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
781
+ name: "info-circle",
782
+ className: css.unreadFilterIcon
783
+ }), /*#__PURE__*/React__default['default'].createElement("span", {
784
+ className: css.unreadFilterText
785
+ }, "Showing only items with new messages.", " ", /*#__PURE__*/React__default['default'].createElement("button", {
786
+ className: css.unreadFilterButton,
787
+ onClick: function onClick() {
788
+ return _this7.selectUnreadFilter(false);
789
+ },
790
+ "aria-label": "Turn off unread filter"
791
+ }, "Turn off filter"))));
792
+ }
750
793
  }, {
751
794
  key: "renderFilters",
752
795
  value: function renderFilters() {
753
- var _this7 = this;
796
+ var _this8 = this;
754
797
 
755
798
  var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
756
799
  className: "marginRight-10",
@@ -760,7 +803,7 @@
760
803
  var unreadFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
761
804
  className: "marginRight-10",
762
805
  onClick: function onClick() {
763
- return _this7.selectUnreadFilter(!_this7.state.showUnreadOnly);
806
+ return _this8.selectUnreadFilter(!_this8.state.showUnreadOnly);
764
807
  },
765
808
  leftIcon: this.state.showUnreadOnly ? "check" : null,
766
809
  text: "Unread Only"
@@ -799,19 +842,19 @@
799
842
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
800
843
  type: "h5",
801
844
  className: "marginRight-20"
802
- }, "Filter by"), userFilter, unreadFilter, typeFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
845
+ }, "Filter by"), userFilter, typeFilter, unreadFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
803
846
  type: "h5",
804
847
  className: "marginRight-20 marginLeft-20"
805
848
  }, "Sort by:"), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
806
849
  className: "marginRight-10",
807
850
  onClick: function onClick() {
808
- return _this7.selectSort("newest");
851
+ return _this8.selectSort("newest");
809
852
  },
810
853
  leftIcon: this.state.sortBy === "newest" ? "check" : null,
811
854
  text: "Newest first"
812
855
  }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
813
856
  onClick: function onClick() {
814
- return _this7.selectSort("oldest");
857
+ return _this8.selectSort("oldest");
815
858
  },
816
859
  leftIcon: this.state.sortBy === "oldest" ? "check" : null,
817
860
  text: "Oldest first"
@@ -820,7 +863,7 @@
820
863
  }, {
821
864
  key: "renderUserFilterPopup",
822
865
  value: function renderUserFilterPopup() {
823
- var _this8 = this;
866
+ var _this9 = this;
824
867
 
825
868
  if (!this.state.userFilterOpen) {
826
869
  return null;
@@ -840,7 +883,7 @@
840
883
  placeholder: "Enter name",
841
884
  value: this.state.userSearch,
842
885
  onChange: function onChange(e) {
843
- return _this8.onHandleChange(e);
886
+ return _this9.onHandleChange(e);
844
887
  },
845
888
  alwaysShowLabel: true
846
889
  }), this.getUsers().map(function (user) {
@@ -848,7 +891,7 @@
848
891
  key: user.userId,
849
892
  user: user,
850
893
  onClick: function onClick() {
851
- _this8.selectUserFilter(user);
894
+ _this9.selectUserFilter(user);
852
895
  }
853
896
  });
854
897
  }));
@@ -856,7 +899,7 @@
856
899
  }, {
857
900
  key: "renderTypeFilterPopup",
858
901
  value: function renderTypeFilterPopup() {
859
- var _this9 = this;
902
+ var _this10 = this;
860
903
 
861
904
  if (!this.state.typeFilterOpen) {
862
905
  return null;
@@ -870,13 +913,13 @@
870
913
  onClose: this.closeTypeFilter
871
914
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
872
915
  onClick: function onClick() {
873
- _this9.selectTypeFilter("circle");
916
+ _this10.selectTypeFilter("circle");
874
917
  },
875
918
  text: ___default['default'].capitalize(values.entityName),
876
919
  className: "marginRight-10"
877
920
  }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
878
921
  onClick: function onClick() {
879
- _this9.selectTypeFilter("private");
922
+ _this10.selectTypeFilter("private");
880
923
  },
881
924
  text: "Private Message"
882
925
  }));
@@ -884,7 +927,7 @@
884
927
  }, {
885
928
  key: "render",
886
929
  value: function render() {
887
- var _this10 = this;
930
+ var _this11 = this;
888
931
 
889
932
  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, {
890
933
  onClick: this.onAddNew,
@@ -894,7 +937,7 @@
894
937
  }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
895
938
  type: "h1",
896
939
  className: ""
897
- }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
940
+ }, values.textFeatureTitle), this.renderFilters(), this.renderUnreadFilterInfo(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
898
941
  className: "plussTable",
899
942
  striped: true,
900
943
  bordered: true,
@@ -908,7 +951,7 @@
908
951
  width: 50
909
952
  }
910
953
  }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
911
- return _this10.renderRow(circle);
954
+ return _this11.renderRow(circle);
912
955
  })))));
913
956
  }
914
957
  }]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plusscommunities/pluss-circles-web-groups",
3
- "version": "1.5.7-beta.1",
3
+ "version": "1.5.7-beta.2",
4
4
  "description": "Extension package to enable circles on Pluss Communities Platform",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {
package/src/apis/circleActions.js CHANGED
@@ -116,7 +116,7 @@ export const circleActions = {
116
116
  markAsRead: async (circleId, userId) => {
117
117
  return Session.authedFunction({
118
118
  method: 'post',
119
- url: Helper.getUrl('notifications', 'resetunread'),
119
+ url: Helper.getUrl('groups', 'resetunread'),
120
120
  data: {
121
121
  groupID: circleId,
122
122
  userID: userId,
package/src/screens/Circles.js CHANGED
@@ -9,6 +9,7 @@ import { circleActions } from "../apis";
9
9
  import { Table } from "react-bootstrap";
10
10
  import FontAwesome from "react-fontawesome";
11
11
  import { values } from "../values.config";
12
+ import badgeStyles from "./Circles.module.css";
12
13
 
13
14
  const { Components, Session, Helper } = PlussCore;
14
15
 
@@ -259,12 +260,23 @@ class Circles extends Component {
259
260
  };
260
261
 
261
262
  renderRow(circle) {
263
+ const unreadCount = this.getUnreadCount(circle);
264
+ const badge = unreadCount > 0 ? (
265
+ <Components.Tag
266
+ className={badgeStyles.badgeTag}
267
+ text={`${unreadCount} new`}
268
+ />
269
+ ) : null;
270
+
262
271
  return (
263
272
  <tr key={circle.Id}>
264
273
  <td className="table-TitleColumn">
265
- <Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>
266
- {this.getTitle(circle)}
267
- </Link>
274
+ <div className="flex flex-center" style={{ gap: "8px" }}>
275
+ <Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>
276
+ {this.getTitle(circle)}
277
+ </Link>
278
+ {badge}
279
+ </div>
268
280
  </td>
269
281
  <td>{moment(circle.Changed).local().format("D MMM YYYY")}</td>
270
282
  <td>
@@ -317,6 +329,35 @@ class Circles extends Component {
317
329
  );
318
330
  }
319
331
 
332
+ renderUnreadFilterInfo() {
333
+ const { showUnreadOnly } = this.state;
334
+
335
+ if (!showUnreadOnly) {
336
+ return null;
337
+ }
338
+
339
+ return (
340
+ <div className={badgeStyles.unreadFilterBanner}>
341
+ <div className={badgeStyles.unreadFilterContent}>
342
+ <FontAwesome
343
+ name="info-circle"
344
+ className={badgeStyles.unreadFilterIcon}
345
+ />
346
+ <span className={badgeStyles.unreadFilterText}>
347
+ Showing only items with new messages.{" "}
348
+ <button
349
+ className={badgeStyles.unreadFilterButton}
350
+ onClick={() => this.selectUnreadFilter(false)}
351
+ aria-label="Turn off unread filter"
352
+ >
353
+ Turn off filter
354
+ </button>
355
+ </span>
356
+ </div>
357
+ </div>
358
+ );
359
+ }
360
+
320
361
  renderFilters() {
321
362
  let userFilter = (
322
363
  <Components.Tag
@@ -376,8 +417,8 @@ class Circles extends Component {
376
417
  Filter by
377
418
  </Components.Text>
378
419
  {userFilter}
379
- {unreadFilter}
380
420
  {typeFilter}
421
+ {unreadFilter}
381
422
  <Components.Text type="h5" className="marginRight-20 marginLeft-20">
382
423
  Sort by:
383
424
  </Components.Text>
@@ -480,6 +521,7 @@ class Circles extends Component {
480
521
  {values.textFeatureTitle}
481
522
  </Components.Text>
482
523
  {this.renderFilters()}
524
+ {this.renderUnreadFilterInfo()}
483
525
 
484
526
  <Table
485
527
  className="plussTable"
package/src/screens/Circles.module.css ADDED
@@ -0,0 +1,96 @@
1
+ /* Badge styling for unread count */
2
+ :root {
3
+ --badge-bg-color: #597db4; /* COLOUR_BRANDING_OFF */
4
+ }
5
+
6
+ .badgeTag {
7
+ font-size: 11px;
8
+ font-weight: 400;
9
+ padding: 3px 10px;
10
+ background-color: var(--badge-bg-color) !important;
11
+ color: #fff !important;
12
+ border-radius: 999px !important;
13
+ border: none !important;
14
+ display: inline-flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ line-height: 1;
18
+ letter-spacing: 0.02em;
19
+ }
20
+
21
+ /* Unread filter info banner */
22
+ .unreadFilterBanner {
23
+ background-color: #f0f4f8;
24
+ border-left: 3px solid var(--badge-bg-color);
25
+ border-radius: 4px;
26
+ padding: 12px 16px;
27
+ margin-top: 16px;
28
+ margin-bottom: 16px;
29
+ display: flex;
30
+ align-items: center;
31
+ }
32
+
33
+ .unreadFilterContent {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 10px;
37
+ width: 100%;
38
+ }
39
+
40
+ .unreadFilterIcon {
41
+ font-size: 16px;
42
+ color: var(--badge-bg-color);
43
+ flex-shrink: 0;
44
+ }
45
+
46
+ .unreadFilterText {
47
+ font-size: 14px;
48
+ line-height: 1.5;
49
+ color: #333333;
50
+ }
51
+
52
+ .unreadFilterButton {
53
+ background: none;
54
+ border: none;
55
+ color: var(--badge-bg-color);
56
+ font-size: 14px;
57
+ font-weight: 500;
58
+ text-decoration: underline;
59
+ cursor: pointer;
60
+ padding: 4px 8px;
61
+ margin-left: 4px;
62
+ min-height: 32px;
63
+ min-width: 32px;
64
+ transition: all 0.2s ease;
65
+ }
66
+
67
+ .unreadFilterButton:hover {
68
+ background-color: rgba(89, 125, 180, 0.1);
69
+ text-decoration: none;
70
+ }
71
+
72
+ .unreadFilterButton:focus {
73
+ outline: 2px solid var(--badge-bg-color);
74
+ outline-offset: 2px;
75
+ border-radius: 2px;
76
+ }
77
+
78
+ /* Mobile responsiveness */
79
+ @media (max-width: 768px) {
80
+ .unreadFilterBanner {
81
+ flex-direction: column;
82
+ align-items: flex-start;
83
+ padding: 12px;
84
+ }
85
+
86
+ .unreadFilterContent {
87
+ flex-direction: column;
88
+ align-items: flex-start;
89
+ gap: 8px;
90
+ }
91
+
92
+ .unreadFilterText {
93
+ font-size: 13px;
94
+ }
95
+ }
96
+