web/app/components/modal/Reservation.vue

<template>
  <div class="columns is-multiline is-mobile mx-0">
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">ID<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.id"
            disabled
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Mã giữ chỗ<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.code"
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Mã giao dịch<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.transaction__code"
          />
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label has-text-left">Người tạo<span class="has-text-danger ml-1">*</span></label>
        <div class="control">
          <input
            class="input"
            type="text"
            v-model="record.creator__fullname"
            disabled
          />
        </div>
      </div>
    </div>
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Ngày bắt đầu</label>
        <div class="control">
          <input
            class="input"
            type="date"
            v-model="record.date"
          />
        </div>
      </div>
    </div>
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Hạn thanh toán</label>
        <div class="control">
          <input
            class="input"
            type="date"
            v-model="record.due_date"
          />
        </div>
      </div>
    </div>
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Sô tiền đặt cọc</label>
        <div class="control">
          <input
            class="input"
            type="number"
            v-model="record.amount"
          />
        </div>
      </div>
    </div>
    <div class="column is-6">
      <div class="field">
        <label class="label has-text-left">Trạng thái</label>
        <div class="control">
          <SearchBox
            v-bind="{
              api: 'status',
              field: 'name',
              column: ['name'],
              optionid: record.approve_status,
              first: true,
            }"
            @option="selectedStatus"
          />
        </div>
      </div>
    </div>
    <div class="column is-12 pt-5">
      <a
        class="button is-primary has-text-white"
        @click="updateData()"
        >Lưu lại</a
      >
      <a
        class="button is-dark has-text-white ml-5"
        @click="updateData(true)"
        v-if="record.id"
        >Tạo mới</a
      >
      <a
        v-if="contractData"
        class="button is-info has-text-white ml-5"
        @click="openContractModal"
      >
        <span class="icon">
          <SvgIcon v-bind="{ name: 'contract.svg', type: 'primary', size: 18 }" />
        </span>
        <span>Xem hợp đồng</span>
      </a>
    </div>
  </div>
  <Modal
    @close="showmodal = undefined"
    v-bind="showmodal"
    @texteditor="updateText"
    @update="updateAttr"
    @dataevent="handleModalEvent"
    v-if="showmodal"
  />
</template>

<script setup>
const emit = defineEmits([]);
var props = defineProps({
  pagename: String,
  row: Object,
  api: String,
});

const { $copy, $resetNull, $insertrow, $updaterow, $getdata } = useNuxtApp();
var record = ref(props.row ? $copy(props.row) : {});
var showmodal = ref();
var vapi = props.api || "reservation";
var contractData = ref(null);

const loadContract = async () => {
  if (record.value.transaction__code) {
    try {
      contractData.value = await $getdata("contract", {
        first: true,
        filter: { transaction__code: record.value.transaction__code },
      });
    } catch (error) {
      console.error("Error loading contract:", error);
      contractData.value = null;
    }
  }
};

const contractModalConfig = computed(() => ({
  component: "application/Contract",
  title: "Hợp đồng",
  width: "90%",
  height: "90vh",
  vbind: {
    row: contractData.value,
    api: "transaction",
  },
}));

const openContractModal = () => {
  showmodal.value = contractModalConfig.value;
};

const handleModalEvent = (eventData) => {
  if (eventData?.data?.transaction) {
    contractData.value = { ...contractData.value, ...eventData.data };
  }
};

var selectedStatus = function (option) {
  record.value.approve_status = option.id;
};

var updateText = function (content) {
  record.value.vi = content;
};

var openEditor = function () {
  showmodal.value = {
    component: "common/TextEditor",
    vbind: { content: record.value.vi },
    title: "Text editor",
    width: "40%",
    height: "150px",
  };
};

var editDetail = function () {
  let detail = record.value.detail ? record.value.detail : {};
  showmodal.value = {
    component: "datatable/FieldAttribute",
    vbind: { field: detail, close: true },
    title: "Sửa thuộc tính",
    width: "40%",
    height: "150px",
  };
};

var updateAttr = function (detail) {
  record.value.detail = detail;
};

var updateData = async function (isNew) {
  let ele = record.value;
  if (ele.create_time === null) ele.create_time = new Date();
  ele = $resetNull(ele);
  if (isNew) delete ele.id;
  let result = ele.id
    ? await $updaterow(vapi, ele, undefined, props.pagename)
    : await $insertrow(vapi, ele, undefined, props.pagename);
  if (isNew) emit("close");

  await loadContract();
};

onMounted(() => {
  loadContract();
});

watch(
  () => record.value.transaction,
  () => {
    loadContract();
  },
);
</script>