GHHub/src/views/feedback/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
import { useStore } from "../../stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
const { Title, Text, Paragraph } = Typography;
import * as config from "@/config";

function Detail() {
	const navigate = useNavigate();
	const { GRI_SN,RefNo } = useParams();
	const { feedbackStore, authStore } = useStore();
	const { feedbackRate, feedbackReview, feedbackImages, feedbackInfo } = feedbackStore;
	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
	const { notification } = App.useApp();
	const [form] = Form.useForm();

	useEffect(() => {
		console.info("Detail.useEffect: " + GRI_SN);
		feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
		feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
		feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
			form.setFieldsValue({ info_content: v.EEF_Content });
		});
	}, [GRI_SN]);

	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
	const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : 0;
	const HWO_Car = feedbackRate && feedbackRate.HWO_Car ? feedbackRate.HWO_Car : 0;
	const HWO_Hotel = feedbackRate && feedbackRate.HWO_Hotel ? feedbackRate.HWO_Hotel : 0;
	const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : 0;
	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
	const fileList = toJS(feedbackImages);

	const handleChange = info => {
		console.log(info);
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response && file.response.result) {
				file.url = file.response.result.file_url;
			}
			return file;
		});
		runInAction(() => {
			feedbackStore.feedbackImages = newFileList;
		});
	};

	const handRemove = info => {
		return feedbackStore.removeFeedbackImages(info.url);
	};

	const onFinish = values => {
		console.log("Success:", values);
		if (values) {
			feedbackStore.postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
				notification.success({
					message: `Notification`,
					description: "Submit Successful",
					placement: "top",
					duration: 4,
				});
			});
		}
	};

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row gutter={16}>
				<Col span={20}>
					
				</Col>
				<Col span={4}>
					<Button type="link" onClick={() => navigate("/feedback")}>
						Back
					</Button>
				</Col>
			</Row>
			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
				<Card  type="inner" title={<Title level={4}>Post Survey {RefNo}</Title>}>
					<Form labelCol={{ span: 5 }}>
						<Divider orientation="left">How satisfied were you with your general experience?</Divider>
						<Form.Item label="Tour Guide Service">
							<Space>
								<Rate disabled value={HWO_Guide} />
								<span className="ant-rate-text">{desc[HWO_Guide]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Driver's Attitude">
							<Space>
								<Rate disabled value={HWO_Driver} />
								<span className="ant-rate-text">{desc[HWO_Driver]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Comfort of the Car/Van">
							<Space>
								<Rate disabled value={HWO_Car} />
								<span className="ant-rate-text">{desc[HWO_Car]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Hotel">
							<Space>
								<Rate disabled value={HWO_Hotel} />
								<span className="ant-rate-text">{desc[HWO_Hotel]}</span>
							</Space>
						</Form.Item>
						<Form.Item label="Activities' Arrangements">
							<Space>
								<Rate disabled value={HWO_Activity} />
								<span className="ant-rate-text">{desc[HWO_Activity]}</span>
							</Space>
						</Form.Item>
						<Divider orientation="left">Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
						<Paragraph>
							{PhotoPermission ? (
								<>
									<Radio checked>Yes</Radio>
									<Radio disabled={true}>No</Radio>
								</>
							) : (
								<>
									<Radio disabled={true}>Yes</Radio>
									<Radio checked>No</Radio>
								</>
							)}
						</Paragraph>
						<Divider orientation="left">Other thoughts you want to share with us:</Divider>
						<Text>{OtherThoughts}</Text>
					</Form></Card>
				</Col>
				<Col span={4}></Col>
			</Row>


			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
				<Card type="inner" title={<Title level={4}>External Reviews</Title>}>
					<Text>{ECI_Content}</Text>
					</Card>
				</Col>
				<Col span={4}></Col>
			</Row>

			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
					<Card  type="inner" title={<Title level={4}>Feedback from local agent</Title>}>
						<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
							<Form.Item>
								<Upload
									name="ghhfile"
									// accept="image/*"
									multiple={true}
									action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
									fileList={fileList}
									listType="picture-card"
									onChange={handleChange}
									onRemove={handRemove}>
									<div>
										<PlusOutlined />
										<div style={{ marginTop: 8 }}>Upload photos</div>
									</div>
								</Upload>
							</Form.Item>
							<Form.Item
								name="info_content"
								rules={[
									{
										required: true,
										message: "Please input your messages!",
									},
								]}>
								<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
							</Form.Item>
							<Form.Item>
								<Button type="primary" htmlType="submit">
									Submit
								</Button>
							</Form.Item>
						</Form>
					</Card>
				</Col>
				<Col span={4}></Col>
			</Row>
		</Space>
	);
}

export default observer(Detail);