Merge pull request 'implemented individual list functionality' (#3) from list-updates into main
Reviewed-on: tiradoe/movie-night-web-nuxt#3
This commit is contained in:
commit
53df349d9f
24 changed files with 592 additions and 109 deletions
18
app/components/common/card.vue
Normal file
18
app/components/common/card.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="header">
|
||||
<span class="logo">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
<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>
|
||||
<button @click="emit('add-movie')">Add Movie</button>
|
||||
</div>
|
||||
<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)">
|
||||
<div class="movie-poster-container">
|
||||
<img
|
||||
:class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
|
||||
:src="movie.poster"
|
||||
alt=""
|
||||
class="movie-poster"
|
||||
src="http://fart.fart"
|
||||
@error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
|
||||
@error="(e) => handleImageError(e, movie.id)"
|
||||
/>
|
||||
<span class="movie-title">{{ movie.title }}</span>
|
||||
<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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
95
app/components/panels/movie-search.vue
Normal file
95
app/components/panels/movie-search.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -9,6 +9,7 @@ const emit = defineEmits<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="slideout-backdrop">
|
||||
<div v-if="open" class="backdrop" @click="emit('close')"/>
|
||||
</Transition>
|
||||
|
|
@ -19,6 +20,7 @@ const emit = defineEmits<{
|
|||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ export const $api = <T>(
|
|||
Accept: 'application/json',
|
||||
...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
|
||||
},
|
||||
onResponseError({response}) {
|
||||
if (response.status === 401) {
|
||||
navigateTo('/auth/login')
|
||||
}
|
||||
},
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@ export const useApiData = <T>(
|
|||
...requestHeaders,
|
||||
...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
|
||||
})),
|
||||
onResponseError({response}) {
|
||||
if (response.status === 401) {
|
||||
navigateTo('/auth/login')
|
||||
}
|
||||
},
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
export const useAuth = () => {
|
||||
const config = useRuntimeConfig()
|
||||
const router = useRouter()
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
await $fetch('/sanctum/csrf-cookie', {
|
||||
|
|
@ -8,12 +7,12 @@ export const useAuth = () => {
|
|||
credentials: 'include',
|
||||
})
|
||||
await $api('/api/login', {method: 'POST', body: {email, password}})
|
||||
await router.push('/')
|
||||
await navigateTo('/')
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
await $api('/api/logout', {method: 'POST'})
|
||||
await router.push('/')
|
||||
await navigateTo('/auth/login')
|
||||
}
|
||||
|
||||
return {login, logout}
|
||||
|
|
|
|||
15
app/layouts/auth.vue
Normal file
15
app/layouts/auth.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="auth-container">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,4 +16,10 @@
|
|||
max-width: 1280px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
9
app/middleware/auth.global.ts
Normal file
9
app/middleware/auth.global.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default defineNuxtRouteMiddleware((to) => {
|
||||
const publicRoutes = ['/auth/login']
|
||||
if (publicRoutes.includes(to.path)) return
|
||||
|
||||
const xsrfToken = useCookie('XSRF-TOKEN')
|
||||
if (!xsrfToken.value) {
|
||||
return navigateTo('/auth/login')
|
||||
}
|
||||
})
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
import LoginForm from "~/components/forms/auth/login-form.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
import PageTitle from "~/components/common/page-title.vue";
|
||||
import {type Movie} from "~/types/movie";
|
||||
import {type List} from "~/types/list";
|
||||
import {type MovieList} from "~/types/movie-list";
|
||||
import MovieDetails from "~/components/panels/movie-details.vue";
|
||||
import MovieSearch from "~/components/panels/movie-search.vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const movieListId = route.params.id as string;
|
||||
const settingsActive = ref(false);
|
||||
const movieSearchActive = ref(false);
|
||||
const toggleSettings = () => settingsActive.value = !settingsActive.value
|
||||
|
|
@ -11,24 +15,41 @@ const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.val
|
|||
|
||||
const selectedMovie = ref<Movie | null>(null);
|
||||
|
||||
const list: List = {
|
||||
id: 1,
|
||||
name: 'List Name',
|
||||
isPublic: true,
|
||||
listSettings: {
|
||||
listName: 'List Name',
|
||||
isPublic: true,
|
||||
collaborators: [],
|
||||
roles: []
|
||||
const {data: list} = await useApiData<MovieList>(`/api/movielists/${movieListId}`);
|
||||
|
||||
const updateList = (updatedList: MovieList) => {
|
||||
list.value = updatedList;
|
||||
}
|
||||
};
|
||||
|
||||
const removeMovieFromList = (movieId: number) => {
|
||||
$api<MovieList>(`/api/movielists/${list.value.id}/movies/${movieId}`, {
|
||||
method: "DELETE"
|
||||
}).then((data) => {
|
||||
selectedMovie.value = null;
|
||||
list.value = data;
|
||||
}).catch((error) => {
|
||||
alert(error.message)
|
||||
});
|
||||
}
|
||||
///const list: MovieList = {
|
||||
/// id: 1,
|
||||
/// name: 'MovieList Name',
|
||||
/// isPublic: true,
|
||||
/// listSettings: {
|
||||
/// listName: 'MovieList Name',
|
||||
/// isPublic: true,
|
||||
/// collaborators: [],
|
||||
/// roles: []
|
||||
/// }
|
||||
///};
|
||||
|
||||
const movies: Movie[] = []
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="list">
|
||||
<div class="page-header">
|
||||
<PageTitle title="List Name"/>
|
||||
<PageTitle :title="list.name"/>
|
||||
<Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,18 +61,19 @@ const movies: Movie[] = []
|
|||
|
||||
<MovieList
|
||||
v-else
|
||||
:movies="movies"
|
||||
:movies="list.movies"
|
||||
@movie-clicked="selectedMovie = $event"
|
||||
@add-movie="toggleMovieSearch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
|
||||
<MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie"/>
|
||||
<MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie" @remove-movie="removeMovieFromList"/>
|
||||
</SlideoutPanel>
|
||||
|
||||
<SlideoutPanel :open="movieSearchActive" class="movie-search-panel"
|
||||
<SlideoutPanel :open="movieSearchActive"
|
||||
@close="movieSearchActive = false">
|
||||
<p>Movie Search</p>
|
||||
<MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="updateList"/>
|
||||
</SlideoutPanel>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {type ListSettings} from "~/types/list-settings";
|
||||
|
||||
export type List = {
|
||||
id: number,
|
||||
name: string
|
||||
isPublic: boolean
|
||||
listSettings: ListSettings
|
||||
}
|
||||
|
||||
5
app/types/movie-critic-score.ts
Normal file
5
app/types/movie-critic-score.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type MovieCriticScore = {
|
||||
Source: string
|
||||
Value: string
|
||||
}
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import type {Collaborator} from "~/types/collaborator";
|
||||
import type {Role} from "~/types/role";
|
||||
|
||||
export type ListSettings = {
|
||||
export type MovieListSettings = {
|
||||
listName: string,
|
||||
isPublic: boolean,
|
||||
collaborators: Collaborator[],
|
||||
11
app/types/movie-list.ts
Normal file
11
app/types/movie-list.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import {type MovieListSettings} from "~/types/movie-list-settings";
|
||||
import type {Movie} from "~/types/movie";
|
||||
|
||||
export type MovieList = {
|
||||
id: number,
|
||||
name: string
|
||||
is_public: boolean
|
||||
movieListSettings: MovieListSettings
|
||||
movies: Movie[]
|
||||
}
|
||||
|
||||
8
app/types/movie-search-results.ts
Normal file
8
app/types/movie-search-results.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export type MovieSearchResult = {
|
||||
title: string
|
||||
year: number
|
||||
imdbId: string
|
||||
type: string
|
||||
poster: string
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
export type Movie = {
|
||||
id: number,
|
||||
title: string
|
||||
year: number
|
||||
imdb_id: string
|
||||
director: string
|
||||
actors: string
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue