mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 23:27:26 +01:00
old client structure
This commit is contained in:
Matteo Pagliazzi
861
website/client/src/components/tasks/task.vue
Normal file
861
website/client/src/components/tasks/task.vue
Normal file
@@ -0,0 +1,861 @@
|
||||
<template lang="pug">
|
||||
.task-wrapper
|
||||
.task(@click='castEnd($event, task)', :class="[{'groupTask': task.group.id}, `type_${task.type}`]")
|
||||
approval-header(:task='task', v-if='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="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.up.bg]")
|
||||
.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
|
||||
.svg-icon.lock(v-if="this.task.group.id && !isUser", v-html="icons.lock", :class="controlClass.up.icon")
|
||||
.svg-icon.positive(v-else, 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="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.bg]")
|
||||
.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
|
||||
.svg-icon.lock(v-html="icons.lock", v-if="this.task.group.id && !isUser && !task.completed", :class="controlClass.icon")
|
||||
.svg-icon.check(v-else, v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
|
||||
// Task title, description and icons
|
||||
.task-content(:class="contentClass")
|
||||
.task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
|
||||
.d-flex.justify-content-between
|
||||
h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
|
||||
menu-dropdown.task-dropdown(
|
||||
v-if="!isRunningYesterdailies && showOptions",
|
||||
:right="task.type === 'reward'",
|
||||
ref="taskDropdown",
|
||||
v-b-tooltip.hover.top="$t('options')"
|
||||
)
|
||||
div(slot="dropdown-toggle", draggable=false)
|
||||
.svg-icon.dropdown-icon(v-html="icons.menu")
|
||||
div(slot="dropdown-content", draggable=false)
|
||||
.dropdown-item.edit-task-item(ref="editTaskItem")
|
||||
span.dropdown-icon-item
|
||||
span.svg-icon.inline.edit-icon(v-html="icons.edit")
|
||||
span.text {{ $t('edit') }}
|
||||
.dropdown-item(v-if='isUser', @click="moveToTop")
|
||||
span.dropdown-icon-item
|
||||
span.svg-icon.inline.push-to-top(v-html="icons.top")
|
||||
span.text {{ $t('taskToTop') }}
|
||||
.dropdown-item(v-if='isUser', @click="moveToBottom")
|
||||
span.dropdown-icon-item
|
||||
span.svg-icon.inline.push-to-bottom(v-html="icons.bottom")
|
||||
span.text {{ $t('taskToBottom') }}
|
||||
.dropdown-item(@click="destroy", v-if="canDelete(task)")
|
||||
span.dropdown-icon-item.delete-task-item
|
||||
span.svg-icon.inline.delete(v-html="icons.delete")
|
||||
span.text {{ $t('delete') }}
|
||||
|
||||
.task-notes.small-text(
|
||||
v-markdown="task.notes",
|
||||
:class="{'has-checklist': task.notes && hasChecklist}",
|
||||
)
|
||||
.checklist(v-if="canViewchecklist", :class="{isOpen: !task.collapseChecklist}")
|
||||
.d-inline-flex
|
||||
.collapse-checklist.d-flex.align-items-center.expand-toggle(
|
||||
v-if="isUser",
|
||||
@click="collapseChecklist(task)",
|
||||
:class="{open: !task.collapseChecklist}",
|
||||
v-b-tooltip.hover.bottom="$t(`${task.collapseChecklist ? 'expand': 'collapse'}Checklist`)",
|
||||
)
|
||||
.svg-icon(v-html="icons.checklist")
|
||||
span {{ checklistProgress }}
|
||||
.custom-control.custom-checkbox.checklist-item(
|
||||
v-if='!task.collapseChecklist',
|
||||
v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
|
||||
)
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="item.completed",
|
||||
@change="toggleChecklistItem(item)",
|
||||
:disabled="castingSpell || !isUser",
|
||||
:id="`checklist-${item.id}-${random}`"
|
||||
)
|
||||
label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}-${random}`")
|
||||
.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", v-b-tooltip.hover.bottom="$t('dueDate')")
|
||||
span {{dueIn}}
|
||||
.icons-right.d-flex.justify-content-end
|
||||
.d-flex.align-items-center(v-if="showStreak")
|
||||
.svg-icon.streak(v-html="icons.streak", v-b-tooltip.hover.bottom="$t('streakCounter')")
|
||||
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") |
|
||||
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', v-b-tooltip.hover.bottom="shortName")
|
||||
.svg-icon.challenge.broken(v-html="icons.brokenChallengeIcon", v-if='task.challenge.broken', @click='handleBrokenTask(task)', v-b-tooltip.hover.bottom="$t('brokenChaLink')")
|
||||
.d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`")
|
||||
.svg-icon.tags(v-html="icons.tags")
|
||||
b-popover(
|
||||
v-if="hasTags",
|
||||
:target="`tags-icon-${task._id}`",
|
||||
triggers="hover",
|
||||
placement="bottom",
|
||||
)
|
||||
.tags-popover
|
||||
.d-flex.align-items-center.tags-container
|
||||
.tags-popover-title(v-once) {{ `${$t('tags')}:` }}
|
||||
.tag-label(v-for="tag in getTagsFor(task)", v-markdown="tag")
|
||||
|
||||
// Habits right side control
|
||||
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.down.bg]")
|
||||
.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
|
||||
.svg-icon.lock(v-if="this.task.group.id && !isUser", v-html="icons.lock", :class="controlClass.down.icon")
|
||||
.svg-icon.negative(v-else, 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.bg", @click="isUser ? score('down') : null")
|
||||
.svg-icon(v-html="icons.gold")
|
||||
.small-text {{task.value}}
|
||||
approval-footer(:task='task', v-if='task.group.id', :group='group')
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.control-bottom-box {
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
|
||||
.control-top-box {
|
||||
border-top-left-radius: 0px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
.task {
|
||||
margin-bottom: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.task:not(.groupTask) {
|
||||
&:hover {
|
||||
.left-control, .right-control, .task-content {
|
||||
border-color: $purple-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task.groupTask {
|
||||
|
||||
&:hover {
|
||||
border: $purple-400 solid 1px;
|
||||
border-radius: 3px;
|
||||
margin: -1px; // to counter the border width
|
||||
margin-bottom: 1px;
|
||||
transition: none; // with transition, the border color switches from black to $purple-400
|
||||
}
|
||||
}
|
||||
|
||||
.task-habit-disabled-control-habit:hover {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
padding-bottom: 8px;
|
||||
color: $gray-10;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 15px;
|
||||
line-height: 1.43;
|
||||
font-size: 14px;
|
||||
min-width: 0px;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
// markdown p-tag, can't find without /deep/
|
||||
/deep/ p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.has-notes {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix flex-wrapping for IE 11
|
||||
* https://github.com/HabitRPG/habitica/issues/9754
|
||||
*/
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.task-clickable-area {
|
||||
padding: 7px 8px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
&-user {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-title + .task-dropdown /deep/ .dropdown-menu {
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
margin-right: 0px;
|
||||
color: $gray-100 !important;
|
||||
}
|
||||
|
||||
.task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
|
||||
opacity: 0;
|
||||
padding: 0 8px;
|
||||
transition: opacity 0.15s ease-in;
|
||||
}
|
||||
|
||||
.task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.task-clickable-area /deep/ .habitica-menu-dropdown.open .habitica-menu-dropdown-toggle {
|
||||
opacity: 1;
|
||||
|
||||
.svg-icon {
|
||||
color: $purple-400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
|
||||
color: $purple-400 !important;
|
||||
}
|
||||
|
||||
.task-dropdown {
|
||||
max-height: 16px;
|
||||
}
|
||||
|
||||
.task-dropdown /deep/ .dropdown-menu {
|
||||
.dropdown-item {
|
||||
cursor: pointer !important;
|
||||
transition: none;
|
||||
|
||||
* {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $purple-300;
|
||||
|
||||
.svg-icon.push-to-top, .svg-icon.push-to-bottom {
|
||||
* {
|
||||
stroke: $purple-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-notes {
|
||||
color: $gray-100;
|
||||
font-style: normal;
|
||||
padding-right: 20px;
|
||||
min-width: 0px;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&.has-checklist {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-content {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 7px;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
background: $white;
|
||||
border: 1px solid transparent;
|
||||
transition-duration: 0.15;
|
||||
min-width: 0px;
|
||||
|
||||
&.no-right-border {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
&.reward-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist {
|
||||
&.isOpen {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.collapse-checklist {
|
||||
padding: 2px 6px;
|
||||
border-radius: 1px;
|
||||
background-color: $gray-600;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: $gray-200;
|
||||
margin-bottom: 9px;
|
||||
|
||||
&.open {
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
color: $gray-50;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
margin-bottom: -3px;
|
||||
min-height: 0px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding-right: 20px;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&-done {
|
||||
color: $gray-300;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.custom-control-label::before, .custom-control-label::after {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
margin-left: 6px;
|
||||
padding-top: 0px;
|
||||
min-width: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icons, .checklist {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 4px;
|
||||
color: $gray-300;
|
||||
font-style: normal;
|
||||
|
||||
&-right {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-right .svg-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.icons span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.svg-icon.streak {
|
||||
width: 11.6px;
|
||||
height: 7.1px;
|
||||
}
|
||||
|
||||
.delete-task-item {
|
||||
color: $red-10;
|
||||
}
|
||||
|
||||
.edit-task-item span.text {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.svg-icon.edit-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.svg-icon.push-to-top, .svg-icon.push-to-bottom {
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
margin-left: 3px;
|
||||
|
||||
svg {
|
||||
stroke: $purple-300;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon.delete {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.tags.svg-icon, .calendar.svg-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.tags:hover {
|
||||
color: $purple-500;
|
||||
}
|
||||
|
||||
.due-overdue {
|
||||
color: $red-50;
|
||||
}
|
||||
|
||||
.calendar.svg-icon {
|
||||
margin-right: 2px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.challenge.svg-icon {
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.check.svg-icon {
|
||||
width: 12.3px;
|
||||
height: 9.8px;
|
||||
margin: 9px 8px;
|
||||
}
|
||||
|
||||
.challenge.broken {
|
||||
color: $red-50;
|
||||
}
|
||||
|
||||
.left-control, .right-control {
|
||||
width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.left-control, .right-control, .task-control {
|
||||
transition-duration: 0.15s;
|
||||
transition-property: border-color, background, color;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
.left-control {
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
min-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-right: none;
|
||||
|
||||
& + .task-content {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
.task:not(.type_habit) {
|
||||
.left-control {
|
||||
& + .task-content {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-control {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
min-height: 56px;
|
||||
border: 1px solid transparent;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.task-control:not(.task-disabled-habit-control-inner), .reward-control {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-not-scoreable {
|
||||
.task-control, .reward-control {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.svg-icon.check:not(.display-check-icon) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.daily-todo-control {
|
||||
margin-top: 16px;
|
||||
border-radius: 2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.reward-control {
|
||||
flex-direction: column;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
.svg-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
margin-top: 4px;
|
||||
font-style: initial;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-popover /deep/ {
|
||||
.tags-container {
|
||||
flex-wrap: wrap;
|
||||
margin-top: -3px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.tags-popover-title {
|
||||
margin-right: 4px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: -3px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 4px;
|
||||
border-radius: 100px;
|
||||
background-color: $gray-50;
|
||||
padding: 4px 10px;
|
||||
color: $gray-300;
|
||||
white-space: nowrap;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
// Applies to v-markdown generated p tag.
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, mapActions } from 'client/libs/store';
|
||||
import moment from 'moment';
|
||||
import axios from 'axios';
|
||||
import scoreTask from 'common/script/ops/scoreTask';
|
||||
import Vue from 'vue';
|
||||
import * as Analytics from 'client/libs/analytics';
|
||||
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import negativeIcon from 'assets/svg/negative.svg';
|
||||
import goldIcon from 'assets/svg/gold.svg';
|
||||
import streakIcon from 'assets/svg/streak.svg';
|
||||
import calendarIcon from 'assets/svg/calendar.svg';
|
||||
import challengeIcon from 'assets/svg/challenge.svg';
|
||||
import brokenChallengeIcon from 'assets/svg/broken-megaphone.svg';
|
||||
import tagsIcon from 'assets/svg/tags.svg';
|
||||
import checkIcon from 'assets/svg/check.svg';
|
||||
import editIcon from 'assets/svg/edit.svg';
|
||||
import topIcon from 'assets/svg/top.svg';
|
||||
import bottomIcon from 'assets/svg/bottom.svg';
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import checklistIcon from 'assets/svg/checklist.svg';
|
||||
import lockIcon from 'assets/svg/lock.svg';
|
||||
import menuIcon from 'assets/svg/menu.svg';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
import approvalHeader from './approvalHeader';
|
||||
import approvalFooter from './approvalFooter';
|
||||
import MenuDropdown from '../ui/customMenuDropdown';
|
||||
import uuid from 'uuid';
|
||||
|
||||
export default {
|
||||
mixins: [notifications],
|
||||
components: {
|
||||
approvalFooter,
|
||||
approvalHeader,
|
||||
MenuDropdown,
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
props: ['task', 'isUser', 'group', 'dueDate', 'showOptions'], // @TODO: maybe we should store the group on state?
|
||||
data () {
|
||||
return {
|
||||
random: uuid.v4(), // used to avoid conflicts between checkboxes ids
|
||||
icons: Object.freeze({
|
||||
positive: positiveIcon,
|
||||
negative: negativeIcon,
|
||||
gold: goldIcon,
|
||||
streak: streakIcon,
|
||||
calendar: calendarIcon,
|
||||
challenge: challengeIcon,
|
||||
brokenChallengeIcon,
|
||||
tags: tagsIcon,
|
||||
check: checkIcon,
|
||||
checklist: checklistIcon,
|
||||
delete: deleteIcon,
|
||||
edit: editIcon,
|
||||
top: topIcon,
|
||||
bottom: bottomIcon,
|
||||
menu: menuIcon,
|
||||
lock: lockIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
castingSpell: 'spellOptions.castingSpell',
|
||||
isRunningYesterdailies: 'isRunningYesterdailies',
|
||||
}),
|
||||
...mapGetters({
|
||||
getTagsFor: 'tasks:getTagsFor',
|
||||
getTaskClasses: 'tasks:getTaskClasses',
|
||||
canDelete: 'tasks:canDelete',
|
||||
}),
|
||||
hasChecklist () {
|
||||
return this.task.checklist && this.task.checklist.length > 0;
|
||||
},
|
||||
canViewchecklist () {
|
||||
let userIsTaskUser = this.task.userId ? this.task.userId === this.user._id : true;
|
||||
return this.hasChecklist && userIsTaskUser;
|
||||
},
|
||||
checklistProgress () {
|
||||
const totalItems = this.task.checklist.length;
|
||||
const completedItems = this.task.checklist.reduce((total, item) => {
|
||||
return item.completed ? total + 1 : total;
|
||||
}, 0);
|
||||
return `${completedItems}/${totalItems}`;
|
||||
},
|
||||
leftControl () {
|
||||
const task = this.task;
|
||||
if (task.type === 'reward') return false;
|
||||
return true;
|
||||
},
|
||||
rightControl () {
|
||||
const task = this.task;
|
||||
if (task.type === 'reward') return true;
|
||||
if (task.type === 'habit') return true;
|
||||
return false;
|
||||
},
|
||||
approvalsClass () {
|
||||
return this.group && this.task.approvals && this.task.approvals.length > 0;
|
||||
},
|
||||
controlClass () {
|
||||
return this.getTaskClasses(this.task, 'control', this.dueDate);
|
||||
},
|
||||
contentClass () {
|
||||
const type = this.task.type;
|
||||
|
||||
const classes = [];
|
||||
classes.push(this.getTaskClasses(this.task, 'control', this.dueDate).content);
|
||||
|
||||
if (type === 'reward' || type === 'habit') {
|
||||
classes.push('no-right-border');
|
||||
}
|
||||
|
||||
if (type === 'reward') {
|
||||
classes.push('reward-content');
|
||||
}
|
||||
|
||||
return classes;
|
||||
},
|
||||
showStreak () {
|
||||
if (this.task.streak !== undefined) return true;
|
||||
if (this.task.type === 'habit' && (this.task.up || this.task.down)) return true;
|
||||
return false;
|
||||
},
|
||||
timeTillDue () {
|
||||
// this.task && is necessary to make sure the computed property updates correctly
|
||||
const endOfToday = moment().endOf('day');
|
||||
const endOfDueDate = moment(this.task && this.task.date).endOf('day');
|
||||
|
||||
return moment.duration(endOfDueDate.diff(endOfToday));
|
||||
},
|
||||
isDueOverdue () {
|
||||
return this.timeTillDue.asDays() <= 0;
|
||||
},
|
||||
dueIn () {
|
||||
const dueIn = this.timeTillDue.asDays() === 0 ?
|
||||
this.$t('today') :
|
||||
this.timeTillDue.humanize(true);
|
||||
|
||||
// this.task && is necessary to make sure the computed property updates correctly
|
||||
return this.task && this.task.date && this.$t('dueIn', { dueIn });
|
||||
},
|
||||
hasTags () {
|
||||
return this.task.tags && this.task.tags.length > 0;
|
||||
},
|
||||
shortName () {
|
||||
if (this.task.challenge.broken) return '';
|
||||
|
||||
return this.task.challenge.shortName ? this.task.challenge.shortName.toString() : '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
scoreChecklistItem: 'tasks:scoreChecklistItem',
|
||||
collapseChecklist: 'tasks:collapseChecklist',
|
||||
destroyTask: 'tasks:destroy',
|
||||
}),
|
||||
toggleChecklistItem (item) {
|
||||
if (this.castingSpell) return;
|
||||
item.completed = !item.completed; // @TODO this should go into the action?
|
||||
this.scoreChecklistItem({taskId: this.task._id, itemId: item.id});
|
||||
},
|
||||
edit (e, task) {
|
||||
if (this.isRunningYesterdailies) return;
|
||||
|
||||
// Prevent clicking on a link from opening the edit modal
|
||||
const target = e.target || e.srcElement;
|
||||
|
||||
if (target.tagName === 'A') return; // clicked on a link
|
||||
|
||||
const isDropdown = this.$refs.taskDropdown && this.$refs.taskDropdown.$el.contains(target);
|
||||
const isEditAction = this.$refs.editTaskItem && this.$refs.editTaskItem.contains(target);
|
||||
|
||||
if (isDropdown && !isEditAction) return;
|
||||
|
||||
if (!this.$store.state.spellOptions.castingSpell) {
|
||||
this.$emit('editTask', task);
|
||||
}
|
||||
},
|
||||
moveToTop () {
|
||||
this.$emit('moveTo', this.task, 'top');
|
||||
},
|
||||
moveToBottom () {
|
||||
this.$emit('moveTo', this.task, 'bottom');
|
||||
},
|
||||
destroy () {
|
||||
if (!confirm(this.$t('sureDelete'))) return;
|
||||
this.destroyTask(this.task);
|
||||
this.$emit('taskDestroyed', this.task);
|
||||
},
|
||||
castEnd (e, task) {
|
||||
setTimeout(() => this.$root.$emit('castEnd', task, 'task', e), 0);
|
||||
},
|
||||
async score (direction) {
|
||||
if (this.castingSpell) return;
|
||||
|
||||
// TODO move to an action
|
||||
const Content = this.$store.state.content;
|
||||
const user = this.user;
|
||||
const task = this.task;
|
||||
|
||||
if (task.group.approval.required) {
|
||||
task.group.approval.requested = true;
|
||||
const groupResponse = await axios.get(`/api/v4/groups/${task.group.id}`);
|
||||
let managers = Object.keys(groupResponse.data.data.managers);
|
||||
managers.push(groupResponse.data.data.leader._id);
|
||||
if (managers.indexOf(user._id) !== -1) {
|
||||
task.group.approval.approved = true;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
scoreTask({task, user, direction});
|
||||
} catch (err) {
|
||||
this.text(err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (this.task.type) {
|
||||
case 'habit':
|
||||
this.$root.$emit('playSound', direction === 'up' ? 'Plus_Habit' : 'Minus_Habit');
|
||||
break;
|
||||
case 'todo':
|
||||
this.$root.$emit('playSound', 'Todo');
|
||||
break;
|
||||
case 'daily':
|
||||
this.$root.$emit('playSound', 'Daily');
|
||||
break;
|
||||
case 'reward':
|
||||
this.$root.$emit('playSound', 'Reward');
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
Analytics.updateUser();
|
||||
const response = await axios.post(`/api/v4/tasks/${task._id}/score/${direction}`);
|
||||
const tmp = response.data.data._tmp || {}; // used to notify drops, critical hits and other bonuses
|
||||
const crit = tmp.crit;
|
||||
const drop = tmp.drop;
|
||||
const quest = tmp.quest;
|
||||
|
||||
if (crit) {
|
||||
const critBonus = crit * 100 - 100;
|
||||
this.crit(critBonus);
|
||||
}
|
||||
|
||||
if (quest && user.party.quest && user.party.quest.key) {
|
||||
const userQuest = Content.quests[user.party.quest.key];
|
||||
if (quest.progressDelta && userQuest.boss) {
|
||||
this.quest('questDamage', quest.progressDelta.toFixed(1));
|
||||
} else if (quest.collection && userQuest.collect) {
|
||||
user.party.quest.progress.collectedItems++;
|
||||
this.quest('questCollection', quest.collection);
|
||||
}
|
||||
}
|
||||
|
||||
if (drop) {
|
||||
let dropText;
|
||||
let dropNotes;
|
||||
let type;
|
||||
|
||||
this.$root.$emit('playSound', 'Item_Drop');
|
||||
|
||||
// Note: For Mystery Item gear, drop.type will be 'head', 'armor', etc
|
||||
// so we use drop.notificationType below.
|
||||
|
||||
if (drop.type !== 'gear' && drop.type !== 'Quest' && drop.notificationType !== 'Mystery') {
|
||||
if (drop.type === 'Food') {
|
||||
type = 'food';
|
||||
} else if (drop.type === 'HatchingPotion') {
|
||||
type = 'hatchingPotions';
|
||||
} else {
|
||||
type = `${drop.type.toLowerCase()}s`;
|
||||
}
|
||||
|
||||
if (!user.items[type][drop.key]) {
|
||||
Vue.set(user, `items.${type}.${drop.key}`, 0);
|
||||
}
|
||||
user.items[type][drop.key]++;
|
||||
}
|
||||
|
||||
if (drop.type === 'HatchingPotion') {
|
||||
dropText = Content.hatchingPotions[drop.key].text();
|
||||
dropNotes = Content.hatchingPotions[drop.key].notes();
|
||||
this.drop(this.$t('messageDropPotion', {dropText, dropNotes}), drop);
|
||||
} else if (drop.type === 'Egg') {
|
||||
dropText = Content.eggs[drop.key].text();
|
||||
dropNotes = Content.eggs[drop.key].notes();
|
||||
this.drop(this.$t('messageDropEgg', {dropText, dropNotes}), drop);
|
||||
} else if (drop.type === 'Food') {
|
||||
dropText = Content.food[drop.key].textA();
|
||||
dropNotes = Content.food[drop.key].notes();
|
||||
this.drop(this.$t('messageDropFood', {dropText, dropNotes}), drop);
|
||||
} else if (drop.type === 'Quest') {
|
||||
// TODO $rootScope.selectedQuest = Content.quests[drop.key];
|
||||
// $rootScope.openModal('questDrop', {controller:'PartyCtrl', size:'sm'});
|
||||
} else {
|
||||
// Keep support for another type of drops that might be added
|
||||
this.drop(drop.dialog);
|
||||
}
|
||||
}
|
||||
},
|
||||
handleBrokenTask (task) {
|
||||
if (this.$store.state.isRunningYesterdailies) return;
|
||||
this.$root.$emit('handle-broken-task', task);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user