GHHub/src/views/reservation/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, Modal, App } from 'antd';
import { useStore } from '@/stores/StoreContext.js';

const { Title } = Typography;
const { TextArea } = Input;

function Detail() {

  const confirmationListColumns = [
    {
      title: 'PCI_Changetext',
      dataIndex: 'PCI_Changetext',
    },
    {
      title: 'PCI_SendDate',
      dataIndex: 'PCI_SendDate',
    },
    {
      title: 'ConfirmPerson',
      dataIndex: 'ConfirmPerson',
    },
    {
      title: 'PCI_ConfirmText',
      dataIndex: 'PCI_ConfirmText',
    },
    {
      title: 'PCI_ConfirmDate',
      dataIndex: 'PCI_ConfirmDate',
    },
    {
      title: 'Action',
      render: confirmRender
    },
  ];
    
  function confirmRender(text, confirm) {
    return (
      <Button type="link" onClick={() => showConfirmModal(confirm)}>Confirm</Button>
    );
  }

  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [confirmText, setConfirmText] = useState('');
  const { notification } = App.useApp();
  const { reservationId } = useParams();
  const { reservationStore } = useStore();
  const [dataLoading, setDataLoading] = useState(false);
  const { reservationDetail, confirmationList } = reservationStore;

  const reservationUrl = 
    'https://view.officeapps.live.com/op/embed.aspx?wdPrint=false&wdHideGridlines=true&wdHideComments=true&src=' + 
    encodeURIComponent('https://www.chinahighlights.com/public/reservationW220420009.doc');

  const nameCardUrl = 
    'https://view.officeapps.live.com/op/embed.aspx?wdPrint=false&wdHideGridlines=true&wdHideComments=true&src=' + 
    encodeURIComponent('https://www.chinahighlights.com/public/NameCard.doc');

  const showConfirmModal = (confirm) => { 
    setIsModalOpen(true);
    setConfirmText(confirm.PCI_ConfirmText);
    reservationStore.editConfirmation(confirm);
    console.info(confirm);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    reservationStore.submitConfirmation(confirmText)
      .finally(() => {
        setIsModalOpen(false);
        setConfirmLoading(false);
      });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    setDataLoading(true);
    reservationStore.fetchReservation(reservationId)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setDataLoading(false);
      });
  }, [reservationId]);

  return (
    <>
    <Modal
        centered
        confirmLoading={confirmLoading}
        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
      >
        <Title level={4}>Confirm</Title>
        <TextArea
          value={confirmText}
          onChange={(e) => setConfirmText(e.target.value)}
          autoSize={{
            minRows: 3,
            maxRows: 5,
          }}
        />
      </Modal>
    <Space direction="vertical" style={{ width: '100%' }}>
    <Row gutter={{ md: 24 }}>
        <Col span={20}>
      <Title level={4}>Reference Number: {reservationDetail.referenceNumber}; Arrival date: {reservationDetail.arrivalDate}; Tour guide: {reservationDetail.tourGuide}</Title>
        </Col>
        <Col span={4}>
      <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={12} style={{height: '100%'}} >
        <iframe id="msdoc-iframe" title="msdoc-iframe" src={reservationUrl} frameborder="0" style={{ width: '100%', height: '600px' }}></iframe>
        </Col>
        <Col span={12} style={{height: '100%'}} >
        <iframe id="msdoc-iframe" title="msdoc-iframe" src={nameCardUrl} frameborder="0" style={{ width: '100%', height: '600px' }}></iframe>
        </Col>
      </Row>
      <Row>
        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
          <Title level={5}>Confirmation</Title>
          <Table 
            bordered
            loading={dataLoading}
            pagination={false}
            dataSource={confirmationList} columns={confirmationListColumns} 
          />
          </Space>      
        </Col>
      </Row>
    </Space>
    </>
  );
}

export default observer(Detail);