72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<template>
|
|
<MobileCardList
|
|
v-model:search="search"
|
|
:loading="loading"
|
|
:has-more="hasMore"
|
|
:show-empty="!loading && items.length === 0"
|
|
empty-text="کیف پولی یافت نشد"
|
|
search-placeholder="جستجو کیف پول"
|
|
show-refresh
|
|
@search="reload"
|
|
@refresh="reload"
|
|
@load-more="loadMore"
|
|
>
|
|
<WalletMobileListItem
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
:item="item"
|
|
:metals="catalogMetals"
|
|
@open="openSheet"
|
|
/>
|
|
</MobileCardList>
|
|
|
|
<WalletMobileDetailSheet
|
|
v-model:visible="sheetVisible"
|
|
:item="selectedItem"
|
|
:metals="catalogMetals"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getWalletTable } from '@/api/wallet'
|
|
import type { Wallet, WalletTableSums } from '@/model/wallet'
|
|
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
|
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
|
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
|
import type { TableInput, TableOutput } from '@core/type/baseTable'
|
|
import type { WalletMetalColumn } from '../hooks/walletColumns'
|
|
import WalletMobileDetailSheet from './WalletMobileDetailSheet.vue'
|
|
import WalletMobileListItem from './WalletMobileListItem.vue'
|
|
|
|
type WalletTableResponse = TableOutput<Wallet> & {
|
|
sums?: WalletTableSums
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'sums', sums: WalletTableResponse['sums']): void
|
|
}>()
|
|
|
|
const catalogMetals = ref<WalletMetalColumn[]>([])
|
|
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Wallet>()
|
|
|
|
async function fetchWallet(params: TableInput) {
|
|
const data = (await getWalletTable(params)) as WalletTableResponse
|
|
catalogMetals.value =
|
|
data?.sums?.metalBalances?.map((metal) => ({
|
|
metal_id: metal.metal_id,
|
|
label: metal.label
|
|
})) ?? []
|
|
emit('sums', data?.sums)
|
|
return data
|
|
}
|
|
|
|
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Wallet>({
|
|
fetchApi: fetchWallet,
|
|
onFetched: (rows) => syncSelectedItem(rows)
|
|
})
|
|
|
|
onMounted(() => reload())
|
|
|
|
defineExpose({ fetch, openSheet })
|
|
</script>
|