Skip to content

Commit

Permalink
migrate two column list item selection sheet to composition API and t…
Browse files Browse the repository at this point in the history 
…ypescript
  • Loading branch information
@mayswind
mayswind committed Jan 13, 2025
1 parent 30125f0 commit 8ce871e
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 113 deletions.
221 changes: 112 additions & 109 deletions src/components/mobile/TwoColumnListItemSelectionSheet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="swipe-handler"></div>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="$t('Done')"></f7-link>
<f7-link sheet-close :text="tt('Done')"></f7-link>
</div>
</f7-toolbar>
<f7-page-content>
Expand All @@ -15,16 +15,16 @@
<f7-list dividers class="primary-list no-margin-vertical">
<f7-list-item link="#" no-chevron
:class="{ 'primary-list-item-selected': item === selectedPrimaryItem }"
:value="primaryValueField ? item[primaryValueField] : item"
:title="$tIf(item[primaryTitleField], primaryTitleI18n)"
:header="$tIf(item[primaryHeaderField], primaryHeaderI18n)"
:footer="$tIf(item[primaryFooterField], primaryFooterI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
:value="primaryValueField ? (item as Record<string, unknown>)[primaryValueField] : item"
:title="ti(primaryTitleField ? (item as Record<string, unknown>)[primaryTitleField] as string : '', !!primaryTitleI18n)"
:header="ti(primaryHeaderField ? (item as Record<string, unknown>)[primaryHeaderField] as string : '', !!primaryHeaderI18n)"
:footer="ti(primaryFooterField ? (item as Record<string, unknown>)[primaryFooterField] as string : '', !!primaryFooterI18n)"
:key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] : item"
v-for="item in items"
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
v-show="item && (!primaryHiddenField || !(item as Record<string, unknown>)[primaryHiddenField])"
@click="onPrimaryItemClicked(item)">
<template #media>
<ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
<ItemIcon :icon-type="primaryIconType" :icon-id="primaryIconField ? (item as Record<string, unknown>)[primaryIconField] : undefined" :color="primaryColorField ? (item as Record<string, unknown>)[primaryColorField] : undefined"></ItemIcon>
</template>
<template #after>
<f7-icon class="list-item-showing" f7="chevron_right" v-if="item === selectedPrimaryItem"></f7-icon>
Expand All @@ -35,19 +35,19 @@
</div>
<div>
<div class="secondary-list-container">
<f7-list dividers class="secondary-list no-margin-vertical" v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]">
<f7-list dividers class="secondary-list no-margin-vertical" v-if="selectedPrimaryItem && primarySubItemsField && (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]">
<f7-list-item link="#" no-chevron
:class="{ 'secondary-list-item-selected': isSecondarySelected(subItem) }"
:value="secondaryValueField ? subItem[secondaryValueField] : subItem"
:title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
:header="$tIf(subItem[secondaryHeaderField], secondaryHeaderI18n)"
:footer="$tIf(subItem[secondaryFooterField], secondaryFooterI18n)"
:title="ti(secondaryTitleField ? subItem[secondaryTitleField] as string : '', !!secondaryTitleI18n)"
:header="ti(secondaryHeaderField ? subItem[secondaryHeaderField] as string : '', !!secondaryHeaderI18n)"
:footer="ti(secondaryFooterField ? subItem[secondaryFooterField] as string : '', !!secondaryFooterI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
v-for="subItem in (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
@click="onSecondaryItemClicked(subItem)">
<template #media>
<ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
<ItemIcon :icon-type="secondaryIconType" :icon-id="secondaryIconField ? subItem[secondaryIconField] : undefined" :color="secondaryColorField ? subItem[secondaryColorField] : undefined"></ItemIcon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="isSecondarySelected(subItem)"></f7-icon>
Expand All @@ -61,106 +61,109 @@
</f7-sheet>
</template>

<script>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import {
getItemByKeyValue,
getPrimaryValueBySecondaryValue
} from '@/lib/common.ts';
import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
export default {
props: [
'modelValue',
'primaryKeyField',
'primaryValueField',
'primaryTitleField',
'primaryTitleI18n',
'primaryHeaderField',
'primaryHeaderI18n',
'primaryFooterField',
'primaryFooterI18n',
'primaryIconField',
'primaryIconType',
'primaryColorField',
'primaryHiddenField',
'primarySubItemsField',
'secondaryKeyField',
'secondaryValueField',
'secondaryTitleField',
'secondaryTitleI18n',
'secondaryHeaderField',
'secondaryHeaderI18n',
'secondaryFooterField',
'secondaryFooterI18n',
'secondaryIconField',
'secondaryIconType',
'secondaryColorField',
'secondaryHiddenField',
'items',
'show'
],
emits: [
'update:modelValue',
'update:show'
],
data() {
const self = this;
return {
currentPrimaryValue: self.getPrimaryValueBySecondaryValue(self.modelValue),
currentSecondaryValue: self.modelValue
}
},
computed: {
selectedPrimaryItem() {
if (this.primaryValueField) {
return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
} else {
return this.currentPrimaryValue;
}
}
},
methods: {
onSheetOpen(event) {
this.currentPrimaryValue = this.getPrimaryValueBySecondaryValue(this.modelValue);
this.currentSecondaryValue = this.modelValue;
scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
},
onSheetClosed() {
this.close();
},
onPrimaryItemClicked(item) {
if (this.primaryValueField) {
this.currentPrimaryValue = item[this.primaryValueField];
} else {
this.currentPrimaryValue = item;
}
},
onSecondaryItemClicked(subItem) {
if (this.secondaryValueField) {
this.currentSecondaryValue = subItem[this.secondaryValueField];
} else {
this.currentSecondaryValue = subItem;
}
this.$emit('update:modelValue', this.currentSecondaryValue);
this.close();
},
isSecondarySelected(subItem) {
if (this.secondaryValueField) {
return this.currentSecondaryValue === subItem[this.secondaryValueField];
} else {
return this.currentSecondaryValue === subItem;
}
},
getPrimaryValueBySecondaryValue(secondaryValue) {
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
},
close() {
this.$emit('update:show', false);
}
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[];
show: boolean;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: unknown): void;
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
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);
}
function isSecondarySelected(subItem: unknown): boolean {
if (props.secondaryValueField) {
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() {
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;
}
}
function onSecondaryItemClicked(subItem: unknown): void {
if (props.secondaryValueField) {
currentSecondaryValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
} else {
currentSecondaryValue.value = subItem;
}
emit('update:modelValue', currentSecondaryValue.value);
close();
}
function onSheetOpen(event: { $el: Framework7Dom }): void {
currentPrimaryValue.value = getCurrentPrimaryValueBySecondaryValue(props.modelValue);
currentSecondaryValue.value = props.modelValue;
scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
}
function onSheetClosed() {
close();
}
</script>

Expand Down
4 changes: 2 additions & 2 deletions src/lib/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,7 +530,7 @@ export function selectInvert(filterItemIds: Record<string, boolean>, allItemsMap
}
}

export function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, Record<string, unknown>[]>, primarySubItemsField: string, secondaryValueField: string, secondaryHiddenField: string, secondaryValue: unknown): boolean {
export function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, Record<string, unknown>[]>, primarySubItemsField: string, secondaryValueField: string | undefined, secondaryHiddenField: string | undefined, secondaryValue: unknown): boolean {
for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
const secondaryItem = primaryItem[primarySubItemsField][i];

Expand All @@ -548,7 +548,7 @@ export function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, Recor
return false;
}

export function getPrimaryValueBySecondaryValue<T>(items: Record<string, Record<string, T>[]>[] | Record<string, Record<string, Record<string, T>[]>>, primarySubItemsField: string, primaryValueField: string, primaryHiddenField: string, secondaryValueField: string, secondaryHiddenField: string, secondaryValue: T): Record<string, T>[] | Record<string, Record<string, T>[]> | null {
export function getPrimaryValueBySecondaryValue<T>(items: Record<string, Record<string, T>[]>[] | Record<string, Record<string, Record<string, T>[]>>, primarySubItemsField: string | undefined, primaryValueField: string | undefined, primaryHiddenField: string | undefined, secondaryValueField: string | undefined, secondaryHiddenField: string | undefined, secondaryValue: T): Record<string, T>[] | Record<string, Record<string, T>[]> | null {
if (primarySubItemsField) {
if (isArray(items)) {
const arr = items as Record<string, Record<string, T>[]>[];
Expand Down
9 changes: 7 additions & 2 deletions src/locales/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ import { KnownErrorCode, SPECIFIED_API_NOT_FOUND_ERRORS, PARAMETERIZED_ERRORS }
import type { LatestExchangeRateResponse, LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';

import {
isDefined,
isObject,
isString,
isNumber,
Expand Down Expand Up @@ -478,8 +479,12 @@ export function useI18n() {
}

// public functions
function translateIf(text: string, isTranslate: boolean): string {
if (isTranslate) {
function translateIf(text: string | undefined, isTranslate: boolean): string | undefined {
if (!isDefined(text)) {
return undefined;
}

if (text && isTranslate) {
return t(text);
}

Expand Down

0 comments on commit 8ce871e

Please sign in to comment.