Canceled movies are remove from the dashboard

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) {

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);