feat: create new card from smart picker

Signed-off-by: Luka Trovic <luka@nextcloud.com>

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',

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,

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>

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)

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
 }

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';

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>

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>