styling, some fixes

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

lib/Controller/BoardController.php

@@ -73,10 +73,11 @@ class BoardController extends ApiController {
 	 * @param $title
 	 * @param $color
 	 * @param $archived
+	 * @param $coverImages
 	 * @return \OCP\AppFramework\Db\Entity
 	 */
-	public function update($id, $title, $color, $archived) {
-		return $this->boardService->update($id, $title, $color, $archived);
+	public function update($id, $title, $color, $archived, $coverImages) {
+		return $this->boardService->update($id, $title, $color, $archived, $coverImages);
 	}
 
 	/**

lib/Db/Board.php

@@ -38,6 +38,7 @@ class Board extends RelationalEntity {
 	protected $stacks = [];
 	protected $deletedAt = 0;
 	protected $lastModified = 0;
+	protected $coverImages = true;
 
 	protected $settings = [];
 
@@ -47,6 +48,7 @@ class Board extends RelationalEntity {
 		$this->addType('archived', 'boolean');
 		$this->addType('deletedAt', 'integer');
 		$this->addType('lastModified', 'integer');
+		$this->addType('coverImages', 'boolean');
 		$this->addRelation('labels');
 		$this->addRelation('acl');
 		$this->addRelation('shared');

lib/Db/BoardMapper.php

@@ -79,18 +79,10 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws DoesNotExistException
 	 */
-	public function find($id, $withLabels = false, $withAcl = false): Board {
-		if (!isset($this->boardCache[$id])) {
-			$qb = $this->db->getQueryBuilder();
-			$qb->select('*')
-				->from('deck_boards')
-				->where($qb->expr()->eq('id', $qb->createNamedParameter($id, IQueryBuilder::PARAM_INT)))
-				->orderBy('id');
-			$this->boardCache[$id] = $this->findEntity($qb);
-		}
-
-		// FIXME is this necessary? it was NOT done with the old mapper
-		// $this->mapOwner($board);
+	public function find($id, $withLabels = false, $withAcl = false) {
+		$sql = 'SELECT id, title, owner, color, archived, deleted_at, last_modified, cover_images FROM `*PREFIX*deck_boards` ' .
+			'WHERE `id` = ?';
+		$board = $this->findEntity($sql, [$id]);
 
 		// Add labels
 		if ($withLabels && $this->boardCache[$id]->getLabels() === null) {
@@ -137,16 +129,9 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 	 * @param null $offset
 	 * @return array
 	 */
-	public function findAllByUser(string $userId, ?int $limit = null, ?int $offset = null, ?int $since = null,
-								  bool $includeArchived = true, ?int $before = null, ?string $term = null) {
-		// FIXME this used to be a UNION to get boards owned by $userId and the user shares in one single query
-		// Is it possible with the query builder?
-		$qb = $this->db->getQueryBuilder();
-		$qb->select('id', 'title', 'owner', 'color', 'archived', 'deleted_at', 'last_modified')
-			// this does not work in MySQL/PostgreSQL
-			//->selectAlias('0', 'shared')
-			->from('deck_boards', 'b')
-			->where($qb->expr()->eq('owner', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)));
+	public function findAllByUser($userId, $limit = null, $offset = null, $since = -1, $includeArchived = true) {
+		// FIXME: One moving to QBMapper we should allow filtering the boards probably by method chaining for additional where clauses
+		$sql = 'SELECT id, title, owner, color, archived, deleted_at, 0 as shared, last_modified, cover_images FROM `*PREFIX*deck_boards` WHERE owner = ? AND last_modified > ?';
 		if (!$includeArchived) {
 			$qb->andWhere($qb->expr()->eq('archived', $qb->createNamedParameter(false, IQueryBuilder::PARAM_BOOL)))
 				->andWhere($qb->expr()->eq('deleted_at', $qb->createNamedParameter(0, IQueryBuilder::PARAM_INT)));
@@ -157,38 +142,9 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 		if ($before !== null) {
 			$qb->andWhere($qb->expr()->lt('last_modified', $qb->createNamedParameter($before, IQueryBuilder::PARAM_INT)));
 		}
-		if ($term !== null) {
-			$qb->andWhere(
-				$qb->expr()->iLike(
-					'title',
-					$qb->createNamedParameter(
-						'%' . $this->db->escapeLikeParameter($term) . '%',
-						IQueryBuilder::PARAM_STR
-					)
-				)
-			);
-		}
-		$qb->orderBy('b.id');
-		if ($limit !== null) {
-			$qb->setMaxResults($limit);
-		}
-		if ($offset !== null) {
-			$qb->setFirstResult($offset);
-		}
-		$entries = $this->findEntities($qb);
-		foreach ($entries as $entry) {
-			$entry->setShared(0);
-		}
-
-		// shared with user
-		$qb->resetQueryParts();
-		$qb->select('b.id', 'title', 'owner', 'color', 'archived', 'deleted_at', 'last_modified')
-			//->selectAlias('1', 'shared')
-			->from('deck_boards', 'b')
-			->innerJoin('b', 'deck_board_acl', 'acl', $qb->expr()->eq('b.id', 'acl.board_id'))
-			->where($qb->expr()->eq('acl.participant', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)))
-			->andWhere($qb->expr()->eq('acl.type', $qb->createNamedParameter(Acl::PERMISSION_TYPE_USER, IQueryBuilder::PARAM_INT)))
-			->andWhere($qb->expr()->neq('b.owner', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)));
+		$sql .= ' UNION ' .
+			'SELECT boards.id, title, owner, color, archived, deleted_at, 1 as shared, last_modified, cover_images FROM `*PREFIX*deck_boards` as boards ' .
+			'JOIN `*PREFIX*deck_board_acl` as acl ON boards.id=acl.board_id WHERE acl.participant=? AND acl.type=? AND boards.owner != ? AND last_modified > ?';
 		if (!$includeArchived) {
 			$qb->andWhere($qb->expr()->eq('archived', $qb->createNamedParameter(false, IQueryBuilder::PARAM_BOOL)))
 				->andWhere($qb->expr()->eq('deleted_at', $qb->createNamedParameter(0, IQueryBuilder::PARAM_INT)));
@@ -259,14 +215,8 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 		if (count($groups) <= 0) {
 			return [];
 		}
-		$qb = $this->db->getQueryBuilder();
-		$qb->select('b.id', 'title', 'owner', 'color', 'archived', 'deleted_at', 'last_modified')
-			//->selectAlias('2', 'shared')
-			->from('deck_boards', 'b')
-			->innerJoin('b', 'deck_board_acl', 'acl', $qb->expr()->eq('b.id', 'acl.board_id'))
-			->where($qb->expr()->eq('acl.type', $qb->createNamedParameter(Acl::PERMISSION_TYPE_GROUP, IQueryBuilder::PARAM_INT)))
-			->andWhere($qb->expr()->neq('b.owner', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)));
-		$or = $qb->expr()->orx();
+		$sql = 'SELECT boards.id, title, owner, color, archived, deleted_at, 2 as shared, last_modified, cover_images FROM `*PREFIX*deck_boards` as boards ' .
+			'INNER JOIN `*PREFIX*deck_board_acl` as acl ON boards.id=acl.board_id WHERE owner != ? AND type=? AND (';
 		for ($i = 0, $iMax = count($groups); $i < $iMax; $i++) {
 			$or->add(
 				$qb->expr()->eq('acl.participant', $qb->createNamedParameter($groups[$i], IQueryBuilder::PARAM_STR))
@@ -325,14 +275,8 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 			return [];
 		}
 
-		$qb = $this->db->getQueryBuilder();
-		$qb->select('b.id', 'title', 'owner', 'color', 'archived', 'deleted_at', 'last_modified')
-			//->selectAlias('2', 'shared')
-			->from('deck_boards', 'b')
-			->innerJoin('b', 'deck_board_acl', 'acl', $qb->expr()->eq('b.id', 'acl.board_id'))
-			->where($qb->expr()->eq('acl.type', $qb->createNamedParameter(Acl::PERMISSION_TYPE_CIRCLE, IQueryBuilder::PARAM_INT)))
-			->andWhere($qb->expr()->neq('b.owner', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)));
-		$or = $qb->expr()->orx();
+		$sql = 'SELECT boards.id, title, owner, color, archived, deleted_at, 2 as shared, last_modified, cover_images FROM `*PREFIX*deck_boards` as boards ' .
+			'INNER JOIN `*PREFIX*deck_board_acl` as acl ON boards.id=acl.board_id WHERE owner != ? AND type=? AND (';
 		for ($i = 0, $iMax = count($circles); $i < $iMax; $i++) {
 			$or->add(
 				$qb->expr()->eq('acl.participant', $qb->createNamedParameter($circles[$i], IQueryBuilder::PARAM_STR))
@@ -389,12 +333,9 @@ class BoardMapper extends QBMapper implements IPermissionMapper {
 	public function findToDelete() {
 		// add buffer of 5 min
 		$timeLimit = time() - (60 * 5);
-		$qb = $this->db->getQueryBuilder();
-		$qb->select('id', 'title', 'owner', 'color', 'archived', 'deleted_at', 'last_modified')
-			->from('deck_boards')
-			->where($qb->expr()->gt('deleted_at', $qb->createNamedParameter(0, IQueryBuilder::PARAM_INT)))
-			->andWhere($qb->expr()->lt('deleted_at', $qb->createNamedParameter($timeLimit, IQueryBuilder::PARAM_INT)));
-		return $this->findEntities($qb);
+		$sql = 'SELECT id, title, owner, color, archived, deleted_at, last_modified, cover_images FROM `*PREFIX*deck_boards` ' .
+			'WHERE `deleted_at` > 0 AND `deleted_at` < ?';
+		return $this->findEntities($sql, [$timeLimit]);
 	}
 
 	public function delete(/** @noinspection PhpUnnecessaryFullyQualifiedNameInspection */

lib/Migration/Version010400Date20210305.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OCA\Deck\Migration;
+
+use Closure;
+use OCP\DB\ISchemaWrapper;
+use OCP\Migration\IOutput;
+use OCP\Migration\SimpleMigrationStep;
+
+class Version010400Date20210305 extends SimpleMigrationStep {
+	public function changeSchema(IOutput $output, Closure $schemaClosure, array $options): ?ISchemaWrapper {
+		/** @var ISchemaWrapper $schema */
+		$schema = $schemaClosure();
+
+		// Add cover image database field
+		$table = $schema->getTable('deck_boards');
+		if (!$table->hasColumn('cover_images')) {
+			$table->addColumn('cover_images', 'boolean', [
+				'notnull' => false,
+				'default' => true,
+			]);
+			return $schema;
+		}
+		return null;
+	}
+}

lib/Service/BoardService.php

@@ -408,13 +408,14 @@ class BoardService {
 	 * @param $title
 	 * @param $color
 	 * @param $archived
+	 * @param $coverImages
 	 * @return \OCP\AppFramework\Db\Entity
 	 * @throws DoesNotExistException
 	 * @throws \OCA\Deck\NoPermissionException
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws BadRequestException
 	 */
-	public function update($id, $title, $color, $archived) {
+	public function update($id, $title, $color, $archived, $coverImages) {
 		if (is_numeric($id) === false) {
 			throw new BadRequestException('board id must be a number');
 		}
@@ -431,12 +432,17 @@ class BoardService {
 			throw new BadRequestException('archived must be a boolean');
 		}
 
+		if (is_bool($coverImages) === false) {
+			throw new BadRequestException('coverImages must be a boolean');
+		}
+
 		$this->permissionService->checkPermission($this->boardMapper, $id, Acl::PERMISSION_MANAGE);
 		$board = $this->find($id);
 		$changes = new ChangeSet($board);
 		$board->setTitle($title);
 		$board->setColor($color);
 		$board->setArchived($archived);
+		$board->setCoverImages($coverImages);
 		$changes->setAfter($board);
 		$this->boardMapper->update($board); // operate on clone so we can check for updated fields
 		$this->boardMapper->mapOwner($board);

src/components/cards/CardItem.vue

@@ -35,7 +35,14 @@
 				{{ board.title }} » {{ stack.title }}
 			</div>
 			<div class="card-upper">
-				<h3 v-if="compactMode || isArchived || showArchived || !canEdit || standalone">
+				<div v-if="currentBoard.coverImages && images.length" class="imageCover">
+					<div class="imageCard" :style="mimetypeForAttachment(images[0])">
+						<div v-if="loading" class="emptycontent">
+							<div class="icon icon-loading" />
+						</div>
+					</div>
+				</div>
+				<h3 v-if="compactMode || isArchived || showArchived || !canEdit">
 					{{ card.title }}
 				</h3>
 				<h3 v-else-if="!editing">
@@ -85,6 +92,7 @@ import labelStyle from '../../mixins/labelStyle'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import CardMenu from './CardMenu'
 import DueDate from './badges/DueDate'
+import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'CardItem',
@@ -111,8 +119,13 @@ export default {
 		return {
 			editing: false,
 			copiedCard: null,
+			images: null,
+			loading: false,
 		}
 	},
+	mounted() {
+		this.loadImages()
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -121,6 +134,7 @@ export default {
 		}),
 		...mapGetters([
 			'isArchived',
+
 		]),
 		board() {
 			return this.$store.getters.boardById(this?.stack?.boardId)
@@ -144,6 +158,21 @@ export default {
 		labelsSorted() {
 			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
+		mimetypeForAttachment() {
+			return (attachment) => {
+				if (!attachment) {
+					return {}
+				}
+				const url = attachment.extendedData.hasPreview ? this.attachmentPreview(attachment) : OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentPreview() {
+			return (attachment) => (attachment.extendedData.fileid ? generateUrl(`/core/preview?fileId=${attachment.extendedData.fileid}&x=260&y=260&a=true`) : null)
+		},
 	},
 	watch: {
 		currentCard(newValue) {
@@ -173,6 +202,12 @@ export default {
 		applyLabelFilter(label) {
 			this.$nextTick(() => this.$store.dispatch('toggleFilter', { tags: [label.id] }))
 		},
+		async loadImages() {
+			this.loading = true
+			await this.$store.dispatch('fetchAttachments', this.id)
+			this.loading = false
+			this.images = [...this.$store.getters.attachmentsByCard(this.id)].filter(attachment => attachment.deletedAt >= 0).sort((a, b) => b.id - a.id)
+		},
 	},
 }
 </script>
@@ -203,7 +238,12 @@ export default {
 		&.current-card {
 			box-shadow: 0 0 5px 1px var(--color-box-shadow);
 		}
-
+		.imageCard {
+			width: 272px;
+			height: 250px;
+			background-size: cover;
+			border-radius: var(--border-radius-large) var(--border-radius-large) 0 0 ;
+		}
 		.card-upper {
 			display: flex;
 			min-height: 44px;

src/components/navigation/AppNavigationBoard.vue

@@ -32,7 +32,6 @@
 			slot="counter"
 			class="icon-shared"
 			style="opacity: 0.5" />
-
 		<template v-if="!deleted" slot="actions">
 			<template v-if="!isDueSubmenuActive">
 				<ActionButton
@@ -111,7 +110,11 @@
 				@click="isDueSubmenuActive=true">
 				{{ dueDateReminderText }}
 			</ActionButton>
-
+			<ActionCheckbox v-if="canManage"
+				:checked="board.coverImages"
+				@change="actionToggleCoverImages">
+				{{ t('deck', 'Show cover images') }}
+			</ActionCheckbox>
 			<ActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"
 				:close-after-click="true"
@@ -136,7 +139,7 @@
 </template>
 
 <script>
-import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 
 export default {
@@ -148,6 +151,7 @@ export default {
 		ColorPicker,
 		Actions,
 		ActionButton,
+		ActionCheckbox,
 	},
 	directives: {
 		ClickOutside,
@@ -308,6 +312,9 @@ export default {
 			this.isDueSubmenuActive = false
 			this.updateDueSetting = null
 		},
+		actionToggleCoverImages() {
+			this.$store.dispatch('toggleCoverImages', this.board)
+		},
 	},
 }
 </script>

src/store/main.js

@@ -311,6 +311,13 @@ export default new Vuex.Store({
 				Vue.delete(state.currentBoard.acl, removeIndex)
 			}
 		},
+		toggleCoverImages(state, board) {
+			let currentBoard = state.boards.filter((b) => {
+				return board.id === b.id
+			})
+			currentBoard = currentBoard[0]
+			Vue.set(currentBoard, 'coverImages', board.coverImages)
+		},
 
 	},
 	actions: {
@@ -497,5 +504,13 @@ export default new Vuex.Store({
 					dispatch('loadBoardById', acl.boardId)
 				})
 		},
+		toggleCoverImages({ commit }, board) {
+			const boardCopy = JSON.parse(JSON.stringify(board))
+			boardCopy.coverImages = !boardCopy.coverImages
+			apiClient.updateBoard(boardCopy)
+				.then((board) => {
+					commit('toggleCoverImages', board)
+				})
+		},
 	},
 })