added comment section on card details to avoid loading the card comment activities from the server

- and added to show only the activities a card

- to display the card comments a connection to the server was needed to get the activities of the card comments, now, it's not necessary
- also performance relevant. until now there were a lot of activities loaded, now only of the current card

client/components/activities/activities.css

@@ -49,43 +49,6 @@
   margin-top: 5px;
   padding: 5px;
 }
-.activities .activity .activity-desc .reactions {
-  display: flex;
-  margin-top: 5px;
-  gap: 5px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  height: 24px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
-  font-size: 17px;
-  font-weight: 500;
-  margin-left: 2px;
-}
-.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
-  font-size: 8px;
-  margin-top: -7px;
-  margin-left: 1px;
-}
-.activities .activity .activity-desc .reactions .reaction {
-  cursor: pointer;
-  border: 1px solid #808080;
-  border-radius: 15px;
-  display: flex;
-  padding: 2px 5px;
-}
-.activities .activity .activity-desc .reactions .reaction.selected {
-  background-color: #b0c4de;
-}
-.activities .activity .activity-desc .reactions .reaction:hover {
-  background-color: #b0c4de;
-}
-.activities .activity .activity-desc .reactions .reaction .reaction-count {
-  font-size: 12px;
-}
 .activities .activity .activity-desc .activity-checklist {
   display: block;
   border-radius: 3px;

client/components/activities/activities.jade

@@ -1,11 +1,12 @@
 template(name="activities")
-  .activities.js-sidebar-activities
-    //- We should use Template.dynamic here but there is a bug with
-    //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
-    if $eq mode "board"
-      +boardActivities
-    else
-      +cardActivities
+  if showActivities
+    .activities.js-sidebar-activities
+      //- We should use Template.dynamic here but there is a bug with
+      //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
+      if $eq mode "board"
+        +boardActivities
+      else
+        +cardActivities
 
 template(name="boardActivities")
   each activityData in currentBoard.activities
@@ -15,31 +16,6 @@ template(name="cardActivities")
   each activityData in activities
     +activity(activity=activityData card=card mode=mode)
 
-template(name="editOrDeleteComment")
-  a.js-open-inlined-form {{_ "edit"}}
-  = ' - '
-  a.js-delete-comment {{_ "delete"}}
-
-template(name="deleteCommentPopup")
-  p {{_ "comment-delete"}}
-  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
-
-template(name="commentReactions")
-  .reactions
-    each reaction in reactions
-      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
-        span.reaction-codepoint !{reaction.reactionCodepoint}
-        span.reaction-count #{reaction.userIds.length}
-    if (currentUser.isBoardMember)
-      a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
-        i.fa.fa-smile-o
-        i.fa.fa-plus
-
-template(name="addReactionPopup")
-  .reactions-popup
-    each codepoint in codepoints
-      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
-
 template(name="activity")
   .activity(data-id=activity._id)
     +userAvatar(userId=activity.user._id)
@@ -129,38 +105,17 @@ template(name="activity")
         | {{{_ 'activity-checklist-item-removed' (sanitize activity.checklist.title) cardLink}}}.
 
       //- comment activity ----------------------------------------------------
-      if($eq mode 'card')
-        //- if we are in card mode we display the comment in a way that it
-        //- can be edited by the owner
-        if($eq activity.activityType 'addComment')
-          +inlinedForm(classNames='js-edit-comment')
-            +editor(autofocus=true)
-              = activity.comment.text
-            .edit-controls
-              button.primary(type="submit") {{_ 'edit'}}
-              .fa.fa-times-thin.js-close-inlined-form
-          else
-            .activity-comment
-              +viewer
-                = activity.comment.text
-            +commentReactions(reactions=activity.comment.reactions commentId=activity.comment._id)
-            if($eq currentUser._id activity.comment.userId)
-              +editOrDeleteComment
-            else if currentUser.isBoardAdmin
-              +editOrDeleteComment
+      if($eq activity.activityType 'deleteComment')
+        | {{{_ 'activity-deleteComment' activity.commentId}}}.
 
-        if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' activity.commentId}}}.
+      if($eq activity.activityType 'editComment')
+        | {{{_ 'activity-editComment' activity.commentId}}}.
 
-        if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' activity.commentId}}}.
-      else
-        //- if we are not in card mode we only display a summary of the comment
-        if($eq activity.activityType 'addComment')
-          | {{{_ 'activity-on' cardLink}}}
-          a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
-            +viewer
-              = activity.comment.text
+      if($eq activity.activityType 'addComment')
+        | {{{_ 'activity-on' cardLink}}}
+        a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
+          +viewer
+            = activity.comment.text
 
       //- date activity ------------------------------------------------
       if($eq activity.activityType 'a-receivedAt')

client/components/activities/activities.js

@@ -17,8 +17,10 @@ BlazeComponent.extendComponent({
       if (mode) {
         const capitalizedMode = Utils.capitalize(mode);
         let searchId;
+        const showActivities = this.showActivities();
         if (mode === 'linkedcard' || mode === 'linkedboard') {
-          searchId = Utils.getCurrentCard().linkedId;
+          const currentCard = Utils.getCurrentCard();
+          searchId = currentCard.linkedId;
           mode = mode.replace('linked', '');
         } else if (mode === 'card') {
           searchId = Utils.getCurrentCardId();
@@ -26,11 +28,9 @@ BlazeComponent.extendComponent({
           searchId = Session.get(`current${capitalizedMode}`);
         }
         const limit = this.page.get() * activitiesPerPage;
-        const user = ReactiveCache.getCurrentUser();
-        const hideSystem = user ? user.hasHiddenSystemMessages() : false;
         if (searchId === null) return;
 
-        this.subscribe('activities', mode, searchId, limit, hideSystem, () => {
+        this.subscribe('activities', mode, searchId, limit, showActivities, () => {
           this.loadNextPageLocked = false;
 
           // TODO the guard can be removed as soon as the TODO above is resolved
@@ -56,14 +56,26 @@ BlazeComponent.extendComponent({
       this.loadNextPageLocked = true;
     }
   },
-}).register('activities');
-
-Template.activities.helpers({
-  activities() {
-    const ret = this.card.activities();
+  showActivities() {
+    let ret = false;
+    let mode = this.data()?.mode;
+    if (mode) {
+      if (mode === 'linkedcard' || mode === 'linkedboard') {
+        const currentCard = Utils.getCurrentCard();
+        ret = currentCard.showActivities ?? false;
+      } else if (mode === 'card') {
+        ret = this.data()?.card?.showActivities ?? false;
+      } else {
+        ret = Utils.getCurrentBoard().showActivities ?? false;
+      }
+    }
     return ret;
   },
-});
+  activities() {
+    const ret = this.data().card.activities();
+    return ret;
+  },
+}).register('activities');
 
 BlazeComponent.extendComponent({
   checkItem() {
@@ -249,32 +261,6 @@ BlazeComponent.extendComponent({
     return customField.name;
   },
 
-  events() {
-    return [
-      {
-        // XXX We should use Popup.afterConfirmation here
-        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
-          const commentId = this.data().activity.commentId;
-          CardComments.remove(commentId);
-          Popup.back();
-        }),
-        'submit .js-edit-comment'(evt) {
-          evt.preventDefault();
-          const commentText = this.currentComponent()
-            .getValue()
-            .trim();
-          const commentId = Template.parentData().activity.commentId;
-          if (commentText) {
-            CardComments.update(commentId, {
-              $set: {
-                text: commentText,
-              },
-            });
-          }
-        },
-      },
-    ];
-  },
 }).register('activity');
 
 Template.activity.helpers({

client/components/activities/comments.css

@@ -63,3 +63,78 @@
   display: block;
   margin: auto;
 }
+.comments {
+  clear: both;
+}
+.comments .comment {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.comments .comment .member {
+  width: 32px;
+  height: 32px;
+}
+.comments .comment .comment-member {
+  font-weight: 700;
+}
+.comments .comment .comment-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.comments .comment .comment-desc .comment-text {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.comments .comment .comment-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  font-weight: 500;
+  margin-left: 2px;
+}
+.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
+  font-size: 8px;
+  margin-top: -7px;
+  margin-left: 1px;
+}
+.comments .comment .comment-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.comments .comment .comment-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.comments .comment .comment-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.comments .comment .comment-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.comments .comment .comment-desc .comment-meta {
+  font-size: 0.8em;
+  color: #999;
+}

client/components/activities/comments.jade

@@ -7,3 +7,59 @@ template(name="commentForm")
         | {{getUnsavedValue 'cardComment' currentCard._id}}
       .add-controls
         button.primary.confirm.clear.js-add-comment(type="submit") {{_ 'comment'}}
+
+template(name="comments")
+  .comments
+    each commentData in getComments
+      +comment(commentData)
+
+template(name="comment")
+  .comment
+    +userAvatar(userId=userId)
+    p.comment-desc
+      span.comment-member
+        +memberName(user=user)
+
+      +inlinedForm(classNames='js-edit-comment')
+        +editor(autofocus=true)
+          = text
+        .edit-controls
+          button.primary(type="submit") {{_ 'edit'}}
+          .fa.fa-times-thin.js-close-inlined-form
+      else
+        .comment-text
+          +viewer
+            = text
+        +commentReactions(reactions=reactions commentId=_id)
+        span(title=createdAt).comment-meta {{ moment createdAt }}
+          if($eq currentUser._id userId)
+            +editOrDeleteComment
+          else if currentUser.isBoardAdmin
+            +editOrDeleteComment
+
+template(name="editOrDeleteComment")
+  = ' - '
+  a.js-open-inlined-form {{_ "edit"}}
+  = ' - '
+  a.js-delete-comment {{_ "delete"}}
+
+template(name="deleteCommentPopup")
+  p {{_ "comment-delete"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="commentReactions")
+  .reactions
+    each reaction in reactions
+      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
+        span.reaction-codepoint !{reaction.reactionCodepoint}
+        span.reaction-count #{reaction.userIds.length}
+    if (currentUser.isBoardMember)
+      a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
+        i.fa.fa-smile-o
+        i.fa.fa-plus
+
+template(name="addReactionPopup")
+  .reactions-popup
+    each codepoint in codepoints
+      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
+

client/components/activities/comments.js

@@ -55,6 +55,41 @@ BlazeComponent.extendComponent({
   },
 }).register('commentForm');
 
+BlazeComponent.extendComponent({
+  getComments() {
+    const ret = this.data().comments();
+    return ret;
+  },
+}).register("comments");
+
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
+          const commentId = this.data()._id;
+          CardComments.remove(commentId);
+          Popup.back();
+        }),
+        'submit .js-edit-comment'(evt) {
+          evt.preventDefault();
+          const commentText = this.currentComponent()
+            .getValue()
+            .trim();
+          const commentId = this.data()._id;
+          if (commentText) {
+            CardComments.update(commentId, {
+              $set: {
+                text: commentText,
+              },
+            });
+          }
+        },
+      },
+    ];
+  },
+}).register("comment");
+
 // XXX This should be a static method of the `commentForm` component
 function resetCommentInput(input) {
   input.val(''); // without manually trigger, input event won't be fired

client/components/cards/cardDetails.jade

@@ -569,25 +569,34 @@ template(name="cardDetails")
             +attachmentGallery
       hr
 
+      unless currentUser.isNoComments
+        .comment-title
+          h3.card-details-item-title
+            i.fa.fa-comment-o
+            | {{_ 'comments'}}
+
+        if currentBoard.allowsComments
+          if currentUser.isBoardMember
+            unless currentUser.isNoComments
+              +commentForm
+              +comments
+      hr
+
     .card-details-right
 
       unless currentUser.isNoComments
         .activity-title
           h3.card-details-item-title
             i.fa.fa-history
-            | {{ _ 'activity'}}
+            | {{ _ 'activities'}}
           if currentUser.isBoardMember
-            .material-toggle-switch(title="{{_ 'hide-system-messages'}}")
-              //span.toggle-switch-title
-              if hiddenSystemMessages
-                input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
+            .material-toggle-switch(title="{{_ 'show-activities'}}")
+              if showActivities
+                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard" checked="checked")
               else
-                input.toggle-switch(type="checkbox" id="toggleButton")
-              label.toggle-label(for="toggleButton")
-      if currentBoard.allowsComments
-        if currentUser.isBoardMember
-          unless currentUser.isNoComments
-            +commentForm
+                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
+              label.toggle-label(for="toggleShowActivitiesCard")
+
       unless currentUser.isNoComments
         if isLoaded.get
           if isLinkedCard

client/components/cards/cardDetails.js

@@ -63,10 +63,6 @@ BlazeComponent.extendComponent({
     return card.findWatcher(Meteor.userId());
   },
 
-  hiddenSystemMessages() {
-    return ReactiveCache.getCurrentUser().hasHiddenSystemMessages();
-  },
-
   customFieldsGrid() {
     return ReactiveCache.getCurrentUser().hasCustomFieldsGrid();
   },
@@ -377,8 +373,8 @@ BlazeComponent.extendComponent({
           Session.set('cardDetailsIsDragging', false);
           Session.set('cardDetailsIsMouseDown', false);
         },
-        'click #toggleButton'() {
-          Meteor.call('toggleSystemMessages');
+        'click #toggleShowActivitiesCard'() {
+          this.data().toggleShowActivities();
         },
         'click #toggleCustomFieldsGridButton'() {
           Meteor.call('toggleCustomFieldsGrid');

client/components/settings/settingBody.jade

@@ -144,8 +144,6 @@ template(name='tableVisibilityModeSettings')
 
 template(name='accountSettings')
   ul#account-setting.setting-detail
-    li
-      button.js-all-hide-system-messages.primary {{_ 'hide-system-messages-of-all-users'}}
     li.accounts-form
       .title {{_ 'accounts-allowEmailChange'}}
       .form-group.flex
@@ -185,6 +183,8 @@ template(name='announcementSettings')
 
 template(name='layoutSettings')
   ul#layout-setting.setting-detail
+    li
+      button.js-all-boards-hide-activities.primary {{_ 'hide-activities-of-all-boards'}}
     li.layout-form
       .title {{_ 'oidc-button-text'}}
       .form-group

client/components/settings/settingBody.js

@@ -336,12 +336,12 @@ BlazeComponent.extendComponent({
   allowUserDelete() {
     return AccountSettings.findOne('accounts-allowUserDelete').booleanValue;
   },
-  allHideSystemMessages() {
-    Meteor.call('setAllUsersHideSystemMessages', (err, ret) => {
+  allBoardsHideActivities() {
+    Meteor.call('setAllBoardsHideActivities', (err, ret) => {
       if (!err && ret) {
         if (ret === true) {
           const message = `${TAPi18n.__(
-            'now-system-messages-of-all-users-are-hidden',
+            'now-activities-of-all-boards-are-hidden',
           )}`;
           alert(message);
         }
@@ -359,7 +359,7 @@ BlazeComponent.extendComponent({
         'click button.js-accounts-save': this.saveAccountsChange,
       },
       {
-        'click button.js-all-hide-system-messages': this.allHideSystemMessages,
+        'click button.js-all-boards-hide-activities': this.allBoardsHideActivities,
       },
     ];
   },
@@ -376,12 +376,12 @@ BlazeComponent.extendComponent({
   allowPrivateOnly() {
     return TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
   },
-  allHideSystemMessages() {
-    Meteor.call('setAllUsersHideSystemMessages', (err, ret) => {
+  allBoardsHideActivities() {
+    Meteor.call('setAllBoardsHideActivities', (err, ret) => {
       if (!err && ret) {
         if (ret === true) {
           const message = `${TAPi18n.__(
-            'now-system-messages-of-all-users-are-hidden',
+            'now-activities-of-all-boards-are-hidden',
           )}`;
           alert(message);
         }
@@ -399,7 +399,7 @@ BlazeComponent.extendComponent({
         'click button.js-tableVisibilityMode-save': this.saveTableVisibilityChange,
       },
       {
-        'click button.js-all-hide-system-messages': this.allHideSystemMessages,
+        'click button.js-all-boards-hide-activities': this.allBoardsHideActivities,
       },
     ];
   },

client/components/sidebar/sidebar.jade

@@ -28,9 +28,16 @@ template(name='homeSidebar')
       .materialCheckBox(class="{{#if hiddenMinicardLabelText}}is-checked{{/if}}")
   hr
   unless currentUser.isNoComments
-    h3
+    h3.activity-title
       i.fa.fa-comments-o
       | {{_ 'activities'}}
+
+      .material-toggle-switch(title="{{_ 'show-activities'}}")
+        if showActivities
+          input.toggle-switch(type="checkbox" id="toggleShowActivitiesBoard" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleShowActivitiesBoard")
+        label.toggle-label(for="toggleShowActivitiesBoard")
     +activities(mode="board")
 
 template(name="membersWidget")

client/components/sidebar/sidebar.js

@@ -136,7 +136,7 @@ BlazeComponent.extendComponent({
 
 Blaze.registerHelper('Sidebar', () => Sidebar);
 
-Template.homeSidebar.helpers({
+BlazeComponent.extendComponent({
   hiddenMinicardLabelText() {
     currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
@@ -147,7 +147,20 @@ Template.homeSidebar.helpers({
       return false;
     }
   },
-});
+  showActivities() {
+    let ret = Utils.getCurrentBoard().showActivities ?? false;
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'click #toggleShowActivitiesBoard'() {
+          Utils.getCurrentBoard().toggleShowActivities();
+        },
+      },
+    ];
+  },
+}).register('homeSidebar');
 
 Template.boardInfoOnMyBoardsPopup.helpers({
   hideCardCounterList() {

client/components/users/userHeader.jade

@@ -153,12 +153,6 @@ template(name="changeLanguagePopup")
 
 template(name="changeSettingsPopup")
   ul.pop-over-list
-    //li
-    //  a.js-toggle-system-messages
-    //    i.fa.fa-comments-o
-    //    | {{_ 'hide-system-messages'}}
-    //    if hiddenSystemMessages
-    //      i.fa.fa-check
     //li
     //  a.js-toggle-desktop-drag-handles
     //    i.fa.fa-arrows

client/components/users/userHeader.js

@@ -283,16 +283,6 @@ Template.changeLanguagePopup.events({
 });
 
 Template.changeSettingsPopup.helpers({
-  hiddenSystemMessages() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) {
-      return (currentUser.profile || {}).hasHiddenSystemMessages;
-    } else if (window.localStorage.getItem('hasHiddenSystemMessages')) {
-      return true;
-    } else {
-      return false;
-    }
-  },
   rescueCardDescription() {
     const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
@@ -352,16 +342,6 @@ Template.changeSettingsPopup.events({
       window.localStorage.setItem('showDesktopDragHandles', 'true');
     }
   },
-  'click .js-toggle-system-messages'() {
-    currentUser = Meteor.user();
-    if (currentUser) {
-      Meteor.call('toggleSystemMessages');
-    } else if (window.localStorage.getItem('hasHiddenSystemMessages')) {
-      window.localStorage.removeItem('hasHiddenSystemMessages');
-    } else {
-      window.localStorage.setItem('hasHiddenSystemMessages', 'true');
-    }
-  },
   'click .js-rescue-card-description'() {
     Meteor.call('toggleRescueCardDescription')
     },