GHHub/src/views/reservation/Newest.jsx

import { NavLink } 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, DatePicker, Radio, Modal, App } from 'antd';
import { useStore } from '@/stores/StoreContext.js';

const { Title } = Typography;

function Newest() {
  const reservationListColumns = [
    {
      title: 'Reference number',
      dataIndex: 'referenceNumber',
      key: 'Reference number',
      render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
    },
    {
      title: 'Arrival date',
      dataIndex: 'arrivalDate',
      key: 'Arrival date',
    },
    {
      title: 'Pax',
      key: 'Pax',
      dataIndex: 'pax'
    },
    {
      title: 'Status',
      key: 'Status',
      dataIndex: 'status'
    },
    {
      title: 'Reservation date',
      key: 'Reservation date',
      dataIndex: 'reservationDate'
    },
    {
      title: 'Guide',
      key: 'Guide',
      dataIndex: 'guide',
      render: guideRender
    },
  ];
  
  function guideRender(text, record) {
    if (record.guide === '') {
      return (
        <Space size="middle">
          <Button type="link" onClick={() => showModal()}>Fill in</Button>
        </Space>
      );
    } else {
      return (
        <Space size="middle">
          <span>{record.guide}</span>
          <Button type="link" onClick={() => showModal()}>Modify</Button>
        </Space>
      );
    }
  }
  const { reservationStore } = useStore();
  const { reservationList, reservationPage } = reservationStore;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedDateRange, onDateRangeChange] = useState([]);
  const [referenceNo, onNumberChange] = useState('');
  const [tableLoading, setTableLoading] = useState(false);
  const { notification } = App.useApp();

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  
  const onSearchClick = (current) => {    
    setTableLoading(true);
    reservationStore.fetchReservationList(current, referenceNo, selectedDateRange[0], selectedDateRange[1])
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setTableLoading(false);
      });
  }

  return (
    <>
      <Modal
        centered
        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <Row>
            <Col span={24}>
              <Table
                bordered
                pagination={{
                  hideOnSinglePage: true
                }}
                columns={[
                  {
                    title: 'City',
                    dataIndex: 'city',
                    key: 'city'
                  },
                  {
                    title: 'Tour Guide',
                    dataIndex: 'guide',
                    key: 'guide'
                  }
                ]}
                dataSource={[
                  {
                    city: 'Guilin',
                    guide: 'Giffigan'
                  }
                ]}
              />
            </Col>
          </Row>
          <Row gutter={{ md: 24 }}>
            <Col span={24}>
              <Title level={5}>Guide</Title>
            </Col>
          </Row>
          
        <Row gutter={{ md: 24 }}>
          <Col span={16}>
            <Input placeholder="Guide" />
          </Col>
          <Col span={8}>
            <Button type='primary' onClick={() => {}}>Search</Button>
          </Col>
        </Row>
          <Row gutter={{ md: 24 }}>
            <Col span={24}>
              <Radio.Group options={[
                {
                  label: 'Jim',
                  value: '1',
                },
                {
                  label: 'Giffigan',
                  value: '2',
                },
                {
                  label: 'Herry',
                  value: '3',
                },
                {
                  label: 'Giffigan',
                  value: '4',
                },
                {
                  label: 'Herry',
                  value: '5',
                },
                {
                  label: 'Giffigan',
                  value: '6',
                },
                {
                  label: 'Herry',
                  value: '7',
                },
              ]} />
            </Col>
          </Row>
        </Space>
      </Modal>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Title level={3}>Newest Reservations</Title>
        <Row gutter={{ md: 24 }}>
          <Col span={4}>
            <Input placeholder="Reference number" onChange={(e) => {onNumberChange(e.target.value)}} />
          </Col>
          <Col span={6}>
            <Space direction="horizontal">
              Arrival Date
              <DatePicker.RangePicker
                allowClear={true}
                inputReadOnly={true}
                placeholder={['From', 'Thru']}
                onChange={(date, dateRange) => { onDateRangeChange(dateRange)}}
              />
            </Space>
          </Col>
          <Col span={14}>
            <Button type='primary' onClick={() => onSearchClick(1)}>Search</Button>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Table
              title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
              bordered
              loading={tableLoading}
              pagination={{
                position: ['bottomCenter'],
                current: reservationPage.current,
                pageSize: reservationPage.size,
                total: reservationPage.total,
                simple: true
              }}
              onChange={(pagination, filters, sorter, extra) => {onSearchClick(pagination.current);}}
              columns={reservationListColumns} dataSource={toJS(reservationList)}
            />
          </Col>
        </Row>
      </Space>
    </>
  );
}

export default observer(Newest);