From 27380091417b1cef4126fee61c4036218c93f791 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 19 Dec 2024 16:42:29 +0100
Subject: [PATCH] feat: introduce PollManager

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/PublicShareAuthSidebar.vue                |  3 +
 src/PublicShareSidebar.vue                    |  3 +
 src/components/NewMessage/NewMessage.vue      | 44 -------------
 .../NewMessage/NewMessageAttachments.vue      |  8 ++-
 .../PollViewer/PollDraftHandler.vue           |  8 +--
 src/components/PollViewer/PollEditor.vue      |  9 +--
 src/components/PollViewer/PollManager.vue     | 66 +++++++++++++++++++
 src/views/FilesSidebarChatView.vue            |  3 +
 src/views/MainView.vue                        |  3 +
 9 files changed, 93 insertions(+), 54 deletions(-)
 create mode 100644 src/components/PollViewer/PollManager.vue

diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
index e0976aff082..a1020d3d952 100644
--- a/src/PublicShareAuthSidebar.vue
+++ b/src/PublicShareAuthSidebar.vue
@@ -14,6 +14,7 @@
 				<TopBar is-in-call is-sidebar />
 				<CallView :token="token" is-sidebar />
 				<ChatView is-sidebar />
+				<PollManager />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
 			</template>
@@ -30,6 +31,7 @@ import { t } from '@nextcloud/l10n'
 import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
 import MediaSettings from './components/MediaSettings/MediaSettings.vue'
+import PollManager from './components/PollViewer/PollManager.vue'
 import PollViewer from './components/PollViewer/PollViewer.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/UIShared/TransitionWrapper.vue'
@@ -51,6 +53,7 @@ export default {
 		CallView,
 		ChatView,
 		MediaSettings,
+		PollManager,
 		PollViewer,
 		TopBar,
 		TransitionWrapper,
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 42124922432..dda3c90476a 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -25,6 +25,7 @@
 				<CallButton v-if="!isInCall" class="call-button" />
 				<CallFailedDialog v-if="connectionFailed" :token="token" />
 				<ChatView is-sidebar />
+				<PollManager />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
 			</template>
@@ -44,6 +45,7 @@ import CallFailedDialog from './components/CallView/CallFailedDialog.vue'
 import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
 import MediaSettings from './components/MediaSettings/MediaSettings.vue'
+import PollManager from './components/PollViewer/PollManager.vue'
 import PollViewer from './components/PollViewer/PollViewer.vue'
 import CallButton from './components/TopBar/CallButton.vue'
 import TopBar from './components/TopBar/TopBar.vue'
@@ -71,6 +73,7 @@ export default {
 		MediaSettings,
 		NcButton,
 		NcLoadingIcon,
+		PollManager,
 		PollViewer,
 		TopBar,
 		TransitionWrapper,
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 7d504d25454..bb9499220ca 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -29,7 +29,6 @@
 				:can-create-poll="canCreatePoll"
 				@open-file-upload="openFileUploadWindow"
 				@handle-file-share="showFilePicker = true"
-				@toggle-poll-editor="togglePollEditor"
 				@update-new-file-dialog="updateNewFileDialog" />
 
 			<!-- Input area -->
@@ -152,17 +151,6 @@
 			</template>
 		</form>
 
-		<!-- Poll creation dialog -->
-		<PollEditor v-if="showPollEditor"
-			ref="pollEditor"
-			:token="token"
-			@close="togglePollEditor" />
-
-		<PollDraftHandler v-if="canCreatePollDrafts && showPollDraftHandler"
-			:token="token"
-			:show-create-button="!showPollEditor"
-			@close="togglePollDraftHandler" />
-
 		<!-- New file creation dialog -->
 		<NewMessageNewFileDialog v-if="showNewFileDialog !== -1"
 			:token="token"
@@ -206,8 +194,6 @@ import NewMessageAudioRecorder from './NewMessageAudioRecorder.vue'
 import NewMessageChatSummary from './NewMessageChatSummary.vue'
 import NewMessageNewFileDialog from './NewMessageNewFileDialog.vue'
 import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
-import PollDraftHandler from '../PollViewer/PollDraftHandler.vue'
-import PollEditor from '../PollViewer/PollEditor.vue'
 import Quote from '../Quote.vue'
 
 import { useChatMentions } from '../../composables/useChatMentions.ts'
@@ -239,8 +225,6 @@ export default {
 		NewMessageAudioRecorder,
 		NewMessageChatSummary,
 		NewMessageNewFileDialog,
-		PollEditor,
-		PollDraftHandler,
 		NewMessageTypingIndicator,
 		Quote,
 		// Icons
@@ -328,8 +312,6 @@ export default {
 			silentChat: false,
 			// True when the audio recorder component is recording
 			isRecordingAudio: false,
-			showPollEditor: false,
-			showPollDraftHandler: false,
 			showNewFileDialog: -1,
 			showFilePicker: false,
 			clipboardTimeStamp: null,
@@ -415,10 +397,6 @@ export default {
 				&& this.conversation.type !== CONVERSATION.TYPE.NOTE_TO_SELF
 		},
 
-		canCreatePollDrafts() {
-			return hasTalkFeature(this.token, 'talk-polls-drafts') && this.$store.getters.isModerator
-		},
-
 		currentConversationIsJoined() {
 			return this.$store.getters.currentConversationIsJoined
 		},
@@ -583,8 +561,6 @@ export default {
 		EventBus.on('upload-discard', this.handleUploadSideEffects)
 		EventBus.on('retry-message', this.handleRetryMessage)
 		EventBus.on('smart-picker-open', this.handleOpenTributeMenu)
-		EventBus.on('poll-editor-open', this.fillPollEditorFromDraft)
-		EventBus.on('poll-drafts-open', this.togglePollDraftHandler)
 
 		if (!this.$store.getters.areFileTemplatesInitialised) {
 			this.$store.dispatch('getFileTemplates')
@@ -597,8 +573,6 @@ export default {
 		EventBus.off('upload-discard', this.handleUploadSideEffects)
 		EventBus.off('retry-message', this.handleRetryMessage)
 		EventBus.off('smart-picker-open', this.handleOpenTributeMenu)
-		EventBus.off('poll-editor-open', this.fillPollEditorFromDraft)
-		EventBus.off('poll-drafts-open', this.togglePollDraftHandler)
 	},
 
 	methods: {
@@ -916,24 +890,6 @@ export default {
 			this.isRecordingAudio = payload
 		},
 
-		togglePollEditor() {
-			this.showPollEditor = !this.showPollEditor
-		},
-
-		fillPollEditorFromDraft(id) {
-			const isPollEditorOpened = this.showPollEditor
-			this.showPollEditor = true
-			this.$nextTick(() => {
-				this.$refs.pollEditor?.fillPollEditorFromDraft(id, isPollEditorOpened)
-				// Wait for editor to be mounted and filled before unmounting drafts dialog
-				this.togglePollDraftHandler()
-			})
-		},
-
-		togglePollDraftHandler() {
-			this.showPollDraftHandler = !this.showPollDraftHandler
-		},
-
 		focusInput() {
 			if (this.isMobileDevice) {
 				return
diff --git a/src/components/NewMessage/NewMessageAttachments.vue b/src/components/NewMessage/NewMessageAttachments.vue
index 741bdbd7799..b33d49dbaa0 100644
--- a/src/components/NewMessage/NewMessageAttachments.vue
+++ b/src/components/NewMessage/NewMessageAttachments.vue
@@ -45,7 +45,7 @@
 
 		<NcActionButton v-if="canCreatePoll"
 			close-after-click
-			@click="$emit('toggle-poll-editor')">
+			@click="showPollEditor">
 			<template #icon>
 				<PollIcon :size="20" />
 			</template>
@@ -119,7 +119,7 @@ export default {
 		},
 	},
 
-	emits: ['update-new-file-dialog', 'toggle-poll-editor', 'open-file-upload', 'handle-file-share'],
+	emits: ['update-new-file-dialog', 'open-file-upload', 'handle-file-share'],
 
 	computed: {
 		fileTemplateOptions() {
@@ -139,6 +139,10 @@ export default {
 		showSmartPicker() {
 			EventBus.emit('smart-picker-open')
 		},
+
+		showPollEditor() {
+			EventBus.emit('poll-editor-open', { id: null, fromDrafts: false })
+		},
 	},
 }
 </script>
diff --git a/src/components/PollViewer/PollDraftHandler.vue b/src/components/PollViewer/PollDraftHandler.vue
index bec69f26fe7..e9186a18343 100644
--- a/src/components/PollViewer/PollDraftHandler.vue
+++ b/src/components/PollViewer/PollDraftHandler.vue
@@ -27,7 +27,7 @@
 				draft
 				@click="openPollEditor" />
 		</div>
-		<template v-if="props.showCreateButton" #actions>
+		<template v-if="!props.editorOpened" #actions>
 			<NcButton @click="openPollEditor(null)">
 				{{ t('spreed', 'Create new poll') }}
 			</NcButton>
@@ -54,7 +54,7 @@ import { usePollsStore } from '../../stores/polls.ts'
 
 const props = defineProps<{
 	token: string,
-	showCreateButton?: boolean,
+	editorOpened?: boolean,
 }>()
 const emit = defineEmits<{
 	(event: 'close'): void,
@@ -72,8 +72,8 @@ const pollDrafts = computed(() => pollsStore.getDrafts(props.token))
  * Opens poll editor pre-filled from the draft
  * @param id poll draft ID
  */
-function openPollEditor(id) {
-	EventBus.emit('poll-editor-open', id)
+function openPollEditor(id: number|null) {
+	EventBus.emit('poll-editor-open', { id, fromDrafts: !props.editorOpened })
 }
 </script>
 
diff --git a/src/components/PollViewer/PollEditor.vue b/src/components/PollViewer/PollEditor.vue
index 1113ab75ebb..9ea4cc73482 100644
--- a/src/components/PollViewer/PollEditor.vue
+++ b/src/components/PollViewer/PollEditor.vue
@@ -223,14 +223,15 @@ async function createPoll() {
 /**
  * Pre-fills form from the draft
  * @param id poll draft ID
- * @param isAlreadyOpened poll draft ID
+ * @param fromDrafts whether editor was opened from drafts handler
  */
-function fillPollEditorFromDraft(id: number|null, isAlreadyOpened: boolean) {
-	if (!isAlreadyOpened) {
+function fillPollEditorFromDraft(id: number|null, fromDrafts: boolean) {
+	if (fromDrafts) {
+		// Show 'Back' button, do not reset until closed
 		isOpenedFromDraft.value = true
 	}
 
-	if (pollsStore.drafts[props.token][id]) {
+	if (id && pollsStore.drafts[props.token][id]) {
 		fillPollForm(pollsStore.drafts[props.token][id])
 	}
 }
diff --git a/src/components/PollViewer/PollManager.vue b/src/components/PollViewer/PollManager.vue
new file mode 100644
index 00000000000..107be228559
--- /dev/null
+++ b/src/components/PollViewer/PollManager.vue
@@ -0,0 +1,66 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { nextTick, computed, onMounted, onBeforeUnmount, ref } from 'vue'
+
+import PollDraftHandler from './PollDraftHandler.vue'
+import PollEditor from './PollEditor.vue'
+
+import { useStore } from '../../composables/useStore.js'
+import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
+import { EventBus } from '../../services/EventBus.ts'
+
+const store = useStore()
+
+const pollEditorRef = ref(null)
+
+const showPollEditor = ref(false)
+const showPollDraftHandler = ref(false)
+
+const token = computed(() => store.getters.getConversationSettingsToken() || store.getters.getToken())
+const canCreatePollDrafts = computed(() => {
+	return hasTalkFeature(token.value, 'talk-polls-drafts') && store.getters.isModerator
+})
+
+onMounted(() => {
+	EventBus.on('poll-editor-open', openPollEditor)
+	EventBus.on('poll-drafts-open', openPollDraftHandler)
+})
+
+onBeforeUnmount(() => {
+	EventBus.off('poll-editor-open', openPollEditor)
+	EventBus.off('poll-drafts-open', openPollDraftHandler)
+})
+
+const openPollDraftHandler = () => {
+	showPollDraftHandler.value = true
+}
+
+const openPollEditor = ({ id, fromDrafts }: { id: number|null, fromDrafts: boolean }) => {
+	showPollEditor.value = true
+	nextTick(() => {
+		pollEditorRef.value?.fillPollEditorFromDraft(id, fromDrafts)
+		// Wait for editor to be mounted and filled before unmounting drafts dialog to avoid issues when inserting nodes
+		showPollDraftHandler.value = false
+	})
+}
+
+</script>
+
+<template>
+	<div>
+		<!-- Poll creation dialog -->
+		<PollEditor v-if="showPollEditor"
+			ref="pollEditorRef"
+			:token="token"
+			@close="showPollEditor = false" />
+		<!-- Poll drafts dialog -->
+		<PollDraftHandler v-if="canCreatePollDrafts && showPollDraftHandler"
+			:token="token"
+			:editor-opened="showPollEditor"
+			@close="showPollDraftHandler = false" />
+	</div>
+</template>
diff --git a/src/views/FilesSidebarChatView.vue b/src/views/FilesSidebarChatView.vue
index deccbb206ec..8c5ec678665 100644
--- a/src/views/FilesSidebarChatView.vue
+++ b/src/views/FilesSidebarChatView.vue
@@ -8,6 +8,7 @@
 		<CallButton v-if="!isInCall" class="talk-tab__call-button" />
 		<CallFailedDialog v-if="connectionFailed" :token="token" />
 		<ChatView class="talk-tab__chat-view" is-sidebar />
+		<PollManager />
 		<PollViewer />
 		<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
 	</div>
@@ -17,6 +18,7 @@
 import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import ChatView from '../components/ChatView.vue'
 import MediaSettings from '../components/MediaSettings/MediaSettings.vue'
+import PollManager from '../components/PollViewer/PollManager.vue'
 import PollViewer from '../components/PollViewer/PollViewer.vue'
 import CallButton from '../components/TopBar/CallButton.vue'
 
@@ -31,6 +33,7 @@ export default {
 		CallFailedDialog,
 		ChatView,
 		MediaSettings,
+		PollManager,
 		PollViewer,
 	},
 
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 9b29ee78cd6..e1f45ccc420 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -10,6 +10,7 @@
 			<TopBar :is-in-call="isInCall" />
 			<CallView v-if="isInCall" :token="token" />
 			<ChatView v-else />
+			<PollManager />
 			<PollViewer />
 			<CallFailedDialog v-if="connectionFailed" :token="token" />
 		</template>
@@ -23,6 +24,7 @@ import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import CallView from '../components/CallView/CallView.vue'
 import ChatView from '../components/ChatView.vue'
 import LobbyScreen from '../components/LobbyScreen.vue'
+import PollManager from '../components/PollViewer/PollManager.vue'
 import PollViewer from '../components/PollViewer/PollViewer.vue'
 import TopBar from '../components/TopBar/TopBar.vue'
 
@@ -36,6 +38,7 @@ export default {
 		CallFailedDialog,
 		ChatView,
 		LobbyScreen,
+		PollManager,
 		PollViewer,
 		TopBar,
 	},