refactor: extract re-usable functions from mixin

src/i18n/de.js

@@ -462,16 +462,6 @@ export default {
   rrule: {
     rrule: 'Wiederholungsregel',
 
-    day: {
-      sunday: 'Sonntag',
-      monday: 'Montag',
-      tuesday: 'Dienstag',
-      wednesday: 'Mittwoch',
-      thursday: 'Donnerstag',
-      friday: 'Freitag',
-      saturday: 'Samstag',
-    },
-
     rule: {
       1: 'einmalig',
       2: 'täglich',

src/i18n/en.js

@@ -461,16 +461,6 @@ export default {
   rrule: {
     rrule: 'Repetition rule',
 
-    day: {
-      sunday: 'Sunday',
-      monday: 'Monday',
-      tuesday: 'Tuesday',
-      wednesday: 'Wednesday',
-      thursday: 'Thursday',
-      friday: 'Friday',
-      saturday: 'Saturday',
-    },
-
     rule: {
       1: 'once',
       2: 'daily',

src/mixins/prettyDate.js

+import { useI18n } from '@/i18n'
+
 const day = [
-  'rrule.day.sunday',
-  'rrule.day.monday',
-  'rrule.day.tuesday',
-  'rrule.day.wednesday',
-  'rrule.day.thursday',
-  'rrule.day.friday',
-  'rrule.day.saturday',
+  // static days from sunday to saturday
+  // (note: month is zero-indexed)
+  new Date(2023, 3, 2),
+  new Date(2023, 3, 3),
+  new Date(2023, 3, 4),
+  new Date(2023, 3, 5),
+  new Date(2023, 3, 6),
+  new Date(2023, 3, 7),
+  new Date(2023, 3, 8),
 ]
 
-export default {
-  methods: {
-    leadingZero(num) {
-      if (num < 10) {
-        return '0' + num
-      } else {
-        return num.toString()
-      }
-    },
+function prettyWeekday(locale, weekday, format = 'long') {
+  return day[(weekday + 1) % 7].toLocaleString(locale, { weekday: format })
+}
 
-    apiDate: function (date) {
-      const dateObj = new Date(date)
-      return `${dateObj.getFullYear()}-${this.leadingZero(
-        dateObj.getMonth() + 1,
-      )}-${this.leadingZero(dateObj.getDate())}`
-    },
-    getWeekdayFromApiDate: function (date) {
-      const dateObj = new Date(date)
-      const weekday = dateObj.getDay()
-      // Date.getDay() returns 0 for Sundays, but for our APIs we need 0 for Mondays
-      if (weekday === 0) {
-        return 6
-      } else {
-        return weekday - 1
-      }
-    },
-    prettyDate: function (date) {
-      return new Date(date).toLocaleString(this.$activeLocale(), {
-        weekday: 'long',
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric',
-      })
-    },
+function leadingZero(num) {
+  return String(num).padStart(2, '0')
+}
 
-    prettyTime: function (date) {
-      return new Date(date).toLocaleString(this.$activeLocale(), {
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    },
+export function apiDate(date) {
+  const dateObj = new Date(date)
+  return `${dateObj.getFullYear()}-${leadingZero(dateObj.getMonth() + 1)}-${leadingZero(
+    dateObj.getDate(),
+  )}`
+}
 
-    prettyDateTime: function (date) {
-      return new Date(date).toLocaleString(this.$activeLocale(), {
-        weekday: 'long',
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    },
-    prettyHours(hours) {
-      return hours.replace(/:00$/, '')
-    },
-    prettyDuration: function (start, end) {
-      const seconds = (new Date(end).getTime() - new Date(start).getTime()) / 1000
-      const minutes = Math.floor(seconds / 60)
-      let duration = minutes + 'min'
-      if (minutes < seconds / 60) {
-        duration += ' '
-        duration += seconds - 60 * minutes
-        duration += 'sec'
-      }
-      return { duration, minutes }
-    },
-    durationInSeconds: function (ns) {
-      const durationInMilliseconds = Math.floor(ns / 1000 / 1000)
+export function getWeekdayFromApiDate(date) {
+  const dateObj = new Date(date)
+  const weekday = dateObj.getDay()
+  // Date.getDay() returns 0 for Sundays, but for our APIs we need 0 for Mondays
+  if (weekday === 0) {
+    return 6
+  } else {
+    return weekday - 1
+  }
+}
 
-      return Math.floor(durationInMilliseconds / 1000)
-    },
-    prettyNanoseconds: function (ns) {
-      const durationInMilliseconds = Math.floor(ns / 1000 / 1000)
+function prettyDate(locale, date) {
+  return new Date(date).toLocaleString(locale, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+function prettyTime(locale, date) {
+  return new Date(date).toLocaleString(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function prettyDateTime(locale, date) {
+  return new Date(date).toLocaleString(locale, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
 
-      const seconds = Math.floor((durationInMilliseconds / 1000) % 60)
-      const minutes = Math.floor((durationInMilliseconds / (1000 * 60)) % 60)
-      const hours = Math.floor((durationInMilliseconds / (1000 * 60 * 60)) % 24)
+export function prettyHours(hours) {
+  return hours.replace(/:00$/, '')
+}
+
+export function prettyDuration(start, end) {
+  const seconds = (new Date(end).getTime() - new Date(start).getTime()) / 1000
+  const minutes = Math.floor(seconds / 60)
+  let duration = minutes + 'min'
+  if (minutes < seconds / 60) {
+    duration += ' '
+    duration += seconds - 60 * minutes
+    duration += 'sec'
+  }
+  return { duration, minutes }
+}
 
-      return (
-        this.leadingZero(hours) + ':' + this.leadingZero(minutes) + ':' + this.leadingZero(seconds)
-      )
+export function durationInSeconds(ns) {
+  const durationInMilliseconds = Math.floor(ns / 1000 / 1000)
+  return Math.floor(durationInMilliseconds / 1000)
+}
+
+export function prettyNanoseconds(ns) {
+  const durationInMilliseconds = Math.floor(ns / 1000 / 1000)
+  const seconds = Math.floor((durationInMilliseconds / 1000) % 60)
+  const minutes = Math.floor((durationInMilliseconds / (1000 * 60)) % 60)
+  const hours = Math.floor((durationInMilliseconds / (1000 * 60 * 60)) % 24)
+
+  return `${leadingZero(hours)}:${leadingZero(minutes)}:${leadingZero(seconds)}`
+}
+
+export function nanosecondsToMinutes(ns) {
+  return ns / 1000 / 1000 / 1000 / 60
+}
+
+export function minutesToNanoseconds(m) {
+  return m * 60 * 1000 * 1000 * 1000
+}
+
+export function hmsToNanoseconds(hms) {
+  const parts = hms.split(':')
+  const seconds = +parts[0] * 60 * 60 + +parts[1] * 60 + +parts[2]
+
+  return seconds * 1000 * 1000 * 1000
+}
+
+export function minutesToHm(minutes) {
+  const numMinutes = minutes % 60
+  const numHours = (minutes - numMinutes) / 60
+
+  return `${leadingZero(numHours)}:${leadingZero(numMinutes)}`
+}
+
+const methods = {
+  leadingZero,
+  apiDate,
+  getWeekdayFromApiDate,
+  prettyHours,
+  prettyDuration,
+  durationInSeconds,
+  prettyNanoseconds,
+  nanosecondsToMinutes,
+  minutesToNanoseconds,
+  hmsToNanoseconds,
+  minutesToHm,
+}
+
+export function usePretty() {
+  const { locale } = useI18n()
+  return {
+    ...methods,
+    prettyDate(date) {
+      return prettyDate(locale.value, date)
     },
-    nanosecondsToMinutes: function (ns) {
-      return ns / 1000 / 1000 / 1000 / 60
+    prettyTime(date) {
+      return prettyTime(locale.value, date)
     },
-    minutesToNanoseconds: function (m) {
-      return m * 60 * 1000 * 1000 * 1000
+    prettyDateTime(date) {
+      return prettyDateTime(locale.value, date)
     },
-    hmsToNanoseconds: function (hms) {
-      const parts = hms.split(':')
-      const seconds = +parts[0] * 60 * 60 + +parts[1] * 60 + +parts[2]
-
-      return seconds * 1000 * 1000 * 1000
+    prettyWeekday(weekday) {
+      return prettyWeekday(locale.value, weekday)
     },
-    minutesToHm: function (minutes) {
-      const numMinutes = minutes % 60
-      const numHours = (minutes - numMinutes) / 60
+  }
+}
 
-      return `${this.leadingZero(numHours)}:${this.leadingZero(numMinutes)}`
+export default {
+  methods: {
+    ...methods,
+    prettyDate(date) {
+      return prettyDate(this.$activeLocale(), date)
+    },
+    prettyTime(date) {
+      return prettyTime(this.$activeLocale(), date)
+    },
+    prettyDateTime(date) {
+      return prettyDateTime(this.$activeLocale(), date)
     },
-    prettyWeekday: function (weekday) {
-      return this.$t(day[(weekday + 1) % 7])
+    prettyWeekday(weekday) {
+      return prettyWeekday(this.$activeLocale(), weekday)
     },
   },
 }

src/mixins/rrules.js

+import { computed } from 'vue'
+import { useI18n } from '@/i18n'
+
+function rruleRender(t, rruleId) {
+  return t(`rrule.rule.${rruleId}`)
+}
+
+function rruleOptions(t) {
+  return [
+    { value: 1, text: t('rrule.rule.1') },
+    { value: 2, text: t('rrule.rule.2') },
+    { value: 3, text: t('rrule.rule.3') },
+    { value: 4, text: t('rrule.rule.4') },
+    { value: 5, text: t('rrule.rule.5') },
+    { value: 6, text: t('rrule.rule.6') },
+    { value: 7, text: t('rrule.rule.7') },
+    { value: 8, text: t('rrule.rule.8') },
+    { value: 9, text: t('rrule.rule.9') },
+    { value: 10, text: t('rrule.rule.10') },
+    { value: 11, text: t('rrule.rule.11') },
+    { value: 12, text: t('rrule.rule.12') },
+    { value: 13, text: t('rrule.rule.13') },
+  ]
+}
+
+export function useRRule() {
+  const { t } = useI18n()
+  const rruleOptions = computed(() => rruleOptions(t))
+  return {
+    rruleOptions,
+    rruleRender: (rruleID) => rruleRender(t, rruleID),
+  }
+}
+
 export default {
   computed: {
     rruleOptions() {
-      return [
-        { value: 1, text: this.$t('rrule.rule.1') },
-        { value: 2, text: this.$t('rrule.rule.2') },
-        { value: 3, text: this.$t('rrule.rule.3') },
-        { value: 4, text: this.$t('rrule.rule.4') },
-        { value: 5, text: this.$t('rrule.rule.5') },
-        { value: 6, text: this.$t('rrule.rule.6') },
-        { value: 7, text: this.$t('rrule.rule.7') },
-        { value: 8, text: this.$t('rrule.rule.8') },
-        { value: 9, text: this.$t('rrule.rule.9') },
-        { value: 10, text: this.$t('rrule.rule.10') },
-        { value: 11, text: this.$t('rrule.rule.11') },
-        { value: 12, text: this.$t('rrule.rule.12') },
-        { value: 13, text: this.$t('rrule.rule.13') },
-      ]
+      return rruleOptions(this.$t)
     },
   },
-
   methods: {
     rruleRender(rrule) {
-      return this.$t(`rrule.rule.${rrule}`)
+      return rruleRender(this.$t, rrule)
     },
   },
 }