From 1cd5f2f4962d4a8d06ed1fff3e745b8d8cf8a690 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 4 Aug 2023 07:25:45 +0200
Subject: [PATCH] feat: create new card from smart picker

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 lib/AppInfo/Application.php                   |   3 +
 lib/Controller/CardApiController.php          |  11 +-
 lib/Controller/CardController.php             |  14 +-
 lib/Reference/CreateCardReferenceProvider.php |  78 ++++
 src/CardCreateDialog.vue                      | 227 +----------
 src/components/AttachmentDragAndDrop.vue      |   7 +-
 src/components/Controls.vue                   |  11 +-
 src/components/card/AssignmentSelector.vue    | 132 +++++++
 src/components/card/AttachmentList.vue        |   2 +-
 src/components/card/CardSidebarTabDetails.vue | 250 ++-----------
 src/components/card/Description.vue           |  29 +-
 src/components/card/DueDateSelector.vue       | 134 +++++++
 src/components/card/TagSelector.vue           | 110 ++++++
 src/init-reference.js                         |  23 +-
 src/views/CreateNewCardCustomPicker.vue       | 354 ++++++++++++++++++
 src/views/Dashboard.vue                       |  11 +-
 16 files changed, 927 insertions(+), 469 deletions(-)
 create mode 100644 lib/Reference/CreateCardReferenceProvider.php
 create mode 100644 src/components/card/AssignmentSelector.vue
 create mode 100644 src/components/card/DueDateSelector.vue
 create mode 100644 src/components/card/TagSelector.vue
 create mode 100644 src/views/CreateNewCardCustomPicker.vue

diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 477f96f51..106856eb5 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -54,6 +54,7 @@ use OCA\Deck\Notification\Notifier;
 use OCA\Deck\Reference\BoardReferenceProvider;
 use OCA\Deck\Reference\CardReferenceProvider;
 use OCA\Deck\Reference\CommentReferenceProvider;
+use OCA\Deck\Reference\CreateCardReferenceProvider;
 use OCA\Deck\Search\CardCommentProvider;
 use OCA\Deck\Search\DeckProvider;
 use OCA\Deck\Service\PermissionService;
@@ -129,6 +130,8 @@ class Application extends App implements IBootstrap {
 		$context->registerSearchProvider(CardCommentProvider::class);
 		$context->registerDashboardWidget(DeckWidget::class);
 
+		$context->registerReferenceProvider(CreateCardReferenceProvider::class);
+
 		// reference widget
 		$context->registerReferenceProvider(CardReferenceProvider::class);
 		$context->registerReferenceProvider(BoardReferenceProvider::class);
diff --git a/lib/Controller/CardApiController.php b/lib/Controller/CardApiController.php
index 1c9e87a18..443ad3719 100644
--- a/lib/Controller/CardApiController.php
+++ b/lib/Controller/CardApiController.php
@@ -81,8 +81,17 @@ class CardApiController extends ApiController {
 	 *
 	 * Get a specific card.
 	 */
-	public function create($title, $type = 'plain', $order = 999, $description = '', $duedate = null) {
+	public function create($title, $type = 'plain', $order = 999, $description = '', $duedate = null, $labels = [], $users = []) {
 		$card = $this->cardService->create($title, $this->request->getParam('stackId'), $type, $order, $this->userId, $description, $duedate);
+
+		foreach ($labels as $labelId) {
+			$this->cardService->assignLabel($card->id, $labelId);
+		}
+
+		foreach ($users as $user) {
+			$this->assignmentService->assignUser($card->id, $user['id'], $user['type']);
+		}
+
 		return new DataResponse($card, HTTP::STATUS_OK);
 	}
 
diff --git a/lib/Controller/CardController.php b/lib/Controller/CardController.php
index b6f6e6958..d86ac5f93 100644
--- a/lib/Controller/CardController.php
+++ b/lib/Controller/CardController.php
@@ -78,8 +78,18 @@ class CardController extends Controller {
 	 * @param int $order
 	 * @return \OCP\AppFramework\Db\Entity
 	 */
-	public function create($title, $stackId, $type = 'plain', $order = 999, string $description = '') {
-		return $this->cardService->create($title, $stackId, $type, $order, $this->userId, $description);
+	public function create($title, $stackId, $type = 'plain', $order = 999, string $description = '', $duedate = null, $labels = [], $users = []) {
+		$card = $this->cardService->create($title, $stackId, $type, $order, $this->userId, $description, $duedate);
+
+		foreach ($labels as $label) {
+			$this->assignLabel($card->id, $label);
+		}
+
+		foreach ($users as $user) {
+			$this->assignmentService->assignUser($card->id, $user['id'], $user['type']);
+		}
+
+		return $card;
 	}
 
 	/**
diff --git a/lib/Reference/CreateCardReferenceProvider.php b/lib/Reference/CreateCardReferenceProvider.php
new file mode 100644
index 000000000..5afaa555d
--- /dev/null
+++ b/lib/Reference/CreateCardReferenceProvider.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace OCA\Deck\Reference;
+
+use OCA\Deck\AppInfo\Application;
+use OCP\Collaboration\Reference\ADiscoverableReferenceProvider;
+use OCP\Collaboration\Reference\IReference;
+use OCP\IL10N;
+
+use OCP\IURLGenerator;
+
+class CreateCardReferenceProvider extends ADiscoverableReferenceProvider {
+
+	public function __construct(
+		private IL10N $l10n,
+		private IURLGenerator $urlGenerator,
+		private ?string $userId) {
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getId(): string {
+		return 'create-new-deck-card';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTitle(): string {
+		return $this->l10n->t('Create a new deck card');
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getOrder(): int {
+		return 10;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getIconUrl(): string {
+		return $this->urlGenerator->getAbsoluteURL(
+			$this->urlGenerator->imagePath(Application::APP_ID, 'deck-dark.svg')
+		);
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function matchReference(string $referenceText): bool {
+		return false;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function resolveReference(string $referenceText): ?IReference {
+		return null;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getCachePrefix(string $referenceId): string {
+		return $this->userId ?? '';
+	}
+
+	/**
+	 * We don't use the userId here but rather a reference unique id
+	 * @inheritDoc
+	 */
+	public function getCacheKey(string $referenceId): ?string {
+		return $referenceId;
+	}
+}
diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 604640a6f..e3241f6c6 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -22,101 +22,23 @@
 
 <template>
 	<NcModal class="card-selector" @close="close">
-		<div class="modal-scroller">
-			<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
-				<h3>{{ t('deck', 'Create a new card') }}</h3>
-				<NcMultiselect v-model="selectedBoard"
-					:placeholder="t('deck', 'Select a board')"
-					:options="boards"
-					:disabled="loading"
-					label="title"
-					class="multiselect-board"
-					@select="fetchCardsFromBoard">
-					<template slot="singleLabel" slot-scope="props">
-						<span>
-							<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-							<span>{{ props.option.title }}</span>
-						</span>
-					</template>
-					<template slot="option" slot-scope="props">
-						<span>
-							<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-							<span>{{ props.option.title }}</span>
-						</span>
-					</template>
-				</NcMultiselect>
-
-				<NcMultiselect v-model="selectedStack"
-					:placeholder="t('deck', 'Select a list')"
-					:options="stacksFromBoard"
-					:max-height="100"
-					:disabled="loading || !selectedBoard"
-					class="multiselect-list"
-					label="title" />
-
-				<input v-model="pendingTitle"
-					type="text"
-					:placeholder="t('deck', 'Card title')"
-					:disabled="loading || !selectedStack">
-				<textarea v-model="pendingDescription" :disabled="loading || !selectedStack" />
-				<div class="modal-buttons">
-					<button @click="close">
-						{{ t('deck', 'Cancel') }}
-					</button>
-					<button :disabled="loading || !isBoardAndStackChoosen"
-						class="primary"
-						@click="select">
-						{{ action }}
-					</button>
-				</div>
-			</div>
-			<div v-else id="modal-inner">
-				<NcEmptyContent v-if="creating">
-					<template #icon>
-						<NcLoadingIcon />
-					</template>
-					<template #title>
-						{{ t('deck', 'Creating the new card …') }}
-					</template>
-				</NcEmptyContent>
-				<NcEmptyContent v-else-if="created">
-					<template #icon>
-						<CardPlusOutline />
-					</template>
-					<template #title>
-						{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
-					</template>
-					<template #action>
-						<button class="primary" @click="openNewCard">
-							{{ t('deck', 'Open card') }}
-						</button>
-						<button @click="close">
-							{{ t('deck', 'Close') }}
-						</button>
-					</template>
-				</NcEmptyContent>
-			</div>
-		</div>
+		<CreateNewCardCustomPicker :title="title"
+			:description="description"
+			show-created-notice
+			@cancel="close"
+			@close="close" />
 	</NcModal>
 </template>
 
 <script>
-import { generateUrl } from '@nextcloud/router'
-import { NcModal, NcMultiselect, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
-import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
-import axios from '@nextcloud/axios'
-import { CardApi } from './services/CardApi.js'
-
-const cardApi = new CardApi()
+import { NcModal } from '@nextcloud/vue'
+import CreateNewCardCustomPicker from './views/CreateNewCardCustomPicker.vue'
 
 export default {
 	name: 'CardCreateDialog',
 	components: {
-		NcEmptyContent,
 		NcModal,
-		NcMultiselect,
-		NcLoadingIcon,
-		CardPlusOutline,
+		CreateNewCardCustomPicker,
 	},
 	props: {
 		title: {
@@ -127,139 +49,6 @@ export default {
 			type: String,
 			default: '',
 		},
-		action: {
-			type: String,
-			default: t('deck', 'Create card'),
-		},
 	},
-	data() {
-		return {
-			boards: [],
-			stacksFromBoard: [],
-			loading: true,
-			pendingTitle: '',
-			pendingDescription: '',
-			selectedStack: '',
-			selectedBoard: '',
-			creating: false,
-			created: false,
-			newCard: null,
-		}
-	},
-	computed: {
-		isBoardAndStackChoosen() {
-			return !(this.selectedBoard === '' || this.selectedStack === '')
-		},
-	},
-	beforeMount() {
-		this.fetchBoards()
-	},
-	mounted() {
-		this.pendingTitle = this.title
-		this.pendingDescription = this.description
-	},
-	methods: {
-		fetchBoards() {
-			axios.get(generateUrl('/apps/deck/boards')).then((response) => {
-				this.boards = response.data
-				this.loading = false
-			})
-		},
-		async fetchCardsFromBoard(board) {
-			try {
-				this.cardsFromBoard = []
-				const url = generateUrl('/apps/deck/stacks/' + board.id)
-				const response = await axios.get(url)
-				response.data.forEach(stack => {
-					this.stacksFromBoard.push(stack)
-				})
-			} catch (err) {
-				return err
-			}
-
-		},
-		close() {
-			this.$emit('close')
-			this.$root.$emit('close')
-		},
-		async select() {
-			this.creating = true
-			const response = await cardApi.addCard({
-				boardId: this.selectedBoard.id,
-				stackId: this.selectedStack.id,
-				title: this.pendingTitle,
-				description: this.pendingDescription,
-			})
-			this.newCard = response
-			this.creating = false
-			this.created = true
-			// We do not emit here since we want to give feedback to the user that the card was created
-			// this.$root.$emit('select', createdCard)
-		},
-		openNewCard() {
-			window.location = generateUrl('/apps/deck') + `#/board/${this.selectedBoard.id}/card/${this.newCard.id}`
-		},
-	},
-
 }
 </script>
-
-<style lang="scss" scoped>
-	.modal-scroller {
-		overflow: scroll;
-		max-height: calc(80vh - 40px);
-		margin: 10px;
-	}
-
-	#modal-inner {
-		width: 90vw;
-		max-width: 400px;
-		padding: 10px;
-		min-height: 200px;
-		margin: auto;
-	}
-
-	.multiselect-board, .multiselect-list, input, textarea {
-		width: 100%;
-		margin-bottom: 10px !important;
-	}
-
-	ul {
-		min-height: 100px;
-	}
-
-	li {
-		padding: 6px;
-		border: 1px solid transparent;
-	}
-
-	li:hover, li:focus {
-		background-color: var(--color-background-dark);
-	}
-
-	.board-bullet {
-		display: inline-block;
-		width: 12px;
-		height: 12px;
-		border: none;
-		border-radius: 50%;
-		cursor: pointer;
-	}
-
-	.modal-buttons {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.card-selector:deep(.modal-container) {
-		overflow: visible !important;
-	}
-
-	.empty-content {
-		margin-top: 5vh !important;
-
-		&:deep(h2) {
-			margin-bottom: 5vh;
-		}
-	}
-</style>
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 80bc7d17d..d88ef760c 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -66,12 +66,7 @@ import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
 
-let maxUploadSizeState
-try {
-	maxUploadSizeState = loadState('deck', 'maxUploadSize')
-} catch (e) {
-	maxUploadSizeState = -1
-}
+const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
 export default {
 	name: 'AttachmentDragAndDrop',
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 0ab662036..5899901c7 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -30,7 +30,9 @@
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>
-			<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
+			<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
+				<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
+			</NcModal>
 		</div>
 		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
@@ -218,9 +220,8 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
-import CardCreateDialog from '../CardCreateDialog.vue'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
@@ -228,16 +229,18 @@ import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVe
 import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
 import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
+import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
 
 export default {
 	name: 'Controls',
 	components: {
+		CreateNewCardCustomPicker,
+		NcModal,
 		NcActions,
 		NcActionButton,
 		NcButton,
 		NcPopover,
 		NcAvatar,
-		CardCreateDialog,
 		ArchiveIcon,
 		FilterIcon,
 		FilterOffIcon,
diff --git a/src/components/card/AssignmentSelector.vue b/src/components/card/AssignmentSelector.vue
new file mode 100644
index 000000000..bfebfe3e4
--- /dev/null
+++ b/src/components/card/AssignmentSelector.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="selector-wrapper" :aria-label="t('deck', 'Assign to users/groups/circles')">
+		<div class="selector-wrapper--icon">
+			<AccountMultiple :size="20" />
+		</div>
+		<NcMultiselect v-if="canEdit"
+			v-model="assignedUsers"
+			class="selector-wrapper--selector"
+			:disabled="assignables.length === 0"
+			:multiple="true"
+			:options="formatedAssignables"
+			:user-select="true"
+			:auto-limit="false"
+			:placeholder="t('deck', 'Assign a user to this card…')"
+			label="displayname"
+			track-by="multiselectKey"
+			@select="onSelect"
+			@remove="onRemove">
+			<template #tag="scope">
+				<div class="avatarlist--inline">
+					<NcAvatar :user="scope.option.uid"
+						:display-name="scope.option.displayname"
+						:size="24"
+						:is-no-user="scope.option.isNoUser"
+						:disable-menu="true" />
+				</div>
+			</template>
+		</NcMultiselect>
+		<div v-else class="avatar-list--readonly">
+			<NcAvatar v-for="option in assignedUsers"
+				:key="option.primaryKey"
+				:user="option.uid"
+				:display-name="option.displayname"
+				:is-no-user="option.isNoUser"
+				:size="32" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { NcAvatar, NcMultiselect } from '@nextcloud/vue'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+
+export default defineComponent({
+	name: 'AssignmentSelector',
+	components: {
+		AccountMultiple,
+		NcMultiselect,
+		NcAvatar,
+	},
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+		canEdit: {
+			type: Boolean,
+			default: true,
+		},
+		assignables: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			assignedUsers: [],
+		}
+	},
+	computed: {
+		formatedAssignables() {
+			return this.assignables.map(item => {
+				const assignable = {
+					...item,
+					user: item.primaryKey,
+					displayName: item.displayname,
+					icon: 'icon-user',
+					isNoUser: false,
+					multiselectKey: item.type + ':' + item.uid,
+				}
+
+				if (item.type === 1) {
+					assignable.icon = 'icon-group'
+					assignable.isNoUser = true
+				}
+				if (item.type === 7) {
+					assignable.icon = 'icon-circles'
+					assignable.isNoUser = true
+				}
+
+				return assignable
+			})
+		},
+	},
+	watch: {
+		card() {
+			this.initialize()
+		},
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		async initialize() {
+			if (!this.card) {
+				return
+			}
+
+			if (this.card.assignedUsers && this.card.assignedUsers.length > 0) {
+				this.assignedUsers = this.card.assignedUsers.map((item) => ({
+					...item.participant,
+					isNoUser: item.participant.type !== 0,
+					multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
+				}))
+			} else {
+				this.assignedUsers = []
+			}
+		},
+		onSelect(user) {
+			this.$emit('select', user)
+		},
+		onRemove(user) {
+			this.$emit('remove', user)
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/selector';
+</style>
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index 5282f4c5e..96a171ab2 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -113,7 +113,7 @@ import { mapState, mapActions } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
 import attachmentUpload from '../../mixins/attachmentUpload.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
-const maxUploadSizeState = loadState('deck', 'maxUploadSize')
+const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
 const picker = getFilePickerBuilder(t('deck', 'File to share'))
 	.setMultiSelect(false)
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 30ca71501..46d545d2a 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -22,96 +22,20 @@
 
 <template>
 	<div v-if="copiedCard">
-		<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 class="section-details">
-				<NcMultiselect v-model="assignedLabels"
-					:multiple="true"
-					:disabled="!canEdit"
-					:options="labelsSorted"
-					:placeholder="t('deck', 'Assign a tag to this card…')"
-					:taggable="true"
-					label="title"
-					track-by="id"
-					@select="addLabelToCard"
-					@remove="removeLabelFromCard"
-					@tag="addLabelToBoardAndCard">
-					<template #option="scope">
-						<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>
-					</template>
-				</NcMultiselect>
-			</div>
-		</div>
+		<TagSelector :card="card"
+			:labels="currentBoard.labels"
+			:disabled="!canEdit"
+			@select="addLabelToCard"
+			@remove="removeLabelFromCard"
+			@newtag="addLabelToBoardAndCard" />
 
-		<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/groups/circles') }}</span>
-			</div>
-			<div class="section-details">
-				<NcMultiselect v-if="canEdit"
-					v-model="assignedUsers"
-					:multiple="true"
-					:options="formatedAssignables"
-					:user-select="true"
-					:auto-limit="false"
-					:placeholder="t('deck', 'Assign a user to this card…')"
-					label="displayname"
-					track-by="multiselectKey"
-					@select="assignUserToCard"
-					@remove="removeUserFromCard">
-					<template #tag="scope">
-						<div class="avatarlist--inline">
-							<NcAvatar :user="scope.option.uid"
-								:display-name="scope.option.displayname"
-								:size="24"
-								:is-no-user="scope.option.isNoUser"
-								:disable-menu="true" />
-						</div>
-					</template>
-				</NcMultiselect>
-				<div v-else class="avatar-list--readonly">
-					<NcAvatar v-for="option in assignedUsers"
-						:key="option.primaryKey"
-						:user="option.uid"
-						:display-name="option.displayname"
-						:is-no-user="option.isNoUser"
-						:size="32" />
-				</div>
-			</div>
-		</div>
+		<AssignmentSelector :card="card"
+			:assignables="assignables"
+			:can-edit="canEdit"
+			@select="assignUserToCard"
+			@remove="removeUserFromCard" />
 
-		<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 class="section-details">
-				<NcDatetimePicker v-model="duedate"
-					:placeholder="t('deck', 'Set a due date')"
-					type="datetime"
-					:minute-step="5"
-					:show-second="false"
-					:lang="lang"
-					:formatter="format"
-					:disabled="saving || !canEdit"
-					:shortcuts="shortcuts"
-					:append-to-body="true"
-					confirm />
-				<NcActions v-if="canEdit">
-					<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
-						{{ t('deck', 'Remove due date') }}
-					</NcActionButton>
-				</NcActions>
-			</div>
-		</div>
+		<DueDateSelector :card="card" :can-edit="canEdit && !saving" @change="updateCardDue" />
 
 		<div v-if="projectsEnabled" class="section-wrapper">
 			<CollectionList v-if="card.id"
@@ -120,35 +44,36 @@
 				type="deck-card" />
 		</div>
 
-		<Description :key="card.id" :card="card" @change="descriptionChanged" />
+		<Description :key="card.id"
+			:card="card"
+			:can-edit="canEdit"
+			show-attachments
+			@change="descriptionChanged" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 
 import { CollectionList } from 'nextcloud-vue-collections'
 import Color from '../../mixins/color.js'
 import {
 	getLocale,
-	getDayNamesMin,
-	getFirstDay,
-	getMonthNamesShort,
 } from '@nextcloud/l10n'
 import Description from './Description.vue'
+import TagSelector from './TagSelector.vue'
+import AssignmentSelector from './AssignmentSelector.vue'
+import DueDateSelector from './DueDateSelector.vue'
 
 export default {
 	name: 'CardSidebarTabDetails',
 	components: {
+		DueDateSelector,
+		AssignmentSelector,
+		TagSelector,
 		Description,
-		NcMultiselect,
-		NcDatetimePicker,
-		NcActions,
-		NcActionButton,
-		NcAvatar,
 		CollectionList,
 	},
 	mixins: [Color],
@@ -161,68 +86,10 @@ export default {
 	data() {
 		return {
 			saving: false,
-			assignedUsers: null,
 			addedLabelToCard: null,
 			copiedCard: null,
-			assignedLabels: null,
 			locale: getLocale(),
 			projectsEnabled: loadState('core', 'projects_enabled', false),
-			lang: {
-				days: getDayNamesMin(),
-				months: getMonthNamesShort(),
-				formatLocale: {
-					firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
-				},
-				placeholder: {
-					date: t('deck', 'Select Date'),
-				},
-			},
-			format: {
-				stringify: this.stringify,
-				parse: this.parse,
-			},
-			shortcuts: [
-				{
-					text: t('deck', 'Today'),
-					onClick() {
-						const date = new Date()
-						date.setDate(date.getDate())
-						date.setHours(23)
-						date.setMinutes(59)
-						return date
-					},
-				},
-				{
-					text: t('deck', 'Tomorrow'),
-					onClick() {
-						const date = new Date()
-						date.setDate(date.getDate() + 1)
-						date.setHours(23)
-						date.setMinutes(59)
-						return date
-					},
-				},
-				{
-					text: t('deck', 'Next week'),
-					onClick() {
-						const date = new Date()
-						date.setDate(date.getDate() + 7)
-						date.setHours(23)
-						date.setMinutes(59)
-						return date
-					},
-				},
-				{
-					text: t('deck', 'Next month'),
-					onClick() {
-						const date = new Date()
-						date.setDate(date.getDate() + 30)
-						date.setHours(23)
-						date.setMinutes(59)
-						return date
-					},
-				},
-			],
 		}
 	},
 	computed: {
@@ -230,29 +97,6 @@ export default {
 			currentBoard: state => state.currentBoard,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
-		formatedAssignables() {
-			return this.assignables.map(item => {
-				const assignable = {
-					...item,
-					user: item.primaryKey,
-					displayName: item.displayname,
-					icon: 'icon-user',
-					isNoUser: false,
-					multiselectKey: item.type + ':' + item.uid,
-				}
-
-				if (item.type === 1) {
-					assignable.icon = 'icon-group'
-					assignable.isNoUser = true
-				}
-				if (item.type === 7) {
-					assignable.icon = 'icon-circles'
-					assignable.isNoUser = true
-				}
-
-				return assignable
-			})
-		},
 		cardDetailsInModal: {
 			get() {
 				return this.$store.getters.config('cardDetailsInModal')
@@ -261,19 +105,6 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
-		duedate: {
-			get() {
-				return this.card.duedate ? new Date(this.card.duedate) : null
-			},
-			async set(val) {
-				this.saving = true
-				await this.$store.dispatch('updateCardDue', {
-					...this.copiedCard,
-					duedate: val ? (new Date(val)).toISOString() : null,
-				})
-				this.saving = false
-			},
-		},
 
 		labelsSorted() {
 			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
@@ -289,6 +120,7 @@ export default {
 	},
 	methods: {
 		descriptionChanged(newDesc) {
+			this.$store.dispatch('updateCardDesc', { ...this.card, description: newDesc })
 			this.copiedCard.description = newDesc
 		},
 		async initialize() {
@@ -297,22 +129,15 @@ export default {
 			}
 
 			this.copiedCard = JSON.parse(JSON.stringify(this.card))
-			this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
-
-			if (this.card.assignedUsers && this.card.assignedUsers.length > 0) {
-				this.assignedUsers = this.card.assignedUsers.map((item) => ({
-					...item.participant,
-					isNoUser: item.participant.type !== 0,
-					multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
-				}))
-			} else {
-				this.assignedUsers = []
-			}
 		},
 
-		removeDue() {
-			this.copiedCard.duedate = null
-			this.$store.dispatch('updateCardDue', this.copiedCard)
+		async updateCardDue(val) {
+			this.saving = true
+			await this.$store.dispatch('updateCardDue', {
+				...this.copiedCard,
+				duedate: val ? (new Date(val)).toISOString() : null,
+			})
+			this.saving = false
 		},
 
 		assignUserToCard(user) {
@@ -345,14 +170,13 @@ export default {
 		},
 
 		async addLabelToBoardAndCard(name) {
-			const newLabel = await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
+			await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
 				card: this.copiedCard,
 				newLabel: {
 					title: name,
 					color: this.randomColor(),
 				},
 			})
-			this.assignedLabels.push(newLabel)
 		},
 
 		removeLabelFromCard(removedLabel) {
@@ -411,16 +235,6 @@ export default {
 	}
 }
 
-.tag {
-	flex-grow: 0;
-	flex-shrink: 1;
-	overflow: hidden;
-	padding: 0px 5px;
-	border-radius: 15px;
-	font-size: 85%;
-	margin-right: 3px;
-}
-
 .avatarLabel {
 	padding: 6px
 }
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 6df0ac44d..ba06a0fff 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -39,7 +39,7 @@
 					{{ t('deck', 'View description') }}
 				</NcActionButton>
 			</NcActions>
-			<NcActions v-if="canEdit">
+			<NcActions v-if="canEdit && !!card.id">
 				<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
 					<template #icon>
 						<PaperclipIcon :size="24" decorative />
@@ -70,7 +70,7 @@
 				@blur="saveDescription" />
 		</template>
 
-		<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+		<NcModal v-if="modalShow && !!card.id" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Choose attachment') }}</h3>
 				<AttachmentList :card-id="card.id"
@@ -89,7 +89,6 @@ import AttachmentList from './AttachmentList.vue'
 import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { mapState, mapGetters } from 'vuex'
 import PaperclipIcon from 'vue-material-design-icons/Paperclip.vue'
 
 const markdownIt = new MarkdownIt({
@@ -119,6 +118,14 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canEdit: {
+			type: Boolean,
+			default: true,
+		},
+		showAttachments: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -144,13 +151,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
-		}),
-		...mapGetters(['canEdit']),
-		attachments() {
-			return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
-		},
 		mimetypeForAttachment() {
 			return (mimetype) => {
 				const url = OC.MimeType.getIconUrl(mimetype)
@@ -278,7 +278,7 @@ export default {
 					}
 					return match
 				})
-				this.$store.dispatch('updateCardDesc', { ...this.card, description: updatedDescription })
+				this.$emit('change', updatedDescription)
 			}
 		},
 		async saveDescription() {
@@ -286,10 +286,9 @@ export default {
 				return
 			}
 			this.descriptionSaving = true
-			await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
+			this.$emit('change', this.description)
 			this.descriptionLastEdit = 0
 			this.descriptionSaving = false
-			this.$emit('change', this.description)
 		},
 		updateDescription() {
 			this.descriptionLastEdit = Date.now()
@@ -368,6 +367,10 @@ h5 {
 	}
 }
 
+.description__text :deep(.ProseMirror) {
+	padding-bottom: 44px;
+}
+
 </style>
 <style>
 @import '~easymde/dist/easymde.min.css';
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
new file mode 100644
index 000000000..a068d8bde
--- /dev/null
+++ b/src/components/card/DueDateSelector.vue
@@ -0,0 +1,134 @@
+<template>
+	<div class="selector-wrapper" :aria-label="t('deck', 'Assign a due date to this card…')">
+		<div class="selector-wrapper--icon">
+			<Calendar :size="20" />
+		</div>
+		<div class="duedate-selector">
+			<NcDatetimePicker v-model="duedate"
+				:placeholder="t('deck', 'Set a due date')"
+				type="datetime"
+				:minute-step="5"
+				:show-second="false"
+				:lang="lang"
+				:formatter="format"
+				:disabled="!canEdit"
+				:shortcuts="shortcuts"
+				:append-to-body="true"
+				confirm />
+			<NcActions v-if="canEdit">
+				<NcActionButton v-if="duedate" icon="icon-delete" @click="removeDue()">
+					{{ t('deck', 'Remove due date') }}
+				</NcActionButton>
+			</NcActions>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { NcActionButton, NcActions, NcDatetimePicker } from '@nextcloud/vue'
+import { getDayNamesMin, getFirstDay, getMonthNamesShort } from '@nextcloud/l10n'
+import Calendar from 'vue-material-design-icons/Calendar.vue'
+
+export default defineComponent({
+	name: 'DueDateSelector',
+	components: {
+		Calendar,
+		NcActions,
+		NcActionButton,
+		NcDatetimePicker,
+	},
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+		canEdit: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			lang: {
+				days: getDayNamesMin(),
+				months: getMonthNamesShort(),
+				formatLocale: {
+					firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
+				},
+				placeholder: {
+					date: t('deck', 'Select Date'),
+				},
+			},
+			format: {
+				stringify: this.stringify,
+				parse: this.parse,
+			},
+			shortcuts: [
+				{
+					text: t('deck', 'Today'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate())
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Tomorrow'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 1)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Next week'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 7)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Next month'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 30)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+			],
+		}
+	},
+	computed: {
+		duedate: {
+			get() {
+				return this.card.duedate ? new Date(this.card.duedate) : null
+			},
+			set(val) {
+				this.$emit('change', val)
+			},
+		},
+	},
+	methods: {
+		removeDue() {
+			this.duedate = null
+		},
+	},
+})
+</script>
+<style lang="scss">
+@import '../../css/selector';
+
+.duedate-selector {
+	display: flex;
+}
+</style>
diff --git a/src/components/card/TagSelector.vue b/src/components/card/TagSelector.vue
new file mode 100644
index 000000000..6bf6e4d0e
--- /dev/null
+++ b/src/components/card/TagSelector.vue
@@ -0,0 +1,110 @@
+<template>
+	<div class="selector-wrapper" :aria-label="t('deck', 'Assign a tag to this card…')">
+		<div class="selector-wrapper--icon">
+			<TagMultiple :size="20" />
+		</div>
+		<NcMultiselect v-model="assignedLabels"
+			class="selector-wrapper--selector"
+			:multiple="true"
+			:disabled="disabled"
+			:options="labelsSorted"
+			:placeholder="t('deck', 'Assign a tag to this card…')"
+			:taggable="true"
+			label="title"
+			track-by="id"
+			@select="onSelect"
+			@remove="onRemove"
+			@tag="onNewTag">
+			<template #option="scope">
+				<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>
+			</template>
+		</NcMultiselect>
+	</div>
+</template>
+
+<script>
+import { NcMultiselect } from '@nextcloud/vue'
+import Color from '../../mixins/color.js'
+import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
+
+export default {
+	name: 'TagSelector',
+	components: { TagMultiple, NcMultiselect },
+	mixins: [Color],
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+		labels: {
+			type: Array,
+			default: () => [],
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			assignedLabels: null,
+		}
+	},
+	computed: {
+		labelsSorted() {
+			return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
+	},
+	watch: {
+		card() {
+			this.initialize()
+		},
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		async initialize() {
+			if (!this.card) {
+				return
+			}
+
+			this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
+		onSelect(newLabel) {
+			this.$emit('select', newLabel)
+		},
+		onRemove(removedLabel) {
+			this.$emit('remove', removedLabel)
+		},
+		async onNewTag(name) {
+			this.$emit('newtag', name)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/selector';
+
+.multiselect--active {
+	z-index: 10022;
+}
+
+.tag {
+	flex-grow: 0;
+	flex-shrink: 1;
+	overflow: hidden;
+	padding: 0px 5px;
+	border-radius: 15px;
+	font-size: 85%;
+	margin-right: 3px;
+}
+</style>
diff --git a/src/init-reference.js b/src/init-reference.js
index fa983ebcb..dab2f7ad6 100644
--- a/src/init-reference.js
+++ b/src/init-reference.js
@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { registerWidget } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import { Tooltip } from '@nextcloud/vue'
 import Vue from 'vue'
 import CardReferenceWidget from './views/CardReferenceWidget.vue'
@@ -35,6 +35,11 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 Vue.directive('tooltip', Tooltip)
+Vue.directive('focus', {
+	inserted(el) {
+		el.focus()
+	},
+})
 
 registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) => {
 	// trick to change the wrapper element size, otherwise it always is 100%
@@ -82,3 +87,19 @@ registerWidget('deck-comment', (el, { richObjectType, richObject, accessible })
 		},
 	}).$mount(el)
 })
+
+registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
+	const { default: Vue } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
+	Vue.mixin({ methods: { t, n } })
+	const { default: CreateNewCardCustomPicker } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/CreateNewCardCustomPicker.vue')
+	const Element = Vue.extend(CreateNewCardCustomPicker)
+	const vueElement = new Element({
+		propsData: {
+			providerId,
+			accessible,
+		},
+	}).$mount(el)
+	return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
+}, (el, renderResult) => {
+	renderResult.object.$destroy()
+}, 'normal')
diff --git a/src/views/CreateNewCardCustomPicker.vue b/src/views/CreateNewCardCustomPicker.vue
new file mode 100644
index 000000000..fc1170d25
--- /dev/null
+++ b/src/views/CreateNewCardCustomPicker.vue
@@ -0,0 +1,354 @@
+<template>
+	<div class="modal-scroller">
+		<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
+			<h2>{{ t('deck', 'Create a new card') }}</h2>
+			<input ref="cardTitleInput"
+				v-model="card.title"
+				v-focus
+				type="text"
+				class="card-title"
+				:placeholder="t('deck', 'Card title')"
+				:disabled="loading">
+
+			<div class="row">
+				<div class="col selector-wrapper">
+					<div class="selector-wrapper--icon">
+						<DeckIcon :size="20" />
+					</div>
+					<NcMultiselect v-model="selectedBoard"
+						:placeholder="t('deck', 'Select a board')"
+						:options="boards"
+						:disabled="loading"
+						label="title"
+						class="selector-wrapper--selector multiselect-board"
+						@select="fetchBoardDetails">
+						<template slot="singleLabel" slot-scope="props">
+							<span>
+								<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
+								<span>{{ props.option.title }}</span>
+							</span>
+						</template>
+						<template slot="option" slot-scope="props">
+							<span>
+								<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
+								<span>{{ props.option.title }}</span>
+							</span>
+						</template>
+					</NcMultiselect>
+				</div>
+
+				<div class="col selector-wrapper">
+					<div class="selector-wrapper--icon">
+						<FormatColumnsIcon :size="20" />
+					</div>
+					<NcMultiselect v-model="selectedStack"
+						:placeholder="t('deck', 'Select a list')"
+						:options="stacksFromBoard"
+						:max-height="100"
+						:disabled="loading || !selectedBoard"
+						class="selector-wrapper--selector multiselect-list"
+						label="title" />
+				</div>
+			</div>
+
+			<TagSelector :card="card"
+				:labels="labels"
+				:disabled="loading || !selectedBoard"
+				@select="onSelectLabel"
+				@remove="onRemoveLabel"
+				@newtag="addLabelToBoardAndCard" />
+
+			<AssignmentSelector :card="card"
+				:assignables="assignables"
+				@select="onSelectUser"
+				@remove="onRemoveUser" />
+
+			<DueDateSelector :card="card" :can-edit="!loading && !!selectedBoard" @change="updateCardDue" />
+
+			<Description :key="card.id"
+				:card="card"
+				@change="descriptionChanged" />
+
+			<div class="modal-buttons">
+				<NcButton @click="close">
+					{{ t('deck', 'Cancel') }}
+				</NcButton>
+				<NcButton :disabled="loading || !isBoardAndStackChoosen"
+					type="primary"
+					@click="createCard">
+					{{ t('deck', 'Create card') }}
+				</NcButton>
+			</div>
+		</div>
+		<div v-else id="modal-inner">
+			<NcEmptyContent v-if="creating">
+				<template #icon>
+					<NcLoadingIcon />
+				</template>
+				<template #title>
+					{{ t('deck', 'Creating the new card …') }}
+				</template>
+			</NcEmptyContent>
+			<NcEmptyContent v-else-if="created && showCreatedNotice">
+				<template #icon>
+					<CardPlusOutline />
+				</template>
+				<template #title>
+					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: card.title, board: selectedBoard.title }) }}
+				</template>
+				<template #action>
+					<button class="primary" @click="openNewCard">
+						{{ t('deck', 'Open card') }}
+					</button>
+					<button @click="close">
+						{{ t('deck', 'Close') }}
+					</button>
+				</template>
+			</NcEmptyContent>
+		</div>
+	</div>
+</template>
+
+<script>
+import { generateUrl } from '@nextcloud/router'
+import {
+	NcButton,
+	NcMultiselect,
+	NcEmptyContent,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
+import { CardApi } from '../services/CardApi.js'
+import Color from '../mixins/color.js'
+import AssignmentSelector from '../components/card/AssignmentSelector.vue'
+import TagSelector from '../components/card/TagSelector.vue'
+import { BoardApi } from '../services/BoardApi.js'
+import DueDateSelector from '../components/card/DueDateSelector.vue'
+import Description from '../components/card/Description.vue'
+import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
+import FormatColumnsIcon from 'vue-material-design-icons/FormatColumns.vue'
+import DeckIcon from '../components/icons/DeckIcon.vue'
+
+const cardApi = new CardApi()
+const apiClient = new BoardApi()
+
+export default {
+	name: 'CreateNewCardCustomPicker',
+	components: {
+		DeckIcon,
+		FormatColumnsIcon,
+		CardPlusOutline,
+		Description,
+		DueDateSelector,
+		TagSelector,
+		AssignmentSelector,
+		NcButton,
+		NcMultiselect,
+		NcEmptyContent,
+		NcLoadingIcon,
+	},
+	mixins: [Color],
+	props: {
+		showCreatedNotice: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
+			type: String,
+			default: '',
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		action: {
+			type: String,
+			default: t('deck', 'Create card'),
+		},
+	},
+	data() {
+		return {
+			card: {
+				title: '',
+				description: '',
+				labels: [],
+				assignedUsers: [],
+				duedate: null,
+			},
+			boards: [],
+			stacksFromBoard: [],
+			labels: [],
+			selectedUsers: [],
+			loading: true,
+			selectedStack: '',
+			selectedBoard: '',
+			selectedLabels: [],
+			boardUsers: [],
+			boardAcl: [],
+			creating: false,
+			created: false,
+			newCard: {},
+		}
+	},
+	computed: {
+		isBoardAndStackChoosen() {
+			return !(this.selectedBoard === '' || this.selectedStack === '')
+		},
+		assignables() {
+			return [
+				...this.boardUsers.map((user) => ({ ...user, type: 0 })),
+				...this.boardAcl.filter((acl) => acl.type === 1 && typeof acl.participant === 'object').map((group) => ({ ...group.participant, type: 1 })),
+				...this.boardAcl.filter((acl) => acl.type === 7 && typeof acl.participant === 'object').map((circle) => ({ ...circle.participant, type: 7 })),
+			]
+		},
+	},
+	beforeMount() {
+		this.$set(this.card, 'title', this.title)
+		this.$set(this.card, 'description', this.description)
+		this.fetchBoards()
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.$refs.cardTitleInput.focus()
+		})
+	},
+	methods: {
+		fetchBoards() {
+			axios.get(generateUrl('/apps/deck/boards')).then((response) => {
+				this.boards = response.data.filter((board) => {
+					return board?.permissions?.PERMISSION_EDIT
+				})
+				this.loading = false
+			})
+		},
+		async fetchBoardDetails(board) {
+			try {
+				const url = generateUrl('/apps/deck/boards/' + board.id)
+				const response = await axios.get(url)
+				this.stacksFromBoard = response.data.stacks
+				this.labels = response.data.labels
+				this.boardUsers = response.data.users
+				this.boardAcl = response.data.acl
+			} catch (err) {
+				return err
+			}
+
+		},
+		close() {
+			this.$emit('cancel')
+		},
+		async createCard() {
+			this.creating = true
+			const response = await cardApi.addCard({
+				boardId: this.selectedBoard.id,
+				stackId: this.selectedStack.id,
+				title: this.card.title,
+				description: this.card.description,
+				duedate: this.card.duedate,
+				labels: this.card.labels.map(label => label.id),
+				users: this.card.assignedUsers.map(user => { return { id: user.uid, type: user.type } }),
+			})
+			this.newCard = response
+			this.creating = false
+			this.created = true
+			this.$emit('submit', window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck') + `/card/${this.newCard.id}`)
+		},
+		onSelectLabel(label) {
+			this.card.labels.push(label)
+		},
+		onRemoveLabel(removedLabel) {
+			this.card.labels = this.card.label.filter(label => label.id !== removedLabel.id)
+		},
+		onSelectUser(user) {
+			this.card.assignedUsers.push(user)
+		},
+		onRemoveUser(removedUser) {
+			this.card.assignedUsers = this.card.assignedUsers.filter(user => user.uid !== removedUser.uid)
+		},
+		async addLabelToBoardAndCard(name) {
+			const label = await apiClient.createLabel({
+				title: name,
+				color: this.randomColor(),
+				boardId: this.selectedBoard.id,
+			})
+			this.card.labels.push(label)
+			this.labels.push(label)
+		},
+		updateCardDue(newValue) {
+			this.card.duedate = newValue
+		},
+		descriptionChanged(newValue) {
+			this.card.description = newValue
+		},
+		openNewCard() {
+			window.location = generateUrl('/apps/deck') + `#/board/${this.selectedBoard.id}/card/${this.newCard.id}`
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../css/selector';
+
+.modal-scroller {
+	overflow: scroll;
+	max-height: calc(80vh - 40px);
+	width: calc(100% - 24px);
+	padding: 12px;
+}
+
+#modal-inner {
+	width: auto;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+h2 {
+	text-align: center;
+}
+
+.card-title {
+	width: 100%;
+}
+
+.board-bullet {
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.modal-buttons {
+	display: flex;
+	justify-content: flex-end;
+	position: sticky;
+	bottom: 0;
+	z-index: 10100;
+	gap: 12px;
+}
+
+.multiselect {
+	min-width: auto;
+}
+
+.empty-content {
+	margin-top: 5vh !important;
+
+	&:deep(h2) {
+		margin-bottom: 5vh;
+	}
+}
+
+.row {
+	display: flex;
+	gap: 12px;
+
+	.col {
+		display: flex;
+		width: 50%;
+	}
+}
+</style>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index f37024b53..2ed2510cc 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -54,26 +54,29 @@
 				</template>
 				{{ t('deck', 'New card') }}
 			</NcButton>
-			<CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" />
+			<NcModal v-if="showAddCardModal" class="card-selector" @close="toggleAddCardModel">
+				<CreateNewCardCustomPicker show-created-notice @cancel="toggleAddCardModel" />
+			</NcModal>
 		</div>
 	</div>
 </template>
 
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { NcButton, NcDashboardWidget } from '@nextcloud/vue'
+import { NcButton, NcDashboardWidget, NcModal } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
 import labelStyle from './../mixins/labelStyle.js'
 import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
-import CardCreateDialog from '../CardCreateDialog.vue'
+import CreateNewCardCustomPicker from './CreateNewCardCustomPicker.vue'
 
 export default {
 	name: 'Dashboard',
 	components: {
+		CreateNewCardCustomPicker,
+		NcModal,
 		DueDate,
 		NcDashboardWidget,
-		CardCreateDialog,
 		NcButton,
 		PlusIcon,
 	},