-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12 from Restu-Averian/master
Add suggestion_feature
- Loading branch information
Showing
8 changed files
with
411 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { Col, Row, Typography } from "antd"; | ||
| import { Fragment } from "react"; | ||
|
|
||
| const DataDetailSuggestion = ({ label, value, render }) => { | ||
| return ( | ||
| <Fragment> | ||
| <Row gutter={[8, 8]} style={{ marginBottom: 20 }}> | ||
| <Col span={24}> | ||
| <Typography.Text>{label}</Typography.Text> | ||
| </Col> | ||
| <Col span={24}> | ||
| {typeof render !== "undefined" ? ( | ||
| render() | ||
| ) : ( | ||
| <Typography.Text>{value}</Typography.Text> | ||
| )} | ||
| </Col> | ||
| </Row> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataDetailSuggestion; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Col, Image, Modal, Row } from "antd"; | ||
| import DataDetailSuggestion from "./DataDetailSuggestion"; | ||
|
|
||
| const ModalDetailImgSuggestion = ({ open, setOpen, objDetailImg }) => { | ||
| return ( | ||
| <Modal open={open} onCancel={() => setOpen(false)} title="Deskripsi Foto"> | ||
| <Row gutter={16} align="middle"> | ||
| <Col span={12}> | ||
| <Image /> | ||
| </Col> | ||
| <Col span={12}> | ||
| <DataDetailSuggestion | ||
| label="Description" | ||
| value={objDetailImg?.description} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Attribution" | ||
| value={objDetailImg?.attribution} | ||
| /> | ||
| </Col> | ||
| </Row> | ||
| </Modal> | ||
| ); | ||
| }; | ||
| export default ModalDetailImgSuggestion; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| import { | ||
| ArrowLeftOutlined, | ||
| CloseCircleOutlined, | ||
| } from "@ant-design/icons/lib/icons"; | ||
| import { | ||
| Badge, | ||
| Button, | ||
| Col, | ||
| Form, | ||
| Image, | ||
| Modal, | ||
| Row, | ||
| Space, | ||
| Spin, | ||
| Tooltip, | ||
| Typography, | ||
| } from "antd"; | ||
| import { Fragment, useEffect, useState } from "react"; | ||
| import { useNavigate, useParams } from "react-router-dom"; | ||
| import DataDetailSuggestion from "../../components/Suggestion/DataDetailSuggestion"; | ||
| import ModalDetailImgSuggestion from "../../components/Suggestion/ModalDetailImgSuggestion"; | ||
| import getDocPS from "../../helpers/getDocPS"; | ||
|
|
||
| const SuggestionDetail = ({ type }) => { | ||
| const [FormInstance] = Form.useForm(); | ||
| const { id } = useParams(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const [imageData, setImageData] = useState([]); | ||
| const [openModalImg, setOpenModalImg] = useState(false); | ||
| const [objDetailImg, setObjDetailImg] = useState({ | ||
| url: "", | ||
| desc: "", | ||
| attribution: "", | ||
| }); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const [objDetailSuggest, setObjDetailSuggest] = useState({}); | ||
|
|
||
| const deleteImgHandler = (id) => { | ||
| Modal.confirm({ | ||
| content: "Apakah yakin untuk hapus ?", | ||
| onOk: () => { | ||
| setImageData(imageData?.filter((data) => data?.id !== id)); | ||
| }, | ||
| okText: "Hapus", | ||
| okButtonProps: { | ||
| danger: true, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| const getDetailSuggestions = () => { | ||
| setLoading(true); | ||
| getDocPS({ | ||
| collectionName: "suggestions", | ||
| id, | ||
| }) | ||
| ?.then((objData) => { | ||
| setObjDetailSuggest(objData); | ||
| setImageData(objData?.images); | ||
| }) | ||
| ?.finally(() => { | ||
| setLoading(false); | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| getDetailSuggestions(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Spin spinning={loading}> | ||
| <div style={{ background: "white", padding: 20, borderRadius: 10 }}> | ||
| <Row align="middle"> | ||
| <Col span={2}> | ||
| <Button | ||
| shape="circle" | ||
| icon={<ArrowLeftOutlined />} | ||
| onClick={() => { | ||
| navigate("/suggestion_lists"); | ||
| }} | ||
| /> | ||
| </Col> | ||
|
|
||
| <Col span={22}> | ||
| <Typography.Title>Detail Suggestion</Typography.Title> | ||
| </Col> | ||
| </Row> | ||
|
|
||
| <Form | ||
| initialValues={{ | ||
| ...(type === "add" && { | ||
| common_name: [""], | ||
| }), | ||
| }} | ||
| form={FormInstance} | ||
| > | ||
| <Row gutter={[16, 16]}> | ||
| <Col span={12}> | ||
| <DataDetailSuggestion | ||
| label="Plant Name" | ||
| value={objDetailSuggest?.name || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Species" | ||
| value={objDetailSuggest?.species || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Other Name" | ||
| render={() => { | ||
| if (objDetailSuggest?.common_name?.length) { | ||
| return ( | ||
| <ul> | ||
| {objDetailSuggest?.common_name?.map((cmnName, key) => ( | ||
| <li key={key}>{cmnName?.name}</li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } | ||
| return <Typography.Text>No Other Name</Typography.Text>; | ||
| }} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Description" | ||
| value={objDetailSuggest?.description} | ||
| /> | ||
| </Col> | ||
| <Col span={12}> | ||
| <DataDetailSuggestion | ||
| label="Genus" | ||
| value={objDetailSuggest?.taxonomy?.genus || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Class" | ||
| value={objDetailSuggest?.taxonomy?.class || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Family" | ||
| value={objDetailSuggest?.taxonomy?.family || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Order" | ||
| value={objDetailSuggest?.taxonomy?.order || "-"} | ||
| /> | ||
| <DataDetailSuggestion | ||
| label="Phylum" | ||
| value={objDetailSuggest?.taxonomy?.phylum || "-"} | ||
| /> | ||
| </Col> | ||
| </Row> | ||
|
|
||
| <Row> | ||
| <Col span={24}> | ||
| <Space size="large" wrap> | ||
| <DataDetailSuggestion | ||
| label="Images" | ||
| render={() => { | ||
| if (imageData?.length) { | ||
| return ( | ||
| <> | ||
| {imageData?.map((dataPreview, idx) => ( | ||
| <Tooltip | ||
| title={dataPreview?.desc || "Tidak ada informasi"} | ||
| key={idx} | ||
| > | ||
| <Badge | ||
| count={ | ||
| <Button | ||
| icon={ | ||
| <CloseCircleOutlined | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontSize: 28, | ||
| }} | ||
| /> | ||
| } | ||
| shape="circle" | ||
| danger | ||
| onClick={() => | ||
| deleteImgHandler(dataPreview?.id) | ||
| } | ||
| style={{ | ||
| background: "transparent", | ||
| border: 0, | ||
| }} | ||
| /> | ||
| } | ||
| > | ||
| <Image | ||
| style={{ cursor: "pointer" }} | ||
| src={dataPreview?.url} | ||
| width={100} | ||
| height={100} | ||
| preview={false} | ||
| onClick={() => { | ||
| setObjDetailImg({ | ||
| ...dataPreview, | ||
| }); | ||
| setOpenModalImg(true); | ||
| }} | ||
| /> | ||
| </Badge> | ||
| </Tooltip> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
| return <Typography.Text>No Images</Typography.Text>; | ||
| }} | ||
| /> | ||
| </Space> | ||
| </Col> | ||
| </Row> | ||
| </Form> | ||
| </div> | ||
|
|
||
| <ModalDetailImgSuggestion | ||
| open={openModalImg} | ||
| setOpen={setOpenModalImg} | ||
| objDetailImg={objDetailImg} | ||
| /> | ||
| </Spin> | ||
| ); | ||
| }; | ||
| export default SuggestionDetail; |
Oops, something went wrong.