support setting the last 1 to 3 days of the month to scheduled transaction frequency

src/components/base/ScheduleFrequencySelectionBase.ts

@@ -15,30 +15,18 @@ export interface CommonScheduleFrequencySelectionProps {
     label?: string;
 }
 
-export interface AvailableMonthDay {
-    day: number;
-    displayName: string;
-}
-
 export function useScheduleFrequencySelectionBase() {
-    const { getAllWeekDays, getAllTransactionScheduledFrequencyTypes, getMonthdayShortName } = useI18n();
+    const {
+        getAllWeekDays,
+        getAvailableMonthDays,
+        getAllTransactionScheduledFrequencyTypes
+    } = useI18n();
     const userStore = useUserStore();
 
     const allTransactionScheduledFrequencyTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionScheduledFrequencyTypes());
     const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays(userStore.currentUserFirstDayOfWeek));
 
-    const allAvailableMonthDays = computed<AvailableMonthDay[]>(() => {
-        const allAvailableDays = [];
-
-        for (let i = 1; i <= 28; i++) {
-            allAvailableDays.push({
-                day: i,
-                displayName: getMonthdayShortName(i),
-            });
-        }
-
-        return allAvailableDays;
-    });
+    const allAvailableMonthDays = computed<TypeAndDisplayName[]>(() => getAvailableMonthDays(28, 3));
 
     function getFrequencyValues(value: string): number[] {
         const values = value.split(',');

src/components/desktop/ScheduleFrequencySelect.vue

@@ -41,12 +41,12 @@
                     </v-list>
                     <v-list select-strategy="classic" v-model:selected="frequencyValue"
                             v-else-if="frequencyType === ScheduledTemplateFrequencyType.Monthly.type">
-                        <v-list-item :key="monthDay.day" :value="monthDay.day" :title="monthDay.displayName"
-                                     :class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(monthDay.day) }"
+                        <v-list-item :key="monthDay.type" :value="monthDay.type" :title="monthDay.displayName"
+                                     :class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(monthDay.type) }"
                                      v-for="monthDay in allAvailableMonthDays">
                             <template #prepend="{ isActive }">
                                 <v-checkbox density="compact" class="me-1" :model-value="isActive"
-                                            @update:model-value="updateFrequencyValue(monthDay.day, $event)"></v-checkbox>
+                                            @update:model-value="updateFrequencyValue(monthDay.type, $event)"></v-checkbox>
                             </template>
                         </v-list-item>
                     </v-list>

src/components/mobile/ScheduleFrequencySheet.vue

@@ -48,10 +48,10 @@
                         <f7-list dividers class="schedule-frequency-value-list no-margin-vertical"
                                  v-if="currentFrequencyType === ScheduledTemplateFrequencyType.Monthly.type">
                             <f7-list-item checkbox
-                                          :class="isChecked(monthDay.day) ? 'list-item-selected' : ''"
-                                          :key="monthDay.day"
-                                          :value="monthDay.day"
-                                          :checked="isChecked(monthDay.day)"
+                                          :class="isChecked(monthDay.type) ? 'list-item-selected' : ''"
+                                          :key="monthDay.type"
+                                          :value="monthDay.type"
+                                          :checked="isChecked(monthDay.type)"
                                           :title="monthDay.displayName"
                                           v-for="monthDay in allAvailableMonthDays"
                                           @change="changeFrequencyValue">