Initial commit

app/components/transaction/TransactionList.vue

@@ -0,0 +1,107 @@
+<script setup>
+import TransactionDetail from '@/components/transaction/TransactionDetail.vue';
+
+const props = defineProps({
+  transaction__code: String,
+});
+
+const { $exportpdf, $getdata, $snackbar, $store } = useNuxtApp();
+const { dealer} = $store;
+const txn = ref(null);
+const txndetails = ref(null);
+const showModal = ref(null);
+
+function openChangeCustomerModal() {
+  showModal.value = {
+    title: 'Đổi khách hàng', 
+    height: '40vh',
+    width: '50%',
+    component: 'transaction/ChangeCustomerModal',
+    vbind: { transactionId: txn.value.id }
+  }
+}
+
+function print() {
+  const fileName = `Giao-dich-${props.transaction__code}`;
+  const docId = 'print-area';
+  $exportpdf(docId, fileName, 'a4', 'landscape');
+  $snackbar('Đang xuất PDF...', { type: 'is-info' });
+}
+
+onMounted(async () => {
+  const fetchedTxn = await $getdata('transaction', { code: props.transaction__code }, undefined, true);
+  txn.value = fetchedTxn;
+  
+  const fetchedTxndetails = await $getdata('reservation', undefined, {
+    filter: {
+      transaction__code: props.transaction__code
+    },
+    sort: 'create_time',
+    values: 'id,code,date,amount,amount_remaining,amount_received,due_date,transaction,customer_old__fullname,customer_new__fullname,transaction__code,phase,phase__name,creator,creator__fullname,status,status__name,approver,approver__fullname,approve_time,create_time,update_time'
+  });
+  txndetails.value = fetchedTxndetails;
+});
+</script>
+<template>
+  <div id="print-area">
+    <!-- mt-1 because bug: print empty first page -->
+    <div class="columns mx-0 mt-1 mb-4">
+      <div class="column is-narrow is-flex is-align-items-center">
+        <p class="has-text-weight-semibold">{{ transaction__code }}</p>
+      </div>
+      <div class="column is-flex is-align-items-center">
+        <p>
+          <span>Giá hợp đồng: </span>
+          <span class="has-text-weight-semibold">{{ $numtoString(txn?.sale_price) }}</span>
+        </p>
+      </div>
+      <div class="column is-flex is-align-items-center">
+        <p>
+          <span>Đã thu: </span>
+          <span
+            class="has-text-weight-semibold"
+            style="color: hsl(120, 70%, 40%)"
+          >
+            {{ $numtoString(txn?.amount_received) }}
+          </span>
+        </p>
+      </div>
+      <div class="column is-flex is-align-items-center">
+        <p>
+          <span>Còn lại: </span>
+          <span
+            class="has-text-weight-semibold"
+            style="color: hsl(0, 50%, 50%)"
+          >
+            {{ $numtoString(txn?.amount_remain) }}
+          </span>
+        </p>
+      </div>
+      <div id="ignore" class="column is-narrow is-flex is-align-items-center is-gap-2">
+        <button 
+          v-if="txn?.phase === 4 && !dealer && $getEditRights('edit', { code: 'transaction', category: 'topmenu' })"
+          @click="openChangeCustomerModal" 
+          class="button is-link"
+        >
+          Đổi khách hàng
+        </button>
+        <button @click="print" class="button is-light">
+          In thông tin
+        </button>
+      </div>
+    </div>
+    <div class="is-flex is-flex-direction-column is-gap-4">
+      <TransactionDetail
+        v-for="(txndetail, i) in txndetails"
+        :key="txndetail.id"
+        :index="i"
+        :txndetail="txndetail"
+      />
+    </div>
+  </div>
+  <Modal 
+    v-if="showModal" 
+    v-bind="showModal" 
+    @close="showModal = undefined" 
+  />
+</template>