Update eslint config

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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>
 

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>

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>
 

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>
 

src/components/List.vue

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

src/components/Sidebar.vue

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

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>
 

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>

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>
 

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>

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>
 

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">

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>

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>
 

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>
 

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>
 

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>
 

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>
 

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>
 

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>

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>

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>
 

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>