Merge pull request #80 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev
bmsimp · Feb 9, 2025 · 59bc266 · 59bc266
2 parents 0119201 + 431926c
commit 59bc266
Show file tree

Hide file tree

Showing 15 changed files with 350 additions and 232 deletions.
diff --git a/src/components/CippComponents/CippApiDialog.jsx b/src/components/CippComponents/CippApiDialog.jsx
@@ -17,11 +17,20 @@ export const CippApiDialog = (props) => {
     row = {},
     relatedQueryKeys,
     dialogAfterEffect,
+    allowResubmit = false,
     ...other
   } = props;
   const router = useRouter();
   const [addedFieldData, setAddedFieldData] = useState({});
   const [partialResults, setPartialResults] = useState([]);
+  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+
+  useEffect(() => {
+    if (createDialog.open) {
+      setIsFormSubmitted(false);
+    }
+  }, [createDialog.open]);
+
   const [getRequestInfo, setGetRequestInfo] = useState({
     url: "",
     waiting: false,
@@ -103,6 +112,7 @@ export const CippApiDialog = (props) => {
   };
   const tenantFilter = useSettings().currentTenant;
   const handleActionClick = (row, action, formData) => {
+    setIsFormSubmitted(true);
     if (action.multiPost === undefined) {
       action.multiPost = false;
     }
@@ -304,9 +314,10 @@ export const CippApiDialog = (props) => {
           <Button color="inherit" onClick={() => handleClose()}>
             Close
           </Button>
-          <Button variant="contained" type="submit">
-            Confirm
+          <Button variant="contained" type="submit" disabled={isFormSubmitted && !allowResubmit}>
+            {isFormSubmitted && allowResubmit ? "Reconfirm" : "Confirm"}
           </Button>
+          {console.log("isFormSubmitted", isFormSubmitted)}
         </DialogActions>
       </form>
     </Dialog>

diff --git a/src/components/CippComponents/CippAutocomplete.jsx b/src/components/CippComponents/CippAutocomplete.jsx
@@ -6,12 +6,42 @@ import {
   TextField,
   IconButton,
 } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo, useCallback } from "react";
 import { useSettings } from "../../hooks/use-settings";
 import { getCippError } from "../../utils/get-cipp-error";
 import { ApiGetCallWithPagination } from "../../api/ApiCall";
 import { Sync } from "@mui/icons-material";
 import { Stack } from "@mui/system";
+import React from "react";
+
+const MemoTextField = React.memo(function MemoTextField({ params, label, ...otherProps }) {
+  const { InputProps, ...otherParams } = params;
+
+  return (
+    <TextField
+      {...otherParams}
+      label={label}
+      variant="outlined"
+      {...otherProps}
+      slotProps={{
+        inputLabel: {
+          shrink: true,
+          sx: { transition: "none" },
+        },
+        input: {
+          ...InputProps,
+          notched: true,
+          sx: {
+            transition: "none",
+            "& .MuiOutlinedInput-notchedOutline": {
+              transition: "none",
+            },
+          },
+        },
+      }}
+    />
+  );
+});
 
 export const CippAutoComplete = (props) => {
   const {
@@ -136,14 +166,16 @@ export const CippAutoComplete = (props) => {
     }
   }, [api, actionGetRequest.data, actionGetRequest.isSuccess, actionGetRequest.isError]);
 
+  const memoizedOptions = useMemo(() => (api ? usedOptions : options), [api, usedOptions, options]);
+
   const rand = Math.random().toString(36).substring(5);
 
   return (
     <Autocomplete
       key={`${defaultValue}-${rand}`}
       disabled={disabled || actionGetRequest.isFetching || isFetching}
       popupIcon={
-        actionGetRequest.isFetching ? (
+        actionGetRequest.isFetching || isFetching ? (
           <CircularProgress color="inherit" size={20} />
         ) : (
           <ArrowDropDown />
@@ -216,24 +248,20 @@ export const CippAutoComplete = (props) => {
           onChange(newValue, newValue?.addedFields);
         }
       }}
-      options={api ? usedOptions : options}
-      getOptionLabel={(option) =>
-        option
-          ? option.label === null
-            ? ""
-            : option.label || "Label not found - Are you missing a labelField?"
-          : ""
-      }
+      options={memoizedOptions}
+      getOptionLabel={useCallback(
+        (option) =>
+          option
+            ? option.label === null
+              ? ""
+              : option.label || "Label not found - Are you missing a labelField?"
+            : "",
+        []
+      )}
       sx={sx}
       renderInput={(params) => (
         <Stack direction="row" spacing={1}>
-          <TextField
-            variant="filled"
-            placeholder={placeholder}
-            required={required}
-            label={label}
-            {...params}
-          />
+          <MemoTextField params={params} label={label} {...other} />
           {api?.url && api?.showRefresh && (
             <IconButton
               size="small"

diff --git a/src/components/CippComponents/CippFormComponent.jsx b/src/components/CippComponents/CippFormComponent.jsx
@@ -233,17 +233,19 @@ export const CippFormComponent = (props) => {
               name={convertedName}
               control={formControl.control}
               rules={validators}
-              render={({ field }) => (
-                <CippAutoComplete
-                  {...other}
-                  isFetching={other.isFetching}
-                  variant="filled"
-                  defaultValue={field.value}
-                  label={label}
-                  multiple={false}
-                  onChange={(value) => field.onChange(value.value)}
-                />
-              )}
+              render={({ field }) =>
+                React.memo(
+                  <CippAutoComplete
+                    {...other}
+                    isFetching={other.isFetching}
+                    variant="filled"
+                    defaultValue={field.value}
+                    label={label}
+                    multiple={false}
+                    onChange={(value) => field.onChange(value.value)}
+                  />
+                )
+              }
             />
           </div>
           <Typography variant="subtitle3" color="error">

diff --git a/src/components/CippComponents/CippFormTenantSelector.jsx b/src/components/CippComponents/CippFormTenantSelector.jsx
@@ -38,6 +38,7 @@ export const CippFormTenantSelector = ({
           customerId: "customerId",
         },
       }}
+      creatable={false}
       multiple={type === "single" ? false : true}
       disableClearable={disableClearable}
       validators={validators}

diff --git a/src/components/CippFormPages/CippFormPage.jsx b/src/components/CippFormPages/CippFormPage.jsx
@@ -32,6 +32,7 @@ const CippFormPage = (props) => {
     hidePageType = false,
     hideTitle = false,
     hideSubmit = false,
+    allowResubmit = false,
     addedButtons,
     ...other
   } = props;
@@ -42,7 +43,7 @@ const CippFormPage = (props) => {
     relatedQueryKeys: queryKey,
   });
 
-  const { isValid } = useFormState({ control: formControl.control });
+  const { isValid, isDirty } = useFormState({ control: formControl.control });
 
   useEffect(() => {
     delete router.query.tenantFilter;
@@ -133,7 +134,7 @@ const CippFormPage = (props) => {
                   <Stack spacing={2} direction="row">
                     {addedButtons && addedButtons}
                     <Button
-                      disabled={postCall.isPending || !isValid}
+                      disabled={postCall.isPending || !isValid || (!allowResubmit && !isDirty)}
                       onClick={formControl.handleSubmit(handleSubmit)}
                       type="submit"
                       variant="contained"