85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<template>
|
|
<div class="dtxn">
|
|
<div class="dtxn__container">
|
|
<DesktopPageTopbar title="تراکنشها" />
|
|
|
|
<div class="dtxn-filters">
|
|
<div class="dtxn-filters__label">
|
|
<BasicIcon icon="vuesax-linear:filter" size="16" />
|
|
<span>فیلتر تاریخ:</span>
|
|
</div>
|
|
<BaseDatePicker
|
|
v-model:value="dateFilter"
|
|
class="dtxn-filters__date"
|
|
placeholder="تاریخ"
|
|
size="large"
|
|
/>
|
|
<BasicButton type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
|
|
<BasicButton v-if="dateFilter" @click="clearFilter">حذف فیلتر</BasicButton>
|
|
</div>
|
|
|
|
<div ref="el" :class="loading ? 'min-h-[40vh]' : ''" class="mt-5">
|
|
<div v-if="!loading" class="dtxn-list">
|
|
<list-anim>
|
|
<Item
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
:item="item"
|
|
variant="desktop"
|
|
/>
|
|
</list-anim>
|
|
<div :ref="bindDesktopObserver" class="w-full opacity-0 relative">
|
|
در حال بارگذاری
|
|
</div>
|
|
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
|
|
</div>
|
|
|
|
<template v-else>
|
|
<TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
|
|
</template>
|
|
|
|
<div v-if="items.length <= 0 && !loading" class="dtxn-empty">
|
|
<DotLottieVue
|
|
class="w-44 h-44"
|
|
autoplay
|
|
src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
|
|
/>
|
|
<p class="dtxn-empty__text">{{ emptyText }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { loading, loadingMore } from '@/utils'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
|
|
import ListAnim from '@/components/ListAnim.vue'
|
|
import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
|
import Item from '../components/Item.vue'
|
|
import { useTransactionsPageContext } from '../composables/useTransactionsPage'
|
|
|
|
const el = ref<HTMLElement | null>(null)
|
|
|
|
const {
|
|
items,
|
|
dateFilter,
|
|
emptyText,
|
|
applyFilter,
|
|
reloadTable,
|
|
bindDesktopObserver,
|
|
} = useTransactionsPageContext()
|
|
|
|
async function clearFilter() {
|
|
dateFilter.value = undefined
|
|
await reloadTable()
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" src="./styles/desktop-transactions.less"></style>
|