pug to html
This commit is contained in:
Matteo Pagliazzi
@@ -1,17 +1,44 @@
|
||||
<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>
|
||||
<div>
|
||||
<approval-modal :task="task" /><div
|
||||
v-if="!approvalRequested && !multipleApprovalsRequested"
|
||||
class="claim-bottom-message d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
class="mr-auto ml-2"
|
||||
v-html="message"
|
||||
></div><div
|
||||
v-if="!userIsAssigned"
|
||||
class="ml-auto mr-2"
|
||||
>
|
||||
<a
|
||||
class="claim-color"
|
||||
@click="claim()"
|
||||
>{{ $t('claim') }}</a>
|
||||
</div><div
|
||||
v-if="userIsAssigned"
|
||||
class="ml-auto mr-2"
|
||||
>
|
||||
<a
|
||||
class="unclaim-color"
|
||||
@click="unassign()"
|
||||
>{{ $t('removeClaim') }}</a>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="approvalRequested && userIsManager"
|
||||
class="claim-bottom-message d-flex align-items-center justify-content-around"
|
||||
>
|
||||
<a
|
||||
class="approve-color"
|
||||
@click="approve()"
|
||||
>{{ $t('approveTask') }}</a><a @click="needsWork()">{{ $t('needsWork') }}</a>
|
||||
</div><div
|
||||
v-if="multipleApprovalsRequested && userIsManager"
|
||||
class="claim-bottom-message d-flex align-items-center"
|
||||
>
|
||||
<a @click="showRequests()">{{ $t('viewRequests') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss", scoped>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<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>
|
||||
<div
|
||||
v-if="message"
|
||||
class="claim-top-message d-flex align-content-center"
|
||||
:class="{'approval-action': userIsAdmin, 'approval-pending': !userIsAdmin}"
|
||||
>
|
||||
<div
|
||||
class="m-auto"
|
||||
v-html="message"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,15 +1,42 @@
|
||||
<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>
|
||||
<b-modal
|
||||
id="approval-modal"
|
||||
:title="$t('approveTask')"
|
||||
size="md"
|
||||
:hide-footer="true"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<div
|
||||
v-for="(approval, index) in task.approvals"
|
||||
class="row approval"
|
||||
>
|
||||
<div class="col-8">
|
||||
<strong>{{ approval.userId.profile.name }}</strong>
|
||||
</div><div class="col-2">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="approve(index)"
|
||||
>
|
||||
{{ $t('approve') }}
|
||||
</button>
|
||||
</div><div class="col-2">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="needsWork(index)"
|
||||
>
|
||||
{{ $t('needsWork') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('close') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,28 +1,63 @@
|
||||
<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>
|
||||
<b-modal
|
||||
id="broken-task-modal"
|
||||
title="Broken Challenge"
|
||||
size="sm"
|
||||
:hide-footer="true"
|
||||
>
|
||||
<div
|
||||
v-if="brokenChallengeTask && brokenChallengeTask.challenge"
|
||||
class="modal-body"
|
||||
>
|
||||
<div v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED' || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'">
|
||||
<h2>{{ $t('brokenTask') }}</h2><div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="unlink('keep')"
|
||||
>
|
||||
{{ $t('keepIt') }}
|
||||
</button><button
|
||||
class="btn btn-danger"
|
||||
@click="removeTask(obj)"
|
||||
>
|
||||
{{ $t('removeIt') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
|
||||
<h2>{{ $t('brokenChallenge') }}</h2><div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="unlink('keep-all')"
|
||||
>
|
||||
{{ $t('keepThem') }}
|
||||
</button><button
|
||||
class="btn btn-danger"
|
||||
@click="unlink('remove-all')"
|
||||
>
|
||||
{{ $t('removeThem') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
|
||||
<h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2><div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="unlink('keep-all')"
|
||||
>
|
||||
{{ $t('keepThem') }}
|
||||
</button><button
|
||||
class="btn btn-danger"
|
||||
@click="unlink('remove-all')"
|
||||
>
|
||||
{{ $t('removeThem') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- @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') }}-->
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<template lang="pug">
|
||||
.text-center.delete-completed
|
||||
.help-text {{ $t('clearCompletedDescription') }}
|
||||
.btn.btn-danger(@click='clearTodos()') {{ $t('clearCompleted') }}
|
||||
<template>
|
||||
<div class="text-center delete-completed">
|
||||
<div class="help-text">
|
||||
{{ $t('clearCompletedDescription') }}
|
||||
</div><div
|
||||
class="btn btn-danger"
|
||||
@click="clearTodos()"
|
||||
>
|
||||
{{ $t('clearCompleted') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,78 +1,122 @@
|
||||
<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>
|
||||
<div
|
||||
class="tasks-column"
|
||||
:class="type"
|
||||
>
|
||||
<b-modal ref="editTaskModal" /><buy-quest-modal
|
||||
v-if="type === 'reward'"
|
||||
:item="selectedItemToBuy || {}"
|
||||
:price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
|
||||
:with-pin="true"
|
||||
@change="resetItemToBuy($event)"
|
||||
/><div class="d-flex align-items-center">
|
||||
<h2 class="column-title">
|
||||
{{ $t(typeLabel) }}
|
||||
</h2><div
|
||||
v-if="badgeCount > 0"
|
||||
class="badge badge-pill badge-purple column-badge mx-1"
|
||||
>
|
||||
{{ badgeCount }}
|
||||
</div><div class="filters d-flex justify-content-end">
|
||||
<div
|
||||
v-for="filter in typeFilters"
|
||||
class="filter small-text"
|
||||
:class="{active: activeFilter.label === filter}"
|
||||
@click="activateFilter(type, filter)"
|
||||
>
|
||||
{{ $t(filter) }}
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
ref="tasksWrapper"
|
||||
class="tasks-list"
|
||||
>
|
||||
<textarea
|
||||
v-if="isUser"
|
||||
ref="quickAdd"
|
||||
v-model="quickAddText"
|
||||
class="quick-add"
|
||||
:rows="quickAddRows"
|
||||
:placeholder="quickAddPlaceholder"
|
||||
@keypress.enter="quickAdd"
|
||||
@focus="quickAddFocused = true"
|
||||
@blur="quickAddFocused = false"
|
||||
></textarea><transition name="quick-add-tip-slide">
|
||||
<div
|
||||
v-show="quickAddFocused"
|
||||
class="quick-add-tip small-text"
|
||||
v-html="$t('addMultipleTip', {taskType: $t(typeLabel)})"
|
||||
></div>
|
||||
</transition><clear-completed-todos v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0" /><div
|
||||
v-if="isUser === true"
|
||||
ref="columnBackground"
|
||||
class="column-background"
|
||||
:class="{'initial-description': initialColumnDescription}"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div><h3 v-once>
|
||||
{{ $t('theseAreYourTasks', {taskType: $t(typeLabel)}) }}
|
||||
</h3><div class="small-text">
|
||||
{{ $t(`${type}sDesc`) }}
|
||||
</div>
|
||||
</div><draggable
|
||||
ref="tasksList"
|
||||
class="sortable-tasks"
|
||||
:options="{disabled: activeFilter.label === 'scheduled' || !isUser, scrollSensitivity: 64}"
|
||||
@update="taskSorted"
|
||||
@start="isDragging(true)"
|
||||
@end="isDragging(false)"
|
||||
>
|
||||
<task
|
||||
v-for="task in taskList"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:is-user="isUser"
|
||||
:show-options="showOptions"
|
||||
:group="group"
|
||||
@editTask="editTask"
|
||||
@moveTo="moveTo"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
/>
|
||||
</draggable><template v-if="hasRewardsList">
|
||||
<draggable
|
||||
ref="rewardsList"
|
||||
class="reward-items"
|
||||
@update="rewardSorted"
|
||||
@start="rewardDragStart"
|
||||
@end="rewardDragEnd"
|
||||
>
|
||||
<shopItem
|
||||
v-for="reward in inAppRewards"
|
||||
:key="reward.key"
|
||||
:item="reward"
|
||||
:highlight-border="reward.isSuggested"
|
||||
:show-popover="showPopovers"
|
||||
:popover-position="'left'"
|
||||
@click="openBuyDialog(reward)"
|
||||
>
|
||||
<template
|
||||
slot="itemBadge"
|
||||
slot-scope="ctx"
|
||||
>
|
||||
<span
|
||||
class="badge badge-pill badge-item badge-svg"
|
||||
:class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.highlightBorder}"
|
||||
@click.prevent.stop="togglePinned(ctx.item)"
|
||||
><span
|
||||
class="svg-icon inline icon-12 color"
|
||||
v-html="icons.pin"
|
||||
></span></span>
|
||||
</template>
|
||||
</shopItem>
|
||||
</draggable>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,40 +1,65 @@
|
||||
<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>
|
||||
<div v-if="user.stats.lvl > 10">
|
||||
<div
|
||||
v-if="potionClickMode"
|
||||
ref="clickPotionInfo"
|
||||
class="dragInfo mouse"
|
||||
>
|
||||
<div class="spell col-12 row">
|
||||
<div class="col-8 details">
|
||||
<p class="title">
|
||||
{{ spell.text() }}
|
||||
</p><p class="notes">
|
||||
{{ `Click on a ${spell.target} to cast!` }}
|
||||
</p><!-- @TODO make that translatable-->
|
||||
</div><div class="col-4 mana">
|
||||
<div
|
||||
class="img"
|
||||
:class="`shop_${spell.key} shop-sprite item-img`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="drawer-wrapper d-flex justify-content-center">
|
||||
<drawer
|
||||
v-if="user.stats.class && !user.preferences.disableClasses"
|
||||
v-mousePosition="30"
|
||||
:title="$t('skillsTitle')"
|
||||
:open-status="openStatus"
|
||||
@mouseMoved="mouseMoved($event)"
|
||||
@toggled="drawerToggled"
|
||||
>
|
||||
<div slot="drawer-slider">
|
||||
<div class="container spell-container">
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="(skill, key) in spells[user.stats.class]"
|
||||
v-if="user.stats.lvl >= skill.lvl"
|
||||
v-b-popover.hover.auto="skill.notes()"
|
||||
class="col-12 col-md-3"
|
||||
@click="castStart(skill)"
|
||||
>
|
||||
<div class="spell col-12 row">
|
||||
<div class="col-8 details">
|
||||
<a :class="{'disabled': spellDisabled(key)}"></a><div
|
||||
class="img"
|
||||
:class="`shop_${skill.key} shop-sprite item-img`"
|
||||
></div><span class="title">{{ skill.text() }}</span>
|
||||
</div><div class="col-4 mana">
|
||||
<div class="mana-text">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.mana"
|
||||
></div><div>{{ skill.mana }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,21 +1,46 @@
|
||||
<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>
|
||||
<div class="tags-popup">
|
||||
<div
|
||||
v-for="tagsType in tagsByType"
|
||||
v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'"
|
||||
:key="tagsType.key"
|
||||
class="tags-category d-flex"
|
||||
>
|
||||
<div class="tags-header">
|
||||
<strong v-once>{{ $t(tagsType.key) }}</strong>
|
||||
</div><div class="tags-list container">
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsType.tags"
|
||||
class="col-4"
|
||||
>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
:id="`tag-${tag.id}`"
|
||||
v-model="selectedTags"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="tag.id"
|
||||
><label
|
||||
v-markdown="tag.name"
|
||||
class="custom-control-label"
|
||||
:title="tag.name"
|
||||
:for="`tag-${tag.id}`"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="tags-footer">
|
||||
<span
|
||||
class="clear-tags"
|
||||
@click="clearTags()"
|
||||
>{{ $t("clearTags") }}</span><span
|
||||
class="close-tags"
|
||||
@click="close()"
|
||||
>{{ $t("close") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,113 +1,287 @@
|
||||
<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>
|
||||
<div class="task-wrapper">
|
||||
<div
|
||||
class="task"
|
||||
:class="[{'groupTask': task.group.id}, `type_${task.type}`]"
|
||||
@click="castEnd($event, task)"
|
||||
>
|
||||
<approval-header
|
||||
v-if="task.group.id"
|
||||
:task="task"
|
||||
:group="group"
|
||||
/><div
|
||||
class="d-flex"
|
||||
:class="{'task-not-scoreable': isUser !== true}"
|
||||
>
|
||||
<!-- Habits left side control--><div
|
||||
v-if="task.type === 'habit'"
|
||||
class="left-control d-flex align-items-center justify-content-center"
|
||||
:class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.up.bg]"
|
||||
>
|
||||
<div
|
||||
class="task-control habit-control"
|
||||
:class="controlClass.up.inner"
|
||||
@click="(isUser && task.up) ? score('up') : null"
|
||||
>
|
||||
<div
|
||||
v-if="this.task.group.id && !isUser"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.up.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
v-else
|
||||
class="svg-icon positive"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
</div><!-- Dailies and todos left side control--><div
|
||||
v-if="task.type === 'daily' || task.type === 'todo'"
|
||||
class="left-control d-flex justify-content-center"
|
||||
:class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.bg]"
|
||||
>
|
||||
<div
|
||||
class="task-control daily-todo-control"
|
||||
:class="controlClass.inner"
|
||||
@click="isUser ? score(task.completed ? 'down' : 'up') : null"
|
||||
>
|
||||
<div
|
||||
v-if="this.task.group.id && !isUser && !task.completed"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
v-else
|
||||
class="svg-icon check"
|
||||
:class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}"
|
||||
v-html="icons.check"
|
||||
></div>
|
||||
</div>
|
||||
</div><!-- Task title, description and icons--><div
|
||||
class="task-content"
|
||||
:class="contentClass"
|
||||
>
|
||||
<div
|
||||
class="task-clickable-area"
|
||||
:class="{'task-clickable-area-user': isUser}"
|
||||
@click="edit($event, task)"
|
||||
>
|
||||
<div class="d-flex justify-content-between">
|
||||
<h3
|
||||
v-markdown="task.text"
|
||||
class="task-title"
|
||||
:class="{ 'has-notes': task.notes }"
|
||||
></h3><menu-dropdown
|
||||
v-if="!isRunningYesterdailies && showOptions"
|
||||
ref="taskDropdown"
|
||||
v-b-tooltip.hover.top="$t('options')"
|
||||
class="task-dropdown"
|
||||
:right="task.type === 'reward'"
|
||||
>
|
||||
<div slot="dropdown-toggle">
|
||||
<div
|
||||
class="svg-icon dropdown-icon"
|
||||
v-html="icons.menu"
|
||||
></div>
|
||||
</div><div slot="dropdown-content">
|
||||
<div
|
||||
ref="editTaskItem"
|
||||
class="dropdown-item edit-task-item"
|
||||
>
|
||||
<span class="dropdown-icon-item"><span
|
||||
class="svg-icon inline edit-icon"
|
||||
v-html="icons.edit"
|
||||
></span><span class="text">{{ $t('edit') }}</span></span>
|
||||
</div><div
|
||||
v-if="isUser"
|
||||
class="dropdown-item"
|
||||
@click="moveToTop"
|
||||
>
|
||||
<span class="dropdown-icon-item"><span
|
||||
class="svg-icon inline push-to-top"
|
||||
v-html="icons.top"
|
||||
></span><span class="text">{{ $t('taskToTop') }}</span></span>
|
||||
</div><div
|
||||
v-if="isUser"
|
||||
class="dropdown-item"
|
||||
@click="moveToBottom"
|
||||
>
|
||||
<span class="dropdown-icon-item"><span
|
||||
class="svg-icon inline push-to-bottom"
|
||||
v-html="icons.bottom"
|
||||
></span><span class="text">{{ $t('taskToBottom') }}</span></span>
|
||||
</div><div
|
||||
v-if="canDelete(task)"
|
||||
class="dropdown-item"
|
||||
@click="destroy"
|
||||
>
|
||||
<span class="dropdown-icon-item delete-task-item"><span
|
||||
class="svg-icon inline delete"
|
||||
v-html="icons.delete"
|
||||
></span><span class="text">{{ $t('delete') }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</menu-dropdown>
|
||||
</div><div
|
||||
v-markdown="task.notes"
|
||||
class="task-notes small-text"
|
||||
:class="{'has-checklist': task.notes && hasChecklist}"
|
||||
></div>
|
||||
</div><div
|
||||
v-if="canViewchecklist"
|
||||
class="checklist"
|
||||
:class="{isOpen: !task.collapseChecklist}"
|
||||
>
|
||||
<div class="d-inline-flex">
|
||||
<div
|
||||
v-if="isUser"
|
||||
v-b-tooltip.hover.bottom="$t(`${task.collapseChecklist ? 'expand': 'collapse'}Checklist`)"
|
||||
class="collapse-checklist d-flex align-items-center expand-toggle"
|
||||
:class="{open: !task.collapseChecklist}"
|
||||
@click="collapseChecklist(task)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.checklist"
|
||||
></div><span>{{ checklistProgress }}</span>
|
||||
</div>
|
||||
</div><div
|
||||
v-for="item in task.checklist"
|
||||
v-if="!task.collapseChecklist"
|
||||
class="custom-control custom-checkbox checklist-item"
|
||||
:class="{'checklist-item-done': item.completed}"
|
||||
>
|
||||
<input
|
||||
:id="`checklist-${item.id}-${random}`"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:checked="item.completed"
|
||||
:disabled="castingSpell || !isUser"
|
||||
@change="toggleChecklistItem(item)"
|
||||
><label
|
||||
v-markdown="item.text"
|
||||
class="custom-control-label"
|
||||
:for="`checklist-${item.id}-${random}`"
|
||||
></label>
|
||||
</div>
|
||||
</div><div class="icons small-text d-flex align-items-center">
|
||||
<div
|
||||
v-if="task.type === 'todo' && task.date"
|
||||
class="d-flex align-items-center"
|
||||
:class="{'due-overdue': isDueOverdue}"
|
||||
>
|
||||
<div
|
||||
v-b-tooltip.hover.bottom="$t('dueDate')"
|
||||
class="svg-icon calendar"
|
||||
v-html="icons.calendar"
|
||||
></div><span>{{ dueIn }}</span>
|
||||
</div><div class="icons-right d-flex justify-content-end">
|
||||
<div
|
||||
v-if="showStreak"
|
||||
class="d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
v-b-tooltip.hover.bottom="$t('streakCounter')"
|
||||
class="svg-icon streak"
|
||||
v-html="icons.streak"
|
||||
></div><span v-if="task.type === 'daily'">{{ task.streak }}</span><span v-if="task.type === 'habit'"><span
|
||||
v-if="task.up"
|
||||
class="m-0"
|
||||
>+{{ task.counterUp }}</span><span
|
||||
v-if="task.up && task.down"
|
||||
class="m-0"
|
||||
> | </span><span
|
||||
v-if="task.down"
|
||||
class="m-0"
|
||||
>-{{ task.counterDown }}</span></span>
|
||||
</div><div
|
||||
v-if="task.challenge && task.challenge.id"
|
||||
class="d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
v-if="!task.challenge.broken"
|
||||
v-b-tooltip.hover.bottom="shortName"
|
||||
class="svg-icon challenge"
|
||||
v-html="icons.challenge"
|
||||
></div><div
|
||||
v-if="task.challenge.broken"
|
||||
v-b-tooltip.hover.bottom="$t('brokenChaLink')"
|
||||
class="svg-icon challenge broken"
|
||||
@click="handleBrokenTask(task)"
|
||||
v-html="icons.brokenChallengeIcon"
|
||||
></div>
|
||||
</div><div
|
||||
v-if="hasTags"
|
||||
:id="`tags-icon-${task._id}`"
|
||||
class="d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
class="svg-icon tags"
|
||||
v-html="icons.tags"
|
||||
></div>
|
||||
</div><b-popover
|
||||
v-if="hasTags"
|
||||
:target="`tags-icon-${task._id}`"
|
||||
triggers="hover"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="tags-popover">
|
||||
<div class="d-flex align-items-center tags-container">
|
||||
<div
|
||||
v-once
|
||||
class="tags-popover-title"
|
||||
>
|
||||
{{ `${$t('tags')}:` }}
|
||||
</div><div
|
||||
v-for="tag in getTagsFor(task)"
|
||||
v-markdown="tag"
|
||||
class="tag-label"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Habits right side control--><div
|
||||
v-if="task.type === 'habit'"
|
||||
class="right-control d-flex align-items-center justify-content-center"
|
||||
:class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.down.bg]"
|
||||
>
|
||||
<div
|
||||
class="task-control habit-control"
|
||||
:class="controlClass.down.inner"
|
||||
@click="(isUser && task.down) ? score('down') : null"
|
||||
>
|
||||
<div
|
||||
v-if="this.task.group.id && !isUser"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.down.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
v-else
|
||||
class="svg-icon negative"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
</div><!-- Rewards right side control--><div
|
||||
v-if="task.type === 'reward'"
|
||||
class="right-control d-flex align-items-center justify-content-center reward-control"
|
||||
:class="controlClass.bg"
|
||||
@click="isUser ? score('down') : null"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.gold"
|
||||
></div><div class="small-text">
|
||||
{{ task.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div><approval-footer
|
||||
v-if="task.group.id"
|
||||
:task="task"
|
||||
:group="group"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,250 +1,644 @@
|
||||
<template lang="pug">
|
||||
b-modal#task-modal(v-bind:no-close-on-esc="showTagsSelect", v-bind:no-close-on-backdrop="showTagsSelect", size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
|
||||
.task-modal-header(slot="modal-header", :class="cssClass('bg')", @click="handleClick($event)", v-if="task")
|
||||
.clearfix
|
||||
h1.float-left {{ title }}
|
||||
.float-right.d-flex.align-items-center
|
||||
span.cancel-task-btn.mr-2(v-once, @click="cancel()") {{ $t('cancel') }}
|
||||
button.btn.btn-secondary(@click="submit()", v-once) {{ $t('save') }}
|
||||
.form-group
|
||||
label(v-once) {{ `${$t('text')}*` }}
|
||||
input.form-control.title-input(
|
||||
type="text",
|
||||
required, v-model="task.text",
|
||||
ref="inputToFocus",
|
||||
spellcheck="true",
|
||||
<template>
|
||||
<b-modal
|
||||
id="task-modal"
|
||||
:no-close-on-esc="showTagsSelect"
|
||||
:no-close-on-backdrop="showTagsSelect"
|
||||
size="sm"
|
||||
@hidden="onClose()"
|
||||
@show="handleOpen()"
|
||||
@shown="focusInput()"
|
||||
>
|
||||
<div
|
||||
v-if="task"
|
||||
slot="modal-header"
|
||||
class="task-modal-header"
|
||||
:class="cssClass('bg')"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left">
|
||||
{{ title }}
|
||||
</h1><div class="float-right d-flex align-items-center">
|
||||
<span
|
||||
v-once
|
||||
class="cancel-task-btn mr-2"
|
||||
@click="cancel()"
|
||||
>{{ $t('cancel') }}</span><button
|
||||
v-once
|
||||
class="btn btn-secondary"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ `${$t('text')}*` }}</label><input
|
||||
ref="inputToFocus"
|
||||
v-model="task.text"
|
||||
class="form-control title-input"
|
||||
type="text"
|
||||
required="required"
|
||||
spellcheck="true"
|
||||
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
|
||||
)
|
||||
.form-group
|
||||
label.d-flex.align-items-center.justify-content-between(v-once)
|
||||
span {{ $t('notes') }}
|
||||
small(v-once)
|
||||
a(target="_blank", href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
|
||||
|
||||
textarea.form-control(v-model="task.notes", rows="3")
|
||||
.task-modal-content(@click="handleClick($event)")
|
||||
form(v-if="task", @submit.stop.prevent="submit()", @click="handleClick($event)")
|
||||
.option.mt-0(v-if="task.type === 'reward'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('cost') }}
|
||||
.input-group
|
||||
.input-group-prepend.input-group-icon.align-items-center
|
||||
.svg-icon.gold(v-html="icons.gold")
|
||||
input.form-control(type="number", v-model="task.value", required, placeholder="Enter a Value", step="0.01", min="0")
|
||||
|
||||
.option.mt-0(v-if="checklistEnabled")
|
||||
label(v-once) {{ $t('checklist') }}
|
||||
br
|
||||
draggable(
|
||||
v-model="checklist",
|
||||
:options="{handle: '.grippy', filter: '.task-dropdown'}",
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<label
|
||||
v-once
|
||||
class="d-flex align-items-center justify-content-between"
|
||||
><span>{{ $t('notes') }}</span><small v-once><a
|
||||
target="_blank"
|
||||
href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
|
||||
>{{ $t('markdownHelpLink') }}</a></small></label><textarea
|
||||
v-model="task.notes"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
</div><div
|
||||
class="task-modal-content"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
<form
|
||||
v-if="task"
|
||||
@submit.stop.prevent="submit()"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
<div
|
||||
v-if="task.type === 'reward'"
|
||||
class="option mt-0"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('cost') }}</label><div class="input-group">
|
||||
<div class="input-group-prepend input-group-icon align-items-center">
|
||||
<div
|
||||
class="svg-icon gold"
|
||||
v-html="icons.gold"
|
||||
></div>
|
||||
</div><input
|
||||
v-model="task.value"
|
||||
class="form-control"
|
||||
type="number"
|
||||
required="required"
|
||||
placeholder="Enter a Value"
|
||||
step="0.01"
|
||||
min="0"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="checklistEnabled"
|
||||
class="option mt-0"
|
||||
>
|
||||
<label v-once>{{ $t('checklist') }}</label><br><draggable
|
||||
v-model="checklist"
|
||||
:options="{handle: '.grippy', filter: '.task-dropdown'}"
|
||||
@update="sortedChecklist"
|
||||
)
|
||||
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
|
||||
span.grippy
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
|
||||
span.input-group-append(@click="removeChecklistItem($index)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
|
||||
.d-flex.justify-content-center(v-if="task.type === 'habit'")
|
||||
.option-item.habit-control(@click="toggleUpDirection()", :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.up ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.positive(v-html="icons.positive", :class="task.up ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.up ? cssClass('text') : ''") {{ $t('positive') }}
|
||||
.option-item.habit-control(@click="toggleDownDirection()", :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.down ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.negative(v-html="icons.negative", :class="task.down ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.down ? cssClass('text') : ''") {{ $t('negative') }}
|
||||
template(v-if="task.type !== 'reward'")
|
||||
label(v-once)
|
||||
span.float-left {{ $t('difficulty') }}
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop="$t('difficultyHelp')")
|
||||
.d-flex.justify-content-center.difficulty-options
|
||||
.option-item(:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(0.1)")
|
||||
.option-item-box(:class="task.priority === 0.1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
|
||||
.option-item-label(:class="task.priority === 0.1 ? cssClass('text') : ''") {{ $t('trivial') }}
|
||||
.option-item(:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1)")
|
||||
.option-item-box(:class="task.priority === 1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
|
||||
.option-item-label(:class="task.priority === 1 ? cssClass('text') : ''") {{ $t('easy') }}
|
||||
.option-item(:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1.5)")
|
||||
.option-item-box(:class="task.priority === 1.5 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
|
||||
.option-item-label(:class="task.priority === 1.5 ? cssClass('text') : ''") {{ $t('medium') }}
|
||||
.option-item(:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(2)")
|
||||
.option-item-box(:class="task.priority === 2 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
|
||||
.option-item-label(:class="task.priority === 2 ? cssClass('text') : ''") {{ $t('hard') }}
|
||||
.option(v-if="task.type === 'todo'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('dueDate') }}
|
||||
datepicker(
|
||||
v-model="task.date",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton='true',
|
||||
:clearButtonText='$t("clear")',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired',
|
||||
:highlighted='calendarHighlights'
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('startDate') }}
|
||||
datepicker(
|
||||
v-model="task.startDate",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton="false",
|
||||
:todayButton="!challengeAccessRequired",
|
||||
:todayButtonText="$t('today')",
|
||||
:disabled-picker="challengeAccessRequired",
|
||||
:highlighted='calendarHighlights'
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('repeats') }}
|
||||
b-dropdown.inline-dropdown(:text="$t(task.frequency)")
|
||||
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']",
|
||||
:key="frequency", @click="task.frequency = frequency",
|
||||
:disabled='challengeAccessRequired',
|
||||
:class="{active: task.frequency === frequency}")
|
||||
| {{ $t(frequency) }}
|
||||
.form-group
|
||||
label(v-once) {{ $t('repeatEvery') }}
|
||||
.input-group
|
||||
input.form-control(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
|
||||
.input-group-append.input-group-text {{ repeatSuffix }}
|
||||
template(v-if="task.frequency === 'weekly'")
|
||||
.form-group
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-check-inline.weekday-check.mr-0(
|
||||
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
|
||||
:key="dayNumber",
|
||||
)
|
||||
.custom-control.custom-checkbox.custom-control-inline
|
||||
input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired', :id="`weekday-${dayNumber}`")
|
||||
label.custom-control-label(v-once, :for="`weekday-${dayNumber}`") {{ weekdaysMin(dayNumber) }}
|
||||
template(v-if="task.frequency === 'monthly'")
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-radio
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth", id="repeat-dayOfMonth" name="repeatsOn")
|
||||
label.custom-control-label(for="repeat-dayOfMonth") {{ $t('dayOfMonth') }}
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek" name="repeatsOn")
|
||||
label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
|
||||
|
||||
.tags-select.option(v-if="isUserTask")
|
||||
.tags-inline.form-group.row
|
||||
label.col-12(v-once) {{ $t('tags') }}
|
||||
.col-12
|
||||
.category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
|
||||
span.category-select(v-if='task.tags && task.tags.length === 0')
|
||||
.tags-none {{$t('none')}}
|
||||
.dropdown-toggle
|
||||
span.category-select(v-else)
|
||||
.category-label(v-for='tagName in truncatedSelectedTags', :title="tagName", v-markdown='tagName')
|
||||
.tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
|
||||
.dropdown-toggle
|
||||
tags-popup(ref="popup", v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
|
||||
|
||||
.option(v-if="task.type === 'habit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('resetStreak') }}
|
||||
b-dropdown.inline-dropdown(:text="$t(task.frequency)", :disabled='challengeAccessRequired')
|
||||
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
|
||||
| {{ $t(frequency) }}
|
||||
|
||||
.option.group-options(v-if='groupId')
|
||||
.form-group(v-if="task.type === 'todo'")
|
||||
label(v-once) {{ $t('sharedCompletion') }}
|
||||
b-dropdown.inline-dropdown(:text="$t(sharedCompletion)")
|
||||
b-dropdown-item(
|
||||
v-for="completionOption in ['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']",
|
||||
:key="completionOption",
|
||||
@click="sharedCompletion = completionOption",
|
||||
>
|
||||
<div
|
||||
v-for="(item, $index) in checklist"
|
||||
class="inline-edit-input-group checklist-group input-group"
|
||||
>
|
||||
<span class="grippy"></span><input
|
||||
v-model="item.text"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
><span
|
||||
class="input-group-append"
|
||||
@click="removeChecklistItem($index)"
|
||||
><div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div></span>
|
||||
</div>
|
||||
</draggable><input
|
||||
v-model="newChecklistItem"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newChecklistItem')"
|
||||
@keydown.enter="addChecklistItem($event)"
|
||||
>
|
||||
</div><div
|
||||
v-if="task.type === 'habit'"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="option-item habit-control"
|
||||
:class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
|
||||
@click="toggleUpDirection()"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.up ? cssClass('bg') : ''"
|
||||
>
|
||||
<div class="task-control habit-control">
|
||||
<div
|
||||
class="svg-icon positive"
|
||||
:class="task.up ? cssClass('icon') : ''"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.up ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('positive') }}
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item habit-control"
|
||||
:class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
|
||||
@click="toggleDownDirection()"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.down ? cssClass('bg') : ''"
|
||||
>
|
||||
<div class="task-control habit-control">
|
||||
<div
|
||||
class="svg-icon negative"
|
||||
:class="task.down ? cssClass('icon') : ''"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.down ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('negative') }}
|
||||
</div>
|
||||
</div>
|
||||
</div><template v-if="task.type !== 'reward'">
|
||||
<label v-once><span class="float-left">{{ $t('difficulty') }}</span><div
|
||||
v-b-tooltip.hover.righttop="$t('difficultyHelp')"
|
||||
class="svg-icon info-icon"
|
||||
v-html="icons.information"
|
||||
></div></label><div class="d-flex justify-content-center difficulty-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(0.1)"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.priority === 0.1 ? cssClass('bg') : ''"
|
||||
>
|
||||
<div
|
||||
class="svg-icon difficulty-trivial-icon"
|
||||
v-html="icons.difficultyTrivial"
|
||||
></div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 0.1 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('trivial') }}
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item"
|
||||
:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(1)"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.priority === 1 ? cssClass('bg') : ''"
|
||||
>
|
||||
<div
|
||||
class="svg-icon difficulty-normal-icon"
|
||||
v-html="icons.difficultyNormal"
|
||||
></div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 1 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('easy') }}
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item"
|
||||
:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(1.5)"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.priority === 1.5 ? cssClass('bg') : ''"
|
||||
>
|
||||
<div
|
||||
class="svg-icon difficulty-medium-icon"
|
||||
v-html="icons.difficultyMedium"
|
||||
></div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 1.5 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('medium') }}
|
||||
</div>
|
||||
</div><div
|
||||
class="option-item"
|
||||
:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(2)"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
:class="task.priority === 2 ? cssClass('bg') : ''"
|
||||
>
|
||||
<div
|
||||
class="svg-icon difficulty-hard-icon"
|
||||
v-html="icons.difficultyHard"
|
||||
></div>
|
||||
</div><div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 2 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('hard') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><div
|
||||
v-if="task.type === 'todo'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('dueDate') }}</label><datepicker
|
||||
v-model="task.date"
|
||||
:calendar-icon="icons.calendar"
|
||||
:clear-button="true"
|
||||
:clear-button-text="$t('clear')"
|
||||
:today-button="!challengeAccessRequired"
|
||||
:today-button-text="$t('today')"
|
||||
:disabled-picker="challengeAccessRequired"
|
||||
:highlighted="calendarHighlights"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="task.type === 'daily'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('startDate') }}</label><datepicker
|
||||
v-model="task.startDate"
|
||||
:calendar-icon="icons.calendar"
|
||||
:clear-button="false"
|
||||
:today-button="!challengeAccessRequired"
|
||||
:today-button-text="$t('today')"
|
||||
:disabled-picker="challengeAccessRequired"
|
||||
:highlighted="calendarHighlights"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="task.type === 'daily'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('repeats') }}</label><b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(task.frequency)"
|
||||
>
|
||||
<b-dropdown-item
|
||||
v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']"
|
||||
:key="frequency"
|
||||
:disabled="challengeAccessRequired"
|
||||
:class="{active: task.frequency === frequency}"
|
||||
@click="task.frequency = frequency"
|
||||
>
|
||||
{{ $t(frequency) }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ $t('repeatEvery') }}</label><div class="input-group">
|
||||
<input
|
||||
v-model="task.everyX"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
max="9999"
|
||||
required="required"
|
||||
:disabled="challengeAccessRequired"
|
||||
><div class="input-group-append input-group-text">
|
||||
{{ repeatSuffix }}
|
||||
</div>
|
||||
</div>
|
||||
</div><template v-if="task.frequency === 'weekly'">
|
||||
<div class="form-group">
|
||||
<label
|
||||
v-once
|
||||
class="d-block"
|
||||
>{{ $t('repeatOn') }}</label><div
|
||||
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
|
||||
:key="dayNumber"
|
||||
class="form-check-inline weekday-check mr-0"
|
||||
>
|
||||
<div class="custom-control custom-checkbox custom-control-inline">
|
||||
<input
|
||||
:id="`weekday-${dayNumber}`"
|
||||
v-model="task.repeat[day]"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:disabled="challengeAccessRequired"
|
||||
><label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="`weekday-${dayNumber}`"
|
||||
>{{ weekdaysMin(dayNumber) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><template v-if="task.frequency === 'monthly'">
|
||||
<label
|
||||
v-once
|
||||
class="d-block"
|
||||
>{{ $t('repeatOn') }}</label><div class="form-radio">
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input
|
||||
id="repeat-dayOfMonth"
|
||||
v-model="repeatsOn"
|
||||
class="custom-control-input"
|
||||
type="radio"
|
||||
value="dayOfMonth"
|
||||
name="repeatsOn"
|
||||
><label
|
||||
class="custom-control-label"
|
||||
for="repeat-dayOfMonth"
|
||||
>{{ $t('dayOfMonth') }}</label>
|
||||
</div><div class="custom-control custom-radio custom-control-inline">
|
||||
<input
|
||||
id="repeat-dayOfWeek"
|
||||
v-model="repeatsOn"
|
||||
class="custom-control-input"
|
||||
type="radio"
|
||||
value="dayOfWeek"
|
||||
name="repeatsOn"
|
||||
><label
|
||||
class="custom-control-label"
|
||||
for="repeat-dayOfWeek"
|
||||
>{{ $t('dayOfWeek') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div><div
|
||||
v-if="isUserTask"
|
||||
class="tags-select option"
|
||||
>
|
||||
<div class="tags-inline form-group row">
|
||||
<label
|
||||
v-once
|
||||
class="col-12"
|
||||
>{{ $t('tags') }}</label><div class="col-12">
|
||||
<div
|
||||
class="category-wrap"
|
||||
:class="{ active: showTagsSelect }"
|
||||
@click="toggleTagSelect()"
|
||||
>
|
||||
<span
|
||||
v-if="task.tags && task.tags.length === 0"
|
||||
class="category-select"
|
||||
><div class="tags-none">{{ $t('none') }}</div><div class="dropdown-toggle"></div></span><span
|
||||
v-else
|
||||
class="category-select"
|
||||
><div
|
||||
v-for="tagName in truncatedSelectedTags"
|
||||
v-markdown="tagName"
|
||||
class="category-label"
|
||||
:title="tagName"
|
||||
></div><div
|
||||
v-if="remainingSelectedTags.length > 0"
|
||||
class="tags-more"
|
||||
>+{{ $t('more', { count: remainingSelectedTags.length }) }}</div><div class="dropdown-toggle"></div></span>
|
||||
</div>
|
||||
</div>
|
||||
</div><tags-popup
|
||||
v-if="showTagsSelect"
|
||||
ref="popup"
|
||||
v-model="task.tags"
|
||||
:tags="user.tags"
|
||||
@close="closeTagsPopup()"
|
||||
/>
|
||||
</div><div
|
||||
v-if="task.type === 'habit'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('resetStreak') }}</label><b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(task.frequency)"
|
||||
:disabled="challengeAccessRequired"
|
||||
>
|
||||
<b-dropdown-item
|
||||
v-for="frequency in ['daily', 'weekly', 'monthly']"
|
||||
:key="frequency"
|
||||
:class="{active: task.frequency === frequency}"
|
||||
@click="task.frequency = frequency"
|
||||
>
|
||||
{{ $t(frequency) }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="groupId"
|
||||
class="option group-options"
|
||||
>
|
||||
<div
|
||||
v-if="task.type === 'todo'"
|
||||
class="form-group"
|
||||
>
|
||||
<label v-once>{{ $t('sharedCompletion') }}</label><b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(sharedCompletion)"
|
||||
>
|
||||
<b-dropdown-item
|
||||
v-for="completionOption in ['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']"
|
||||
:key="completionOption"
|
||||
:class="{active: sharedCompletion === completionOption}"
|
||||
) {{ $t(completionOption) }}
|
||||
.form-group.row
|
||||
label.col-12(v-once) {{ $t('assignedTo') }}
|
||||
.col-12.mt-2
|
||||
.category-wrap(@click="showAssignedSelect = !showAssignedSelect")
|
||||
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
|
||||
span.category-select(v-else)
|
||||
span.mr-1(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
|
||||
.category-box(v-if="showAssignedSelect")
|
||||
.container
|
||||
.row
|
||||
.form-check.col-6(
|
||||
v-for="member in members",
|
||||
:key="member._id",
|
||||
)
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)', :id="`assigned-${member._id}`")
|
||||
label.custom-control-label(v-once, :for="`assigned-${member._id}`") {{ member.profile.name }}
|
||||
|
||||
.row
|
||||
button.btn.btn-primary(@click.stop.prevent="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
|
||||
.form-group
|
||||
label(v-once) {{ $t('approvalRequired') }}
|
||||
toggle-switch.d-inline-block(
|
||||
:checked="requiresApproval",
|
||||
@click="sharedCompletion = completionOption"
|
||||
>
|
||||
{{ $t(completionOption) }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div><div class="form-group row">
|
||||
<label
|
||||
v-once
|
||||
class="col-12"
|
||||
>{{ $t('assignedTo') }}</label><div class="col-12 mt-2">
|
||||
<div
|
||||
class="category-wrap"
|
||||
@click="showAssignedSelect = !showAssignedSelect"
|
||||
>
|
||||
<span
|
||||
v-if="assignedMembers && assignedMembers.length === 0"
|
||||
class="category-select"
|
||||
>{{ $t('none') }}</span><span
|
||||
v-else
|
||||
class="category-select"
|
||||
><span
|
||||
v-for="memberId in assignedMembers"
|
||||
class="mr-1"
|
||||
>{{ memberNamesById[memberId] }}</span></span>
|
||||
</div><div
|
||||
v-if="showAssignedSelect"
|
||||
class="category-box"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="member in members"
|
||||
:key="member._id"
|
||||
class="form-check col-6"
|
||||
>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
:id="`assigned-${member._id}`"
|
||||
v-model="assignedMembers"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="member._id"
|
||||
@change="toggleAssignment(member._id)"
|
||||
><label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="`assigned-${member._id}`"
|
||||
>{{ member.profile.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click.stop.prevent="showAssignedSelect = !showAssignedSelect"
|
||||
>
|
||||
{{ $t('close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ $t('approvalRequired') }}</label><toggle-switch
|
||||
class="d-inline-block"
|
||||
:checked="requiresApproval"
|
||||
@change="updateRequiresApproval"
|
||||
)
|
||||
|
||||
.advanced-settings(v-if="task.type !== 'reward'")
|
||||
.advanced-settings-toggle.d-flex.justify-content-between.align-items-center(@click = "showAdvancedOptions = !showAdvancedOptions")
|
||||
h3 {{ $t('advancedSettings') }}
|
||||
.toggle-up
|
||||
.svg-icon(v-html="icons.down", :class="{'toggle-open': showAdvancedOptions}")
|
||||
b-collapse#advancedOptionsCollapse(v-model="showAdvancedOptions")
|
||||
.advanced-settings-body
|
||||
.option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
.input-group
|
||||
.input-group-prepend.streak-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.streak")
|
||||
input.form-control(type="number", v-model="task.streak", min="0", required)
|
||||
|
||||
.option(v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
.row
|
||||
.col-6(v-if="task.up")
|
||||
.input-group
|
||||
.input-group-prepend.positive-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.positive")
|
||||
input.form-control(
|
||||
type="number", v-model="task.counterUp", min="0", required,
|
||||
)
|
||||
.col-6(v-if="task.down")
|
||||
.input-group
|
||||
.input-group-prepend.negative-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.negative")
|
||||
input.form-control(
|
||||
type="number", v-model="task.counterDown", min="0", required,
|
||||
)
|
||||
|
||||
//.option(v-if="isUserTask && task.type !== 'reward'")
|
||||
.form-group
|
||||
label(v-once)
|
||||
span.float-left {{ $t('attributeAllocation') }}
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
|
||||
.attributes
|
||||
.custom-control.custom-radio.custom-control-inline(v-for="attr in ATTRIBUTES", :key="attr")
|
||||
input.custom-control-input(:id="`attribute-${attr}`", type="radio", :value="attr", v-model="task.attribute", :disabled="user.preferences.allocationMode !== 'taskbased'")
|
||||
label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}
|
||||
.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="purpose !== 'create' && !challengeAccessRequired")
|
||||
.svg-icon.d-inline-b(v-html="icons.destroy")
|
||||
span {{ $t('deleteTask') }}
|
||||
|
||||
.task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer", @click="handleClick($event)")
|
||||
.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
|
||||
button.btn.btn-primary(@click="submit()", v-once) {{ $t('save') }}
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="task.type !== 'reward'"
|
||||
class="advanced-settings"
|
||||
>
|
||||
<div
|
||||
class="advanced-settings-toggle d-flex justify-content-between align-items-center"
|
||||
@click="showAdvancedOptions = !showAdvancedOptions"
|
||||
>
|
||||
<h3>{{ $t('advancedSettings') }}</h3><div class="toggle-up">
|
||||
<div
|
||||
class="svg-icon"
|
||||
:class="{'toggle-open': showAdvancedOptions}"
|
||||
v-html="icons.down"
|
||||
></div>
|
||||
</div>
|
||||
</div><b-collapse
|
||||
id="advancedOptionsCollapse"
|
||||
v-model="showAdvancedOptions"
|
||||
>
|
||||
<div class="advanced-settings-body">
|
||||
<div
|
||||
v-if="task.type === 'daily' && isUserTask && purpose === 'edit'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('restoreStreak') }}</label><div class="input-group">
|
||||
<div class="input-group-prepend streak-addon input-group-icon">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.streak"
|
||||
></div>
|
||||
</div><input
|
||||
v-model="task.streak"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('restoreStreak') }}</label><div class="row">
|
||||
<div
|
||||
v-if="task.up"
|
||||
class="col-6"
|
||||
>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend positive-addon input-group-icon">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div><input
|
||||
v-model="task.counterUp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="task.down"
|
||||
class="col-6"
|
||||
>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend negative-addon input-group-icon">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div><input
|
||||
v-model="task.counterDown"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--.option(v-if="isUserTask && task.type !== 'reward'").form-group
|
||||
label(v-once)
|
||||
span.float-left {{ $t('attributeAllocation') }}
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
|
||||
.attributes
|
||||
.custom-control.custom-radio.custom-control-inline(v-for="attr in ATTRIBUTES", :key="attr")
|
||||
input.custom-control-input(:id="`attribute-${attr}`", type="radio", :value="attr", v-model="task.attribute", :disabled="user.preferences.allocationMode !== 'taskbased'")
|
||||
label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}-->
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div><div
|
||||
v-if="purpose !== 'create' && !challengeAccessRequired"
|
||||
class="delete-task-btn d-flex justify-content-center align-items-middle"
|
||||
@click="destroy()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon d-inline-b"
|
||||
v-html="icons.destroy"
|
||||
></div><span>{{ $t('deleteTask') }}</span>
|
||||
</div>
|
||||
</form>
|
||||
</div><div
|
||||
slot="modal-footer"
|
||||
class="task-modal-footer d-flex justify-content-center align-items-center"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="cancel-task-btn"
|
||||
@click="cancel()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</div><button
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,106 +1,216 @@
|
||||
<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>
|
||||
<div class="row user-tasks-page">
|
||||
<broken-task-modal /><task-modal
|
||||
ref="taskModal"
|
||||
:task="editingTask || creatingTask"
|
||||
:purpose="creatingTask !== null ? 'create' : 'edit'"
|
||||
@cancel="cancelTaskModal()"
|
||||
/><div class="col-12">
|
||||
<div class="row tasks-navigation">
|
||||
<div class="col-12 col-md-4 offset-md-4">
|
||||
<div class="d-flex">
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="form-control input-search"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
><button
|
||||
class="btn btn-secondary dropdown-toggle ml-2 d-flex align-items-center search-button"
|
||||
type="button"
|
||||
:class="{active: selectedTags.length > 0}"
|
||||
@click="toggleFilterPanel()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon filter-icon mr-2"
|
||||
v-html="icons.filter"
|
||||
></div><span v-once>{{ $t('tags') }}</span>
|
||||
</button>
|
||||
</div><div
|
||||
v-if="isFilterPanelOpen"
|
||||
class="filter-panel"
|
||||
@mouseleave="checkMouseOver"
|
||||
>
|
||||
<div
|
||||
v-for="tagsType in tagsByType"
|
||||
v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'"
|
||||
:key="tagsType.key"
|
||||
class="tags-category d-flex"
|
||||
>
|
||||
<div class="tags-header">
|
||||
<strong v-once>{{ $t(tagsType.key) }}</strong><a
|
||||
v-if="tagsType.key !== 'groups' && !editingTags"
|
||||
class="d-block"
|
||||
@click="editTags(tagsType.key)"
|
||||
>{{ $t('editTags2') }}</a>
|
||||
</div><div class="tags-list container">
|
||||
<div
|
||||
class="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"
|
||||
>
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
|
||||
class="col-6"
|
||||
>
|
||||
<div class="inline-edit-input-group tag-edit-item input-group">
|
||||
<div
|
||||
class="svg-icon inline drag"
|
||||
v-html="icons.drag"
|
||||
></div><input
|
||||
v-model="tag.name"
|
||||
class="tag-edit-input inline-edit-input form-control"
|
||||
type="text"
|
||||
><div
|
||||
class="input-group-append"
|
||||
@click="removeTag(tagIndex, tagsType.key)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-6 dragSpace">
|
||||
<input
|
||||
v-model="newTag"
|
||||
class="new-tag-item edit-tag-item inline-edit-input form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newTag')"
|
||||
@keydown.enter="addTag($event, tagsType.key)"
|
||||
>
|
||||
</div>
|
||||
</draggable>
|
||||
</template><template v-if="editingTags && tagsType.key === 'challenges'">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
|
||||
class="col-6"
|
||||
>
|
||||
<div class="inline-edit-input-group tag-edit-item input-group">
|
||||
<input
|
||||
v-model="tag.name"
|
||||
class="tag-edit-input inline-edit-input form-control"
|
||||
type="text"
|
||||
><div
|
||||
class="input-group-append"
|
||||
@click="removeTag(tagIndex, tagsType.key)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><template v-if="!editingTags || tagsType.key === 'groups'">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsType.tags"
|
||||
class="col-6"
|
||||
>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
:id="`tag-${tag.id}`"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:checked="isTagSelected(tag)"
|
||||
@change="toggleTag(tag)"
|
||||
><label
|
||||
v-markdown="tag.name"
|
||||
class="custom-control-label"
|
||||
:for="`tag-${tag.id}`"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="filter-panel-footer clearfix">
|
||||
<template v-if="editingTags === true">
|
||||
<div class="text-center">
|
||||
<a
|
||||
v-once
|
||||
class="mr-3 btn-filters-primary"
|
||||
@click="saveTags()"
|
||||
>{{ $t('saveEdits') }}</a><a
|
||||
v-once
|
||||
class="btn-filters-secondary"
|
||||
@click="cancelTagsEditing()"
|
||||
>{{ $t('cancel') }}</a>
|
||||
</div>
|
||||
</template><template v-else>
|
||||
<div class="float-left">
|
||||
<a
|
||||
v-once
|
||||
class="btn-filters-danger"
|
||||
@click="resetFilters()"
|
||||
>{{ $t('resetFilters') }}</a>
|
||||
</div><div class="float-right">
|
||||
<a
|
||||
v-once
|
||||
class="btn-filters-secondary"
|
||||
@click="closeFilterPanel()"
|
||||
>{{ $t('cancel') }}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="create-task-area d-flex">
|
||||
<transition name="slide-tasks-btns">
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
v-b-tooltip.hover.bottom="$t(type)"
|
||||
class="create-task-btn diamond-btn"
|
||||
@click="createTask(type)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition><div
|
||||
id="create-task-btn"
|
||||
class="create-btn diamond-btn btn btn-success"
|
||||
:class="{open: openCreateBtn}"
|
||||
@click="openCreateBtn = !openCreateBtn"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div><b-tooltip
|
||||
v-if="!openCreateBtn"
|
||||
target="create-task-btn"
|
||||
placement="bottom"
|
||||
>
|
||||
{{ $t('addTaskToUser') }}
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div><div class="row tasks-columns">
|
||||
<task-column
|
||||
v-for="column in columns"
|
||||
:key="column"
|
||||
class="col-lg-3 col-md-6"
|
||||
:type="column"
|
||||
:is-user="true"
|
||||
:search-text="searchTextThrottled"
|
||||
:selected-tags="selectedTags"
|
||||
@editTask="editTask"
|
||||
@openBuyDialog="openBuyDialog($event)"
|
||||
/>
|
||||
</div>
|
||||
</div><spells />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user