From 2e55f9a3a3c10a184dd4e522f383a13cf0ecab54 Mon Sep 17 00:00:00 2001
From: Edward Tirado Jr <ed@etdevelopment.net>
Date: Fri, 18 Apr 2025 18:47:57 -0500
Subject: [PATCH] updated showings to use typescript and composition api

---
 src/components/admin/search.vue   |   1 +
 src/components/admin/showings.vue | 155 ++++++++++++++++++------------
 src/types/showing.ts              |   2 +
 3 files changed, 97 insertions(+), 61 deletions(-)

diff --git a/src/components/admin/search.vue b/src/components/admin/search.vue
index daa24e6..638f4ea 100644
--- a/src/components/admin/search.vue
+++ b/src/components/admin/search.vue
@@ -32,6 +32,7 @@ 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();
diff --git a/src/components/admin/showings.vue b/src/components/admin/showings.vue
index d77e2ad..711c64b 100644
--- a/src/components/admin/showings.vue
+++ b/src/components/admin/showings.vue
@@ -9,78 +9,111 @@
           <li class="pb-2">
             <span class="mb-3">{{ formatDate(showing.showtime) }} </span>
           </li>
-          <button class="btn p-1 rounded" type="button" @click="deleteShowing(showing.id)">Delete</button>
+          <button
+            class="btn p-1 rounded"
+            type="button"
+            @click="deleteShowing(showing.id)"
+          >
+            Delete
+          </button>
         </ul>
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "showings",
-  data: () => ({
-    showings: [],
-    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-  }),
-  mounted() {
-    this.getShowings()
-  },
-  methods: {
-    formatDate: function (date_string) {
-      let parsed_date = new Date(Date.parse(date_string));
-      let month = this.months[parsed_date.getMonth()];
+<script lang="ts" setup>
+import type { Showing } from "~/types/showing";
+import { useCookie } from "#app";
+import type { Schedule } from "~/types/schedule";
 
-      return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
+const showings = defineModel<Showing[]>("showings", { default: [] });
+const previous_showings = defineModel<Showing[]>("previous_showings", {
+  default: [],
+});
+const got_previous = ref(false);
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+onMounted(() => {
+  getShowings();
+});
+
+const formatDate = function (date_string: string) {
+  let parsed_date = new Date(Date.parse(date_string));
+  let month = months[parsed_date.getMonth()];
+
+  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
+};
+
+const deleteShowing = function (showing_id: number) {
+  let config = useRuntimeConfig();
+  let confirmed = confirm("Delete showing?");
+
+  if (!confirmed) {
+    return false;
+  }
+
+  fetch(`${config.public.apiURL}/showings/${showing_id}/`, {
+    method: "DELETE",
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
     },
-    deleteShowing: function (showing_id) {
-      let config = useRuntimeConfig();
-      let confirmed = confirm("Delete showing?");
+  })
+    .then((_json) => {
+      showings.value = showings.value.filter((showing) => {
+        return showing.id !== showing_id;
+      });
+    })
+    .catch((err) => console.log(err));
+};
 
-      if (!confirmed) {
-        return false;
+const getShowings = function (previous = false) {
+  let config = useRuntimeConfig();
+  let params = "";
+  if (previous) params = "?previous=true";
+
+  const { data, error } = useFetch<Schedule>(
+    `${config.public.apiURL}/schedules/1${params}`,
+    {
+      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 showings found for schedule.");
+    } else {
+      if (previous) {
+        got_previous.value = true;
+        previous_showings.value = data.value.showings;
+      } else {
+        showings.value = data.value.showings;
       }
-
-      return fetch(`${config.public.apiURL}/schedules/${showing_id}`, {
-        credentials: "include",
-        method: "DELETE",
-        headers: {
-          "Content-type": "application/json",
-          "token": useCookie("token").value
-        }
-      })
-          .then(response => response.json())
-          .then(json => {
-            this.showings = this.showings.filter((showing) => {
-              return showing.id !== showing_id
-            })
-          });
-    },
-    getShowings: function (previous = false) {
-      let config = useRuntimeConfig();
-      let params = "";
-      if (previous) params = "?previous=true";
-
-      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
-        method: "GET",
-        headers: {"Content-type": "application/json"}
-      })
-          .then(response => response.json())
-          .then(showings => {
-
-            if (previous) {
-              this.got_previous = true;
-              this.previous_showings = showings;
-            } else {
-              this.showings = showings
-            }
-          })
-          .catch(err => console.log(err));
     }
   }
-}
+};
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/types/showing.ts b/src/types/showing.ts
index daa29f6..ab689c9 100644
--- a/src/types/showing.ts
+++ b/src/types/showing.ts
@@ -1,8 +1,10 @@
 import type { Movie } from "~/types/movie";
 
 export type Showing = {
+  id: number;
   owner: number;
   public: boolean;
+  title: string;
   movie: Movie;
   showtime: string;
 };