Move delete to new component

src/components/list/list-settings-dropdown.vue

@@ -23,7 +23,7 @@
 						Duplicate this list
 					</router-link>
 					<router-link
-						:to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }"
+						:to="{ name: 'list.list.settings.delete', params: { id: currentList.id } }"
 						class="dropdown-item">
 						Delete this list
 					</router-link>

src/router/index.js

@@ -34,6 +34,7 @@ import ListSettingEdit from '@/views/list/settings/edit'
 import ListSettingBackground from '@/views/list/settings/background'
 import ListSettingDuplicate from '@/views/list/settings/duplicate'
 import ListSettingShare from '@/views/list/settings/share'
+import ListSettingDelete from '@/views/list/settings/delete'
 // Saved Filters
 import CreateSavedFilter from '@/views/filters/CreateSavedFilter'
 
@@ -230,6 +231,11 @@ export default new Router({
 							name: 'list.list.settings.edit',
 							component: ListSettingShare,
 						},
+						{
+							path: '/lists/:listId/settings/delete',
+							name: 'list.list.settings.delete',
+							component: ListSettingDelete,
+						},
 					],
 				},
 				{

src/views/list/settings/delete.vue

@@ -0,0 +1,41 @@
+<template>
+	<modal
+		@close="$router.back()"
+		@submit="deleteList()"
+	>
+		<span slot="header">Delete the list</span>
+		<p slot="text">Are you sure you want to delete this list and all of its contents?
+			<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
+	</modal>
+</template>
+
+<script>
+import ListService from '@/services/list'
+
+export default {
+	name: 'delete',
+	data() {
+		return {
+			listService: ListService,
+		}
+	},
+	created() {
+		this.listService = new ListService()
+	},
+	methods: {
+		deleteList() {
+			const list = this.$store.getters['lists/getListById'](this.$route.params.listId)
+
+			this.listService.delete(list)
+				.then(() => {
+					this.$store.commit('namespaces/removeListFromNamespaceById', list)
+					this.success({message: 'The list was successfully deleted.'}, this)
+					this.$router.push({name: 'home'})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
+</script>

src/views/list/settings/edit.vue

@@ -5,7 +5,7 @@
 		primary-label="Save"
 		@primary="save"
 		tertary="Delete"
-		@tertary="showDeleteModal = true"
+		@tertary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
 	>
 		<div class="field">
 			<label class="label" for="listtext">List Name</label>
@@ -72,21 +72,10 @@
 			</div>
 		</div>
 
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@save="deleteList()"
-				v-if="showDeleteModal">
-				<span slot="header">Delete the list</span>
-				<p slot="text">Are you sure you want to delete this list and all of its contents?
-					<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
-			</modal>
-		</transition>
 	</create-edit>
 </template>
 
 <script>
-import router from '@/router'
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 import ColorPicker from '@/components/input/colorPicker'
@@ -103,8 +92,6 @@ export default {
 		return {
 			list: ListModel,
 			listService: ListService,
-
-			showDeleteModal: false,
 		}
 	},
 	components: {
@@ -133,7 +120,8 @@ export default {
 	},
 	methods: {
 		loadList() {
-			let list = new ListModel({id: this.$route.params.id})
+			const list = new ListModel({id: this.$route.params.listId})
+
 			this.listService.get(list)
 				.then(r => {
 					this.$set(this, 'list', r)
@@ -157,17 +145,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		deleteList() {
-			this.listService.delete(this.list)
-				.then(() => {
-					this.$store.commit('namespaces/removeListFromNamespaceById', this.list)
-					this.success({message: 'The list was successfully deleted.'}, this)
-					router.push({name: 'home'})
-				})
-				.catch(e => {
-					this.error(e, this)
-				})
-		},
 	},
 }
 </script>