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