tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implemented individual list functionality

Browse source
This commit is contained in:
Edward Tirado Jr 2026-02-25 17:33:37 -06:00
parent 3373380f34
commit c5f74f134d
24 changed files with 592 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/pages/lists/index.vue
View file

@ -2,9 +2,12 @@
import PageTitle from "~/components/common/page-title.vue";
import CreateListForm from "~/components/forms/create-list-form.vue";
import type {List} from "~/types/list";
import type {MovieList} from "~/types/movie-list";
const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
const {data: lists, refresh, error} = await useApiData<MovieList[]>("/api/movielists")
if (error.value) {
alert(error.value)
}
const refreshLists = () => {
refresh()
@ -20,11 +23,14 @@ const refreshLists = () => {
<div class="w-full flex flex-col gap-5">
<h2 class="text-2xl font-bold">Your Lists</h2>
<ul class="w-full flex flex-col gap-3">
<ul class="movie-list">
<li v-for="list in lists"
:key="list.id"
class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
<NuxtLink :to="`lists/${list.id}`">{{ list.name }}</NuxtLink>
>
<NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
<span>{{ list.name }}</span>
<span>{{ list.is_public ? 'Public' : 'Private' }}</span>
</NuxtLink>
</li>
</ul>
</div>
@ -33,7 +39,7 @@ const refreshLists = () => {
<h2 class="text-2xl font-bold">Shared With You</h2>
<ul class="w-full flex flex-col gap-3">
<li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
<NuxtLink to="lists/2">Bob's List</NuxtLink>
<NuxtLink to="lists/2">Bob's MovieList</NuxtLink>
</li>
</ul>
</div>
@ -49,4 +55,28 @@ const refreshLists = () => {
gap: 2rem;
}
.movie-list {
display: grid;
gap: 1rem;
}
.movie-list li {
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
.movielist-details {
display: flex;
gap: 1rem;
justify-content: space-between;
width: 100%;
}
.movie-list li:hover {
background-color: #eee;
padding: 1rem 0;
border-radius: 0.5rem;
}
</style>