fix(groups): style and data sync fixes

website/client/src/components/tasks/approvalFooter.vue

@@ -44,31 +44,37 @@
     >
       <div
         v-if="assignedUsersCount > 0"
-        class="svg-icon icon-16 ml-2 users-icon"
+        class="svg-icon icon-16 ml-2 users-icon color"
-        :class="{'green-50': completionsCount === assignedUsersCount}"
+        :class="{'green-10': completionsCount === assignedUsersCount}"
         v-html="icons.users"
       ></div>
       <div
         class="mr-auto ml-1 my-auto"
-        :class="{'green-10': showGreen}"
+        :class="{'green-10': completionsCount === assignedUsersCount}"
         v-html="message"
       ></div>
       <div
-        class="ml-auto mr-1 my-auto"
+        class="d-flex ml-auto mr-1 my-auto"
         v-if="task.group.assignedUsers && ['daily','todo'].indexOf(task.type) !== -1"
       >
         <span
           v-if="assignedUsersCount > 1"
-          class="mr-1 d-inline-flex align-items-center"
+          class="d-flex mr-1 my-auto"
         >
           <span
             class="small-check"
             v-if="!showStatus && completionsCount"
-            :class="{'green-50': completionsCount === assignedUsersCount}"
+          >
-            v-html="icons.check"
+            <div
-          ></span>
+              class="svg-icon color"
+              :class="{'green-10': completionsCount === assignedUsersCount}"
+              v-html="icons.check"
+            >
+            </div>
+          </span>
           <span
-            class="ml-1 mr-2"
+            class="ml-1 mr-2 my-auto"
+            :class="{'green-10': completionsCount === assignedUsersCount}"
             v-if="!showStatus && completionsCount"
           >
             {{ completionsCount }}/{{ assignedUsersCount }}
@@ -95,12 +101,12 @@
           <span
             v-html="icons.lastComplete"
             v-b-tooltip.hover.bottom="$t('lastCompleted')"
-            class="last-completed"
+            class="svg-icon color last-completed mr-1 my-auto"
-            :class="{'gray-200': !showGreen}"
+            :class="{'gray-200': completionsCount !== assignedUsersCount}"
           >
           </span>
           <span
-            :class="{'green-10': showGreen}"
+            :class="{'green-10': completionsCount === assignedUsersCount}"
           >
             {{ formattedCompletionTime }}
           </span>
@@ -110,39 +116,6 @@
   </div>
 </template>
 
-<style lang="scss">
-  .gray-200 > svg > g > path {
-    fill: #878190;
-  }
-
-  .green-50 > svg > g > g {
-    fill: #20b780;
-  }
-
-  .small-check {
-    display: inline-flex;
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    padding-left: 2px;
-    padding-top: 1px;
-    background-color: #e1e0e3;
-
-    svg {
-      margin: auto;
-      width: 8px;
-
-      path {
-        fill: #878190;
-      }
-    }
-
-    &.green-50 svg path {
-      fill: #20b780;
-    }
-  }
-</style>
-
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
   .claim-bottom-message {
@@ -222,6 +195,20 @@
     margin-bottom: 4px;
   }
 
+  .small-check {
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    background-color: $gray-500;
+
+    .svg-icon {
+      width: 8px;
+      height: 6px;
+      margin: auto;
+    }
+  }
+
   .users-icon {
     margin-top: -1px;
   }
@@ -327,11 +314,6 @@ export default {
       if (completion) return completion.completedDate;
       return null;
     },
-    showGreen () {
-      if (this.assignedUsersCount !== 1) return false;
-      return this.singleAssignLastDone
-        && this.task?.group?.assignedUsersDetail[this.user._id].completed;
-    },
     formattedCompletionTime () {
       if (!this.singleAssignLastDone) return '';
       if (moment().diff(this.singleAssignLastDone, 'days') < 1) {

website/client/src/components/tasks/modal-controls/checklist.vue

@@ -8,15 +8,16 @@
         :text="$t('checklist')"
       />
       <div
-        class="svg-icon icon-16 my-auto ml-auto"
+        class="svg-icon icon-16 my-auto ml-auto pointer"
-        :class="{'chevron-flip': !hideChecklist}"
+        :class="{'chevron-flip': showChecklist}"
         v-html="icons.chevron"
-        @click="hideChecklist = !hideChecklist"
+        @click="showChecklist = !showChecklist"
       >
       </div>
     </div>
-    <div
+    <b-collapse
-      v-if="!hideChecklist"
+      id="checklistCollapse"
+      v-model="showChecklist"
     >
       <draggable
         v-model="checklist"
@@ -91,7 +92,7 @@
           @blur="addChecklistItem($event, false)"
         >
       </div>
-    </div>
+    </b-collapse>
   </div>
 </template>
 
@@ -131,7 +132,7 @@ export default {
   data () {
     return {
       checklist: this.items,
-      hideChecklist: false,
+      showChecklist: true,
       hasPossibilityOfIMEConversion: true,
       newChecklistItem: null,
       icons: Object.freeze({
@@ -193,14 +194,18 @@ export default {
       transform: translateY(-5px) rotate(180deg);
     }
 
-    .top-border {
-      border-top: 1px solid $gray-500;
-    }
-
     .lock-icon {
       color: $gray-200;
     }
 
+    .pointer {
+      cursor: pointer;
+    }
+
+    .top-border {
+      border-top: 1px solid $gray-500;
+    }
+
     .checklist-group {
       height: 2rem;
       border-bottom: 1px solid $gray-500;

website/client/src/components/tasks/task.vue

@@ -1061,7 +1061,7 @@ export default {
     },
     isOpenTask () {
       if (!this.isGroupTask) return false;
-      if (this.task.group.assignedUsers.length > 0) return false;
+      if (this.task?.group?.assignedUsers?.length > 0) return false;
       return true;
     },
     showCheckIcon () {

website/client/src/components/tasks/taskSummary.vue

@@ -2,7 +2,6 @@
   <b-modal
     id="task-summary"
     :hide-footer="true"
-    @show="syncTask()"
     @hidden="$emit('cancel')"
   >
     <div
@@ -58,18 +57,18 @@
       </div>
       <div
         class="summary-block"
-        v-if="assignedMembers.length > 0"
+        v-if="assignedUsernames.length > 0"
       >
         <h3> {{ $t('assignedTo') }} </h3>
         <div
           class="d-flex flex-wrap"
         >
           <span
-            v-for="member in assignedMembers"
+            v-for="member in assignedUsernames"
             :key="member"
             class="assigned-member py-1 px-75 mr-1"
-            v-html="memberNamesById[member]"
           >
+            @{{ member }}
           </span>
         </div>
       </div>
@@ -139,6 +138,7 @@
     width: 16px;
     position: relative;
     opacity: 0.75;
+    cursor: pointer;
 
     &:hover, &:focus {
       opacity: 1;
@@ -180,7 +180,6 @@ import moment from 'moment';
 import pickBy from 'lodash/pickBy';
 
 import checklist from './modal-controls/checklist';
-import syncTask from '../../mixins/syncTask';
 import { mapGetters, mapState } from '@/libs/store';
 
 import closeIcon from '@/assets/svg/close.svg';
@@ -189,7 +188,6 @@ export default {
   components: {
     checklist,
   },
-  mixins: [syncTask],
   props: ['task'],
   data () {
     return {
@@ -205,10 +203,6 @@ export default {
       icons: Object.freeze({
         close: closeIcon,
       }),
-      assignedMembers: [],
-      members: [],
-      membersNameAndId: [],
-      memberNamesById: {},
     };
   },
   computed: {
@@ -218,6 +212,14 @@ export default {
     ...mapState({
       user: 'user.data',
     }),
+    assignedUsernames () {
+      if (!this.task.group || !this.task.group.assignedUsers) return [];
+      const usernames = [];
+      for (const user of this.task.group.assignedUsers) {
+        usernames.push(this.task.group.assignedUsersDetail[user].assignedUsername);
+      }
+      return usernames;
+    },
     summarySentence () {
       if (this.task.type === 'daily' && moment().isBefore(this.task.startDate)) {
         return `This is ${this.formattedDifficulty(this.task.priority)} task that will repeat