react

src/components/Dashboard/Dynamictable.js

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Button,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Typography,
+  Box,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import BuildIcon from "@mui/icons-material/Build";
+import AddIcon from "@mui/icons-material/Add";
+
+// Define the API base URL using the environment variable
+const api = process.env.REACT_APP_API_BASE_URL;
+
+const DynamicTable = () => {
+  const [forms, setForms] = useState([]);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (location.state && location.state.formData) {
+      setForms((prevForms) => [...prevForms, location.state.formData]);
+    } else {
+      fetchForms();
+    }
+  }, [location.state]);
+
+  const fetchForms = async () => {
+    const token = localStorage.getItem("token"); // Get token from local storage
+    try {
+      const response = await axios.get(`${api}/api/form_setup`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (Array.isArray(response.data)) {
+        setForms(response.data);
+      } else {
+        console.error("Unexpected response format:", response.data);
+        setForms([]);
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      setForms([]);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    const token = localStorage.getItem("token"); // Get token from local storage
+    try {
+      await axios.delete(`${api}/api/form_setup/${id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      fetchForms();
+    } catch (error) {
+      console.error("Error deleting form:", error);
+    }
+  };
+
+  const handleBuild = async (id) => {
+    const token = localStorage.getItem("token"); // Get token from local storage
+    try {
+      await axios.post(
+        `${api}/api/dynamic_form_build`,
+        { id },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+    } catch (error) {
+      console.error("Error building form:", error);
+    }
+  };
+
+  const handleAdd = () => {
+    navigate("/form");
+  };
+
+  return (
+    <Box className="p-5 bg-gray-100 min-h-screen">
+      <Typography
+        variant="h4"
+        gutterBottom
+        className="text-center text-white bg-gray-700 text-3xl p-3 mb-5 rounded"
+      >
+        Dynamic Form
+      </Typography>
+      <Button
+        variant="contained"
+        color="primary"
+        startIcon={<AddIcon />}
+        onClick={handleAdd}
+        className="mb-5 bg-blue-500 hover:bg-blue-600"
+      >
+        Add
+      </Button>
+      <TableContainer component={Paper} className="overflow-x-auto">
+        <Table>
+          <TableHead className="bg-gray-300 text-black">
+            <TableRow>
+              <TableCell>Go To</TableCell>
+              <TableCell>Form Name</TableCell>
+              <TableCell>Form Description</TableCell>
+              <TableCell>Related To</TableCell>
+              <TableCell>Page Event</TableCell>
+              <TableCell>Button Caption</TableCell>
+              <TableCell>Go To Form</TableCell>
+              <TableCell>Action</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {forms.map((form, index) => (
+              <TableRow key={index}>
+                <TableCell>
+                  <Button
+                    variant="outlined"
+                    startIcon={<BuildIcon />}
+                    onClick={() => handleBuild(form.id)}
+                    className="border-blue-500 text-blue-500 hover:bg-blue-100"
+                  >
+                    Build
+                  </Button>
+                </TableCell>
+                <TableCell>{form.formName}</TableCell>
+                <TableCell>{form.formDescription}</TableCell>
+                <TableCell>{form.relatedTo}</TableCell>
+                <TableCell>{form.pageEvent}</TableCell>
+                <TableCell>{form.buttonCaption}</TableCell>
+                <TableCell>{form.goToForm}</TableCell>
+                <TableCell>
+                  <IconButton
+                    color="secondary"
+                    onClick={() => handleDelete(form.id)}
+                    className="text-red-500 hover:text-red-700"
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default DynamicTable;