Group Plans quick wins (#11107)

* WIP(groups): quickish wins

* WIP(groups): two quick wins
1. Don't show task creation button if user is not leader or manager
2. Don't require JS confirm() for approving tasks

* fix(group-plans): allow delete from options button

* fix(group-plans): update tasksOrder when task deleted

* fix(group-tasks): dismiss notification when user takes action

* refactor(tasks): DRY out create button styling

* fix(group-tasks): sync after claiming/unclaiming

website/client/components/header/menu.vue

@@ -349,10 +349,11 @@ import creatorIntro from '../creatorIntro';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
+import reportFlagModal from '../chat/reportFlagModal';
 import sendGemsModal from 'client/components/payments/sendGemsModal';
+import sync from 'client/mixins/sync';
 import userDropdown from './userDropdown';
 
-import reportFlagModal from '../chat/reportFlagModal';
 
 export default {
   components: {
@@ -364,6 +365,7 @@ export default {
     sendGemsModal,
     userDropdown,
   },
+  mixins: [sync],
   data () {
     return {
       isUserDropdownOpen: false,
@@ -403,14 +405,6 @@ export default {
     toggleUserDropdown () {
       this.isUserDropdownOpen = !this.isUserDropdownOpen;
     },
-    async sync () {
-      this.$root.$emit('habitica::resync-requested');
-      await Promise.all([
-        this.$store.dispatch('user:fetch', {forceLoad: true}),
-        this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true}),
-      ]);
-      this.$root.$emit('habitica::resync-completed');
-    },
     async getUserGroupPlans () {
       this.$store.state.groupPlans = await this.$store.dispatch('guilds:getGroupPlans');
     },

website/client/components/header/notifications/groupTaskApproval.vue

@@ -4,6 +4,7 @@ base-notification(
   :has-icon="false",
   :notification="notification",
   @click="action",
+  ref="taskApprovalNotification",
 )
   div(slot="content")
     div(v-html="notification.data.message")
@@ -43,12 +44,12 @@ export default {
         return;
       }
 
-      if (!confirm(this.$t('confirmApproval'))) return;
-
-      this.$store.dispatch('tasks:approve', {
+      await this.$store.dispatch('tasks:approve', {
         taskId: this.notification.data.groupTaskId,
         userId: this.notification.data.userId,
       });
+
+      this.$refs.taskApprovalNotification.remove();
     },
     async needsWork () {
       // Redirect users to the group tasks page if the notification doesn't have data
@@ -62,11 +63,13 @@ export default {
 
       if (!confirm(this.$t('confirmNeedsWork'))) return;
 
-      this.$store.dispatch('tasks:needsWork', {
+      await this.$store.dispatch('tasks:needsWork', {
         taskId: this.notification.data.groupTaskId,
         userId: this.notification.data.userId,
       });
+
+      this.$refs.taskApprovalNotification.remove();
     },
   },
 };
-</script>
+</script>