migrate two column list item selection sheet to composition API and typescript
This commit is contained in:
MaysWind
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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';
|
||||
import { type Framework7Dom, 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;
|
||||
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;
|
||||
}>();
|
||||
|
||||
return {
|
||||
currentPrimaryValue: self.getPrimaryValueBySecondaryValue(self.modelValue),
|
||||
currentSecondaryValue: self.modelValue
|
||||
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);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedPrimaryItem() {
|
||||
if (this.primaryValueField) {
|
||||
return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
|
||||
|
||||
function isSecondarySelected(subItem: unknown): boolean {
|
||||
if (props.secondaryValueField) {
|
||||
return currentSecondaryValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
|
||||
} else {
|
||||
return this.currentPrimaryValue;
|
||||
return currentSecondaryValue.value === subItem;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen(event) {
|
||||
this.currentPrimaryValue = this.getPrimaryValueBySecondaryValue(this.modelValue);
|
||||
this.currentSecondaryValue = this.modelValue;
|
||||
|
||||
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');
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
function onSheetClosed() {
|
||||
close();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+2
-2
@@ -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];
|
||||
|
||||
@@ -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>[]>[];
|
||||
|
||||
@@ -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,
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user