feat: create new card from smart picker

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

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>