From 1c8b0f92df4bd97e5e4149c81c5f2443ce966d1b Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Thu, 5 Jul 2018 16:37:06 -0500
Subject: [PATCH] Small Group Plan fixes (#10499)

* fix(groups): better margins, don't close whole modal on close assigned members list

* fix(groups): proper sticky toggle switch
---
 website/client/components/tasks/taskModal.vue | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index 61c3bee5d9..87a11a04e4 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   form(v-if="task", @submit.stop.prevent="submit()")
-    b-modal#task-modal(size="sm", @hidden="onClose()", @shown="focusInput()")
+    b-modal#task-modal(size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
       .task-modal-header(slot="modal-header", :class="cssClass('bg')")
         .clearfix
           h1.float-left {{ title }}
@@ -159,11 +159,11 @@
         .option.group-options(v-if='groupId')
           .form-group.row
             label.col-12(v-once) {{ $t('assignedTo') }}
-            .col-12
+            .col-12.mt-2
               .category-wrap(@click="showAssignedSelect = !showAssignedSelect")
                 span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
                 span.category-select(v-else)
-                  span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
+                  span.mr-1(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
               .category-box(v-if="showAssignedSelect")
                 .container
                   .row
@@ -176,7 +176,7 @@
                         label.custom-control-label(v-once, :for="`assigned-${member._id}`") {{ member.profile.name }}
 
                   .row
-                    button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
+                    button.btn.btn-primary(@click.stop.prevent="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
 
         .option.group-options(v-if='groupId')
           .form-group
@@ -705,26 +705,8 @@ export default {
     };
   },
   watch: {
-    async task () {
-      if (this.groupId && this.task.group && this.task.group.approval && this.task.group.approval.required) {
-        this.requiresApproval = true;
-      }
-
-      if (this.groupId) {
-        let members = await this.$store.dispatch('members:getGroupMembers', {
-          groupId: this.groupId,
-          includeAllPublicFields: true,
-        });
-        this.members = members;
-        this.members.forEach(member => {
-          this.memberNamesById[member._id] = member.profile.name;
-        });
-        this.assignedMembers = [];
-        if (this.task.group && this.task.group.assignedUsers) this.assignedMembers = this.task.group.assignedUsers;
-      }
-
-      // @TODO: This whole component is mutating a prop and that causes issues. We need to not copy the prop similar to group modals
-      if (this.task) this.checklist = clone(this.task.checklist);
+    task () {
+      this.syncTask();
     },
     'task.startDate' () {
       this.calculateMonthlyRepeatDays();
@@ -813,6 +795,30 @@ export default {
   },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
+    async syncTask () {
+      if (this.groupId && this.task.group && this.task.group.approval) {
+        this.requiresApproval = this.task.group.approval.required;
+      }
+
+      if (this.groupId) {
+        let members = await this.$store.dispatch('members:getGroupMembers', {
+          groupId: this.groupId,
+          includeAllPublicFields: true,
+        });
+        this.members = members;
+        this.members.forEach(member => {
+          this.memberNamesById[member._id] = member.profile.name;
+        });
+        this.assignedMembers = [];
+        if (this.task.group && this.task.group.assignedUsers) this.assignedMembers = this.task.group.assignedUsers;
+      }
+
+      // @TODO: This whole component is mutating a prop and that causes issues. We need to not copy the prop similar to group modals
+      if (this.task) this.checklist = clone(this.task.checklist);
+    },
+    async handleOpen () {
+      this.syncTask();
+    },
     cssClass (suffix) {
       return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
     },
@@ -917,6 +923,7 @@ export default {
         if (this.groupId) {
           this.task.group.assignedUsers = this.assignedMembers;
           this.task.requiresApproval = this.requiresApproval;
+          this.task.group.approval.required = this.requiresApproval;
         }
 
         this.saveTask(this.task);