[FEATURE] Fix Autocomplete

src/pages/CreateOptions.jsx

@@ -3,6 +3,7 @@ import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
@@ -22,7 +23,7 @@ const defaultServer = {
 
 export default function Create() {
   const [wl, setWl] = useState([]);
-
+  const [ops, setOps] = useState([]);
   const [spec, setSpec] = useState(defaultServer);
   const versionList = useVersionList();
   const [versions, setVersions] = useState(["latest"]);
@@ -31,6 +32,7 @@ export default function Create() {
     const s = { ...spec };
     s[attr] = val;
     setSpec(s);
+    console.log(s);
   };
 
   useEffect(() => {
@@ -45,7 +47,46 @@ export default function Create() {
 
   const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
 
-  const whitelistUpdate = (e) => alert("Whitelist not Implimented");
+  function opsAdd(e) {
+    const opEntry = e.target.innerHTML ?? e.target.value;
+    if (!opEntry) return;
+    const newOps = [...ops, opEntry];
+    setOps(newOps);
+    updateSpec("ops", newOps.join(","));
+  }
+
+  function whitelistAdd(e) {
+    const wlEntry = e.target.value;
+    if (!wlEntry) return;
+    const newWl = [...wl, wlEntry];
+    setWl(newWl);
+    updateSpec("whitelist", newWl.join(","));
+  }
+
+  const opsRemove =
+    (name, { onDelete: updateAutoComplete }) =>
+    (e) => {
+      updateAutoComplete(e);
+      const newOps = [...ops];
+      const entryIndex = newOps.indexOf(name);
+      if (entryIndex === -1) return;
+      newOps.splice(entryIndex, 1);
+      setOps(newOps);
+      updateSpec("ops", newOps.join(","));
+    };
+
+  const whitelistRemove =
+    (name, { onDelete: updateAutocomplete }) =>
+    (e) => {
+      updateAutocomplete(e);
+      const newWl = [...wl];
+      const entryIndex = newWl.indexOf(name);
+      if (entryIndex === -1) return;
+      newWl.splice(entryIndex, 1);
+      setWl(newWl);
+      updateSpec("whitelist", newWl.join(","));
+    };
+
   const opUpdate = (e) => alert("Op not implimented");
 
   function upsertSpec() {
@@ -127,11 +168,43 @@ export default function Create() {
           multiple
           id="whitelist-autocomplete"
           options={[]}
-          onChange={whitelistUpdate}
+          onChange={whitelistAdd}
           freeSolo
           renderInput={(p) => <TextField {...p} label="Whitelist" />}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => {
+              const defaultChipProps = getTagProps({ index });
+              return (
+                <Chip
+                  label={option}
+                  {...defaultChipProps}
+                  onDelete={whitelistRemove(option, defaultChipProps)}
+                />
+              );
+            })
+          }
         />
-        <TextField label="Ops" onChange={coreUpdate("ops")} />
+        <Autocomplete
+          filterSelectedOptions={true}
+          multiple
+          id="ops-autocomplete"
+          options={wl}
+          onChange={opsAdd}
+          renderInput={(p) => <TextField {...p} label="Ops" />}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => {
+              const defaultChipProps = getTagProps({ index });
+              return (
+                <Chip
+                  label={option}
+                  {...defaultChipProps}
+                  onDelete={opsRemove(option, defaultChipProps)}
+                />
+              );
+            })
+          }
+        />
+        {/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
         {/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
         <TextField
           label="Max Players"