GHHub/src/views/reservation/Newest.jsx

import { NavLink, useLocation } from "react-router-dom";
import { useState, useEffect } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd';
import dayjs from "dayjs";
import { useStore } from '@/stores/StoreContext.js';
import { formatDate, isEmpty } from "@/utils/commons";
import { DATE_PRESETS } from "@/config";
import { formatDate, isNotEmpty } from "@/utils/commons";

const { Title } = Typography;

function Newest() {
  const reservationListColumns = [
    {
      title: 'Reference number',
      dataIndex: 'referenceNumber',
      key: 'Reference number',
      render: (text, record) => {
        const requiredHighlight = dayjs(record.arrivalDate).add(2, 'day').isBefore(dayjs(), 'day') && isEmpty(record.guide);
        const linkClassName = requiredHighlight ? 'reservation-highlight' : '';
        return (
          <NavLink className={linkClassName} to={`/reservation/${record.reservationId}`}>{text}</NavLink>
        )
      },
    },
    {
      title: 'Arrival date',
      dataIndex: 'arrivalDate',
      key: 'Arrival date',
			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
    },
    {
      title: 'Pax',
      key: 'Pax',
      dataIndex: 'pax'
    },
    {
      title: 'Status',
      key: 'Status',
      dataIndex: 'status'
    },
    {
      title: 'Res. sending date',
      key: 'Reservation date',
      dataIndex: 'reservationDate',
			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
    },
    {
      title: 'Guide',
      key: 'Guide',
      dataIndex: 'guide',
      render: guideRender
    },
  ];
  
  function guideRender(text, reservation) {
    if (reservation.guide === '') {
      return (
        <Space size="middle">
          <Button type="link" onClick={() => showCityGuideModal(reservation)}>Add</Button>
        </Space>
      );
    } else {
      return (
        <Space size="middle">
          <span>{reservation.guide}</span>
          <Button type="link" onClick={() => showCityGuideModal(reservation)}>Edit</Button>
        </Space>
      );
    }
  }

  function cityGuideRender(text, city) {
    return (
      <Select
        showSearch
        style={{
          width: 280,
        }}
        bordered={false}
        allowClear
        placeholder="Select a guide"
        optionFilterProp="children"
        defaultValue={(guideSelectOptions.length == 0 || city.tourGuideId == 0) ? null : city.tourGuideId}
        onChange={(guideId) => {
          reservationStore.setupCityGuide(city.cityId, guideId);
        }}
        onSearch={(value) => {
          // console.log('search:', value);
        }}
        filterOption={(input, option) =>
          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
        }
        options={toJS(guideSelectOptions)}
      />
    );
  }

	const location = useLocation();
  const { reservationStore } = useStore();
  const { reservationList, reservationPage, referenceNo, arrivalDateRange, cityList, cityGuideList } = reservationStore;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [dataLoading, setDataLoading] = useState(false);
  const { notification } = App.useApp();
  const guideSelectOptions = cityGuideList.map((data, index) => {
    return {
      value: data.guideId,
      label: data.guideName
    }
  });

  useEffect (() => {
    if (location.search !== '?back') {  
      // 第一页，未确认计划    
      onSearchClick(1, 1);
    }
    return () => {
      // unmount...
    };
  }, []);

  const showCityGuideModal = (reservation) => {
    setDataLoading(true);  
    setIsModalOpen(true);
    reservationStore.editReservation(reservation);
    reservationStore.fetchAllGuideList();
    reservationStore.fetchCityList(reservation.reservationId)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setDataLoading(false);
      });
  };
  const handleOk = () => {
    reservationStore.updateReservationGuide()
      .finally(() => {
        setIsModalOpen(false);
        setDataLoading(false);
      });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
    setDataLoading(false);
  };
  
  // 默认重新搜索第一页，所有状态的计划
  const onSearchClick = (current=1, status=null) => {
    setDataLoading(true);
    reservationStore.fetchReservationList(current, status)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setDataLoading(false);
      });
  }

  return (
    <>
      <Modal
        centered
        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <Row>
            <Col span={24}>
              <Table
                bordered
                loading={dataLoading}
                pagination={false}
                columns={[
                  {
                    title: 'City',
                    dataIndex: 'cityName',
                    key: 'cityName'
                  },
                  {
                    title: 'Tour Guide',
                    dataIndex: 'tourGuide',
                    key: 'tourGuide',
                    render: cityGuideRender,
                  }
                ]}
                dataSource={toJS(cityList)}
              />
            </Col>
          </Row>
        </Space>
      </Modal>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Title level={3}></Title>
        <Row gutter={16}>
				  <Col md={24} lg={6} xxl={4}>
            <Input placeholder="Reference Number" value={referenceNo} onChange={(e) => { reservationStore.updatePropertyValue('referenceNo', e.target.value)} } />
          </Col>
          <Col md={24} lg={8} xxl={6}>
            <Space direction="horizontal">
              Arrival Date
              <DatePicker.RangePicker
                allowClear={true}
                inputReadOnly={true}
                presets={DATE_PRESETS}
                defaultValue={toJS(arrivalDateRange)}
                placeholder={['From', 'Thru']}
                onChange={(dateRange) => { 
                  reservationStore.updatePropertyValue('arrivalDateRange', dateRange == null ? [] : dateRange)
                }}
              />
            </Space>
          </Col>
				  <Col md={24} lg={4} xxl={4}>
            <Button type='primary' onClick={() => onSearchClick()} loading={dataLoading}>Search</Button>
          </Col>
        </Row>
        <Title level={3}></Title>
        <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={dataLoading}
              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={reservationList}
            />
          </Col>
        </Row>
      </Space>
    </>
  );
}

export default observer(Newest);