Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 3x 3x 3x 3x 3x 3x 14x 14x 14x 1x 1x 1x 1x 1x 1x 1x 14x 26x 26x 26x 8x 18x 14x 14x 1x 1x 14x 2x 14x 14x 3x | import React, { useState } from "react";
import { Button, Form, Input, message } from "antd";
import { LocationAPICaller } from "@/services/apis/location.api";
import { useMutation } from "react-query";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import { LocationRequest } from "@/types/LocationRequest";
import { Location } from "@/types/Location";
import APIResponse from "@/types/APIResponse";
interface AddLocationButtonProps {
items: Location[];
refetchLocations: () => void;
}
const AddLocationButton: React.FC<AddLocationButtonProps> = ({
refetchLocations,
}) => {
const [showInputs, setShowInputs] = useState(false);
const [form] = Form.useForm<LocationRequest>();
const { mutate, isLoading } = useMutation(LocationAPICaller.createLocation, {
onSuccess: () => {
form.setFieldsValue({ name: "", code: "" });
setShowInputs(false);
refetchLocations(); // Làm mới danh sách địa điểm sau khi tạo mới thành công
message.success("Location added successfully");
},
onError: (error) => {
const errorResponse = (error as { response: { data: APIResponse } })
.response.data;
message.error(errorResponse.message);
console.error("Error creating location:", error);
},
});
const handleFieldsChange = () => {
const name = form.getFieldValue("name");
const code = form.getFieldValue("code");
if (!name || !code || !name.trim()) {
form.setFields([{ name: "code", errors: ["Not blank"] }]);
} else Iif ( code.trim().length > 3) {
form.setFields([{ name: "code", errors: ["Less than 3"] }]);
}
};
const handleTextClick = () => setShowInputs(true);
const handleCancelClick = () => {
setShowInputs(false);
form.setFieldsValue({ name: "", code: "" });
};
const onFinish = (values: LocationRequest) => {
mutate(values);
};
const content = showInputs ? (
<>
<div style={{ display: "flex", alignItems: "center" }}>
<Form
form={form}
name="basic"
onFinish={onFinish}
autoComplete="on"
onFieldsChange={handleFieldsChange}
>
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<Form.Item<LocationRequest>
name="name"
rules={[
{ required: true, message: "Name not null" },
{ max: 128, message: "Max length is 128" },
]}
style={{ width: "80%" }}
>
<Input placeholder="Name" />
</Form.Item>
<Form.Item<LocationRequest>
name="code"
rules={[{ required: true, message: "Code is required" }]}
>
<Input placeholder="Code" />
</Form.Item>
<Form.Item className="flex justify-end">
<Button
type="default"
htmlType="submit"
className="bg-[#E20D1]"
loading={isLoading}
>
<CheckOutlined style={{ fontSize: "16px", color: "green" }} />
</Button>
</Form.Item>
<Form.Item className="flex justify-end">
<Button onClick={handleCancelClick} className="bg-[#E20D1]">
<CloseOutlined style={{ fontSize: "16px", color: "red" }} />
</Button>
</Form.Item>
</div>
</Form>
</div>
</>
) : (
<span onClick={handleTextClick}>Add new location</span>
);
return <div>{content}</div>;
};
export default AddLocationButton;
|