added api based autocomplete

Author: KelvinTegelaar

src/components/CippComponents/CippApiDialog.jsx

@@ -111,22 +111,23 @@ export const CippApiDialog = (props) => {
         </DialogContent>
         <DialogContent>
           {fields &&
-            fields.map((field, index) => {
-              switch (field.type) {
+            fields.map((fieldProps, index) => {
+              switch (fieldProps.type) {
                 case "autoComplete":
                   return (
                     <Controller
                       key={index}
-                      name={field.name}
+                      name={fieldProps.name}
                       control={formHook.control}
                       render={({ field }) => (
                         <CippAutoComplete
                           required
+                          api={fieldProps.api}
                           creatable={false}
                           multiple={false}
-                          defaultValue={"Select a bla"}
-                          options={["one", "two", "three"]}
-                          onChange={(e, nv) => field.onChange(nv)}
+                          defaultValue={fieldProps.label}
+                          options={fieldProps.options}
+                          onChange={(e, nv) => field.onChange(nv.value)}
                         />
                       )}
                     />

src/components/CippComponents/CippAutocomplete.jsx

@@ -1,9 +1,14 @@
 import { ArrowDropDown } from "@mui/icons-material";
 import { Autocomplete, CircularProgress, createFilterOptions, TextField } from "@mui/material";
+import { ApiGetCall } from "../../api/ApiCall";
+import { useEffect, useState } from "react";
+import { useSettings } from "../../hooks/use-settings";
+import { getCippError } from "../../utils/get-cipp-error";
 
 export const CippAutoComplete = (props) => {
   const {
     size,
+    api,
     label,
     multiple = true,
     creatable = true,
@@ -12,18 +17,51 @@ export const CippAutoComplete = (props) => {
     placeholder,
     disableClearable,
     name,
-    options,
+    options = [],
     onChange,
     required = false,
     sx,
     ...other
   } = props;
   const filter = createFilterOptions();
+  const [usedOptions, setUsedOptions] = useState(options);
+  const [getRequestInfo, setGetRequestInfo] = useState({ url: "", waiting: false, queryKey: "" });
+  const actionGetRequest = ApiGetCall({
+    ...getRequestInfo,
+    onResult: (result) => {
+      setPartialResults((prevResults) => [...prevResults, result]);
+    },
+  });
+  const currentTenant = useSettings().currentTenant;
+  useEffect(() => {
+    if (api) {
+      setGetRequestInfo({
+        url: api.url,
+        data: { tenantFilter: currentTenant, ...api.data },
+        waiting: true,
+        queryKey: api.queryKey,
+      });
+    }
+    if (actionGetRequest.isSuccess) {
+      const convertedOptions = actionGetRequest.data?.map((option) => {
+        return { label: option[api.labelKey], value: option[api.valueKey] };
+      });
+      setUsedOptions(convertedOptions);
+    }
+    if (actionGetRequest.isError) {
+      setUsedOptions({ label: "Error", value: getCippError(actionGetRequest.error) });
+    }
+  }, [api, actionGetRequest.data]);
+
   return (
     <Autocomplete
       key={defaultValue}
       popupIcon={
-        props.isFetching ? <CircularProgress color="inherit" size={20} /> : <ArrowDropDown />
+        props.isFetching || actionGetRequest.isFetching ? (
+          <CircularProgress color="inherit" size={20} />
+        ) : (
+          <ArrowDropDown />
+        )
       }
       value={value}
       filterSelectedOptions
@@ -41,7 +79,7 @@ export const CippAutoComplete = (props) => {
       defaultValue={defaultValue}
       name={name}
       onChange={onChange}
-      options={options}
+      options={api ? usedOptions : options}
       getOptionLabel={(option) => option.label || option}
       sx={sx}
       renderInput={(params) => (

src/pages/identity/users/index.js

@@ -86,6 +86,26 @@ const Page = () => {
       confirmText: "Are you sure you want to set the out of office?",
       multiPost: false,
     },
+    {
+      label: "Add to Group",
+      type: "POST",
+      url: "/api/EditGroup",
+      data: { addMember: { value: "userPrincipalName" }, TenantId: "Tenant" },
+      fields: [
+        {
+          type: "autoComplete",
+          name: "input",
+          label: "Select a user",
+          api: {
+            url: "/api/Listusers",
+            labelKey: "displayName",
+            valueKey: "userPrincipalName",
+          },
+        },
+      ],
+      confirmText: "Are you sure you want to set the out of office?",
+      multiPost: false,
+    },
     {
       label: "Disable Out of Office",
       type: "POST",