Skip to content

Commit

Permalink
code refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayswind
mayswind committed Feb 5, 2025
1 parent b077b99 commit 1579882
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 125 deletions.
89 changes: 89 additions & 0 deletions src/components/base/TwoColumnListItemSelectionBase.ts
View file
Original file line number Diff line number Diff line change
@@ -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
};
}
85 changes: 20 additions & 65 deletions src/components/desktop/TwoColumnSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,21 +77,20 @@
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,
getPrimaryValueBySecondaryValue
getNameByKeyValue
} from '@/lib/common.ts';
import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
import {
mdiChevronRight
} from '@mdi/js';
const props = defineProps<{
modelValue: unknown;
interface DesktopTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
density?: string;
variant?: string;
disabled?: boolean;
Expand All @@ -101,41 +100,26 @@ 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;
}>();
const { tt, ti } = useI18n();
const {
getCurrentPrimaryValueBySecondaryValue,
isSecondaryValueSelected,
getSelectedPrimaryItem,
getSelectedSecondaryItem,
updateCurrentPrimaryValue,
updateCurrentSecondaryValue
} = useTwoColumnListItemSelectionBase(props);
const icons = {
chevronRight: mdiChevronRight
};
Expand Down Expand Up @@ -175,21 +159,8 @@ const currentSecondaryValue = computed<unknown>({
}
});
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;
}
});
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 selectedPrimaryItem = computed<unknown>(() => getSelectedPrimaryItem(currentPrimaryValue.value));
const selectedSecondaryItem = computed<unknown>(() => getSelectedSecondaryItem(currentSecondaryValue.value, selectedPrimaryItem.value));
const noSelectionText = computed<string>(() => props.noItemText ? props.noItemText : tt('None'));
Expand Down Expand Up @@ -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 currentSecondaryValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
} else {
return currentSecondaryValue.value === subItem;
}
return isSecondaryValueSelected(currentSecondaryValue.value, subItem);
}
function onPrimaryItemClicked(item: unknown): void {
if (props.primaryValueField) {
currentPrimaryValue.value = (item as Record<string, unknown>)[props.primaryValueField];
} else {
currentPrimaryValue.value = item;
}
updateCurrentPrimaryValue(currentPrimaryValue, item);
}
function onSecondaryItemClicked(subItem: unknown): void {
if (props.secondaryValueField) {
currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
} else {
currentSecondaryValue.value = subItem;
}
updateCurrentSecondaryValue(currentSecondaryValue, subItem);
}
function onMenuStateChanged(state: boolean): void {
Expand Down
78 changes: 18 additions & 60 deletions src/components/mobile/TwoColumnListItemSelectionSheet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
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[];
interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
show: boolean;
}>();
}
const props = defineProps<MobileTwoColumnListItemSelectionProps>();
const emit = defineEmits<{
(e: 'update:modelValue', value: unknown): void;
Expand All @@ -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 {
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);
}
const selectedPrimaryItem = computed<unknown>(() => getSelectedPrimaryItem(currentPrimaryValue.value));
function isSecondarySelected(subItem: unknown): boolean {
if (props.secondaryValueField) {
return currentSecondaryValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
} else {
return currentSecondaryValue.value === subItem;
}
return isSecondaryValueSelected(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) {
currentPrimaryValue.value = (item as Record<string, unknown>)[props.primaryValueField];
} else {
currentPrimaryValue.value = item;
}
updateCurrentPrimaryValue(currentPrimaryValue, item);
}
function onSecondaryItemClicked(subItem: unknown): void {
if (props.secondaryValueField) {
currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
} else {
currentSecondaryValue.value = subItem;
}
updateCurrentSecondaryValue(currentSecondaryValue, subItem);
emit('update:modelValue', currentSecondaryValue.value);
close();
}
Expand Down

0 comments on commit 1579882

Please sign in to comment.