Merge pull request #130 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: pull[bot]

src/pages/tenant/standards/bpa-report/builder.js

@@ -4,19 +4,14 @@ import {
   Container,
   Typography,
   Button,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
   Grid,
   IconButton,
   Stack,
   SvgIcon,
 } from "@mui/material";
 import { useEffect, useState } from "react";
-import Head from "next/head";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
 import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
 import { ArrowLeftIcon } from "@mui/x-date-pickers";
@@ -25,6 +20,7 @@ import { CippFormCondition } from "../../../../components/CippComponents/CippFor
 import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
 import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
 import { CippHead } from "../../../../components/CippComponents/CippHead";
+import { Add, Save } from "@mui/icons-material";
 
 const Page = () => {
   const router = useRouter();
@@ -55,18 +51,28 @@ const Page = () => {
           template.name = `${template.name} (Clone)`;
         }
         setLayoutMode(template.style);
-        //if the template style is tenant, create enough cards to hold the frontend fields
-        if (template.style === "Tenant") {
-          setBlockCards(
-            template.Fields.map((field, index) => {
-              return {
-                id: `block-${index}`,
-              };
-            })
-          );
-        }
+        setBlockCards(
+          template.Fields.map((field, index) => {
+            return {
+              id: `block-${index}`,
+            };
+          })
+        );
+
+        const convertedTemplate = {
+          ...template,
+          Fields: template.Fields.map((field) => ({
+            ...field,
+            ExtractFields: field.ExtractFields
+              ? field.ExtractFields.map((ef) => ({
+                  label: ef,
+                  value: ef,
+                }))
+              : [],
+          })),
+        };
 
-        formControl.reset(template);
+        formControl.reset(convertedTemplate);
       }
     }
   }, [bpaTemplateList.isSuccess]);
@@ -152,10 +158,9 @@ const Page = () => {
     addBPATemplate.mutate({ url: "/api/AddBPATemplate", data: cleanedData });
   };
 
-  const handleLayoutModeChange = (event) => {
-    const newMode = event.target.value;
+  const handleLayoutModeChange = (newMode) => {
     setLayoutMode(newMode);
-    formControl.setValue("style", newMode);
+    //formControl.setValue("style", newMode);
 
     // Reset cards based on the layout mode
     if (newMode === "Table") {
@@ -175,6 +180,14 @@ const Page = () => {
     }
   };
 
+  const style = useWatch({ control: formControl.control, name: "style" });
+
+  useEffect(() => {
+    if (style && style !== layoutMode) {
+      handleLayoutModeChange(style);
+    }
+  }, [style]);
+
   const onSubmit = (data) => {};
   return (
     <>
@@ -209,55 +222,43 @@ const Page = () => {
           <CippButtonCard
             CardButton={
               <>
-                <Button variant="contained" onClick={saveConfig} sx={{ ml: 2 }}>
+                <Button variant="contained" onClick={saveConfig} startIcon={<Save />}>
                   Save Report
                 </Button>
               </>
             }
             title="Report Settings"
           >
-            <Grid container spacing={4}>
+            <Grid container spacing={2}>
               {/* First item for Report Name and Layout Mode */}
               <Grid item xs={12} sm={12} md={12}>
                 <CippFormComponent label="Report Name" name={`name`} formControl={formControl} />
               </Grid>
 
               <Grid item xs={12} sm={12} md={12}>
-                <FormControl fullWidth>
-                  <InputLabel id="layout-mode-label">Layout Mode</InputLabel>
-                  <Select
-                    labelId="layout-mode-label"
-                    id="layout-mode"
-                    value={layoutMode}
-                    onChange={handleLayoutModeChange}
-                    fullWidth
-                  >
-                    <MenuItem value="Tenant">Block</MenuItem>
-                    <MenuItem value="Table">Table</MenuItem>
-                  </Select>
-                </FormControl>
+                <CippFormComponent
+                  label="Layout Mode"
+                  name="style"
+                  type="select"
+                  options={[
+                    { label: "Block", value: "Tenant" },
+                    { label: "Table", value: "Table" }
+                  ]}
+                  formControl={formControl}
+                />
               </Grid>
               <Grid item xs={12} sm={12} md={12}>
                 <CippApiResults apiObject={addBPATemplate} />
               </Grid>
-
-              {/* Third item for Buttons */}
-              {layoutMode === "Tenant" && (
-                <Grid item xs={12} sm={12} md={12}>
-                  <Box sx={{ mt: 2 }}>
-                    <Button variant="contained" onClick={handleAddBlock}>
-                      Add Frontend Card
-                    </Button>
-                  </Box>
-                </Grid>
-              )}
             </Grid>
           </CippButtonCard>
 
-          {/* Canvas Area */}
-          <Typography variant="h6" gutterBottom>
-            Canvas
-          </Typography>
+          <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ my: 3 }}>
+            <Typography variant="h5">Fields</Typography>
+            <Button variant="outlined" size="small" onClick={handleAddBlock} startIcon={<Add />}>
+              Add Field
+            </Button>
+          </Stack>
 
           <Grid container spacing={2}>
             {blockCards.map((block, index) => (
@@ -269,16 +270,16 @@ const Page = () => {
                 key={block.id}
               >
                 <CippButtonCard
-                  title={block.id === "table-card" ? `Default Table Card` : `BPA Report`}
+                  title={`${layoutMode === "Table" ? "Table Column" : "Block"} - ${
+                    watch(`Fields.${index}.FrontendFields.0.name`) || "New Field"
+                  }`}
                   cardActions={
-                    layoutMode === "Tenant" && (
-                      <IconButton
-                        aria-label="delete"
-                        onClick={() => handleRemoveBlock(block.id)} // Remove block on click
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    )
+                    <IconButton
+                      aria-label="delete"
+                      onClick={() => handleRemoveBlock(block.id)} // Remove block on click
+                    >
+                      <DeleteIcon />
+                    </IconButton>
                   }
                 >
                   {/* Form inside each card */}
@@ -310,7 +311,8 @@ const Page = () => {
                       </Grid>
                       <CippFormCondition
                         field={`Fields.${index}.UseExistingInfo`} // Corrected condition field
-                        compareValue={false}
+                        compareType="isNot"
+                        compareValue={true}
                         formControl={formControl}
                       >
                         <Grid item xs={12}>
@@ -477,13 +479,17 @@ const Page = () => {
                             type="autoComplete"
                             formControl={formControl}
                             multiple={false}
-                            api={{
-                              queryKey: `ListBPA`,
-                              url: "/api/ListBPA",
-                              dataKey: "Keys",
-                              labelField: (option) => `${option}`,
-                              valueField: (option) => `${option}`,
-                            }}
+                            options={
+                              bpaTemplateList.data
+                                ?.flatMap(
+                                  (template) => template.Fields?.map((field) => field.name) ?? []
+                                )
+                                .filter(
+                                  (value, index, self) => value && self.indexOf(value) === index
+                                )
+                                .map((field) => ({ label: field, value: field }))
+                                .sort((a, b) => a.label.localeCompare(b.label)) ?? []
+                            }
                           />
                         </Grid>
                       </CippFormCondition>