AssignmentSelector.vue

<!--
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div class="selector-wrapper" :aria-label="t('deck', 'Assign to users/groups/team')" data-test="assignment-selector">
		<div class="selector-wrapper--icon">
			<AccountMultiple :size="20" />
		</div>
		<NcSelect v-if="canEdit"
			v-model="assignedUsers"
			class="selector-wrapper--selector"
			:disabled="assignables.length === 0"
			:multiple="true"
			:options="formatedAssignables"
			:user-select="true"
			:aria-label-combobox="t('deck', 'Assign a user to this card…')"
			:placeholder="t('deck', 'Select a user to assign to this card…')"
			label="displayname"
			track-by="multiselectKey"
			@option:selected="onSelect"
			@option:deselected="onRemove" />
		<div v-else class="avatar-list--readonly">
			<NcUserBubble 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 { NcSelect, NcUserBubble } from '@nextcloud/vue'
import AccountMultiple from 'vue-material-design-icons/AccountMultipleOutline.vue'

export default defineComponent({
	name: 'AssignmentSelector',
	components: {
		AccountMultiple,
		NcSelect,
		NcUserBubble,
	},
	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,
					user: item.participant.uid,
				}))
			} else {
				this.assignedUsers = []
			}
		},
		onSelect(options) {
			const addition = options.filter((item) => !this.card.assignedUsers.find((user) => user.participant.primaryKey === item.primaryKey))
			this.$emit('select', addition[0])
		},
		onRemove(removed) {
			this.$emit('remove', removed)
		},
	},
})
</script>

<style lang="scss" scoped>
@import '../../css/selector.scss';
</style>