Move duplicate to new view

src/views/list/EditList.vue

@@ -5,25 +5,6 @@
 			It is not possible to create new or edit tasks or it.
 		</div>
 
-		<!-- Duplicate list -->
-		<card class="has-overflow" title="Duplicate this list">
-			<p>Select a namespace which should hold the duplicated list:</p>
-
-			<div class="field has-addons">
-				<div class="control is-expanded">
-					<namespace-search @selected="selectNamespace"/>
-				</div>
-				<div class="control">
-					<x-button
-						:loading="listDuplicateService.loading"
-						@click="duplicateList"
-					>
-						Duplicate
-					</x-button>
-				</div>
-			</div>
-		</card>
-
 		<background :list-id="$route.params.id"/>
 
 		<component
@@ -44,7 +25,6 @@
 </template>
 
 <script>
-import router from '../../router'
 import manageSharing from '../../components/sharing/userTeam'
 import LinkSharing from '../../components/sharing/linkSharing'
 
@@ -52,8 +32,6 @@ import Fancycheckbox from '../../components/input/fancycheckbox'
 import Background from '../../components/list/partials/background-settings'
 import ColorPicker from '../../components/input/colorPicker'
 import NamespaceSearch from '../../components/namespace/namespace-search'
-import ListDuplicateService from '../../services/listDuplicateService'
-import ListDuplicateModel from '../../models/listDuplicateModel'
 import LoadingComponent from '../../components/misc/loading'
 import ErrorComponent from '../../components/misc/error'
 
@@ -63,9 +41,6 @@ export default {
 		return {
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
-
-			listDuplicateService: ListDuplicateService,
-			selectedNamespace: null,
 		}
 	},
 	components: {
@@ -82,30 +57,5 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	watch: {
-		// call again the method if the route changes
-		'$route': 'loadList',
-	},
-	methods: {
-		selectNamespace(namespace) {
-			this.selectedNamespace = namespace
-		},
-		duplicateList() {
-			const listDuplicate = new ListDuplicateModel({
-				listId: this.list.id,
-				namespaceId: this.selectedNamespace.id,
-			})
-			this.listDuplicateService.create(listDuplicate)
-				.then(r => {
-					this.$store.commit('namespaces/addListToNamespace', r.list)
-					this.$store.commit('lists/addList', r.list)
-					this.success({message: 'The list was successfully duplicated.'}, this)
-					router.push({name: 'list.index', params: {listId: r.list.id}})
-				})
-				.catch(e => {
-					this.error(e, this)
-				})
-		},
-	},
 }
 </script>

src/views/list/settings/duplicate.vue

@@ -1,9 +1,55 @@
 <template>
-
+	<create-edit
+		title="Duplicate this list"
+		primary-icon="copy"
+		primary-label="Duplicate"
+		@primary="duplicateList"
+		:loading="listDuplicateService.loading"
+	>
+		<p>Select a namespace which should hold the duplicated list:</p>
+		<namespace-search @selected="selectNamespace"/>
+	</create-edit>
 </template>
 
 <script>
+import ListDuplicateService from '@/services/listDuplicateService'
+import NamespaceSearch from '@/components/namespace/namespace-search'
+import ListDuplicateModel from '@/models/listDuplicateModel'
+
 export default {
-name: 'list-setting-duplicate'
+	name: 'list-setting-duplicate',
+	data() {
+		return {
+			listDuplicateService: ListDuplicateService,
+			selectedNamespace: null,
+		}
+	},
+	components: {
+		NamespaceSearch,
+	},
+	created() {
+		this.listDuplicateService = new ListDuplicateService()
+	},
+	methods: {
+		selectNamespace(namespace) {
+			this.selectedNamespace = namespace
+		},
+		duplicateList() {
+			const listDuplicate = new ListDuplicateModel({
+				listId: this.$route.listId,
+				namespaceId: this.selectedNamespace.id,
+			})
+			this.listDuplicateService.create(listDuplicate)
+				.then(r => {
+					this.$store.commit('namespaces/addListToNamespace', r.list)
+					this.$store.commit('lists/addList', r.list)
+					this.success({message: 'The list was successfully duplicated.'}, this)
+					this.$router.push({name: 'list.index', params: {listId: r.list.id}})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
 }
 </script>