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', { transaction__code: record.value.transaction__code }, undefined, true)
    } 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>