implemented individual list functionality

2026-02-25 17:33:37 -06:00 · 2026-02-25 17:33:37 -06:00 · c5f74f134d
commit c5f74f134d
parent 3373380f34
24 changed files with 592 additions and 109 deletions
--- a/app/components/common/card.vue
+++ b/app/components/common/card.vue
@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="card">
+    <slot/>
+  </div>
+
+</template>
+
+<style scoped>
+.card {
+  padding: 1rem;
+  background-color: lightgray;
+}
+
+</style>
--- a/app/components/forms/auth/login-form.vue
+++ b/app/components/forms/auth/login-form.vue
@ -23,6 +23,14 @@ const handleLogin = () => login(email.value, password.value)
 </template>

 <style scoped>
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
 .form-group {
  display: flex;
  flex-direction: column;
--- a/app/components/forms/create-list-form.vue
+++ b/app/components/forms/create-list-form.vue
@ -13,9 +13,6 @@ const createList = () => {
    listName.value = "";
    refreshLists();
  }).catch((error) => {
-    if (error.response?.status === 401) {
-      useAuth().logout();
-    }
    alert(error.message)
  });
 }
@ -23,11 +20,11 @@ const createList = () => {

 <template>
  <form @submit.prevent="createList">
-    <label for="list_name">Add List</label>
+    <label for="list_name">Add MovieList</label>
    <div>
      <input v-model="listName"
             name="list_name"
-             placeholder="List Name"
+             placeholder="MovieList Name"
             type="text">
      <button>Add</button>
    </div>
--- a/app/components/header.vue
+++ b/app/components/header.vue
@ -1,6 +1,3 @@
-<script lang="ts" setup>
-</script>
-
 <template>
  <nav class="header">
    <span class="logo">
--- a/app/components/list-settings.vue
+++ b/app/components/list-settings.vue
@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import type {List} from "~/types/list";
-import {type ListSettings} from "~/types/list-settings";
+import type {MovieList} from "~/types/movie-list";
+import {type MovieListSettings} from "~/types/movie-list-settings";

 const emit = defineEmits(['back-to-list'])
 const props = defineProps<{
-  list: List
+  list: MovieList
 }>()

-const listSettings: ListSettings = {
-  listName: 'My List',
+const listSettings: MovieListSettings = {
+  listName: 'My MovieList',
  isPublic: true,
  collaborators: [
    {id: 1, name: 'Ed', role: 3},
@ -26,13 +26,13 @@ const listSettings: ListSettings = {
  <div class="settings-header">
    <div @click="$emit('back-to-list')">
      <Icon name="solar:arrow-left-linear"/>
-      <span>Back to List</span>
+      <span>Back to MovieList</span>
    </div>
  </div>

  <ul class="settings-list">
    <li class="list-setting">
-      <label for="list-name-input">List Name</label>
+      <label for="list-name-input">MovieList Name</label>

      <div>
        <input id="list-name-input" :value="listSettings.listName" type="text"/>
@ -79,7 +79,7 @@ const listSettings: ListSettings = {
      <textarea name="invite-collaborators-input" type="text"></textarea>
    </li>
    <li class="list-setting">
-      <label for="delete-list-button">Delete List</label>
+      <label for="delete-list-button">Delete MovieList</label>
      <button name="delete-list-button">Delete</button>
    </li>
  </ul>
--- a/app/components/movie-list.vue
+++ b/app/components/movie-list.vue
@ -1,46 +1,122 @@
 <script lang="ts" setup>
 import {type Movie} from "~/types/movie";
 import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
+import Card from "~/components/common/card.vue";
+
+type SortField = 'title' | 'year'
+type SortDirection = 'asc' | 'desc'
+type SortOption = { field: SortField, direction: SortDirection }

 const props = defineProps<{
  movies: Movie[]
 }>()

-const filteredMovies = ref<Movie[]>(props.movies);
-const searchQuery = ref('');
-
 const emit = defineEmits<{
  'movie-clicked': [movie: Movie],
  'add-movie': []
 }>()

+const filteredMovies = ref<Movie[]>(props.movies);
+const searchQuery = ref('');
+const imageErrors = ref<Set<number>>(new Set());
+const sortMenuOpen = ref(false);
+const sortMenuRef = ref<HTMLElement | null>(null);
+const currentSort = ref<SortOption | null>(null);
+
+const sortMovies = (movies: Movie[]): Movie[] => {
+  if (!currentSort.value) return movies;
+
+  const {field, direction} = currentSort.value;
+  return [...movies].sort((a, b) => {
+    const aVal = a[field];
+    const bVal = b[field];
+
+    let comparison: number;
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      comparison = aVal.localeCompare(bVal);
+    } else {
+      comparison = (aVal as number) - (bVal as number);
+    }
+
+    return direction === 'asc' ? comparison : -comparison;
+  });
+}
+
+const applySort = (field: SortField, direction: SortDirection) => {
+  currentSort.value = {field, direction};
+  filteredMovies.value = sortMovies(filteredMovies.value);
+  sortMenuOpen.value = false;
+}
+
+const toggleSortMenu = () => {
+  sortMenuOpen.value = !sortMenuOpen.value;
+}
+
+const onSortClickOutside = (e: MouseEvent) => {
+  if (sortMenuRef.value && !sortMenuRef.value.contains(e.target as Node)) {
+    sortMenuOpen.value = false;
+  }
+}
+
+onMounted(() => document.addEventListener('click', onSortClickOutside))
+onUnmounted(() => document.removeEventListener('click', onSortClickOutside))
+
+watch(() => props.movies, (newMovies) => {
+  filteredMovies.value = sortMovies(newMovies);
+});
+
 const movieSearch = () => {
-  filteredMovies.value = props.movies.filter(
+  const filtered = props.movies.filter(
      movie => movie.title.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
+  filteredMovies.value = sortMovies(filtered);
+}
+
+const handleImageError = (e: Event, movieId: number) => {
+  (e.target as HTMLImageElement).src = posterPlaceholder;
+  imageErrors.value.add(movieId);
+}
+
+const isSortActive = (field: SortField, direction: SortDirection): boolean => {
+  return currentSort.value?.field === field && currentSort.value?.direction === direction;
 }

 </script>

 <template>
-  <div>
+  <Card>
    <div class="list-controls-container">
      <div class="list-controls">
        <input v-model="searchQuery" placeholder="Search Movies" type="text" @keyup="movieSearch"/>
-        <Icon
-            class="list-controls-icon"
-            name="solar:filter-bold"
-            size="24"
-            title="Filter Movies"
-        />
-        <Icon
-            class="list-controls-icon"
-            name="solar:sort-vertical-linear"
-            size="24"
-            title="Sort Movies"
-        />
+        <div ref="sortMenuRef" class="sort-menu-container">
+          <Icon
+              class="list-controls-icon"
+              name="solar:sort-vertical-linear"
+              size="24"
+              title="Sort Movies"
+              @click="toggleSortMenu"
+          />
+          <ul v-if="sortMenuOpen" class="sort-dropdown">
+            <li @click.stop="applySort('title', 'asc')">
+              <Icon v-if="isSortActive('title', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Title (A-Z)
+            </li>
+            <li @click.stop="applySort('title', 'desc')">
+              <Icon v-if="isSortActive('title', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Title (Z-A)
+            </li>
+            <li @click.stop="applySort('year', 'asc')">
+              <Icon v-if="isSortActive('year', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Year (Oldest First)
+            </li>
+            <li @click.stop="applySort('year', 'desc')">
+              <Icon v-if="isSortActive('year', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Year (Newest First)
+            </li>
+          </ul>
+        </div>
      </div>
-      <button @click="emit('add-movie')">Add Movie</button>
+      <button class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
    </div>
    <div v-if="filteredMovies.length === 0" class="movie-quote">
      <span class="quote">"You complete me."</span>
@ -48,22 +124,29 @@ const movieSearch = () => {
    </div>
    <ul v-else class="movie-list">
      <li v-for="movie in filteredMovies" :key="movie.id" class="movie" @click="emit('movie-clicked', movie)">
-        <img
-            alt=""
-            class="movie-poster"
-            src="http://fart.fart"
-            @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
-        />
-        <span class="movie-title">{{ movie.title }}</span>
+        <div class="movie-poster-container">
+          <img
+              :class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
+              :src="movie.poster"
+              alt=""
+              class="movie-poster"
+              @error="(e) => handleImageError(e, movie.id)"
+          />
+          <div v-if="imageErrors.has(movie.id)" class="movie-title-overlay">
+            {{ movie.title }}
+          </div>
+        </div>
      </li>
    </ul>
-  </div>
+  </Card>
 </template>

 <style scoped>
+
 .list-controls-container {
  display: flex;
  justify-content: space-between;
+  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
 }
@ -74,6 +157,39 @@ const movieSearch = () => {
  gap: 0.5rem;
 }

+.sort-menu-container {
+  position: relative;
+}
+
+.sort-dropdown {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  list-style: none;
+  padding: 0.25rem 0;
+  min-width: 10rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
+.sort-dropdown li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sort-dropdown li:hover {
+  background: #f0f0f0;
+}
+
 .movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
@ -86,6 +202,37 @@ const movieSearch = () => {
  cursor: pointer;
 }

+.movie-poster-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.movie img {
+  object-fit: fill;
+  width: 100%;
+  height: 100%;
+}
+
+.movie img.movie-poster-error {
+  object-fit: cover;
+}
+
+.movie-title-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  max-width: 90%;
+  word-wrap: break-word;
+}
+
 .movie-quote {
  display: flex;
  flex-direction: column;
@ -93,4 +240,20 @@ const movieSearch = () => {
  gap: 1rem;
  margin: 5rem 0;
 }
+
+@media (max-width: 640px) {
+  .list-controls-container {
+    flex-direction: column;
+  }
+
+  .list-controls {
+    width: 100%;
+    border-bottom: 2px solid black;
+    padding-bottom: 1rem;
+  }
+
+  .list-controls input {
+    flex-grow: 1;
+  }
+}
 </style>
--- a/app/components/panels/movie-details.vue
+++ b/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;
  }
 }

--- a/app/components/panels/movie-search.vue
+++ b/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>
--- a/app/components/slideout-panel.vue
+++ b/app/components/slideout-panel.vue
@ -9,16 +9,18 @@ const emit = defineEmits<{
 </script>

 <template>
-  <Transition name="slideout-backdrop">
-    <div v-if="open" class="backdrop" @click="emit('close')"/>
-  </Transition>
+  <Teleport to="body">
+    <Transition name="slideout-backdrop">
+      <div v-if="open" class="backdrop" @click="emit('close')"/>
+    </Transition>

-  <Transition name="slideout">
-    <div v-if="open" class="panel">
-      <button class="close-button" @click="emit('close')">&times;</button>
-      <slot/>
-    </div>
-  </Transition>
+    <Transition name="slideout">
+      <div v-if="open" class="panel">
+        <button class="close-button" @click="emit('close')">&times;</button>
+        <slot/>
+      </div>
+    </Transition>
+  </Teleport>
 </template>

 <style scoped>
@ -34,7 +36,7 @@ const emit = defineEmits<{
  top: 0;
  right: 0;
  bottom: 0;
-  width: 400px;
+  width: 40%;
  background: var(--color-surface, #fff);
  z-index: 101;
  overflow-y: auto;
@ -57,7 +59,10 @@ const emit = defineEmits<{

@media (max-width: 767px) {
  .panel {
-    width: 100%;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    padding: 0.5rem;
  }
 }