From d40d46eed4bc679ad171d57b100a569dfe2b7ac9 Mon Sep 17 00:00:00 2001
From: David Ludwig <davidludwigii@gmail.com>
Date: Mon, 10 May 2021 21:13:12 +0000
Subject: [PATCH] Canceled movies are remove from the dashboard

---
 services/webui/src/app/components/modals/MovieModal.vue | 1 +
 services/webui/src/app/views/Dashboard.vue              | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/services/webui/src/app/components/modals/MovieModal.vue b/services/webui/src/app/components/modals/MovieModal.vue
index 1022687..7c8dfa3 100644
--- a/services/webui/src/app/components/modals/MovieModal.vue
+++ b/services/webui/src/app/components/modals/MovieModal.vue
@@ -189,6 +189,7 @@ export default defineComponent({
 			}
 			this.movie.ticketId = null;
 			this.movie.requestedBy = null;
+			this.$emit("onCancel", this.movie);
 		},
 		async request() {
 			if (this.isRequesting || this.movie == null || this.movie.tmdbId == null) {
diff --git a/services/webui/src/app/views/Dashboard.vue b/services/webui/src/app/views/Dashboard.vue
index d9d1ffd..b6943cd 100644
--- a/services/webui/src/app/views/Dashboard.vue
+++ b/services/webui/src/app/views/Dashboard.vue
@@ -3,11 +3,11 @@
 		<h1 class="">Active Requests</h1>
 	</div>
 	<movie-list :movies="activeRequests" @onClickMovie="displayMovie"/>
-	<movie-modal :tmdb-id="activeTmdb" @onClose="activeTmdb = undefined"/>
+	<movie-modal :tmdb-id="activeTmdb" @onClose="activeTmdb = undefined" @onCancel="removeMovieRequest"/>
 </template>
 
 <script lang="ts">
-import type { IMovie } from "@autoplex-api/request";
+import type { IMovie, IMovieDetails } from "@autoplex-api/request";
 import { Status } from "@autoplex/restful";
 import { Action } from "../store";
 import { defineComponent } from "vue";
@@ -29,6 +29,10 @@ export default defineComponent({
 		displayMovie(movie: IMovie, index: number) {
 			this.activeTmdb = movie.tmdbId;
 		},
+		removeMovieRequest(movie: IMovieDetails) {
+			let index = this.activeRequests.findIndex(request => request.tmdbId == movie.tmdbId);
+			this.activeRequests.splice(index, 1);
+		},
 		async fetchRequests() {
 			try {
 				let [status, response] = await this.$store.dispatch(Action.ActiveMovieRequests, undefined);