Advertisement
arlendafitranto

ProjectModaldotjsx

Sep 24th, 2024
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.19 KB | Source Code | 0 0
  1.  
  2. import { Modal, Button, Form } from "react-bootstrap";
  3. import SaveButton from "../../../../Components/Forms/SaveButton";
  4. import { useState, useEffect } from "react";
  5. import ErrorValidation from "../../../../Components/Errors/Validation";
  6.  
  7. export default function ProjectModal({
  8.     show,
  9.     handleClose,
  10.     title,
  11.     editData,
  12.     updateProjectList,
  13. }) {
  14.     const [loading, setLoading] = useState(false);
  15.     const [name, setName] = useState("");
  16.     const [model, setModel] = useState("");
  17.     const [errors, setErrors] = useState({});
  18.  
  19.     const closeModal = () => {
  20.         setName("");
  21.         setModel("");
  22.         setErrors({});
  23.         setLoading(false);
  24.         handleClose();
  25.     };
  26.  
  27.     const handleClick = async () => {
  28.         setErrors({});
  29.         setLoading(true);
  30.         let url;
  31.  
  32.         const data = {
  33.             name: name,
  34.             model: model,
  35.         };
  36.  
  37.         if (editData) {
  38.             url = `/api/admin/project/${editData.id}`;
  39.             // update
  40.             try {
  41.                 const res = await axios.put(url, data);
  42.                 const updateProject = res.data.data;
  43.                 updateProjectList(updateProject);
  44.                 closeModal();
  45.             } catch (error) {
  46.                 // const err = error.response.data.errors;
  47.                 // setErrors(err);
  48.                 console.log("Error: ", error);
  49.             } finally {
  50.                 setLoading(false);
  51.             }
  52.         } else {
  53.             url = "/api/admin/project";
  54.             // store mode
  55.             try {
  56.                 const res = await axios.post(url, data);
  57.                 console.log(res);
  58.             } catch (error) {
  59.                 const err = error.response.data.errors;
  60.                 setErrors(err);
  61.                 console.log("Error: ", err);
  62.             } finally {
  63.                 setLoading(false);
  64.             }
  65.         }
  66.     };
  67.  
  68.     useEffect(() => {
  69.         if (editData) {
  70.             setName(editData.name);
  71.             setModel(editData.model);
  72.         }
  73.     }, [editData]);
  74.  
  75.     return (
  76.         <Modal
  77.             show={show}
  78.             onHide={handleClose}
  79.             backdrop="static"
  80.             keyboard={false}
  81.             size="sm"
  82.         >
  83.             <Modal.Header closeButton className="py-1">
  84.                 <Modal.Title className="fs-5">{title} Project</Modal.Title>
  85.             </Modal.Header>
  86.             <Modal.Body>
  87.                 <Form.Group className="mb-2">
  88.                     <Form.Label>Project Name</Form.Label>
  89.                     <Form.Control
  90.                         type="text"
  91.                         size="sm"
  92.                         onChange={(e) => setName(e.target.value)}
  93.                         autoFocus
  94.                         className={errors.name ? "is-invalid" : ""}
  95.                         disabled={loading}
  96.                         placeholder="PJ Name"
  97.                         value={name}
  98.                     />
  99.                     {errors.name && <ErrorValidation msg={errors.name} />}
  100.                 </Form.Group>
  101.                 <Form.Group className="mb-2">
  102.                     <Form.Label>Model Name</Form.Label>
  103.                     <Form.Control
  104.                         type="text"
  105.                         size="sm"
  106.                         onChange={(e) => setModel(e.target.value)}
  107.                         className={errors.model ? "is-invalid" : ""}
  108.                         disabled={loading}
  109.                         placeholder="Model Name"
  110.                         value={model}
  111.                     />
  112.                     {errors.model && <ErrorValidation msg={errors.model} />}
  113.                 </Form.Group>
  114.             </Modal.Body>
  115.             <Modal.Footer className="py-1">
  116.                 <Button
  117.                     variant="secondary"
  118.                     size="sm"
  119.                     onClick={closeModal}
  120.                     disabled={loading}
  121.                 >
  122.                     Close
  123.                 </Button>
  124.                 <SaveButton
  125.                     title="Save PJ"
  126.                     loading={loading}
  127.                     onClick={handleClick}
  128.                 />
  129.             </Modal.Footer>
  130.         </Modal>
  131.     );
  132. }
  133.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement