Menampilkan {{ pagination.from }} - {{ pagination.to }} dari {{ pagination.total }} transaksi
({{ filteredTransaksi.length }} sesuai filter)
-
+
-
-
+
@@ -214,7 +189,6 @@
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import DatePicker from '@/components/DatePicker.vue'
-import InputField from '@/components/InputField.vue'
import StrukView from '@/components/StrukView.vue'
// Props & Emits
@@ -251,38 +225,29 @@ const selectedTransaksi = ref({})
// Computed
const filteredTransaksi = computed(() => {
let filtered = [...transaksi.value]
-
- // Date filter
+
if (dateRange.value.start && dateRange.value.end) {
const startDate = new Date(dateRange.value.start)
const endDate = new Date(dateRange.value.end)
endDate.setHours(23, 59, 59, 999)
-
+
filtered = filtered.filter(trx => {
const trxDate = new Date(trx.created_at)
return trxDate >= startDate && trxDate <= endDate
})
}
-
+
// Status filter
if (statusDipilih.value) {
filtered = filtered.filter(trx => trx.status === statusDipilih.value)
}
-
+
// Payment method filter
if (pembayaranDipilih.value) {
filtered = filtered.filter(trx => trx.metode_pembayaran === pembayaranDipilih.value)
}
-
- // Search filter
- if (searchQuery.value) {
- const query = searchQuery.value.toLowerCase()
- filtered = filtered.filter(trx =>
- trx.kode_transaksi.toLowerCase().includes(query) ||
- (trx.nama_pelanggan && trx.nama_pelanggan.toLowerCase().includes(query))
- )
- }
-
+
+ // Removed searchQuery filter to prevent client-side filtering
return filtered
})
@@ -290,26 +255,26 @@ const sortedTransaksi = computed(() => {
return [...filteredTransaksi.value].sort((a, b) => {
let aVal = a[sortField.value] || ''
let bVal = b[sortField.value] || ''
-
+
// Handle numeric fields
if (['total_harga', 'total_items'].includes(sortField.value)) {
aVal = parseFloat(aVal) || 0
bVal = parseFloat(bVal) || 0
}
-
+
if (aVal < bVal) return sortDirection.value === 'asc' ? -1 : 1
if (aVal > bVal) return sortDirection.value === 'asc' ? 1 : -1
return 0
})
})
-const tableColumns = computed(() => 7)
+const tableColumns = computed(() => 6)
// Methods
const fetchTransaksi = async (page = 1) => {
try {
loading.value = true
-
+
const params = new URLSearchParams({
page,
limit: 10,
@@ -328,12 +293,9 @@ const fetchTransaksi = async (page = 1) => {
transaksi.value = response.data.data || []
pagination.value = response.data.pagination || null
- console.log("trans:", transaksi.value);
-
-
+ console.log("data", transaksi.value)
} catch (error) {
console.error('Error fetching transaksi:', error)
- alert('Gagal memuat data transaksi: ' + (error.response?.data?.message || error.message))
transaksi.value = []
} finally {
loading.value = false
@@ -347,12 +309,8 @@ const handleDateChange = (newRange) => {
}
const handleSearch = () => {
- // Debounce search (optional)
- clearTimeout(window.searchTimeout)
- window.searchTimeout = setTimeout(() => {
- pagination.value = null
- fetchTransaksi(1)
- }, 300)
+ pagination.value = null
+ fetchTransaksi(1)
}
const handleSort = (field) => {
@@ -362,13 +320,13 @@ const handleSort = (field) => {
sortField.value = field
sortDirection.value = 'asc'
}
-
+
fetchTransaksi(1)
}
const getSortIcon = (field) => {
if (sortField.value !== field) return 'fas fa-sort text-D/40'
-
+
if (sortDirection.value === 'asc') return 'fas fa-sort-up text-D'
return 'fas fa-sort-down text-D'
}
@@ -383,7 +341,7 @@ const lihatDetail = async (trx) => {
try {
isDetailLoading.value = true
selectedTransaksi.value = trx // Show loading state first
-
+
const response = await axios.get(`/api/transaksi/${trx.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`
@@ -395,7 +353,6 @@ const lihatDetail = async (trx) => {
total_items: response.data.itemTransaksi?.length || 0
}
isDetailOpen.value = true
-
} catch (error) {
console.error('Error fetching detail:', error)
alert('Gagal memuat detail transaksi: ' + (error.response?.data?.message || error.message))
@@ -409,15 +366,6 @@ const closeDetail = () => {
selectedTransaksi.value = {}
}
-const handleResetFilter = () => {
- const today = new Date().toISOString().split('T')[0]
- dateRange.value = { start: today, end: today }
- statusDipilih.value = ''
- pembayaranDipilih.value = ''
- searchQuery.value = ''
- fetchTransaksi(1)
-}
-
// Helper Functions
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString('id-ID', {