Merge pull request #779 from marcelhillesheim/feature/player_autocomp…

…lete_v2

Feature/player autocomplete v2

rcongui/src/components/form/custom/PlayerAutocompletion.jsx

@@ -0,0 +1,87 @@
+import React, {useEffect, useMemo, useRef, useState} from "react";
+import {debounce} from "lodash";
+import {handle_http_errors, postData, showResponse} from "@/utils/fetchUtils";
+import Autocomplete from "@mui/material/Autocomplete";
+import Typography from "@mui/material/Typography";
+import {Avatar, Box} from "@mui/material";
+import TextField from "@mui/material/TextField";
+
+export default function PlayerAutocompletion({player, setPlayer}) {
+
+  const [suggestions, setSuggestions] = useState([]);
+
+  const nameRef = useRef(player.name);
+
+  useEffect(() => {
+    debouncedFetchSuggestions();
+    nameRef.current = player.name;
+  }, [player.name]);
+
+  const fetchSuggestions = () => {
+    setSuggestions([]);
+
+    if (!nameRef.current) {
+      return;
+    }
+
+    const params = {page_size: 15,
+      page: 1,
+      player_name: nameRef.current,
+      exact_name_match: false,
+      ignore_accent: true,
+    };
+    postData(
+      `${process.env.REACT_APP_API_URL}get_players_history`,
+      params
+    )
+      .then((response) => showResponse(response, "get_players_history"))
+      .then((data) => {
+        if (data.failed) {
+          return;
+        }
+        setSuggestions(data.result.players);
+      })
+      .catch(handle_http_errors);
+  };
+
+  const debouncedFetchSuggestions = useMemo(
+    () => debounce(fetchSuggestions, 300),
+    []
+  );
+
+  return <Autocomplete
+    freeSolo
+    autoHighlight
+    fullWidth
+    options={suggestions}
+    filterOptions={(options) => options}
+    onChange={(event, value, reason) => {
+      setPlayer(prev => ({...prev,
+        name: value?.names[0]?.name ?? '',
+        player_id: value?.player_id ?? prev.player_id,
+      }));
+    }}
+    getOptionLabel={(option) => option.names[0]?.name}
+    renderOption={(props, option) => {
+      return <Box {...props}>
+        <Avatar
+          variant="square"
+          src={option.steaminfo?.profile?.avatarfull}
+        >
+          {option.names[0]?.name[0].toUpperCase()}
+        </Avatar>
+        <Typography sx={{marginLeft: 1}}>{option.names[0]?.name}</Typography>
+      </Box>
+    }
+    }
+    inputValue={player.name}
+    onInputChange={(event, value) => setPlayer(prev => ({...prev, name: value}))}
+    renderInput={(params) =>
+      <TextField
+        {...params}
+        value={player.name}
+        label={"Name"}
+        type="text"
+      />}
+  />
+};

rcongui/src/pages/settings/console-admins/index.jsx

@@ -28,6 +28,7 @@ import debounce from "lodash/debounce";
 import { InputFileUpload } from "@/components/shared/InputFileUpload";
 import exportFile from "@/utils/exportFile";
 import { usePlayerSidebar } from "@/hooks/usePlayerSidebar";
+import PlayerAutocompletion from "@/components/form/custom/PlayerAutocompletion";
 
 const INTENT = {
   ADD_ADMIN: "add_admin",
@@ -65,14 +66,15 @@ export const action = async ({ request }) => {
   return results;
 };
 
-const initialAdmin = {
-  player_id: "",
-  name: "",
-  role: "",
-};
-
 const ConsoleAdminsPage = () => {
   const { admins: serverAdmins, adminGroups } = useLoaderData();
+
+  const initialAdmin = {
+    player_id: "",
+    name: "",
+    role: adminGroups.includes("spectator") ? "spectator" : "",
+  };
+
   const [admins, setAdmins] = useState(serverAdmins);
   const [checked, setChecked] = useState(new Set());
   const [searched, setSearched] = useState("");
@@ -274,14 +276,7 @@ const ConsoleAdminsPage = () => {
         }}
       >
         <Stack direction={"row"} gap={1} sx={{ mb: 1, p: 0.5 }}>
-          <TextField
-            autoComplete={"off"}
-            value={newAdmin.name}
-            onChange={handleInputChange}
-            name={"name"}
-            fullWidth
-            label={"Name"}
-          />
+          <PlayerAutocompletion player={newAdmin} setPlayer={setNewAdmin}/>
           <TextField
             autoComplete={"off"}
             value={newAdmin.player_id}

rcongui/src/pages/settings/vip/index.jsx

@@ -34,6 +34,7 @@ import {
 } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { getVipExpirationStatus, getVipExpirationStatusColor } from "@/utils/lib";
+import PlayerAutocompletion from "@/components/form/custom/PlayerAutocompletion";
 
 dayjs.extend(relativeTimePlugin);
 dayjs.extend(localizedFormatPlugin);
@@ -306,14 +307,7 @@ const VipPage = () => {
         }}
       >
         <Stack direction={"row"} gap={1} sx={{ mb: 1, p: 0.5 }}>
-          <TextField
-            autoComplete={"off"}
-            value={addFormData.name}
-            onChange={handleInputChange}
-            name={"name"}
-            fullWidth
-            label={"Name"}
-          />
+          <PlayerAutocompletion player={addFormData} setPlayer={setAddFormData}/>
           <TextField
             autoComplete={"off"}
             value={addFormData.player_id}