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 (
@@ -111,6 +127,8 @@ export default function EditMovieForm({ onChange={(e) => handleRatingChange(e)} />
+ + {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} )}