form(
v-if="task",
@submit.stop.prevent="submit()",
)
b-modal#task-modal(
size="sm",
@hidden="onClose()",
)
.task-modal-header(
slot="modal-header",
:class="[cssClass]",
)
.row
h1.col-8 {{ title }}
.col-4
span.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
button.btn.btn-secondary(type="submit", v-once) {{ $t('save') }}
.form-group
label(v-once) {{ `${$t('title')}*` }}
input.form-control.title-input(type='text', :class="[`${cssClass}-modal-input`]", required, v-model="task.text", autofocus)
.form-group
label(v-once) {{ $t('notes') }}
textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
.task-modal-content
.option(v-if="task.type === 'reward'")
label(v-once) {{ $t('cost') }}
input(type="number", v-model="task.value", required, min="0")
.svg-icon.gold(v-html="icons.gold")
.option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
label(v-once) {{ $t('checklist') }}
br
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
span.input-group-btn(@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(:class="optionClass(task.up === true)", @click="task.up = !task.up")
.option-item-box
.task-control.habit-control(:class="controlClass.up + '-control-habit'")
.svg-icon.positive(v-html="icons.positive")
.option-item-label(v-once) {{ $t('positive') }}
.option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
.option-item-box
.task-control.habit-control(:class="controlClass.down + '-control-habit'")
.svg-icon.negative(v-html="icons.negative")
.option-item-label(v-once) {{ $t('negative') }}
template(v-if="task.type !== 'reward'")
label(v-once)
span.float-left {{ $t('difficulty') }}
.svg-icon.info-icon(v-html="icons.information")
.d-flex.justify-content-center
.option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
.option-item-box
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
.option-item-label(v-once) {{ $t('trivial') }}
.option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
.option-item-box
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
.option-item-label(v-once) {{ $t('easy') }}
.option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
.option-item-box
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
.option-item-label(v-once) {{ $t('medium') }}
.option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
.option-item-box
.svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
.option-item-label(v-once) {{ $t('hard') }}
.option(v-if="task.type === 'todo'")
label(v-once) {{ $t('dueDate') }}
datepicker(
v-model="task.date",
:clearButton='true',
clearButtonIcon='category-select',
:clearButtonText='$t("clear")',
:todayButton='true',
todayButtonIcon='category-select',
:todayButtonText='$t("today")',
)
.option(v-if="task.type === 'daily'")
label(v-once) {{ $t('startDate') }}
datepicker(
v-model="task.startDate",
:clearButton='false',
:todayButton='true',
todayButtonIcon='category-select',
:todayButtonText='$t("today")',
)
.option(v-if="task.type === 'daily'")
.form-group
label(v-once) {{ $t('repeats') }}
b-dropdown(:text="$t(task.frequency)")
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
| {{ $t(frequency) }}
.form-group
label(v-once) {{ $t('repeatEvery') }}
input(type="number", v-model="task.everyX", min="0", required)
| {{ repeatSuffix }}
br
template(v-if="task.frequency === 'weekly'")
.form-check-inline.weekday-check(
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
:key="dayNumber",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="task.repeat[day]")
span.custom-control-indicator
span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
template(v-if="task.frequency === 'monthly'")
label.custom-control.custom-radio
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth")
span.custom-control-indicator
span.custom-control-description {{ $t('dayOfMonth') }}
label.custom-control.custom-radio
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek")
span.custom-control-indicator
span.custom-control-description {{ $t('dayOfWeek') }}
.option
label(v-once) {{ $t('tags') }}
.category-wrap(@click="showTagsSelect = !showTagsSelect")
span.category-select(v-if='task.tags && task.tags.length === 0') {{$t('none')}}
span.category-select(v-else) {{getTagsFor(task)[0]}}
.category-box(v-if="showTagsSelect")
.form-check(
v-for="tag in user.tags",
:key="tag.id",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value="tag.id", v-model="task.tags")
span.custom-control-indicator
span.custom-control-description(v-once) {{ tag.name }}
button.btn.btn-primary(@click="showTagsSelect = !showTagsSelect") {{$t('close')}}
.option(v-if="task.type === 'habit'")
label(v-once) {{ $t('resetStreak') }}
b-dropdown(:text="$t(task.frequency)")
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')
label(v-once) Assigned To
.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")
.form-check(
v-for="member in members",
:key="member._id",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)')
span.custom-control-indicator
span.custom-control-description(v-once) {{ member.profile.name }}
button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
.option.group-options(v-if='groupId')
label(v-once) Needs Approval
toggle-switch(:label='""',
:checked="requiresApproval",
@change="updateRequiresApproval")
.task-modal-footer(slot="modal-footer")
span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
span.delete-task-btn(v-once, v-else, @click="destroy()") {{ $t('delete') }}