diff --git a/frontend/src/Component/App/EditMovieForm.tsx b/frontend/src/Component/App/EditMovieForm.tsx
index 21fcc4e..6f0e2ae 100644
--- a/frontend/src/Component/App/EditMovieForm.tsx
+++ b/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 (
+
+
{directorsData && (
)}
diff --git a/frontend/src/Component/App/EditMovieForm/AutoCompleteInput.tsx b/frontend/src/Component/App/EditMovieForm/AutoCompleteInput.tsx
new file mode 100644
index 0000000..98fa3dc
--- /dev/null
+++ b/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('');
+ const [personId, setPersonId] = useState("");
+ const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+ const [showSuggestions, setShowSuggestions] = useState(false);
+
+ const handleChange = (event: ChangeEvent) => {
+ 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 (
+
+
setShowSuggestions(true)}
+ />
+ {showSuggestions && inputValue && (
+
+ {filteredSuggestions.map((suggestion, index) => (
+ - {
+ handleClick(suggestion)
+ }
+ }>
+ {suggestion.name}
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default AutoCompleteInput;
diff --git a/frontend/src/Component/App/Main/Tab/MovieList/ListElement.tsx b/frontend/src/Component/App/Main/Tab/MovieList/ListElement.tsx
index d8def5e..1645047 100644
--- a/frontend/src/Component/App/Main/Tab/MovieList/ListElement.tsx
+++ b/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 (
<>
@@ -21,7 +23,7 @@ export default function ListElement({movie}: { movie: MovieRatingType }) {
>
) : (
- Low
+ {wishlistRating}
)}