implemented individual list functionality

app/components/panels/movie-details.vue

@@ -1,37 +1,127 @@
 <script lang="ts" setup>
 import type {Movie} from "~/types/movie";
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
 
-defineProps<{
+const props = defineProps<{
   selectedMovie: Movie;
 }>();
 
+const emit = defineEmits(['remove-movie']);
+
+const criticScores = computed(() => {
+  const scores = JSON.parse(props.selectedMovie.critic_scores)
+  const parsedScores: MovieCriticScore[] = []
+  scores.map((score: MovieCriticScore) => {
+    parsedScores.push({Value: score.Value, Source: score.Source})
+  })
+
+  return parsedScores
+})
 </script>
 
 <template>
   <div class="movie-details">
-    <img :alt="selectedMovie!.title" :src="selectedMovie!.poster" class="movie-poster"/>
-    <h2 class="movie-title">{{ selectedMovie!.title }}</h2>
+    <div class="movie-details-header">
+      <img :alt="selectedMovie.title"
+           :src="selectedMovie.poster"
+           class="movie-poster"
+           @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
+      />
+      <h2 class="movie-title">{{ selectedMovie.title }} ({{ selectedMovie.year }})</h2>
+    </div>
+    <dl class="movie-details-list">
+      <div class="movie-detail">
+        <dt>Plot</dt>
+        <dd>{{ selectedMovie.plot }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Genre</dt>
+        <dd>{{ selectedMovie.genre }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Actors</dt>
+        <dd>{{ selectedMovie.actors }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Directed By</dt>
+        <dd>{{ selectedMovie.director }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt class="detail-title">Critic Scores:</dt>
+        <div v-for="score in criticScores" :key="score.Source">
+          <dd class="critic-score-source">{{ score.Source }}</dd>
+          <dd>{{ score.Value }}</dd>
+        </div>
+      </div>
+    </dl>
+
+    <button type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
   </div>
 </template>
 
 <style scoped>
+dt {
+  font-weight: bold;
+}
+
+.critic-score-source {
+}
+
+.movie-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 .movie-details {
   display: flex;
   flex-direction: column;
   padding: 2rem;
+  justify-content: center;
+  max-width: 40rem;
+  margin: 0 auto;
 }
 
+.movie-details img {
+  max-width: 15em;
+  margin: 2rem auto;
+}
+
+.movie-details-header {
+  margin: 2em 0;
+}
+
+.movie-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+
 .movie-poster {
   width: 100%;
 }
 
+.movie-title {
+  text-align: center;
+}
+
+@media (max-width: 1300px) {
+  .movie-plot {
+    margin: unset;
+  }
+}
+
 @media (max-width: 767px) {
   .movie-details {
     align-items: center;
   }
 
-  .movie-poster {
-    margin: 0 auto;
+
+  .movie-details img {
+    max-height: 15em;
+    max-width: 10em;
   }
 }
 

app/components/panels/movie-search.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type {MovieSearchResult} from "~/types/movie-search-results";
+import type {MovieList} from "~/types/movie-list";
+
+const emit = defineEmits(['add-movie']);
+const props = defineProps<{
+  movieListId: string
+}>()
+
+const searchQuery = ref("");
+
+const movies = ref<MovieSearchResult[]>([]);
+const searchMovies = () => {
+  $api<MovieSearchResult[]>(`/api/movies/search/${searchQuery.value}`, {
+    method: "GET"
+  }).then((data) => {
+    movies.value = data.results
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+
+const addMovieToList = (movie: MovieSearchResult) => {
+  $api<MovieList>(`/api/movielists/${props.movieListId}/movies`, {
+    body: {
+      movie: movie
+    },
+    method: "POST"
+  }).then((list) => {
+    emit('add-movie', list);
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+
+</script>
+
+<template>
+  <div>
+    <h2>Movie Search</h2>
+    <form @submit.prevent="searchMovies">
+      <label for="search">Search Movies</label>
+
+      <div>
+        <input id="search" v-model="searchQuery" type="text"/>
+        <button>Search</button>
+      </div>
+    </form>
+    <ul class="results-list">
+      <li v-for="movie in movies" :key="movie.imdbId" class="movie-result">
+        <img :src="movie.poster" alt="movie poster">
+        <div class="movie-details">
+          <span>{{ movie.title }}</span>
+          <span>{{ movie.year }}</span>
+          <button @click="addMovieToList(movie)">Add Movie</button>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+
+</template>
+
+<style scoped>
+.results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.movie-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.movie-result {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid black;
+  align-items: center;
+  text-align: center;
+}
+
+.movie-result img {
+  height: 10rem;
+  max-width: 7rem;
+}
+
+</style>