html format other components
This commit is contained in:
Matteo Pagliazzi
@@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<approval-modal :task="task" /><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
|
||||
></div>
|
||||
<div
|
||||
v-if="!userIsAssigned"
|
||||
class="ml-auto mr-2"
|
||||
>
|
||||
@@ -15,7 +17,8 @@
|
||||
class="claim-color"
|
||||
@click="claim()"
|
||||
>{{ $t('claim') }}</a>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="userIsAssigned"
|
||||
class="ml-auto mr-2"
|
||||
>
|
||||
@@ -24,15 +27,18 @@
|
||||
@click="unassign()"
|
||||
>{{ $t('removeClaim') }}</a>
|
||||
</div>
|
||||
</div><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
|
||||
>{{ $t('approveTask') }}</a>
|
||||
<a @click="needsWork()">{{ $t('needsWork') }}</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="multipleApprovalsRequested && userIsManager"
|
||||
class="claim-bottom-message d-flex align-items-center"
|
||||
>
|
||||
|
||||
@@ -12,14 +12,16 @@
|
||||
>
|
||||
<div class="col-8">
|
||||
<strong>{{ approval.userId.profile.name }}</strong>
|
||||
</div><div class="col-2">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="approve(index)"
|
||||
>
|
||||
{{ $t('approve') }}
|
||||
</button>
|
||||
</div><div class="col-2">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="needsWork(index)"
|
||||
@@ -28,7 +30,8 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="close()"
|
||||
|
||||
@@ -9,53 +9,65 @@
|
||||
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>
|
||||
<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
|
||||
</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>
|
||||
</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
|
||||
</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>
|
||||
</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
|
||||
</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') }}
|
||||
</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') }}-->
|
||||
a(@click="unlink('remove-all')") {{ $t('removeThem') }}-->
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<div class="text-center delete-completed">
|
||||
<div class="help-text">
|
||||
{{ $t('clearCompletedDescription') }}
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-danger"
|
||||
@click="clearTodos()"
|
||||
>
|
||||
|
||||
@@ -3,21 +3,25 @@
|
||||
class="tasks-column"
|
||||
:class="type"
|
||||
>
|
||||
<b-modal ref="editTaskModal" /><buy-quest-modal
|
||||
<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">
|
||||
/>
|
||||
<div class="d-flex align-items-center">
|
||||
<h2 class="column-title">
|
||||
{{ $t(typeLabel) }}
|
||||
</h2><div
|
||||
</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>
|
||||
<div class="filters d-flex justify-content-end">
|
||||
<div
|
||||
v-for="filter in typeFilters"
|
||||
class="filter small-text"
|
||||
@@ -27,7 +31,8 @@
|
||||
{{ $t(filter) }}
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
ref="tasksWrapper"
|
||||
class="tasks-list"
|
||||
>
|
||||
@@ -41,13 +46,18 @@
|
||||
@keypress.enter="quickAdd"
|
||||
@focus="quickAddFocused = true"
|
||||
@blur="quickAddFocused = false"
|
||||
></textarea><transition name="quick-add-tip-slide">
|
||||
></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
|
||||
</transition>
|
||||
<clear-completed-todos
|
||||
v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0"
|
||||
/>
|
||||
<div
|
||||
v-if="isUser === true"
|
||||
ref="columnBackground"
|
||||
class="column-background"
|
||||
@@ -58,12 +68,15 @@
|
||||
class="svg-icon"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div><h3 v-once>
|
||||
></div>
|
||||
<h3 v-once>
|
||||
{{ $t('theseAreYourTasks', {taskType: $t(typeLabel)}) }}
|
||||
</h3><div class="small-text">
|
||||
</h3>
|
||||
<div class="small-text">
|
||||
{{ $t(`${type}sDesc`) }}
|
||||
</div>
|
||||
</div><draggable
|
||||
</div>
|
||||
<draggable
|
||||
ref="tasksList"
|
||||
class="sortable-tasks"
|
||||
:options="{disabled: activeFilter.label === 'scheduled' || !isUser, scrollSensitivity: 64}"
|
||||
@@ -82,7 +95,8 @@
|
||||
@moveTo="moveTo"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
/>
|
||||
</draggable><template v-if="hasRewardsList">
|
||||
</draggable>
|
||||
<template v-if="hasRewardsList">
|
||||
<draggable
|
||||
ref="rewardsList"
|
||||
class="reward-items"
|
||||
@@ -107,10 +121,12 @@
|
||||
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>
|
||||
>
|
||||
<span
|
||||
class="svg-icon inline icon-12 color"
|
||||
v-html="icons.pin"
|
||||
></span>
|
||||
</span>
|
||||
</template>
|
||||
</shopItem>
|
||||
</draggable>
|
||||
|
||||
@@ -9,17 +9,21 @@
|
||||
<div class="col-8 details">
|
||||
<p class="title">
|
||||
{{ spell.text() }}
|
||||
</p><p class="notes">
|
||||
</p>
|
||||
<p class="notes">
|
||||
{{ `Click on a ${spell.target} to cast!` }}
|
||||
</p><!-- @TODO make that translatable-->
|
||||
</div><div class="col-4 mana">
|
||||
</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">
|
||||
</div>
|
||||
<div class="drawer-wrapper d-flex justify-content-center">
|
||||
<drawer
|
||||
v-if="user.stats.class && !user.preferences.disableClasses"
|
||||
v-mousePosition="30"
|
||||
@@ -40,16 +44,20 @@
|
||||
>
|
||||
<div class="spell col-12 row">
|
||||
<div class="col-8 details">
|
||||
<a :class="{'disabled': spellDisabled(key)}"></a><div
|
||||
<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>
|
||||
<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>{{ skill.mana }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
>
|
||||
<div class="tags-header">
|
||||
<strong v-once>{{ $t(tagsType.key) }}</strong>
|
||||
</div><div class="tags-list container">
|
||||
</div>
|
||||
<div class="tags-list container">
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsType.tags"
|
||||
@@ -21,7 +22,8 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="tag.id"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-markdown="tag.name"
|
||||
class="custom-control-label"
|
||||
:title="tag.name"
|
||||
@@ -31,11 +33,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="tags-footer">
|
||||
</div>
|
||||
<div class="tags-footer">
|
||||
<span
|
||||
class="clear-tags"
|
||||
@click="clearTags()"
|
||||
>{{ $t("clearTags") }}</span><span
|
||||
>{{ $t("clearTags") }}</span>
|
||||
<span
|
||||
class="close-tags"
|
||||
@click="close()"
|
||||
>{{ $t("close") }}</span>
|
||||
|
||||
@@ -9,11 +9,13 @@
|
||||
v-if="task.group.id"
|
||||
:task="task"
|
||||
:group="group"
|
||||
/><div
|
||||
/>
|
||||
<div
|
||||
class="d-flex"
|
||||
:class="{'task-not-scoreable': isUser !== true}"
|
||||
>
|
||||
<!-- Habits left side control--><div
|
||||
<!-- 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]"
|
||||
@@ -28,13 +30,16 @@
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.up.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
class="svg-icon positive"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
</div><!-- Dailies and todos left side control--><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]"
|
||||
@@ -49,14 +54,17 @@
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
></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
|
||||
</div>
|
||||
<!-- Task title, description and icons-->
|
||||
<div
|
||||
class="task-content"
|
||||
:class="contentClass"
|
||||
>
|
||||
@@ -70,7 +78,8 @@
|
||||
v-markdown="task.text"
|
||||
class="task-title"
|
||||
:class="{ 'has-notes': task.notes }"
|
||||
></h3><menu-dropdown
|
||||
></h3>
|
||||
<menu-dropdown
|
||||
v-if="!isRunningYesterdailies && showOptions"
|
||||
ref="taskDropdown"
|
||||
v-b-tooltip.hover.top="$t('options')"
|
||||
@@ -82,51 +91,69 @@
|
||||
class="svg-icon dropdown-icon"
|
||||
v-html="icons.menu"
|
||||
></div>
|
||||
</div><div slot="dropdown-content">
|
||||
</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
|
||||
<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
|
||||
<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
|
||||
<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>
|
||||
<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
|
||||
</div>
|
||||
<div
|
||||
v-markdown="task.notes"
|
||||
class="task-notes small-text"
|
||||
:class="{'has-checklist': task.notes && hasChecklist}"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="canViewchecklist"
|
||||
class="checklist"
|
||||
:class="{isOpen: !task.collapseChecklist}"
|
||||
@@ -142,9 +169,11 @@
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.checklist"
|
||||
></div><span>{{ checklistProgress }}</span>
|
||||
></div>
|
||||
<span>{{ checklistProgress }}</span>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-for="item in task.checklist"
|
||||
v-if="!task.collapseChecklist"
|
||||
class="custom-control custom-checkbox checklist-item"
|
||||
@@ -157,13 +186,15 @@
|
||||
:checked="item.completed"
|
||||
:disabled="castingSpell || !isUser"
|
||||
@change="toggleChecklistItem(item)"
|
||||
><label
|
||||
>
|
||||
<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>
|
||||
<div class="icons small-text d-flex align-items-center">
|
||||
<div
|
||||
v-if="task.type === 'todo' && task.date"
|
||||
class="d-flex align-items-center"
|
||||
@@ -173,8 +204,10 @@
|
||||
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>
|
||||
<span>{{ dueIn }}</span>
|
||||
</div>
|
||||
<div class="icons-right d-flex justify-content-end">
|
||||
<div
|
||||
v-if="showStreak"
|
||||
class="d-flex align-items-center"
|
||||
@@ -183,17 +216,24 @@
|
||||
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
|
||||
></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"
|
||||
>
|
||||
@@ -202,14 +242,16 @@
|
||||
v-b-tooltip.hover.bottom="shortName"
|
||||
class="svg-icon challenge"
|
||||
v-html="icons.challenge"
|
||||
></div><div
|
||||
></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
|
||||
</div>
|
||||
<div
|
||||
v-if="hasTags"
|
||||
:id="`tags-icon-${task._id}`"
|
||||
class="d-flex align-items-center"
|
||||
@@ -218,7 +260,8 @@
|
||||
class="svg-icon tags"
|
||||
v-html="icons.tags"
|
||||
></div>
|
||||
</div><b-popover
|
||||
</div>
|
||||
<b-popover
|
||||
v-if="hasTags"
|
||||
:target="`tags-icon-${task._id}`"
|
||||
triggers="hover"
|
||||
@@ -231,7 +274,8 @@
|
||||
class="tags-popover-title"
|
||||
>
|
||||
{{ `${$t('tags')}:` }}
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-for="tag in getTagsFor(task)"
|
||||
v-markdown="tag"
|
||||
class="tag-label"
|
||||
@@ -241,7 +285,9 @@
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Habits right side control--><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]"
|
||||
@@ -256,13 +302,16 @@
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.down.icon"
|
||||
v-html="icons.lock"
|
||||
></div><div
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
class="svg-icon negative"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
</div><!-- Rewards right side control--><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"
|
||||
@@ -271,11 +320,13 @@
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.gold"
|
||||
></div><div class="small-text">
|
||||
></div>
|
||||
<div class="small-text">
|
||||
{{ task.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div><approval-footer
|
||||
</div>
|
||||
<approval-footer
|
||||
v-if="task.group.id"
|
||||
:task="task"
|
||||
:group="group"
|
||||
|
||||
@@ -18,12 +18,14 @@
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left">
|
||||
{{ title }}
|
||||
</h1><div class="float-right d-flex align-items-center">
|
||||
</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
|
||||
>{{ $t('cancel') }}</span>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-secondary"
|
||||
@click="submit()"
|
||||
@@ -31,8 +33,10 @@
|
||||
{{ $t('save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ `${$t('text')}*` }}</label><input
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ `${$t('text')}*` }}</label>
|
||||
<input
|
||||
ref="inputToFocus"
|
||||
v-model="task.text"
|
||||
class="form-control title-input"
|
||||
@@ -41,20 +45,28 @@
|
||||
spellcheck="true"
|
||||
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</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
|
||||
>
|
||||
<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
|
||||
</div>
|
||||
<div
|
||||
class="task-modal-content"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
@@ -68,13 +80,15 @@
|
||||
class="option mt-0"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('cost') }}</label><div class="input-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
|
||||
</div>
|
||||
<input
|
||||
v-model="task.value"
|
||||
class="form-control"
|
||||
type="number"
|
||||
@@ -85,11 +99,14 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="checklistEnabled"
|
||||
class="option mt-0"
|
||||
>
|
||||
<label v-once>{{ $t('checklist') }}</label><br><draggable
|
||||
<label v-once>{{ $t('checklist') }}</label>
|
||||
<br>
|
||||
<draggable
|
||||
v-model="checklist"
|
||||
:options="{handle: '.grippy', filter: '.task-dropdown'}"
|
||||
@update="sortedChecklist"
|
||||
@@ -98,26 +115,32 @@
|
||||
v-for="(item, $index) in checklist"
|
||||
class="inline-edit-input-group checklist-group input-group"
|
||||
>
|
||||
<span class="grippy"></span><input
|
||||
<span class="grippy"></span>
|
||||
<input
|
||||
v-model="item.text"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
><span
|
||||
>
|
||||
<span
|
||||
class="input-group-append"
|
||||
@click="removeChecklistItem($index)"
|
||||
><div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div></span>
|
||||
>
|
||||
<div
|
||||
class="svg-icon destroy-icon"
|
||||
v-html="icons.destroy"
|
||||
></div>
|
||||
</span>
|
||||
</div>
|
||||
</draggable><input
|
||||
</draggable>
|
||||
<input
|
||||
v-model="newChecklistItem"
|
||||
class="inline-edit-input checklist-item form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newChecklistItem')"
|
||||
@keydown.enter="addChecklistItem($event)"
|
||||
>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type === 'habit'"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
@@ -137,13 +160,15 @@
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.up ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('positive') }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item habit-control"
|
||||
:class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
|
||||
@click="toggleDownDirection()"
|
||||
@@ -159,19 +184,25 @@
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
</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>
|
||||
<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')"
|
||||
@@ -185,13 +216,15 @@
|
||||
class="svg-icon difficulty-trivial-icon"
|
||||
v-html="icons.difficultyTrivial"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 0.1 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('trivial') }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(1)"
|
||||
@@ -204,13 +237,15 @@
|
||||
class="svg-icon difficulty-normal-icon"
|
||||
v-html="icons.difficultyNormal"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 1 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('easy') }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(1.5)"
|
||||
@@ -223,13 +258,15 @@
|
||||
class="svg-icon difficulty-medium-icon"
|
||||
v-html="icons.difficultyMedium"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 1.5 ? cssClass('text') : ''"
|
||||
>
|
||||
{{ $t('medium') }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')"
|
||||
@click="setDifficulty(2)"
|
||||
@@ -242,7 +279,8 @@
|
||||
class="svg-icon difficulty-hard-icon"
|
||||
v-html="icons.difficultyHard"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.priority === 2 ? cssClass('text') : ''"
|
||||
>
|
||||
@@ -250,12 +288,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><div
|
||||
</template>
|
||||
<div
|
||||
v-if="task.type === 'todo'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('dueDate') }}</label><datepicker
|
||||
<label v-once>{{ $t('dueDate') }}</label>
|
||||
<datepicker
|
||||
v-model="task.date"
|
||||
:calendar-icon="icons.calendar"
|
||||
:clear-button="true"
|
||||
@@ -266,12 +306,14 @@
|
||||
:highlighted="calendarHighlights"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type === 'daily'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('startDate') }}</label><datepicker
|
||||
<label v-once>{{ $t('startDate') }}</label>
|
||||
<datepicker
|
||||
v-model="task.startDate"
|
||||
:calendar-icon="icons.calendar"
|
||||
:clear-button="false"
|
||||
@@ -281,12 +323,14 @@
|
||||
:highlighted="calendarHighlights"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type === 'daily'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('repeats') }}</label><b-dropdown
|
||||
<label v-once>{{ $t('repeats') }}</label>
|
||||
<b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(task.frequency)"
|
||||
>
|
||||
@@ -300,8 +344,10 @@
|
||||
{{ $t(frequency) }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ $t('repeatEvery') }}</label><div class="input-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('repeatEvery') }}</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="task.everyX"
|
||||
class="form-control"
|
||||
@@ -310,16 +356,19 @@
|
||||
max="9999"
|
||||
required="required"
|
||||
:disabled="challengeAccessRequired"
|
||||
><div class="input-group-append input-group-text">
|
||||
>
|
||||
<div class="input-group-append input-group-text">
|
||||
{{ repeatSuffix }}
|
||||
</div>
|
||||
</div>
|
||||
</div><template v-if="task.frequency === 'weekly'">
|
||||
</div>
|
||||
<template v-if="task.frequency === 'weekly'">
|
||||
<div class="form-group">
|
||||
<label
|
||||
v-once
|
||||
class="d-block"
|
||||
>{{ $t('repeatOn') }}</label><div
|
||||
>{{ $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"
|
||||
@@ -331,7 +380,8 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:disabled="challengeAccessRequired"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="`weekday-${dayNumber}`"
|
||||
@@ -339,11 +389,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><template v-if="task.frequency === 'monthly'">
|
||||
</template>
|
||||
<template v-if="task.frequency === 'monthly'">
|
||||
<label
|
||||
v-once
|
||||
class="d-block"
|
||||
>{{ $t('repeatOn') }}</label><div class="form-radio">
|
||||
>{{ $t('repeatOn') }}</label>
|
||||
<div class="form-radio">
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input
|
||||
id="repeat-dayOfMonth"
|
||||
@@ -352,11 +404,13 @@
|
||||
type="radio"
|
||||
value="dayOfMonth"
|
||||
name="repeatsOn"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="repeat-dayOfMonth"
|
||||
>{{ $t('dayOfMonth') }}</label>
|
||||
</div><div class="custom-control custom-radio custom-control-inline">
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input
|
||||
id="repeat-dayOfWeek"
|
||||
v-model="repeatsOn"
|
||||
@@ -364,14 +418,16 @@
|
||||
type="radio"
|
||||
value="dayOfWeek"
|
||||
name="repeatsOn"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="repeat-dayOfWeek"
|
||||
>{{ $t('dayOfWeek') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isUserTask"
|
||||
class="tags-select option"
|
||||
>
|
||||
@@ -379,7 +435,8 @@
|
||||
<label
|
||||
v-once
|
||||
class="col-12"
|
||||
>{{ $t('tags') }}</label><div class="col-12">
|
||||
>{{ $t('tags') }}</label>
|
||||
<div class="col-12">
|
||||
<div
|
||||
class="category-wrap"
|
||||
:class="{ active: showTagsSelect }"
|
||||
@@ -388,33 +445,44 @@
|
||||
<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
|
||||
>
|
||||
<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
|
||||
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
|
||||
</div>
|
||||
<tags-popup
|
||||
v-if="showTagsSelect"
|
||||
ref="popup"
|
||||
v-model="task.tags"
|
||||
:tags="user.tags"
|
||||
@close="closeTagsPopup()"
|
||||
/>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type === 'habit'"
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('resetStreak') }}</label><b-dropdown
|
||||
<label v-once>{{ $t('resetStreak') }}</label>
|
||||
<b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(task.frequency)"
|
||||
:disabled="challengeAccessRequired"
|
||||
@@ -429,7 +497,8 @@
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="groupId"
|
||||
class="option group-options"
|
||||
>
|
||||
@@ -437,7 +506,8 @@
|
||||
v-if="task.type === 'todo'"
|
||||
class="form-group"
|
||||
>
|
||||
<label v-once>{{ $t('sharedCompletion') }}</label><b-dropdown
|
||||
<label v-once>{{ $t('sharedCompletion') }}</label>
|
||||
<b-dropdown
|
||||
class="inline-dropdown"
|
||||
:text="$t(sharedCompletion)"
|
||||
>
|
||||
@@ -450,11 +520,13 @@
|
||||
{{ $t(completionOption) }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div><div class="form-group row">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label
|
||||
v-once
|
||||
class="col-12"
|
||||
>{{ $t('assignedTo') }}</label><div class="col-12 mt-2">
|
||||
>{{ $t('assignedTo') }}</label>
|
||||
<div class="col-12 mt-2">
|
||||
<div
|
||||
class="category-wrap"
|
||||
@click="showAssignedSelect = !showAssignedSelect"
|
||||
@@ -462,14 +534,18 @@
|
||||
<span
|
||||
v-if="assignedMembers && assignedMembers.length === 0"
|
||||
class="category-select"
|
||||
>{{ $t('none') }}</span><span
|
||||
>{{ $t('none') }}</span>
|
||||
<span
|
||||
v-else
|
||||
class="category-select"
|
||||
><span
|
||||
v-for="memberId in assignedMembers"
|
||||
class="mr-1"
|
||||
>{{ memberNamesById[memberId] }}</span></span>
|
||||
</div><div
|
||||
>
|
||||
<span
|
||||
v-for="memberId in assignedMembers"
|
||||
class="mr-1"
|
||||
>{{ memberNamesById[memberId] }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="showAssignedSelect"
|
||||
class="category-box"
|
||||
>
|
||||
@@ -488,14 +564,16 @@
|
||||
type="checkbox"
|
||||
:value="member._id"
|
||||
@change="toggleAssignment(member._id)"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="`assigned-${member._id}`"
|
||||
>{{ member.profile.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click.stop.prevent="showAssignedSelect = !showAssignedSelect"
|
||||
@@ -506,14 +584,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<label v-once>{{ $t('approvalRequired') }}</label><toggle-switch
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('approvalRequired') }}</label>
|
||||
<toggle-switch
|
||||
class="d-inline-block"
|
||||
:checked="requiresApproval"
|
||||
@change="updateRequiresApproval"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type !== 'reward'"
|
||||
class="advanced-settings"
|
||||
>
|
||||
@@ -521,14 +602,16 @@
|
||||
class="advanced-settings-toggle d-flex justify-content-between align-items-center"
|
||||
@click="showAdvancedOptions = !showAdvancedOptions"
|
||||
>
|
||||
<h3>{{ $t('advancedSettings') }}</h3><div class="toggle-up">
|
||||
<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
|
||||
</div>
|
||||
<b-collapse
|
||||
id="advancedOptionsCollapse"
|
||||
v-model="showAdvancedOptions"
|
||||
>
|
||||
@@ -538,13 +621,15 @@
|
||||
class="option"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ $t('restoreStreak') }}</label><div class="input-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
|
||||
</div>
|
||||
<input
|
||||
v-model="task.streak"
|
||||
class="form-control"
|
||||
type="number"
|
||||
@@ -553,12 +638,14 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<label v-once>{{ $t('restoreStreak') }}</label>
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="task.up"
|
||||
class="col-6"
|
||||
@@ -569,7 +656,8 @@
|
||||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div><input
|
||||
</div>
|
||||
<input
|
||||
v-model="task.counterUp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
@@ -577,7 +665,8 @@
|
||||
required="required"
|
||||
>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="task.down"
|
||||
class="col-6"
|
||||
>
|
||||
@@ -587,7 +676,8 @@
|
||||
class="svg-icon"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div><input
|
||||
</div>
|
||||
<input
|
||||
v-model="task.counterDown"
|
||||
class="form-control"
|
||||
type="number"
|
||||
@@ -598,17 +688,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--.option(v-if="isUserTask && task.type !== 'reward'").form-group
|
||||
</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]) }}-->
|
||||
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
|
||||
</div>
|
||||
<div
|
||||
v-if="purpose !== 'create' && !challengeAccessRequired"
|
||||
class="delete-task-btn d-flex justify-content-center align-items-middle"
|
||||
@click="destroy()"
|
||||
@@ -616,10 +708,12 @@
|
||||
<div
|
||||
class="svg-icon d-inline-b"
|
||||
v-html="icons.destroy"
|
||||
></div><span>{{ $t('deleteTask') }}</span>
|
||||
></div>
|
||||
<span>{{ $t('deleteTask') }}</span>
|
||||
</div>
|
||||
</form>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
slot="modal-footer"
|
||||
class="task-modal-footer d-flex justify-content-center align-items-center"
|
||||
@click="handleClick($event)"
|
||||
@@ -630,7 +724,8 @@
|
||||
@click="cancel()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@click="submit()"
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="row user-tasks-page">
|
||||
<broken-task-modal /><task-modal
|
||||
<broken-task-modal />
|
||||
<task-modal
|
||||
ref="taskModal"
|
||||
:task="editingTask || creatingTask"
|
||||
:purpose="creatingTask !== null ? 'create' : 'edit'"
|
||||
@cancel="cancelTaskModal()"
|
||||
/><div class="col-12">
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="row tasks-navigation">
|
||||
<div class="col-12 col-md-4 offset-md-4">
|
||||
<div class="d-flex">
|
||||
@@ -14,7 +16,8 @@
|
||||
class="form-control input-search"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
><button
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary dropdown-toggle ml-2 d-flex align-items-center search-button"
|
||||
type="button"
|
||||
:class="{active: selectedTags.length > 0}"
|
||||
@@ -23,9 +26,11 @@
|
||||
<div
|
||||
class="svg-icon filter-icon mr-2"
|
||||
v-html="icons.filter"
|
||||
></div><span v-once>{{ $t('tags') }}</span>
|
||||
></div>
|
||||
<span v-once>{{ $t('tags') }}</span>
|
||||
</button>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isFilterPanelOpen"
|
||||
class="filter-panel"
|
||||
@mouseleave="checkMouseOver"
|
||||
@@ -37,12 +42,14 @@
|
||||
class="tags-category d-flex"
|
||||
>
|
||||
<div class="tags-header">
|
||||
<strong v-once>{{ $t(tagsType.key) }}</strong><a
|
||||
<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>
|
||||
<div class="tags-list container">
|
||||
<div
|
||||
class="row"
|
||||
:class="{'no-gutters': !editingTags}"
|
||||
@@ -61,11 +68,13 @@
|
||||
<div
|
||||
class="svg-icon inline drag"
|
||||
v-html="icons.drag"
|
||||
></div><input
|
||||
></div>
|
||||
<input
|
||||
v-model="tag.name"
|
||||
class="tag-edit-input inline-edit-input form-control"
|
||||
type="text"
|
||||
><div
|
||||
>
|
||||
<div
|
||||
class="input-group-append"
|
||||
@click="removeTag(tagIndex, tagsType.key)"
|
||||
>
|
||||
@@ -75,7 +84,8 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-6 dragSpace">
|
||||
</div>
|
||||
<div class="col-6 dragSpace">
|
||||
<input
|
||||
v-model="newTag"
|
||||
class="new-tag-item edit-tag-item inline-edit-input form-control"
|
||||
@@ -85,7 +95,8 @@
|
||||
>
|
||||
</div>
|
||||
</draggable>
|
||||
</template><template v-if="editingTags && tagsType.key === 'challenges'">
|
||||
</template>
|
||||
<template v-if="editingTags && tagsType.key === 'challenges'">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
|
||||
class="col-6"
|
||||
@@ -95,7 +106,8 @@
|
||||
v-model="tag.name"
|
||||
class="tag-edit-input inline-edit-input form-control"
|
||||
type="text"
|
||||
><div
|
||||
>
|
||||
<div
|
||||
class="input-group-append"
|
||||
@click="removeTag(tagIndex, tagsType.key)"
|
||||
>
|
||||
@@ -106,7 +118,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template><template v-if="!editingTags || tagsType.key === 'groups'">
|
||||
</template>
|
||||
<template v-if="!editingTags || tagsType.key === 'groups'">
|
||||
<div
|
||||
v-for="(tag, tagIndex) in tagsType.tags"
|
||||
class="col-6"
|
||||
@@ -118,7 +131,8 @@
|
||||
type="checkbox"
|
||||
:checked="isTagSelected(tag)"
|
||||
@change="toggleTag(tag)"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-markdown="tag.name"
|
||||
class="custom-control-label"
|
||||
:for="`tag-${tag.id}`"
|
||||
@@ -128,27 +142,31 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="filter-panel-footer clearfix">
|
||||
</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
|
||||
>{{ $t('saveEdits') }}</a>
|
||||
<a
|
||||
v-once
|
||||
class="btn-filters-secondary"
|
||||
@click="cancelTagsEditing()"
|
||||
>{{ $t('cancel') }}</a>
|
||||
</div>
|
||||
</template><template v-else>
|
||||
</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">
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<a
|
||||
v-once
|
||||
class="btn-filters-secondary"
|
||||
@@ -158,7 +176,8 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="create-task-area d-flex">
|
||||
</div>
|
||||
<div class="create-task-area d-flex">
|
||||
<transition name="slide-tasks-btns">
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
@@ -178,7 +197,8 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition><div
|
||||
</transition>
|
||||
<div
|
||||
id="create-task-btn"
|
||||
class="create-btn diamond-btn btn btn-success"
|
||||
:class="{open: openCreateBtn}"
|
||||
@@ -188,7 +208,8 @@
|
||||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div><b-tooltip
|
||||
</div>
|
||||
<b-tooltip
|
||||
v-if="!openCreateBtn"
|
||||
target="create-task-btn"
|
||||
placement="bottom"
|
||||
@@ -196,7 +217,8 @@
|
||||
{{ $t('addTaskToUser') }}
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div><div class="row tasks-columns">
|
||||
</div>
|
||||
<div class="row tasks-columns">
|
||||
<task-column
|
||||
v-for="column in columns"
|
||||
:key="column"
|
||||
@@ -209,7 +231,8 @@
|
||||
@openBuyDialog="openBuyDialog($event)"
|
||||
/>
|
||||
</div>
|
||||
</div><spells />
|
||||
</div>
|
||||
<spells />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user