Fix eslint

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

package.json

@@ -20,8 +20,8 @@
 		"dev": "webpack --config webpack.dev.js",
 		"watch": "webpack --progress --watch --config webpack.dev.js",
 		"build": "webpack --progress --hide-modules --config webpack.prod.js",
-		"lint": "eslint --ext .js,.vue src tests",
+		"lint": "eslint --ext .js,.vue src",
-		"lint:fix": "eslint --ext .js,.vue src tests --fix",
+		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage"
 	},

src/App.vue

@@ -21,7 +21,6 @@
  -->
 
 <template>
-
 	<div id="content" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
 		<div id="app-content">
@@ -29,13 +28,11 @@
 		</div>
 		<router-view name="sidebar" />
 	</div>
-
 </template>
 
 <script>
 
 import { mapState } from 'vuex'
-import BoardSidebar from './components/board/BoardSidebar'
 import AppNavigation from './components/navigation/AppNavigation'
 import { BoardApi } from './services/BoardApi'
 
@@ -44,8 +41,7 @@ const boardApi = new BoardApi()
 export default {
 	name: 'App',
 	components: {
-		AppNavigation,
+		AppNavigation
-		BoardSidebar
 	},
 	data: function() {
 		return {

src/BoardSelector.vue

@@ -25,14 +25,17 @@
 		<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 boards" v-if="!currentBoard || ''+board.id !== ''+currentBoard" :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>
 			</ul>
-			<button v-if="!loading" class="primary" @click="select">{{ t('deck', 'Select board') }}</button>
+			<button v-if="!loading" class="primary" @click="select">
+				{{ t('deck', 'Select board') }}
+			</button>
 		</div>
 	</Modal>
 </template>
@@ -71,15 +74,13 @@
 
 </style>
 <script>
-/* global OC */
 import { Modal } from '@nextcloud/vue/dist/Components/Modal'
-import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
 import axios from 'nextcloud-axios'
 
 export default {
 	name: 'CollaborationView',
 	components: {
-		Modal, Avatar
+		Modal
 	},
 	data() {
 		return {
@@ -89,6 +90,11 @@ export default {
 			currentBoard: null
 		}
 	},
+	computed: {
+		availableBoards() {
+			return this.boards.filter((board) => ('' + board.id !== '' + this.currentBoard))
+		}
+	},
 	beforeMount() {
 		this.fetchBoards()
 		this.currentBoard = window.location.hash.match(/\/boards\/([0-9]+)/)[1] || null

src/CardSelector.vue

@@ -23,15 +23,21 @@
 <template>
 	<Modal :title="t('deck', 'Select the card to link to a project')" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
-			<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
+			<Multiselect v-model="selectedBoard" :placeholder="t('deck', 'Select a board')" :options="boards"
 				label="title"
-				@select="fetchCardsFromBoard" />
+				@select="fetchCardsFromBoard"
+			/>
 
-			<Multiselect :placeholder="t('deck', 'Select a card')" v-model="selectedCard" :options="cardsFromBoard"
+			<Multiselect v-model="selectedCard" :placeholder="t('deck', 'Select a card')" :options="cardsFromBoard"
-				label="title" />
+				label="title"
+			/>
 
-			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">{{ t('deck', 'Link to card') }}</button>
+			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">
-			<button @click="close">{{ t('deck', 'Cancel') }}</button>
+				{{ t('deck', 'Link to card') }}
+			</button>
+			<button @click="close">
+				{{ t('deck', 'Cancel') }}
+			</button>
 		</div>
 	</Modal>
 </template>

src/components/ActivityEntry.vue

@@ -24,7 +24,9 @@
 	<div v-if="activity" class="activity">
 		<img :src="activity.icon" class="activity--icon">
 		<div class="activity--message" v-html="parseMessage(activity)" />
-		<div class="activity--timestamp">{{ getTime(activity.datetime) }}</div>
+		<div class="activity--timestamp">
+			{{ getTime(activity.datetime) }}
+		</div>
 	</div>
 </template>
 

src/components/CollaborationView.vue

@@ -23,7 +23,8 @@
 <template>
 	<div>
 		<collection-list v-if="boardId" :id="boardId" :name="boardTitle"
-			type="deck" />
+			type="deck"
+		/>
 	</div>
 </template>
 

src/components/ColorPicker.vue

@@ -23,11 +23,12 @@
 <template>
 	<div v-click-outside="hidePicker" class="color-picker">
 		<div class="color-picker-compact">
-			<Compact :palette="defaultColors" v-model="color" @input="updateColor" />
+			<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" :palette="defaultColors" v-model="color"
+		<Chrome v-if="showFullPicker" v-model="color" :palette="defaultColors"
-			@input="updateColor" />
+			@input="updateColor"
+		/>
 	</div>
 </template>
 

src/components/Controls.vue

@@ -21,7 +21,6 @@
 -->
 
 <template>
-
 	<div class="controls">
 		<div id="app-navigation-toggle-custom" class="icon-menu" @click="toggleNav" />
 		<div class="breadcrumb">
@@ -42,23 +41,26 @@
 					<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"
 						class="no-close"
-						placeholder="Add a new stack" required>
+						placeholder="Add a new stack" required
+					>
 					<input v-tooltip="t('deck', 'clickAddNewStack')" class="icon-confirm" type="submit"
-						value="">
+						value=""
-
+					>
 				</form>
 			</div>
 			<div class="board-action-buttons">
 				<button :style="archivStyle" title="Show archived cards" class="icon icon-archive"
-					@click="toggleShowArchived" />
+					@click="toggleShowArchived"
+				/>
 				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]" title="Toggle compact mode" class="icon"
-					@click="toggleCompactMode" />
+					@click="toggleCompactMode"
+				/>
 				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
-					tag="button" />
+					tag="button"
+				/>
 			</div>
 		</div>
 	</div>
-
 </template>
 
 <script>

src/components/board/BoardSidebar.vue

@@ -24,8 +24,8 @@
 	<app-sidebar 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 +41,6 @@
 		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
-
 	</app-sidebar>
 </template>
 

src/components/board/DeletedTabSidebar.vue

@@ -1,18 +1,17 @@
 <template>
 	<div>
-
 		<h3>{{ t('deck', 'Deleted stacks') }}</h3>
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
-
 				<span class="icon icon-deck" />
 				<span class="title">{{ deletedStack.title }}</span>
 				<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>
+				<!-- <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> -->
 			</li>
 		</ul>
@@ -25,7 +24,8 @@
 				<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">

src/components/board/SharingTabSidebar.vue

@@ -7,7 +7,8 @@
 			label="displayName"
 			track-by="user"
 			@input="clickAddAcl"
-			@search-change="asyncFind" />
+			@search-change="asyncFind"
+		/>
 
 		<ul
 			id="shareWithList"
@@ -30,18 +31,27 @@
 				</span>
 
 				<Actions>
-					<ActionCheckbox :checked="acl.permissionEdit" @change="clickEditAcl(acl)">{{ t('deck', 'Can edit') }}</ActionCheckbox>
+					<ActionCheckbox :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
+						{{ t('deck', 'Can edit') }}
+					</ActionCheckbox>
 				</Actions>
 				<Actions>
-					<ActionCheckbox :checked="acl.permissionShare" @change="clickShareAcl(acl)">{{ t('deck', 'Can share') }}</ActionCheckbox>
+					<ActionCheckbox :checked="acl.permissionShare" @change="clickShareAcl(acl)">
-					<ActionCheckbox :checked="acl.permissionManage" @change="clickManageAcl(acl)">{{ t('deck', 'Can manage') }}</ActionCheckbox>
+						{{ t('deck', 'Can share') }}
-					<ActionButton icon="icon-delete" @click="clickDeleteAcl(acl)">{{ t('deck', 'Delete') }}</ActionButton>
+					</ActionCheckbox>
+					<ActionCheckbox :checked="acl.permissionManage" @change="clickManageAcl(acl)">
+						{{ t('deck', 'Can manage') }}
+					</ActionCheckbox>
+					<ActionButton icon="icon-delete" @click="clickDeleteAcl(acl)">
+						{{ t('deck', 'Delete') }}
+					</ActionButton>
 				</Actions>
 			</li>
 		</ul>
 
 		<collection-list v-if="board.id" :id="`${board.id}`" :name="board.title"
-			type="deck" />
+			type="deck"
+		/>
 	</div>
 </template>
 

src/components/board/Stack.vue

@@ -25,15 +25,20 @@
 	<div class="stack">
 		<div class="stack--header">
 			<transition name="fade" mode="out-in">
-				<h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }}</h3>
+				<h3 v-if="!editing" @click="startEditing(stack)">
+					{{ stack.title }}
+				</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="">
+						value=""
+					>
 				</form>
 			</transition>
 			<Actions>
-				<ActionButton icon="icon-delete" @click="deleteStack(stack)">{{ t('deck', 'Delete stack') }}</ActionButton>
+				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
+					{{ t('deck', 'Delete stack') }}
+				</ActionButton>
 			</Actions>
 		</div>
 
@@ -47,13 +52,14 @@
 			<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"
 				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>
 

src/components/board/TagsTabSidebar.vue

@@ -6,9 +6,11 @@
 					<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">
+							value="" class="icon-confirm"
+						>
 						<input v-tooltip="t('deck', 'Cancel')" value=""
-							class="icon-close" @click="editingLabelId = null">
+							class="icon-close" @click="editingLabelId = null"
+						>
 					</form>
 					<ColorPicker :value="'#' + editingLabel.color" @input="updateColor" />
 				</template>
@@ -27,9 +29,11 @@
 						<input v-model="addLabelObj.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" :disabled="!addLabelObjValidated"
 							type="submit"
-							value="" class="icon-confirm">
+							value="" class="icon-confirm"
+						>
 						<input v-tooltip="t('deck', 'Cancel')" value=""
-							class="icon-close" @click="addLabel=false">
+							class="icon-close" @click="addLabel=false"
+						>
 					</form>
 					<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
 				</template>
@@ -45,14 +49,12 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import { Compact } from 'vue-color'
 import ColorPicker from '../ColorPicker'
 
 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker,
+		ColorPicker
-		'compact-picker': Compact
 	},
 	mixins: [Color],
 	data() {

src/components/board/TimelineTabSidebar.vue

@@ -3,8 +3,11 @@
 		<div v-if="isLoading" class="icon icon-loading" />
 
 		<ActivityEntry v-for="entry in boardActivity" v-else :key="entry.activity_id"
-			:activity="entry" />
+			:activity="entry"
-		<button v-if="activityLoadMore" @click="loadMore">Load More</button>
+		/>
+		<button v-if="activityLoadMore" @click="loadMore">
+			Load More
+		</button>
 	</div>
 </template>
 

src/components/boards/BoardItem.vue

@@ -23,16 +23,20 @@
 <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>
-		<div class="board-list-title-cell">{{ board.title }}</div>
+		<div class="board-list-title-cell">
+			{{ 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" />
+				class="board-list-avatar"
-			<div v-tooltip="otherAcl" v-if="board.acl.length > 5" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
+			/>
+			<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" />
 	</router-link>

src/components/boards/Boards.vue

@@ -25,9 +25,15 @@
 		<Controls />
 		<div class="board-list">
 			<div class="board-list-row board-list-header-row">
-				<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
+				<div class="board-list-bullet-cell">
-				<div class="board-list-title-cell">Title</div>
+					<div class="board-list-bullet" />
-				<div class="board-list-avatars-cell">Members</div>
+				</div>
+				<div class="board-list-title-cell">
+					Title
+				</div>
+				<div class="board-list-avatars-cell">
+					Members
+				</div>
 				<div class="board-list-actions-cell" />
 			</div>
 			<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />

src/components/card/CardSidebar.vue

@@ -25,33 +25,43 @@
 		: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">
-				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag"><span class="hidden-visually">{{ t('deck', 'Tags') }}</span></div>
+				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
+					<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">
+						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 }}</div>
+							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+								{{ scope.option.title }}
+							</div>
 						</template>
 						<template #tag="scope">
-							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">{{ scope.option.title }}</div>
+							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+								{{ scope.option.title }}
+							</div>
 						</template>
 					</multiselect>
 				</div>
 			</div>
 
 			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group"><span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span></div>
+				<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
+					<span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span>
+				</div>
 				<div class="section-details">
 					<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" />
 							<span class="avatarLabel">{{ scope.option.displayname }} </span>
@@ -61,19 +71,25 @@
 			</div>
 
 			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark"><span class="hidden-visually">{{ t('deck', 'Due date') }}</span></div>
+				<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
+					<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()" />
+						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') }}</ActionButton>
+						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+							{{ t('deck', 'Remove due date') }}
+						</ActionButton>
 					</Actions>
 				</div>
 			</div>
 
 			<div class="section-wrapper">
 				<collection-list v-if="currentCard.id" :id="`${currentCard.id}`" :name="currentCard.title"
-					type="deck-card" />
+					type="deck-card"
+				/>
 			</div>
 
 			<h5>Description</h5>
@@ -88,8 +104,11 @@
 		<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" />
+				:activity="entry"
-			<button v-if="activityLoadMore" @click="loadMore">Load More</button>
+			/>
+			<button v-if="activityLoadMore" @click="loadMore">
+				Load More
+			</button>
 		</AppSidebarTab>
 	</app-sidebar>
 </template>

src/components/cards/AvatarList.vue

@@ -25,7 +25,8 @@
 		<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" />
+				:url="avatarUrl(user)" :disable-tooltip="true" :size="32"
+			/>
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">

src/components/cards/CardBadges.vue

@@ -38,12 +38,11 @@
 	</div>
 </template>
 <script>
-import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
 import AvatarList from './AvatarList'
 
 export default {
 	name: 'CardBadges',
-	components: { Avatar, AvatarList },
+	components: { AvatarList },
 	props: {
 		id: {
 			type: Number,

src/components/cards/CardItem.vue

@@ -26,41 +26,66 @@
 
 <template>
 	<div :class="{'compact': compactMode, 'current-card': currentCard}" tag="div" class="card"
-		@click.self="openCard">
+		@click.self="openCard"
+	>
 		<div class="card-upper">
-			<h3 v-if="showArchived">{{ card.title }}</h3>
+			<h3 v-if="showArchived">
-			<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
+				{{ card.title }}
-			<h3 v-else>&nbsp;</h3>
+			</h3>
-			<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
+			<h3 v-else-if="!editing" @click.stop="startEditing(card)">
-				@submit.prevent="finishedEdit(card)">
+				{{ card.title }}
+			</h3>
+			<h3 v-else>
+&nbsp;
+			</h3>
+			<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>
 
 			<Actions v-if="!editing" @click.stop.prevent>
-				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
+				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
-				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
+					{{ t('deck', 'Assign to me') }}
-				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
+				</ActionButton>
-				<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
+				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
-				<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
+					{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
+				</ActionButton>
+				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
+					{{ t('deck', 'Delete card') }}
+				</ActionButton>
+				<ActionButton icon="icon-external" @click.stop="modalShow=true">
+					{{ t('deck', 'Move card') }}
+				</ActionButton>
+				<ActionButton icon="icon-settings-dark" @click="openCard">
+					{{ t('deck', 'Card details') }}
+				</ActionButton>
 			</Actions>
 
 			<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
 				<div class="modal__content">
-					<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
+					<Multiselect v-model="selectedBoard" :placeholder="t('deck', 'Select a board')" :options="boards"
 						label="title"
-						@select="loadStacksFromBoard" />
+						@select="loadStacksFromBoard"
-					<Multiselect :placeholder="t('deck', 'Select a stack')" v-model="selectedStack" :options="stacksFromBoard"
+					/>
-						label="title" />
+					<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') }}</button>
+					/>
-					<button @click="modalShow=false">{{ t('deck', 'Cancel') }}</button>
 
+					<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+						{{ t('deck', 'Move card') }}
+					</button>
+					<button @click="modalShow=false">
+						{{ t('deck', 'Cancel') }}
+					</button>
 				</div>
 			</modal>
 		</div>
 		<ul class="labels" @click="openCard">
-			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
+			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+				<span>{{ label.title }}</span>
+			</li>
 		</ul>
 		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
 			<card-badges :id="id" />
@@ -78,12 +103,11 @@ import { mapState } from 'vuex'
 import axios from 'nextcloud-axios'
 
 import CardBadges from './CardBadges'
-import LabelTag from './LabelTag'
 import Color from '../../mixins/color'
 
 export default {
 	name: 'CardItem',
-	components: { Modal, CardBadges, LabelTag, Actions, ActionButton, Multiselect },
+	components: { Modal, CardBadges, Actions, ActionButton, Multiselect },
 	directives: {
 		ClickOutside
 	},

src/components/cards/LabelTag.vue

@@ -1,40 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<li :style="labelStyle">{{ labelObject.title }}</li>
-</template>
-<script>
-export default {
-	name: 'LabelTag',
-	props: {
-		labelObject: { type: 'Object', default: () => { return { title: 'Default', color: 'aaaaaa' } } }
-	},
-	computed: {
-
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/navigation/AppNavigation.vue

@@ -28,31 +28,36 @@
 				:text="t('deck', 'All boards')"
 				:boards="noneArchivedBoards"
 				:open-on-add-boards="true"
-				icon="icon-deck" />
+				icon="icon-deck"
+			/>
 			<app-navigation-board-category
 				id="deck-navigation-archived"
 				:text="t('deck', 'Archived boards')"
 				:boards="archivedBoards"
-				icon="icon-archive" />
+				icon="icon-archive"
+			/>
 			<app-navigation-board-category
 				id="deck-navigation-shared"
 				:text="t('deck', 'Shared boards')"
 				:boards="sharedBoards"
-				icon="icon-shared" />
+				icon="icon-shared"
+			/>
 			<app-navigation-add-board />
 		</ul>
-		<div v-click-outside="closeMenu" v-if="isAdmin"
+		<div v-if="isAdmin" id="app-settings"
-			id="app-settings" :class="{open: opened}">
+			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 :class="{'icon-loading-small': groupLimitDisabled}" :options="groups" :multiple="true"
+				<Multiselect v-model="groupLimit" :class="{'icon-loading-small': groupLimitDisabled}" :options="groups"
-					v-model="groupLimit"
+					:multiple="true"
 					:disabled="groupLimitDisabled" label="displayname" track-by="id"
-					@input="updateConfig" />
+					@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>
@@ -66,14 +71,12 @@ import ClickOutside from 'vue-click-outside'
 import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 
 import AppNavigationAddBoard from './AppNavigationAddBoard'
-import AppNavigationBoard from './AppNavigationBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 
 export default {
 	name: 'AppNavigation',
 	components: {
 		AppNavigationAddBoard,
-		AppNavigationBoard,
 		AppNavigationBoardCategory,
 		Multiselect
 	},

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>
@@ -33,7 +33,8 @@
 				<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">
+					@click.stop.prevent="cancelEdit"
+				>
 			</form>
 			<ColorPicker v-model="color" />
 		</div>

src/components/navigation/AppNavigationBoard.vue

@@ -22,7 +22,8 @@
 <template>
 	<router-link :id="`board-${board.id}`"
 		:title="board.title" :class="[{'icon-loading-small': loading, deleted: deleted, editing: editing }, classes]"
-		:to="routeTo" tag="li">
+		:to="routeTo" tag="li"
+	>
 		<div :style="{ backgroundColor: `#${board.color}` }" class="app-navigation-entry-bullet" />
 		<a href="#">
 			{{ board.title }}
@@ -32,7 +33,8 @@
 			<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" />
+						@click="showSidebar"
+					/>
 					<button v-else class="icon-shared" @click="showSidebar" />
 				</li>
 				<li class="app-navigation-entry-utils-menu-button">
@@ -52,7 +54,8 @@
 			<button
 				:title="t('settings', 'Undo')"
 				class="app-navigation-entry-deleted-button icon-history"
-				@click="unDelete" />
+				@click="unDelete"
+			/>
 		</div>
 
 		<!-- edit entry -->
@@ -61,7 +64,8 @@
 				<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">
+					@click.stop.prevent="cancelEdit"
+				>
 			</form>
 			<ColorPicker v-model="editColor" />
 		</div>

src/components/navigation/AppNavigationBoardCategory.vue

@@ -21,7 +21,8 @@
   -->
 <template>
 	<li v-if="boards.length > 0" :id="id" :title="text"
-		:class="{'open': opened, 'collapsible': collapsible }">
+		:class="{'open': opened, 'collapsible': collapsible }"
+	>
 		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
 		<a :class="icon" href="#">
 			{{ text }}
@@ -33,15 +34,13 @@
 </template>
 
 <script>
-import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
 import AppNavigationBoard from './AppNavigationBoard'
 
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
-		AppNavigationBoard,
+		AppNavigationBoard
-		PopoverMenu
 	},
 	directives: {
 		ClickOutside