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
2025-12-17 22:57:21 +01:00 · 2017-08-31 16:14:09 -06:00
parent 87d57dab13
commit cdd3bc3cd6
12 changed files with 322 additions and 114 deletions
--- a/website/client/components/tasks/brokenTaskModal.vue
+++ b/website/client/components/tasks/brokenTaskModal.vue
@@ -0,0 +1,77 @@
+<template lang='pug'>
+  b-modal#broken-task-modal(title="Broken Challenge", size='sm', :hide-footer="true", v-if='brokenChallengeTask.challenge')
+    .modal-body
+      div(v-if='brokenChallengeTask.challenge.broken === "TASK_DELETED" || brokenChallengeTask.challenge.broken === "CHALLENGE_TASK_NOT_FOUND"')
+        h2 {{ $t('brokenTask') }}
+        div
+          button.btn.btn-primary(@click='unlink("keep")') {{ $t('keepIt') }}
+          button.btn.btn-danger(@click='removeTask(obj)') {{ $t('removeIt') }}
+      div(v-if='brokenChallengeTask.challenge.broken === "CHALLENGE_DELETED"')
+        h2 {{ $t('brokenChallenge') }}
+        div
+          button.btn.btn-primary(@click='unlink("keep-all")') {{ $t('keepThem') }}
+          button.btn.btn-danger(@click='unlink("remove-all")') {{ $t('removeThem') }}
+      div(v-if='brokenChallengeTask.challenge.broken === "CHALLENGE_CLOSED"')
+        h2(v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})")
+        div
+          button.btn.btn-primary(@click='unlink("keep-all")') {{ $t('keepThem') }}
+          button.btn.btn-danger(@click='unlink("remove-all")') {{ $t('removeThem') }}
+      // @TODO: I ported this over, but do we use it anymore?
+      //div(v-if='brokenChallengeTask.challenge.broken === "UNSUBSCRIBED"')
+        p {{ $t('unsubChallenge') }}
+        p
+          a(@click="unlink('keep-all')") {{ $t('keepThem') }}
+          | &nbsp;|&nbsp;
+          a(@click="unlink('remove-all')") {{ $t('removeThem') }}
+</template>
+
+<style scoped>
+  .modal-body {
+    padding-bottom: 2em;
+  }
+</style>
+
+<script>
+import { mapActions } from 'client/libs/store';
+import bModal from 'bootstrap-vue/lib/components/modal';
+import notifications from 'client/mixins/notifications';
+
+export default {
+  mixins: [notifications],
+  props: ['brokenChallengeTask'],
+  components: {
+    bModal,
+  },
+  methods: {
+    ...mapActions({
+      destroyTask: 'tasks:destroy',
+      unlinkOneTask: 'tasks:unlinkOneTask',
+      unlinkAllTasks: 'tasks:unlinkAllTasks',
+    }),
+    async unlink (keepOption) {
+      if (keepOption.indexOf('-all') !== -1) {
+        this.unlinkAllTasks({
+          challengeId: this.brokenChallengeTask.challenge.id,
+          keep: keepOption,
+        });
+        await this.$store.dispatch('tasks:fetchUserTasks', true);
+        this.close();
+        return;
+      }
+
+      this.unlinkOneTask({
+        task: this.brokenChallengeTask,
+        keep: keepOption,
+      });
+      this.close();
+    },
+    removeTask () {
+      if (!confirm('Are you sure you want to delete this task?')) return;
+      this.destroyTask(this.brokenChallengeTask);
+    },
+    close () {
+      this.$root.$emit('hide::modal', 'broken-task-modal');
+    },
+  },
+};
+</script>
--- a/website/client/components/tasks/task.vue
+++ b/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>