WIP(teams): stylish and functional multi assign checkboxes

website/client/src/components/group-plans/taskInformation.vue

@@ -128,7 +128,6 @@
 import Vue from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
 import findIndex from 'lodash/findIndex';
-import groupBy from 'lodash/groupBy';
 import moment from 'moment';
 import taskDefaults from '@/../../common/script/libs/taskDefaults';
 import TaskColumn from '../tasks/column';
@@ -279,23 +278,10 @@ export default {
         groupId: this.searchId,
       });
 
-      const groupedApprovals = await this.loadApprovals();
-
       tasks.forEach(task => {
-        if (
-          groupedApprovals[task._id]
-          && groupedApprovals[task._id].length > 0
-        ) task.approvals = groupedApprovals[task._id];
         this.tasksByType[task.type].push(task);
       });
     },
-    async loadApprovals () {
-      const approvalRequests = await this.$store.dispatch('tasks:getGroupApprovals', {
-        groupId: this.searchId,
-      });
-
-      return groupBy(approvalRequests, 'group.taskId');
-    },
     editTask (task) {
       this.taskFormPurpose = 'edit';
       this.editingTask = cloneDeep(task);

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

@@ -8,14 +8,26 @@
       <div
         v-for="completion in completionsList"
         :key="completion.userId"
-        class="completion-row"
+        class="d-flex completion-row"
       >
+        <div class="control">
+          <div
+            class="inner d-flex justify-content-center align-items-center p-auto"
+            :class="{interactive: iconClass(completion) !== 'lock'}"
+            @click="iconClass(completion) !== 'lock' ? needsWork(completion) : null"
+          >
+            <div
+              class="icon"
+              :class="iconClass(completion)"
+              v-html="icons[iconClass(completion)]"
+            >
+            </div>
+          </div>
+        </div>
         <div
-          class="px-3 py-2"
+          class="px-3 py-2 info"
         >
           <div>
-            <span v-if="completion.completed">✅</span>
-            <span v-else>❎</span>
             <strong> @{{ completion.userName }} </strong>
           </div>
           <div
@@ -77,22 +89,61 @@
       color: $blue-10;
     }
   }
+
   .completion-row {
     height: 3rem;
     background-color: $gray-700;
     font-size: 12px;
 
-    &:not(:last-of-type) {
+    .control {
-      border-bottom: 1px solid $gray-500;
+      background-color: $gray-200;
+      border-top: 1px solid $gray-100;
+      width: 44px;
+      height: 48px;
+      padding: 9px 6px;
+
+      .inner {
+        width: 28px;
+        height: 28px;
+        padding: 6px;
+        border-radius: 2px;
+        background-color: rgba($white, 0.5);
+        cursor: default;
+
+        &.interactive {
+          cursor: pointer;
+
+          &:hover {
+            background-color: rgba($white, 0.75);
+          }
+        }
+
+        .icon {
+          color: $gray-10;
+
+          &.lock {
+            width: 10px;
+          }
+          &.check {
+            margin-left: 2px;
+            width: 12px;
+          }
+        }
+      }
     }
 
-    .green-10 {
+    .info {
-      color: $green-10;
+      width: 100%;
+      border-top: 1px solid $gray-600;
     }
   }
+
   .gray-100 {
     color: $gray-100;
   }
+  .green-10 {
+    color: $green-10;
+  }
 </style>
 
 <script>
@@ -101,12 +152,18 @@ import keys from 'lodash/keys';
 import moment from 'moment';
 import reduce from 'lodash/reduce';
 import { mapState } from '@/libs/store';
+import checkIcon from '@/assets/svg/check.svg';
+import lockIcon from '@/assets/svg/lock.svg';
 
 export default {
   props: ['task', 'group'],
   data () {
     return {
       showStatus: false,
+      icons: Object.freeze({
+        check: checkIcon,
+        lock: lockIcon,
+      }),
     };
   },
   computed: {
@@ -173,5 +230,18 @@ export default {
       return this.$t('error');
     },
   },
+  methods: {
+    iconClass (completion) {
+      if ((this.userIsAssigned || this.userIsManager) && completion.completed) return 'check';
+      return 'lock';
+    },
+    needsWork (completion) {
+      this.$store.dispatch('tasks:needsWork', {
+        taskId: this.task._id,
+        userId: completion.userId,
+      });
+      this.task.group.assignedUsers[completion.userId].completed = false;
+    },
+  },
 };
 </script>

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

@@ -669,9 +669,6 @@
     }
 
     input, textarea {
-      &:not(:host-context(.tags-popup)) {
-        border: none;
-      }
       transition-property: border-color, box-shadow, color, background;
       background-color: rgba(255, 255, 255, 0.5);
       &:focus:not(:disabled), &:active:not(:disabled), &:hover:not(:disabled) {

website/server/controllers/api-v3/tasks/groups.js

@@ -12,13 +12,12 @@ import {
   canNotEditTasks,
   createTasks,
   getTasks,
+  scoreTasks,
 } from '../../../libs/tasks';
 import {
   moveTask,
 } from '../../../libs/tasks/utils';
-import { handleSharedCompletion } from '../../../libs/groupTasks';
 import apiError from '../../../libs/apiError';
-import logger from '../../../libs/logger';
 
 const requiredGroupFields = '_id leader tasksOrder name';
 // @TODO: abstract to task lib
@@ -299,111 +298,6 @@ api.unassignTask = {
   },
 };
 
-/**
- * @api {post} /api/v3/tasks/:taskId/approve/:userId Approve a user's task
- * @apiDescription Approves a user assigned to a group task
- * @apiVersion 3.0.0
- * @apiName ApproveTask
- * @apiGroup Task
- *
- * @apiParam (Path) {UUID} taskId The id of the task that is the original group task
- * @apiParam (Path) {UUID} userId The id of the user that will be approved
- *
- * @apiSuccess task The approved task
- */
-api.approveTask = {
-  method: 'POST',
-  url: '/tasks/:taskId/approve/:userId',
-  middlewares: [authWithHeaders()],
-  async handler (req, res) {
-    req.checkParams('taskId', apiError('taskIdRequired')).notEmpty().isUUID();
-    req.checkParams('userId', res.t('userIdRequired')).notEmpty().isUUID();
-
-    const reqValidationErrors = req.validationErrors();
-    if (reqValidationErrors) throw reqValidationErrors;
-
-    const { user } = res.locals;
-    const assignedUserId = req.params.userId;
-    const assignedUser = await User.findById(assignedUserId).exec();
-
-    const { taskId } = req.params;
-    const task = await Tasks.Task.findOne({
-      'group.taskId': taskId,
-      userId: assignedUserId,
-    }).exec();
-
-    if (!task) {
-      throw new NotFound(res.t('messageTaskNotFound'));
-    }
-
-    const fields = requiredGroupFields.concat(' managers');
-    const group = await Group.getGroup({ user, groupId: task.group.id, fields });
-    if (!group) throw new NotFound(res.t('groupNotFound'));
-
-    if (canNotEditTasks(group, user)) throw new NotAuthorized(res.t('onlyGroupLeaderCanEditTasks'));
-    if (task.group.approval.approved === true) throw new NotAuthorized(res.t('canOnlyApproveTaskOnce'));
-    if (!task.group.approval.requested) {
-      throw new NotAuthorized(res.t('taskApprovalWasNotRequested'));
-    }
-
-    task.group.approval.dateApproved = new Date();
-    task.group.approval.approvingUser = user._id;
-    task.group.approval.approved = true;
-
-    // Get Managers
-    const managerIds = Object.keys(group.managers);
-    managerIds.push(group.leader);
-    const managers = await User.find({ _id: managerIds }, 'notifications').exec(); // Use this method so we can get access to notifications
-
-    // Get task direction
-    const firstManagerNotifications = managers[0].notifications;
-    const firstNotificationIndex = firstManagerNotifications.findIndex(notification => notification && notification.data && notification.data.taskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
-    let direction = 'up';
-    if (firstManagerNotifications[firstNotificationIndex]) {
-      direction = firstManagerNotifications[firstNotificationIndex].direction || direction;
-    }
-
-    // Remove old notifications
-    const approvalPromises = [];
-    managers.forEach(manager => {
-      const notificationIndex = manager.notifications.findIndex(notification => notification && notification.data && notification.data.taskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
-
-      if (notificationIndex !== -1) {
-        manager.notifications.splice(notificationIndex, 1);
-        approvalPromises.push(manager.save());
-      }
-    });
-
-    // Add new notifications to user
-    assignedUser.addNotification('GROUP_TASK_APPROVED', {
-      message: res.t('yourTaskHasBeenApproved', { taskText: task.text }),
-      groupId: group._id,
-      task,
-      direction,
-    });
-
-    approvalPromises.push(task.save());
-    approvalPromises.push(assignedUser.save());
-    await Promise.all(approvalPromises);
-
-    res.respond(200, task);
-
-    // Wrapping everything in a try/catch block because if an error occurs
-    // using `await` it MUST NOT bubble up because the request has already been handled
-    try {
-      const groupTask = await Tasks.Task.findOne({
-        _id: task.group.taskId,
-      }).exec();
-
-      if (groupTask) {
-        await handleSharedCompletion(groupTask, task);
-      }
-    } catch (e) {
-      logger.error('Error handling group task', e);
-    }
-  },
-};
-
 /**
  * @api {post} /api/v3/tasks/:taskId/needs-work/:userId Require more work for a group task
  * @apiDescription Mark an assigned group task as needing more work before it can be approved
@@ -435,122 +329,34 @@ api.taskNeedsWork = {
     const [assignedUser, task] = await Promise.all([
       User.findById(assignedUserId).exec(),
       await Tasks.Task.findOne({
-        'group.taskId': taskId,
+        _id: taskId,
-        userId: assignedUserId,
       }).exec(),
     ]);
 
     if (!task) {
       throw new NotFound(res.t('messageTaskNotFound'));
     }
+    if (['daily', 'todo'].indexOf(task.type) === -1) {
+      throw new BadRequest('Cannot roll back use of Habits or Rewards.');
+    }
+    if (!task.group.assignedUsers || !task.group.assignedUsers[assignedUserId]) {
+      throw new BadRequest('User not assigned to this task.');
+    }
+    if (!task.group.assignedUsers[assignedUserId].completed) {
+      throw new BadRequest('Task not completed by this user.');
+    }
 
     const fields = requiredGroupFields.concat(' managers');
     const group = await Group.getGroup({ user, groupId: task.group.id, fields });
     if (!group) throw new NotFound(res.t('groupNotFound'));
 
     if (canNotEditTasks(group, user)) throw new NotAuthorized(res.t('onlyGroupLeaderCanEditTasks'));
-    if (task.group.approval.approved === true) throw new NotAuthorized(res.t('canOnlyApproveTaskOnce'));
-    if (!task.group.approval.requested) {
-      throw new NotAuthorized(res.t('taskApprovalWasNotRequested'));
-    }
 
-    // Get Managers
+    await scoreTasks(assignedUser, [{ id: task._id, direction: 'down' }], req, res);
-    const managerIds = Object.keys(group.managers);
+    await Promise.all([assignedUser.save(), task.save()]);
-    managerIds.push(group.leader);
-    const managers = await User.find({ _id: managerIds }, 'notifications').exec(); // Use this method so we can get access to notifications
-
-    const promises = [];
-
-    // Remove old notifications
-    managers.forEach(manager => {
-      const notificationIndex = manager.notifications.findIndex(notification => notification && notification.data && notification.data.taskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
-
-      if (notificationIndex !== -1) {
-        manager.notifications.splice(notificationIndex, 1);
-        promises.push(manager.save());
-      }
-    });
-
-    task.group.approval.requested = false;
-    task.group.approval.requestedDate = undefined;
-
-    const taskText = task.text;
-    const managerName = user.profile.name;
-
-    const message = res.t('taskNeedsWork', { taskText, managerName }, assignedUser.preferences.language);
-
-    assignedUser.addNotification('GROUP_TASK_NEEDS_WORK', {
-      message,
-      task: {
-        id: task._id,
-        text: taskText,
-      },
-      group: {
-        id: group._id,
-        name: group.name,
-      },
-      manager: {
-        id: user._id,
-        name: managerName,
-      },
-    });
-
-    await Promise.all([...promises, assignedUser.save(), task.save()]);
 
     res.respond(200, task);
   },
 };
 
-/**
- * @api {get} /api/v3/approvals/group/:groupId Get a group's approvals
- * @apiVersion 3.0.0
- * @apiName GetGroupApprovals
- * @apiGroup Task
- *
- * @apiParam (Path) {UUID} groupId The id of the group from which to retrieve the approvals
- *
- * @apiSuccess {Array} data An array of tasks
- */
-api.getGroupApprovals = {
-  method: 'GET',
-  url: '/approvals/group/:groupId',
-  middlewares: [authWithHeaders()],
-  async handler (req, res) {
-    req.checkParams('groupId', apiError('groupIdRequired')).notEmpty().isUUID();
-
-    const validationErrors = req.validationErrors();
-    if (validationErrors) throw validationErrors;
-
-    const { user } = res.locals;
-    const { groupId } = req.params;
-
-    const fields = requiredGroupFields.concat(' managers');
-    const group = await Group.getGroup({ user, groupId, fields });
-    if (!group) throw new NotFound(res.t('groupNotFound'));
-
-    let approvals;
-    if (canNotEditTasks(group, user)) {
-      approvals = await Tasks.Task.find({
-        'group.id': groupId,
-        'group.approval.approved': { $ne: true },
-        'group.approval.requested': true,
-        'group.assignedUsers': user._id,
-        userId: user._id,
-      }, 'userId group text')
-        .populate('userId', 'profile')
-        .exec();
-    } else {
-      approvals = await Tasks.Task.find({
-        'group.id': groupId,
-        'group.approval.approved': { $ne: true },
-        'group.approval.requested': true,
-      }, 'userId group text')
-        .populate('userId', 'profile')
-        .exec();
-    }
-
-    res.respond(200, approvals);
-  },
-};
-
 export default api;