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>
|
||||
|
|
|
|||
|
|
@ -8,44 +8,63 @@
|
|||
</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) {
|
||||
<script lang="ts" setup>
|
||||
import type { Movie } from "~/types/movie";
|
||||
|
||||
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').value
|
||||
let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
|
||||
?.value;
|
||||
|
||||
return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
|
||||
if (!searchTerm) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await useFetch<Movie[]>(
|
||||
`${config.public.apiURL}/movies/search?q=${searchTerm}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"token": useCookie("token").value,
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
this.movies = json;
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
},
|
||||
);
|
||||
|
||||
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 />
|
||||
<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}),
|
||||
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",
|
||||
"token": useCookie("token").value,
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(_json => {
|
||||
this.$parent.closeModal()
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
getLists: function () {
|
||||
let config = useRuntimeConfig()
|
||||
},
|
||||
)
|
||||
.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",}
|
||||
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) => (lists.value = json))
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
onMounted(() => {
|
||||
getLists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,42 @@
|
|||
<template>
|
||||
<div class="p-5 sm:p-0">
|
||||
<Modal>
|
||||
<AddMovie v-if="modal_movie" :movie="modal_movie"></AddMovie>
|
||||
<Modal ref="movie_modal">
|
||||
<AddMovie
|
||||
v-if="modal_movie"
|
||||
:movie="modal_movie"
|
||||
@close-modal="closeModal"
|
||||
></AddMovie>
|
||||
</Modal>
|
||||
|
||||
<div class="text-center sm:text-left">
|
||||
<ul class="inline-flex space-x-5 pb-3">
|
||||
<li id="search-tab" class="hover-pointer me-3 underline" @click="toggleDisplay('search')">Search</li>
|
||||
<li id="showings-tab" class="hover-pointer me-3" @click="toggleDisplay('showings')">Showings</li>
|
||||
<li id="lists-tab" class="hover-pointer" @click="toggleDisplay('lists')">Lists</li>
|
||||
<li
|
||||
id="search-tab"
|
||||
class="hover-pointer me-3 underline"
|
||||
@click="toggleDisplay('search')"
|
||||
>
|
||||
Search
|
||||
</li>
|
||||
<li
|
||||
id="showings-tab"
|
||||
class="hover-pointer me-3"
|
||||
@click="toggleDisplay('showings')"
|
||||
>
|
||||
Showings
|
||||
</li>
|
||||
<li
|
||||
id="lists-tab"
|
||||
class="hover-pointer"
|
||||
@click="toggleDisplay('lists')"
|
||||
>
|
||||
Lists
|
||||
</li>
|
||||
<li id="logout" class="hover-pointer" @click="logout">Logout</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="search">
|
||||
<search/>
|
||||
<search @show-modal="showModal" />
|
||||
</div>
|
||||
|
||||
<div id="showings" class="hidden">
|
||||
|
|
@ -27,62 +49,67 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import AddMovie from "~/components/modal-content/AddMovie.vue";
|
||||
import Search from "~/components/admin/search.vue";
|
||||
import Showings from "~/components/admin/showings.vue";
|
||||
import Lists from "~/components/admin/lists.vue";
|
||||
import type { MovieList } from "~/types/movielist";
|
||||
import { useCookie } from "#app";
|
||||
import type { Movie } from "~/types/movie";
|
||||
import Modal from "~/components/Modal.vue";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Lists, Showings, Search, AddMovie},
|
||||
data: () => ({
|
||||
lists: [],
|
||||
modal_movie: null,
|
||||
}),
|
||||
methods: {
|
||||
showModal: function (movie) {
|
||||
this.modal_movie = movie;
|
||||
document.getElementById("movie-modal").classList.remove("hidden");
|
||||
},
|
||||
toggleDisplay: function (id) {
|
||||
const lists = defineModel<MovieList>("movie-lists", { default: [] });
|
||||
const modal_movie = defineModel<Movie>("#movie-modal");
|
||||
|
||||
const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
|
||||
|
||||
const closeModal = function () {
|
||||
movie_modal?.value?.toggleModal();
|
||||
};
|
||||
const showModal = function (movie: Movie) {
|
||||
modal_movie.value = movie;
|
||||
movie_modal?.value?.toggleModal();
|
||||
};
|
||||
const toggleDisplay = function (element_id: string) {
|
||||
let tabs = ["search", "showings", "lists"];
|
||||
|
||||
tabs.forEach((value) => {
|
||||
if (value === id) {
|
||||
document.getElementById(id).classList.toggle("hidden");
|
||||
document.getElementById(id + "-tab").classList.toggle("underline");
|
||||
} else if (!document.getElementById(value).classList.contains("hidden")) {
|
||||
document.getElementById(value).classList.toggle("hidden");
|
||||
document.getElementById(value + "-tab").classList.toggle("underline");
|
||||
if (value === element_id) {
|
||||
document.getElementById(element_id)?.classList.toggle("hidden");
|
||||
document
|
||||
.getElementById(element_id + "-tab")
|
||||
?.classList.toggle("underline");
|
||||
} else if (!document.getElementById(value)?.classList.contains("hidden")) {
|
||||
document.getElementById(value)?.classList.toggle("hidden");
|
||||
document.getElementById(value + "-tab")?.classList.toggle("underline");
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
const logout = () => {
|
||||
let config = useRuntimeConfig();
|
||||
fetch(`${config.public.apiURL}/auth/logout/`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
logout: () => {
|
||||
let config = useRuntimeConfig()
|
||||
let token = useCookie("token").value;
|
||||
fetch(`${config.public.apiURL}/logout`, {
|
||||
method: "PUT",
|
||||
headers: {"Content-type": "application/json", "token": token},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(_json => {
|
||||
.then((response) => response)
|
||||
.then((_json) => {
|
||||
let token = useCookie("token");
|
||||
token.value = null;
|
||||
window.location = "/";
|
||||
navigateTo("/");
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const token = useCookie("token").value;
|
||||
if (!token) {
|
||||
navigateTo("/")
|
||||
}
|
||||
}
|
||||
navigateTo("/");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-if="list_id !== 0" class="p-5 sm:p-0">
|
||||
<Modal>
|
||||
<Modal ref="movie_modal">
|
||||
<ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
|
||||
</Modal>
|
||||
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
|
||||
|
|
@ -64,6 +64,9 @@ import ShowMovie from "~/components/modal-content/ShowMovie.vue";
|
|||
import "lazysizes";
|
||||
import type { MovieList } from "~/types/movielist";
|
||||
import type { Movie } from "~/types/movie";
|
||||
import Modal from "~/components/Modal.vue";
|
||||
|
||||
const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
|
||||
|
||||
const list_id = ref(0);
|
||||
const list = defineModel<MovieList>("movie_list", { default: [] });
|
||||
|
|
@ -176,7 +179,7 @@ const filterMovies = function () {
|
|||
|
||||
const showModal = function (movie: Movie) {
|
||||
modal_movie.value = movie;
|
||||
document.getElementById("movie-modal")?.classList.remove("hidden");
|
||||
movie_modal.value?.toggleModal();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -18,18 +18,24 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import type { MovieList } from "~/types/movielist";
|
||||
import { useCookie } from "#app";
|
||||
|
||||
const lists = defineModel<MovieList[]>("movie_list", { default: [] });
|
||||
const updateLists = async function () {
|
||||
let config = useRuntimeConfig();
|
||||
let headers: any = {
|
||||
"Content-type": "application/json",
|
||||
};
|
||||
|
||||
if (typeof useCookie("token").value !== "undefined") {
|
||||
headers["Authorization"] = `Token ${useCookie("token").value}`;
|
||||
}
|
||||
|
||||
const { data, error } = await useFetch<MovieList[]>(
|
||||
`${config.public.apiURL}/lists`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
Authorization: `Token ${useCookie("token").value}`,
|
||||
},
|
||||
headers: headers,
|
||||
},
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue