Add MovieListItem component. Integrate MovieListComponentMixin into MovieList

services/webui/src/app/components/MovieList.vue

@@ -1,40 +1,18 @@
 <template>
 	<ul class="w-full grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 lg:gap-8">
-		<li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md lg:flex-col transform hover:scale-105 transition-transform cursor-pointer" v-for="(movie, index) in movies"
-			@click="$emit('onClickMovie', movie, index)">
-			<movie-poster class="w-3/12 lg:w-full flex-shrink-0" :src="movie.posterPath ?? undefined" size="w185"/>
-			<div class="relative box-border p-4 flex flex-col justify-center w-full lg:h-full text-md xs:text-lg sm:text-xl md:text-base xl:text-sm" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);">
-				<div class="flex-grow flex flex-col justify-center lg:justify-start">
-					<h3 class="font-medium">{{ movie.title }}</h3>
-					<span v-if="movie.releaseDate" class="opacity-50">{{ movie.releaseDate.slice(0, 4) }}</span>
-				</div>
-				<div v-if="movie.plexLink" title="Added to Plex" class="flex">
-					<div class="inline-block bg-ui-plexGray rounded-full w-1/6 lg:w-1/3">
-						<img src="../assets/plex_logo.svg" alt="Added to Plex" style="margin: 15% 25%;"/>
-					</div>
-				</div>
-				<!-- <div class="flex flex-row items-end space-x-2">
-					<div class="w-full rounded-full bg-gray-200 overflow-hidden flex-grow-0">
-						<div class="w-1/2 bg-red-500 h-1"></div>
-					</div>
-					<div class="relative h-1 flex justify-center items-center text-sm">
-						<span class="h-0 overflow-hidden">100%</span>
-						<span class="absolute left-0 text-center w-full opacity-75">{{ 50 }}%</span>
-					</div>
-				</div> -->
-			</div>
-		</li>
+		<movie-list-item v-for="(movie, index) in storedMovies" :movie="movie" @click="$emit('onClickMovie', movie, index)"/>
 	</ul>
 </template>
 
 <script lang="ts">
 import { IMovie } from "@autoplex-api/request";
 import { defineComponent } from "vue";
-import MoviePoster from "./MoviePoster.vue";
+import MovieListItem from "./MovieListItem.vue";
+import MovieListComponentMixin from "./mixins/MovieListComponentMixin";
 
 export default defineComponent({
 	components: {
-		MoviePoster
+		MovieListItem
 	},
 	methods: {
 		onModalClosed() {
@@ -42,10 +20,6 @@ export default defineComponent({
             this.$router.push({ path: parentPath, query: this.$route.query });
 		}
 	},
-	props: {
-		movies: {
-			default: <IMovie[]>[]
-		}
-	}
+	mixins: [MovieListComponentMixin]
 });
 </script>

services/webui/src/app/components/MovieListItem.vue

@@ -0,0 +1,29 @@
+<template>
+	<li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md lg:flex-col transform hover:scale-105 transition-transform cursor-pointer">
+		<movie-poster class="w-3/12 lg:w-full flex-shrink-0" :src="movie.posterPath ?? undefined" size="w185"/>
+		<div class="relative box-border p-4 flex flex-col justify-center w-full lg:h-full text-md xs:text-lg sm:text-xl md:text-base xl:text-sm" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);">
+			<div class="flex-grow flex flex-col justify-center lg:justify-start">
+				<h3 class="font-medium">{{ movie.title }}</h3>
+				<span v-if="movie.releaseDate" class="opacity-50">{{ movie.releaseDate.slice(0, 4) }}</span>
+			</div>
+			<div v-if="movie.plexLink" title="Added to Plex" class="flex">
+				<div class="inline-block bg-ui-plexGray rounded-full w-1/6 lg:w-1/3">
+					<img src="../assets/plex_logo.svg" alt="Added to Plex" style="margin: 15% 25%;"/>
+				</div>
+			</div>
+		</div>
+	</li>
+</template>
+
+<script lang="ts">
+import { IMovie } from "@autoplex-api/request";
+import { defineComponent } from "vue";
+import MoviePoster from "./MoviePoster.vue";
+
+export default defineComponent({
+	components: {
+		MoviePoster
+	},
+	props: ["movie"]
+});
+</script>