Merge pull request 'fixed admin search loading issues and improved error handling' (#15) from admin-search-bug-fixes into main

Reviewed-on: #15

.idea/jsLibraryMappings.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$/src" libraries="{web/src/node_modules}" />
-    <file url="PROJECT" libraries="{@types/tailwindcss, web/src/node_modules}" />
-  </component>
-</project>

.idea/workspace.xml

@@ -7,7 +7,6 @@
     <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/components/LoadingIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/LoadingIcon.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -57,36 +56,37 @@
     <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": "main",
-    "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": "configurable.group.editor",
-    "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;main&quot;,
+    &quot;junie.onboarding.icon.badge.shown&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/MovieNight/movie-night-web&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/MovieNight/movie-night-web/src/node_modules/prettier&quot;,
+    &quot;rearrange.code.on.save&quot;: &quot;true&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;configurable.group.editor&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/MovieNight/movie-night-web/src/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   },
-  "keyToStringList": {
-    "vue.recent.templates": [
-      "Vue Composition API Component"
+  &quot;keyToStringList&quot;: {
+    &quot;vue.recent.templates&quot;: [
+      &quot;Vue Composition API Component&quot;
     ]
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/types" />
@@ -114,8 +114,8 @@
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
-        <option value="bundled-js-predefined-d6986cc7102b-f27c65a3e318-JavaScript-PS-251.23774.436" />
-        <option value="bundled-php-predefined-a98d8de5180a-aaeaa8632555-com.jetbrains.php.sharedIndexes-PS-251.23774.436" />
+        <option value="bundled-js-predefined-d6986cc7102b-b26f3e71634d-JavaScript-PS-251.26094.133" />
+        <option value="bundled-php-predefined-a98d8de5180a-c5828cf854d9-com.jetbrains.php.sharedIndexes-PS-251.26094.133" />
       </set>
     </attachedChunks>
   </component>
@@ -143,6 +143,9 @@
       <workItem from="1745366380362" duration="223000" />
       <workItem from="1745366610986" duration="319000" />
       <workItem from="1745366940811" duration="4297000" />
+      <workItem from="1748541588253" duration="2587000" />
+      <workItem from="1750288132986" duration="18089000" />
+      <workItem from="1750873961750" duration="644000" />
     </task>
     <servers />
   </component>

README.md

@@ -2,3 +2,5 @@ Movie Night Web
 =
 
 ![cinema corona list page](screenshot.png "Screenshot")
+
+Uses filmstrip icon by momentbloom (https://www.vecteezy.com/vector-art/36659391-filmstrip)

src/assets/img/poster-placeholder.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="1413.5 192.80002 108.59998 149.10001"
+   width="108.59998"
+   height="149.10001"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="poster-placeholder.svg"
+   inkscape:export-filename="poster-placeholder2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:export-bgcolor="#ffffffff">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="108.59998"
+       height="149.10001"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <rect
+     style="fill:#5c5b79;fill-opacity:1"
+     id="rect1"
+     width="108.28388"
+     height="148.72725"
+     x="1413.6864"
+     y="193.17278" />
+  <path
+     fill="#cccccc"
+     d="m 1413.5,242.5 c 0,16.6 0,33.1 0,49.7 36.2,49.7 72.4,-49.7 108.6,0 0,-16.6 0,-33.1 0,-49.7 -36.2,-49.7 -72.4,49.7 -108.6,0 z m 8.7,56.7 c -1.6,-1.3 -3.3,-2.8 -4.9,-4.6 0,-1.6 0,-3.3 0,-4.9 1.6,1.8 3.3,3.3 4.9,4.6 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,-1.3 -3.3,-2.8 -4.9,-4.6 0,-1.6 0,-3.3 0,-4.9 1.6,1.8 3.3,3.3 4.9,4.6 0,1.6 0,3.3 0,4.9 z m 9.6,44.4 c -1.6,-0.4 -3.3,-0.9 -4.9,-1.7 0,-1.6 0,-3.3 0,-4.9 1.6,0.8 3.3,1.4 4.9,1.7 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,-0.4 -3.3,-0.9 -4.9,-1.7 0,-1.6 0,-3.3 0,-4.9 1.6,0.8 3.3,1.4 4.9,1.7 0,1.7 0,3.3 0,4.9 z m 9.6,39.8 c -1.6,0.3 -3.3,0.5 -4.9,0.5 0,-1.6 0,-3.3 0,-4.9 1.6,0 3.3,-0.2 4.9,-0.5 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.3 -3.3,0.5 -4.9,0.5 0,-1.6 0,-3.3 0,-4.9 1.6,0 3.3,-0.2 4.9,-0.5 0,1.6 0,3.3 0,4.9 z m 9.6,36.4 c -1.6,0.8 -3.3,1.5 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.6 3.3,-1.3 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.8 -3.3,1.5 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.6 3.3,-1.3 4.9,-2.1 0,1.6 0,3.3 0,4.9 z m 9.5,34.3 c -1.6,1.1 -3.3,2.1 -4.9,3 0,-1.6 0,-3.3 0,-4.9 1.6,-1 3.3,-2 4.9,-3 0,1.6 0,3.2 0,4.9 z m 0,-39.8 c -1.6,1.1 -3.3,2.1 -4.9,3 0,-1.6 0,-3.3 0,-4.9 1.6,-1 3.3,-2 4.9,-3 0,1.6 0,3.2 0,4.9 z m 9.6,33.3 c -1.6,1.1 -3.3,2.3 -4.9,3.4 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.2 4.9,-3.4 0,1.6 0,3.2 0,4.9 z m 0,-39.8 c -1.6,1.1 -3.3,2.3 -4.9,3.4 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.2 4.9,-3.4 0,1.6 0,3.2 0,4.9 z m 9.6,33.6 c -1.6,1 -3.3,2 -4.9,3.1 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.1 4.9,-3.1 0,1.6 0,3.3 0,4.9 z m 0,-39.8 c -1.6,1 -3.3,2 -4.9,3.1 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.1 4.9,-3.1 0,1.6 0,3.2 0,4.9 z m 9.6,35.1 c -1.6,0.6 -3.3,1.3 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.8 3.3,-1.5 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.6 -3.3,1.3 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.8 3.3,-1.5 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 9.6,37.9 c -1.6,0 -3.3,0.2 -4.9,0.6 0,-1.6 0,-3.3 0,-4.9 1.6,-0.3 3.3,-0.5 4.9,-0.6 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0 -3.3,0.2 -4.9,0.6 0,-1.6 0,-3.3 0,-4.9 1.6,-0.3 3.3,-0.5 4.9,-0.6 0,1.6 0,3.3 0,4.9 z m 14.2,0 c 1.6,1.2 3.3,2.7 4.9,4.5 0,1.6 0,3.3 0,4.9 -1.6,-1.8 -3.3,-3.2 -4.9,-4.5 0,-1.6 0,-3.2 0,-4.9 z m 0,39.8 c 1.6,1.2 3.3,2.7 4.9,4.5 0,1.6 0,3.3 0,4.9 -1.6,-1.8 -3.3,-3.2 -4.9,-4.5 0,-1.6 0,-3.2 0,-4.9 z m -9.6,-44.2 c 1.6,0.3 3.3,0.9 4.9,1.6 0,1.6 0,3.3 0,4.9 -1.6,-0.8 -3.3,-1.3 -4.9,-1.6 0,-1.7 0,-3.3 0,-4.9 z m 0,39.8 c 1.6,0.3 3.3,0.9 4.9,1.6 0,1.6 0,3.3 0,4.9 -1.6,-0.8 -3.3,-1.3 -4.9,-1.6 0,-1.7 0,-3.3 0,-4.9 z"
+     id="path1" />
+</svg>

src/components/LoadingIcon.vue

@@ -1,20 +1,31 @@
-<script lang="ts" setup></script>
-
 <template>
-  <video
-    alt="Loading"
-    autoplay
-    class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-    loop
-    muted
-    type="video/webm"
+  <div
+    class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col"
   >
-    <source
-      src="/assets/img/movie-loader.mp4"
-      type="video/mp4; codecs='hvc1'"
-    />
-    <source src="/assets/img/movie-loader.webm" type="video/webm" />
-  </video>
+    <video alt="Loading" autoplay class="max-h-52" loop muted playsinline>
+      <source
+        v-if="supportsHEVC"
+        src="/assets/img/movie-loader.mov"
+        type="video/quicktime"
+      />
+      <source v-else src="/assets/img/movie-loader.webm" type="video/webm" />
+    </video>
+  </div>
 </template>
 
+<script lang="ts" setup>
+const supportsHEVC = ref(false);
+const props = defineProps(["showQuote"]);
+
+onMounted(() => {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  // iOS devices also support HEVC
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
+
+  supportsHEVC.value = isSafari || isIOS;
+});
+</script>
+
 <style scoped></style>

src/components/Modal.vue

@@ -1,12 +1,14 @@
 <template>
-  <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 v-show="visible" id="movie-modal" class="movie-modal movie-card">
+    <div class="max-w-4xl mx-auto flex flex-col px-2 sm:px-0">
+      <span
+        class="hover-pointer font-bold self-end pr-1 sm:pr-5 pt-5 pb-5 sm:pb-0"
+        @click="toggleModal()"
+      >
+        <span class="bg-red-600 p-2 rounded">X</span>
+      </span>
+      <slot></slot>
+    </div>
   </div>
 </template>
 

src/components/MoviePoster.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import placeholderPoster from "assets/img/poster-placeholder.svg";
+
+const imgRef = ref<HTMLImageElement | null>(null);
+const props = defineProps(["image"]);
+
+const handleImageError = function (event: Event) {
+  (event.target as HTMLImageElement).classList.remove("lazyload");
+  (event.target as HTMLImageElement).classList.add("object-cover");
+  (event.target as HTMLImageElement).src = placeholderPoster;
+};
+
+watch(
+  () => props.image,
+  (newImage) => {
+    if (imgRef.value && newImage) {
+      imgRef.value.classList.add("lazyload");
+      imgRef.value.setAttribute("data-src", newImage);
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="aspect-[2/3] w-full text-blue-300">
+    <img
+      ref="imgRef"
+      :data-src="props.image"
+      alt="Movie Details"
+      class="lazyload hover-pointer w-full h-full"
+      @error="handleImageError"
+    />
+  </div>
+</template>
+
+<style scoped></style>

src/components/MovieQuote.vue

@@ -0,0 +1,54 @@
+<template>
+  <blockquote
+    class="flex flex-col gap-10 movie-card p-10 neon-border text-center"
+  >
+    <span>
+      {{ quote.quote }}
+    </span>
+
+    <div class="flex gap-2 italic flex-col">
+      <span>{{ quote.actor }}</span>
+      <span>{{ quote.movie }}</span>
+    </div>
+  </blockquote>
+</template>
+
+<style scoped></style>
+<script lang="ts" setup>
+const quotes = [
+  {
+    actor: "Darren Ewing as Arnold",
+    movie: "Troll 2",
+    quote: "They're eating her... and then they're going to eat me! OH MY GOD!",
+  },
+  {
+    actor: "Tommy Wiseau as Johnny",
+    movie: "The Room",
+    quote: "You're tearing me apart, Lisa!",
+  },
+  {
+    actor: "Arnold Schwaarzenegger as T-800",
+    movie: "Terminator 2: Judgment Day",
+    quote: "Hasta la vista, baby.",
+  },
+  {
+    actor: "Karolyn Grimes as Zuzu",
+    movie: "It's a Wonderful Life",
+    quote: "Every time a bell rings, an angel gets his wings.",
+  },
+  {
+    actor: "Pat Morita as Mr. Miyagi",
+    movie: "The Karate Kid",
+    quote: "Wax on, Wax off",
+  },
+  {
+    actor: "Dolph Lundgren as Drago",
+    movie: "Rocky 4",
+    quote: "I must break you.",
+  },
+];
+
+const randomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
+
+const quote = ref(randomQuote());
+</script>

src/components/admin/search.vue

@@ -1,4 +1,5 @@
 <template>
+  <LoadingIcon v-if="loading" class="p-1 bg-gray-900 rounded-3xl" />
   <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
     <label class="px-0" for="search-field">Search</label>
     <div class="px-0 mx-0">
@@ -8,12 +9,7 @@
   </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="showModal(movie)"
-      />
+      <MoviePoster :image="movie.poster" @click="showModal(movie)" />
       <div class="p-2">
         <h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
       </div>
@@ -23,6 +19,9 @@
 
 <script lang="ts" setup>
 import type { Movie } from "~/types/movie";
+import "lazysizes";
+
+const loading = ref(false);
 
 const emit = defineEmits<{
   (e: "show-modal", movie: Movie): void;
@@ -36,6 +35,7 @@ const showModal = (movie: Movie) => {
 const findMovies = async function (e: Event) {
   let config = useRuntimeConfig();
   e.preventDefault();
+  loading.value = true;
   let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
     ?.value;
 
@@ -43,28 +43,27 @@ const findMovies = async function (e: Event) {
     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}`,
-      },
+  $fetch<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 || [];
-    }
-  }
+  })
+    .then((data) => {
+      movies.value = data;
+      loading.value = false;
+    })
+    .catch((err) => {
+      if (err.statusCode === 401) {
+        navigateTo("/login");
+      } else if (err.statusCode === 404) {
+        alert("No movies found");
+        loading.value = false;
+      } else {
+        alert("An error occurred. Please try again later.");
+      }
+    });
 };
 </script>
 

src/components/modal-content/AddMovie.vue

@@ -1,22 +1,18 @@
 <template>
   <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">
+      <h2 id="modal-title" class="row pb-10 text-center sm:text-left">
         {{ movie.title }} ({{ movie.year }})
       </h2>
 
-      <div class="grid sm:grid-cols-2">
+      <div class="grid sm:grid-cols-2 gap-5">
         <!-- MODAL POSTER -->
-        <div class="text-end">
-          <img
-            id="modal-poster"
-            :src="movie.poster"
-            alt="poster"
-            class="pt-5"
-          />
-        </div>
+        <MoviePoster
+          :image="movie.poster"
+          class="max-h-72 max-w-60 sm:max-h-2xl sm:max-w-72 mx-auto sm:mx-0"
+        />
 
-        <div class="pt-5">
+        <div class="mx-auto sm:mx-none">
           <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">

src/components/modal-content/ShowMovie.vue

@@ -1,23 +1,32 @@
 <template>
   <div class="sm:m-5 p-10 movie-card neon-border">
     <div>
-      <h2 class="text-xl pb-3 text-center sm:text-left">
+      <LoadingIcon v-if="updating" />
+      <h2 class="text-xl pb-10 text-center sm:text-left">
         {{ movie.title }} ({{ movie.year }})
       </h2>
       <div class="sm:inline-flex sm:space-x-5">
-        <img
-          :src="movie.poster"
-          alt="movie poster"
-          class="mx-auto sm:mx-0 neon-border"
+        <MoviePoster
+          :image="movie.poster"
+          class="max-h-80 max-w-60 mx-auto sm:mx-none"
         />
         <div class="pt-5 sm:pt-0">
           <p>{{ movie.plot }}</p>
+
           <ScheduleMovie
             v-if="logged_in"
             :movie="movie"
             class="mt-5"
             @close-modal="$emit('close-modal')"
           />
+
+          <button
+            v-if="logged_in"
+            class="my-10 btn p-2 rounded"
+            @click="updateMovie"
+          >
+            Refresh movie
+          </button>
         </div>
       </div>
     </div>
@@ -27,10 +36,14 @@
 <script lang="ts" setup>
 import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
 
-const props = defineProps(["movie"]);
-const emits = defineEmits(["close-modal"]);
+const props = defineProps(["movie", "updating"]);
+const emits = defineEmits(["close-modal", "update-movie"]);
 const logged_in = ref(false);
 
+const updateMovie = function () {
+  emits("update-movie");
+};
+
 onMounted(() => {
   const token = useCookie("token").value;
   if (token) {

src/layouts/default.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="container mx-auto">
-    <Navbar/>
-    <NuxtPage/>
+    <Navbar />
+    <NuxtPage class="mb-32" />
   </div>
 </template>
 
 <script>
 export default {
   name: "default",
-}
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/nuxt.config.ts

@@ -24,7 +24,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      apiURL: process.env.API_URL || "http://localhost:8000/api",
+      apiURL: process.env.API_URL || "http://localhost:8000/v1",
     },
   },
 

src/pages/lists/[id].vue

@@ -1,15 +1,20 @@
 <template>
-  <LoadingIcon v-if="loading" />
+  <LoadingIcon v-if="loading" show-quote="true" />
   <div v-else class="p-5 sm:p-0">
     <Modal ref="movie_modal">
       <ShowMovie
         v-if="modal_movie"
         :movie="modal_movie"
+        :updating="updating"
         @close-modal="closeModal"
+        @update-movie="updateMovie(modal_movie)"
       ></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
-    <div class="grid grid-cols-2 rounded movie-card neon-border p-5">
+    <div
+      v-if="movies.length > 1 && !loading"
+      class="grid grid-cols-2 rounded movie-card neon-border p-5"
+    >
       <div>
         <ul class="flex flex-row">
           <li>
@@ -32,23 +37,27 @@
       />
     </div>
 
+    <div v-if="movies.length < 1 && !loading" class="mt-10 flex gap-5 flex-col">
+      No Movies Found
+      <MovieQuote />
+    </div>
     <!-- MOVIE LIST -->
     <ul
+      v-else
       class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
     >
       <li
         v-for="movie in filtered_movies"
-        :key="movie.id"
-        class="rounded movie-card neon-border"
+        :key="movie.poster"
+        class="rounded movie-card neon-border flex flex-col overflow-hidden"
       >
         <!-- POSTER -->
-        <img
-          :data-src="movie.poster"
-          alt="movie poster"
-          class="lazyload p-3 movie-poster hover-pointer mx-auto"
+        <MoviePoster
+          :image="movie.poster"
+          class="flex-shrink-0"
           @click="showModal(movie)"
         />
-        <div class="p-5 flex flex-col">
+        <div class="p-5 flex flex-col justify-between flex-1">
           <!-- TITLE -->
           <span class="font-bold text-center mb-1">{{ movie.title }}</span>
           <span
@@ -71,6 +80,8 @@ import type { MovieList } from "~/types/movielist";
 import type { Movie } from "~/types/movie";
 import Modal from "~/components/Modal.vue";
 import { useCookie } from "#app";
+import { $fetch } from "ofetch";
+import MoviePoster from "~/components/MoviePoster.vue";
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -117,9 +128,9 @@ const getList = async function (list_id: number) {
 };
 
 const hideScheduled = function () {
-  if (hide_scheduled && movies.value.length > 0) {
+  if (hide_scheduled.value && movies.value.length > 0) {
     let filtered = movies.value.filter((movie) => {
-      return movie.last_watched === null;
+      return !movie.has_been_scheduled;
     });
     if (typeof filtered != "undefined") {
       filtered_movies.value = filtered;
@@ -168,6 +179,38 @@ const removeMovie = async function (movie_id: string) {
   }
 };
 
+const updating = ref(false);
+const updateMovie = async function (movie: Movie) {
+  let config = useRuntimeConfig();
+  updating.value = true;
+
+  $fetch<Movie>(`${config.public.apiURL}/movies/${movie.id}/`, {
+    method: "PUT",
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
+    },
+    body: JSON.stringify(movie),
+  })
+    .then((data) => {
+      modal_movie.value = data || [];
+      movies.value = movies.value.map((movie) => {
+        return movie.id === data.id ? data : movie;
+      });
+      filtered_movies.value = movies.value;
+      updating.value = false;
+    })
+    .catch((err) => {
+      if (err.statusCode === 401) {
+        navigateTo("/");
+      }
+      if (err.statusCode === 404) {
+        alert("Unable to update movie");
+      }
+      updating.value = false;
+    });
+};
+
 const filterMovies = function () {
   if (!movie_query) {
     filtered_movies.value = movies.value;

src/pages/lists/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="p-5 sm:p-0">
-    <div v-if="lists.length < 1 && !loading">
+  <div>
+    <LoadingIcon
+      v-if="loading"
+      class="w-full p-5 sm:p-0 max-w-2xl"
+      show-quote="true"
+    />
+
+    <div v-if="lists.length < 1 && !loading" class="flex flex-col gap-10">
       <p>No lists found</p>
+      <MovieQuote />
     </div>
-    <LoadingIcon v-if="loading" />
 
     <ul class="grid grid-cols-2 gap-3 mt-5">
       <li v-for="list in lists" class="movie-card neon-border p-5 rounded">

src/pages/schedule/index.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="p-5 sm:p-0">
-    <LoadingIcon v-if="loading" />
+    <LoadingIcon v-if="loading" show-quote="true" />
     <div v-else>
       <div
         v-if="schedule && schedule?.showings.length < 1 && !loading"
         class="p-5"
       >
         <span>No Showings Found</span>
+        <MovieQuote />
       </div>
       <ul class="flex flex-col gap-5">
         <li
@@ -35,7 +36,7 @@
 
       <!-- PREVIOUS SHOWINGS -->
       <LoadingIcon v-if="loadingPrevious" />
-      <div v-else id="previous-showings" class="mt-5 list-group">
+      <div v-else id="previous-showings" class="p-5 mt-5 list-group">
         <span
           class="block mb-5 hover-pointer underline"
           @click="getSchedule(true)"

src/types/movie.ts

@@ -10,5 +10,5 @@ export type Movie = {
   actors: string;
   plot: string;
   poster: string;
-  last_watched: string;
+  has_been_scheduled: boolean;
 };