Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Modal, Button, Form } from "react-bootstrap";
- import SaveButton from "../../../../Components/Forms/SaveButton";
- import { useState, useEffect } from "react";
- import ErrorValidation from "../../../../Components/Errors/Validation";
- export default function ProjectModal({
- show,
- handleClose,
- title,
- editData,
- updateProjectList,
- }) {
- const [loading, setLoading] = useState(false);
- const [name, setName] = useState("");
- const [model, setModel] = useState("");
- const [errors, setErrors] = useState({});
- const closeModal = () => {
- setName("");
- setModel("");
- setErrors({});
- setLoading(false);
- handleClose();
- };
- const handleClick = async () => {
- setErrors({});
- setLoading(true);
- let url;
- const data = {
- name: name,
- model: model,
- };
- if (editData) {
- url = `/api/admin/project/${editData.id}`;
- // update
- try {
- const res = await axios.put(url, data);
- const updateProject = res.data.data;
- updateProjectList(updateProject);
- closeModal();
- } catch (error) {
- // const err = error.response.data.errors;
- // setErrors(err);
- console.log("Error: ", error);
- } finally {
- setLoading(false);
- }
- } else {
- url = "/api/admin/project";
- // store mode
- try {
- const res = await axios.post(url, data);
- console.log(res);
- } catch (error) {
- const err = error.response.data.errors;
- setErrors(err);
- console.log("Error: ", err);
- } finally {
- setLoading(false);
- }
- }
- };
- useEffect(() => {
- if (editData) {
- setName(editData.name);
- setModel(editData.model);
- }
- }, [editData]);
- return (
- <Modal
- show={show}
- onHide={handleClose}
- backdrop="static"
- keyboard={false}
- size="sm"
- >
- <Modal.Header closeButton className="py-1">
- <Modal.Title className="fs-5">{title} Project</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <Form.Group className="mb-2">
- <Form.Label>Project Name</Form.Label>
- <Form.Control
- type="text"
- size="sm"
- onChange={(e) => setName(e.target.value)}
- autoFocus
- className={errors.name ? "is-invalid" : ""}
- disabled={loading}
- placeholder="PJ Name"
- value={name}
- />
- {errors.name && <ErrorValidation msg={errors.name} />}
- </Form.Group>
- <Form.Group className="mb-2">
- <Form.Label>Model Name</Form.Label>
- <Form.Control
- type="text"
- size="sm"
- onChange={(e) => setModel(e.target.value)}
- className={errors.model ? "is-invalid" : ""}
- disabled={loading}
- placeholder="Model Name"
- value={model}
- />
- {errors.model && <ErrorValidation msg={errors.model} />}
- </Form.Group>
- </Modal.Body>
- <Modal.Footer className="py-1">
- <Button
- variant="secondary"
- size="sm"
- onClick={closeModal}
- disabled={loading}
- >
- Close
- </Button>
- <SaveButton
- title="Save PJ"
- loading={loading}
- onClick={handleClick}
- />
- </Modal.Footer>
- </Modal>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement