parent
248f4888b6
commit
40a9159d37
@ -0,0 +1,74 @@ |
|||||||
|
<script setup> |
||||||
|
import { useI18n } from "vue-i18n" |
||||||
|
import BaseButton from "../basecomponents/BaseButton.vue" |
||||||
|
import Fieldset from "primevue/fieldset" |
||||||
|
import InputNumber from "primevue/inputnumber" |
||||||
|
import Dropdown from "primevue/dropdown" |
||||||
|
import { useCalendarReminders } from "../../composables/calendar/calendarReminders" |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const { agendaRemindersEnabled, periodList } = useCalendarReminders() |
||||||
|
|
||||||
|
const model = defineModel({ |
||||||
|
type: Object, |
||||||
|
}) |
||||||
|
|
||||||
|
model.value.reminders = model.value.reminders || [] |
||||||
|
|
||||||
|
function addEmptyReminder() { |
||||||
|
model.value.reminders.push({ |
||||||
|
count: 0, |
||||||
|
period: "i", |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<Fieldset |
||||||
|
v-if="agendaRemindersEnabled" |
||||||
|
:legend="t('Reminders')" |
||||||
|
> |
||||||
|
<div class="reminder-list space-y-4"> |
||||||
|
<BaseButton |
||||||
|
:label="t('Add reminder')" |
||||||
|
icon="add-event-reminder" |
||||||
|
type="black" |
||||||
|
@click="addEmptyReminder" |
||||||
|
/> |
||||||
|
|
||||||
|
<div |
||||||
|
v-for="(reminderItem, i) in model.reminders" |
||||||
|
:key="i" |
||||||
|
class="flex flex-row gap-4" |
||||||
|
> |
||||||
|
<div class="p-inputgroup"> |
||||||
|
<InputNumber |
||||||
|
v-model="reminderItem.count" |
||||||
|
:min="0" |
||||||
|
:step="1" |
||||||
|
class="w-20" |
||||||
|
/> |
||||||
|
<Dropdown |
||||||
|
v-model="reminderItem.period" |
||||||
|
:options="periodList" |
||||||
|
option-label="label" |
||||||
|
option-value="value" |
||||||
|
/> |
||||||
|
<div |
||||||
|
v-t="'Before'" |
||||||
|
class="p-inputgroup-addon" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<BaseButton |
||||||
|
:label="t('Delete')" |
||||||
|
icon="delete" |
||||||
|
only-icon |
||||||
|
type="danger" |
||||||
|
@click="model.reminders.splice(i, 1)" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Fieldset> |
||||||
|
</template> |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<script setup> |
||||||
|
import { useCalendarReminders } from "../../composables/calendar/calendarReminders" |
||||||
|
import BaseIcon from "../basecomponents/BaseIcon.vue" |
||||||
|
|
||||||
|
const { decodeDateInterval } = useCalendarReminders() |
||||||
|
|
||||||
|
defineProps({ |
||||||
|
event: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
v-if="event.reminders && event.reminders.length > 0" |
||||||
|
class="reminders-info" |
||||||
|
> |
||||||
|
<h6 |
||||||
|
v-t="'Notification to remind the event'" |
||||||
|
class="reminders-info__title" |
||||||
|
/> |
||||||
|
|
||||||
|
<ul class="reminders-info__list"> |
||||||
|
<li |
||||||
|
v-for="(reminder, i) in event.reminders" |
||||||
|
:key="i" |
||||||
|
class="reminders-info__item" |
||||||
|
> |
||||||
|
<BaseIcon |
||||||
|
icon="event-reminder" |
||||||
|
size="small" |
||||||
|
/> |
||||||
|
{{ decodeDateInterval(reminder) }} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { usePlatformConfig } from "../../store/platformConfig" |
||||||
|
import { useI18n } from "vue-i18n" |
||||||
|
|
||||||
|
export function useCalendarReminders() { |
||||||
|
const platformConfigStore = usePlatformConfig() |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const agendaRemindersEnabled = "true" === platformConfigStore.getSetting("agenda.agenda_reminders") |
||||||
|
|
||||||
|
const periodList = [ |
||||||
|
{ label: t("Minutes"), value: "i" }, |
||||||
|
{ label: t("Hours"), value: "h" }, |
||||||
|
{ label: t("Days"), value: "d" }, |
||||||
|
] |
||||||
|
|
||||||
|
/** |
||||||
|
* @param {Object} reminder |
||||||
|
* @returns {string} |
||||||
|
*/ |
||||||
|
function decodeDateInterval(reminder) { |
||||||
|
if (reminder.period === "i") { |
||||||
|
return t("%d minutes before", [reminder.count]) |
||||||
|
} |
||||||
|
|
||||||
|
if (reminder.period === "h") { |
||||||
|
return t("%d hours before", [reminder.count]) |
||||||
|
} |
||||||
|
|
||||||
|
return t("%d days before", [reminder.count]) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
agendaRemindersEnabled, |
||||||
|
periodList, |
||||||
|
decodeDateInterval, |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue