2019-11-24 13:16:24 +00:00
|
|
|
<template>
|
|
|
|
<div class="reminders">
|
2023-03-30 10:40:19 +00:00
|
|
|
<div
|
|
|
|
v-for="(r, index) in reminders"
|
|
|
|
:key="index"
|
|
|
|
:class="{ 'overdue': r.reminder < new Date() }"
|
|
|
|
class="reminder-input"
|
|
|
|
>
|
2023-03-16 08:54:18 +00:00
|
|
|
<div class="reminder-detail">
|
2023-06-09 11:19:47 +00:00
|
|
|
<ReminderDetail
|
|
|
|
:disabled="disabled"
|
|
|
|
v-model="reminders[index]"
|
|
|
|
@update:model-value="updateData"/>
|
2023-03-15 21:26:57 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
2023-06-09 11:19:47 +00:00
|
|
|
<BaseButton v-if="!disabled" @click="removeReminderByIndex(index)" class="remove">
|
|
|
|
<icon icon="times"/>
|
2023-03-15 21:26:57 +00:00
|
|
|
</BaseButton>
|
|
|
|
</div>
|
2019-11-24 13:16:24 +00:00
|
|
|
</div>
|
2023-03-30 10:40:19 +00:00
|
|
|
|
|
|
|
<div v-if="!disabled" class="reminder-input">
|
|
|
|
<BaseButton @click="toggleAddReminder">
|
2023-03-15 21:26:57 +00:00
|
|
|
{{ $t('task.addReminder') }}
|
|
|
|
</BaseButton>
|
2023-03-16 08:54:18 +00:00
|
|
|
</div>
|
2023-03-30 10:40:19 +00:00
|
|
|
|
|
|
|
<div v-if="isAddReminder" class="reminder-input">
|
|
|
|
<ReminderDetail :disabled="disabled" @update:modelValue="addNewReminder"/>
|
2020-10-24 16:12:14 +00:00
|
|
|
</div>
|
2019-11-24 13:16:24 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-05-14 14:49:53 +00:00
|
|
|
<script setup lang="ts">
|
2023-03-30 10:40:19 +00:00
|
|
|
import {reactive, ref, watch, type PropType} from 'vue'
|
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2022-05-10 23:14:38 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2023-03-14 05:49:49 +00:00
|
|
|
import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
|
2023-03-11 18:20:07 +00:00
|
|
|
import TaskReminderModel from '@/models/taskReminder'
|
2022-05-10 23:14:38 +00:00
|
|
|
|
2022-05-14 14:49:53 +00:00
|
|
|
const props = defineProps({
|
|
|
|
modelValue: {
|
2023-03-11 18:20:07 +00:00
|
|
|
type: Array as PropType<ITaskReminder[]>,
|
2022-05-14 14:49:53 +00:00
|
|
|
default: () => [],
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2022-05-14 14:49:53 +00:00
|
|
|
disabled: {
|
|
|
|
default: false,
|
2020-09-05 20:35:52 +00:00
|
|
|
},
|
2022-05-14 14:49:53 +00:00
|
|
|
})
|
|
|
|
|
2022-09-13 15:30:33 +00:00
|
|
|
const emit = defineEmits(['update:modelValue'])
|
2022-05-14 14:49:53 +00:00
|
|
|
|
2023-03-11 18:20:07 +00:00
|
|
|
const reminders = ref<ITaskReminder[]>([])
|
2022-05-14 14:49:53 +00:00
|
|
|
|
|
|
|
watch(
|
2023-03-30 10:40:19 +00:00
|
|
|
props.modelValue,
|
|
|
|
(newVal) => {
|
|
|
|
reminders.value = newVal
|
|
|
|
},
|
|
|
|
{immediate: true},
|
2022-05-14 14:49:53 +00:00
|
|
|
)
|
2019-11-24 13:16:24 +00:00
|
|
|
|
2023-03-15 21:26:57 +00:00
|
|
|
const isAddReminder = ref(false)
|
2023-06-09 11:19:47 +00:00
|
|
|
|
2023-03-15 21:26:57 +00:00
|
|
|
function toggleAddReminder() {
|
|
|
|
isAddReminder.value = !isAddReminder.value
|
|
|
|
}
|
2022-05-14 14:49:53 +00:00
|
|
|
|
|
|
|
function updateData() {
|
2023-03-15 21:26:57 +00:00
|
|
|
isAddReminder.value = false
|
2023-03-16 08:54:18 +00:00
|
|
|
emit('update:modelValue', reminders.value)
|
2022-05-14 14:49:53 +00:00
|
|
|
}
|
|
|
|
|
2023-03-15 21:26:57 +00:00
|
|
|
function editReminder(index: number) {
|
|
|
|
if (reminders.value[index] === null) {
|
|
|
|
return
|
|
|
|
}
|
2023-03-14 05:49:49 +00:00
|
|
|
updateData()
|
|
|
|
}
|
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
function addNewReminder(newReminder: ITaskReminder) {
|
|
|
|
console.log('add new reminder', newReminder)
|
|
|
|
if (newReminder === null) {
|
2022-05-14 14:49:53 +00:00
|
|
|
return
|
|
|
|
}
|
2023-03-15 21:26:57 +00:00
|
|
|
reminders.value.push(newReminder)
|
|
|
|
newReminder = reactive(new TaskReminderModel())
|
2022-05-14 14:49:53 +00:00
|
|
|
updateData()
|
|
|
|
}
|
|
|
|
|
|
|
|
function removeReminderByIndex(index: number) {
|
|
|
|
reminders.value.splice(index, 1)
|
|
|
|
updateData()
|
|
|
|
}
|
2019-11-24 13:16:24 +00:00
|
|
|
</script>
|
2021-10-18 12:21:43 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2023-03-30 10:40:19 +00:00
|
|
|
.reminder-input {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
&.overdue :deep(.datepicker .show) {
|
|
|
|
color: var(--danger);
|
2023-03-15 21:26:57 +00:00
|
|
|
}
|
2023-03-30 10:40:19 +00:00
|
|
|
|
|
|
|
&::last-child {
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
}
|
|
|
|
}
|
2023-06-09 11:19:47 +00:00
|
|
|
|
2023-03-30 10:40:19 +00:00
|
|
|
.reminder-detail {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2023-06-09 11:19:47 +00:00
|
|
|
|
2023-03-30 10:40:19 +00:00
|
|
|
.remove {
|
|
|
|
color: var(--danger);
|
|
|
|
vertical-align: top;
|
|
|
|
padding-left: .5rem;
|
|
|
|
line-height: 1;
|
2021-10-18 12:21:43 +00:00
|
|
|
}
|
|
|
|
</style>
|