feat: add create and edit modals for modifications management
This commit is contained in:
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { App, Form, Modal } from "antd"
|
||||
import { ModificationApi } from "@/api"
|
||||
import ModificationForm from "@/components/modification-form"
|
||||
import { Modification, ModificationRequest } from "@/types"
|
||||
|
||||
interface ModificationCreateModalProps {
|
||||
open: boolean
|
||||
defaultFirearmId?: number
|
||||
lockedFirearmId?: number
|
||||
onCancel: () => void
|
||||
onSuccess: (modification: Modification) => void
|
||||
}
|
||||
|
||||
function normalizeRequest(values: ModificationRequest): ModificationRequest {
|
||||
return {
|
||||
firearmId: values.firearmId,
|
||||
name: values.name.trim(),
|
||||
code: values.code.trim(),
|
||||
tags: values.tags?.map((tag) => tag.trim()).filter(Boolean) || [],
|
||||
note: values.note?.trim() || undefined,
|
||||
author: values.author?.trim() || undefined,
|
||||
videoUrl: values.videoUrl?.trim() || undefined,
|
||||
accessories: (values.accessories || []).map((accessory) => ({
|
||||
slotName: accessory.slotName.trim(),
|
||||
accessoryName: accessory.accessoryName.trim(),
|
||||
tunings: (accessory.tunings || []).map((tuning) => ({
|
||||
tuningName: tuning.tuningName.trim(),
|
||||
tuningValue: tuning.tuningValue,
|
||||
})),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
export default function ModificationCreateModal({
|
||||
open,
|
||||
defaultFirearmId,
|
||||
lockedFirearmId,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}: ModificationCreateModalProps) {
|
||||
const { message } = App.useApp()
|
||||
const [form] = Form.useForm<ModificationRequest>()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return
|
||||
}
|
||||
|
||||
form.setFieldsValue({
|
||||
firearmId: lockedFirearmId ?? defaultFirearmId,
|
||||
accessories: [{ slotName: "", accessoryName: "", tunings: [] }],
|
||||
tags: [],
|
||||
})
|
||||
}, [open, defaultFirearmId, lockedFirearmId, form])
|
||||
|
||||
async function onFinish(values: ModificationRequest) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const modification = await ModificationApi.addModification(
|
||||
normalizeRequest({
|
||||
...values,
|
||||
firearmId: lockedFirearmId ?? values.firearmId,
|
||||
})
|
||||
)
|
||||
message.success("改枪码创建成功")
|
||||
form.resetFields()
|
||||
onSuccess(modification)
|
||||
} catch {
|
||||
message.error("改枪码创建失败,请稍后重试")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新建改枪"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
onOk={() => form.submit()}
|
||||
okText="创建"
|
||||
cancelText="取消"
|
||||
confirmLoading={loading}
|
||||
width={820}
|
||||
destroyOnHidden
|
||||
afterOpenChange={(visible) => {
|
||||
if (!visible) {
|
||||
form.resetFields()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ModificationForm form={form} onFinish={onFinish} lockFirearmId={lockedFirearmId} />
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user