old client structure
This commit is contained in:
Matteo Pagliazzi
@@ -0,0 +1,152 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
approval-modal(:task='task')
|
||||
.claim-bottom-message.d-flex.align-items-center(v-if='!approvalRequested && !multipleApprovalsRequested')
|
||||
.mr-auto.ml-2(v-html='message')
|
||||
.ml-auto.mr-2(v-if='!userIsAssigned')
|
||||
a(@click='claim()').claim-color {{ $t('claim') }}
|
||||
.ml-auto.mr-2(v-if='userIsAssigned')
|
||||
a(@click='unassign()').unclaim-color {{ $t('removeClaim') }}
|
||||
.claim-bottom-message.d-flex.align-items-center.justify-content-around(v-if='approvalRequested && userIsManager')
|
||||
a(@click='approve()').approve-color {{ $t('approveTask') }}
|
||||
a(@click='needsWork()') {{ $t('needsWork') }}
|
||||
.claim-bottom-message.d-flex.align-items-center(v-if='multipleApprovalsRequested && userIsManager')
|
||||
a(@click='showRequests()') {{ $t('viewRequests') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss", scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
.claim-bottom-message {
|
||||
background-color: $gray-700;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
color: $gray-200;
|
||||
font-size: 12px;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.approve-color {
|
||||
color: $green-10 !important;
|
||||
}
|
||||
.claim-color {
|
||||
color: $blue-10 !important;
|
||||
}
|
||||
.unclaim-color {
|
||||
color: $red-50 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import findIndex from 'lodash/findIndex';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import approvalModal from './approvalModal';
|
||||
import sync from 'client/mixins/sync';
|
||||
|
||||
export default {
|
||||
mixins: [sync],
|
||||
props: ['task', 'group'],
|
||||
components: {
|
||||
approvalModal,
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
userIsAssigned () {
|
||||
return this.task.group.assignedUsers && this.task.group.assignedUsers.indexOf(this.user._id) !== -1;
|
||||
},
|
||||
message () {
|
||||
let assignedUsers = this.task.group.assignedUsers;
|
||||
let assignedUsersNames = [];
|
||||
let assignedUsersLength = assignedUsers.length;
|
||||
|
||||
// @TODO: Eh, I think we only ever display one user name
|
||||
if (this.group && this.group.members) {
|
||||
assignedUsers.forEach(userId => {
|
||||
let index = findIndex(this.group.members, (member) => {
|
||||
return member._id === userId;
|
||||
});
|
||||
let assignedMember = this.group.members[index];
|
||||
assignedUsersNames.push(assignedMember.profile.name);
|
||||
});
|
||||
}
|
||||
|
||||
if (assignedUsersLength === 1 && !this.userIsAssigned) {
|
||||
return this.$t('assignedToUser', {userName: assignedUsersNames[0]});
|
||||
} else if (assignedUsersLength > 1 && !this.userIsAssigned) {
|
||||
return this.$t('assignedToMembers', {userCount: assignedUsersLength});
|
||||
} else if (assignedUsersLength > 1 && this.userIsAssigned) {
|
||||
return this.$t('assignedToYouAndMembers', {userCount: assignedUsersLength - 1});
|
||||
} else if (this.userIsAssigned) {
|
||||
return this.$t('youAreAssigned');
|
||||
} else if (assignedUsersLength === 0) {
|
||||
return this.$t('taskIsUnassigned');
|
||||
}
|
||||
},
|
||||
userIsManager () {
|
||||
if (this.group && (this.group.leader.id === this.user._id || this.group.managers[this.user._id])) return true;
|
||||
},
|
||||
approvalRequested () {
|
||||
if (this.task.approvals && this.task.approvals.length === 1 || this.task.group && this.task.group.approval && this.task.group.approval.requested) return true;
|
||||
},
|
||||
multipleApprovalsRequested () {
|
||||
if (this.task.approvals && this.task.approvals.length > 1) return true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async claim () {
|
||||
let taskId = this.task._id;
|
||||
// If we are on the user task
|
||||
if (this.task.userId) {
|
||||
taskId = this.task.group.taskId;
|
||||
}
|
||||
|
||||
await this.$store.dispatch('tasks:assignTask', {
|
||||
taskId,
|
||||
userId: this.user._id,
|
||||
});
|
||||
this.task.group.assignedUsers.push(this.user._id);
|
||||
this.sync();
|
||||
},
|
||||
async unassign () {
|
||||
if (!confirm(this.$t('confirmUnClaim'))) return;
|
||||
|
||||
let taskId = this.task._id;
|
||||
// If we are on the user task
|
||||
if (this.task.userId) {
|
||||
taskId = this.task.group.taskId;
|
||||
}
|
||||
|
||||
await this.$store.dispatch('tasks:unassignTask', {
|
||||
taskId,
|
||||
userId: this.user._id,
|
||||
});
|
||||
let index = this.task.group.assignedUsers.indexOf(this.user._id);
|
||||
this.task.group.assignedUsers.splice(index, 1);
|
||||
|
||||
this.sync();
|
||||
},
|
||||
approve () {
|
||||
let userIdToApprove = this.task.group.assignedUsers[0];
|
||||
this.$store.dispatch('tasks:approve', {
|
||||
taskId: this.task._id,
|
||||
userId: userIdToApprove,
|
||||
});
|
||||
this.task.group.assignedUsers.splice(0, 1);
|
||||
this.task.approvals.splice(0, 1);
|
||||
},
|
||||
needsWork () {
|
||||
if (!confirm(this.$t('confirmNeedsWork'))) return;
|
||||
let userIdNeedsMoreWork = this.task.group.assignedUsers[0];
|
||||
this.$store.dispatch('tasks:needsWork', {
|
||||
taskId: this.task._id,
|
||||
userId: userIdNeedsMoreWork,
|
||||
});
|
||||
this.task.approvals.splice(0, 1);
|
||||
},
|
||||
showRequests () {
|
||||
this.$root.$emit('bv::show::modal', 'approval-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template lang="pug">
|
||||
.claim-top-message.d-flex.align-content-center(v-if='message', :class="{'approval-action': userIsAdmin, 'approval-pending': !userIsAdmin}")
|
||||
.m-auto(v-html='message')
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
.claim-top-message {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.approval-action {
|
||||
background: $green-100;
|
||||
}
|
||||
|
||||
.approval-pending {
|
||||
background: $gray-300;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
export default {
|
||||
props: ['task', 'group'],
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
message () {
|
||||
let approvals = this.task.approvals || [];
|
||||
let approvalsLength = approvals.length;
|
||||
let userIsRequesting = approvals.findIndex((approval) => {
|
||||
return approval.userId.id === this.user._id;
|
||||
}) !== -1;
|
||||
|
||||
if (approvalsLength === 1 && !userIsRequesting) {
|
||||
return this.$t('userRequestsApproval', {userName: approvals[0].userId.profile.name});
|
||||
} else if (approvalsLength > 1 && !userIsRequesting) {
|
||||
return this.$t('userCountRequestsApproval', {userCount: approvalsLength});
|
||||
} else if (approvalsLength === 1 && userIsRequesting || this.task.group.approval && this.task.group.approval.requested && !this.task.group.approval.approved) {
|
||||
return this.$t('youAreRequestingApproval');
|
||||
}
|
||||
},
|
||||
userIsAdmin () {
|
||||
return this.group && (this.group.leader.id === this.user._id || this.group.managers[this.user._id]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template lang="pug">
|
||||
b-modal#approval-modal(:title="$t('approveTask')", size='md', :hide-footer="true")
|
||||
.modal-body
|
||||
.row.approval(v-for='(approval, index) in task.approvals')
|
||||
.col-8
|
||||
strong {{approval.userId.profile.name}}
|
||||
.col-2
|
||||
button.btn.btn-primary(@click='approve(index)') {{ $t('approve') }}
|
||||
.col-2
|
||||
button.btn.btn-secondary(@click='needsWork(index)') {{ $t('needsWork') }}
|
||||
.modal-footer
|
||||
button.btn.btn-secondary(@click='close()') {{$t('close')}}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.row.approval {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['task'],
|
||||
methods: {
|
||||
approve (index) {
|
||||
let userIdToApprove = this.task.group.assignedUsers[index];
|
||||
this.$store.dispatch('tasks:approve', {
|
||||
taskId: this.task._id,
|
||||
userId: userIdToApprove,
|
||||
});
|
||||
this.task.group.assignedUsers.splice(index, 1);
|
||||
this.task.approvals.splice(index, 1);
|
||||
},
|
||||
needsWork (index) {
|
||||
if (!confirm(this.$t('confirmNeedsWork'))) return;
|
||||
let userIdNeedsMoreWork = this.task.group.assignedUsers[index];
|
||||
this.$store.dispatch('tasks:needsWork', {
|
||||
taskId: this.task._id,
|
||||
userId: userIdNeedsMoreWork,
|
||||
});
|
||||
this.task.approvals.splice(index, 1);
|
||||
},
|
||||
close () {
|
||||
this.$root.$emit('bv::hide::modal', 'approval-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template lang="pug">
|
||||
b-modal#broken-task-modal(title="Broken Challenge", size='sm', :hide-footer="true")
|
||||
.modal-body(v-if='brokenChallengeTask && brokenChallengeTask.challenge')
|
||||
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') }}
|
||||
| |
|
||||
a(@click="unlink('remove-all')") {{ $t('removeThem') }}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-body {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'client/libs/store';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
|
||||
export default {
|
||||
mixins: [notifications],
|
||||
data () {
|
||||
return {
|
||||
brokenChallengeTask: {},
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.$root.$on('handle-broken-task', (task) => {
|
||||
this.brokenChallengeTask = Object.assign({}, task);
|
||||
this.$root.$emit('bv::show::modal', 'broken-task-modal');
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$root.$off('handle-broken-task');
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
destroyTask: 'tasks:destroy',
|
||||
unlinkOneTask: 'tasks:unlinkOneTask',
|
||||
unlinkAllTasks: 'tasks:unlinkAllTasks',
|
||||
}),
|
||||
async unlink (keepOption) {
|
||||
if (keepOption.indexOf('-all') !== -1) {
|
||||
await this.unlinkAllTasks({
|
||||
challengeId: this.brokenChallengeTask.challenge.id,
|
||||
keep: keepOption,
|
||||
});
|
||||
|
||||
await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
|
||||
|
||||
if (this.brokenChallengeTask.type === 'todo') {
|
||||
await this.$store.dispatch('tasks:fetchCompletedTodos', {forceLoad: 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);
|
||||
this.close();
|
||||
},
|
||||
close () {
|
||||
this.$store.state.brokenChallengeTask = {};
|
||||
this.$root.$emit('bv::hide::modal', 'broken-task-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template lang="pug">
|
||||
.text-center.delete-completed
|
||||
.help-text {{ $t('clearCompletedDescription') }}
|
||||
.btn.btn-danger(@click='clearTodos()') {{ $t('clearCompleted') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.delete-completed {
|
||||
padding: 1em;
|
||||
|
||||
.help-text {
|
||||
color: #878190;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
font-size: 12px;
|
||||
padding: .4em .6em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearTodos () {
|
||||
if (!confirm(this.$t('clearCompletedConfirm'))) return;
|
||||
this.$store.dispatch('tasks:clearCompletedTodos');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,706 @@
|
||||
<template lang="pug">
|
||||
.tasks-column(:class='type')
|
||||
b-modal(ref="editTaskModal")
|
||||
buy-quest-modal(:item="selectedItemToBuy || {}",
|
||||
:priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
|
||||
:withPin="true",
|
||||
@change="resetItemToBuy($event)"
|
||||
v-if='type === "reward"')
|
||||
.d-flex.align-items-center
|
||||
h2.column-title {{ $t(typeLabel) }}
|
||||
.badge.badge-pill.badge-purple.column-badge.mx-1(v-if="badgeCount > 0") {{ badgeCount }}
|
||||
.filters.d-flex.justify-content-end
|
||||
.filter.small-text(
|
||||
v-for="filter in typeFilters",
|
||||
:class="{active: activeFilter.label === filter}",
|
||||
@click="activateFilter(type, filter)",
|
||||
) {{ $t(filter) }}
|
||||
.tasks-list(ref="tasksWrapper")
|
||||
textarea.quick-add(
|
||||
:rows="quickAddRows",
|
||||
v-if="isUser", :placeholder="quickAddPlaceholder",
|
||||
v-model="quickAddText", @keypress.enter="quickAdd",
|
||||
ref="quickAdd",
|
||||
@focus="quickAddFocused = true", @blur="quickAddFocused = false",
|
||||
)
|
||||
transition(name="quick-add-tip-slide")
|
||||
.quick-add-tip.small-text(v-show="quickAddFocused", v-html="$t('addMultipleTip', {taskType: $t(typeLabel)})")
|
||||
clear-completed-todos(v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0")
|
||||
.column-background(
|
||||
v-if="isUser === true",
|
||||
:class="{'initial-description': initialColumnDescription}",
|
||||
ref="columnBackground",
|
||||
)
|
||||
.svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
|
||||
h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(typeLabel)})}}
|
||||
.small-text {{$t(`${type}sDesc`)}}
|
||||
draggable.sortable-tasks(
|
||||
ref="tasksList",
|
||||
@update='taskSorted',
|
||||
@start="isDragging(true)",
|
||||
@end="isDragging(false)",
|
||||
:options='{disabled: activeFilter.label === "scheduled" || !isUser, scrollSensitivity: 64}',
|
||||
)
|
||||
task(
|
||||
v-for="task in taskList",
|
||||
:key="task.id", :task="task",
|
||||
:isUser="isUser",
|
||||
:showOptions="showOptions"
|
||||
@editTask="editTask",
|
||||
@moveTo="moveTo",
|
||||
:group='group',
|
||||
v-on:taskDestroyed='taskDestroyed'
|
||||
)
|
||||
template(v-if="hasRewardsList")
|
||||
draggable.reward-items(
|
||||
ref="rewardsList",
|
||||
@update="rewardSorted",
|
||||
@start="rewardDragStart",
|
||||
@end="rewardDragEnd",
|
||||
)
|
||||
shopItem(
|
||||
v-for="reward in inAppRewards",
|
||||
:item="reward",
|
||||
:key="reward.key",
|
||||
:highlightBorder="reward.isSuggested",
|
||||
:showPopover="showPopovers"
|
||||
@click="openBuyDialog(reward)",
|
||||
:popoverPosition="'left'"
|
||||
)
|
||||
template(slot="itemBadge", slot-scope="ctx")
|
||||
span.badge.badge-pill.badge-item.badge-svg(
|
||||
:class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.highlightBorder}",
|
||||
@click.prevent.stop="togglePinned(ctx.item)"
|
||||
)
|
||||
span.svg-icon.inline.icon-12.color(v-html="icons.pin")
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
/deep/ .draggable-cursor {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.tasks-column {
|
||||
min-height: 556px;
|
||||
}
|
||||
|
||||
.sortable-tasks {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sortable-tasks + .reward-items {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.reward-items {
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-column-gap: 16px;
|
||||
grid-row-gap: 4px;
|
||||
grid-template-columns: repeat(auto-fill, 94px);
|
||||
}
|
||||
|
||||
@supports not (display: grid) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
& > div {
|
||||
margin: 0 16px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tasks-list {
|
||||
border-radius: 4px;
|
||||
background: $gray-600;
|
||||
padding: 8px;
|
||||
position: relative; // needed for the .bottom-gradient to be position: absolute
|
||||
height: calc(100% - 56px);
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.quick-add {
|
||||
border-radius: 2px;
|
||||
background-color: rgba($black, 0.06);
|
||||
width: 100%;
|
||||
margin-bottom: 3px;
|
||||
padding: 12px 16px;
|
||||
border-color: transparent;
|
||||
transition: background 0.15s ease-in;
|
||||
resize: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($black, 0.1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: $white;
|
||||
border-color: $purple-500;
|
||||
color: $gray-50;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-add-tip {
|
||||
font-style: normal;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.quick-add-tip-slide-enter-active {
|
||||
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.quick-add-tip-slide-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.quick-add-tip-slide-enter, .quick-add-tip-slide-leave-to {
|
||||
max-height: 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.column-badge {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.filter {
|
||||
font-weight: bold;
|
||||
color: $gray-100;
|
||||
font-style: normal;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $purple-200;
|
||||
border-bottom: 2px solid $purple-200;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 32px;
|
||||
margin-left: -8px;
|
||||
|
||||
&.initial-description {
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3, .small-text {
|
||||
color: $gray-300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-style: normal;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-habit {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.icon-daily {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.icon-todo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.icon-reward {
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
color: $gray-300;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Task from './task';
|
||||
import ClearCompletedTodos from './clearCompletedTodos';
|
||||
import throttle from 'lodash/throttle';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import buyMixin from 'client/mixins/buy';
|
||||
import { mapState, mapActions, mapGetters } from 'client/libs/store';
|
||||
import shopItem from '../shops/shopItem';
|
||||
import BuyQuestModal from 'client/components/shops/quests/buyQuestModal.vue';
|
||||
|
||||
import notifications from 'client/mixins/notifications';
|
||||
import { shouldDo } from 'common/script/cron';
|
||||
import inAppRewards from 'common/script/libs/inAppRewards';
|
||||
import spells from 'common/script/content/spells';
|
||||
import taskDefaults from 'common/script/libs/taskDefaults';
|
||||
|
||||
import {
|
||||
getTypeLabel,
|
||||
getFilterLabels,
|
||||
getActiveFilter,
|
||||
} from 'client/libs/store/helpers/filterTasks.js';
|
||||
|
||||
import svgPin from 'assets/svg/pin.svg';
|
||||
import habitIcon from 'assets/svg/habit.svg';
|
||||
import dailyIcon from 'assets/svg/daily.svg';
|
||||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
mixins: [buyMixin, notifications],
|
||||
components: {
|
||||
Task,
|
||||
ClearCompletedTodos,
|
||||
BuyQuestModal,
|
||||
shopItem,
|
||||
draggable,
|
||||
},
|
||||
// Set default values for props
|
||||
// allows for better control of props values
|
||||
// allows for better control of where this component is called
|
||||
props: {
|
||||
type: {},
|
||||
isUser: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
searchText: {},
|
||||
selectedTags: {},
|
||||
taskListOverride: {},
|
||||
group: {},
|
||||
showOptions: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
}, // @TODO: maybe we should store the group on state?
|
||||
data () {
|
||||
const icons = Object.freeze({
|
||||
habit: habitIcon,
|
||||
daily: dailyIcon,
|
||||
todo: todoIcon,
|
||||
reward: rewardIcon,
|
||||
pin: svgPin,
|
||||
});
|
||||
|
||||
let typeLabel = '';
|
||||
let typeFilters = [];
|
||||
let activeFilter = {};
|
||||
|
||||
return {
|
||||
typeLabel,
|
||||
typeFilters,
|
||||
activeFilter,
|
||||
|
||||
icons,
|
||||
openedCompletedTodos: false,
|
||||
|
||||
forceRefresh: new Date(),
|
||||
quickAddText: '',
|
||||
quickAddFocused: false,
|
||||
quickAddRows: 1,
|
||||
showPopovers: true,
|
||||
|
||||
selectedItemToBuy: {},
|
||||
dragging: false,
|
||||
};
|
||||
},
|
||||
created () {
|
||||
// Set Task Column Label
|
||||
this.typeLabel = getTypeLabel(this.type);
|
||||
// Get Category Filter Labels
|
||||
this.typeFilters = getFilterLabels(this.type);
|
||||
// Set default filter for task column
|
||||
this.activateFilter(this.type);
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
}),
|
||||
...mapGetters({
|
||||
getFilteredTaskList: 'tasks:getFilteredTaskList',
|
||||
getUnfilteredTaskList: 'tasks:getUnfilteredTaskList',
|
||||
getUserPreferences: 'user:preferences',
|
||||
getUserBuffs: 'user:buffs',
|
||||
}),
|
||||
taskList () {
|
||||
// @TODO: This should not default to user's tasks. It should require that you pass options in
|
||||
let filteredTaskList = this.isUser ?
|
||||
this.getFilteredTaskList({
|
||||
type: this.type,
|
||||
filterType: this.activeFilter.label,
|
||||
}) :
|
||||
this.filterByLabel(this.taskListOverride, this.activeFilter.label);
|
||||
|
||||
let taggedList = this.filterByTagList(filteredTaskList, this.selectedTags);
|
||||
let searchedList = this.filterBySearchText(taggedList, this.searchText);
|
||||
|
||||
return searchedList;
|
||||
},
|
||||
inAppRewards () {
|
||||
let watchRefresh = this.forceRefresh; // eslint-disable-line
|
||||
let rewards = inAppRewards(this.user);
|
||||
|
||||
// Add season rewards if user is affected
|
||||
// @TODO: Add buff conditional
|
||||
const seasonalSkills = {
|
||||
snowball: 'salt',
|
||||
spookySparkles: 'opaquePotion',
|
||||
shinySeed: 'petalFreePotion',
|
||||
seafoam: 'sand',
|
||||
};
|
||||
|
||||
for (let key in seasonalSkills) {
|
||||
if (this.getUserBuffs(key)) {
|
||||
let debuff = seasonalSkills[key];
|
||||
let item = Object.assign({}, spells.special[debuff]);
|
||||
item.text = item.text();
|
||||
item.notes = item.notes();
|
||||
item.class = `shop_${key}`;
|
||||
rewards.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
return rewards;
|
||||
},
|
||||
hasRewardsList () {
|
||||
return this.isUser === true && this.type === 'reward' && this.activeFilter.label !== 'custom';
|
||||
},
|
||||
initialColumnDescription () {
|
||||
// Show the column description in the middle only if there are no elements (tasks or in app items)
|
||||
if (this.hasRewardsList) {
|
||||
if (this.inAppRewards && this.inAppRewards.length >= 0) return false;
|
||||
}
|
||||
|
||||
return this.taskList.length === 0;
|
||||
},
|
||||
quickAddPlaceholder () {
|
||||
const type = this.$t(this.type);
|
||||
return this.$t('addATask', {type});
|
||||
},
|
||||
badgeCount () {
|
||||
// 0 means the badge will not be shown
|
||||
// It is shown for the all and due views of dailies
|
||||
// and for the active and scheduled views of todos.
|
||||
if (this.type === 'todo' && this.activeFilter.label !== 'complete2') {
|
||||
return this.taskList.length;
|
||||
} else if (this.type === 'daily') {
|
||||
if (this.activeFilter.label === 'due') {
|
||||
return this.taskList.length;
|
||||
} else if (this.activeFilter.label === 'all') {
|
||||
return this.taskList.reduce((count, t) => {
|
||||
return !t.completed && shouldDo(new Date(), t, this.getUserPreferences) ? count + 1 : count;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
taskList: {
|
||||
handler: throttle(function setColumnBackgroundVisibility () {
|
||||
this.setColumnBackgroundVisibility();
|
||||
}, 250),
|
||||
deep: true,
|
||||
},
|
||||
quickAddFocused (newValue) {
|
||||
if (newValue) this.quickAddRows = this.quickAddText.split('\n').length;
|
||||
if (!newValue) this.quickAddRows = 1;
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.setColumnBackgroundVisibility();
|
||||
|
||||
this.$root.$on('buyModal::boughtItem', () => {
|
||||
this.forceRefresh = new Date();
|
||||
});
|
||||
|
||||
if (this.type !== 'todo') return;
|
||||
this.$root.$on('habitica::resync-completed', () => {
|
||||
if (this.activeFilter.label !== 'complete2') return;
|
||||
this.loadCompletedTodos();
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('buyModal::boughtItem');
|
||||
if (this.type !== 'todo') return;
|
||||
this.$root.$off('habitica::resync-requested');
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
loadCompletedTodos: 'tasks:fetchCompletedTodos',
|
||||
createTask: 'tasks:create',
|
||||
}),
|
||||
async taskSorted (data) {
|
||||
const filteredList = this.taskList;
|
||||
const taskToMove = filteredList[data.oldIndex];
|
||||
const taskIdToMove = taskToMove._id;
|
||||
let originTasks = this.getUnfilteredTaskList(this.type);
|
||||
if (this.taskListOverride) originTasks = this.taskListOverride;
|
||||
|
||||
// Server
|
||||
const taskIdToReplace = filteredList[data.newIndex];
|
||||
const newIndexOnServer = originTasks.findIndex(taskId => taskId === taskIdToReplace);
|
||||
|
||||
let newOrder;
|
||||
if (taskToMove.group.id && !this.isUser) {
|
||||
newOrder = await this.$store.dispatch('tasks:moveGroupTask', {
|
||||
taskId: taskIdToMove,
|
||||
position: newIndexOnServer,
|
||||
});
|
||||
} else {
|
||||
newOrder = await this.$store.dispatch('tasks:move', {
|
||||
taskId: taskIdToMove,
|
||||
position: newIndexOnServer,
|
||||
});
|
||||
}
|
||||
if (!this.taskListOverride) this.user.tasksOrder[`${this.type}s`] = newOrder;
|
||||
|
||||
// Client
|
||||
const deleted = originTasks.splice(data.oldIndex, 1);
|
||||
originTasks.splice(data.newIndex, 0, deleted[0]);
|
||||
},
|
||||
async moveTo (task, where) { // where is 'top' or 'bottom'
|
||||
const taskIdToMove = task._id;
|
||||
const list = this.getUnfilteredTaskList(this.type);
|
||||
|
||||
const oldPosition = list.findIndex(t => t._id === taskIdToMove);
|
||||
const moved = list.splice(oldPosition, 1);
|
||||
const newPosition = where === 'top' ? 0 : list.length;
|
||||
list.splice(newPosition, 0, moved[0]);
|
||||
|
||||
let newOrder = await this.$store.dispatch('tasks:move', {
|
||||
taskId: taskIdToMove,
|
||||
position: newPosition,
|
||||
});
|
||||
this.user.tasksOrder[`${this.type}s`] = newOrder;
|
||||
},
|
||||
async rewardSorted (data) {
|
||||
const rewardsList = this.inAppRewards;
|
||||
const rewardToMove = rewardsList[data.oldIndex];
|
||||
|
||||
let newOrder = await this.$store.dispatch('user:movePinnedItem', {
|
||||
path: rewardToMove.path,
|
||||
position: data.newIndex,
|
||||
});
|
||||
this.user.pinnedItemsOrder = newOrder;
|
||||
},
|
||||
rewardDragStart () {
|
||||
// We need to stop popovers from interfering with our dragging
|
||||
this.showPopovers = false;
|
||||
this.isDragging(true);
|
||||
},
|
||||
rewardDragEnd () {
|
||||
this.showPopovers = true;
|
||||
this.isDragging(false);
|
||||
},
|
||||
quickAdd (ev) {
|
||||
// Add a new line if Shift+Enter Pressed
|
||||
if (ev.shiftKey) {
|
||||
this.quickAddRows++;
|
||||
return true;
|
||||
}
|
||||
|
||||
// Do not add new line is added if only Enter is pressed
|
||||
ev.preventDefault();
|
||||
const text = this.quickAddText;
|
||||
if (!text) return false;
|
||||
|
||||
const tasks = text.split('\n').reverse().filter(taskText => {
|
||||
return taskText ? true : false;
|
||||
}).map(taskText => {
|
||||
const task = taskDefaults({type: this.type, text: taskText}, this.user);
|
||||
task.tags = this.selectedTags;
|
||||
return task;
|
||||
});
|
||||
|
||||
this.quickAddText = '';
|
||||
this.quickAddRows = 1;
|
||||
this.createTask(tasks);
|
||||
this.$refs.quickAdd.blur();
|
||||
},
|
||||
editTask (task) {
|
||||
this.$emit('editTask', task);
|
||||
},
|
||||
activateFilter (type, filter = '') {
|
||||
// Needs a separate API call as this data may not reside in store
|
||||
if (type === 'todo' && filter === 'complete2') {
|
||||
if (this.group && this.group._id) {
|
||||
this.$emit('loadGroupCompletedTodos');
|
||||
} else {
|
||||
this.loadCompletedTodos();
|
||||
}
|
||||
}
|
||||
|
||||
// the only time activateFilter is called with filter==='' is when the component is first created
|
||||
// this can be used to check If the user has set 'due' as default filter for daily
|
||||
// and set the filter as 'due' only when the component first loads and not on subsequent reloads.
|
||||
if (type === 'daily' && filter === '' && this.user.preferences.dailyDueDefaultView) {
|
||||
filter = 'due';
|
||||
}
|
||||
|
||||
this.activeFilter = getActiveFilter(type, filter);
|
||||
},
|
||||
setColumnBackgroundVisibility () {
|
||||
this.$nextTick(() => {
|
||||
if (!this.$refs.columnBackground) return;
|
||||
|
||||
const tasksWrapperEl = this.$refs.tasksWrapper;
|
||||
|
||||
const tasksWrapperHeight = tasksWrapperEl.offsetHeight;
|
||||
const quickAddHeight = this.$refs.quickAdd ? this.$refs.quickAdd.offsetHeight : 0;
|
||||
const tasksListHeight = this.$refs.tasksList.$el.offsetHeight;
|
||||
|
||||
let combinedTasksHeights = tasksListHeight + quickAddHeight;
|
||||
|
||||
const rewardsList = tasksWrapperEl.getElementsByClassName('reward-items')[0];
|
||||
if (rewardsList) {
|
||||
combinedTasksHeights += rewardsList.offsetHeight;
|
||||
}
|
||||
|
||||
const columnBackgroundStyle = this.$refs.columnBackground.style;
|
||||
|
||||
if (tasksWrapperHeight - combinedTasksHeights < 150) {
|
||||
columnBackgroundStyle.display = 'none';
|
||||
} else {
|
||||
columnBackgroundStyle.display = 'block';
|
||||
}
|
||||
});
|
||||
},
|
||||
filterByLabel (taskList, filter) {
|
||||
if (!taskList) return [];
|
||||
return taskList.filter(task => {
|
||||
if (filter === 'complete2') return task.completed;
|
||||
if (filter === 'due') return task.isDue;
|
||||
if (filter === 'notDue') return !task.isDue;
|
||||
return !task.completed;
|
||||
});
|
||||
},
|
||||
filterByTagList (taskList, tagList = []) {
|
||||
let filteredTaskList = taskList;
|
||||
// filter requested tasks by tags
|
||||
if (!isEmpty(tagList)) {
|
||||
filteredTaskList = taskList.filter(
|
||||
task => tagList.every(tag => task.tags.indexOf(tag) !== -1)
|
||||
);
|
||||
}
|
||||
return filteredTaskList;
|
||||
},
|
||||
filterBySearchText (taskList, searchText = '') {
|
||||
let filteredTaskList = taskList;
|
||||
// filter requested tasks by search text
|
||||
if (searchText) {
|
||||
// to ensure broadest case insensitive search matching
|
||||
let searchTextLowerCase = searchText.toLowerCase();
|
||||
filteredTaskList = taskList.filter(
|
||||
task => {
|
||||
// eslint rule disabled for block to allow nested binary expression
|
||||
/* eslint-disable no-extra-parens */
|
||||
return (
|
||||
task.text.toLowerCase().indexOf(searchTextLowerCase) > -1 ||
|
||||
(task.notes && task.notes.toLowerCase().indexOf(searchTextLowerCase) > -1) ||
|
||||
(task.checklist && task.checklist.length > 0 &&
|
||||
task.checklist.some(checkItem => checkItem.text.toLowerCase().indexOf(searchTextLowerCase) > -1))
|
||||
);
|
||||
/* eslint-enable no-extra-parens */
|
||||
});
|
||||
}
|
||||
return filteredTaskList;
|
||||
},
|
||||
openBuyDialog (rewardItem) {
|
||||
if (rewardItem.locked) return;
|
||||
|
||||
// Buy armoire and health potions immediately
|
||||
let itemsToPurchaseImmediately = ['potion', 'armoire'];
|
||||
if (itemsToPurchaseImmediately.indexOf(rewardItem.key) !== -1) {
|
||||
this.makeGenericPurchase(rewardItem);
|
||||
this.$emit('buyPressed', rewardItem);
|
||||
return;
|
||||
}
|
||||
|
||||
if (rewardItem.purchaseType === 'quests') {
|
||||
this.selectedItemToBuy = rewardItem;
|
||||
this.$root.$emit('bv::show::modal', 'buy-quest-modal');
|
||||
return;
|
||||
}
|
||||
|
||||
if (rewardItem.purchaseType !== 'gear' || !rewardItem.locked) {
|
||||
this.$emit('openBuyDialog', rewardItem);
|
||||
}
|
||||
},
|
||||
resetItemToBuy ($event) {
|
||||
if (!$event) {
|
||||
this.selectedItemToBuy = null;
|
||||
}
|
||||
},
|
||||
togglePinned (item) {
|
||||
if (!item.pinType) {
|
||||
this.error(this.$t('errorTemporaryItem'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!this.$store.dispatch('user:togglePinnedItem', {type: item.pinType, path: item.path})) {
|
||||
this.text(this.$t('unpinnedItem', {item: item.text}));
|
||||
}
|
||||
} catch (e) {
|
||||
this.error(e.message);
|
||||
}
|
||||
},
|
||||
isDragging (dragging) {
|
||||
this.dragging = dragging;
|
||||
if (dragging) {
|
||||
document.documentElement.classList.add('draggable-cursor');
|
||||
} else {
|
||||
document.documentElement.classList.remove('draggable-cursor');
|
||||
}
|
||||
},
|
||||
taskDestroyed (task) {
|
||||
this.$emit('taskDestroyed', task);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template lang="pug">
|
||||
div(v-if='user.stats.lvl > 10')
|
||||
div.dragInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
|
||||
.spell.col-12.row
|
||||
.col-8.details
|
||||
p.title {{spell.text()}}
|
||||
p.notes {{ `Click on a ${spell.target} to cast!`}}
|
||||
// @TODO make that translatable
|
||||
.col-4.mana
|
||||
.img(:class='`shop_${spell.key} shop-sprite item-img`')
|
||||
|
||||
.drawer-wrapper.d-flex.justify-content-center
|
||||
drawer(
|
||||
:title="$t('skillsTitle')",
|
||||
v-if='user.stats.class && !user.preferences.disableClasses',
|
||||
v-mousePosition="30",
|
||||
@mouseMoved="mouseMoved($event)",
|
||||
:openStatus='openStatus',
|
||||
@toggled='drawerToggled'
|
||||
)
|
||||
div(slot="drawer-slider")
|
||||
.container.spell-container
|
||||
.row
|
||||
.col-12.col-md-3(
|
||||
@click='castStart(skill)',
|
||||
v-for='(skill, key) in spells[user.stats.class]',
|
||||
v-if='user.stats.lvl >= skill.lvl',
|
||||
v-b-popover.hover.auto='skill.notes()')
|
||||
.spell.col-12.row
|
||||
.col-8.details
|
||||
a(:class='{"disabled": spellDisabled(key)}')
|
||||
div.img(:class='`shop_${skill.key} shop-sprite item-img`')
|
||||
span.title {{skill.text()}}
|
||||
.col-4.mana
|
||||
.mana-text
|
||||
.svg-icon(v-html="icons.mana")
|
||||
div {{skill.mana}}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drawer-wrapper {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 19;
|
||||
|
||||
.drawer-container {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
min-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-container {
|
||||
}
|
||||
|
||||
.drawer-slider {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.spell-container {
|
||||
margin-top: .5em;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.spell:hover {
|
||||
cursor: pointer;
|
||||
border: solid 2px #50b5e9;
|
||||
}
|
||||
|
||||
.spell {
|
||||
background: #ffffff;
|
||||
border: solid 2px transparent;
|
||||
margin-bottom: 1em;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
border-radius: 1000px;
|
||||
color: #4e4a57;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.details {
|
||||
text-align: left;
|
||||
padding-top: .5em;
|
||||
padding-right: .1em;
|
||||
|
||||
.img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
padding-bottom: .7em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-weight: normal;
|
||||
color: #686274;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mana-text {
|
||||
margin-bottom: .2em;
|
||||
padding-top: 1.1em;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.mana {
|
||||
padding: .2em;
|
||||
background-color: rgba(70, 167, 217, 0.24);
|
||||
color: #2995cd;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.dragInfo {
|
||||
position: absolute;
|
||||
left: -500px;
|
||||
z-index: 1080;
|
||||
|
||||
.spell {
|
||||
border-radius: 1000px;
|
||||
min-width: 224px;
|
||||
height: 52px;
|
||||
font-size: 12px;
|
||||
padding-left: .5em;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.mana {
|
||||
border-radius: 0 1000px 1000px 0;
|
||||
}
|
||||
|
||||
&.mouse {
|
||||
position: fixed;
|
||||
pointer-events: none
|
||||
}
|
||||
.potion-icon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.popover {
|
||||
position: inherit;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import spells from '../../../common/script/content/spells';
|
||||
|
||||
import { mapState } from 'client/libs/store';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
import spellsMixin from 'client/mixins/spells';
|
||||
import Drawer from 'client/components/ui/drawer';
|
||||
import MouseMoveDirective from 'client/directives/mouseposition.directive';
|
||||
|
||||
import mana from 'assets/svg/mana.svg';
|
||||
import quests from 'common/script/content/quests';
|
||||
import { CONSTANTS, setLocalSetting, getLocalSetting } from 'client/libs/userlocalManager';
|
||||
|
||||
export default {
|
||||
mixins: [notifications, spellsMixin],
|
||||
components: {
|
||||
Drawer,
|
||||
},
|
||||
directives: {
|
||||
mousePosition: MouseMoveDirective,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
spells,
|
||||
quests,
|
||||
applyingAction: false,
|
||||
spell: {},
|
||||
icons: Object.freeze({
|
||||
mana,
|
||||
}),
|
||||
lastMouseMoveEvent: {},
|
||||
potionClickMode: false,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
// @TODO: should we abstract the drawer state/local store to a library and mixing combo? We use a similar pattern in equipment
|
||||
const spellDrawerState = getLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE);
|
||||
if (spellDrawerState === CONSTANTS.drawerStateValues.DRAWER_CLOSED) {
|
||||
this.$store.state.spellOptions.spellDrawOpen = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
openStatus () {
|
||||
return this.$store.state.spellOptions.spellDrawOpen ? 1 : 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
drawerToggled (newState) {
|
||||
this.$store.state.spellOptions.spellDrawOpen = newState;
|
||||
|
||||
if (newState) {
|
||||
setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.drawerStateValues.DRAWER_OPEN);
|
||||
return;
|
||||
}
|
||||
|
||||
setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.drawerStateValues.DRAWER_CLOSED);
|
||||
},
|
||||
spellDisabled (skill) {
|
||||
if (skill === 'frost' && this.user.stats.buffs.streaks) {
|
||||
return true;
|
||||
}
|
||||
// @TODO: Implement
|
||||
// } else if (skill === 'stealth' && this.user.stats.buffs.stealth >= this.user.dailys.length) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
return false;
|
||||
},
|
||||
skillNotes (skill) {
|
||||
let notes = skill.notes();
|
||||
|
||||
if (skill.key === 'frost' && this.spellDisabled(skill.key)) {
|
||||
notes = this.$t('spellWizardFrostAlreadyCast');
|
||||
} else if (skill.key === 'stealth' && this.spellDisabled(skill.key)) {
|
||||
notes = this.$t('spellRogueStealthMaxedOut');
|
||||
} else if (skill.key === 'stealth') {
|
||||
notes = this.$t('spellRogueStealthDaliesAvoided', {
|
||||
originalText: notes,
|
||||
number: this.user.stats.buffs.stealth,
|
||||
});
|
||||
}
|
||||
|
||||
return notes;
|
||||
},
|
||||
questProgress () {
|
||||
let user = this.user;
|
||||
if (!user.party.quest) return 0;
|
||||
|
||||
let userQuest = this.quests[user.party.quest.key];
|
||||
|
||||
if (!userQuest) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (userQuest.boss && user.party.quest.progress.up > 0) {
|
||||
return user.party.quest.progress.up;
|
||||
}
|
||||
|
||||
if (userQuest.collect && user.party.quest.progress.collectedItems > 0) {
|
||||
return user.party.quest.progress.collectedItems;
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
// @TODO: Move to mouse move component??
|
||||
mouseMoved ($event) {
|
||||
// @TODO: throttle
|
||||
if (this.potionClickMode) {
|
||||
this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
|
||||
this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
|
||||
} else {
|
||||
this.lastMouseMoveEvent = $event;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template lang="pug">
|
||||
.tags-popup
|
||||
.tags-category.d-flex(
|
||||
v-for="tagsType in tagsByType",
|
||||
v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'",
|
||||
:key="tagsType.key"
|
||||
)
|
||||
.tags-header
|
||||
strong(v-once) {{ $t(tagsType.key) }}
|
||||
.tags-list.container
|
||||
.row
|
||||
.col-4(v-for="(tag, tagIndex) in tagsType.tags")
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags", :id="`tag-${tag.id}`")
|
||||
label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`", v-markdown="tag.name")
|
||||
.tags-footer
|
||||
span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
|
||||
span.close-tags(@click="close()") {{$t("close")}}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.tags-popup {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: 593px;
|
||||
z-index: 9999;
|
||||
background: $white;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.tags-category {
|
||||
border-bottom: 1px solid $gray-600;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.tags-header {
|
||||
flex-basis: 96px;
|
||||
flex-shrink: 0;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: $blue-10;
|
||||
margin-top: 4px;
|
||||
|
||||
&:focus, &:hover, &:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
.custom-control-label {
|
||||
color: $gray-50 !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-footer {
|
||||
border-top: 1px solid $gray-600;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.close-tags {
|
||||
color: $blue-10;
|
||||
margin: 1.1em 0;
|
||||
margin-left: 2em;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-tags {
|
||||
cursor: pointer;
|
||||
margin: 1.1em 0;
|
||||
color: $red-50;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
|
||||
export default {
|
||||
props: ['tags', 'value'],
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedTags: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagsByType () {
|
||||
const tagsByType = {
|
||||
challenges: {
|
||||
key: 'challenges',
|
||||
tags: [],
|
||||
},
|
||||
groups: {
|
||||
key: 'groups',
|
||||
tags: [],
|
||||
},
|
||||
user: {
|
||||
key: 'tags',
|
||||
tags: [],
|
||||
},
|
||||
};
|
||||
this.$props.tags.forEach(t => {
|
||||
if (t.group) {
|
||||
tagsByType.groups.tags.push(t);
|
||||
} else if (t.challenge) {
|
||||
tagsByType.challenges.tags.push(t);
|
||||
} else {
|
||||
tagsByType.user.tags.push(t);
|
||||
}
|
||||
});
|
||||
return tagsByType;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedTags () {
|
||||
this.$emit('input', this.selectedTags);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.selectedTags = this.value;
|
||||
},
|
||||
methods: {
|
||||
clearTags () {
|
||||
this.selectedTags = [];
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,468 @@
|
||||
<template lang="pug">
|
||||
.row.user-tasks-page
|
||||
broken-task-modal
|
||||
task-modal(
|
||||
:task="editingTask || creatingTask",
|
||||
:purpose="creatingTask !== null ? 'create' : 'edit'",
|
||||
@cancel="cancelTaskModal()",
|
||||
ref="taskModal",
|
||||
)
|
||||
.col-12
|
||||
.row.tasks-navigation
|
||||
.col-12.col-md-4.offset-md-4
|
||||
.d-flex
|
||||
input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
|
||||
button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center.search-button(
|
||||
type="button",
|
||||
@click="toggleFilterPanel()",
|
||||
:class="{active: selectedTags.length > 0}",
|
||||
)
|
||||
.svg-icon.filter-icon.mr-2(v-html="icons.filter")
|
||||
span(v-once) {{ $t('tags') }}
|
||||
.filter-panel(v-if="isFilterPanelOpen", v-on:mouseleave="checkMouseOver")
|
||||
.tags-category.d-flex(
|
||||
v-for="tagsType in tagsByType",
|
||||
v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'",
|
||||
:key="tagsType.key"
|
||||
)
|
||||
.tags-header
|
||||
strong(v-once) {{ $t(tagsType.key) }}
|
||||
a.d-block(v-if="tagsType.key !== 'groups' && !editingTags", @click="editTags(tagsType.key)") {{ $t('editTags2') }}
|
||||
.tags-list.container
|
||||
.row(:class="{'no-gutters': !editingTags}")
|
||||
template(v-if="editingTags && tagsType.key === 'tags'")
|
||||
draggable(
|
||||
v-if="tagsType.key === 'tags'",
|
||||
v-model="tagsSnap[tagsType.key]",
|
||||
class="row"
|
||||
)
|
||||
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
|
||||
.inline-edit-input-group.tag-edit-item.input-group
|
||||
.svg-icon.inline.drag(v-html="icons.drag")
|
||||
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
|
||||
.input-group-append(@click="removeTag(tagIndex, tagsType.key)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
|
||||
.col-6.dragSpace
|
||||
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag")
|
||||
template(v-if="editingTags && tagsType.key === 'challenges'")
|
||||
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
|
||||
.inline-edit-input-group.tag-edit-item.input-group
|
||||
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
|
||||
.input-group-append(@click="removeTag(tagIndex, tagsType.key)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
|
||||
template(v-if="!editingTags || tagsType.key === 'groups'")
|
||||
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="isTagSelected(tag)",
|
||||
@change="toggleTag(tag)", :id="`tag-${tag.id}`"
|
||||
)
|
||||
label.custom-control-label(v-markdown='tag.name', :for="`tag-${tag.id}`")
|
||||
|
||||
.filter-panel-footer.clearfix
|
||||
template(v-if="editingTags === true")
|
||||
.text-center
|
||||
a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
|
||||
a.btn-filters-secondary(@click="cancelTagsEditing()", v-once) {{ $t('cancel') }}
|
||||
template(v-else)
|
||||
.float-left
|
||||
a.btn-filters-danger(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
|
||||
.float-right
|
||||
a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
|
||||
.create-task-area.d-flex
|
||||
transition(name="slide-tasks-btns")
|
||||
.d-flex(v-if="openCreateBtn")
|
||||
.create-task-btn.diamond-btn(
|
||||
v-for="type in columns",
|
||||
:key="type",
|
||||
@click="createTask(type)",
|
||||
v-b-tooltip.hover.bottom="$t(type)",
|
||||
)
|
||||
.svg-icon(v-html="icons[type]", :class='`icon-${type}`')
|
||||
|
||||
#create-task-btn.create-btn.diamond-btn.btn.btn-success(
|
||||
@click="openCreateBtn = !openCreateBtn",
|
||||
:class="{open: openCreateBtn}",
|
||||
)
|
||||
.svg-icon(v-html="icons.positive")
|
||||
b-tooltip(target="create-task-btn", placement="bottom", v-if="!openCreateBtn") {{ $t('addTaskToUser') }}
|
||||
|
||||
.row.tasks-columns
|
||||
task-column.col-lg-3.col-md-6(
|
||||
v-for="column in columns",
|
||||
:type="column", :key="column",
|
||||
:isUser="true", :searchText="searchTextThrottled",
|
||||
:selectedTags="selectedTags",
|
||||
@editTask="editTask",
|
||||
@openBuyDialog="openBuyDialog($event)"
|
||||
)
|
||||
|
||||
spells
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
@import '~client/assets/scss/create-task.scss';
|
||||
|
||||
.user-tasks-page {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.input-search, .search-button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tasks-navigation {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
max-width: 40vw;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
background: $white;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
top: 44px;
|
||||
left: 20vw;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.tags-category {
|
||||
border-bottom: 1px solid $gray-600;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.tags-header {
|
||||
flex-basis: 96px;
|
||||
flex-shrink: 0;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: $blue-10;
|
||||
margin-top: 4px;
|
||||
|
||||
&:focus, &:hover, &:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-edit-input {
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus, &:focus ~ .input-group-append {
|
||||
border-color: $purple-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.new-tag-item {
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left 10px;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
background-size: 10px 10px;
|
||||
padding-left: 40px;
|
||||
background-image: url(~client/assets/svg/for-css/positive.svg);
|
||||
}
|
||||
|
||||
.tag-edit-item {
|
||||
.input-group-append {
|
||||
background: $white;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus {
|
||||
border-color: $purple-500;
|
||||
}
|
||||
}
|
||||
|
||||
.destroy-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .destroy-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
margin-left: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.filter-panel-footer {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
a {
|
||||
&:focus, &:hover, &:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-filters-danger {
|
||||
color: $red-50;
|
||||
}
|
||||
|
||||
.btn-filters-primary {
|
||||
color: $blue-10;
|
||||
}
|
||||
|
||||
.btn-filters-secondary {
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-task-area {
|
||||
top: -2.5rem;
|
||||
}
|
||||
|
||||
.drag {
|
||||
cursor: grab;
|
||||
margin: auto 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
color: #C3C0C7;
|
||||
|
||||
&:hover {
|
||||
color: #878190;
|
||||
}
|
||||
}
|
||||
|
||||
.dragSpace {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.filter-panel {
|
||||
max-width: none;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import TaskColumn from './column';
|
||||
import TaskModal from './taskModal';
|
||||
import spells from './spells';
|
||||
import markdown from 'client/directives/markdown';
|
||||
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import filterIcon from 'assets/svg/filter.svg';
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import habitIcon from 'assets/svg/habit.svg';
|
||||
import dailyIcon from 'assets/svg/daily.svg';
|
||||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
import dragIcon from 'assets/svg/drag_indicator.svg';
|
||||
|
||||
import uuid from 'uuid';
|
||||
import Vue from 'vue';
|
||||
import throttle from 'lodash/throttle';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { mapState, mapActions } from 'client/libs/store';
|
||||
import taskDefaults from 'common/script/libs/taskDefaults';
|
||||
import brokenTaskModal from './brokenTaskModal';
|
||||
|
||||
import Item from 'client/components/inventory/item.vue';
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TaskColumn,
|
||||
TaskModal,
|
||||
Item,
|
||||
spells,
|
||||
brokenTaskModal,
|
||||
draggable,
|
||||
},
|
||||
directives: {
|
||||
markdown,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: ['habit', 'daily', 'todo', 'reward'],
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
isFilterPanelOpen: false,
|
||||
openCreateBtn: false,
|
||||
icons: Object.freeze({
|
||||
positive: positiveIcon,
|
||||
filter: filterIcon,
|
||||
destroy: deleteIcon,
|
||||
habit: habitIcon,
|
||||
daily: dailyIcon,
|
||||
todo: todoIcon,
|
||||
reward: rewardIcon,
|
||||
drag: dragIcon,
|
||||
}),
|
||||
selectedTags: [],
|
||||
temporarilySelectedTags: [],
|
||||
tagsSnap: {
|
||||
tags: [],
|
||||
challenges: [],
|
||||
}, // tags snapshot when being edited
|
||||
editingTags: false,
|
||||
newTag: null,
|
||||
editingTask: null,
|
||||
creatingTask: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
tagsByType () {
|
||||
const userTags = this.user.tags;
|
||||
const tagsByType = {
|
||||
challenges: {
|
||||
key: 'challenges',
|
||||
tags: [],
|
||||
},
|
||||
groups: {
|
||||
key: 'groups',
|
||||
tags: [],
|
||||
},
|
||||
user: {
|
||||
key: 'tags',
|
||||
tags: [],
|
||||
},
|
||||
};
|
||||
|
||||
userTags.forEach(t => {
|
||||
if (t.group) {
|
||||
tagsByType.groups.tags.push(t);
|
||||
} else if (t.challenge) {
|
||||
tagsByType.challenges.tags.push(t);
|
||||
} else {
|
||||
tagsByType.user.tags.push(t);
|
||||
}
|
||||
});
|
||||
|
||||
return tagsByType;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({setUser: 'user:set'}),
|
||||
checkMouseOver: throttle(function throttleSearch () {
|
||||
if (this.editingTags) return;
|
||||
this.closeFilterPanel();
|
||||
}, 250),
|
||||
editTags () {
|
||||
// clone the arrays being edited so that we can revert if needed
|
||||
this.tagsSnap.tags = this.tagsByType.user.tags.slice();
|
||||
this.tagsSnap.challenges = this.tagsByType.challenges.tags.slice();
|
||||
this.editingTags = true;
|
||||
},
|
||||
addTag (eventObj, key) {
|
||||
this.tagsSnap[key].push({id: uuid.v4(), name: this.newTag});
|
||||
this.newTag = null;
|
||||
},
|
||||
removeTag (index, key) {
|
||||
const tagId = this.tagsSnap[key][index].id;
|
||||
const indexInSelected = this.selectedTags.indexOf(tagId);
|
||||
if (indexInSelected !== -1) this.$delete(this.selectedTags, indexInSelected);
|
||||
this.$delete(this.tagsSnap[key], index);
|
||||
},
|
||||
saveTags () {
|
||||
if (this.newTag) this.addTag(null, 'tags');
|
||||
|
||||
this.tagsByType.user.tags = this.tagsSnap.tags;
|
||||
this.tagsByType.challenges.tags = this.tagsSnap.challenges;
|
||||
|
||||
this.setUser({tags: this.tagsSnap.tags.concat(this.tagsSnap.challenges)});
|
||||
this.cancelTagsEditing();
|
||||
},
|
||||
cancelTagsEditing () {
|
||||
this.editingTags = false;
|
||||
this.tagsSnap = {
|
||||
tags: [],
|
||||
challenges: [],
|
||||
};
|
||||
this.newTag = null;
|
||||
},
|
||||
editTask (task) {
|
||||
this.editingTask = cloneDeep(task);
|
||||
// Necessary otherwise the first time the modal is not rendered
|
||||
Vue.nextTick(() => {
|
||||
this.$root.$emit('bv::show::modal', 'task-modal');
|
||||
});
|
||||
},
|
||||
createTask (type) {
|
||||
this.openCreateBtn = false;
|
||||
this.creatingTask = taskDefaults({type, text: ''}, this.user);
|
||||
this.creatingTask.tags = this.selectedTags;
|
||||
|
||||
// Necessary otherwise the first time the modal is not rendered
|
||||
Vue.nextTick(() => {
|
||||
this.$root.$emit('bv::show::modal', 'task-modal');
|
||||
});
|
||||
},
|
||||
cancelTaskModal () {
|
||||
this.editingTask = null;
|
||||
this.creatingTask = null;
|
||||
},
|
||||
toggleFilterPanel () {
|
||||
if (this.isFilterPanelOpen === true) {
|
||||
this.closeFilterPanel();
|
||||
} else {
|
||||
this.openFilterPanel();
|
||||
}
|
||||
},
|
||||
openFilterPanel () {
|
||||
this.isFilterPanelOpen = true;
|
||||
this.temporarilySelectedTags = this.selectedTags.slice();
|
||||
},
|
||||
closeFilterPanel () {
|
||||
this.temporarilySelectedTags = [];
|
||||
this.isFilterPanelOpen = false;
|
||||
},
|
||||
resetFilters () {
|
||||
this.selectedTags = [];
|
||||
this.closeFilterPanel();
|
||||
},
|
||||
applyFilters () {
|
||||
const temporarilySelectedTags = this.temporarilySelectedTags;
|
||||
this.selectedTags = temporarilySelectedTags.slice();
|
||||
},
|
||||
toggleTag (tag) {
|
||||
const temporarilySelectedTags = this.temporarilySelectedTags;
|
||||
const tagI = temporarilySelectedTags.indexOf(tag.id);
|
||||
if (tagI === -1) {
|
||||
temporarilySelectedTags.push(tag.id);
|
||||
} else {
|
||||
temporarilySelectedTags.splice(tagI, 1);
|
||||
}
|
||||
|
||||
this.applyFilters();
|
||||
},
|
||||
isTagSelected (tag) {
|
||||
const tagId = tag.id;
|
||||
if (this.temporarilySelectedTags.indexOf(tagId) !== -1) return true;
|
||||
return false;
|
||||
},
|
||||
openBuyDialog (item) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user