7 changed files with 109 additions and 207 deletions
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.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>
--- a/.idea/php.xml
+++ b/.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>
--- a/.idea/prettier.xml
+++ b/.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>
--- a/.idea/workspace.xml
+++ b/.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/types/movielist.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/movielist.ts" 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" />
@ -47,9 +44,9 @@
  <component name="ProblemsViewState">
    <option name="selectedTabId" value="CurrentFile" />
  </component>
-  <component name="ProjectColorInfo">{
-  &quot;associatedIndex&quot;: 8
-}</component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "associatedIndex": 8
+}]]></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="1743998844137" duration="23268000" />
+      <workItem from="1743904898331" duration="11972000" />
    </task>
    <servers />
  </component>
--- a/src/pages/lists/[id].vue
+++ b/src/pages/lists/[id].vue
@ -10,47 +10,33 @@
          <li>
            <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
            <input
-              id="hide_scheduled"
-              v-model="hide_scheduled"
-              type="checkbox"
-              @change="hideScheduled"
-            />
+                @change="hideScheduled"
+                v-model="hide_scheduled" id="hide_scheduled" type="checkbox"/>
          </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>
@ -59,139 +45,100 @@
  </div>
 </template>

-<script lang="ts" setup>
+<script>
 import ShowMovie from "~/components/modal-content/ShowMovie.vue";
-import "lazysizes";
-import type { MovieList } from "~/types/movielist";
-import type { Movie } from "~/types/movie";
+import 'lazysizes';

-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);
-
-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}`,
-      },
+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))
    },
-  );
-
-  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}`,
-      },
+    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?");

-  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;
+      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));
+    },
+    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>
--- a/src/types/movie.ts
+++ b/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;
-};
--- a/src/types/movielist.ts
+++ b/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[];
 };