Add option to (un)archive a list

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

@@ -18,6 +18,13 @@
 							Delete this filter
 						</router-link>
 					</template>
+					<template v-if="list.isArchived">
+						<router-link
+							:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+							class="dropdown-item">
+							Un-Archive this list
+						</router-link>
+					</template>
 					<template v-else>
 						<router-link
 							:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
@@ -40,6 +47,11 @@
 							class="dropdown-item">
 							Duplicate this list
 						</router-link>
+						<router-link
+							:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+							class="dropdown-item">
+							Archive this list
+						</router-link>
 						<router-link
 							:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
 							class="dropdown-item">

src/router/index.js

@@ -35,6 +35,7 @@ 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'
+import ListSettingArchive from '@/views/list/settings/archive'
 import FilterSettingEdit from '@/views/filters/settings/edit'
 import FilterSettingDelete from '@/views/filters/settings/delete'
 // Saved Filters
@@ -212,6 +213,11 @@ export default new Router({
 			name: 'list.settings.delete',
 			component: ListSettingDelete,
 		},
+		{
+			path: '/lists/:listId/settings/archive',
+			name: 'list.settings.archive',
+			component: ListSettingArchive,
+		},
 		{
 			path: '/lists/:listId/settings/edit',
 			name: 'filter.settings.edit',
@@ -262,6 +268,11 @@ export default new Router({
 							name: 'list.list.settings.delete',
 							component: ListSettingDelete,
 						},
+						{
+							path: '/lists/:listId/settings/archive',
+							name: 'list.list.settings.archive',
+							component: ListSettingArchive,
+						},
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.list.settings.edit',
@@ -309,6 +320,11 @@ export default new Router({
 							name: 'list.gantt.settings.delete',
 							component: ListSettingDelete,
 						},
+						{
+							path: '/lists/:listId/settings/archive',
+							name: 'list.gantt.settings.archive',
+							component: ListSettingArchive,
+						},
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.gantt.settings.edit',
@@ -351,6 +367,11 @@ export default new Router({
 							name: 'list.table.settings.delete',
 							component: ListSettingDelete,
 						},
+						{
+							path: '/lists/:listId/settings/archive',
+							name: 'list.table.settings.archive',
+							component: ListSettingArchive,
+						},
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.table.settings.edit',
@@ -398,6 +419,11 @@ export default new Router({
 							name: 'list.kanban.settings.delete',
 							component: ListSettingDelete,
 						},
+						{
+							path: '/lists/:listId/settings/archive',
+							name: 'list.kanban.settings.archive',
+							component: ListSettingArchive,
+						},
 						{
 							path: '/lists/:listId/settings/edit',
 							name: 'filter.kanban.settings.edit',

src/views/list/ShowList.vue

@@ -27,7 +27,7 @@
 				</router-link>
 			</div>
 		</div>
-		<div class="notification is-warning" v-if="list.isArchived">
+		<div class="notification is-warning" v-if="currentList.isArchived">
 			This list is archived.
 			It is not possible to create new or edit tasks or it.
 		</div>
@@ -75,6 +75,7 @@ export default {
 			return typeof this.$store.state.currentList === 'undefined' ? {
 				id: 0,
 				title: '',
+				isArchived: false,
 			} : this.$store.state.currentList
 		},
 	},

src/views/list/settings/archive.vue

@@ -0,0 +1,51 @@
+<template>
+	<modal
+		@close="$router.back()"
+		@submit="archiveList()"
+	>
+		<span slot="header">{{ list.isArchived ? 'Un-' : '' }}Archive this list</span>
+		<p slot="text" v-if="list.isArchived">
+			You will be able to create new tasks or edit it.
+		</p>
+		<p slot="text" v-else>
+			You won't be able to edit this list or create new tasks until you un-archive it.
+		</p>
+	</modal>
+</template>
+
+<script>
+import ListService from '@/services/list'
+
+export default {
+	name: 'delete',
+	data() {
+		return {
+			listService: ListService,
+			list: null,
+		}
+	},
+	created() {
+		this.listService = new ListService()
+		this.list = this.$store.getters['lists/getListById'](this.$route.params.listId)
+	},
+	methods: {
+		archiveList() {
+
+			this.list.isArchived = !this.list.isArchived
+
+			this.listService.update(this.list)
+				.then(r => {
+					this.$store.commit('currentList', r)
+					this.$store.commit('namespaces/setListInNamespaceById', r)
+					this.success({message: 'The list was successfully archived.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.$router.back()
+				})
+		},
+	},
+}
+</script>

src/views/list/settings/edit.vue

@@ -55,16 +55,6 @@
 				/>
 			</div>
 		</div>
-		<div class="field">
-			<label class="label" for="isArchivedCheck">Is Archived</label>
-			<div class="control">
-				<fancycheckbox
-					v-model="list.isArchived"
-					v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
-					This list is archived
-				</fancycheckbox>
-			</div>
-		</div>
 		<div class="field">
 			<label class="label">Color</label>
 			<div class="control">
@@ -79,7 +69,6 @@
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 import ColorPicker from '@/components/input/colorPicker'
-import Fancycheckbox from '@/components/input/fancycheckbox'
 import LoadingComponent from '@/components/misc/loading'
 import ErrorComponent from '@/components/misc/error'
 import ListDuplicateService from '@/services/listDuplicateService'
@@ -97,7 +86,6 @@ export default {
 	components: {
 		CreateEdit,
 		ColorPicker,
-		Fancycheckbox,
 		editor: () => ({
 			component: import(/* webpackChunkName: "editor" */ '@/components/input/editor'),
 			loading: LoadingComponent,