Manager

Back Back Up Advanced Editor

<template #actions>
        <BaseButton
          v-show="paymentStore.totalPayments"
          variant="primary-outline"
          @click="toggleFilter"
        >
          {{ $t('general.filter') }}
          <template #right="slotProps">
            <BaseIcon
              v-if="!showFilters"
              :class="slotProps.class"
              name="FilterIcon"
            />
            <BaseIcon v-else :class="slotProps.class" name="XIcon" />
          </template>
        </BaseButton>
      </template>
    </BasePageHeader>

<div v-show="!showEmptyScreen" class="relative table-container">
      <BaseTable
        ref="table"
        :data="fetchData"
        :columns="paymentColumns"
        :placeholder-count="paymentStore.totalPayments >= 20 ? 10 : 5"
        class="mt-10"
      >
        <template #cell-payment_date="{ row }">
          {{ row.data.formatted_payment_date }}
        </template>

<template #cell-payment_number="{ row }">
          <router-link
            :to="{
              path: `payments/${row.data.id}/view`,
            }"
            class="font-medium text-primary-500"
          >
            {{ row.data.payment_number }}
          </router-link>
        </template>

<template #cell-payment_mode="{ row }">
          <span>
            {{
              row.data.payment_method
                ? row.data.payment_method.name
                : $t('payments.not_selected')
            }}
          </span>
        </template>

<template #cell-invoice_number="{ row }">
          <span>
            {{
              row.data.invoice?.invoice_number
                ? row.data.invoice?.invoice_number
                : $t('payments.no_invoice')
            }}
          </span>
        </template>

<template #cell-actions="{ row }">
          <BaseDropdown>
            <template #activator>
              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
            </template>
            <router-link :to="`payments/${row.data.id}/view`">
              <BaseDropdownItem>
                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
                {{ $t('general.view') }}
              </BaseDropdownItem>
            </router-link>
          </BaseDropdown>
        </template>
      </BaseTable>
    </div>
  </BasePage>
</template>

const { tm, t } = useI18n()
let showFilters = ref(false)
let sortedBy = ref('created_at')
let isFetchingInitialData = ref(true)
let table = ref(null)
const filters = reactive({
  payment_mode: '',
  payment_number: '',
})

//Utils
const utils = inject('utils')

//Store
const route = useRoute()
const paymentStore = usePaymentStore()
const globalStore = useGlobalStore()

// Computed Props

const showEmptyScreen = computed(() => {
  return !paymentStore.totalPayments && !isFetchingInitialData.value
})

const currency = computed(() => {
  return globalStore.currency
})

// Payment Table columns Data

const paymentColumns = computed(() => {
  return [
    {
      key: 'payment_date',
      label: t('payments.date'),
      thClass: 'extra',
      tdClass: 'font-medium text-gray-900',
    },
    { key: 'payment_number', label: t('payments.payment_number') },
    { key: 'payment_mode', label: t('payments.payment_mode') },
    { key: 'invoice_number', label: t('invoices.invoice_number') },
    { key: 'amount', label: t('payments.amount') },
    {
      key: 'actions',
      label: '',
      tdClass: 'text-right text-sm font-medium',
      sortable: false,
    },
  ]
})

// Created

debouncedWatch(
  filters,
  () => {
    setFilters()
  },
  { debounce: 500 }
)

// Methods

async function searchPayment(search) {
  let res = await paymentStore.fetchPaymentModes(
    search,
    globalStore.companySlug
  )
  return res.data.data
}

async function fetchData({ page, filter, sort }) {
  let data = {
    payment_method_id:
      filters.payment_mode !== null ? filters.payment_mode : '',
    payment_number: filters.payment_number,
    orderByField: sort.fieldName || 'created_at',
    orderBy: sort.order || 'desc',
    page,
  }

isFetchingInitialData.value = true
  let response = await paymentStore.fetchPayments(data, globalStore.companySlug)

isFetchingInitialData.value = false

return {
    data: response.data.data,
    pagination: {
      totalPages: response.data.meta.last_page,
      currentPage: page,
      totalCount: response.data.meta.total,
      limit: 10,
    },
  }
}

function refreshTable() {
  table.value.refresh()
}

function setFilters() {
  refreshTable()
}

function clearFilter() {
  filters.customer = ''
  filters.payment_mode = ''
  filters.payment_number = ''
}

function toggleFilter() {
  if (showFilters.value) {
    clearFilter()
  }

showFilters.value = !showFilters.value
}
</script>