Merge pull request #186 from mchev/issue_181

Fix table data not refreshing properly (keys)

app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php

@@ -21,12 +21,11 @@ class InvoicesController extends Controller
     {
         $this->authorize('viewAny', Invoice::class);
 
-        $limit = $request->has('limit') ? $request->limit : 10;
+        $limit = $request->input('limit', 10);
 
         $invoices = Invoice::whereCompany()
-            ->join('customers', 'customers.id', '=', 'invoices.customer_id')
             ->applyFilters($request->all())
-            ->select('invoices.*', 'customers.name')
+            ->with('customer')
             ->latest()
             ->paginateData($limit);
 

app/Models/Invoice.php

@@ -248,53 +248,34 @@ class Invoice extends Model implements HasMedia
 
     public function scopeApplyFilters($query, array $filters)
     {
-        $filters = collect($filters);
+        $filters = collect($filters)->filter()->all();
 
-        if ($filters->get('search')) {
-            $query->whereSearch($filters->get('search'));
-        }
-
-        if ($filters->get('status')) {
-            if (
-                $filters->get('status') == self::STATUS_UNPAID ||
-                $filters->get('status') == self::STATUS_PARTIALLY_PAID ||
-                $filters->get('status') == self::STATUS_PAID
-            ) {
-                $query->wherePaidStatus($filters->get('status'));
-            } elseif ($filters->get('status') == 'DUE') {
-                $query->whereDueStatus($filters->get('status'));
-            } else {
-                $query->whereStatus($filters->get('status'));
-            }
-        }
-
-        if ($filters->get('paid_status')) {
-            $query->wherePaidStatus($filters->get('status'));
-        }
-
-        if ($filters->get('invoice_id')) {
-            $query->whereInvoice($filters->get('invoice_id'));
-        }
-
-        if ($filters->get('invoice_number')) {
-            $query->whereInvoiceNumber($filters->get('invoice_number'));
-        }
-
-        if ($filters->get('from_date') && $filters->get('to_date')) {
-            $start = Carbon::createFromFormat('Y-m-d', $filters->get('from_date'));
-            $end = Carbon::createFromFormat('Y-m-d', $filters->get('to_date'));
+        return $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->whereSearch($search);
+        })->when($filters['status'] ?? null, function ($query, $status) {
+            match ($status) {
+                self::STATUS_UNPAID, self::STATUS_PARTIALLY_PAID, self::STATUS_PAID => $query->wherePaidStatus($status),
+                'DUE' => $query->whereDueStatus($status),
+                default => $query->whereStatus($status),
+            };
+        })->when($filters['paid_status'] ?? null, function ($query, $paidStatus) {
+            $query->wherePaidStatus($paidStatus);
+        })->when($filters['invoice_id'] ?? null, function ($query, $invoiceId) {
+            $query->whereInvoice($invoiceId);
+        })->when($filters['invoice_number'] ?? null, function ($query, $invoiceNumber) {
+            $query->whereInvoiceNumber($invoiceNumber);
+        })->when(($filters['from_date'] ?? null) && ($filters['to_date'] ?? null), function ($query) use ($filters) {
+            $start = Carbon::parse($filters['from_date']);
+            $end = Carbon::parse($filters['to_date']);
             $query->invoicesBetween($start, $end);
-        }
-
-        if ($filters->get('customer_id')) {
-            $query->whereCustomer($filters->get('customer_id'));
-        }
-
-        if ($filters->get('orderByField') || $filters->get('orderBy')) {
-            $field = $filters->get('orderByField') ? $filters->get('orderByField') : 'sequence_number';
-            $orderBy = $filters->get('orderBy') ? $filters->get('orderBy') : 'desc';
-            $query->whereOrder($field, $orderBy);
-        }
+        })->when($filters['customer_id'] ?? null, function ($query, $customerId) {
+            $query->where('customer_id', $customerId);
+        })->when($filters['orderByField'] ?? null, function ($query, $orderByField) use ($filters) {
+            $orderBy = $filters['orderBy'] ?? 'desc';
+            $query->orderBy($orderByField, $orderBy);
+        }, function ($query) {
+            $query->orderBy('sequence_number', 'desc');
+        });
     }
 
     public function scopeWhereInvoice($query, $invoice_id)

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "test": "eslint ./resources/scripts --ext .js,.vue"

resources/scripts/admin/views/estimates/Index.vue

@@ -174,6 +174,7 @@
         :data="fetchData"
         :columns="estimateColumns"
         :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
+        :key="tableKey"
         class="mt-10"
       >
         <template #header>
@@ -256,6 +257,7 @@ const dialogStore = useDialogStore()
 const userStore = useUserStore()
 
 const tableComponent = ref(null)
+const tableKey = ref(0)
 const { t } = useI18n()
 const showFilters = ref(false)
 const status = ref([
@@ -408,6 +410,8 @@ function setFilters() {
     state.selectAllField = false
   })
 
+  tableKey.value += 1
+
   refreshTable()
 }
 

resources/scripts/admin/views/invoices/Index.vue

@@ -172,6 +172,7 @@
         :data="fetchData"
         :columns="invoiceColumns"
         :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
+        :key="tableKey"
         class="mt-10"
       >
         <!-- Select All Checkbox -->
@@ -288,6 +289,7 @@ const { t } = useI18n()
 // Local State
 const utils = inject('$utils')
 const table = ref(null)
+const tableKey = ref(0)
 const showFilters = ref(false)
 
 const status = ref([
@@ -416,9 +418,12 @@ async function fetchData({ page, filter, sort }) {
     page,
   }
 
+  console.log(data)
+
   isRequestOngoing.value = true
 
   let response = await invoiceStore.fetchInvoices(data)
+  console.log('API response:', response.data.data)
 
   isRequestOngoing.value = false
 
@@ -464,6 +469,8 @@ function setFilters() {
     state.selectAllField = false
   })
 
+  tableKey.value += 1
+
   refreshTable()
 }
 

resources/scripts/components/base/base-table/BaseTable.vue

@@ -188,7 +188,7 @@ const props = defineProps({
   },
 })
 
-let rows = reactive([])
+const rows = ref([])
 let isLoading = ref(false)
 
 let tableColumns = reactive(props.columns.map((column) => new Column(column)))
@@ -339,14 +339,13 @@ function lodashGet(array, key) {
   return get(array, key)
 }
 
-if (usesLocalData.value) {
-  watch(
-    () => props.data,
-    () => {
-      mapDataToRows()
-    }
-  )
-}
+watch(
+  () => props.data,
+  () => {
+    mapDataToRows()
+  },
+  { deep: true }
+)
 
 onMounted(async () => {
   await mapDataToRows()