diff --git a/src/components/DescriptionBox.tsx b/src/components/DescriptionBox.tsx index 4ca1002..bf01925 100644 --- a/src/components/DescriptionBox.tsx +++ b/src/components/DescriptionBox.tsx @@ -1,14 +1,22 @@ -import { Typography } from 'antd'; +import { Button, Typography } from 'antd'; +import { EditOutlined } from '@ant-design/icons'; interface DescriptionBoxProps { comment: string; + onEdit?: () => void; } -export default function DescriptionBox({ comment }: DescriptionBoxProps) { +export default function DescriptionBox({ + comment, + onEdit, +}: DescriptionBoxProps) { return (
- Description + + Description {comment && } + {comment} + {!comment && }
); } diff --git a/src/components/modals/EditCatalogDescriptionModal.tsx b/src/components/modals/EditCatalogDescriptionModal.tsx new file mode 100644 index 0000000..682cde7 --- /dev/null +++ b/src/components/modals/EditCatalogDescriptionModal.tsx @@ -0,0 +1,60 @@ +import { Button, Form, Modal, Typography } from 'antd'; +import React, { useCallback, useRef } from 'react'; +import TextArea from 'antd/es/input/TextArea'; +import { UpdateCatalogMutationParams } from '../../hooks/catalog'; + +interface EditCatalogDescriptionModalProps { + open: boolean; + catalog: UpdateCatalogMutationParams; + closeModal: () => void; + onSubmit: (comment: UpdateCatalogMutationParams) => void; + loading: boolean; +} + +export function EditCatalogDescriptionModal({ + open, + catalog, + closeModal, + onSubmit, + loading, +}: EditCatalogDescriptionModalProps) { + const submitRef = useRef(null); + + const handleSubmit = useCallback(() => { + submitRef.current?.click(); + }, []); + + return ( + Edit description} + okText="Save" + cancelText="Cancel" + open={open} + destroyOnClose + onCancel={closeModal} + onOk={handleSubmit} + okButtonProps={{ loading: loading }} + > + + Catalog description + + + layout="vertical" + onFinish={(values) => { + onSubmit(values); + }} + name="Edit description form" + initialValues={{ comment: catalog.comment }} + > + +