ghatreh_user/src/views/base/transactions/index.vue

<template>
  <div>
    <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
    <div
      class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
    >
      <div>لیست تراکنش ها</div>
      <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
    </div>
    <!--    <a-spin :spinning="loading">-->
    <div
      ref="el"
      :class="loading ? 'h-screen' : ''"
      class="px-3 pt-16 pb-4 overflow-y-scroll"
      style="max-height: calc(100vh - 50px)"
    >
      <!--      <div v-for="item in items">ss</div>-->
      <list-anim v-if="!loading">
        <Item v-for="item in items" :key="item.id" :item="item" />
        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
      </list-anim>
      <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
      <div v-if="items.length <= 0" class="flex flex-col items-center justify-center h-80vh">
        <DotLottieVue
          class="w-11rem h-11rem"
          autoplay
          src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
        />
        <div class="font-bold">تراکنشی موجود نیست</div>
      </div>
    </div>
    <!--    </a-spin>-->
    <BasicActionSheet v-model:show="showFilter">
      <div class="font-bold text-lg">فیلتر</div>
      <div class="pb-20 mt-5">
        <a-form-item class="w-full gap-2 !flex-col" label="تاریخ" name="password">
          <BaseDatePicker v-model:value="dateFilter" class="w-full" size="large" />
        </a-form-item>
        <BasicButton class="w-full mt-5" type="primary" @click="applyFilter"
          >اعمال فیلتر</BasicButton
        >
        <BasicButton class="w-full mt-2" @click="showFilter = false">بازگشت</BasicButton>
      </div>
    </BasicActionSheet>
  </div>
</template>

<script lang="ts" setup>
import Item from './components/Item.vue'
/*import {lengthValidation, required} from "@/utils/inputRules";
import {loading} from "@/utils";
import BasicButton from "@/components/BasicPacks/BasicButton.vue";
import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
import BasicInput from "@/components/BasicPacks/BasicInput.vue";*/
import { onMounted, ref } from 'vue'
import type { TableEngineInput, TableOutput } from '@/models/table'
import { loading, loadingMore } from '@/utils'
// import {getOrders} from "@/api/order";
import { getTransactionTable } from '@/api/transaction'
import type { Transaction } from '@/models/transaction'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
import { useInfiniteScroll, useScroll } from '@vueuse/core'
import ListAnim from '@/components/ListAnim.vue'
import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
import img from "@/assets/img/user_ly1.svg";

const pagination = ref<TableEngineInput>({ filters: [], limit: 7, page: 0 })
const items = ref<Transaction[]>([])
const tableOutput = ref<TableOutput<Transaction> | null>(null)
const showFilter = ref<boolean>(false)
const dateFilter = ref<string>()
const el = ref()
const { y } = useScroll(el)

async function initTable() {
  try {
    if (dateFilter.value) {
      pagination.value.filters = []
      pagination.value.filters.push({
        field: 'created_at',
        cr: 'and',
        type: 'date',
        op: 'eq',
        value: dateFilter.value
      })
    } else {
      pagination.value.filters = []
    }
    pagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
    tableOutput.value = await getTransactionTable(pagination.value)
    items.value.push(...tableOutput.value.rows)
    // console.log(tableOutput.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

async function applyFilter() {
  pagination.value.page = 0
  items.value = []
  await initTable()
  showFilter.value = false
}

onMounted(() => {
  initTable()
})

useInfiniteScroll(
  el,
  async () => {
    // load more
    // console.log('salamss')
    if (
      tableOutput.value &&
      (pagination.value.page + 1) * pagination.value.limit < tableOutput.value.query.total
    ) {
      // console.log('gfgf')
      pagination.value.page++
      await initTable()
    }
  },
  { distance: 12 }
)
/*const items = [
  {
    isUp: true,
    hasTransition: true
  },
  {
    isUp: false,
    hasTransition: false
  },
  {
    isUp: true,
    hasTransition: false
  },
  {
    isUp: true,
    hasTransition: true
  },
  {
    isUp: false,
    hasTransition: false
  },
  {
    isUp: true,
    hasTransition: false
  },
  {
    isUp: true,
    hasTransition: true
  },
  {
    isUp: true,
    hasTransition: true
  },
  {
    isUp: false,
    hasTransition: false
  },
  {
    isUp: true,
    hasTransition: true
  },
]*/
</script>

<style scoped lang="less">
.transaction-list {
  position: fixed;
  right: 0;
  left: 0;
  @media screen and (min-width: 426px) {
    width: 426px;
    left: auto;
    right: auto;
  }
}
</style>