134 lines
4.3 KiB
TypeScript
134 lines
4.3 KiB
TypeScript
import { create, ProgramFormValue, update } from "@/client/program"
|
|
import "@uiw/react-markdown-preview/markdown.css"
|
|
import "@uiw/react-md-editor/markdown-editor.css"
|
|
import { Button, DatePicker, Form, Input, message, Radio, RadioChangeEvent } from "antd"
|
|
import { useForm } from "antd/lib/form/Form"
|
|
import dynamic from "next/dynamic"
|
|
import Router from "next/router"
|
|
import React, { useEffect, useState } from "react"
|
|
import { TagsInput } from "react-tag-input-component"
|
|
|
|
import DefaultForm from "@/components/shared/form/ui/default-form"
|
|
import FormGroup from "@/components/shared/form/ui/form-group"
|
|
import FormSection from "@/components/shared/form/ui/form-section"
|
|
import moment from "moment"
|
|
|
|
interface Props {
|
|
pid?: any
|
|
data?: any
|
|
}
|
|
|
|
const ProgramForm = (props: Props) => {
|
|
const { pid, data } = props
|
|
const [form] = useForm()
|
|
const [messageApi, contextHolder] = message.useMessage()
|
|
|
|
const [status, setStatus] = useState("")
|
|
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [formData, setFormData] = useState<any>(null)
|
|
|
|
const handleFinish = async (value: ProgramFormValue) => {
|
|
console.log("value", value)
|
|
try {
|
|
setIsLoading(true)
|
|
if (pid) {
|
|
await update(pid, value)
|
|
messageApi.success("수정되었습니다")
|
|
setTimeout(() => Router.back(), 500)
|
|
} else {
|
|
await create(value)
|
|
messageApi.success("생성되었습니다")
|
|
setTimeout(() => Router.back(), 500)
|
|
}
|
|
} catch (e: unknown) {
|
|
messageApi.error("에러가 발생했습니다")
|
|
} finally {
|
|
setTimeout(() => setIsLoading(false), 500)
|
|
}
|
|
}
|
|
|
|
const Editor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false })
|
|
|
|
const updateData = (data: any) => {
|
|
console.log("updateData", data)
|
|
setFormData(data)
|
|
setFormData((prevData: any) => ({
|
|
...prevData,
|
|
["publish_at"]: moment(data?.publish_at),
|
|
}))
|
|
}
|
|
|
|
const changeStatus = (e: RadioChangeEvent) => {
|
|
console.log("radio checked", e.target.value)
|
|
setStatus(e.target.value)
|
|
}
|
|
|
|
useEffect(() => {
|
|
console.log("use effect data", data)
|
|
if (data) {
|
|
updateData(data)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [data])
|
|
|
|
useEffect(() => {
|
|
form.resetFields()
|
|
console.log("formData", formData)
|
|
}, [form, formData])
|
|
|
|
return (
|
|
<>
|
|
{contextHolder}
|
|
<span></span>
|
|
<DefaultForm<ProgramFormValue> form={form} initialValues={formData} onFinish={handleFinish}>
|
|
<FormSection>
|
|
<FormGroup title="제목">
|
|
<Form.Item name="subject" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<Input placeholder="제목" value={data?.subject} />
|
|
</Form.Item>
|
|
</FormGroup>
|
|
<FormGroup title="퀴즈단계">
|
|
<Form.Item name="course" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<Input placeholder="퀴즈단계" value={data?.course} />
|
|
</Form.Item>
|
|
</FormGroup>
|
|
<FormGroup title="설명">
|
|
<Form.Item name="content" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<Editor height={160} value={data?.content} />
|
|
</Form.Item>
|
|
</FormGroup>
|
|
|
|
<FormGroup title="태그">
|
|
<Form.Item name="tag" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<TagsInput value={data?.tag} name="fruits" placeHolder="태그" />
|
|
</Form.Item>
|
|
</FormGroup>
|
|
|
|
<FormGroup title="상태">
|
|
<Form.Item name="status" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<Radio.Group onChange={changeStatus} value={data?.status}>
|
|
<Radio value="on">ON</Radio>
|
|
<Radio value="off">OFF</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
</FormGroup>
|
|
<FormGroup title="등록날짜">
|
|
<Form.Item name="publish_at" rules={[{ required: true, message: "필수값입니다" }]}>
|
|
<DatePicker format={"YYYY-MM-DD"} />
|
|
</Form.Item>
|
|
</FormGroup>
|
|
</FormSection>
|
|
|
|
<div className="text-center">
|
|
<Button htmlType="submit" type="primary" loading={isLoading}>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</DefaultForm>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default React.memo(ProgramForm)
|