From dac6f590188e7cff21ab47caefeb7668a3be653a Mon Sep 17 00:00:00 2001 From: Baghaztra Date: Wed, 24 Sep 2025 15:50:22 +0700 Subject: [PATCH] [Update] Search bersadarkan nama --- app/Http/Controllers/TransaksiController.php | 13 +- resources/js/components/RiwayatTransaksi.vue | 152 ++++++------------- 2 files changed, 59 insertions(+), 106 deletions(-) diff --git a/app/Http/Controllers/TransaksiController.php b/app/Http/Controllers/TransaksiController.php index eff0b59..931504d 100644 --- a/app/Http/Controllers/TransaksiController.php +++ b/app/Http/Controllers/TransaksiController.php @@ -12,13 +12,13 @@ use Illuminate\Support\Facades\DB; class TransaksiController extends Controller { - // List semua transaksi public function index(Request $request) { $limit = $request->query('limit', 10); $page = $request->query('page', 1); $startDate = $request->query('start_date'); $endDate = $request->query('end_date'); + $search = $request->query('search'); $query = Transaksi::with(['kasir', 'sales', 'itemTransaksi.produk']); @@ -35,10 +35,15 @@ class TransaksiController extends Controller $query->whereDate('created_at', $today); } - // Order by latest - $query->latest(); + // Search berdasarkan kode transaksi atau nama pelanggan + if ($search) { + $query->where(function ($q) use ($search) { + $q->where('kode_transaksi', 'like', '%' . $search . '%') + ->orWhere('nama_pembeli', 'like', '%' . $search . '%'); + }); + } - // Pagination + $query->latest(); $transaksi = $query->paginate($limit, ['*'], 'page', $page); // Transform data diff --git a/resources/js/components/RiwayatTransaksi.vue b/resources/js/components/RiwayatTransaksi.vue index 65172a4..b70b7ec 100644 --- a/resources/js/components/RiwayatTransaksi.vue +++ b/resources/js/components/RiwayatTransaksi.vue @@ -4,37 +4,22 @@
-
+
-
- +
+
- -
- +
- +
- - -
-
@@ -61,10 +46,10 @@ - @@ -82,7 +67,7 @@ - + @@ -99,7 +84,7 @@
-
@@ -122,32 +107,31 @@ - {{ trx.kode_transaksi }} + {{ trx.kode_transaksi }} + - {{ trx.nama_pembeli }} + {{ trx.nama_pembeli || '-' }} - Rp{{ (trx.total_harga || 0).toLocaleString() }} + Rp{{ (trx.total_harga || 0).toLocaleString('id-ID') }} - {{ trx.total_items || 0 }} + {{ trx.total_items || 0 }} - @@ -159,34 +143,29 @@
-
+
Menampilkan {{ pagination.from }} - {{ pagination.to }} dari {{ pagination.total }} transaksi ({{ filteredTransaksi.length }} sesuai filter)
- +
- - + Halaman {{ pagination.current_page }} dari {{ pagination.last_page }} - - @@ -194,11 +173,7 @@
- +
@@ -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', {