Merge pull request #1418 from nextcloud/dependabot/npm_and_yarn/vue/eslint-plugin-node-11.0.0

Bump eslint-plugin-node from 8.0.1 to 11.0.0
2020-01-05 19:04:32 +01:00
parent 1d8190aff9 6bbfe00474
commit 6adae96d51
37 changed files with 597 additions and 564 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,67 +1,8 @@
 module.exports = {
-	root: true,
-	env: {
-		browser: true,
-		es6: true,
-		node: true,
-		jest: true
-	},
-	globals: {
-		t: true,
-		n: true,
-		OC: true,
-		OCA: true,
-		Vue: true,
-		VueRouter: true
-	},
-	parserOptions: {
-		parser: 'babel-eslint',
-		ecmaVersion: 6
-	},
 	extends: [
-		'eslint:recommended',
-		'plugin:node/recommended',
-		'plugin:vue/essential',
-		'plugin:vue/recommended',
-		'standard'
+		'nextcloud'
 	],
-	plugins: ['vue', 'node'],
 	rules: {
-		// space before function ()
-		'space-before-function-paren': ['error', 'never'],
-		// curly braces always space
-		'object-curly-spacing': ['error', 'always'],
-		// stay consistent with array brackets
-		'array-bracket-newline': ['error', 'consistent'],
-		// 1tbs brace style
-		'brace-style': 'error',
-		// tabs only
-		indent: ['error', 'tab'],
-		'no-tabs': 0,
-		'vue/html-indent': ['error', 'tab'],
-		// only debug console
-		'no-console': ['warn', { allow: ['error', 'warn', 'debug'] }],
-		// classes blocks
-		'padded-blocks': ['error', { classes: 'always' }],
-		// always have the operator in front
-		'operator-linebreak': ['error', 'before'],
-		// ternary on multiline
-		'multiline-ternary': ['error', 'always-multiline'],
-		// es6 import/export and require
-		'node/no-unpublished-require': ['off'],
-		'node/no-unsupported-features/es-syntax': ['off'],
-		// space before self-closing elements
-		'vue/html-closing-bracket-spacing': 'error',
-		// code spacing with attributes
-		'vue/max-attributes-per-line': [
-			'error',
-			{
-				singleline: 3,
-				multiline: {
-					max: 3,
-					allowFirstLine: true
-				}
-			}
-		]
+		'valid-jsdoc': ['warn'],
 	}
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -6976,6 +6976,12 @@
 				}
 			}
 		},
+		"eslint-config-nextcloud": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-config-nextcloud/-/eslint-config-nextcloud-0.1.1.tgz",
+			"integrity": "sha512-/1VAkt7Y/m63eZfBiYkSzZMwQtmz0DFXuJnLebrzIY1GtpIj/Y3c//j4ZDiH5o0vbdn9laIc2Mb/01DIjzvt3g==",
+			"dev": true
+		},
 		"eslint-config-standard": {
 			"version": "12.0.0",
 			"resolved": "http://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@@ -7146,19 +7152,34 @@
 			}
 		},
 		"eslint-plugin-es": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-1.4.0.tgz",
-			"integrity": "sha512-XfFmgFdIUDgvaRAlaXUkxrRg5JSADoRC8IkKLc/cISeR3yHVMefFHQZpcyXXEUUPHfy5DwviBcrfqlyqEwlQVw==",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.0.tgz",
+			"integrity": "sha512-6/Jb/J/ZvSebydwbBJO1R9E5ky7YeElfK56Veh7e4QGFHCXoIXGH9HhVz+ibJLM3XJ1XjP+T7rKBLUa/Y7eIng==",
 			"dev": true,
 			"requires": {
-				"eslint-utils": "^1.3.0",
-				"regexpp": "^2.0.1"
+				"eslint-utils": "^2.0.0",
+				"regexpp": "^3.0.0"
 			},
 			"dependencies": {
+				"eslint-utils": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
+					"integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
+					"dev": true,
+					"requires": {
+						"eslint-visitor-keys": "^1.1.0"
+					}
+				},
+				"eslint-visitor-keys": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
+					"integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
+					"dev": true
+				},
 				"regexpp": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-					"integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.0.0.tgz",
+					"integrity": "sha512-Z+hNr7RAVWxznLPuA7DIh8UNX1j9CDrUQxskw9IrBE1Dxue2lyXT+shqEIeLUjrokxIP8CMy1WkjgG3rTsd5/g==",
 					"dev": true
 				}
 			}
@@ -7261,24 +7282,54 @@
 				}
 			}
 		},
-		"eslint-plugin-node": {
-			"version": "8.0.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-8.0.1.tgz",
-			"integrity": "sha512-ZjOjbjEi6jd82rIpFSgagv4CHWzG9xsQAVp1ZPlhRnnYxcTgENUVBvhYmkQ7GvT1QFijUSo69RaiOJKhMu6i8w==",
+		"eslint-plugin-nextcloud": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-nextcloud/-/eslint-plugin-nextcloud-0.3.0.tgz",
+			"integrity": "sha512-LUD2qdirGL0BRt4uaMDGxen17mWVq9JwuGDt7P7Celz7bzdu0X48RrS8mhXn9e0w78+nYN5kPoULG2Bw04r4HA==",
 			"dev": true,
 			"requires": {
-				"eslint-plugin-es": "^1.3.1",
-				"eslint-utils": "^1.3.1",
-				"ignore": "^5.0.2",
+				"requireindex": "~1.2.0"
+			}
+		},
+		"eslint-plugin-node": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.0.0.tgz",
+			"integrity": "sha512-chUs/NVID+sknFiJzxoN9lM7uKSOEta8GC8365hw1nDfwIPIjjpRSwwPvQanWv8dt/pDe9EV4anmVSwdiSndNg==",
+			"dev": true,
+			"requires": {
+				"eslint-plugin-es": "^3.0.0",
+				"eslint-utils": "^2.0.0",
+				"ignore": "^5.1.1",
 				"minimatch": "^3.0.4",
-				"resolve": "^1.8.1",
-				"semver": "^5.5.0"
+				"resolve": "^1.10.1",
+				"semver": "^6.1.0"
 			},
 			"dependencies": {
+				"eslint-utils": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
+					"integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
+					"dev": true,
+					"requires": {
+						"eslint-visitor-keys": "^1.1.0"
+					}
+				},
+				"eslint-visitor-keys": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
+					"integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
+					"dev": true
+				},
 				"ignore": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz",
-					"integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==",
+					"version": "5.1.4",
+					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
+					"integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
+					"dev": true
+				},
+				"semver": {
+					"version": "6.3.0",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 					"dev": true
 				}
 			}
@@ -15196,6 +15247,12 @@
 			"integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
 			"dev": true
 		},
+		"requireindex": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+			"integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+			"dev": true
+		},
 		"resolve": {
 			"version": "1.12.0",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
--- a/package.json
+++ b/package.json
@@ -62,11 +62,13 @@
 		"babel-loader": "^8.0.6",
 		"css-loader": "^3.4.1",
 		"eslint": "^6.8.0",
+		"eslint-config-nextcloud": "^0.1.1",
 		"eslint-config-standard": "^12.0.0",
 		"eslint-friendly-formatter": "^4.0.1",
 		"eslint-loader": "^3.0.3",
 		"eslint-plugin-import": "^2.19.1",
-		"eslint-plugin-node": "^8.0.1",
+		"eslint-plugin-nextcloud": "^0.3.0",
+		"eslint-plugin-node": "^11.0.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-standard": "^4.0.1",
 		"eslint-plugin-vue": "^6.1.2",
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,7 @@ const boardApi = new BoardApi()
 export default {
 	name: 'App',
 	components: {
-		AppNavigation
+		AppNavigation,
 	},
 	data: function() {
 		return {
@@ -54,19 +54,19 @@ export default {
 					action: () => {
 					},
 					reset: () => {
-					}
+					},
 				},
 				action: () => {
 					this.addButton.classes.push('editing')
-				}
-			}
+				},
+			},
 		}
 	},
 	computed: {
 		...mapState({
 			navShown: state => state.navShown,
 			sidebarShownState: state => state.sidebarShown,
-			currentBoard: state => state.currentBoard
+			currentBoard: state => state.currentBoard,
 		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
@@ -75,17 +75,17 @@ export default {
 		},
 		sidebarShown() {
 			return this.sidebarRouterView || this.sidebarShownState
-		}
+		},
 	},
 	provide: function() {
 		return {
-			boardApi: boardApi
+			boardApi: boardApi,
 		}
 	},
 	created: function() {
 		this.$store.dispatch('loadBoards')
 		this.$store.dispatch('loadSharees')
-	}
+	},
 }

 </script>
--- a/src/BoardSelector.vue
+++ b/src/BoardSelector.vue
@@ -25,10 +25,10 @@
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
 			<ul v-if="!loading">
-				<li v-for="board in availableBoards" :key="board.id"
+				<li v-for="board in availableBoards"
+					:key="board.id"
 					:class="{'selected': (selectedBoard === board.id) }"
-					@click="selectedBoard=board.id"
-				>
+					@click="selectedBoard=board.id">
 					<span :style="{ 'backgroundColor': '#' + board.color }" class="board-bullet" />
 					<span>{{ board.title }}</span>
 				</li>
@@ -78,22 +78,22 @@ import { Modal } from '@nextcloud/vue/dist/Components/Modal'
 import axios from 'nextcloud-axios'

 export default {
-	name: 'CollaborationView',
+	name: 'BoardSelector',
 	components: {
-		Modal
+		Modal,
 	},
 	data() {
 		return {
 			boards: [],
 			selectedBoard: null,
 			loading: true,
-			currentBoard: null
+			currentBoard: null,
 		}
 	},
 	computed: {
 		availableBoards() {
 			return this.boards.filter((board) => ('' + board.id !== '' + this.currentBoard))
-		}
+		},
 	},
 	beforeMount() {
 		this.fetchBoards()
@@ -111,8 +111,8 @@ export default {
 		},
 		select() {
 			this.$root.$emit('select', this.selectedBoard)
-		}
-	}
+		},
+	},

 }
 </script>
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -23,14 +23,16 @@
 <template>
 	<Modal :title="t('deck', 'Select the card to link to a project')" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
-			<Multiselect v-model="selectedBoard" :placeholder="t('deck', 'Select a board')" :options="boards"
+			<Multiselect v-model="selectedBoard"
+				:placeholder="t('deck', 'Select a board')"
+				:options="boards"
 				label="title"
-				@select="fetchCardsFromBoard"
-			/>
+				@select="fetchCardsFromBoard" />

-			<Multiselect v-model="selectedCard" :placeholder="t('deck', 'Select a card')" :options="cardsFromBoard"
-				label="title"
-			/>
+			<Multiselect v-model="selectedCard"
+				:placeholder="t('deck', 'Select a card')"
+				:options="cardsFromBoard"
+				label="title" />

 			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">
 				{{ t('deck', 'Link to card') }}
@@ -48,10 +50,10 @@ import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 import axios from 'nextcloud-axios'

 export default {
-	name: 'CollaborationView',
+	name: 'CardSelector',
 	components: {
 		Modal,
-		Multiselect
+		Multiselect,
 	},
 	data() {
 		return {
@@ -59,7 +61,7 @@ export default {
 			selectedBoard: '',
 			cardsFromBoard: [],
 			selectedCard: '',
-			loading: true
+			loading: true,
 		}
 	},
 	computed: {
@@ -68,7 +70,7 @@ export default {
 				return false
 			}
 			return true
-		}
+		},
 	},
 	beforeMount() {
 		this.fetchBoards()
@@ -83,8 +85,8 @@ export default {
 		async fetchCardsFromBoard(board) {
 			try {
 				this.cardsFromBoard = []
-				let url = OC.generateUrl('/apps/deck/stacks/' + board.id)
-				let response = await axios.get(url)
+				const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
+				const response = await axios.get(url)
 				response.data.forEach(stack => {
 					this.cardsFromBoard.push(...stack.cards)
 				})
@@ -99,8 +101,8 @@ export default {
 		select() {
 			this.$root.$emit('select', this.selectedCard.id)

-		}
-	}
+		},
+	},

 }
 </script>
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -36,23 +36,23 @@ export default {
 	props: {
 		activity: {
 			type: Object,
-			default: null
-		}
+			default: null,
+		},
 	},
 	methods: {
 		getTime(timestamp) {
 			return OC.Util.relativeModifiedDate(timestamp)
 		},
 		parseMessage(activity) {
-			let subject = activity.subject_rich[0]
-			let parameters = activity.subject_rich[1]
+			const subject = activity.subject_rich[0]
+			const parameters = activity.subject_rich[1]
 			if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
-				let dateTime = parameters.after.id.substr(3)
+				const dateTime = parameters.after.id.substr(3)
 				parameters.after.name = window.moment(dateTime).format('L LTS')
 			}
 			return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters)
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/CollaborationView.vue
+++ b/src/components/CollaborationView.vue
@@ -22,23 +22,20 @@

 <template>
 	<div>
-		<collection-list v-if="boardId" :id="boardId" :name="boardTitle"
-			type="deck"
-		/>
+		<CollectionList v-if="boardId"
+			:id="boardId"
+			:name="boardTitle"
+			type="deck" />
 	</div>
 </template>

 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
-import Vue from 'vue'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-
-Vue.component('popover-menu', PopoverMenu)

 export default {
 	name: 'CollaborationView',
 	components: {
-		CollectionList: CollectionList
+		CollectionList: CollectionList,
 	},
 	computed: {
 		boardId() {
@@ -52,7 +49,7 @@ export default {
 				return '' + this.$root.model.title
 			}
 			return ''
-		}
-	}
+		},
+	},
 }
 </script>
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -26,9 +26,10 @@
 			<Compact v-model="color" :palette="defaultColors" @input="updateColor" />
 			<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
 		</div>
-		<Chrome v-if="showFullPicker" v-model="color" :palette="defaultColors"
-			@input="updateColor"
-		/>
+		<Chrome v-if="showFullPicker"
+			v-model="color"
+			:palette="defaultColors"
+			@input="updateColor" />
 	</div>
 </template>

@@ -41,22 +42,22 @@ export default {
 	name: 'ColorPicker',
 	components: {
 		Compact,
-		Chrome
+		Chrome,
 	},
 	directives: {
-		ClickOutside
+		ClickOutside,
 	},
 	props: {
 		value: {
 			type: [String, Object],
-			default: null
-		}
+			default: null,
+		},
 	},
 	data() {
 		return {
 			color: { hex: this.value },
 			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
-			showFullPicker: false
+			showFullPicker: false,
 		}
 	},
 	methods: {
@@ -65,8 +66,8 @@ export default {
 		},
 		hidePicker() {
 			this.showFullPicker = false
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -39,25 +39,31 @@
 			<div id="stack-add">
 				<form @submit.prevent="clickAddNewStack()">
 					<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
-					<input id="new-stack-input-main" v-model="newStackTitle" type="text"
+					<input id="new-stack-input-main"
+						v-model="newStackTitle"
+						type="text"
 						class="no-close"
-						placeholder="Add a new stack" required
-					>
-					<input v-tooltip="t('deck', 'clickAddNewStack')" class="icon-confirm" type="submit"
-						value=""
-					>
+						placeholder="Add a new stack"
+						required>
+					<input v-tooltip="t('deck', 'clickAddNewStack')"
+						class="icon-confirm"
+						type="submit"
+						value="">
 				</form>
 			</div>
 			<div class="board-action-buttons">
-				<button :style="archivStyle" title="Show archived cards" class="icon icon-archive"
-					@click="toggleShowArchived"
-				/>
-				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]" title="Toggle compact mode" class="icon"
-					@click="toggleCompactMode"
-				/>
-				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
-					tag="button"
-				/>
+				<button :style="archivStyle"
+					title="Show archived cards"
+					class="icon icon-archive"
+					@click="toggleShowArchived" />
+				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]"
+					title="Toggle compact mode"
+					class="icon"
+					@click="toggleCompactMode" />
+				<router-link v-tooltip="t('deck', 'Board settings')"
+					:to="{name: 'board.details'}"
+					class="icon-settings-dark"
+					tag="button" />
 			</div>
 		</div>
 	</div>
@@ -71,19 +77,19 @@ export default {
 		board: {
 			type: Object,
 			required: false,
-			default: null
-		}
+			default: null,
+		},
 	},
 	data() {
 		return {
 			newStackTitle: '',
 			stack: '',
-			showArchived: false
+			showArchived: false,
 		}
 	},
 	computed: {
 		...mapState({
-			compactMode: state => state.compactMode
+			compactMode: state => state.compactMode,
 		}),
 		archivStyle() {

@@ -91,7 +97,7 @@ export default {
 				return 'opacity: 1.0'
 			}
 			return 'opacity: 0.3'
-		}
+		},
 	},
 	methods: {
 		toggleNav() {
@@ -112,8 +118,8 @@ export default {
 			this.$store.dispatch('createStack', this.stack)
 			this.newStackTitle = ''
 			this.stack = null
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -26,7 +26,7 @@

 <script>
 export default {
-	name: 'List'
+	name: 'List',
 }
 </script>

--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -30,8 +30,8 @@ export default {
 	methods: {
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -24,11 +24,11 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board" class="board">
-			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
-				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
-					<stack :stack="stack" />
-				</draggable>
-			</container>
+			<Container lock-axix="y" orientation="horizontal" @drop="onDropStack">
+				<Draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
+					<Stack :stack="stack" />
+				</Draggable>
+			</Container>
 		</div>
 		<div v-else class="emptycontent">
 			<div class="icon icon-deck" />
@@ -51,30 +51,30 @@ export default {
 		Controls,
 		Container,
 		Draggable,
-		Stack
+		Stack,
 	},
 	inject: [
-		'boardApi'
+		'boardApi',
 	],
 	props: {
 		id: {
 			type: Number,
-			default: null
-		}
+			default: null,
+		},
 	},
 	data: function() {
 		return {
-			loading: true
+			loading: true,
 		}
 	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
-			showArchived: state => state.showArchived
+			showArchived: state => state.showArchived,
 		}),
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
-		}
+		},
 		/* cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
 		} */
@@ -83,7 +83,7 @@ export default {
 		id: 'fetchData',
 		showArchived() {
 			this.fetchData()
-		}
+		},
 	},
 	created() {
 		this.fetchData()
@@ -118,17 +118,17 @@ export default {
 			}
 		}, */
 		createStack() {
-			let newStack = {
+			const newStack = {
 				title: 'FooBar',
 				boardId: this.id,
-				order: this.stacksByBoard().length
+				order: this.stacksByBoard().length,
 			}
 			this.$store.dispatch('createStack', newStack)
-		}
+		},
 		/* deleteStack(stack) {
 			this.$store.dispatch('deleteStack', stack)
 		} */
-	}
+	},
 }
 </script>

--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -21,11 +21,10 @@
  -->

 <template>
-	<app-sidebar v-if="board != null"
+	<AppSidebar v-if="board != null"
 		:actions="[]"
 		:title="board.title"
-		@close="closeSidebar"
-	>
+		@close="closeSidebar">
 		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
 			<SharingTabSidebar :board="board" />
 		</AppSidebarTab>
@@ -41,7 +40,7 @@
 		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
-	</app-sidebar>
+	</AppSidebar>
 </template>

 <script>
@@ -61,24 +60,24 @@ export default {
 		SharingTabSidebar,
 		TagsTabSidebar,
 		DeletedTabSidebar,
-		TimelineTabSidebar
+		TimelineTabSidebar,
 	},
 	props: {
 		id: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
-			labels: state => state.labels
-		})
+			labels: state => state.labels,
+		}),
 	},
 	methods: {
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
-		}
-	}
+		},
+	},
 }
 </script>
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -8,8 +8,7 @@
 				<button
 					:title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
-					@click="stackUndoDelete(deletedStack)"
-				/>
+					@click="stackUndoDelete(deletedStack)" />

 				<!-- <span class="live-relative-timestamp" data-timestamp="{{ deletedStack.deletedAt*1000  }}">{{deletedStack.deletedAt | relativeDateFilter }}</span>
 				<a @click="stackUndoDelete(deletedStack)"><span class="icon icon-history"></span></a> -->
@@ -24,8 +23,7 @@
 				<button
 					:title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
-					@click="cardUndoDelete(deletedCard)"
-				/>
+					@click="cardUndoDelete(deletedCard)" />
 			</li>

 			<!-- <li ng-repeat="deletedCard in cardservice.deleted">
@@ -50,21 +48,21 @@ export default {
 	props: {
 		board: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
 			isLoading: false,
 			copiedDeletedStack: null,
-			copiedDeletedCard: null
+			copiedDeletedCard: null,
 		}
 	},
 	computed: {
 		...mapState({
 			deletedStacks: state => state.stack.deletedStacks,
-			deletedCards: state => state.stack.deletedCards
-		})
+			deletedCards: state => state.stack.deletedCards,
+		}),

 	},
 	created() {
@@ -88,8 +86,8 @@ export default {
 			this.copiedDeletedCard.deletedAt = 0
 			this.$store.dispatch('cardUndoDelete', this.copiedDeletedCard)
 			this.getData()
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -1,27 +1,25 @@
 <template>
 	<div>
-		<multiselect
+		<Multiselect
 			v-model="addAcl"
 			:options="formatedSharees"
 			:user-select="true"
 			label="displayName"
 			track-by="user"
 			@input="clickAddAcl"
-			@search-change="asyncFind"
-		/>
+			@search-change="asyncFind" />

 		<ul
 			id="shareWithList"
-			class="shareWithList"
-		>
+			class="shareWithList">
 			<li>
-				<avatar :user="board.owner.uid" />
+				<Avatar :user="board.owner.uid" />
 				<span class="has-tooltip username">
 					{{ board.owner.displayname }}
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.participant.uid">
-				<avatar v-if="acl.type===0" :user="acl.participant.uid" />
+				<Avatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
@@ -47,9 +45,10 @@
 			</li>
 		</ul>

-		<collection-list v-if="board.id" :id="`${board.id}`" :name="board.title"
-			type="deck"
-		/>
+		<CollectionList v-if="board.id"
+			:id="`${board.id}`"
+			:name="board.title"
+			type="deck" />
 	</div>
 </template>

@@ -70,32 +69,32 @@ export default {
 		ActionButton,
 		ActionCheckbox,
 		Multiselect,
-		CollectionList
+		CollectionList,
 	},
 	props: {
 		board: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
 			isLoading: false,
 			addAcl: null,
-			addAclForAPI: null
+			addAclForAPI: null,
 		}
 	},
 	computed: {
 		...mapGetters({
-			sharees: 'sharees'
+			sharees: 'sharees',
 		}),
 		formatedSharees() {
 			return this.unallocatedSharees.map(item => {

-				let sharee = {
+				const sharee = {
 					user: item.label,
 					displayName: item.label,
-					icon: 'icon-user'
+					icon: 'icon-user',
 				}

 				if (item.value.shareType === 1) {
@@ -113,7 +112,7 @@ export default {
 		},
 		unallocatedSharees() {
 			return this.sharees.filter((sharee) => {
-				let foundIndex = this.board.acl.findIndex((acl) => {
+				const foundIndex = this.board.acl.findIndex((acl) => {
 					return acl.participant.uid === sharee.value.shareWith
 				})
 				if (foundIndex === -1) {
@@ -121,7 +120,7 @@ export default {
 				}
 				return false
 			})
-		}
+		},
 	},
 	methods: {
 		asyncFind(query) {
@@ -136,7 +135,7 @@ export default {
 				participant: this.addAcl.value.shareWith,
 				permissionEdit: false,
 				permissionShare: false,
-				permissionManage: false
+				permissionManage: false,
 			}
 			this.$store.dispatch('addAclToCurrentBoard', this.addAclForAPI)
 		},
@@ -157,8 +156,8 @@ export default {
 		},
 		clickDeleteAcl(acl) {
 			this.$store.dispatch('deleteAclFromCurrentBoard', acl)
-		}
-	}
+		},
+	},
 }
 </script>
 <style scoped>
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -30,9 +30,10 @@
 				</h3>
 				<form v-else @submit.prevent="finishedEdit(stack)">
 					<input v-model="copiedStack.title" type="text" autofocus>
-					<input v-tooltip="t('deck', 'Add a new stack')" class="icon-confirm" type="submit"
-						value=""
-					>
+					<input v-tooltip="t('deck', 'Add a new stack')"
+						class="icon-confirm"
+						type="submit"
+						value="">
 				</form>
 			</transition>
 			<Actions>
@@ -42,23 +43,24 @@
 			</Actions>
 		</div>

-		<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
-			<draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
-				<card-item v-if="card" :id="card.id" />
-			</draggable>
-		</container>
+		<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+			<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
+				<CardItem v-if="card" :id="card.id" />
+			</Draggable>
+		</Container>

 		<form class="stack--card-add" @submit.prevent="clickAddCard()">
 			<label for="new-stack-input-main" class="hidden-visually">Add a new card</label>
-			<input id="new-stack-input-main" v-model="newCardTitle" type="text"
+			<input id="new-stack-input-main"
+				v-model="newCardTitle"
+				type="text"
 				class="no-close"
-				placeholder="Add a new card" required
-			>
+				placeholder="Add a new card"
+				required>

 			<input class="icon-confirm"
 				type="submit"
-				value=""
-			>
+				value="">
 		</form>
 	</div>
 </template>
@@ -77,26 +79,26 @@ export default {
 		ActionButton,
 		CardItem,
 		Container,
-		Draggable
+		Draggable,
 	},

 	props: {
 		stack: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
 			editing: false,
 			copiedStack: '',
-			newCardTitle: ''
+			newCardTitle: '',
 		}
 	},
 	computed: {
 		cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
-		}
+		},
 	},

 	methods: {
@@ -138,15 +140,15 @@ export default {
 			this.editing = false
 		},
 		clickAddCard() {
-			let newCard = {
+			const newCard = {
 				title: this.newCardTitle,
 				stackId: this.stack.id,
-				boardId: this.stack.boardId
+				boardId: this.stack.boardId,
 			}
 			this.$store.dispatch('addCard', newCard)
 			this.newCardTitle = ''
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -5,12 +5,15 @@
 				<template v-if="editingLabelId === label.id">
 					<form class="label-form" @submit.prevent="updateLabel(label)">
 						<input v-model="editingLabel.title" type="text">
-						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }" :disabled="!editLabelObjValidated" type="submit"
-							value="" class="icon-confirm"
-						>
-						<input v-tooltip="t('deck', 'Cancel')" value=""
-							class="icon-close" @click="editingLabelId = null"
-						>
+						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+							:disabled="!editLabelObjValidated"
+							type="submit"
+							value=""
+							class="icon-confirm">
+						<input v-tooltip="t('deck', 'Cancel')"
+							value=""
+							class="icon-close"
+							@click="editingLabelId = null">
 					</form>
 					<ColorPicker :value="'#' + editingLabel.color" @input="updateColor" />
 				</template>
@@ -27,13 +30,15 @@
 				<template>
 					<form class="label-form" @submit.prevent="clickAddLabel">
 						<input v-model="addLabelObj.title" type="text">
-						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" :disabled="!addLabelObjValidated"
+						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
+							:disabled="!addLabelObjValidated"
 							type="submit"
-							value="" class="icon-confirm"
-						>
-						<input v-tooltip="t('deck', 'Cancel')" value=""
-							class="icon-close" @click="addLabel=false"
-						>
+							value=""
+							class="icon-confirm">
+						<input v-tooltip="t('deck', 'Cancel')"
+							value=""
+							class="icon-close"
+							@click="addLabel=false">
 					</form>
 					<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
 				</template>
@@ -54,7 +59,7 @@ import ColorPicker from '../ColorPicker'
 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker
+		ColorPicker,
 	},
 	mixins: [Color],
 	data() {
@@ -64,12 +69,12 @@ export default {
 			addLabelObj: null,
 			addLabel: false,
 			missingDataLabel: t('deck', 'title and color value must be provided'),
-			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD']
+			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
 		}
 	},
 	computed: {
 		...mapGetters({
-			labels: 'currentBoardLabels'
+			labels: 'currentBoardLabels',
 		}),
 		addLabelObjValidated() {
 			if (this.addLabelObj.title === '') {
@@ -92,7 +97,7 @@ export default {
 			}

 			return true
-		}
+		},

 	},
 	methods: {
@@ -122,8 +127,8 @@ export default {
 			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
 			this.addLabel = false
 			this.addLabelObj = null
-		}
-	}
+		},
+	},
 }
 </script>
 <style scoped lang="scss">
--- a/src/components/board/TimelineTabSidebar.vue
+++ b/src/components/board/TimelineTabSidebar.vue
@@ -2,9 +2,10 @@
 	<div>
 		<div v-if="isLoading" class="icon icon-loading" />

-		<ActivityEntry v-for="entry in boardActivity" v-else :key="entry.activity_id"
-			:activity="entry"
-		/>
+		<ActivityEntry v-for="entry in boardActivity"
+			v-else
+			:key="entry.activity_id"
+			:activity="entry" />
 		<button v-if="activityLoadMore" @click="loadMore">
 			Load More
 		</button>
@@ -18,13 +19,13 @@ import ActivityEntry from '../ActivityEntry'
 export default {
 	name: 'TimelineTabSidebar',
 	components: {
-		ActivityEntry
+		ActivityEntry,
 	},
 	props: {
 		board: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
@@ -32,15 +33,15 @@ export default {
 			params: {
 				type: 'deck',
 				since: 0,
-				object_id: this.board.id
-			}
+				object_id: this.board.id,
+			},
 		}
 	},
 	computed: {
 		...mapState({
 			boardActivity: 'activity',
-			activityLoadMore: 'activityLoadMore'
-		})
+			activityLoadMore: 'activityLoadMore',
+		}),
 	},
 	created() {
 		this.loadBoardActivity()
@@ -53,12 +54,12 @@ export default {
 			})
 		},
 		loadMore() {
-			let array = Object.values(this.boardActivity)
-			let aId = (array[array.length - 1].activity_id)
+			const array = Object.values(this.boardActivity)
+			const aId = (array[array.length - 1].activity_id)

 			this.params.since = aId
 			this.loadBoardActivity()
-		}
-	}
+		},
+	},
 }
 </script>
--- a/src/components/boards/BoardItem.vue
+++ b/src/components/boards/BoardItem.vue
@@ -23,8 +23,9 @@
 <template>
 	<router-link :id="`board-${board.id}`"
 		:title="board.title"
-		:to="routeTo" class="board-list-row" tag="div"
-	>
+		:to="routeTo"
+		class="board-list-row"
+		tag="div">
 		<div class="board-list-bullet-cell">
 			<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
 		</div>
@@ -32,10 +33,11 @@
 			{{ board.title }}
 		</div>
 		<div class="board-list-avatars-cell">
-			<avatar :user="board.owner.uid" class="board-list-avatar" />
-			<avatar v-for="user in limitedAcl" :key="user.id" :user="user.participant.uid"
-				class="board-list-avatar"
-			/>
+			<Avatar :user="board.owner.uid" class="board-list-avatar" />
+			<Avatar v-for="user in limitedAcl"
+				:key="user.id"
+				:user="user.participant.uid"
+				class="board-list-avatar" />
 			<div v-if="board.acl.length > 5" v-tooltip="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
 		</div>
 		<div class="board-list-actions-cell" />
@@ -48,19 +50,19 @@ import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
 export default {
 	name: 'BoardItem',
 	components: {
-		Avatar
+		Avatar,
 	},
 	props: {
 		board: {
 			type: Object,
-			default: () => { return {} }
-		}
+			default: () => { return {} },
+		},
 	},
 	computed: {
 		routeTo: function() {
 			return {
 				name: 'board',
-				params: { id: this.board.id }
+				params: { id: this.board.id },
 			}
 		},
 		limitedAcl() {
@@ -68,8 +70,8 @@ export default {
 		},
 		otherAcl() {
 			return [...this.board.acl].splice(6).map((item) => item.participant.displayname || item.participant).join(', ')
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -48,27 +48,27 @@ import Controls from '../Controls'
 import { mapGetters } from 'vuex'

 export default {
-	name: 'Main',
+	name: 'Boards',
 	components: {
 		BoardItem,
-		Controls
+		Controls,
 	},
 	props: {
 		navFilter: {
 			type: String,
-			default: ''
-		}
+			default: '',
+		},
 	},
 	computed: {
 		...mapGetters([
-			'filteredBoards'
-		])
+			'filteredBoards',
+		]),
 	},
 	watch: {
 		navFilter: function(value) {
 			this.$store.commit('setBoardFilter', value)
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,12 +21,11 @@
  -->

 <template>
-	<app-sidebar v-if="currentCard !== null && copiedCard !== null"
+	<AppSidebar v-if="currentCard !== null && copiedCard !== null"
 		:actions="toolbarActions"
 		:title="currentCard.title"
 		:subtitle="subtitle"
-		@close="closeSidebar"
-	>
+		@close="closeSidebar">
 		<template #action />
 		<AppSidebarTab :order="0" name="Details" icon="icon-home">
 			<div class="section-wrapper">
@@ -34,10 +33,14 @@
 					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
 				</div>
 				<div class="section-details">
-					<multiselect v-model="allLabels" :multiple="true" :options="currentBoard.labels"
-						:taggable="true" label="title"
-						track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard"
-					>
+					<Multiselect v-model="allLabels"
+						:multiple="true"
+						:options="currentBoard.labels"
+						:taggable="true"
+						label="title"
+						track-by="id"
+						@select="addLabelToCard"
+						@remove="removeLabelFromCard">
 						<template #option="scope">
 							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
 								{{ scope.option.title }}
@@ -48,7 +51,7 @@
 								{{ scope.option.title }}
 							</div>
 						</template>
-					</multiselect>
+					</Multiselect>
 				</div>
 			</div>

@@ -57,16 +60,18 @@
 					<span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span>
 				</div>
 				<div class="section-details">
-					<multiselect v-model="assignedUsers" :multiple="true" :options="assignableUsers"
+					<Multiselect v-model="assignedUsers"
+						:multiple="true"
+						:options="assignableUsers"
 						label="displayname"
 						track-by="primaryKey"
-						@select="assignUserToCard" @remove="removeUserFromCard"
-					>
+						@select="assignUserToCard"
+						@remove="removeUserFromCard">
 						<template #option="scope">
-							<avatar :user="scope.option.primaryKey" />
+							<Avatar :user="scope.option.primaryKey" />
 							<span class="avatarLabel">{{ scope.option.displayname }} </span>
 						</template>
-					</multiselect>
+					</Multiselect>
 				</div>
 			</div>

@@ -75,9 +80,12 @@
 					<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 				</div>
 				<div class="section-details">
-					<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
-						format="YYYY-MM-DD HH:mm" confirm @change="setDue()"
-					/>
+					<DatetimePicker v-model="copiedCard.duedate"
+						type="datetime"
+						lang="en"
+						format="YYYY-MM-DD HH:mm"
+						confirm
+						@change="setDue()" />
 					<Actions>
 						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 							{{ t('deck', 'Remove due date') }}
@@ -87,9 +95,10 @@
 			</div>

 			<div class="section-wrapper">
-				<collection-list v-if="currentCard.id" :id="`${currentCard.id}`" :name="currentCard.title"
-					type="deck-card"
-				/>
+				<CollectionList v-if="currentCard.id"
+					:id="`${currentCard.id}`"
+					:name="currentCard.title"
+					type="deck-card" />
 			</div>

 			<h5>Description</h5>
@@ -103,14 +112,15 @@
 		</AppSidebarTab>
 		<AppSidebarTab :order="2" name="Timeline" icon="icon-activity">
 			<div v-if="isLoading" class="icon icon-loading" />
-			<ActivityEntry v-for="entry in cardActivity" v-else :key="entry.activity_id"
-				:activity="entry"
-			/>
+			<ActivityEntry v-for="entry in cardActivity"
+				v-else
+				:key="entry.activity_id"
+				:activity="entry" />
 			<button v-if="activityLoadMore" @click="loadMore">
 				Load More
 			</button>
 		</AppSidebarTab>
-	</app-sidebar>
+	</AppSidebar>
 </template>

 <script>
@@ -139,16 +149,16 @@ export default {
 		Actions,
 		ActionButton,
 		Avatar,
-		CollectionList
+		CollectionList,
 	},
 	mixins: [
-		Color
+		Color,
 	],
 	props: {
 		id: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -163,7 +173,7 @@ export default {
 				spellChecker: false,
 				autofocus: true,
 				autosave: { enabled: true, uniqueId: 'unique' },
-				toolbar: false
+				toolbar: false,
 			},
 			lastModifiedRelative: null,
 			lastCreatedRemative: null,
@@ -171,8 +181,8 @@ export default {
 				type: 'filter',
 				since: 0,
 				object_type: 'deck_card',
-				object_id: this.id
-			}
+				object_id: this.id,
+			},
 		}
 	},
 	computed: {
@@ -180,7 +190,7 @@ export default {
 			currentBoard: state => state.currentBoard,
 			assignableUsers: state => state.assignableUsers,
 			cardActivity: 'activity',
-			activityLoadMore: 'activityLoadMore'
+			activityLoadMore: 'activityLoadMore',
 		}),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
@@ -195,17 +205,17 @@ export default {

 					},
 					icon: 'icon-archive-dark',
-					text: t('deck', 'Assign to me')
+					text: t('deck', 'Assign to me'),
 				},
 				{
 					action: () => {

 					},
 					icon: 'icon-archive',
-					text: t('deck', (this.showArchived ? 'Unarchive card' : 'Archive card'))
-				}
+					text: t('deck', (this.showArchived ? 'Unarchive card' : 'Archive card')),
+				},
 			]
-		}
+		},
 	},
 	watch: {
 		'currentCard': {
@@ -223,12 +233,12 @@ export default {

 				this.params.object_id = this.id
 				this.loadCardActivity()
-			}
+			},
 		},

 		'copiedCard.description': function() {
 			this.saveDesc()
-		}
+		},
 	},
 	created() {
 		setInterval(this.updateRelativeTimestamps, 10000)
@@ -269,25 +279,25 @@ export default {

 		addLabelToCard(newLabel) {
 			this.copiedCard.labels.push(newLabel)
-			let data = {
+			const data = {
 				card: this.copiedCard,
-				labelId: newLabel.id
+				labelId: newLabel.id,
 			}
 			this.$store.dispatch('addLabel', data)
 		},

 		removeLabelFromCard(removedLabel) {

-			let removeIndex = this.copiedCard.labels.findIndex((label) => {
+			const removeIndex = this.copiedCard.labels.findIndex((label) => {
 				return label.id === removedLabel.id
 			})
 			if (removeIndex !== -1) {
 				this.copiedCard.labels.splice(removeIndex, 1)
 			}

-			let data = {
+			const data = {
 				card: this.copiedCard,
-				labelId: removedLabel.id
+				labelId: removedLabel.id,
 			}
 			this.$store.dispatch('removeLabel', data)
 		},
@@ -298,17 +308,17 @@ export default {
 			})
 		},
 		loadMore() {
-			let array = Object.values(this.cardActivity)
-			let aId = (array[array.length - 1].activity_id)
+			const array = Object.values(this.cardActivity)
+			const aId = (array[array.length - 1].activity_id)

 			this.params.since = aId
 			this.loadCardActivity()
 		},
 		clickAddNewAttachmment() {

-		}
+		},

-	}
+	},
 }
 </script>

--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -24,13 +24,15 @@
 	<div class="avatars">
 		<div class="avatar-list" @click.stop="popoverVisible=!popoverVisible">
 			<div v-if="popover.length > 0" class="avatardiv icon-more" />
-			<avatar v-for="user in firstUsers" :key="user.id"
-				:url="avatarUrl(user)" :disable-tooltip="true" :size="32"
-			/>
+			<Avatar v-for="user in firstUsers"
+				:key="user.id"
+				:url="avatarUrl(user)"
+				:disable-tooltip="true"
+				:size="32" />
 		</div>

 		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<popover-menu :menu="popover" />
+			<PopoverMenu :menu="popover" />
 			<slot />
 		</div>
 	</div>
@@ -44,20 +46,20 @@ export default {
 	name: 'AvatarList',
 	components: {
 		Avatar,
-		PopoverMenu
+		PopoverMenu,
 	},
 	directives: {
-		tooltip: Tooltip
+		tooltip: Tooltip,
 	},
 	props: {
 		users: {
 			type: Array,
-			default: () => { return {} }
-		}
+			default: () => { return {} },
+		},
 	},
 	data() {
 		return {
-			popoverVisible: false
+			popoverVisible: false,
 		}
 	},
 	computed: {
@@ -71,7 +73,7 @@ export default {
 				const avatarUrl = OC.generateUrl('/avatar/{user}/{size}',
 					{
 						user: user,
-						size: size
+						size: size,
 					})
 				return window.location.protocol + '//' + window.location.host + avatarUrl
 			}
@@ -82,13 +84,13 @@ export default {
 					return {
 						href: '#',
 						icon: this.avatarUrl(session),
-						text: session.participant.displayname
+						text: session.participant.displayname,
 					}
-				})
+				}),
 			]
-		}
+		},

-	}
+	},
 }
 </script>

--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -34,7 +34,7 @@

 		<div v-if="card.attachments" class="card-files icon icon-files-dark" />

-		<avatar-list :users="card.assignedUsers" />
+		<AvatarList :users="card.assignedUsers" />
 	</div>
 </template>
 <script>
@@ -46,13 +46,13 @@ export default {
 	props: {
 		id: {
 			type: Number,
-			default: null
-		}
+			default: null,
+		},
 	},
 	data() {
 		return {
 			dueTime: null,
-			dueIcon: null
+			dueIcon: null,
 		}
 	},
 	computed: {
@@ -67,7 +67,7 @@ export default {
 		},
 		card() {
 			return this.$store.getters.cardById(this.id)
-		}
+		},
 	},
 	created() {
 		this.updateDueTime()
@@ -88,7 +88,7 @@ export default {

 			this.dueTime = OC.Util.relativeModifiedDate(this.card.duedate)

-			let timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
+			const timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
 			if (timeInHours >= 1) {
 				this.dueIcon = 'icon-calendar-dark due icon next'
 			}
@@ -98,8 +98,8 @@ export default {
 			if (timeInHours < 0) {
 				this.dueIcon = 'icon-calendar due icon overdue'
 			}
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -25,9 +25,10 @@
  -->

 <template>
-	<div :class="{'compact': compactMode, 'current-card': currentCard}" tag="div" class="card"
-		@click.self="openCard"
-	>
+	<div :class="{'compact': compactMode, 'current-card': currentCard}"
+		tag="div"
+		class="card"
+		@click.self="openCard">
 		<div class="card-upper">
 			<h3 v-if="showArchived">
 				{{ card.title }}
@@ -38,9 +39,10 @@
 			<h3 v-else>
 &nbsp;
 			</h3>
-			<form v-if="editing" v-click-outside="cancelEdit" @keyup.esc="cancelEdit"
-				@submit.prevent="finishedEdit(card)"
-			>
+			<form v-if="editing"
+				v-click-outside="cancelEdit"
+				@keyup.esc="cancelEdit"
+				@submit.prevent="finishedEdit(card)">
 				<input v-model="copiedCard.title" type="text" autofocus>
 				<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 			</form>
@@ -63,15 +65,17 @@
 				</ActionButton>
 			</Actions>

-			<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
+			<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
 				<div class="modal__content">
-					<Multiselect v-model="selectedBoard" :placeholder="t('deck', 'Select a board')" :options="boards"
+					<Multiselect v-model="selectedBoard"
+						:placeholder="t('deck', 'Select a board')"
+						:options="boards"
 						label="title"
-						@select="loadStacksFromBoard"
-					/>
-					<Multiselect v-model="selectedStack" :placeholder="t('deck', 'Select a stack')" :options="stacksFromBoard"
-						label="title"
-					/>
+						@select="loadStacksFromBoard" />
+					<Multiselect v-model="selectedStack"
+						:placeholder="t('deck', 'Select a stack')"
+						:options="stacksFromBoard"
+						label="title" />

 					<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
 						{{ t('deck', 'Move card') }}
@@ -80,7 +84,7 @@
 						{{ t('deck', 'Cancel') }}
 					</button>
 				</div>
-			</modal>
+			</Modal>
 		</div>
 		<ul class="labels" @click="openCard">
 			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
@@ -88,7 +92,7 @@
 			</li>
 		</ul>
 		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-			<card-badges :id="id" />
+			<CardBadges :id="id" />
 		</div>
 	</div>
 </template>
@@ -109,14 +113,14 @@ export default {
 	name: 'CardItem',
 	components: { Modal, CardBadges, Actions, ActionButton, Multiselect },
 	directives: {
-		ClickOutside
+		ClickOutside,
 	},
 	mixins: [Color],
 	props: {
 		id: {
 			type: Number,
-			default: null
-		}
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -126,14 +130,14 @@ export default {
 			modalShow: false,
 			selectedBoard: '',
 			selectedStack: '',
-			stacksFromBoard: []
+			stacksFromBoard: [],
 		}
 	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
 			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard
+			currentBoard: state => state.currentBoard,
 		}),
 		card() {
 			return this.$store.getters.cardById(this.id)
@@ -150,7 +154,7 @@ export default {
 			return (label) => {
 				return {
 					backgroundColor: '#' + label.color,
-					color: this.textColor(label.color)
+					color: this.textColor(label.color),
 				}
 			}
 		},
@@ -162,7 +166,7 @@ export default {
 				return false
 			}
 			return true
-		}
+		},
 	},
 	methods: {
 		openCard() {
@@ -202,8 +206,8 @@ export default {
 		},
 		async loadStacksFromBoard(board) {
 			try {
-				let url = OC.generateUrl('/apps/deck/stacks/' + board.id)
-				let response = await axios.get(url)
+				const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
+				const response = await axios.get(url)
 				this.stacksFromBoard = response.data
 			} catch (err) {
 				return err
@@ -214,8 +218,8 @@ export default {
 			this.copiedCard.stackId = this.selectedStack.id
 			this.$store.dispatch('moveCard', this.copiedCard)
 			this.modalShow = false
-		}
-	}
+		},
+	},
 }
 </script>

--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -23,41 +23,42 @@
 <template>
 	<div id="app-navigation" :class="{'icon-loading': loading}">
 		<ul id="deck-navigation">
-			<app-navigation-board-category
+			<AppNavigationBoardCategory
 				id="deck-navigation-all"
 				:text="t('deck', 'All boards')"
 				:boards="noneArchivedBoards"
 				:open-on-add-boards="true"
-				icon="icon-deck"
-			/>
-			<app-navigation-board-category
+				icon="icon-deck" />
+			<AppNavigationBoardCategory
 				id="deck-navigation-archived"
 				:text="t('deck', 'Archived boards')"
 				:boards="archivedBoards"
-				icon="icon-archive"
-			/>
-			<app-navigation-board-category
+				icon="icon-archive" />
+			<AppNavigationBoardCategory
 				id="deck-navigation-shared"
 				:text="t('deck', 'Shared boards')"
 				:boards="sharedBoards"
-				icon="icon-shared"
-			/>
-			<app-navigation-add-board />
+				icon="icon-shared" />
+			<AppNavigationAddBoard />
 		</ul>
-		<div v-if="isAdmin" id="app-settings"
-			v-click-outside="closeMenu" :class="{open: opened}"
-		>
+		<div v-if="isAdmin"
+			id="app-settings"
+			v-click-outside="closeMenu"
+			:class="{open: opened}">
 			<div id="app-settings-header">
 				<button class="settings-button" @click="toggleMenu">
 					{{ t('deck', 'Settings') }}
 				</button>
 			</div>
 			<div id="app-settings-content">
-				<Multiselect v-model="groupLimit" :class="{'icon-loading-small': groupLimitDisabled}" :options="groups"
+				<Multiselect v-model="groupLimit"
+					:class="{'icon-loading-small': groupLimitDisabled}"
+					:options="groups"
 					:multiple="true"
-					:disabled="groupLimitDisabled" label="displayname" track-by="id"
-					@input="updateConfig"
-				/>
+					:disabled="groupLimitDisabled"
+					label="displayname"
+					track-by="id"
+					@input="updateConfig" />
 				<p>{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}</p>
 			</div>
 		</div>
@@ -78,36 +79,36 @@ export default {
 	components: {
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		Multiselect
+		Multiselect,
 	},
 	directives: {
-		ClickOutside
+		ClickOutside,
 	},
 	props: {
 		loading: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
 			opened: false,
 			groups: [],
 			groupLimit: [],
-			groupLimitDisabled: true
+			groupLimitDisabled: true,
 		}
 	},
 	computed: {
 		...mapGetters([
 			'noneArchivedBoards',
 			'archivedBoards',
-			'sharedBoards'
+			'sharedBoards',
 		]),
 		isAdmin() {
 			// eslint-disable-next-line
 			//return oc_isadmin
 			return OC.isUserAdmin()
-		}
+		},
 	},
 	beforeMount() {
 		if (this.isAdmin) {
@@ -121,7 +122,7 @@ export default {
 				this.groups = response.data.ocs.data.groups.reduce((obj, item) => {
 					obj.push({
 						id: item,
-						displayname: item
+						displayname: item,
 					})
 					return obj
 				}, [])
@@ -140,14 +141,14 @@ export default {
 		updateConfig() {
 			this.groupLimitDisabled = true
 			axios.post(OC.generateUrl('apps/deck/config/groupLimit'), {
-				value: this.groupLimit
+				value: this.groupLimit,
 			}).then(() => {
 				this.groupLimitDisabled = false
 			}, (error) => {
 				console.error('Error while saving groupLimit', error.response)
 			})
-		}
-	}
+		},
+	},
 }
 </script>
 <style>
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -21,8 +21,8 @@
  -->
 <template>
 	<li id="deck-navigation-add"
-		:title="t('deck', 'Create new board')" :class="[{'icon-loading-small': loading, 'editing': editing}, classes]"
-	>
+		:title="t('deck', 'Create new board')"
+		:class="[{'icon-loading-small': loading, 'editing': editing}, classes]">
 		<a class="icon-add" href="#" @click.prevent.stop="startCreateBoard">
 			{{ t('deck', 'Create new board') }}
 		</a>
@@ -32,9 +32,10 @@
 			<form @submit.prevent.stop="createBoard">
 				<input :placeholder="t('deck', 'New board title')" type="text" required>
 				<input type="submit" value="" class="icon-confirm">
-				<input type="submit" value="" class="icon-close"
-					@click.stop.prevent="cancelEdit"
-				>
+				<input type="submit"
+					value=""
+					class="icon-close"
+					@click.stop.prevent="cancelEdit">
 			</form>
 			<ColorPicker v-model="color" />
 		</div>
@@ -53,7 +54,7 @@ export default {
 			classes: [],
 			editing: false,
 			loading: false,
-			color: '#000000'
+			color: '#000000',
 		}
 	},
 	computed: {},
@@ -67,15 +68,15 @@ export default {
 			const title = e.currentTarget.childNodes[0].value
 			this.$store.dispatch('createBoard', {
 				title: title,
-				color: this.color.substring(1)
+				color: this.color.substring(1),
 			})
 			this.editing = false
 		},
 		cancelEdit(e) {
 			this.editing = false
 			this.item.edit.reset(e)
-		}
-	}
+		},
+	},
 }
 </script>
 <style scoped>
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -21,9 +21,10 @@
  -->
 <template>
 	<router-link :id="`board-${board.id}`"
-		:title="board.title" :class="[{'icon-loading-small': loading, deleted: deleted, editing: editing }, classes]"
-		:to="routeTo" tag="li"
-	>
+		:title="board.title"
+		:class="[{'icon-loading-small': loading, deleted: deleted, editing: editing }, classes]"
+		:to="routeTo"
+		tag="li">
 		<div :style="{ backgroundColor: `#${board.color}` }" class="app-navigation-entry-bullet" />
 		<a href="#">
 			{{ board.title }}
@@ -32,9 +33,10 @@
 		<div v-if="actions.length > 0" class="app-navigation-entry-utils">
 			<ul>
 				<li class="app-navigation-entry-utils-menu-button">
-					<button v-if="board.acl.length === 0" class="icon-shared" style="opacity: 0.3"
-						@click="showSidebar"
-					/>
+					<button v-if="board.acl.length === 0"
+						class="icon-shared"
+						style="opacity: 0.3"
+						@click="showSidebar" />
 					<button v-else class="icon-shared" @click="showSidebar" />
 				</li>
 				<li class="app-navigation-entry-utils-menu-button">
@@ -43,7 +45,7 @@
 			</ul>
 		</div>
 		<div :class="{ 'open': menuOpen }" class="app-navigation-entry-menu">
-			<popover-menu :menu="actions" />
+			<PopoverMenu :menu="actions" />
 		</div>

 		<!-- undo action -->
@@ -54,8 +56,7 @@
 			<button
 				:title="t('settings', 'Undo')"
 				class="app-navigation-entry-deleted-button icon-history"
-				@click="unDelete"
-			/>
+				@click="unDelete" />
 		</div>

 		<!-- edit entry -->
@@ -63,9 +64,10 @@
 			<form @submit.prevent.stop="applyEdit">
 				<input v-model="editTitle" type="text" required>
 				<input type="submit" value="" class="icon-confirm">
-				<input type="submit" value="" class="icon-close"
-					@click.stop.prevent="cancelEdit"
-				>
+				<input type="submit"
+					value=""
+					class="icon-close"
+					@click.stop.prevent="cancelEdit">
 			</form>
 			<ColorPicker v-model="editColor" />
 		</div>
@@ -81,16 +83,16 @@ export default {
 	name: 'AppNavigationBoard',
 	components: {
 		ColorPicker,
-		PopoverMenu
+		PopoverMenu,
 	},
 	directives: {
-		ClickOutside
+		ClickOutside,
 	},
 	props: {
 		board: {
 			type: Object,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -101,7 +103,7 @@ export default {
 			menuOpen: false,
 			undoTimeoutHandle: null,
 			editTitle: '',
-			editColor: ''
+			editColor: '',
 		}
 	},
 	computed: {
@@ -112,7 +114,7 @@ export default {
 		routeTo: function() {
 			return {
 				name: 'board',
-				params: { id: this.board.id }
+				params: { id: this.board.id },
 			}
 		},
 		actions: function() {
@@ -131,7 +133,7 @@ export default {
 						this.editing = true
 					},
 					icon: 'icon-rename',
-					text: t('deck', 'Edit board')
+					text: t('deck', 'Edit board'),
 				})

 				actions.push({
@@ -150,7 +152,7 @@ export default {
 						}
 					},
 					icon: 'icon-clone',
-					text: t('deck', 'Clone board')
+					text: t('deck', 'Clone board'),
 				})

 				if (!this.board.archived) {
@@ -161,7 +163,7 @@ export default {
 							this.$store.dispatch('archiveBoard', this.board)
 						},
 						icon: 'icon-archive',
-						text: t('deck', 'Archive board')
+						text: t('deck', 'Archive board'),
 					})
 				} else {
 					actions.push({
@@ -171,7 +173,7 @@ export default {
 							this.$store.dispatch('unarchiveBoard', this.board)
 						},
 						icon: 'icon-archive',
-						text: t('deck', 'Unarchive board')
+						text: t('deck', 'Unarchive board'),
 					})
 				}

@@ -189,7 +191,7 @@ export default {
 							})
 					},
 					icon: 'icon-delete',
-					text: t('deck', 'Delete board')
+					text: t('deck', 'Delete board'),
 				})

 				actions.push({
@@ -199,13 +201,13 @@ export default {
 						this.$router.push(route)
 					},
 					icon: 'icon-settings-dark',
-					text: t('deck', 'Board details')
+					text: t('deck', 'Board details'),
 				})

 			}

 			return actions
-		}
+		},
 	},
 	watch: {},
 	mounted() {
@@ -246,11 +248,11 @@ export default {
 			const route = this.routeTo
 			route.name = 'board.details'
 			this.$router.push(route)
-		}
+		},
 	},
 	inject: [
-		'boardApi'
-	]
+		'boardApi',
+	],
 }
 </script>

--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -20,15 +20,16 @@
  -
  -->
 <template>
-	<li v-if="boards.length > 0" :id="id" :title="text"
-		:class="{'open': opened, 'collapsible': collapsible }"
-	>
+	<li v-if="boards.length > 0"
+		:id="id"
+		:title="text"
+		:class="{'open': opened, 'collapsible': collapsible }">
 		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
 		<a :class="icon" href="#">
 			{{ text }}
 		</a>
 		<ul v-if="boards.length > 0">
-			<app-navigation-board v-for="board in boards" :key="board.id" :board="board" />
+			<AppNavigationBoard v-for="board in boards" :key="board.id" :board="board" />
 		</ul>
 	</li>
 </template>
@@ -40,27 +41,27 @@ import AppNavigationBoard from './AppNavigationBoard'
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
-		AppNavigationBoard
+		AppNavigationBoard,
 	},
 	directives: {
-		ClickOutside
+		ClickOutside,
 	},
 	props: {
 		id: {
 			type: String,
-			required: true
+			required: true,
 		},
 		text: {
 			type: String,
-			required: true
+			required: true,
 		},
 		icon: {
 			type: String,
-			required: true
+			required: true,
 		},
 		boards: {
 			type: Array,
-			required: true
+			required: true,
 		},
 		/**
 		 * Control whether the category should be opened when adding boards.
@@ -68,31 +69,31 @@ export default {
 		 */
 		openOnAddBoards: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
-			opened: false
+			opened: false,
 		}
 	},
 	computed: {
 		collapsible() {
 			return this.boards.length > 0
-		}
+		},
 	},
 	watch: {
 		boards: function(newVal, prevVal) {
 			if (this.openOnAddBoards === true && prevVal.length < newVal.length) {
 				this.opened = true
 			}
-		}
+		},
 	},
 	mounted() {},
 	methods: {
 		toggleCollapse() {
 			this.opened = !this.opened
-		}
-	}
+		},
+	},
 }
 </script>
--- a/src/init-collections.js
+++ b/src/init-collections.js
@@ -46,7 +46,7 @@ Vue.prototype.OC = OC;
 				const body = document.getElementById('body-user')
 				body.append(container)
 				const ComponentVM = new Vue({
-					render: h => h(BoardSelector)
+					render: h => h(BoardSelector),
 				})
 				ComponentVM.$mount(container)
 				ComponentVM.$root.$on('close', () => {
@@ -62,7 +62,7 @@ Vue.prototype.OC = OC;
 			})
 		},
 		typeString: t('deck', 'Link to a board'),
-		typeIconClass: 'icon-deck'
+		typeIconClass: 'icon-deck',
 	})

 	OCP.Collaboration.registerType('deck-card', {
@@ -73,7 +73,7 @@ Vue.prototype.OC = OC;
 				const body = document.getElementById('body-user')
 				body.append(container)
 				const ComponentVM = new Vue({
-					render: h => h(CardSelector)
+					render: h => h(CardSelector),
 				})
 				ComponentVM.$mount(container)
 				ComponentVM.$root.$on('close', () => {
@@ -89,6 +89,6 @@ Vue.prototype.OC = OC;
 			})
 		},
 		typeString: t('deck', 'Link to a card'),
-		typeIconClass: 'icon-deck'
+		typeIconClass: 'icon-deck',
 	})
 })(window.OCP))
--- a/src/main.js
+++ b/src/main.js
@@ -39,8 +39,8 @@ sync(store, router)
 Vue.mixin({
 	methods: {
 		t: translate,
-		n: translatePlural
-	}
+		n: translatePlural,
+	},
 })

 Vue.directive('tooltip', Tooltip)
@@ -50,5 +50,5 @@ new Vue({
 	el: '#content',
 	router,
 	store,
-	render: h => h(App)
+	render: h => h(App),
 })
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -23,12 +23,12 @@
 export default {
 	methods: {
 		hexToRgb(hex) {
-			let result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex)
+			const result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex)
 			if (result) {
 				return {
 					r: parseInt(result[1], 16),
 					g: parseInt(result[2], 16),
-					b: parseInt(result[3], 16)
+					b: parseInt(result[3], 16),
 				}
 			}
 			return null
@@ -39,11 +39,11 @@ export default {
 			const r = rgb.r / 255
 			const g = rgb.g / 255
 			const b = rgb.b / 255
-			let max = Math.max(r, g, b)
-			let min = Math.min(r, g, b)
+			const max = Math.max(r, g, b)
+			const min = Math.min(r, g, b)
 			let h
 			let s
-			let l = (max + min) / 2
+			const l = (max + min) / 2

 			if (max === min) {
 				h = s = 0 // achromatic
@@ -64,12 +64,12 @@ export default {
 				h /= 6
 			}
 			return {
-				h, l, s
+				h, l, s,
 			}
 		},
 		textColor(hex) {

-			let rgb = this.hexToRgb(hex)
+			const rgb = this.hexToRgb(hex)
 			if (rgb === null) {
 				return '#000000'
 			}
@@ -84,13 +84,13 @@ export default {
 		},
 		colorIsValid(hex) {

-			var re = new RegExp('[A-Fa-f0-9]{6}')
+			const re = new RegExp('[A-Fa-f0-9]{6}')
 			if (re.test(hex)) {
 				return true
 			}
 			return false

-		}
+		},

-	}
+	},
 }
--- a/src/router.js
+++ b/src/router.js
@@ -39,45 +39,45 @@ export default new Router({
 		{
 			path: '/',
 			name: 'main',
-			component: Boards
+			component: Boards,
 		},
 		{
 			path: '/boards',
 			name: 'boards',
 			component: Boards,
 			props: {
-				navFilter: BOARD_FILTERS.ALL
-			}
+				navFilter: BOARD_FILTERS.ALL,
+			},
 		},
 		{
 			path: '/boards/archived',
 			name: 'boards.archived',
 			component: Boards,
 			props: {
-				navFilter: BOARD_FILTERS.ARCHIVED
-			}
+				navFilter: BOARD_FILTERS.ARCHIVED,
+			},
 		},
 		{
 			path: '/boards/shared',
 			name: 'boards.shared',
 			component: Boards,
 			props: {
-				navFilter: BOARD_FILTERS.SHARED
-			}
+				navFilter: BOARD_FILTERS.SHARED,
+			},
 		},
 		{
 			path: '/boards/:id',
 			name: 'board',
 			components: {
 				default: Board,
-				sidebar: Sidebar
+				sidebar: Sidebar,
 			},
 			props: {
 				default: (route) => {
 					return {
-						id: parseInt(route.params.id, 10)
+						id: parseInt(route.params.id, 10),
 					}
-				}
+				},
 			},
 			children: [
 				{
@@ -85,41 +85,41 @@ export default new Router({
 					name: 'board.details',
 					components: {
 						default: Boards,
-						sidebar: BoardSidebar
+						sidebar: BoardSidebar,
 					},
 					props: {
 						default: (route) => {
 							return {
-								id: parseInt(route.params.id, 10)
+								id: parseInt(route.params.id, 10),
 							}
 						},
 						sidebar: (route) => {
 							return {
-								id: parseInt(route.params.id, 10)
+								id: parseInt(route.params.id, 10),
 							}
-						}
-					}
+						},
+					},
 				},
 				{
 					path: 'cards/:cardId',
 					name: 'card',
 					components: {
-						sidebar: CardSidebar
+						sidebar: CardSidebar,
 					},
 					props: {
 						default: (route) => {
 							return {
-								cardId: parseInt(route.params.cardId, 10)
+								cardId: parseInt(route.params.cardId, 10),
 							}
 						},
 						sidebar: (route) => {
 							return {
-								id: parseInt(route.params.cardId, 10)
+								id: parseInt(route.params.cardId, 10),
 							}
-						}
-					}
-				}
-			]
-		}
-	]
+						},
+					},
+				},
+			],
+		},
+	],
 })
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -36,7 +36,7 @@ export class BoardApi {
 	 * Updates a board.
 	 *
 	 * @param {Board} board
-	 * @return Promise
+	 * @returns Promise
 	 */
 	updateBoard(board) {
 		return axios.put(this.url(`/boards/${board.id}`), board)
@@ -57,7 +57,7 @@ export class BoardApi {
 	 * Creates a new board.
 	 *
 	 * @param {{String title, String color}} boardData The board data to send.
-	 * 										 color the hexadecimal color value formated /[0-9A-F]{6}/i
+	 *   color the hexadecimal color value formated /[0-9A-F]{6}/i
 	 * @return Promise
 	 */
 	createBoard(boardData) {
@@ -137,7 +137,7 @@ export class BoardApi {

 	async cloneBoard(board) {
 		try {
-			let response = await axios.post(this.url(`/boards/${board.id}/clone`))
+			const response = await axios.post(this.url(`/boards/${board.id}/clone`))
 			return response.data
 		} catch (err) {
 			return err
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -27,7 +27,7 @@ const apiClient = new CardApi()

 export default {
 	state: {
-		cards: []
+		cards: [],
 	},
 	getters: {
 		cardsByStack: state => (id) => {
@@ -35,73 +35,73 @@ export default {
 		},
 		cardById: state => (id) => {
 			return state.cards.find((card) => card.id === id)
-		}
+		},
 	},
 	mutations: {
 		clearCards(state) {
 			state.cards = []
 		},
 		addCard(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				let existingCard = state.cards.find(_card => _card.id === card.id)
+				const existingCard = state.cards.find(_card => _card.id === card.id)
 				Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
 			} else {
 				state.cards.push(card)
 			}
 		},
 		deleteCard(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				state.cards.splice(existingIndex, 1)
 			}
 		},
 		updateCard(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				Vue.set(state.cards, existingIndex, card)
 			}
 		},
 		updateTitle(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				state.cards[existingIndex].title = card.title
 			}
 		},
 		assignCardToUser(state, user) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
+			const existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
 			if (existingIndex !== -1) {
 				state.cards[existingIndex].assignedUsers.push(user)
 			}
 		},
 		removeUserFromCard(state, user) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
+			const existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
 			if (existingIndex !== -1) {
-				let foundIndex = state.cards[existingIndex].assignedUsers.findIndex(_user => _user.id === user.id)
+				const foundIndex = state.cards[existingIndex].assignedUsers.findIndex(_user => _user.id === user.id)
 				if (foundIndex !== -1) {
 					state.cards[existingIndex].assignedUsers.splice(foundIndex, 1)
 				}
 			}
 		},
 		updateCardDesc(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				state.cards[existingIndex].description = card.description
 			}
 		},
 		updateCardDue(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				state.cards[existingIndex].duedate = card.duedate
 			}
 		},
 		updateCardLabels(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				let existingCard = state.cards.find(_card => _card.id === card.id)
+				const existingCard = state.cards.find(_card => _card.id === card.id)
 				existingCard.labels = card.labels
 			}
-		}
+		},
 	},
 	actions: {
 		addCard({ commit }, card) {
@@ -192,6 +192,6 @@ export default {
 				.then((card) => {
 					commit('updateCardDue', card)
 				})
-		}
-	}
+		},
+	},
 }
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -37,13 +37,13 @@ const debug = process.env.NODE_ENV !== 'production'
 export const BOARD_FILTERS = {
 	ALL: '',
 	ARCHIVED: 'archived',
-	SHARED: 'shared'
+	SHARED: 'shared',
 }

 export default new Vuex.Store({
 	modules: {
 		stack,
-		card
+		card,
 	},
 	strict: debug,
 	state: {
@@ -58,7 +58,7 @@ export default new Vuex.Store({
 		assignableUsers: [],
 		boardFilter: BOARD_FILTERS.ALL,
 		activity: [],
-		activityLoadMore: true
+		activityLoadMore: true,
 	},
 	getters: {
 		boards: state => {
@@ -93,7 +93,7 @@ export default new Vuex.Store({
 		},
 		currentBoardLabels: state => {
 			return state.currentBoard.labels
-		}
+		},
 	},
 	mutations: {
 		toggleShowArchived(state) {
@@ -197,7 +197,7 @@ export default new Vuex.Store({
 		},
 		updateLabelFromCurrentBoard(state, newLabel) {

-			let labelToUpdate = state.currentBoard.labels.find((l) => {
+			const labelToUpdate = state.currentBoard.labels.find((l) => {
 				return newLabel.id === l.id
 			})

@@ -214,7 +214,7 @@ export default new Vuex.Store({
 			state.currentBoard.acl.push(createdAcl)
 		},
 		updateAclFromCurrentBoard(state, acl) {
-			for (var acl_ in state.currentBoard.acl) {
+			for (const acl_ in state.currentBoard.acl) {
 				if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
 					state.currentBoard.acl[acl_] = acl
 					break
@@ -223,8 +223,8 @@ export default new Vuex.Store({
 		},
 		deleteAclFromCurrentBoard(state, acl) {
 			let removeIndex = -1
-			for (var index in state.currentBoard.acl) {
-				var attr = state.currentBoard.acl[index]
+			for (const index in state.currentBoard.acl) {
+				const attr = state.currentBoard.acl[index]
 				if (acl.id === attr.id) {
 					removeIndex = index
 					break
@@ -234,7 +234,7 @@ export default new Vuex.Store({
 			if (removeIndex > -1) {
 				Vue.delete(state.currentBoard.acl, removeIndex)
 			}
-		}
+		},
 	},
 	actions: {
 		loadBoardById({ commit }, boardId) {
@@ -279,7 +279,7 @@ export default new Vuex.Store({
 		 *
 		 * @param commit
 		 * @param board The board to update.
-		 * @return {Promise<void>}
+		 * @returns {Promise<void>}
 		 */
 		async updateBoard({ commit }, board) {
 			const storedBoard = await apiClient.updateBoard(board)
@@ -293,7 +293,7 @@ export default new Vuex.Store({
 		},
 		async cloneBoard({ commit }, boardData) {
 			try {
-				let newBoard = await apiClient.cloneBoard(boardData)
+				const newBoard = await apiClient.cloneBoard(boardData)
 				commit('cloneBoard', newBoard)
 				return newBoard
 			} catch (err) {
@@ -408,6 +408,6 @@ export default new Vuex.Store({
 					commit('deleteAclFromCurrentBoard', acl)
 					dispatch('loadBoardById', acl.boardId)
 				})
-		}
-	}
+		},
+	},
 })
--- a/src/store/stack.js
+++ b/src/store/stack.js
@@ -30,39 +30,39 @@ export default {
 	state: {
 		stacks: [],
 		deletedStacks: [],
-		deletedCards: []
+		deletedCards: [],
 	},
 	getters: {
 		stacksByBoard: state => (id) => {
 			return state.stacks.filter((stack) => stack.boardId === id).sort((a, b) => a.order - b.order)
-		}
+		},
 	},
 	mutations: {
 		addStack(state, stack) {
-			let existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
+			const existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
 			if (existingIndex !== -1) {
-				let existingStack = state.stacks.find(_stack => _stack.id === stack.id)
+				const existingStack = state.stacks.find(_stack => _stack.id === stack.id)
 				Vue.set(state.stacks, existingIndex, Object.assign({}, existingStack, stack))
 			} else {
 				state.stacks.push(stack)
 			}
 		},
 		orderStack(state, { stack, removedIndex, addedIndex }) {
-			let currentOrder = state.stacks.filter((_stack) => _stack.boardId === stack.boardId).sort((a, b) => a.order - b.order)
-			var newOrder = applyOrderToArray(currentOrder, removedIndex, addedIndex)
+			const currentOrder = state.stacks.filter((_stack) => _stack.boardId === stack.boardId).sort((a, b) => a.order - b.order)
+			const newOrder = applyOrderToArray(currentOrder, removedIndex, addedIndex)
 			for (let i = 0; i < newOrder.length; i++) {
 				newOrder[i].order = parseInt(i)
 			}
 		},
 		deleteStack(state, stack) {

-			let existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
+			const existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
 			if (existingIndex !== -1) {
 				state.stacks.splice(existingIndex, 1)
 			}
 		},
 		updateStack(state, stack) {
-			let existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
+			const existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
 			if (existingIndex !== -1) {
 				state.stacks[existingIndex].title = stack.title
 			}
@@ -76,7 +76,7 @@ export default {
 		setDeletedCards(state, delCards) {
 			state.deletedCards = []
 			state.deletedCards = delCards
-		}
+		},
 	},
 	actions: {
 		orderStack({ commit }, { stack, removedIndex, addedIndex }) {
@@ -96,9 +96,9 @@ export default {
 			}
 			apiClient[call](boardId)
 				.then((stacks) => {
-					for (let i in stacks) {
-						let stack = stacks[i]
-						for (let j in stack.cards) {
+					for (const i in stacks) {
+						const stack = stacks[i]
+						for (const j in stack.cards) {
 							commit('addCard', stack.cards[j])
 						}
 						delete stack.cards
@@ -140,7 +140,7 @@ export default {
 				.then((stack) => {
 					commit('addStack', stack)
 				})
-		}
+		},

-	}
+	},
 }