Add staff to the movie.

frontend/src/Component/App/EditMovieForm.tsx

@@ -4,6 +4,7 @@ import RatingType from "../../Type/RatingType.tsx";
 import PersonType from "../../Type/PersonType.tsx";
 import axios from "axios";
 import PersonList from "./Details/MovieDetails/PersonList.tsx";
+import AutoCompleteInput from "./EditMovieForm/AutoCompleteInput.tsx";
 
 export default function EditMovieForm({
                                           id,
@@ -65,6 +66,21 @@ export default function EditMovieForm({
     useEffect(updateActorsData, [id]);
     useEffect(updateDirectorsData, [id]);
 
+    const suggestions: PersonType[] = [
+        {
+            name: "Joe",
+            id: "Joe id"
+        },
+        {
+            name: "John",
+            id: "John id"
+        },
+        {
+            name: "Jane",
+            id: "Jane id"
+        },
+    ];
+
     return (
         <div className="edit_form-inner">
             <form>
@@ -111,6 +127,8 @@ export default function EditMovieForm({
                         onChange={(e) => handleRatingChange(e)}
                     />
                 </div>
+
+                <AutoCompleteInput suggestions={suggestions}/>
                 {directorsData && (
                     <PersonList people={directorsData} legend={"Directed by"} />
                 )}

frontend/src/Component/App/EditMovieForm/AutoCompleteInput.tsx

@@ -0,0 +1,54 @@
+import {ChangeEvent, useState} from 'react';
+import PersonType from "../../../Type/PersonType.tsx";
+
+const AutoCompleteInput = ({suggestions}: { suggestions: PersonType[] }) => {
+    const [inputValue, setInputValue] = useState<string>('');
+    const [personId, setPersonId] = useState<string>("");
+    const [filteredSuggestions, setFilteredSuggestions] = useState<PersonType[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const userInput = event.target.value;
+        setInputValue(userInput);
+
+        const filtered = suggestions.filter(suggestion =>
+            suggestion.name.toLowerCase().startsWith(userInput.toLowerCase())
+        );
+
+        setFilteredSuggestions(filtered);
+        setShowSuggestions(true);
+    };
+
+    const handleClick = (suggestion: PersonType) => {
+        setInputValue(suggestion.name);
+        setPersonId(suggestion.id);
+        setFilteredSuggestions([]);
+        setShowSuggestions(false);
+    };
+
+    return (
+        <div>
+            <input
+                type="text"
+                value={inputValue}
+                onChange={handleChange}
+                onFocus={() => setShowSuggestions(true)}
+            />
+            {showSuggestions && inputValue && (
+                <ul>
+                    {filteredSuggestions.map((suggestion, index) => (
+                        <li key={index} onClick={
+                            () => {
+                                handleClick(suggestion)
+                            }
+                        }>
+                            {suggestion.name}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default AutoCompleteInput;

frontend/src/Component/App/Main/Tab/MovieList/ListElement.tsx

@@ -8,6 +8,8 @@ export default function ListElement({movie}: { movie: MovieRatingType }) {
         navigate("/api/movie/" + movie.movieId);
     }
 
+    const wishlistRating = movie.rating >= 7 ? "High" :  movie.rating <= 3 ? "Low" : "Medium"
+
     return (
         <>
             <div className={"list-element"}>
@@ -21,7 +23,7 @@ export default function ListElement({movie}: { movie: MovieRatingType }) {
                         </div>
                     </>
                 ) : (
-                    <span className="movie-priority">Low</span>
+                    <span className="movie-priority">{wishlistRating}</span>
                 )}
 
                 <button className={"edit-button"} onClick={redirect}>Details</button>