changes

app/components/orders/OrdersTable.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { pull } from "es-toolkit";
+import { useInvoices } from "~/components/orders/composables/useInvoices";
 import InvoiceRow from "~/components/orders/InvoiceRow.vue";
 import OrdersKanban from "~/components/orders/OrdersKanban.vue";
 
@@ -7,8 +8,9 @@ const props = defineProps({
   viewMode: String,
 });
 
-const { $findapi, $getapi, $dayjs } = useNuxtApp();
-const { invoices } = inject("orders");
+const { $getdata, $dayjs } = useNuxtApp();
+const { invoices, isPending } = useInvoices();
+const store = useStore();
 
 const statuses = [
   {
@@ -33,15 +35,10 @@ const statuses = [
   },
 ];
 
-const paymentStatuses = ref([]);
 const employees = ref([]);
 
 onMounted(async () => {
-  const apis = $findapi(["Payment_Status", "Staff"]);
-  const [paymentStatusRes, staffRes] = await $getapi(apis);
-
-  paymentStatuses.value = paymentStatusRes.data.rows || [];
-  employees.value = staffRes.data.rows || [];
+  employees.value = await $getdata("Staff");
 });
 
 const input = ref();
@@ -65,7 +62,7 @@ const filteredInvoices = computed(() => {
 
   const filteredByStatuses = filteredByInput.filter((order) => {
     if (selectedStatuses.value.length === 0) return true;
-    return selectedStatuses.value.includes(order.status);
+    return selectedStatuses.value.includes(order.invoice_status);
   });
 
   const filteredByPaymentStatuses = filteredByStatuses.filter((order) => {
@@ -148,7 +145,7 @@ function toggleStatus(id) {
             <select v-model="selectedPaymentStatus">
               <option :value="undefined">Thanh toán</option>
               <option
-                v-for="paymentStatus in paymentStatuses"
+                v-for="paymentStatus in store.Payment_Status"
                 :key="paymentStatus.id"
                 :value="paymentStatus.id"
               >
@@ -171,7 +168,7 @@ function toggleStatus(id) {
         </div>
         <div class="is-flex is-gap-1 mt-3">
           <button
-            v-for="status in statuses"
+            v-for="status in store.Invoice_Status"
             :key="status.id"
             :class="[
               'tag fs-13 is-rounded',
@@ -218,6 +215,15 @@ function toggleStatus(id) {
             </tr>
           </thead>
           <tbody>
+            <tr v-if="isPending">
+              <td colspan="8">
+                <Icon
+                  name="svg-spinners:180-ring-with-bg"
+                  :size="20"
+                  class="has-text-primary is-block mx-auto"
+                />
+              </td>
+            </tr>
             <InvoiceRow
               v-for="invoice in filteredInvoices"
               :key="invoice.id"