code refactor

src/components/base/TwoColumnListItemSelectionBase.ts

@@ -0,0 +1,89 @@
+import { type Ref } from 'vue';
+
+import { getItemByKeyValue, getPrimaryValueBySecondaryValue } from '@/lib/common.ts';
+
+export interface CommonTwoColumnListItemSelectionProps {
+    modelValue: unknown;
+    primaryKeyField?: string;
+    primaryValueField?: string;
+    primaryTitleField?: string;
+    primaryTitleI18n?: boolean;
+    primaryHeaderField?: string;
+    primaryHeaderI18n?: boolean;
+    primaryFooterField?: string;
+    primaryFooterI18n?: boolean;
+    primaryIconField?: string;
+    primaryIconType?: string;
+    primaryColorField?: string;
+    primaryHiddenField?: string;
+    primarySubItemsField: string;
+    secondaryKeyField?: string;
+    secondaryValueField?: string;
+    secondaryTitleField?: string;
+    secondaryTitleI18n?: boolean;
+    secondaryHeaderField?: string;
+    secondaryHeaderI18n?: boolean;
+    secondaryFooterField?: string;
+    secondaryFooterI18n?: boolean;
+    secondaryIconField?: string;
+    secondaryIconType?: string;
+    secondaryColorField?: string;
+    secondaryHiddenField?: string;
+    items: unknown[];
+}
+
+export function useTwoColumnListItemSelectionBase(props: CommonTwoColumnListItemSelectionProps) {
+    function getCurrentPrimaryValueBySecondaryValue(secondaryValue: unknown): unknown {
+        return getPrimaryValueBySecondaryValue(props.items as Record<string, Record<string, unknown>[]>[] | Record<string, Record<string, Record<string, unknown>[]>>, props.primarySubItemsField, props.primaryValueField, props.primaryHiddenField, props.secondaryValueField, props.secondaryHiddenField, secondaryValue);
+    }
+
+    function isSecondaryValueSelected(currentSecondaryValue: unknown, subItem: unknown): boolean {
+        if (props.secondaryValueField) {
+            return currentSecondaryValue === (subItem as Record<string, unknown>)[props.secondaryValueField];
+        } else {
+            return currentSecondaryValue === subItem;
+        }
+    }
+
+    function getSelectedPrimaryItem(currentPrimaryValue: unknown) {
+        if (props.primaryValueField) {
+            return getItemByKeyValue(props.items as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentPrimaryValue, props.primaryValueField);
+        } else {
+            return currentPrimaryValue;
+        }
+    }
+
+    function getSelectedSecondaryItem(currentSecondaryValue: unknown, selectedPrimaryItem: unknown) {
+        if (currentSecondaryValue && selectedPrimaryItem && (selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField]) {
+            return getItemByKeyValue((selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField] as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentSecondaryValue, props.secondaryValueField as string);
+        } else {
+            return null;
+        }
+    }
+
+    function updateCurrentPrimaryValue(currentPrimaryValue: Ref<unknown>, item: unknown): void {
+        if (props.primaryValueField) {
+            currentPrimaryValue.value = (item as Record<string, unknown>)[props.primaryValueField];
+        } else {
+            currentPrimaryValue.value = item;
+        }
+    }
+
+    function updateCurrentSecondaryValue(currentSecondaryValue: Ref<unknown>, subItem: unknown): void {
+        if (props.secondaryValueField) {
+            currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
+        } else {
+            currentSecondaryValue.value = subItem;
+        }
+    }
+
+    return {
+        // functions
+        getCurrentPrimaryValueBySecondaryValue,
+        isSecondaryValueSelected,
+        getSelectedPrimaryItem,
+        getSelectedSecondaryItem,
+        updateCurrentPrimaryValue,
+        updateCurrentSecondaryValue
+    };
+}

src/components/desktop/TwoColumnSelect.vue

@@ -77,12 +77,12 @@
 import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
+import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
 
 import {
     getFirstVisibleItem,
     getItemByKeyValue,
-    getNameByKeyValue,
+    getNameByKeyValue
-    getPrimaryValueBySecondaryValue
 } from '@/lib/common.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
@@ -90,8 +90,7 @@ import {
     mdiChevronRight
 } from '@mdi/js';
 
-const props = defineProps<{
+interface DesktopTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
-    modelValue: unknown;
     density?: string;
     variant?: string;
     disabled?: boolean;
@@ -101,34 +100,10 @@ const props = defineProps<{
     showSelectionSecondaryIcon?: boolean;
     customSelectionPrimaryText?: string;
     customSelectionSecondaryText?: string;
-    primaryKeyField?: string;
-    primaryValueField?: string;
-    primaryTitleField?: string;
-    primaryTitleI18n?: boolean;
-    primaryHeaderField?: string;
-    primaryHeaderI18n?: boolean;
-    primaryFooterField?: string;
-    primaryFooterI18n?: boolean;
-    primaryIconField?: string;
-    primaryIconType?: string;
-    primaryColorField?: string;
-    primaryHiddenField?: string;
-    primarySubItemsField: string;
-    secondaryKeyField?: string;
-    secondaryValueField?: string;
-    secondaryTitleField?: string;
-    secondaryTitleI18n?: boolean;
-    secondaryHeaderField?: string;
-    secondaryHeaderI18n?: boolean;
-    secondaryFooterField?: string;
-    secondaryFooterI18n?: boolean;
-    secondaryIconField?: string;
-    secondaryIconType?: string;
-    secondaryColorField?: string;
-    secondaryHiddenField?: string;
-    items: unknown[];
     noItemText?: string;
-}>();
+}
+
+const props = defineProps<DesktopTwoColumnListItemSelectionProps>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: unknown): void;
@@ -136,6 +111,15 @@ const emit = defineEmits<{
 
 const { tt, ti } = useI18n();
 
+const {
+    getCurrentPrimaryValueBySecondaryValue,
+    isSecondaryValueSelected,
+    getSelectedPrimaryItem,
+    getSelectedSecondaryItem,
+    updateCurrentPrimaryValue,
+    updateCurrentSecondaryValue
+} = useTwoColumnListItemSelectionBase(props);
+
 const icons = {
     chevronRight: mdiChevronRight
 };
@@ -175,21 +159,8 @@ const currentSecondaryValue = computed<unknown>({
     }
 });
 
-const selectedPrimaryItem = computed<unknown>(() => {
+const selectedPrimaryItem = computed<unknown>(() => getSelectedPrimaryItem(currentPrimaryValue.value));
-    if (props.primaryValueField) {
+const selectedSecondaryItem = computed<unknown>(() => getSelectedSecondaryItem(currentSecondaryValue.value, selectedPrimaryItem.value));
-        return getItemByKeyValue(props.items as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentPrimaryValue.value, props.primaryValueField);
-    } else {
-        return currentPrimaryValue.value;
-    }
-});
-
-const selectedSecondaryItem = computed<unknown>(() => {
-    if (currentSecondaryValue.value && selectedPrimaryItem.value && (selectedPrimaryItem.value as Record<string, unknown>)[props.primarySubItemsField]) {
-        return getItemByKeyValue((selectedPrimaryItem.value as Record<string, unknown>)[props.primarySubItemsField] as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentSecondaryValue.value, props.secondaryValueField as string);
-    } else {
-        return null;
-    }
-});
 
 const noSelectionText = computed<string>(() => props.noItemText ? props.noItemText : tt('None'));
 
@@ -217,32 +188,16 @@ const selectionSecondaryItemText = computed<string>(() => {
     }
 });
 
-function getCurrentPrimaryValueBySecondaryValue(secondaryValue: unknown): unknown {
-    return getPrimaryValueBySecondaryValue(props.items as Record<string, Record<string, unknown>[]>[] | Record<string, Record<string, Record<string, unknown>[]>>, props.primarySubItemsField, props.primaryValueField, props.primaryHiddenField, props.secondaryValueField, props.secondaryHiddenField, secondaryValue);
-}
-
 function isSecondarySelected(subItem: unknown): boolean {
-    if (props.secondaryValueField) {
+    return isSecondaryValueSelected(currentSecondaryValue.value, subItem);
-        return currentSecondaryValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        return currentSecondaryValue.value === subItem;
-    }
 }
 
 function onPrimaryItemClicked(item: unknown): void {
-    if (props.primaryValueField) {
+    updateCurrentPrimaryValue(currentPrimaryValue, item);
-        currentPrimaryValue.value = (item as Record<string, unknown>)[props.primaryValueField];
-    } else {
-        currentPrimaryValue.value = item;
-    }
 }
 
 function onSecondaryItemClicked(subItem: unknown): void {
-    if (props.secondaryValueField) {
+    updateCurrentSecondaryValue(currentSecondaryValue, subItem);
-        currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        currentSecondaryValue.value = subItem;
-    }
 }
 
 function onMenuStateChanged(state: boolean): void {

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -65,43 +65,15 @@
 import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
+import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
 
-import {
-    getItemByKeyValue,
-    getPrimaryValueBySecondaryValue
-} from '@/lib/common.ts';
 import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
-const props = defineProps<{
+interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
-    modelValue: unknown;
-    primaryKeyField?: string;
-    primaryValueField?: string;
-    primaryTitleField?: string;
-    primaryTitleI18n?: boolean;
-    primaryHeaderField?: string;
-    primaryHeaderI18n?: boolean;
-    primaryFooterField?: string;
-    primaryFooterI18n?: boolean;
-    primaryIconField?: string;
-    primaryIconType?: string;
-    primaryColorField?: string;
-    primaryHiddenField?: string;
-    primarySubItemsField: string;
-    secondaryKeyField?: string;
-    secondaryValueField?: string;
-    secondaryTitleField?: string;
-    secondaryTitleI18n?: boolean;
-    secondaryHeaderField?: string;
-    secondaryHeaderI18n?: boolean;
-    secondaryFooterField?: string;
-    secondaryFooterI18n?: boolean;
-    secondaryIconField?: string;
-    secondaryIconType?: string;
-    secondaryColorField?: string;
-    secondaryHiddenField?: string;
-    items: unknown[];
     show: boolean;
-}>();
+}
+
+const props = defineProps<MobileTwoColumnListItemSelectionProps>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: unknown): void;
@@ -110,48 +82,34 @@ const emit = defineEmits<{
 
 const { tt, ti } = useI18n();
 
+const {
+    getCurrentPrimaryValueBySecondaryValue,
+    isSecondaryValueSelected,
+    getSelectedPrimaryItem,
+    updateCurrentPrimaryValue,
+    updateCurrentSecondaryValue
+} = useTwoColumnListItemSelectionBase(props);
+
+
 const currentPrimaryValue = ref<unknown>(getCurrentPrimaryValueBySecondaryValue(props.modelValue));
 const currentSecondaryValue = ref<unknown>(props.modelValue);
 
-function getCurrentPrimaryValueBySecondaryValue(secondaryValue: unknown): unknown {
+const selectedPrimaryItem = computed<unknown>(() => getSelectedPrimaryItem(currentPrimaryValue.value));
-    return getPrimaryValueBySecondaryValue(props.items as Record<string, Record<string, unknown>[]>[] | Record<string, Record<string, Record<string, unknown>[]>>, props.primarySubItemsField, props.primaryValueField, props.primaryHiddenField, props.secondaryValueField, props.secondaryHiddenField, secondaryValue);
-}
 
 function isSecondarySelected(subItem: unknown): boolean {
-    if (props.secondaryValueField) {
+    return isSecondaryValueSelected(currentSecondaryValue.value, subItem);
-        return currentSecondaryValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        return currentSecondaryValue.value === subItem;
-    }
 }
 
-const selectedPrimaryItem = computed<unknown>(() => {
-    if (props.primaryValueField) {
-        return getItemByKeyValue(props.items as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentPrimaryValue.value, props.primaryValueField);
-    } else {
-        return currentPrimaryValue.value;
-    }
-});
-
 function close(): void {
     emit('update:show', false);
 }
 
 function onPrimaryItemClicked(item: unknown): void {
-    if (props.primaryValueField) {
+    updateCurrentPrimaryValue(currentPrimaryValue, item);
-        currentPrimaryValue.value = (item as Record<string, unknown>)[props.primaryValueField];
-    } else {
-        currentPrimaryValue.value = item;
-    }
 }
 
 function onSecondaryItemClicked(subItem: unknown): void {
-    if (props.secondaryValueField) {
+    updateCurrentSecondaryValue(currentSecondaryValue, subItem);
-        currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        currentSecondaryValue.value = subItem;
-    }
-
     emit('update:modelValue', currentSecondaryValue.value);
     close();
 }