Client fixes aug 31 (#9010)

* Separated private message model

* Added markdown to profile

* Add color backgrounds

* Added broken challenge flow

* Added summary field to getgroups

* Fixed group form information loading

* Updated autocomplete to use chat

* Fixed npc styles

* Fixed onload mentions

website/client/components/tasks/task.vue

@@ -1,61 +1,64 @@
 <template lang="pug">
-.task(@click='castEnd($event, task)')
-  approval-header(:task='task', v-if='this.task.group.id', :group='group')
-  .d-flex(:class="{'task-not-scoreable': isUser !== true}")
-    // Habits left side control
-    .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
-      .task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="(isUser && controlClass.up !== 'task-habit-disabled') ? score('up') : null")
-        .svg-icon.positive(v-html="icons.positive")
-    // Dailies and todos left side control
-    .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
-      .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
-        .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
-    // Task title, description and icons
-    .task-content(:class="contentClass")
-      .task-clickable-area(@click="edit($event, task)")
-        h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
-        .task-notes.small-text(v-markdown="task.notes")
-      .checklist(v-if="task.checklist && task.checklist.length > 0")
-        label.custom-control.custom-checkbox.checklist-item(
-          v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
-        )
-          input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
-          span.custom-control-indicator
-          span.custom-control-description(v-markdown='item.text')
-      .icons.small-text.d-flex.align-items-center
-        .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
-          .svg-icon.calendar(v-html="icons.calendar")
-          span {{dueIn}}
-        .icons-right.d-flex.justify-content-end
-          .d-flex.align-items-center(v-if="showStreak")
-            .svg-icon.streak(v-html="icons.streak")
-            span(v-if="task.type === 'daily'") {{task.streak}}
-            span(v-if="task.type === 'habit'")
-              span.m-0(v-if="task.up") +{{task.counterUp}}
-              span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
-              span.m-0(v-if="task.down") -{{task.counterDown}}
-          .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
-            .svg-icon.challenge(v-html="icons.challenge")
-          b-popover.tags-popover.no-span-margin(
-            :triggers="['hover']",
-            :placement="'bottom'",
-            :popover-style="{'max-width': '1000px'}",
+div
+  broken-task-modal(:brokenChallengeTask='brokenChallengeTask')
+  .task(@click='castEnd($event, task)')
+    approval-header(:task='task', v-if='this.task.group.id', :group='group')
+    .d-flex(:class="{'task-not-scoreable': isUser !== true}")
+      // Habits left side control
+      .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
+        .task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="(isUser && controlClass.up !== 'task-habit-disabled') ? score('up') : null")
+          .svg-icon.positive(v-html="icons.positive")
+      // Dailies and todos left side control
+      .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
+        .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
+          .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
+      // Task title, description and icons
+      .task-content(:class="contentClass")
+        .task-clickable-area(@click="edit($event, task)")
+          h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
+          .task-notes.small-text(v-markdown="task.notes")
+        .checklist(v-if="task.checklist && task.checklist.length > 0")
+          label.custom-control.custom-checkbox.checklist-item(
+            v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
           )
-            .d-flex.align-items-center(slot="content")
-              .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
-              .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
-            .d-flex.align-items-center(v-if="task.tags && task.tags.length > 0")
-              .svg-icon.tags(v-html="icons.tags")
+            input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
+            span.custom-control-indicator
+            span.custom-control-description(v-markdown='item.text')
+        .icons.small-text.d-flex.align-items-center
+          .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
+            .svg-icon.calendar(v-html="icons.calendar")
+            span {{dueIn}}
+          .icons-right.d-flex.justify-content-end
+            .d-flex.align-items-center(v-if="showStreak")
+              .svg-icon.streak(v-html="icons.streak")
+              span(v-if="task.type === 'daily'") {{task.streak}}
+              span(v-if="task.type === 'habit'")
+                span.m-0(v-if="task.up") +{{task.counterUp}}
+                span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
+                span.m-0(v-if="task.down") -{{task.counterDown}}
+            .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
+              .svg-icon.challenge(v-html="icons.challenge", v-if='!task.challenge.broken')
+              .svg-icon.challenge.broken(v-html="icons.challenge", v-if='task.challenge.broken', @click='handleBrokenTask(task)')
+            b-popover.tags-popover.no-span-margin(
+              :triggers="['hover']",
+              :placement="'bottom'",
+              :popover-style="{'max-width': '1000px'}",
+            )
+              .d-flex.align-items-center(slot="content")
+                .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
+                .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
+              .d-flex.align-items-center(v-if="task.tags && task.tags.length > 0")
+                .svg-icon.tags(v-html="icons.tags")
 
-    // Habits right side control
-    .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
-      .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null")
-        .svg-icon.negative(v-html="icons.negative")
-    // Rewards right side control
-    .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null")
-      .svg-icon(v-html="icons.gold")
-      .small-text {{task.value}}
-  approval-footer(:task='task', v-if='this.task.group.id', :group='group')
+      // Habits right side control
+      .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
+        .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null")
+          .svg-icon.negative(v-html="icons.negative")
+      // Rewards right side control
+      .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null")
+        .svg-icon(v-html="icons.gold")
+        .small-text {{task.value}}
+    approval-footer(:task='task', v-if='this.task.group.id', :group='group')
 </template>
 
 <style lang="scss">
@@ -194,6 +197,10 @@
     margin: 9px 8px;
   }
 
+  .challenge.broken {
+    color: $red-50;
+  }
+
   .left-control, .right-control {
     width: 40px;
     flex-shrink: 0;
@@ -301,6 +308,7 @@ import checkIcon from 'assets/svg/check.svg';
 import bPopover from 'bootstrap-vue/lib/components/popover';
 import markdownDirective from 'client/directives/markdown';
 import notifications from 'client/mixins/notifications';
+import brokenTaskModal from './brokenTaskModal';
 import approvalHeader from './approvalHeader';
 import approvalFooter from './approvalFooter';
 
@@ -310,6 +318,7 @@ export default {
     bPopover,
     approvalFooter,
     approvalHeader,
+    brokenTaskModal,
   },
   directives: {
     markdown: markdownDirective,
@@ -327,6 +336,7 @@ export default {
         tags: tagsIcon,
         check: checkIcon,
       }),
+      brokenChallengeTask: {},
     };
   },
   computed: {
@@ -468,6 +478,10 @@ export default {
         }
       }
     },
+    handleBrokenTask (task) {
+      this.brokenChallengeTask = task;
+      this.$root.$emit('show::modal', 'broken-task-modal');
+    },
   },
 };
 </script>