fix: review findings

src/components/tasks/partials/reminder-detail.vue

@@ -1,8 +1,9 @@
 <template>
 	<div>
-		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" :disabled="disabled" @update:modelValue="() => updateData()"></ReminderPeriod>
+		<ReminderPeriod v-if="showRelativeReminder" v-model="reminder" :disabled="disabled"
+										@update:modelValue="() => updateData()"></ReminderPeriod>
 		<Datepicker
-				v-if="showAbsoluteReminder()"
+				v-if="showAbsoluteReminder"
 				v-model="reminderDate"
 				:disabled="disabled"
 				@close-on-change="() => setReminderDate()"
@@ -15,7 +16,7 @@ import Datepicker from '@/components/input/datepicker.vue'
 import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
 import TaskReminderModel from '@/models/taskReminder'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
-import { ref, watch, type PropType } from 'vue'
+import {computed, ref, watch, type PropType} from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -32,6 +33,9 @@ const emit = defineEmits(['update:modelValue'])
 const reminder = ref<ITaskReminder>()
 const reminderDate = ref()
 
+const showAbsoluteReminder = computed(() => !reminder.value || !reminder.value?.relativeTo)
+const showRelativeReminder = computed(() => !reminder.value || reminder.value?.relativeTo)
+
 watch(
 		() => props.modelValue,
 		(value) => {
@@ -47,14 +51,6 @@ function updateData() {
 	emit('update:modelValue', reminder.value)
 }
 
-function showAbsoluteReminder() {
-	return !reminder.value || !reminder.value?.relativeTo
-}
-
-function showRelativeReminder() {
-	return !reminder.value || reminder.value?.relativeTo
-}
-
 function setReminderDate() {
 	if (!reminderDate.value) {
 		return

src/components/tasks/partials/reminder-period.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="datepicker">
 		<BaseButton :disabled="disabled" class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup">
-			{{ formatDuration(reminder.relativePeriod) }} <span v-html="formatBeforeAfter(reminder.relativePeriod)"></span>
+			{{ formatDuration(reminder.relativePeriod) }} {{ reminder.relativePeriod <= 0 ? '&le;' : '&gt;' }}
 			{{ formatRelativeTo(reminder.relativeTo) }}
 		</BaseButton>
 		<CustomTransition name="fade">
@@ -10,15 +10,15 @@
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="d"
+							:placeholder="$t('task.reminder.daysShort')"
 							v-model="periodInput.duration.days"
 							type="number"
 							min="0"
-					/> d
+					/> {{ $t('task.reminder.daysShort') }}
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="HH"
+							:placeholder="$t('task.reminder.hoursShort')"
 							v-model="periodInput.duration.hours"
 							type="number"
 							min="0"
@@ -26,7 +26,7 @@
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="MM"
+							:placeholder="$t('task.reminder.minutesShort')"
 							v-model="periodInput.duration.minutes"
 							type="number"
 							min="0"
@@ -37,7 +37,6 @@
 							<option value="1">&gt;</option>
 						</select>
 					</div>
-					<div class="control">
 					<div class="select">
 						<select :disabled="disabled" v-model="periodInput.relativeTo" id="relativeTo">
 							<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">{{ $t('task.attributes.dueDate') }}</option>
@@ -49,7 +48,6 @@
 						</select>
 					</div>
 				</div>
-				</div>
 				<div class="control">
 					<x-button
 							:disabled="disabled"
@@ -138,6 +136,7 @@ function togglePeriodPopup() {
 }
 
 const periodPopup = ref<HTMLElement | null>(null)
+
 function hidePeriodPopup(e: MouseEvent) {
 	if (isShowForm.value) {
 		closeWhenClickedOutside(e, periodPopup.value, close)
@@ -150,6 +149,7 @@ function submitForm() {
 }
 
 const changed = ref(false)
+
 function close() {
 	setTimeout(() => {
 		isShowForm.value = false
@@ -171,13 +171,6 @@ function formatDuration(reminderPeriod: number): string {
 			('' + duration.minutes).padStart(2, '0')
 }
 
-function formatBeforeAfter(reminderPeriod: number): string {
-	if (reminderPeriod <= 0) {
-		return '&le;'
-	}
-	return '&gt;'
-}
-
 function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string | null {
 	switch (relativeTo) {
 		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
@@ -195,8 +188,8 @@ function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string
 
 <style lang="scss" scoped>
 .input {
-	max-width: 70px;
-	width: 70px;
+	max-width: 5rem;
+	width: 4rem;
 }
 
 .close-button {

src/helpers/time/period.ts

@@ -3,7 +3,7 @@ import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MINUTE} from '@/constants/date'
 /**
  * Convert time period given as seconds to days, hour, minutes, seconds
  */
-export function secondsToPeriod(seconds: number) {
+export function secondsToPeriod(seconds: number): {days: number, hours: number, minutes: number, seconds: number} {
 	const d = Math.floor(seconds / SECONDS_A_DAY)
 	const h = Math.floor(seconds % SECONDS_A_DAY / 3600)
 	const m = Math.floor(seconds % SECONDS_A_HOUR / 60)

src/i18n/lang/en.json

@@ -720,6 +720,11 @@
         "copiedto": "Copied To | Copied To"
       }
     },
+    "reminder": {
+      "hoursShort": "HH",
+      "minutesShort": "MM",
+      "daysShort": "d"
+    },
     "repeat": {
       "everyDay": "Every Day",
       "everyWeek": "Every Week",