Refactor app navigation to use @nextcloud/vue components

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

src/components/navigation/AppNavigation.vue

@@ -22,35 +22,31 @@
 
 <template>
 	<div id="app-navigation" :class="{'icon-loading': loading}">
-		<ul id="deck-navigation">
+		<AppNavigationVue>
+			<ul>
 				<AppNavigationBoardCategory
 					id="deck-navigation-all"
+					to="/board"
 					:text="t('deck', 'All boards')"
 					:boards="noneArchivedBoards"
 					:open-on-add-boards="true"
 					icon="icon-deck" />
 				<AppNavigationBoardCategory
 					id="deck-navigation-archived"
+					to="/board/archived"
 					:text="t('deck', 'Archived boards')"
 					:boards="archivedBoards"
 					icon="icon-archive" />
 				<AppNavigationBoardCategory
 					id="deck-navigation-shared"
-				:text="t('deck', 'Shared boards')"
+					to="/board/shared"
+					:text="t('deck', 'Shared with you')"
 					:boards="sharedBoards"
 					icon="icon-shared" />
 				<AppNavigationAddBoard v-if="canCreate" />
 			</ul>
-		<div v-if="isAdmin"
+			<AppNavigationSettings>
-			id="app-settings"
+				<div>
-			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}"
 						open-direction="bottom"
@@ -63,6 +59,21 @@
 						@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>
+			</AppNavigationSettings>
+		</AppNavigationVue>
+
+		<ul id="deck-navigation">
+			<AppNavigationAddBoard v-if="canCreate" />
+		</ul>
+		<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>
 	</div>
 </template>
@@ -71,8 +82,7 @@
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { Multiselect } from '@nextcloud/vue'
+import { AppNavigation as AppNavigationVue, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
-
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
@@ -83,6 +93,8 @@ const canCreateState = loadState('deck', 'canCreate')
 export default {
 	name: 'AppNavigation',
 	components: {
+		AppNavigationVue,
+		AppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
 		Multiselect,

src/components/navigation/AppNavigationAddBoard.vue

@@ -20,38 +20,30 @@
   -
   -->
 <template>
-	<li id="deck-navigation-add"
+	<AppNavigationItem v-if="!editing"
 		:title="t('deck', 'Create new board')"
-		:class="[{'icon-loading-small': loading, 'editing': editing}, classes]">
+		icon="icon-add"
-		<a class="icon-add" href="#" @click.prevent.stop="startCreateBoard">
+		@click.prevent.stop="startCreateBoard" />
-			{{ t('deck', 'Create new board') }}
+	<div v-else class="board-create">
-		</a>
-
-		<!-- edit entry -->
-		<div v-if="editing" class="app-navigation-entry-edit">
 		<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</ColorPicker>
 		<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"
+			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
-					value=""
-					class="icon-close"
-					@click.stop.prevent="cancelEdit">
 		</form>
-
-			<!-- <ColorPicker v-model="color" /> -->
 	</div>
-	</li>
 </template>
 
 <script>
-import { ColorPicker } from '@nextcloud/vue'
+import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
+
+const randomColor = () => '#' + ((1 << 24) * Math.random() | 0).toString(16)
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { ColorPicker },
+	components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
 	directives: {},
 	props: {},
 	data() {
@@ -59,7 +51,7 @@ export default {
 			classes: [],
 			editing: false,
 			loading: false,
-			color: '#000000',
+			color: randomColor(),
 		}
 	},
 	computed: {},
@@ -76,27 +68,38 @@ export default {
 				color: this.color.substring(1),
 			})
 			this.editing = false
+			this.color = randomColor()
 		},
 		cancelEdit(e) {
 			this.editing = false
-			this.item.edit.reset(e)
+			this.color = randomColor()
 		},
 	},
 }
 </script>
 <style lang="scss" scoped>
-	#app-navigation .app-navigation-entry-edit div {
+	.board-create {
-		width: auto;
+		order: 1;
-		display: block;
+		display: flex;
+		height: 44px;
+
+		form {
+			display: flex;
+			flex-grow: 1;
+
+			input[type="text"] {
+				flex-grow: 1;
 			}
+		}
+	}
+
 	.app-navigation-entry-bullet-wrapper {
-		position: absolute;
+		width: 44px;
-		left: 33px;
-		width: 44px !important;
-		margin: 6px;
 		height: 44px;
 		.color0 {
 			width: 30px !important;
+			margin: 5px;
+			margin-left: 7px;
 			height: 30px;
 			border-radius: 50%;
 			background-size: 14px;

src/components/navigation/AppNavigationBoard.vue

@@ -20,75 +20,80 @@
   -
   -->
 <template>
-	<router-link :id="`board-${board.id}`"
+	<AppNavigationItem v-if="!editing"
-		:title="board.title"
+		:title="!deleted ? board.title : undoText"
-		:class="[{'icon-loading-small': loading, deleted: deleted, editing: editing }, classes]"
+		:loading="loading"
 		:to="routeTo"
-		tag="li">
+		:undo="deleted"
-		<div :style="{ backgroundColor: `#${board.color}` }" class="app-navigation-entry-bullet" />
+		@undo="unDelete">
-		<a href="#">
+		<AppNavigationIconBullet slot="icon" :color="board.color" />
-			{{ board.title }}
-		</a>
 
-		<div v-if="actions.length > 0" class="app-navigation-entry-utils">
+		<AppNavigationCounter v-if="board.acl.length"
-			<ul>
+			slot="counter"
-				<li class="app-navigation-entry-utils-menu-button">
-					<button v-if="board.acl.length === 0"
-						v-tooltip="t('deck', 'Share')"
 			class="icon-shared"
-						style="opacity: 0.3"
+			style="opacity: 0.5" />
-						@click="showSidebar" />
-					<button v-else
-						v-tooltip="t('deck', 'Share')"
-						class="icon-shared"
-						@click="showSidebar" />
-				</li>
-				<li class="app-navigation-entry-utils-menu-button">
-					<button v-click-outside="hideMenu" v-tooltip="t('deck', 'Options')" @click="showMenu" />
-				</li>
-			</ul>
-		</div>
-		<div :class="{ 'open': menuOpen }" class="app-navigation-entry-menu">
-			<PopoverMenu :menu="actions" />
-		</div>
 
-		<!-- undo action -->
+		<template v-if="!deleted" slot="actions">
-		<div v-if="deleted" class="app-navigation-entry-deleted">
+			<ActionButton v-if="canManage"
-			<div class="app-navigation-entry-deleted-description">
+				icon="icon-rename"
-				{{ undoText }}
+				:close-after-click="true"
-			</div>
+				@click="actionEdit">
-			<button
+				{{ t('deck', 'Edit board') }}
-				:title="t('settings', 'Undo')"
+			</ActionButton>
-				class="app-navigation-entry-deleted-button icon-history"
+			<ActionButton v-if="canManage"
-				@click="unDelete" />
+				icon="icon-clone"
-		</div>
+				:close-after-click="true"
-
+				@click="actionClone">
-		<!-- edit entry -->
+				{{ t('deck', 'Clone board ') }}
-		<div v-if="editing" class="app-navigation-entry-edit">
+			</ActionButton>
+			<ActionButton v-if="canManage && board.archived"
+				icon="icon-archive"
+				:close-after-click="true"
+				@click="actionUnarchive">
+				{{ t('deck', 'Unarchive board ') }}
+			</ActionButton>
+			<ActionButton v-if="canManage && !board.archived"
+				icon="icon-archive"
+				:close-after-click="true"
+				@click="actionArchive">
+				{{ t('deck', 'Archive board ') }}
+			</ActionButton>
+			<ActionButton v-if="canManage"
+				icon="icon-delete"
+				:close-after-click="true"
+				@click="actionDelete">
+				{{ t('deck', 'Delete board ') }}
+			</ActionButton>
+			<ActionButton icon="icon-more" :close-after-click="true" @click="actionDetails">
+				{{ t('deck', 'Board details') }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
+	<div v-else-if="editing" class="board-edit">
 		<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</ColorPicker>
 		<form @submit.prevent.stop="applyEdit">
 			<input v-model="editTitle" type="text" required>
 			<input type="submit" value="" class="icon-confirm">
-				<input type="submit"
+			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
-					value=""
-					class="icon-close"
-					@click.stop.prevent="cancelEdit">
 		</form>
 	</div>
-	</router-link>
 </template>
 
 <script>
-import { PopoverMenu, ColorPicker } from '@nextcloud/vue'
+import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 
 export default {
 	name: 'AppNavigationBoard',
 	components: {
+		AppNavigationIconBullet,
+		AppNavigationCounter,
+		AppNavigationItem,
 		ColorPicker,
-		PopoverMenu,
+		Actions,
+		ActionButton,
 	},
 	directives: {
 		ClickOutside,
@@ -119,8 +124,7 @@ export default {
 			return this.board.color
 		},
 		undoText: function() {
-			// todo translation
+			return t('deck', 'Board {0} deleted', [this.board.title])
-			return 'deleted ' + this.board.title
 		},
 		routeTo: function() {
 			return {
@@ -128,117 +132,8 @@ export default {
 				params: { id: this.board.id },
 			}
 		},
-		actions: function() {
+		canManage() {
-			/* eslint-disable vue/no-side-effects-in-computed-properties */
+			return this.board.permissions.PERMISSION_MANAGE
-			/* eslint-disable vue/no-async-in-computed-properties */
-			const actions = []
-
-			// do not show actions while the item is loading
-			if (this.loading === false) {
-				const canManage = this.board.permissions.PERMISSION_MANAGE
-
-				if (canManage) {
-					actions.push({
-						action: () => {
-							this.hideMenu()
-							this.editTitle = this.board.title
-							this.editColor = '#' + this.board.color
-							this.editing = true
-						},
-						icon: 'icon-rename',
-						text: t('deck', 'Edit board'),
-					})
-				}
-				if (canManage) {
-
-					actions.push({
-						action: async() => {
-							this.hideMenu()
-							this.loading = true
-							try {
-								const newBoard = await this.$store.dispatch('cloneBoard', this.board)
-								this.loading = false
-								const route = this.routeTo
-								route.params.id = newBoard.id
-								this.$router.push(route)
-							} catch (e) {
-								OC.Notification.showTemporary(t('deck', 'An error occurred'))
-								console.error(e)
-							}
-						},
-						icon: 'icon-clone',
-						text: t('deck', 'Clone board'),
-					})
-
-					if (!this.board.archived) {
-						actions.push({
-							action: () => {
-								this.hideMenu()
-								this.loading = true
-								this.$store.dispatch('archiveBoard', this.board)
-							},
-							icon: 'icon-archive',
-							text: t('deck', 'Archive board'),
-						})
-					} else {
-						actions.push({
-							action: () => {
-								this.hideMenu()
-								this.loading = true
-								this.$store.dispatch('unarchiveBoard', this.board)
-							},
-							icon: 'icon-archive',
-							text: t('deck', 'Unarchive board'),
-						})
-					}
-
-					actions.push({
-						action: () => {
-							OC.dialogs.confirmDestructive(
-								t('deck', 'Are you sure you want to delete the board {title}? This will delete all the data of this board.', { title: this.board.title }),
-								t('deck', 'Delete the board?'),
-								{
-									type: OC.dialogs.YES_NO_BUTTONS,
-									confirm: t('deck', 'Delete'),
-									confirmClasses: 'error',
-									cancel: t('deck', 'Cancel'),
-								},
-								(result) => {
-									if (result) {
-										this.hideMenu()
-										this.loading = true
-										this.boardApi.deleteBoard(this.board)
-											.then(() => {
-												this.loading = false
-												this.deleted = true
-												this.undoTimeoutHandle = setTimeout(() => {
-													this.$store.dispatch('removeBoard', this.board)
-												}, 7000)
-											})
-									}
-								},
-								true
-							)
-
-						},
-						icon: 'icon-delete',
-						text: t('deck', 'Delete board'),
-					})
-				}
-
-				actions.push({
-					action: () => {
-						const route = this.routeTo
-						route.name = 'board.details'
-						this.$router.push(route)
-					},
-					icon: 'icon-settings-dark',
-					text: t('deck', 'Board details'),
-				})
-
-			}
-
-			return actions
 		},
 	},
 	watch: {},
@@ -254,15 +149,66 @@ export default {
 					this.deleted = false
 				})
 		},
-		showMenu() {
-			this.menuOpen = true
-		},
-		hideMenu() {
-			this.menuOpen = false
-		},
 		updateColor(newColor) {
 			this.editColor = newColor
 		},
+		actionEdit() {
+			this.editTitle = this.board.title
+			this.editColor = '#' + this.board.color
+			this.editing = true
+		},
+		async actionClone() {
+			this.loading = true
+			try {
+				const newBoard = await this.$store.dispatch('cloneBoard', this.board)
+				this.loading = false
+				const route = this.routeTo
+				route.params.id = newBoard.id
+				this.$router.push(route)
+			} catch (e) {
+				OC.Notification.showTemporary(t('deck', 'An error occurred'))
+				console.error(e)
+			}
+		},
+		actionArchive() {
+			this.loading = true
+			this.$store.dispatch('archiveBoard', this.board)
+		},
+		actionUnarchive() {
+			this.loading = true
+			this.$store.dispatch('unarchiveBoard', this.board)
+		},
+		actionDelete() {
+			OC.dialogs.confirmDestructive(
+				t('deck', 'Are you sure you want to delete the board {title}? This will delete all the data of this board.', { title: this.board.title }),
+				t('deck', 'Delete the board?'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('deck', 'Delete'),
+					confirmClasses: 'error',
+					cancel: t('deck', 'Cancel'),
+				},
+				(result) => {
+					if (result) {
+						this.loading = true
+						this.boardApi.deleteBoard(this.board)
+							.then(() => {
+								this.loading = false
+								this.deleted = true
+								this.undoTimeoutHandle = setTimeout(() => {
+									this.$store.dispatch('removeBoard', this.board)
+								}, 7000)
+							})
+					}
+				},
+				true
+			)
+		},
+		actionDetails() {
+			const route = this.routeTo
+			route.name = 'board.details'
+			this.$router.push(route)
+		},
 		applyEdit(e) {
 			this.editing = false
 			if (this.editTitle || this.editColor) {
@@ -292,17 +238,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	#app-navigation #deck-navigation .editing {
+	.board-edit {
-		height: auto !important;
+		margin-left: 44px;
+		order: 1;
+		display: flex;
+		height: 44px;
+
+		form {
+			display: flex;
+			flex-grow: 1;
+
+			input[type="text"] {
+				flex-grow: 1;
 			}
+		}
+	}
+
 	.app-navigation-entry-bullet-wrapper {
-		position: absolute;
+		width: 44px;
-		left: 33px;
-		width: 44px !important;
-		margin: 6px;
 		height: 44px;
 		.color0 {
 			width: 30px !important;
+			margin: 5px;
+			margin-left: 7px;
 			height: 30px;
 			border-radius: 50%;
 			background-size: 14px;

src/components/navigation/AppNavigationBoardCategory.vue

@@ -20,33 +20,31 @@
   -
   -->
 <template>
-	<li v-if="boards.length > 0"
+	<AppNavigationItem v-if="boards.length > 0"
-		:id="id"
 		:title="text"
-		:class="{'open': opened, 'collapsible': collapsible }">
+		:icon="icon"
-		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
+		:to="to"
-		<a :class="icon" href="#">
+		:allow-collapse="collapsible"
-			{{ text }}
+		:open="opened">
-		</a>
-		<ul v-if="boards.length > 0">
 		<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
-		</ul>
+	</AppNavigationItem>
-	</li>
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside'
 import AppNavigationBoard from './AppNavigationBoard'
+import { AppNavigationItem } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
+		AppNavigationItem,
 		AppNavigationBoard,
 	},
-	directives: {
-		ClickOutside,
-	},
 	props: {
+		to: {
+			type: String,
+			default: '',
+		},
 		id: {
 			type: String,
 			required: true,
@@ -92,11 +90,5 @@ export default {
 			}
 		},
 	},
-	mounted() {},
-	methods: {
-		toggleCollapse() {
-			this.opened = !this.opened
-		},
-	},
 }
 </script>