updated list details page to use composition API and typescript

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/php.xml

@@ -9,9 +9,24 @@
   <component name="PHPCodeSnifferOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="30000" />
+    </phpcs_settings>
+  </component>
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="60000" />
+    </PhpStan_settings>
+  </component>
   <component name="PhpStanOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="60000" />
+    </Psalm_settings>
+  </component>
   <component name="PsalmOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>

.idea/prettier.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="PrettierConfiguration">
     <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
   </component>
 </project>

.idea/workspace.xml

@@ -5,8 +5,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/php.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/php.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/prettier.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/prettier.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/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/types/movielist.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/movielist.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -44,9 +47,9 @@
   <component name="ProblemsViewState">
     <option name="selectedTabId" value="CurrentFile" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 8
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 8
+}</component>
   <component name="ProjectId" id="2K1xoABBc3o8XBi4orGtOrB9Dxn" />
   <component name="ProjectLevelVcsManager">
     <ConfirmationsSetting value="1" id="Add" />
@@ -63,7 +66,7 @@
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
     "git-widget-placeholder": "main",
-    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web",
+    "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",
@@ -72,15 +75,17 @@
     "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.javascript.prettier",
+    "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>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/types" />
       <recent name="$PROJECT_DIR$/components" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
@@ -127,7 +132,8 @@
       <workItem from="1673397538637" duration="47416000" />
       <workItem from="1673508732689" duration="1316000" />
       <workItem from="1673547794038" duration="2346000" />
-      <workItem from="1743904898331" duration="11972000" />
+      <workItem from="1743904898331" duration="20256000" />
+      <workItem from="1743998844137" duration="23268000" />
     </task>
     <servers />
   </component>

src/pages/lists/[id].vue

@@ -10,33 +10,47 @@
           <li>
             <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
             <input
-                @change="hideScheduled"
-                v-model="hide_scheduled" id="hide_scheduled" type="checkbox"/>
+              id="hide_scheduled"
+              v-model="hide_scheduled"
+              type="checkbox"
+              @change="hideScheduled"
+            />
           </li>
         </ul>
       </div>
-      <input v-model="movie_query"
-             class="p-1 rounded"
-             placeholder="Filter Movies"
-             type="text"
-             @input="filterMovies"
+      <input
+        v-model="movie_query"
+        class="p-1 rounded"
+        placeholder="Filter Movies"
+        type="text"
+        @input="filterMovies"
       />
     </div>
 
     <!-- MOVIE LIST -->
-    <ul 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">
+    <ul
+      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"
+      >
         <!-- POSTER -->
         <img
-            :data-src="movie.poster"
-            alt="movie poster"
-            class="lazyload p-3 movie-poster hover-pointer mx-auto"
-            @click="showModal(movie)"
+          :data-src="movie.poster"
+          alt="movie poster"
+          class="lazyload p-3 movie-poster hover-pointer mx-auto"
+          @click="showModal(movie)"
         />
         <div class="p-5 flex flex-col">
           <!-- TITLE -->
           <span class="font-bold text-center mb-1">{{ movie.title }}</span>
-          <span v-if="logged_in" class="text-center hover-pointer" @click="removeMovie(movie.id)">
+          <span
+            v-if="logged_in"
+            class="text-center hover-pointer"
+            @click="removeMovie(movie.id)"
+          >
             X
           </span>
         </div>
@@ -45,100 +59,139 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import ShowMovie from "~/components/modal-content/ShowMovie.vue";
-import 'lazysizes';
+import "lazysizes";
+import type { MovieList } from "~/types/movielist";
+import type { Movie } from "~/types/movie";
 
-export default {
-  name: "list",
-  components: {ShowMovie},
-  data: () => ({
-    list_id: 0,
-    list: [],
-    modal_movie: null,
-    movies: [],
-    filtered_movies: [],
-    movie_query: "",
-    logged_in: false,
-    hide_scheduled: false,
-  }),
-  methods: {
-    getList: function (list_id) {
-      let config = useRuntimeConfig()
-      fetch(`${config.public.apiURL}/lists/${list_id}`, {
-        method: "GET",
-        headers: {"Content-type": "application/json"}
-      })
-          .then(response => response.json())
-          .then(json => {
-            this.list = json.list;
-            this.movies = json.movies;
-            this.filtered_movies = this.movies;
-          })
-          .catch(err => console.log(err))
-    },
-    hideScheduled: function() {
-      if(this.hide_scheduled) {
-        this.filtered_movies = this.movies.filter(movie => {
-          return movie.last_watched === null
-        });
-      } else {
-        this.filtered_movies = this.movies;
-      }
-    },
-    removeMovie: function (movie_id) {
-      let config = useRuntimeConfig()
-      let confirmed = confirm("Remove movie from list?");
+const list_id = ref(0);
+const list = defineModel<MovieList>("movie_list", { default: [] });
+const modal_movie: Ref<Movie | null> = ref(null);
+const movies = defineModel<Movie[] | []>("movies", {
+  default: [],
+});
+const filtered_movies = defineModel<Movie[]>("filtered_movies");
+const movie_query = ref("");
+const logged_in = ref(false);
+const hide_scheduled = ref(false);
 
-      if (!confirmed) {
-        return false;
-      }
-
-      return fetch(`${config.public.apiURL}/movies/l/${this.list_id}/m/${movie_id}`, {
-        credentials: "include",
-        method: "DELETE",
-        headers: {
-          "Content-type": "application/json",
-          "token": useCookie("token").value,
-        }
-      })
-          .then(response => response.json())
-          .then(_json => {
-            this.filtered_movies = this.filtered_movies.filter((movie) => {
-              return movie.id !== movie_id
-            })
-          })
-          .catch(err => console.log(err));
+const getList = async function (list_id: number) {
+  let config = useRuntimeConfig();
+  const { data, error } = await useFetch<MovieList>(
+    `${config.public.apiURL}/lists/${list_id}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
     },
-    filterMovies: function () {
-      if (!this.movie_query) {
-        this.filtered_movies = this.movies;
-        return;
-      }
+  );
 
-      this.filtered_movies = this.movies.filter(movie => {
-        return movie.title.toLowerCase()
-            .search(this.movie_query.toLowerCase()) > -1
-      });
-    },
-    showModal: function (movie) {
-      this.modal_movie = movie;
-      document.getElementById("movie-modal").classList.remove("hidden");
-    },
-  },
-  mounted() {
-    const route = useRoute();
-    this.list_id = route.params.id
-    this.getList(this.list_id)
-
-    const token = useCookie("token").value;
-    if (token) {
-      this.logged_in = true;
+  if (error.value) {
+    if (error.value.statusCode === 401) {
+      navigateTo("/");
+    }
+    if (error.value.statusCode === 404) {
+      alert("List not found");
+      navigateTo("/lists");
+    }
+  } else {
+    if (!data.value) {
+      alert("List not found");
+      navigateTo("/lists");
+    } else {
+      list.value = data.value;
+      movies.value = data.value?.movies || [];
+      filtered_movies.value = movies.value;
     }
   }
-}
+};
+
+const hideScheduled = function () {
+  if (hide_scheduled && movies.value.length > 0) {
+    let filtered = movies.value.filter((movie) => {
+      return movie.last_watched === null;
+    });
+    if (typeof filtered != "undefined") {
+      filtered_movies.value = filtered;
+    }
+  } else {
+    filtered_movies.value = movies.value;
+  }
+};
+
+const removeMovie = async function (movie_id: number) {
+  let config = useRuntimeConfig();
+  let confirmed = confirm("Remove movie from list?");
+
+  if (!confirmed) {
+    return false;
+  }
+
+  const { data, error } = await useFetch<MovieList>(
+    `${config.public.apiURL}/lists/${list_id.value}/movie/${movie_id}/`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
+    },
+  );
+
+  if (error.value) {
+    if (error.value.statusCode === 401) {
+      navigateTo("/");
+    }
+    if (error.value.statusCode === 404) {
+      alert("List not found");
+      navigateTo("/lists");
+    }
+  } else {
+    if (!data.value) {
+      alert("List not found");
+      navigateTo("/lists");
+    } else {
+      list.value = data.value;
+      movies.value = data.value?.movies || [];
+      filtered_movies.value = movies.value;
+    }
+  }
+};
+
+const filterMovies = function () {
+  if (!movie_query) {
+    filtered_movies.value = movies.value;
+    return;
+  }
+
+  filtered_movies.value = movies.value.filter((movie) => {
+    return (
+      movie.title.toLowerCase().search(movie_query.value.toLowerCase()) > -1
+    );
+  });
+};
+
+const showModal = function (movie: Movie) {
+  modal_movie.value = movie;
+  document.getElementById("movie-modal")?.classList.remove("hidden");
+};
+
+onMounted(() => {
+  const route = useRoute();
+  if (typeof route.params.id === "string") {
+    const list_param: string = route.params.id;
+    list_id.value = parseInt(list_param);
+    getList(list_id.value);
+  }
+
+  const token = useCookie("token").value;
+  if (token) {
+    logged_in.value = true;
+  }
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/types/movie.ts

@@ -0,0 +1,14 @@
+export type Movie = {
+  id: number;
+  title: string;
+  added_by: number;
+  imdb_id: string;
+  year: number;
+  critic_score: string;
+  genre: string;
+  director: string;
+  actors: string;
+  plot: string;
+  poster: string;
+  last_watched: string;
+};

src/types/movielist.ts

@@ -1,7 +1,10 @@
+import type { Movie } from "~/types/movie";
+
 export type MovieList = {
   id: number;
   name: string;
   public: boolean;
   owner: number;
   movie_count: number;
+  movies: Movie[];
 };