From 7d2bd192ab1084eaedaaa239d227f61a5979966a Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sun, 22 Mar 2020 20:40:13 +0000
Subject: [PATCH] Add support for archiving lists and namespaces (#73)

Use fancy checkbox for archiving namespace

Show is archived badge for namespaces

Fix is archived badge in navigation bar

Add check to filter out archived lists or namespaces

Show if a list is archived in menu

Hide edit task if the list is archived

Hide marking tasks as done if the list is archived

Show is archived message on list

Add archiving a list

Add archiving a namespace

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/73
---
 src/App.vue                                   | 28 +++++++++++--
 src/components/lists/EditList.vue             | 13 ++++++
 src/components/lists/ShowList.vue             |  4 ++
 src/components/namespaces/EditNamespace.vue   | 23 +++++++++-
 src/components/tasks/ShowListTasks.vue        |  8 ++--
 src/models/list.js                            |  1 +
 src/models/namespace.js                       |  1 +
 src/styles/components/base/fancycheckbox.scss |  9 +++-
 src/styles/theme/navigation.scss              | 42 ++++++++++++++++++-
 9 files changed, 118 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7b7ca5840..a576618b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -104,6 +104,18 @@
 							</ul>
 						</div>
 						<aside class="menu namespaces-lists">
+							<div class="fancycheckbox show-archived-check">
+								<input type="checkbox" v-model="showArchived" @change="loadNamespaces()" style="display: none;" id="showArchivedCheckbox"/>
+								<label class="check" for="showArchivedCheckbox">
+									<svg width="18px" height="18px" viewBox="0 0 18 18">
+										<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+										<polyline points="1 9 7 14 15 4"></polyline>
+									</svg>
+									<span>
+										Show Archived
+									</span>
+								</label>
+							</div>
 							<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
 							<template v-for="n in namespaces">
 								<div :key="n.id">
@@ -122,14 +134,23 @@
 										</span>
 									</router-link>
 									<label class="menu-label" v-tooltip="n.name + ' (' + n.lists.length + ')'" :for="n.id + 'checker'">
-										{{n.name}} ({{n.lists.length}})
+										<span>
+											{{n.name}} ({{n.lists.length}})
+										</span>
+										<span class="is-archived" v-if="n.is_archived">
+											Archived
+										</span>
 									</label>
 								</div>
 								<input :key="n.id + 'checker'" type="checkbox" checked="checked" :id="n.id + 'checker'" class="checkinput"/>
 								<div class="more-container" :key="n.id + 'child'">
 									<ul class="menu-list can-be-hidden" >
 										<li v-for="l in n.lists" :key="l.id">
-											<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}
+											<router-link :to="{ name: 'showList', params: { id: l.id} }">
+												<span>{{l.title}}</span>
+												<span class="is-archived" v-if="l.is_archived">
+													Archived
+												</span>
 											</router-link>
 										</li>
 									</ul>
@@ -220,6 +241,7 @@
 				authTypes: authTypes,
 				isOnline: true,
 				motd: '',
+				showArchived: false,
 
 				// Service Worker stuff
 				updateAvailable: false,
@@ -280,7 +302,7 @@
 			},
 			loadNamespaces() {
 				this.namespaceService = new NamespaceService()
-				this.namespaceService.getAll()
+				this.namespaceService.getAll({}, {is_archived: this.showArchived})
 					.then(r => {
 						this.$set(this, 'namespaces', r)
 					})
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index eb5e1edd8..88b705ab6 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -1,5 +1,9 @@
 <template>
 	<div class="loader-container" :class="{ 'is-loading': listService.loading}">
+		<div class="notification is-warning" v-if="list.is_archived">
+			This list is archived.
+			It is not possible to create new or edit tasks or it.
+		</div>
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@@ -21,6 +25,15 @@
 								<textarea :class="{ 'disabled': listService.loading}" :disabled="listService.loading" class="textarea" placeholder="The lists description goes here..." id="listdescription" v-model="list.description"></textarea>
 							</div>
 						</div>
+						<div class="field">
+							<label class="label" for="isArchivedCheck">Is Archived</label>
+							<div class="control">
+								<label class="checkbox" v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
+									<input type="checkbox" id="isArchivedCheck" v-model="list.is_archived"/>
+									This list is archived
+								</label>
+							</div>
+						</div>
 					</form>
 
 					<div class="columns bigbuttons">
diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue
index 5116b9493..4f5656163 100644
--- a/src/components/lists/ShowList.vue
+++ b/src/components/lists/ShowList.vue
@@ -5,6 +5,10 @@
 				<icon icon="cog" size="2x"/>
 			</router-link>
 			<h1 :style="{ 'opacity': list.title === '' ? '0': '1' }">{{ list.title === '' ? 'Loading...': list.title}}</h1>
+			<div class="notification is-warning" v-if="list.is_archived">
+				This list is archived.
+				It is not possible to create new or edit tasks or it.
+			</div>
 			<div class="switch-view">
 				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt'}">List</router-link>
 				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'gantt' } }" :class="{'is-active': $route.params.type === 'gantt'}">Gantt</router-link>
diff --git a/src/components/namespaces/EditNamespace.vue b/src/components/namespaces/EditNamespace.vue
index 138a3fdd1..942d9fd7f 100644
--- a/src/components/namespaces/EditNamespace.vue
+++ b/src/components/namespaces/EditNamespace.vue
@@ -1,5 +1,9 @@
 <template>
 	<div class="loader-container" v-bind:class="{ 'is-loading': namespaceService.loading}">
+		<div class="notification is-warning" v-if="namespace.is_archived">
+			This namespace is archived.
+			It is not possible to create new lists or edit it.
+		</div>
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@@ -21,6 +25,23 @@
 								<textarea :class="{ 'disabled': namespaceService.loading}" :disabled="namespaceService.loading" class="textarea" placeholder="The namespaces description goes here..." id="namespacedescription" v-model="namespace.description"></textarea>
 							</div>
 						</div>
+						<div class="field">
+							<label class="label" for="isArchivedCheck">Is Archived</label>
+							<div class="control">
+								<div class="fancycheckbox" v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
+									<input type="checkbox" id="isArchivedCheck" v-model="namespace.is_archived"/>
+									<label class="check" for="isArchivedCheck">
+										<svg width="18px" height="18px" viewBox="0 0 18 18">
+											<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+											<polyline points="1 9 7 14 15 4"></polyline>
+										</svg>
+										<span>
+											This namespace is archived
+										</span>
+									</label>
+								</div>
+							</div>
+						</div>
 					</form>
 
 					<div class="columns bigbuttons">
@@ -62,7 +83,7 @@
 
 	import NamespaceService from '../../services/namespace'
 	import NamespaceModel from '../../models/namespace'
-	
+
 	export default {
 		name: "EditNamespace",
 		data() {
diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue
index d248ca423..547b2537d 100644
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@@ -32,7 +32,7 @@
 			</button>
 		</div>
 
-		<div class="field task-add">
+		<div class="field task-add" v-if="!list.is_archived">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
 					<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task..." @keyup.enter="addTask()"/>
@@ -59,8 +59,8 @@
 				<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
 					<div class="task" v-for="l in tasks" :key="l.id">
 						<span>
-							<div class="fancycheckbox">
-								<input @change="markAsDone" type="checkbox" :id="l.id" :checked="l.done" style="display: none;">
+							<div class="fancycheckbox" :class="{'is-disabled': list.is_archived}">
+								<input @change="markAsDone" type="checkbox" :id="l.id" :checked="l.done" style="display: none;" :disabled="list.is_archived">
 								<label :for="l.id" class="check">
 									<svg width="18px" height="18px" viewBox="0 0 18 18">
 										<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
@@ -92,7 +92,7 @@
 								<priority-label :priority="l.priority"/>
 							</router-link>
 						</span>
-						<div @click="editTask(l.id)" class="icon settings">
+						<div @click="editTask(l.id)" class="icon settings" v-if="!list.is_archived">
 							<icon icon="pencil-alt"/>
 						</div>
 					</div>
diff --git a/src/models/list.js b/src/models/list.js
index 1289a8360..86e941369 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -27,6 +27,7 @@ export default class ListModel extends AbstractModel {
 			owner: UserModel,
 			tasks: [],
 			namespaceID: 0,
+			is_archived: false,
 
 			created: null,
 			updated: null,
diff --git a/src/models/namespace.js b/src/models/namespace.js
index 0db109674..eb5d4e4d7 100644
--- a/src/models/namespace.js
+++ b/src/models/namespace.js
@@ -23,6 +23,7 @@ export default class NamespaceModel extends AbstractModel {
 			description: '',
 			owner: UserModel,
 			lists: [],
+			is_archived: false,
 
 			created: null,
 			updated: null,
diff --git a/src/styles/components/base/fancycheckbox.scss b/src/styles/components/base/fancycheckbox.scss
index f12045cc7..fc15ef445 100644
--- a/src/styles/components/base/fancycheckbox.scss
+++ b/src/styles/components/base/fancycheckbox.scss
@@ -1,10 +1,13 @@
-
 // Fancy Checkboxes
 .fancycheckbox {
   display: inline-block;
   padding-right: 5px;
   padding-top: 3px;
 
+  input[type=checkbox] {
+    display: none;
+  }
+
   &.is-block {
     margin: .5em .2em;
   }
@@ -50,6 +53,10 @@
     }
   }
 
+  &.is-disabled .check:hover svg {
+    stroke: #c8ccd4;
+  }
+
   input[type=checkbox]:checked + .check svg {
     stroke: $primary;
   }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 19a02db75..868491065 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -98,6 +98,15 @@
       }
     }
 
+    .show-archived-check {
+      width: 100%;
+      text-align: right;
+
+      span {
+        vertical-align: super;
+      }
+    }
+
     .menu{
       .menu-label {
         font-size: 1em;
@@ -116,6 +125,34 @@
         overflow: hidden;
       }
 
+      .menu-label, .menu-list a {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .is-archived {
+          font-size: 0.75em;
+          border: 1px solid $grey;
+          color: $grey !important;
+          padding: 2px 4px;
+          border-radius: 3px;
+          font-family: $vikunja-font;
+          min-width: 60px;
+          display: block;
+          margin-left: 3px;
+          text-align: center;
+        }
+      }
+
+      .menu-label .is-archived {
+        min-width: 85px;
+      }
+
       .nsettings{
         float: right;
         padding: 10px 0.3em 0;
@@ -164,7 +201,7 @@
         }
 
         a {
-          padding: 0.75em 1em 0.75em $navbar-padding * 1.5;
+          padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
           -webkit-border-radius: 0;
@@ -173,7 +210,6 @@
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          display: inline-block;
           width: 100%;
           border-left: $vikunja-nav-selected-width solid transparent;
 
@@ -197,6 +233,7 @@
             background: $white;
             border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
           }
+
         }
       }
 
@@ -220,6 +257,7 @@
 
         a {
           padding-left: 2em;
+          display: inline-block;
         }
       }
     }