Display poll result button in system message

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

2 files changed, 36 insertions, 3 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 5e55dac43..1ea27ae87 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -55,6 +55,14 @@ the main body of the message as well as a quote.
 					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 					<CallButton />
 				</div>
+				<div v-else-if="showResultsButton" class="message-body__main__text system-message">
+					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<!-- Displays only the "see results" button with the results modal -->
+					<Poll :id="messageParameters.poll.id"
+						:poll-name="messageParameters.poll.name"
+						:token="token"
+						:show-as-button="true" />
+				</div>
 				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
 					<RichText :text="message" :arguments="richParameters" :autolink="true" />
 				</div>
@@ -220,6 +228,7 @@ export default {
 		NcEmojiPicker,
 		EmoticonOutline,
 		NcPopover,
+		Poll,
 	},
 
 	mixins: [
@@ -457,6 +466,10 @@ export default {
 				&& !this.isInCall
 		},
 
+		showResultsButton() {
+			return this.systemMessage === 'poll_closed'
+		},
+
 		isSingleEmoji() {
 			const regex = emojiRegex()
 			let match
@@ -503,7 +516,7 @@ export default {
 						component: Location,
 						props: this.messageParameters[p],
 					}
-				} else if (type === 'talk-poll') {
+				} else if (type === 'talk-poll' && this.systemMessage !== 'poll_closed') {
 					const props = Object.assign({}, this.messageParameters[p])
 					// Add the token to the component props
 					props.token = this.token
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index b6f17f71b..8b4d112ab 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -21,7 +21,9 @@
 
 <template>
 	<div class="wrapper">
-		<a v-observe-visibility="getPollData"
+		<!-- Poll card -->
+		<a v-if="!showAsButton"
+			v-observe-visibility="getPollData"
 			:aria-label="t('spreed', 'Poll')"
 			class="poll"
 			role="button"
@@ -38,6 +40,13 @@
 
 		</a>
 
+		<!-- Poll results button in system message -->
+		<div v-else class="poll-closed">
+			<NcButton type="secondary" @click="openPoll">
+				{{ t('spreed', 'See results') }}
+			</NcButton>
+		</div>
+
 		<!-- voting and results dialog -->
 		<NcModal v-if="vote !== undefined && showModal"
 			size="small"
@@ -166,7 +175,7 @@ export default {
 		},
 
 		id: {
-			type: Number,
+			type: String,
 			required: true,
 		},
 
@@ -174,6 +183,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		showAsButton: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -503,6 +517,12 @@ export default {
 	}
 }
 
+.poll-closed {
+	display: flex;
+	justify-content: center;
+	margin-top: 4px;
+}
+
 // Upstream
 ::v-deep .checkbox-radio-switch {
 	&__label {