show the images

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

lib/Migration/Version010400Date20210305.php

@@ -9,19 +9,20 @@ use OCP\DB\ISchemaWrapper;
 use OCP\Migration\IOutput;
 use OCP\Migration\SimpleMigrationStep;
 
-class Version10400Date20210305 extends 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('coverImages')) {
-			$table->addColumn('coverImages', 'boolean', [
+		if (!$table->hasColumn('cover_images')) {
+			$table->addColumn('cover_images', 'boolean', [
 				'notnull' => false,
 				'default' => true,
 			]);
+			return $schema;
 		}
-		return $schema;
+		return null;
 	}
 }

src/components/cards/CardItem.vue

@@ -37,6 +37,11 @@
 			<div class="card-upper">
 				<h3 v-if="compactMode || isArchived || showArchived || !canEdit || standalone">
 					{{ attachments }}
+			<div class="imageCover">
+				<a class="fileicon" :style="mimetypeForAttachment(attachments[0])" />
+			</div>
+			<div class="card-upper">
+				<h3 v-if="compactMode || isArchived || showArchived || !canEdit">
 					{{ card.title }}
 				</h3>
 				<h3 v-else-if="!editing">
@@ -86,6 +91,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',
@@ -131,7 +137,7 @@ export default {
 			return this.$store.getters.stackById(this?.card?.stackId)
 		},
 		attachments() {
-			return [...this.$store.getters.attachmentsByCard(this.currentCard.id)].filter(attachment => attachment.deletedAt >= 0)
+			return [...this.$store.getters.attachmentsByCard(this.id)].filter(attachment => attachment.deletedAt >= 0)
 		},
 		canEdit() {
 			if (this.currentBoard) {
@@ -149,6 +155,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) {
@@ -209,6 +230,17 @@ export default {
 			box-shadow: 0 0 5px 1px var(--color-box-shadow);
 		}
 
+		.fileicon {
+			display: flex;
+			width: 260px;
+			height: 260px;
+			background-size: contain;
+			background-repeat: no-repeat;
+			margin-left: auto;
+			margin-right: auto;
+			border-radius: var(--border-radius-large);
+		}
+
 		.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
@@ -114,7 +113,7 @@
 			<ActionCheckbox v-if="canManage"
 				:checked="board.coverImages"
 				@change="actionToggleCoverImages">
-				{{ t('deck', 'Show cover images') }}
+				{{ t('deck', 'Show cover images') }} {{ board.coverImages }}
 			</ActionCheckbox>
 			<ActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"

src/store/main.js

@@ -311,8 +311,12 @@ export default new Vuex.Store({
 				Vue.delete(state.currentBoard.acl, removeIndex)
 			}
 		},
-		toggleCoverImages(state) {
-			state.coverImages = !state.coverImages
+		toggleCoverImages(state, board) {
+			let currentBoard = state.boards.filter((b) => {
+				return board.id === b.id
+			})
+			currentBoard = currentBoard[0]
+			Vue.set(currentBoard, 'coverImages', board.coverImages)
 		},
 
 	},