updated search to use typescript and composition api

.idea/workspace.xml

@@ -6,7 +6,12 @@
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Modal.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Modal.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/admin/search.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/search.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/admin/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/admin/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -55,31 +60,31 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "code.cleanup.on.save": "true",
-    "git-widget-placeholder": "schedule-page-updates",
-    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
-    "list.type.of.created.stylesheet": "CSS",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.standard": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.standard": "",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
-    "rearrange.code.on.save": "true",
-    "settings.editor.selected.configurable": "settings.vue",
-    "ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;code.cleanup.on.save&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;movie-search&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/types&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier&quot;,
+    &quot;rearrange.code.on.save&quot;: &quot;true&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.vue&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/types" />
@@ -131,6 +136,7 @@
       <workItem from="1673547794038" duration="2346000" />
       <workItem from="1743904898331" duration="20256000" />
       <workItem from="1743998844137" duration="23268000" />
+      <workItem from="1744430699183" duration="32152000" />
     </task>
     <servers />
   </component>

src/components/Modal.vue

@@ -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>

src/components/admin/search.vue

@@ -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>

src/components/modal-content/AddMovie.vue

@@ -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>

src/pages/admin/index.vue

@@ -1,24 +1,46 @@
 <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">
-      <showings/>
+      <showings />
     </div>
 
     <div id="lists" 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) {
-      let tabs = ["search", "showings", "lists"];
+const lists = defineModel<MovieList>("movie-lists", { default: [] });
+const modal_movie = defineModel<Movie>("#movie-modal");
 
-      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");
-        }
-      })
+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 === 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 => {
-            let token = useCookie("token");
-            token.value = null;
-            window.location = "/";
-          })
-          .catch(err => console.log(err))
-    }
-  },
-  mounted() {
-    const token = useCookie("token").value;
-    if (!token) {
-      navigateTo("/")
-    }
+  })
+    .then((response) => response)
+    .then((_json) => {
+      let token = useCookie("token");
+      token.value = null;
+      navigateTo("/");
+    })
+    .catch((err) => console.log(err));
+};
+
+onMounted(() => {
+  const token = useCookie("token").value;
+  if (!token) {
+    navigateTo("/");
   }
-}
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/pages/lists/[id].vue

@@ -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(() => {

src/pages/lists/index.vue

@@ -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,
     },
   );