form(v-if="task", @submit.stop.prevent="submit()")
b-modal#task-modal(size="sm", @hidden="onClose()", @shown="focusInput()")
.task-modal-header(slot="modal-header", :class="cssClass('bg')")
.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(type="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",
: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.wikia.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
textarea.form-control(v-model="task.notes", rows="3")
.task-modal-content
.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="1.0", 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'}",
@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'
)
.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"
)
.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(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.row
label.col-12(v-once) {{ $t('assignedTo') }}
.col-12
.category-wrap(@click="showAssignedSelect = !showAssignedSelect")
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
span.category-select(v-else)
span(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="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
.option.group-options(v-if='groupId')
.form-group
label(v-once) {{ $t('approvalRequired') }}
toggle-switch.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")
.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}