Create PollVOtersDetails component

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>

2 files changed, 67 insertions, 0 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index 3b94890d0..5c68f80b9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -126,6 +126,8 @@
 								<p>
 									{{ option }}
 								</p>
+								<PollVotersDetails v-if="details"
+									:details="details" />
 								<p class="percentage">
 									{{ getVotePercentage(index) + '%' }}
 								</p>
@@ -166,6 +168,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import { PARTICIPANT } from '../../../../../constants.js'
+import PollVotersDetails from './PollVotersDetails.vue'
 
 export default {
 
@@ -177,6 +180,7 @@ export default {
 		NcButton,
 		PollIcon,
 		NcProgressBar,
+		PollVotersDetails,
 	},
 
 	props: {
@@ -272,6 +276,14 @@ export default {
 			return this.status === 1
 		},
 
+		details() {
+			if (!this.pollLoaded || this.pollIsOpen) {
+				return undefined
+			} else {
+				return this.poll.details
+			}
+		},
+
 		checkboxRadioSwitchType() {
 			if (this.pollLoaded) {
 				return this.poll.maxVotes === 0 ? 'checkbox' : 'radio'
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
new file mode 100644
index 000000000..536544c89
--- /dev/null
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -0,0 +1,55 @@
+`<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="poll-voters-details">
+		<AvatarWrapper v-for="(item, index) in details"
+			:id="item.actorId"
+			:key="index" />
+	</div>
+</template>
+
+<script>
+import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+export default {
+
+	name: 'PollVotersDetails',
+
+	components:	{
+		AvatarWrapper,
+	},
+
+	props: {
+		details: {
+			type: Array,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.poll-voters-details {
+	display: flex;
+}
+
+</style>