WIP(teams): very janky multi status

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

@@ -1,6 +1,21 @@
 <template>
   <div>
-    <approval-modal :task="task" />
+    <div
+      v-if="showStatus"
+    >
+      <div
+        v-for="completion in completionsList"
+        :key="completion.userId"
+        class="completion-row mb-1"
+      >
+        <div>
+          <span v-if="completion.completed">✅</span>
+          <span v-else>❎</span>
+          <span>@{{ completion.userName }}</span>
+        </div>
+        <div v-if='completion.completedDate'>{{ completion.completedDateString }}</div>
+      </div>
+    </div>
     <div
       class="claim-bottom-message d-flex align-items-center"
     >
@@ -55,31 +70,19 @@
       color: $gray-100;
     }
   }
-
-  .approve-color {
-    color: $green-10 !important;
-  }
-  .claim-color {
-    color: $blue-10 !important;
-  }
-  .unclaim-color {
-    color: $red-50 !important;
+  .completion-row { // temporary
+    height: 2rem;
   }
 </style>
 
 <script>
 import findIndex from 'lodash/findIndex';
 import keys from 'lodash/keys';
+import moment from 'moment';
 import reduce from 'lodash/reduce';
 import { mapState } from '@/libs/store';
-import approvalModal from './approvalModal';
-import sync from '@/mixins/sync';
 
 export default {
-  components: {
-    approvalModal,
-  },
-  mixins: [sync],
   props: ['task', 'group'],
   data () {
     return {
@@ -92,6 +95,10 @@ export default {
       return this.task.group.assignedUsers
         && Boolean(this.task.group.assignedUsers[this.user._id]);
     },
+    userIsManager () {
+      return this.group
+      && (this.group.leader.id === this.user._id || this.group.managers[this.user._id]);
+    },
     assignedUsersKeys () {
       return keys(this.task.group.assignedUsers);
     },
@@ -104,6 +111,27 @@ export default {
         return count;
       }, 0);
     },
+    completionsList () {
+      const completionsArray = [];
+      for (const userId of this.assignedUsersKeys) {
+        const index = findIndex(this.group.members, member => member._id === userId);
+        const { completedDate } = this.task.group.assignedUsers[userId];
+        let completedDateString;
+        if (completedDate && moment().diff(completedDate, 'days') > 0) {
+          completedDateString = `Last completed ${moment(completedDate).format('M/D/YY')}`;
+        } else {
+          completedDateString = `Completed today at ${moment(completedDate).format('h:mm A')}`;
+        }
+        completionsArray.push({
+          userId,
+          userName: this.group.members[index].auth.local.username,
+          completed: this.task.group.assignedUsers[userId].completed,
+          completedDate,
+          completedDateString,
+        });
+      }
+      return completionsArray;
+    },
     message () {
       if (this.assignedUsersCount === 1 && !this.userIsAssigned) {
         const index = findIndex(
@@ -120,13 +148,6 @@ export default {
       } // Task is open; we shouldn't be showing message at all
       return this.$t('error');
     },
-    userIsManager () {
-      if (
-        this.group
-        && (this.group.leader.id === this.user._id || this.group.managers[this.user._id])
-      ) return true;
-      return false;
-    },
   },
 };
 </script>