movie-night-web/app/pages/lists/index.vue

<script lang="ts" setup>

import PageTitle from "~/components/common/page-title.vue";
import CreateListForm from "~/components/forms/create-list-form.vue";
import Card from "~/components/common/card.vue";
import type {MovieListGroup} from "~/types/movie-list-group";

const {data: listGroup, refresh, error} = await useApiData<MovieListGroup>("/api/movielists")
if (error.value) {
  alert(error.value)
}

const refreshLists = () => {
  refresh()
}

</script>

<template>
  <div class="content">
    <PageTitle title="Lists"/>
    <Card class="card">
      <CreateListForm @refreshLists="refreshLists"/>

      <div class="w-full flex flex-col gap-5">
        <h2 class="text-2xl font-bold">Your Lists</h2>
        <span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
        <ul v-else class="movie-list">
          <li v-for="list in listGroup?.movie_lists"
              :key="list.id"
          >
            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
              <span>{{ list.name }}</span>
              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
            </NuxtLink>
          </li>
        </ul>
      </div>

      <div class="w-full flex flex-col gap-5">
        <h2 class="text-2xl font-bold">Shared With You</h2>
        <span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
        <ul v-else class="movie-list">
          <li v-for="list in listGroup?.shared_lists"
              :key="list.id"
          >
            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
              <span>{{ list.name }}</span>
              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
            </NuxtLink>
          </li>
        </ul>
      </div>
    </Card>
  </div>

</template>

<style scoped>
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.movie-list {
  display: grid;
}

.movie-list li {
  display: flex;
  justify-content: space-between;
  margin: 0 -1rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

.movielist-details {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  width: 100%;
}

.movie-list li:hover {
  background-color: #eee;
}

.not-found-message {
  display: block;
  padding: 1em 0;
}

</style>