.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<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,24 +9,9 @@
   <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,6 +2,5 @@
 <project version="4">
   <component name="PrettierConfiguration">
     <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
   </component>
 </project>

.idea/workspace.xml

@@ -5,11 +5,8 @@
   </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/[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" />
-      <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" />
@@ -47,9 +44,9 @@
   <component name="ProblemsViewState">
     <option name="selectedTabId" value="CurrentFile" />
   </component>
-  <component name="ProjectColorInfo">{
+  <component name="ProjectColorInfo"><![CDATA[{
-  &quot;associatedIndex&quot;: 8
+  "associatedIndex": 8
-}</component>
+}]]></component>
   <component name="ProjectId" id="2K1xoABBc3o8XBi4orGtOrB9Dxn" />
   <component name="ProjectLevelVcsManager">
     <ConfirmationsSetting value="1" id="Add" />
@@ -66,7 +63,7 @@
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
     "git-widget-placeholder": "main",
-    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
+    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web",
     "list.type.of.created.stylesheet": "CSS",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.standard": "true",
@@ -75,17 +72,15 @@
     "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",
+    "settings.editor.selected.configurable": "settings.javascript.prettier",
     "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">
@@ -132,8 +127,7 @@
       <workItem from="1673397538637" duration="47416000" />
       <workItem from="1673508732689" duration="1316000" />
       <workItem from="1673547794038" duration="2346000" />
-      <workItem from="1743904898331" duration="20256000" />
+      <workItem from="1743904898331" duration="11972000" />
-      <workItem from="1743998844137" duration="23268000" />
     </task>
     <servers />
   </component>

src/pages/lists/[id].vue

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

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