code refactor

src/components/base/FiscalYearStartSelectionBase.ts

@@ -1,88 +1,95 @@
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
-
-import { useUserStore } from '@/stores/user.ts';
+import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { arrangeArrayWithNewStartIndex } from '@/lib/common';
+import { useUserStore } from '@/stores/user.ts';
 
-export interface FiscalYearStartSelectionBaseProps {
+export interface CommonFiscalYearStartSelectionProps {
     modelValue?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    label?: string;
 }
 
-export interface FiscalYearStartSelectionBaseEmits {
+export interface CommonFiscalYearStartSelectionEmits {
     (e: 'update:modelValue', value: number): void;
 }
 
-export function useFiscalYearStartSelectionBase(props: FiscalYearStartSelectionBaseProps, emit: FiscalYearStartSelectionBaseEmits) {
-    const { getAllMinWeekdayNames, formatMonthDayToLongDay, getCurrentFiscalYearStartFormatted } = useI18n();
+function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps): number {
+    if (!props.modelValue) {
+        return FiscalYearStart.Default.value;
+    }
 
-    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
+    const fiscalYearStart = FiscalYearStart.valueOf(props.modelValue);
 
-    const displayName = computed<string>(() => {
-        const fy = FiscalYearStart.fromNumber(selectedFiscalYearStart.value);
+    if (!fiscalYearStart) {
+        return FiscalYearStart.Default.value;
+    }
 
-        if ( fy ) {
-            return formatMonthDayToLongDay(fy.toMonthDashDayString())
-        }
+    return fiscalYearStart.value;
+}
 
-        return formatMonthDayToLongDay(FiscalYearStart.strictFromNumber(userStore.currentUserFiscalYearStart).toMonthDashDayString());
-
-    });
-
-    const disabledDates = (date: Date) => {
-        // Disable February 29 (leap day)
-        return date.getMonth() === 1 && date.getDate() === 29; 
-    };
-
-    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
-
-    const selectedFiscalYearStart = computed<number>(() => {
-        return props.modelValue !== undefined ? props.modelValue : userStore.currentUserFiscalYearStart;
-    });
+export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
+    const {
+        getAllMinWeekdayNames,
+        formatMonthDayToLongDay
+    } = useI18n();
 
     const userStore = useUserStore();
 
-    function selectedDisplayName(dateString: string): string {
-        const fy = FiscalYearStart.fromMonthDashDayString(dateString);
-        if ( fy ) {
-            return formatMonthDayToLongDay(fy.toMonthDashDayString());
+    const disabledDates = (date: Date) => {
+        // Disable February 29 (leap day)
+        return date.getMonth() === 1 && date.getDate() === 29;
+    };
+
+    const selectedFiscalYearStart = ref<number>(getFiscalYearStartFromProps(props));
+
+    const selectedFiscalYearStartValue = computed<string>({
+        get: () => {
+            const fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
+
+            if (fiscalYearStart) {
+                return fiscalYearStart.toMonthDashDayString();
+            } else {
+                return FiscalYearStart.Default.toMonthDashDayString();
+            }
+        },
+        set: (value: string) => {
+            const fiscalYearStart = FiscalYearStart.parse(value);
+
+            if (fiscalYearStart) {
+                selectedFiscalYearStart.value = fiscalYearStart.value;
+            } else {
+                selectedFiscalYearStart.value = FiscalYearStart.Default.value;
+            }
         }
-        return displayName.value;
-    }
+    });
 
-    function getModelValueToDateString(): string {
-        const input = selectedFiscalYearStart.value;
-        
-        const fy = FiscalYearStart.fromNumber(input);
+    const displayFiscalYearStartDate = computed<string>(() => {
+        let fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
 
-        if ( fy ) {
-            return fy.toMonthDashDayString();
+        if (!fiscalYearStart) {
+            fiscalYearStart = FiscalYearStart.Default;
         }
 
-        return getCurrentFiscalYearStartFormatted();
-    }
+        return formatMonthDayToLongDay(fiscalYearStart.toMonthDashDayString());
+    });
+
+    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
 
-    function getDateStringToModelValue(input: string): number {
-        const fyString = FiscalYearStart.fromMonthDashDayString(input);
-        if (fyString) {
-            return fyString.value;
-        }
-        return userStore.currentUserFiscalYearStart;
-    }
-    
     return {
-        // functions
-        getDateStringToModelValue,
-        getModelValueToDateString,
-        selectedDisplayName,
-        // computed states
-        dayNames,
-        displayName,
+        // constants
         disabledDates,
-        firstDayOfWeek,
+        // states,
         selectedFiscalYearStart,
-    }
+        // computed states
+        selectedFiscalYearStartValue,
+        displayFiscalYearStartDate,
+        firstDayOfWeek,
+        dayNames
+    };
 }

src/components/desktop/FiscalYearStartSelect.vue

@@ -3,18 +3,16 @@
         persistent-placeholder
         :readonly="readonly"
         :disabled="disabled"
-        :clearable="modelValue ? clearable : false"
         :label="label"
         :menu-props="{ contentClass: 'fiscal-year-start-select-menu' }"
-        v-model="selectedDate"
+        v-model="selectedFiscalYearStartValue"
     >
         <template #selection>
-            <span class="text-truncate cursor-pointer">{{ displayName }}</span>
+            <span class="text-truncate cursor-pointer">{{ displayFiscalYearStartDate }}</span>
         </template>
 
         <template #no-data>
-            <vue-date-picker inline vertical auto-apply hide-offset-dates disable-year-select
-                             ref="datepicker"
+            <vue-date-picker inline auto-apply hide-offset-dates disable-year-select
                              month-name-format="long"
                              model-type="MM-dd"
                              :clearable="false"
@@ -23,8 +21,7 @@
                              :week-start="firstDayOfWeek"
                              :day-names="dayNames"
                              :disabled-dates="disabledDates"
-                             :start-date="selectedDate"
-                             v-model="selectedDate"
+                             v-model="selectedFiscalYearStartValue"
                              >
                 <template #month="{ text }">
                     {{ getMonthShortName(text) }}
@@ -38,51 +35,46 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
-import { useUserStore } from '@/stores/user.ts';
-import { ThemeType } from '@/core/theme.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-import {
-    type FiscalYearStartSelectionBaseProps,
-    type FiscalYearStartSelectionBaseEmits,
-    useFiscalYearStartSelectionBase
-} from '@/components/base/FiscalYearStartSelectionBase.ts';
+
 import { useI18n } from '@/locales/helpers.ts';
 
-interface FiscalYearStartSelectProps extends FiscalYearStartSelectionBaseProps {
-    disabled?: boolean;
-    readonly?: boolean;
-    clearable?: boolean;
-    label?: string;
-}
+import {
+    type CommonFiscalYearStartSelectionProps,
+    type CommonFiscalYearStartSelectionEmits,
+    useFiscalYearStartSelectionBase
+} from '@/components/base/FiscalYearStartSelectionBase.ts';
 
-const props = defineProps<FiscalYearStartSelectProps>();
-const emit = defineEmits<FiscalYearStartSelectionBaseEmits>();
+import { ThemeType } from '@/core/theme.ts';
+
+const props = defineProps<CommonFiscalYearStartSelectionProps>();
+const emit = defineEmits<CommonFiscalYearStartSelectionEmits>();
 
 const { getMonthShortName } = useI18n();
+
 const theme = useTheme();
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 
-// Get all base functionality
 const {
-    dayNames,
-    displayName,
     disabledDates,
+    selectedFiscalYearStart,
+    selectedFiscalYearStartValue,
+    displayFiscalYearStartDate,
     firstDayOfWeek,
-    getModelValueToDateString,
-    getDateStringToModelValue,
-} = useFiscalYearStartSelectionBase(props, emit);
+    dayNames
+} = useFiscalYearStartSelectionBase(props);
 
-const selectedDate = computed<string>({
-    get: () => {
-        return getModelValueToDateString();
-    },
-    set: (value: string) => {
-        emit('update:modelValue', getDateStringToModelValue(value));
+watch(() => props.modelValue, (newValue) => {
+    if (newValue) {
+        selectedFiscalYearStart.value = newValue;
     }
 });
+
+watch(selectedFiscalYearStart, (newValue) => {
+    emit('update:modelValue', newValue);
+});
 </script>
 
 <style>

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -4,7 +4,7 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :text="tt('Clear')" @click="clear"></f7-link>
+                <f7-link :text="tt('Reset')" @click="reset"></f7-link>
             </div>
             <div class="right">
                 <f7-link :text="tt('Done')" @click="confirm"></f7-link>
@@ -17,14 +17,13 @@
                                  model-type="MM-dd"
                                  six-weeks="center"
                                  class="justify-content-center"
+                                 :clearable="false"
                                  :enable-time-picker="false"
-                                 :clearable="true"
                                  :dark="isDarkMode"
                                  :week-start="firstDayOfWeek"
                                  :day-names="dayNames"
                                  :disabled-dates="disabledDates"
-                                 :start-date="selectedDate"
-                                 v-model="selectedDate">
+                                 v-model="selectedFiscalYearStartValue">
                     <template #month="{ text }">
                         {{ getMonthShortName(text) }}
                     </template>
@@ -38,71 +37,71 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useEnvironmentsStore } from '@/stores/environment.ts';
+import { useUserStore } from '@/stores/user.ts';
 
 import {
-    type FiscalYearStartSelectionBaseProps,
-    type FiscalYearStartSelectionBaseEmits,
+    type CommonFiscalYearStartSelectionProps,
+    type CommonFiscalYearStartSelectionEmits,
     useFiscalYearStartSelectionBase
 } from '@/components/base/FiscalYearStartSelectionBase.ts';
 
-interface FiscalYearStartSelectionSheetProps extends FiscalYearStartSelectionBaseProps {
+import { FiscalYearStart } from '@/core/fiscalyear.ts';
+
+interface MobileFiscalYearStartSelectionSheetProps extends CommonFiscalYearStartSelectionProps {
     clearable?: boolean;
-    disabled?: boolean;
-    label?: string;
-    readonly?: boolean;
     show: boolean;
     title?: string;
 }
 
-const props = defineProps<FiscalYearStartSelectionSheetProps>();
-
-interface FiscalYearStartSelectionSheetEmits extends FiscalYearStartSelectionBaseEmits {
+interface MobileFiscalYearStartSelectionSheetEmits extends CommonFiscalYearStartSelectionEmits {
     (e: 'update:show', value: boolean): void;
-    (e: 'update:title', value: string): void;
 }
 
-const emit = defineEmits<FiscalYearStartSelectionSheetEmits>();
+const props = defineProps<MobileFiscalYearStartSelectionSheetProps>();
+const emit = defineEmits<MobileFiscalYearStartSelectionSheetEmits>();
 
-const { tt, getMonthShortName, getCurrentFiscalYearStartFormatted } = useI18n();
+const { tt, getMonthShortName } = useI18n();
 
 const environmentsStore = useEnvironmentsStore();
+const userStore = useUserStore();
 
 const {
-    dayNames,
     disabledDates,
+    selectedFiscalYearStart,
+    selectedFiscalYearStartValue,
     firstDayOfWeek,
-    getDateStringToModelValue,
-    getModelValueToDateString,
-    selectedDisplayName,
-} = useFiscalYearStartSelectionBase(props, emit);
+    dayNames
+} = useFiscalYearStartSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 
-const selectedDate = ref<string>(getModelValueToDateString());
+function confirm(): void {
+    emit('update:modelValue', selectedFiscalYearStart.value);
+    emit('update:show', false);
+}
+
+function reset(): void {
+    selectedFiscalYearStart.value = userStore.currentUserFiscalYearStart;
+}
 
 function onSheetOpen(): void {
-    selectedDate.value = getModelValueToDateString();
+    if (props.modelValue) {
+        const fiscalYearStart = FiscalYearStart.valueOf(props.modelValue);
+
+        if (fiscalYearStart) {
+            selectedFiscalYearStart.value = fiscalYearStart.value;
+        }
+    }
 }
 
 function onSheetClosed(): void {
     emit('update:show', false);
 }
-
-function clear(): void {
-    selectedDate.value = getCurrentFiscalYearStartFormatted();
-}
-
-function confirm(): void {
-    emit('update:modelValue', getDateStringToModelValue(selectedDate.value));
-    emit('update:show', false);
-    emit('update:title', selectedDisplayName(selectedDate.value));
-}
-
 </script>
 
 <style>