updated search to use typescript and composition api
This commit is contained in:
parent
2187c2637b
commit
6b4617cf3d
6 changed files with 226 additions and 159 deletions
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div id="movie-modal" class="movie-modal movie-card hidden p-5">
|
||||
<span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
|
||||
<div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5">
|
||||
<span
|
||||
class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
|
||||
@click="toggleModal()"
|
||||
>
|
||||
X
|
||||
</span>
|
||||
<slot class=""></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modal",
|
||||
methods: {
|
||||
closeModal: function () {
|
||||
document.getElementById("movie-modal").classList.add("hidden")
|
||||
},
|
||||
},
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
const visible = ref(false);
|
||||
|
||||
const toggleModal = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
|
||||
defineExpose({ toggleModal });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,70 @@
|
|||
<template>
|
||||
<form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
|
||||
<label class="px-0 " for="search-field">Search</label>
|
||||
<label class="px-0" for="search-field">Search</label>
|
||||
<div class="px-0 mx-0">
|
||||
<input id="search-field" class="p-1" name="search-field" type="text"/>
|
||||
<input id="search-field" class="p-1" name="search-field" type="text" />
|
||||
<button class="btn p-1" type="button" @click="findMovies">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
||||
<li v-for="movie in movies" class="p-1 movie-card">
|
||||
<img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
|
||||
<img
|
||||
:src="movie.poster"
|
||||
alt="movie poster"
|
||||
class="neon-border hover-pointer"
|
||||
@click="showModal(movie)"
|
||||
/>
|
||||
<div class="p-2">
|
||||
<h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
|
||||
<h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "search",
|
||||
data: () => ({
|
||||
movies: [],
|
||||
}),
|
||||
methods: {
|
||||
findMovies: function (e) {
|
||||
let config = useRuntimeConfig();
|
||||
e.preventDefault();
|
||||
let searchTerm = document.getElementById('search-field').value
|
||||
<script lang="ts" setup>
|
||||
import type { Movie } from "~/types/movie";
|
||||
|
||||
return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"token": useCookie("token").value,
|
||||
},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
this.movies = json;
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
},
|
||||
const emit = defineEmits<{
|
||||
(e: "show-modal", movie: Movie): void;
|
||||
}>();
|
||||
const movies = defineModel<Movie[]>("movie_list", { default: [] });
|
||||
|
||||
const showModal = (movie: Movie) => {
|
||||
emit("show-modal", movie);
|
||||
};
|
||||
const findMovies = async function (e: Event) {
|
||||
let config = useRuntimeConfig();
|
||||
e.preventDefault();
|
||||
let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
|
||||
?.value;
|
||||
|
||||
if (!searchTerm) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { data, error } = await useFetch<Movie[]>(
|
||||
`${config.public.apiURL}/movies/search?q=${searchTerm}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (error.value) {
|
||||
if (error.value.statusCode === 401) {
|
||||
alert("Unauthorized");
|
||||
}
|
||||
} else {
|
||||
if (!data.value) {
|
||||
alert("No movies found.");
|
||||
} else {
|
||||
movies.value = data.value || [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,87 @@
|
|||
<template>
|
||||
<div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
||||
<div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
||||
<div>
|
||||
<h2 id="modal-title" class="row pb-3">
|
||||
{{ movie.Title }} ({{ movie.Year }})
|
||||
{{ movie.title }} ({{ movie.year }})
|
||||
</h2>
|
||||
|
||||
<div class="grid sm:grid-cols-2">
|
||||
<!-- MODAL POSTER -->
|
||||
<div class="text-end">
|
||||
<img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
|
||||
<img
|
||||
id="modal-poster"
|
||||
:src="movie.poster"
|
||||
alt="poster"
|
||||
class="pt-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pt-5">
|
||||
<label class="" for="list-picker">Add To List</label><br/>
|
||||
<label class="" for="list-picker">Add To List</label><br />
|
||||
<select id="list-picker" v-model="list_id" class="p-1 text-black">
|
||||
<option v-for="list in lists" :value="list.id">{{ list.name }}</option>
|
||||
<option v-for="list in lists" :value="list.id">
|
||||
{{ list.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
|
||||
<button
|
||||
class="modal-poster btn p-1"
|
||||
type="button"
|
||||
@click="addMovie(movie.imdb_id)"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddMovie",
|
||||
data: () => ({
|
||||
list_id: 0,
|
||||
lists: {}
|
||||
}),
|
||||
methods: {
|
||||
addMovie: function (imdb_id) {
|
||||
let config = useRuntimeConfig()
|
||||
let list = parseInt(this.list_id)
|
||||
<script lang="ts" setup>
|
||||
import type { MovieList } from "~/types/movielist";
|
||||
|
||||
return fetch(`${config.public.apiURL}/lists/movie`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"token": useCookie("token").value,
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(_json => {
|
||||
this.$parent.closeModal()
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
const props = defineProps(["movie"]);
|
||||
const list_id = ref(0);
|
||||
const lists = defineModel<MovieList[]>("lists", { default: [] });
|
||||
const emit = defineEmits<{
|
||||
(e: "close-modal"): void;
|
||||
}>();
|
||||
|
||||
const addMovie = function (imdb_id: string) {
|
||||
if (typeof imdb_id === "undefined") {
|
||||
console.log("No imdb id");
|
||||
}
|
||||
let config = useRuntimeConfig();
|
||||
|
||||
return fetch(
|
||||
`${config.public.apiURL}/lists/${list_id.value}/movie/${imdb_id}/`,
|
||||
{
|
||||
method: "PUT",
|
||||
body: `{ imdb_id: ${imdb_id}, list_id: ${list_id}}`,
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
},
|
||||
getLists: function () {
|
||||
let config = useRuntimeConfig()
|
||||
fetch(`${config.public.apiURL}/lists`, {
|
||||
method: "GET",
|
||||
headers: {"Content-type": "application/json",}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(json => this.lists = json)
|
||||
.catch(err => console.log(err))
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getLists();
|
||||
},
|
||||
props: ['movie']
|
||||
}
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((_json) => {
|
||||
emit("close-modal");
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
const getLists = function () {
|
||||
let config = useRuntimeConfig();
|
||||
fetch(`${config.public.apiURL}/lists`, {
|
||||
method: "GET",
|
||||
headers: { "Content-type": "application/json" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((json) => (lists.value = json))
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
onMounted(() => {
|
||||
getLists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue