From 1dd81b4cad3a917af9811258ecf11c5b0b778ece Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 14 Oct 2024 13:18:29 +0200
Subject: [PATCH] feat: browse poll drafts from poll editor and shared items

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/Poll.vue              | 31 ++++++-
 src/components/NewMessage/NewMessage.vue      | 13 +++
 .../NewMessage/NewMessagePollEditor.vue       | 26 +++++-
 .../PollViewer/PollDraftHandler.vue           | 84 +++++++++++++++++++
 .../SharedItems/SharedItemsTab.vue            | 24 ++++++
 5 files changed, 174 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PollViewer/PollDraftHandler.vue

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index ae9f9423a735..07950d4b2ec5 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -5,7 +5,16 @@
 
 <template>
 	<!-- Poll card -->
-	<a v-if="!showAsButton"
+	<div v-if="draft" class="poll-card" @click="openDraft">
+		<span class="poll-card__header">
+			<PollIcon :size="20" />
+			<span>{{ name }}</span>
+		</span>
+		<span class="poll-card__footer">
+			{{ pollFooterText }}
+		</span>
+	</div>
+	<a v-else-if="!showAsButton"
 		v-intersection-observer="getPollData"
 		:aria-label="t('spreed', 'Poll')"
 		class="poll-card"
@@ -34,7 +43,7 @@ import { vIntersectionObserver as IntersectionObserver } from '@vueuse/component
 
 import PollIcon from 'vue-material-design-icons/Poll.vue'
 
-import { t } from '@nextcloud/l10n'
+import { t, n } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
@@ -73,8 +82,15 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		draft: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
+	emits: ['click'],
+
 	setup() {
 		return {
 			pollsStore: usePollsStore(),
@@ -83,7 +99,9 @@ export default {
 
 	computed: {
 		poll() {
-			return this.pollsStore.getPoll(this.token, this.id)
+			return !this.draft
+				? this.pollsStore.getPoll(this.token, this.id)
+				: this.pollsStore.drafts[this.token][this.id]
 		},
 
 		pollFooterText() {
@@ -91,6 +109,8 @@ export default {
 				return this.poll?.votedSelf.length > 0
 					? t('spreed', 'Open poll • You voted already')
 					: t('spreed', 'Open poll • Click to vote')
+			} else if (this.draft) {
+				return n('spreed', 'Poll draft • %n option', 'Poll draft • %n options', this.poll?.options?.length)
 			} else {
 				return this.poll?.status === POLL.STATUS.CLOSED
 					? t('spreed', 'Poll • Ended')
@@ -101,6 +121,7 @@ export default {
 
 	methods: {
 		t,
+		n,
 		getPollData() {
 			if (!this.poll) {
 				this.pollsStore.getPollData({
@@ -110,6 +131,10 @@ export default {
 			}
 		},
 
+		openDraft() {
+			this.$emit('click', this.id)
+		},
+
 		openPoll() {
 			this.pollsStore.setActivePoll({
 				token: this.token,
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 1bb94893d417..29efd484c0c6 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -151,6 +151,10 @@
 			:token="token"
 			@close="togglePollEditor" />
 
+		<PollDraftHandler v-if="showPollDraftHandler"
+			:token="token"
+			@close="togglePollDraftHandler" />
+
 		<!-- New file creation dialog -->
 		<NewMessageNewFileDialog v-if="showNewFileDialog !== -1"
 			:token="token"
@@ -194,6 +198,7 @@ import NewMessageAudioRecorder from './NewMessageAudioRecorder.vue'
 import NewMessageNewFileDialog from './NewMessageNewFileDialog.vue'
 import NewMessagePollEditor from './NewMessagePollEditor.vue'
 import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
+import PollDraftHandler from '../PollViewer/PollDraftHandler.vue'
 import Quote from '../Quote.vue'
 
 import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
@@ -226,6 +231,7 @@ export default {
 		NewMessageAudioRecorder,
 		NewMessageNewFileDialog,
 		NewMessagePollEditor,
+		PollDraftHandler,
 		NewMessageTypingIndicator,
 		Quote,
 		// Icons
@@ -301,6 +307,7 @@ export default {
 			// True when the audio recorder component is recording
 			isRecordingAudio: false,
 			showPollEditor: false,
+			showPollDraftHandler: false,
 			showNewFileDialog: -1,
 			showFilePicker: false,
 			// Check empty template by default
@@ -538,6 +545,7 @@ export default {
 		EventBus.on('upload-discard', this.handleUploadSideEffects)
 		EventBus.on('retry-message', this.handleRetryMessage)
 		EventBus.on('smart-picker-open', this.handleOpenTributeMenu)
+		EventBus.on('poll-drafts-open', this.togglePollDraftHandler)
 
 		if (!this.$store.getters.areFileTemplatesInitialised) {
 			this.$store.dispatch('getFileTemplates')
@@ -550,6 +558,7 @@ export default {
 		EventBus.off('upload-discard', this.handleUploadSideEffects)
 		EventBus.off('retry-message', this.handleRetryMessage)
 		EventBus.off('smart-picker-open', this.handleOpenTributeMenu)
+		EventBus.off('poll-drafts-open', this.togglePollDraftHandler)
 	},
 
 	methods: {
@@ -892,6 +901,10 @@ export default {
 			this.showPollEditor = !this.showPollEditor
 		},
 
+		togglePollDraftHandler() {
+			this.showPollDraftHandler = !this.showPollDraftHandler
+		},
+
 		async autoComplete(search, callback) {
 			const response = await searchPossibleMentions(this.token, search)
 			if (!response) {
diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index 1873be3d25c2..9bcb0b5397b7 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -12,7 +12,17 @@
 		<p class="poll-editor__caption">
 			{{ t('spreed', 'Question') }}
 		</p>
-		<NcTextField :value.sync="pollForm.question" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
+		<div class="poll-editor__wrapper">
+			<NcTextField :value.sync="pollForm.question" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
+			<NcActions v-if="supportPollDrafts" force-menu>
+				<NcActionButton v-if="isModerator" close-after-click @click="openPollDraftHandler">
+					<template #icon>
+						<IconFileEdit :size="20" />
+					</template>
+					{{ t('spreed', 'Browse poll drafts') }}
+				</NcActionButton>
+			</NcActions>
+		</div>
 
 		<!-- Poll options -->
 		<p class="poll-editor__caption">
@@ -93,6 +103,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import { useStore } from '../../composables/useStore.js'
 import { POLL } from '../../constants.js'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
+import { EventBus } from '../../services/EventBus.js'
 import { usePollsStore } from '../../stores/polls.ts'
 import type { createPollParams } from '../../types/index.ts'
 
@@ -181,10 +192,23 @@ async function createPollDraft() {
 		showSuccess(t('spreed', 'Poll draft has been saved'))
 	}
 }
+
+/**
+ * Open a PollDraftHandler dialog
+ */
+function openPollDraftHandler() {
+	EventBus.emit('poll-drafts-open')
+}
 </script>
 
 <style lang="scss" scoped>
 .poll-editor {
+	&__wrapper {
+		display: flex;
+		align-items: flex-end;
+		gap: 4px;
+	}
+
 	&__caption {
 		margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline);
 		font-weight: bold;
diff --git a/src/components/PollViewer/PollDraftHandler.vue b/src/components/PollViewer/PollDraftHandler.vue
new file mode 100644
index 000000000000..556cd8c6408e
--- /dev/null
+++ b/src/components/PollViewer/PollDraftHandler.vue
@@ -0,0 +1,84 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcDialog class="drafts"
+		:name="t('spreed', 'Poll drafts')"
+		size="large"
+		close-on-click-outside
+		v-on="$listeners"
+		@update:open="emit('close')">
+		<EmptyView v-if="!pollDrafts.length"
+			class="drafts__empty"
+			:name="t('spreed', 'No poll drafts')"
+			:description="t('spreed', 'There is no poll drafts yet saved for this conversation')">
+			<template #icon>
+				<IconPoll />
+			</template>
+		</EmptyView>
+		<div v-else class="drafts__wrapper">
+			<Poll v-for="item in pollDrafts"
+				:id="item.id.toString()"
+				:key="item.id"
+				:token="token"
+				:name="item.question"
+				draft />
+		</div>
+	</NcDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconPoll from 'vue-material-design-icons/Poll.vue'
+
+import { t } from '@nextcloud/l10n'
+
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+
+import EmptyView from '../EmptyView.vue'
+import Poll from '../MessagesList/MessagesGroup/Message/MessagePart/Poll.vue'
+
+import { useStore } from '../../composables/useStore.js'
+import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
+import { usePollsStore } from '../../stores/polls.ts'
+
+const props = defineProps<{
+	token: string,
+}>()
+const emit = defineEmits<{
+	(event: 'close'): void,
+}>()
+
+const supportPollDrafts = hasTalkFeature(props.token, 'talk-polls-drafts')
+const store = useStore()
+const pollsStore = usePollsStore()
+/**
+ * Receive poll drafts for the current conversation as owner/moderator
+ */
+const isModerator = computed(() => (store.getters as unknown).isModerator)
+if (supportPollDrafts && isModerator.value) {
+	pollsStore.getPollDrafts(props.token)
+}
+const pollDrafts = computed(() => supportPollDrafts ? pollsStore.getDrafts(props.token) : [])
+</script>
+
+<style lang="scss" scoped>
+.drafts {
+	:deep(.dialog__content) {
+		min-height: 200px;
+	}
+
+	&__wrapper {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-gap: var(--default-grid-baseline);
+	}
+
+	&__empty {
+		margin: 0 !important;
+	}
+}
+</style>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index e2198d4beacc..62e16f08c093 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -8,6 +8,14 @@
 		<LoadingComponent v-if="loading" class="shared-items-tab__loading" />
 
 		<template v-else>
+			<NcButton v-if="supportPollDrafts && isModerator"
+				wide
+				@click="openPollDraftHandler">
+				<template #icon>
+					<IconPoll :size="20" />
+				</template>
+				{{ t('spreed', 'Browse poll drafts') }}
+			</NcButton>
 			<!-- Shared items grouped by type -->
 			<template v-for="type in sharedItemsOrder">
 				<div v-if="sharedItems[type]" :key="type">
@@ -68,6 +76,7 @@
 <script>
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
+import IconPoll from 'vue-material-design-icons/Poll.vue'
 
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
@@ -88,6 +97,8 @@ import {
 	sharedItemsWithPreviewLimit,
 	sharedItemTitle,
 } from './sharedItemsConstants.js'
+import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
+import { EventBus } from '../../../services/EventBus.js'
 import { useSharedItemsStore } from '../../../stores/sharedItems.js'
 import { useSidebarStore } from '../../../stores/sidebar.js'
 
@@ -98,6 +109,7 @@ export default {
 	components: {
 		DotsHorizontal,
 		FolderMultipleImage,
+		IconPoll,
 		LoadingComponent,
 		NcAppNavigationCaption,
 		NcButton,
@@ -148,6 +160,14 @@ export default {
 			return this.$store.getters.conversation(this.token)
 		},
 
+		supportPollDrafts() {
+			return hasTalkFeature(this.token, 'talk-polls-drafts')
+		},
+
+		isModerator() {
+			return this.$store.getters.isModerator
+		},
+
 		loading() {
 			return !this.sharedItemsStore.overviewLoaded[this.token]
 		},
@@ -194,6 +214,10 @@ export default {
 		limit(type) {
 			return this.sharedItemsWithPreviewLimit.includes(type) ? 2 : 6
 		},
+
+		openPollDraftHandler() {
+			EventBus.emit('poll-drafts-open')
+		}
 	},
 }
 </script>