changes

app/components/orders/InvoiceRow.vue

@@ -0,0 +1,118 @@
+<script setup>
+const props = defineProps({
+  invoice: Object,
+});
+
+const { $dayjs, $shortenCurrency } = useNuxtApp();
+const showModal = ref();
+
+function openModal() {
+  showModal.value = {
+    component: "orders/SelectedOrder",
+    title: "Chi tiết đơn hàng",
+    width: "75%",
+    height: "500px",
+    vbind: {
+      invoice: props.invoice,
+    },
+  };
+}
+</script>
+<template>
+  <tr
+    class="is-clickable"
+    @click="openModal"
+  >
+    <td>
+      <div>
+        <p class="fs-15 font-semibold">{{ invoice.code }}</p>
+        <p class="has-text-grey">{{ invoice.staff__fullname }}</p>
+      </div>
+    </td>
+    <td>
+      <div>
+        <p>{{ invoice.customer_name }}</p>
+        <div class="is-flex is-gap-0.5 is-align-items-center mt-1 has-text-grey">
+          <Icon
+            name="material-symbols:call-outline-rounded"
+            :size="15"
+          />
+          <span class="fs-12">{{ invoice.customer_phone }}</span>
+        </div>
+      </div>
+    </td>
+    <td class="has-text-right">
+      <div>
+        <p class="fs-14 font-semibold">{{ $shortenCurrency(invoice.total_amount) }}</p>
+        <p class="has-text-grey">{{ invoice.product_amount }} SP</p>
+      </div>
+    </td>
+    <td class="has-text-centered">
+      <span
+        :class="['tag rounded-full', `has-background-${invoice.status__color}-80 has-text-${invoice.status__color}-25`]"
+      >
+        {{ invoice.status }}
+      </span>
+    </td>
+    <td>
+      <p :class="`has-text-${invoice.payment_status__color}-40`">
+        {{ invoice.payment_status__name }}
+      </p>
+    </td>
+    <td>
+      <p :class="`has-text-${invoice.delivery_status__color}-40`">
+        {{ invoice.delivery__status }}
+      </p>
+    </td>
+    <td>
+      <div>
+        <div class="is-flex is-gap-0.5">
+          <Icon
+            :size="18"
+            name="material-symbols:calendar-today-outline-rounded"
+          />
+          <span>{{ $dayjs(invoice.create_time).format("L") }}</span>
+        </div>
+        <p class="has-text-grey fs-12">
+          {{ $dayjs(invoice.create_time).format("HH:mm") }}
+        </p>
+      </div>
+    </td>
+    <td>
+      <button
+        v-if="invoice.status__name !== 'Hoàn thành'"
+        :class="[
+          'button fs-12 has-text-white rounded-lg',
+          invoice.status__name === 'Nháp'
+            ? 'is-primary'
+            : invoice.status__name === 'Đã xác nhận'
+              ? 'is-orange'
+              : 'is-success',
+        ]"
+      >
+        {{
+          invoice.status__name === "Nháp"
+            ? "Xác nhận"
+            : invoice.status__name === "Đã xác nhận"
+              ? "Giao hàng"
+              : "Hoàn thành"
+        }}
+      </button>
+    </td>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = null"
+    />
+  </tr>
+</template>
+<style scoped>
+tr.is-selected {
+  --bulma-table-row-active-background-color: var(--bulma-primary-95);
+  color: unset;
+}
+td {
+  vertical-align: middle;
+  --bulma-table-cell-padding: 0.75em;
+}
+</style>