You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
GHHub/src/views/feedback/Index.jsx

109 lines
3.0 KiB
JavaScript

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, App } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
const { Title } = Typography;
const feedbackListColumns = [
{
title: "Ref.No",
dataIndex: "EOI_Group_Name",
render: (text, record) => <NavLink to={`/feedback/${record.EOI_GRI_SN}`}>{text}</NavLink>,
},
{
title: "Arrival Date",
dataIndex: "EOI_Date",
render: (text, record) => text,
sorter: (a, b) => b.EOI_Date - a.EOI_Date,
},
{
title: "Cities",
key: "City",
dataIndex: "City",
},
{
title: "Guides",
dataIndex: "GriName",
},
{
title: "Post Survey",
dataIndex: "Average",
sorter: (a, b) => b.Average - a.Average,
},
{
title: "External Reviews",
dataIndex: "TAGood",
},
];
function Index() {
const { notification } = App.useApp();
const { feedbackStore, authStore } = useStore();
const { feedbackList, search_date_start, search_date_end } = feedbackStore;
const [referenceNo, onNumberChange] = useState("");
const showTotal = total => `Total ${feedbackList.length} items`;
useEffect(() => {
feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")
.catch(ex => {
// notification.error({
// message: `Error`,
// description: ex.message,
// placement: 'top',
// duration: 4,
// });
console.log(ex.message);
});
}, []);
return (
<Space direction="vertical" style={{ width: "100%" }}>
<Title level={3}></Title>
<Row gutter={16}>
<Col md={24} lg={6} xxl={4}>
<Input
placeholder="Reference Number"
onChange={e => {
onNumberChange(e.target.value);
}}
/>
</Col>
<Col md={24} lg={8} xxl={6}>
<Space direction="horizontal">
Arrival Date
<DatePicker.RangePicker
format={config.DATE_FORMAT}
allowClear={false}
style={{ width: "100%" }}
value={[search_date_start, search_date_end]}
presets={config.DATE_PRESETS}
onChange={feedbackStore.onDateRangeChange}
/>
</Space>
</Col>
<Col md={24} lg={4} xxl={4}>
<Button
type="primary"
loading={feedbackStore.loading}
onClick={() => feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")}>
Search
</Button>
</Col>
</Row>
<Title level={3}></Title>
<Row>
<Col md={24} lg={24} xxl={12}>
<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
</Col>
<Col md={24} lg={24} xxl={12}></Col>
</Row>
</Space>
);
}
export default observer(Index);