Add frontend for assigning groups to cards

Signed-off-by: Julius Härtl <jus@bitgrid.net>

lib/Service/AssignmentService.php

@@ -86,7 +86,8 @@ class AssignmentService {
 		NotificationHelper $notificationHelper,
 		ActivityManager $activityManager,
 		ChangeHelper $changeHelper,
-		IEventDispatcher $eventDispatcher
+		IEventDispatcher $eventDispatcher,
+		$userId
 	) {
 		$this->permissionService = $permissionService;
 		$this->cardMapper = $cardMapper;
@@ -96,6 +97,7 @@ class AssignmentService {
 		$this->changeHelper = $changeHelper;
 		$this->activityManager = $activityManager;
 		$this->eventDispatcher = $eventDispatcher;
+		$this->currentUser = $userId;
 	}
 
 	/**
@@ -107,7 +109,7 @@ class AssignmentService {
 	 * @throws MultipleObjectsReturnedException
 	 * @throws DoesNotExistException
 	 */
-	public function assignUser($cardId, $userId, int $type = 0) {
+	public function assignUser($cardId, $userId, int $type = AssignedUsers::TYPE_USER) {
 
 		if (is_numeric($cardId) === false) {
 			throw new BadRequestException('card id must be a number');

src/components/board/SharingTabSidebar.vue

@@ -60,7 +60,7 @@
 <script>
 import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
@@ -87,8 +87,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
+		...mapState([
 			'sharees',
+		]),
+		...mapGetters([
 			'canEdit',
 			'canManage',
 			'canShare',

src/components/card/CardSidebar.vue

@@ -64,20 +64,34 @@
 					<span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span>
 				</div>
 				<div class="section-details">
-					<Multiselect v-model="assignedUsers"
-						:disabled="!canEdit"
+					<!-- FIXME: model not wokring due to id -->
+					<Multiselect v-if="canEdit"
+						v-model="assignedUsers"
 						:multiple="true"
-						:options="assignableUsers"
+						:options="formatedAssignables"
+						:user-select="true"
+						:auto-limit="false"
 						:placeholder="t('deck', 'Assign a user to this card…')"
 						label="displayname"
 						track-by="primaryKey"
 						@select="assignUserToCard"
 						@remove="removeUserFromCard">
-						<template #option="scope">
-							<Avatar :user="scope.option.primaryKey" />
-							<span class="avatarLabel">{{ scope.option.displayname }} </span>
+						<template #tag="scope">
+							<div class="avatarlist--inline">
+								<Avatar :user="scope.option.primaryKey"
+									:display-name="scope.option.displayname"
+									:size="24"
+									:disable-menu="true" />
+							</div>
 						</template>
 					</Multiselect>
+					<div v-else class="avatar-list--readonly">
+						<Avatar v-for="option in currentCard.assignedUsers"
+							:key="option.id"
+							:user="option.participant.primaryKey"
+							:display-name="option.participant.displayname"
+							:size="32" />
+					</div>
 				</div>
 			</div>
 
@@ -86,14 +100,11 @@
 					<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 				</div>
 				<div class="section-details">
-					<DatetimePicker v-model="copiedCard.duedate"
+					<DatetimePicker v-model="duedate"
 						:placeholder="t('deck', 'Set a due date')"
 						type="datetime"
-						lang="en"
-						:disabled="!canEdit"
-						format="YYYY-MM-DD HH:mm"
-						confirm
-						@change="setDue()" />
+						:disabled="saving || !canEdit"
+						confirm />
 					<Actions v-if="canEdit">
 						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 							{{ t('deck', 'Remove due date') }}
@@ -189,11 +200,12 @@ export default {
 			copiedCard: null,
 			allLabels: null,
 			desc: null,
+			saving: false,
 			mdeConfig: {
 				autoDownloadFontAwesome: false,
 				spellChecker: false,
 				autofocus: true,
-				autosave: { enabled: true, uniqueId: 'unique' },
+				autosave: { enabled: false, uniqueId: 'unique' },
 				toolbar: false,
 			},
 			lastModifiedRelative: null,
@@ -205,15 +217,49 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			assignableUsers: state => state.assignableUsers,
 		}),
-		...mapGetters(['canEdit']),
+		...mapGetters(['canEdit', 'assignables']),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
 			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative
 		},
+		formatedAssignables() {
+			return this.assignables.map(item => {
+				const assignable = {
+					...item,
+					user: item.primaryKey,
+					displayName: item.displayname,
+					icon: 'icon-user',
+					isNoUser: false,
+				}
+
+				if (item.type === 1) {
+					assignable.icon = 'icon-group'
+					assignable.isNoUser = true
+				}
+				if (item.type === 7) {
+					assignable.icon = 'icon-circles'
+					assignable.isNoUser = true
+				}
+
+				return assignable
+			})
+		},
+		duedate: {
+			get() {
+				return this.currentCard.duedate ? new Date(this.currentCard.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
+			},
+		},
 	},
 	watch: {
 		'currentCard': {
@@ -235,10 +281,6 @@ export default {
 				this.updateRelativeTimestamps()
 			},
 		},
-
-		'copiedCard.description': function() {
-			this.saveDesc()
-		},
 	},
 	created() {
 		setInterval(this.updateRelativeTimestamps, 10000)
@@ -267,13 +309,23 @@ export default {
 		},
 
 		assignUserToCard(user) {
-			this.copiedCard.newUserUid = user.uid
-			this.$store.dispatch('assignCardToUser', this.copiedCard)
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
 		},
 
 		removeUserFromCard(user) {
-			this.copiedCard.removeUserUid = user.uid
-			this.$store.dispatch('removeUserFromCard', this.copiedCard)
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
 		},
 
 		addLabelToCard(newLabel) {
@@ -376,4 +428,28 @@ export default {
 		padding: 6px
 	}
 
+	.section-details::v-deep .multiselect__tags-wrap {
+		flex-wrap: wrap;
+	}
+
+	.avatar-list--readonly .avatardiv {
+		margin-right: 3px;
+	}
+
+	.avatarlist--inline {
+		display: flex;
+		align-items: center;
+		margin-right: 3px;
+		.avatarLabel {
+			padding: 0;
+		}
+	}
+
+	.multiselect::v-deep .multiselect__tags-wrap {
+		z-index: 2;
+	}
+
+	.multiselect.multiselect--active::v-deep .multiselect__tags-wrap {
+		z-index: 0;
+	}
 </style>

src/components/card/CardSidebarTabComments.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
 		<div class="comment--header">
-			<Avatar :user="card.owner.uid" />
+			<Avatar :user="currentUser.uid" />
 			<span class="has-tooltip username">
-				{{ card.owner.displayname }}
+				{{ currentUser.displayName }}
 			</span>
 		</div>
 
@@ -54,6 +54,7 @@ export default {
 		return {
 			newComment: '',
 			isLoading: false,
+			currentUser: OC.getCurrentUser(),
 		}
 	},
 	computed: {

src/components/cards/AvatarList.vue

@@ -22,13 +22,31 @@
 
 <template>
 	<div class="avatars">
-		<div class="avatar-list" @click.stop="popoverVisible=!popoverVisible">
-			<div v-if="popover.length > 0" class="avatardiv icon-more" />
-			<Avatar v-for="user in firstUsers"
-				:key="user.id"
-				:url="avatarUrl(user)"
-				:disable-tooltip="true"
+		<div class="avatar-list" @click.stop="togglePopover">
+			<div v-if="popover.length > 0">
+				<div class="avatardiv icon-more" />
+			</div>
+			<div v-for="user in firstUsers" :key="user.id">
+				<Avatar v-if="user.type === 0"
+					:user="user.participant.uid"
+					:display-name="user.participant.displayname"
+					:disable-menu="true"
 					:size="32" />
+				<Avatar v-if="user.type === 1"
+					:user="user.participant.primaryKey"
+					:display-name="user.participant.primaryKey"
+					:tooltip-message="user.participant.primaryKey + ' ' + t('deck', '(group)')"
+					:is-no-user="true"
+					:disable-="true"
+					:size="32" />
+				<Avatar v-if="user.type === 7"
+					:user="user.participant.primaryKey"
+					:display-name="user.participant.primaryKey"
+					:tooltip-message="user.participant.primaryKey + ' ' + t('deck', '(circle)')"
+					:is-no-user="true"
+					:disable-="true"
+					:size="32" />
+			</div>
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">
@@ -69,8 +87,11 @@ export default {
 			return this.users.slice(0, 3)
 		},
 		avatarUrl() {
-			return (session) => {
-				const user = session.participant.displayname
+			return (assignable) => {
+				if (assignable.type === 1) {
+					return 'icon-group'
+				}
+				const user = assignable.participant.primaryKey
 				const size = 32
 				const avatarUrl = OC.generateUrl('/avatar/{user}/{size}',
 					{
@@ -81,7 +102,7 @@ export default {
 			}
 		},
 		popover() {
-			if (!this.users || this.users.length < 0) {
+			if (!this.users || this.users.length === 0) {
 				return []
 			}
 			return [
@@ -89,19 +110,25 @@ export default {
 					return {
 						href: '#',
 						icon: this.avatarUrl(session),
-						text: session.participant.displayname,
+						text: session.participant.displayname + (session.type === 1 ? ' ' + t('deck', '(group)') : ''),
 					}
 				}),
 			]
 		},
-
+	},
+	methods: {
+		togglePopover() {
+			if (this.popover.length > 0) {
+				this.popoverVisible = !this.popoverVisible
+			}
+		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
 	.avatars {
-		margin: 0;
+		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
 		/deep/ .popovermenu {
@@ -118,14 +145,12 @@ export default {
 	.avatar-list {
 		float: right;
 		display: inline-flex;
+		padding-right: 8px;
 		flex-direction: row-reverse;
 		.avatardiv,
 		/deep/ .avatardiv {
 			width: 36px;
 			height: 36px;
-			margin-right: -8px;
-			border: 2px solid var(--color-main-background);
-			background-color: var(--color-main-background) !important;
 			box-sizing: content-box !important;
 			&.icon-more {
 				width: 32px;
@@ -134,6 +159,13 @@ export default {
 				background-color: var(--color-background-dark) !important;
 				cursor: pointer;
 			}
+			& {
+				margin-right: -12px;
+				transition: margin-right 0.2s ease-in-out;
+			}
+		}
+		&:hover div:nth-child(n+2) /deep/ .avatardiv {
+			margin-right: 1px;
 		}
 	}
 	.popovermenu {

src/components/cards/CardBadges.vue

@@ -97,19 +97,21 @@ export default {
 <style lang="scss" scoped>
 	.badges {
 		display: flex;
+		width: 100%;
 		flex-grow: 1;
 
 		.icon {
 			opacity: 0.5;
 			padding: 12px 14px;
-			margin-right: 10px;
+			padding-right: 4px;
+			margin-right: 5px;
 			background-position: left;
 			background-size: 16px;
 			span {
 				margin-left: 18px;
 			}
-			&.icon-filetype-text {
-				opacity: 1;
+			&.icon-edit {
+				opacity: 0.5;
 			}
 		}
 	}
@@ -124,6 +126,7 @@ export default {
 		display: flex;
 		align-items: center;
 		opacity: .5;
+		flex-shrink: 1;
 
 		.icon {
 			background-size: contain;
@@ -145,6 +148,9 @@ export default {
 
 		span {
 			margin-left: 20px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
 		}
 	}
 </style>

src/components/cards/CardItem.vue

@@ -196,8 +196,13 @@ export default {
 		},
 		assignCardToMe() {
 			this.copiedCard = Object.assign({}, this.card)
-			this.copiedCard.newUserUid = this.card.owner.uid
-			this.$store.dispatch('assignCardToUser', this.copiedCard)
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: OC.getCurrentUser().uid,
+					type: 0,
+				},
+			})
 		},
 		async loadStacksFromBoard(board) {
 			try {
@@ -234,6 +239,7 @@ export default {
 	}
 
 	.card {
+		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
 		border-radius: 3px;
 		font-size: 100%;

src/services/CardApi.js

@@ -105,8 +105,8 @@ export class CardApi {
 			})
 	}
 
-	assignUser(card) {
-		return axios.post(this.url(`/cards/${card.id}/assign`), { userId: card.newUserUid })
+	assignUser(cardId, id, type) {
+		return axios.post(this.url(`/cards/${cardId}/assign`), { userId: id, type: type })
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
@@ -120,8 +120,8 @@ export class CardApi {
 			})
 	}
 
-	removeUser(card) {
-		return axios.delete(this.url(`/cards/${card.id}/assign/${card.removeUserUid}`))
+	removeUser(cardId, id, type) {
+		return axios.put(this.url(`/cards/${cardId}/unassign`), { userId: id, type: type })
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)

src/store/card.js

@@ -198,12 +198,12 @@ export default {
 			const updatedCard = await apiClient[call](card)
 			commit('deleteCard', updatedCard)
 		},
-		async assignCardToUser({ commit }, card) {
-			const user = await apiClient.assignUser(card)
+		async assignCardToUser({ commit }, { card, assignee }) {
+			const user = await apiClient.assignUser(card.id, assignee.userId, assignee.type)
 			commit('assignCardToUser', user)
 		},
-		async removeUserFromCard({ commit }, card) {
-			const user = await apiClient.removeUser(card)
+		async removeUserFromCard({ commit }, { card, assignee }) {
+			const user = await apiClient.removeUser(card.id, assignee.userId, assignee.type)
 			commit('removeUserFromCard', user)
 		},
 		async addLabel({ commit }, data) {
@@ -219,7 +219,7 @@ export default {
 			commit('updateCardProperty', { property: 'description', card: updatedCard })
 		},
 		async updateCardDue({ commit }, card) {
-			const updatedCard = apiClient.updateCard(card)
+			const updatedCard = await apiClient.updateCard(card)
 			commit('updateCardProperty', { property: 'duedate', card: updatedCard })
 		},
 	},

src/store/main.js

@@ -78,8 +78,12 @@ export default new Vuex.Store({
 		boards: state => {
 			return state.boards
 		},
-		sharees: state => {
-			return state.sharees
+		assignables: state => {
+			return [
+				...state.assignableUsers.map((user) => ({ ...user, type: 0 })),
+				...state.currentBoard.acl.filter((acl) => acl.type === 1 && typeof acl.participant === 'object').map((group) => ({ ...group.participant, type: 1 })),
+				...state.currentBoard.acl.filter((acl) => acl.type === 7 && typeof acl.participant === 'object').map((circle) => ({ ...circle.participant, type: 7 })),
+			]
 		},
 		noneArchivedBoards: state => {
 			return state.boards.filter(board => {

tests/unit/Service/CardServiceTest.php

@@ -39,6 +39,9 @@ use OCA\Deck\Notification\NotificationHelper;
 use OCA\Deck\StatusException;
 use OCP\Activity\IEvent;
 use OCP\Comments\ICommentsManager;
+use OCP\EventDispatcher\ABroadcastedEvent;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IUser;
 use OCP\IUserManager;
 use PHPUnit\Framework\MockObject\MockObject;
@@ -91,7 +94,7 @@ class CardServiceTest extends TestCase {
 		$this->activityManager = $this->createMock(ActivityManager::class);
 		$this->commentsManager = $this->createMock(ICommentsManager::class);
 		$this->userManager = $this->createMock(IUserManager::class);
-		$this->eventDispatcher = $this->createMock(EventDispatcherInterface::class);
+		$this->eventDispatcher = $this->createMock(IEventDispatcher::class);
 		$this->changeHelper = $this->createMock(ChangeHelper::class);
 		$this->cardService = new CardService(
 			$this->cardMapper,
@@ -318,102 +321,4 @@ class CardServiceTest extends TestCase {
 		$this->cardService->removeLabel(123, 999);
 	}
 
-	public function testAssignUser() {
-		$assignments = [];
-		$this->assignedUsersMapper->expects($this->once())
-			->method('find')
-			->with(123)
-			->willReturn($assignments);
-		$assignment = new AssignedUsers();
-		$assignment->setCardId(123);
-		$assignment->setParticipant('admin');
-		$this->cardMapper->expects($this->once())
-			->method('findBoardId')
-			->willReturn(1);
-		$this->permissionService->expects($this->once())
-			->method('findUsers')
-			->with(1)
-			->willReturn(['admin' => 'admin', 'user1' => 'user1']);
-		$this->assignedUsersMapper->expects($this->once())
-			->method('insert')
-			->with($assignment)
-			->willReturn($assignment);
-		$actual = $this->cardService->assignUser(123, 'admin');
-		$this->assertEquals($assignment, $actual);
-	}
-
-	public function testAssignUserNoParticipant() {
-		$this->expectException(BadRequestException::class);
-		$this->expectExceptionMessage('The user is not part of the board');
-		$assignments = [];
-		$this->assignedUsersMapper->expects($this->once())
-			->method('find')
-			->with(123)
-			->willReturn($assignments);
-		$assignment = new AssignedUsers();
-		$assignment->setCardId(123);
-		$assignment->setParticipant('admin');
-		$this->cardMapper->expects($this->once())
-			->method('findBoardId')
-			->willReturn(1);
-		$this->permissionService->expects($this->once())
-			->method('findUsers')
-			->with(1)
-			->willReturn(['user2' => 'user2', 'user1' => 'user1']);
-		$actual = $this->cardService->assignUser(123, 'admin');
-	}
-
-	public function testAssignUserExisting() {
-		$this->expectException(BadRequestException::class);
-		$this->expectExceptionMessage('The user is already assigned to the card');
-		$assignment = new AssignedUsers();
-		$assignment->setCardId(123);
-		$assignment->setParticipant('admin');
-		$assignments = [
-			$assignment
-		];
-		$this->assignedUsersMapper->expects($this->once())
-			->method('find')
-			->with(123)
-			->willReturn($assignments);
-		$actual = $this->cardService->assignUser(123, 'admin');
-		$this->assertFalse($actual);
-	}
-
-	public function testUnassignUserExisting() {
-		$assignment = new AssignedUsers();
-		$assignment->setCardId(123);
-		$assignment->setParticipant('admin');
-		$assignments = [
-			$assignment
-		];
-		$this->assignedUsersMapper->expects($this->once())
-			->method('find')
-			->with(123)
-			->willReturn($assignments);
-		$this->assignedUsersMapper->expects($this->once())
-			->method('delete')
-			->with($assignment)
-			->willReturn($assignment);
-		$actual = $this->cardService->unassignUser(123, 'admin');
-		$this->assertEquals($assignment, $actual);
-	}
-
-	public function testUnassignUserNotExisting() {
-		$this->expectException(NotFoundException::class);
-		$assignment = new AssignedUsers();
-		$assignment->setCardId(123);
-		$assignment->setParticipant('admin');
-		$assignments = [
-			$assignment
-		];
-		$this->assignedUsersMapper->expects($this->once())
-			->method('find')
-			->with(123)
-			->willReturn($assignments);
-		$this->expectException(NotFoundException::class);
-		$actual = $this->cardService->unassignUser(123, 'user');
-	}
-
-
 }

tests/unit/controller/CardApiControllerTest.php

@@ -22,6 +22,7 @@
  */
 namespace OCA\Deck\Controller;
 
+use OCA\Deck\Service\AssignmentService;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\IRequest;
@@ -37,12 +38,14 @@ class CardApiControllerTest extends \Test\TestCase {
 	private $userId = 'admin';
 	private $cardExample;
 	private $stackExample;
+	private $assignmentService;
 
 	public function setUp(): void {
 		parent::setUp();
 
 		$this->request = $this->createMock(IRequest::class);
 		$this->cardService = $this->createMock(CardService::class);
+		$this->assignmentService = $this->createMock(AssignmentService::class);
 
 		$this->cardExample['id'] = 1;
 		$this->stackExample['id'] = 1;
@@ -51,6 +54,7 @@ class CardApiControllerTest extends \Test\TestCase {
 			$appName = 'deck',
 			$this->request,
 			$this->cardService,
+			$this->assignmentService,
 			$this->userId
 		);
 	}