Fix board filter and limit acl list

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

src/components/boards/BoardItem.vue

@@ -25,13 +25,14 @@
 		:title="board.title"
 		:to="routeTo" class="board-list-row" tag="div">
 		<div class="board-list-bullet-cell">
-			<div :style="{ 'background-color': board.bullet }" class="board-list-bullet" />
+			<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
 		</div>
-		<div class="board-list-title-cell">{{ board.text }}</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 board.board.acl" :key="user.id" :user="user.participant.uid"
+			<avatar v-for="user in limitedAcl" :key="user.id" :user="user.participant.uid"
 				class="board-list-avatar" />
+			<div v-tooltip="otherAcl" v-if="board.acl.length > 5" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
 		</div>
 		<div class="board-list-actions-cell" />
 	</router-link>
@@ -57,6 +58,12 @@ export default {
 				name: 'board',
 				params: { id: this.board.id }
 			}
+		},
+		limitedAcl() {
+			return [...this.board.acl].splice(0, 5)
+		},
+		otherAcl() {
+			return [...this.board.acl].splice(6).map((item) => item.participant.displayname || item.participant).join(', ')
 		}
 	}
 }
@@ -87,6 +94,10 @@ export default {
 			border-radius: 50%;
 			height: 32px;
 			width: 32px;
+			margin-left: 3px;
+			&.icon-more {
+				background-color:var(--color-background-dark);
+			}
 		}
 	}
 

src/helpers/boardToMenuItem.js

@@ -1,88 +0,0 @@
-/*
- * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @author Michael Weimann <mail@michael-weimann.eu>
- *
- * @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/>.
- *
- */
-
-import store from './../store/main'
-
-function boardActions(item, board) {
-	const actions = [{
-		action: () => {
-		},
-		icon: 'icon-edit',
-		text: t('deck', 'Edit board')
-	}]
-
-	if (!board.archived) {
-		actions.push({
-			action: function() {
-				store.dispatch('archiveBoard', board)
-			},
-			icon: 'icon-archive',
-			text: t('deck', 'Archive board')
-		})
-	}
-
-	actions.push({
-		action: () => {
-			item.loading = true
-			item.utils.actions = []
-			item.menuOpened = false
-		},
-		icon: 'icon-delete',
-		text: t('deck', 'Delete board')
-	})
-
-	actions.push({
-		action: () => {
-		},
-		icon: 'icon-settings',
-		text: t('deck', 'Board details')
-	})
-
-	return actions
-}
-
-/**
- * Maps an API board to a menu item.
- * @param board
- * @returns {{id: *, classes: Array, bullet: string, text: *, router: {name: string, params: {id: *}}, utils: {actions: *[]}}}
- */
-export const boardToMenuItem = board => {
-
-	const item = {
-		id: board.id,
-		key: board.id,
-		classes: [],
-		bullet: `#${board.color}`,
-		text: board.title,
-		owner: board.owner,
-		router: {
-			name: 'board',
-			params: { id: board.id }
-		},
-		utils: {},
-		board: board
-	}
-
-	item.utils.actions = boardActions(item, board)
-
-	return item
-}

src/store/main.js

@@ -23,7 +23,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'nextcloud-axios'
-import { boardToMenuItem } from './../helpers/boardToMenuItem'
 import { BoardApi } from './../services/BoardApi'
 import stack from './stack'
 import card from './card'
@@ -86,7 +85,7 @@ export default new Vuex.Store({
 					|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
 					|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
 			})
-			return boards.map(boardToMenuItem)
+			return boards
 		},
 		currentBoardLabels: state => {
 			return state.currentBoard.labels