feat: create new card from smart picker

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

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
 }