hooked up all items on the list settings section
This commit is contained in:
parent
53df349d9f
commit
91173021b2
32 changed files with 578 additions and 178 deletions
|
|
@ -11,8 +11,10 @@
|
|||
|
||||
<style scoped>
|
||||
.card {
|
||||
padding: 1rem;
|
||||
padding: 2rem;
|
||||
background-color: lightgray;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -13,6 +13,5 @@ const props = defineProps<{
|
|||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
56
app/components/forms/auth/new-password-form.vue
Normal file
56
app/components/forms/auth/new-password-form.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
token: string,
|
||||
email: string
|
||||
}>();
|
||||
|
||||
const {resetPassword} = useAuth();
|
||||
const password = ref("");
|
||||
const passwordConfirmation = ref("");
|
||||
const tokenExpired = ref(false);
|
||||
|
||||
const handlePasswordReset = () => {
|
||||
try {
|
||||
resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof Error && error.message === "TOKEN_EXPIRED")
|
||||
tokenExpired.value = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-show="tokenExpired" class="error">Your password reset token has expired. Please submit a new request.</p>
|
||||
<form class="password-form" @submit.prevent="handlePasswordReset">
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" v-model="password" type="password"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="new-password">Confirm Password</label>
|
||||
<input id="confirm-password" v-model="passwordConfirmation" type="password"/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
padding: 2em;
|
||||
}
|
||||
</style>
|
||||
45
app/components/forms/auth/registration-form.vue
Normal file
45
app/components/forms/auth/registration-form.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
const emits = defineEmits(['registered']);
|
||||
const {register} = useAuth();
|
||||
|
||||
const username = ref("");
|
||||
const email = ref("");
|
||||
|
||||
const handleRegistration = () => {
|
||||
register(email.value, username.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="password-form" @submit.prevent="handleRegistration">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" v-model="username" type="text"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" v-model="email" type="email"/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</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;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@ const createList = () => {
|
|||
<template>
|
||||
<form @submit.prevent="createList">
|
||||
<label for="list_name">Add MovieList</label>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<input v-model="listName"
|
||||
name="list_name"
|
||||
placeholder="MovieList Name"
|
||||
|
|
@ -31,6 +31,13 @@ const createList = () => {
|
|||
</form>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
|
|
@ -46,4 +53,8 @@ input {
|
|||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
gap: 1rem;
|
||||
font: bold 1.5rem sans-serif;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
|
|||
|
|
@ -1,91 +1,123 @@
|
|||
<script lang="ts" setup>
|
||||
import type {MovieList} from "~/types/movie-list";
|
||||
import {type MovieListSettings} from "~/types/movie-list-settings";
|
||||
import Card from "~/components/common/card.vue";
|
||||
|
||||
const emit = defineEmits(['back-to-list'])
|
||||
const emit = defineEmits(['back-to-list', 'update-list'])
|
||||
const props = defineProps<{
|
||||
list: MovieList
|
||||
}>()
|
||||
|
||||
const listSettings: MovieListSettings = {
|
||||
listName: 'My MovieList',
|
||||
isPublic: true,
|
||||
collaborators: [
|
||||
{id: 1, name: 'Ed', role: 3},
|
||||
{id: 2, name: 'Bob', role: 2}
|
||||
],
|
||||
roles: [
|
||||
{id: 1, name: 'Viewer'},
|
||||
{id: 2, name: 'Editor'},
|
||||
{id: 3, name: 'Admin'}
|
||||
]
|
||||
const localName = ref(props.list.name)
|
||||
|
||||
const availableRoles = [
|
||||
{id: 1, name: 'viewer'},
|
||||
{id: 2, name: 'editor'},
|
||||
{id: 3, name: 'admin'}
|
||||
]
|
||||
|
||||
const collaboratorInvites = ref("");
|
||||
const responseMessage = ref("");
|
||||
type BasicResponse = {
|
||||
message: string
|
||||
}
|
||||
const sendInvites = () => {
|
||||
$api<BasicResponse>(`/api/invitations/`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
emails: collaboratorInvites.value.split(',').map(email => email.trim()),
|
||||
movie_list_id: props.list.id
|
||||
}
|
||||
}).then((response) => {
|
||||
collaboratorInvites.value = "";
|
||||
responseMessage.value = response.message;
|
||||
})
|
||||
}
|
||||
|
||||
const deleteList = () => {
|
||||
if (!confirm("Are you sure you want to delete this list?")) return
|
||||
|
||||
$api(`/api/movielists/${props.list.id}`, {
|
||||
method: 'DELETE',
|
||||
}).then(() => {
|
||||
navigateTo('/lists')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-header">
|
||||
<div @click="$emit('back-to-list')">
|
||||
<Icon name="solar:arrow-left-linear"/>
|
||||
<span>Back to MovieList</span>
|
||||
<Card>
|
||||
<div class="settings-header">
|
||||
<div @click="$emit('back-to-list')">
|
||||
<Icon name="solar:arrow-left-linear"/>
|
||||
<span class="back-to-list">Back to MovieList</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="settings-list">
|
||||
<li class="list-setting">
|
||||
<label for="list-name-input">MovieList Name</label>
|
||||
<ul class="settings-list">
|
||||
<li class="list-setting">
|
||||
<label for="list-name-input">MovieList Name</label>
|
||||
|
||||
<div>
|
||||
<input id="list-name-input" :value="listSettings.listName" type="text"/>
|
||||
<button>Save</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-setting">
|
||||
<div>
|
||||
<div>
|
||||
<input id="list-name-input" v-model="localName" type="text"/>
|
||||
<button @click="$emit('update-list', { ...list, name: localName })">Save</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-setting-row">
|
||||
<label for="make-list-public">Make list public</label>
|
||||
<input id="make-list-public" :checked="listSettings.isPublic" type="checkbox"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-setting collaborator-list">
|
||||
<span>Collaborators</span>
|
||||
<details>
|
||||
<summary>Permission levels</summary>
|
||||
<input id="make-list-public" :checked="list.is_public" type="checkbox"
|
||||
@change="$emit('update-list', { ...list, is_public: ($event.target as HTMLInputElement).checked })"/>
|
||||
</li>
|
||||
<li class="list-setting collaborator-list">
|
||||
<span>Collaborators</span>
|
||||
<details>
|
||||
<summary>Permission levels</summary>
|
||||
|
||||
<ul>
|
||||
<li>Viewer: Can view the list, but cannot make any changes.</li>
|
||||
<li>Editor: Can add/remove movies from the list.</li>
|
||||
<li>Admin: Can make any changes to the list including deleting it. Can also invite other users to collaborate
|
||||
on
|
||||
this list.
|
||||
<ul>
|
||||
<li>Viewer: Can view the list, but cannot make any changes.</li>
|
||||
<li>Editor: Can add/remove movies from the list.</li>
|
||||
<li>Admin: Can make any changes to the list including deleting it. Can also invite other users to
|
||||
collaborate
|
||||
on
|
||||
this list.
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<ul class="collaborators">
|
||||
<li v-for="collaborator in list.collaborators" :key="collaborator.id">
|
||||
<span>{{ collaborator.username }}</span>
|
||||
<select v-model="collaborator.role">
|
||||
<option
|
||||
v-for="role in availableRoles"
|
||||
:value="role.name"
|
||||
>
|
||||
{{ role.name }}
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<ul class="collaborators">
|
||||
<li v-for="collaborator in listSettings.collaborators" :key="collaborator.id">
|
||||
<span>{{ collaborator.name }}</span>
|
||||
<select v-model="collaborator.role">
|
||||
<option
|
||||
v-for="role in listSettings.roles"
|
||||
:value="role.id"
|
||||
>
|
||||
{{ role.name }}
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-setting">
|
||||
<label for="invite-collaborators-input">Invite Collaborators</label>
|
||||
<textarea name="invite-collaborators-input" type="text"></textarea>
|
||||
</li>
|
||||
<li class="list-setting">
|
||||
<label for="delete-list-button">Delete MovieList</label>
|
||||
<button name="delete-list-button">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-setting">
|
||||
<form class="list-setting" @submit.prevent="sendInvites">
|
||||
<label for="invite-collaborators-input">Invite Collaborators</label>
|
||||
<textarea v-model="collaboratorInvites" name="invite-collaborators-input" type="text"></textarea>
|
||||
<button>Send Invites</button>
|
||||
<span v-if="responseMessage">{{ responseMessage }}</span>
|
||||
</form>
|
||||
</li>
|
||||
<li class="list-setting">
|
||||
<label for="delete-list-button">Delete MovieList</label>
|
||||
<button name="delete-list-button" @click="deleteList">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.back-to-list:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.collaborator-list {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -101,10 +133,15 @@ const listSettings: MovieListSettings = {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.list-setting-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
padding-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +158,7 @@ const listSettings: MovieListSettings = {
|
|||
|
||||
.settings-list > li {
|
||||
display: flex;
|
||||
border: gray 1px solid;
|
||||
border: rgba(0, 0, 0, 0.2) 1px solid;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,12 +16,11 @@ const emit = defineEmits<{
|
|||
'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 currentSort = ref<SortOption>({field: 'title', direction: 'asc'});
|
||||
|
||||
const sortMovies = (movies: Movie[]): Movie[] => {
|
||||
if (!currentSort.value) return movies;
|
||||
|
|
@ -42,6 +41,8 @@ const sortMovies = (movies: Movie[]): Movie[] => {
|
|||
});
|
||||
}
|
||||
|
||||
const filteredMovies = ref<Movie[]>(sortMovies(props.movies));
|
||||
|
||||
const applySort = (field: SortField, direction: SortDirection) => {
|
||||
currentSort.value = {field, direction};
|
||||
filteredMovies.value = sortMovies(filteredMovies.value);
|
||||
|
|
@ -192,7 +193,8 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
|
|||
|
||||
.movie-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
|
||||
/*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
|
||||
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -212,6 +214,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
|
|||
object-fit: fill;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 25rem;
|
||||
}
|
||||
|
||||
.movie img.movie-poster-error {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@ const props = defineProps<{
|
|||
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})
|
||||
const scores: MovieCriticScore[] = []
|
||||
props.selectedMovie.critic_scores.map((score: MovieCriticScore) => {
|
||||
scores.push({Value: score.Value, Source: score.Source})
|
||||
})
|
||||
|
||||
return parsedScores
|
||||
return scores
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -49,10 +48,11 @@ const criticScores = computed(() => {
|
|||
</div>
|
||||
<div class="movie-detail">
|
||||
<dt class="detail-title">Critic Scores:</dt>
|
||||
<div v-for="score in criticScores" :key="score.Source">
|
||||
<div v-for="score in criticScores" v-if="criticScores && criticScores.length > 0" :key="score.Source">
|
||||
<dd class="critic-score-source">{{ score.Source }}</dd>
|
||||
<dd>{{ score.Value }}</dd>
|
||||
</div>
|
||||
<dd v-else>No critic scores available</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
|
|
@ -84,7 +84,8 @@ dt {
|
|||
}
|
||||
|
||||
.movie-details img {
|
||||
max-width: 15em;
|
||||
max-width: 20em;
|
||||
max-height: 25em;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
|
|
@ -96,6 +97,7 @@ dt {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type {MovieSearchResult} from "~/types/movie-search-results";
|
||||
import type {MovieList} from "~/types/movie-list";
|
||||
import type {ResourceResponse} from "~/types/api";
|
||||
|
||||
const emit = defineEmits(['add-movie']);
|
||||
const props = defineProps<{
|
||||
|
|
@ -21,13 +22,13 @@ const searchMovies = () => {
|
|||
}
|
||||
|
||||
const addMovieToList = (movie: MovieSearchResult) => {
|
||||
$api<MovieList>(`/api/movielists/${props.movieListId}/movies`, {
|
||||
$api<ResourceResponse<MovieList>>(`/api/movielists/${props.movieListId}/movies`, {
|
||||
body: {
|
||||
movie: movie
|
||||
},
|
||||
method: "POST"
|
||||
}).then((list) => {
|
||||
emit('add-movie', list);
|
||||
emit('add-movie', list.data);
|
||||
}).catch((error) => {
|
||||
alert(error.message)
|
||||
});
|
||||
|
|
@ -89,7 +90,7 @@ const addMovieToList = (movie: MovieSearchResult) => {
|
|||
|
||||
.movie-result img {
|
||||
height: 10rem;
|
||||
max-width: 7rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue