add circles to invitations

5 files changed, 37 insertions, 44 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index 5a09ae28..d8349346 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -146,6 +146,8 @@ export default {
 	--color-polls-background-yes: #ebf5d6;
 	--color-polls-background-no: #ffede9;
 	--color-polls-background-maybe: #fcf7e1;
+	--icon-polls: url('./assets/polls.svg');
+	--icon-circles: url('./assets/circles.svg');
 	--icon-polls-back: url('./assets/back.svg');
 	--icon-polls-confirmed: url('./assets/confirmed.svg');
 	--icon-polls-unconfirmed: url('./assets/unconfirmed.svg');
@@ -155,7 +157,6 @@ export default {
 	--icon-polls-yes: url('./assets/yes-vote.svg');
 	--icon-polls-no: url('./assets/no-vote.svg');
 	--icon-polls-maybe: url('./assets/maybe-vote.svg');
-	--icon-polls: url('./assets/polls.svg');
 	--icon-polls-handle: url('./assets/handle.svg');
 	--icon-polls-mail: url('./assets/mail.svg');
 	--icon-polls-sidebar-toggle: url('./assets/sidebar-toggle.svg');
@@ -172,6 +173,10 @@ export default {
 	background-image: var(--icon-polls);
 }
 
+.icon-circles {
+	background-image: var(--icon-circles);
+}
+
 .icon-polls-back {
 	background-image: var(--icon-polls-back);
 }
diff --git a/src/js/assets/circles.svg b/src/js/assets/circles.svg
new file mode 100644
index 00000000..9bd9ab77
--- /dev/null
+++ b/src/js/assets/circles.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 57" width="64" height="64">
+	<path d="M7.1 28.5A21.4 21.4 0 0 1 28.5 7.1m10.7 40A21.4 21.4 0 0 1 10 39M39.2 10A21.4 21.4 0 0 1 47 39.2"
+		fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+	<circle cx="28.5" cy="7.1" r="6.5" fill="#000" />
+	<circle cx="39.2" cy="-10" r="6.5" transform="rotate(90)" fill="#000" />
+	<circle cx="39.2" cy="-47" r="6.5" transform="rotate(90)" fill="#000" />
+</svg>
diff --git a/src/js/components/Base/UserItem.vue b/src/js/components/Base/UserItem.vue
index 511560e9..30b1effe 100644
--- a/src/js/components/Base/UserItem.vue
+++ b/src/js/components/Base/UserItem.vue
@@ -27,21 +27,21 @@
 			:menu-position="menuPosition"
 			:show-user-status="showUserStatus"
 			:user="userId"
-			:display-name="resolveDisplayName"
+			:display-name="displayName"
 			:is-no-user="isNoUser" />
 
-		<div v-if="icon" :class="iconClass" />
+		<div v-if="icon" :class="['type-icon', iconClass]" />
 
 		<div v-if="!hideNames" class="user-item__name">
-			{{ resolveDisplayName }}
+			{{ displayName }}
 		</div>
 		<slot />
 	</div>
 </template>
 
 <script>
-import { Avatar } from '@nextcloud/vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { Avatar } from '@nextcloud/vue'
 
 export default {
 	name: 'UserItem',
@@ -94,6 +94,7 @@ export default {
 	data() {
 		return {
 			nothidden: false,
+			circleName: '',
 		}
 	},
 
@@ -116,6 +117,8 @@ export default {
 					return 'icon-share'
 				} else if (this.type === 'contactGroup') {
 					return 'icon-group'
+				} else if (this.type === 'circle') {
+					return 'icon-circles'
 				}
 				return 'icon-' + this.type
 			} else {
@@ -123,32 +126,6 @@ export default {
 			}
 		},
 
-		resolveDisplayName() {
-			let displayName = ''
-
-			if (this.type === 'user') {
-				displayName = this.displayName
-			} else if (this.type === 'contact' || this.type === 'external') {
-				displayName = this.userId
-				if (this.userEmail) {
-					displayName = displayName + ' (' + this.userEmail + ')'
-				}
-			} else if (this.type === 'email') {
-				displayName = this.userEmail
-				if (this.userId) {
-					displayName = this.userId + ' (' + displayName + ')'
-				}
-			} else if (this.type === 'group') {
-				displayName = this.userId + ' (' + t('polls', 'Group') + ')'
-			} else if (this.type === 'contactGroup') {
-				displayName = this.userId + ' (' + t('polls', 'Contact Group') + ')'
-			} else if (this.type === 'public') {
-				displayName = t('polls', 'Public share')
-			} else {
-				displayName = t('polls', 'Unknown user')
-			}
-			return displayName
-		},
 	},
 }
 
@@ -166,6 +143,10 @@ export default {
 	margin: 2px 4px;
 }
 
+.type-icon {
+	background-size: 16px;
+}
+
 .user-item__name {
 	flex: 1;
 	min-width: 50px;
diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue
index fb4a4d2a..7e91667e 100644
--- a/src/js/components/SideBar/SideBarTabShare.vue
+++ b/src/js/components/SideBar/SideBarTabShare.vue
@@ -62,7 +62,7 @@
 				:preselect-first="true"
 				:placeholder="placeholder"
 				label="displayName"
-				track-by="user"
+				track-by="userId"
 				@select="addShare"
 				@search-change="loadUsersAsync">
 				<template slot="selection" slot-scope="{ values, search, isOpen }">
@@ -96,7 +96,7 @@
 				</li>
 			</TransitionGroup>
 
-			<ButtonDiv :title="t('polls', 'Add a public link')" icon="icon-add" @click="addShare({type: 'public', user: '', emailAddress: ''})" />
+			<ButtonDiv :title="t('polls', 'Add a public link')" icon="icon-add" @click="addShare({type: 'public', userId: '', emailAddress: ''})" />
 		</ConfigBox>
 
 		<ConfigBox v-if="unsentInvitations.length" :title="t('polls', 'Unsent invitations')" icon-class="icon-polls-mail">
@@ -112,10 +112,10 @@
 							{{ t('polls', 'Send invitation mail') }}
 						</ActionButton>
 						<ActionButton
-							v-if="share.type === 'contactGroup'"
+							v-if="share.type === 'contactGroup' || share.type === 'circle'"
 							icon="icon-toggle-filelist"
-							@click="resolveContactGroup(share)">
-							{{ t('polls', 'Resolve contact group into individual invitations') }}
+							@click="resolveGroup(share)">
+							{{ t('polls', 'Resolve into individual invitations') }}
 						</ActionButton>
 					</Actions>
 					<Actions>
@@ -178,8 +178,8 @@ export default {
 	},
 
 	methods: {
-		resolveContactGroup(share) {
-			this.$store.dispatch('poll/shares/resolveContactGroup', { share: share })
+		resolveGroup(share) {
+			this.$store.dispatch('poll/shares/resolveGroup', { share: share })
 				.then((response) => {
 					this.$store.dispatch('poll/shares/delete', { share: share })
 				})
@@ -234,7 +234,7 @@ export default {
 			this.$store
 				.dispatch('poll/shares/add', {
 					type: payload.type,
-					userId: payload.user,
+					userId: payload.userId,
 					userEmail: payload.emailAddress,
 				})
 				.catch(error => {
diff --git a/src/js/store/modules/subModules/shares.js b/src/js/store/modules/subModules/shares.js
index 940aeeb5..4253e29d 100644
--- a/src/js/store/modules/subModules/shares.js
+++ b/src/js/store/modules/subModules/shares.js
@@ -73,7 +73,7 @@ const getters = {
 
 	unsentInvitations: state => {
 		return state.list.filter(share => {
-			return (share.userEmail || share.type === 'group' || share.type === 'contactGroup') && !share.invitationSent
+			return (share.userEmail || share.type === 'group' || share.type === 'contactGroup' || share.type === 'circle') && !share.invitationSent
 		})
 	},
 
@@ -93,7 +93,7 @@ const actions = {
 			pollId: context.rootState.poll.id,
 			type: payload.type,
 			userId: payload.userId,
-			userEmail: payload.userEmail,
+			emailAddress: payload.userEmail,
 		})
 			.then((response) => {
 				context.commit('add', response.data.share)
@@ -144,9 +144,9 @@ const actions = {
 			})
 	},
 
-	resolveContactGroup(context, payload) {
-		const endPoint = 'apps/polls/share/resolveContactGroup'
-		return axios.post(generateUrl(endPoint.concat('/', payload.share.token)))
+	resolveGroup(context, payload) {
+		const endPoint = 'apps/polls/share/resolveGroup'
+		return axios.get(generateUrl(endPoint.concat('/', payload.share.token)))
 			.then((response) => {
 				response.data.shares.forEach((item) => {
 					context.commit('add', item)