feat: save poll drafts from filled forms, created and closed polls

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/NewMessage/NewMessagePollEditor.vue

@@ -58,6 +58,14 @@
 			<NcButton type="tertiary" @click="emit('close')">
 				{{ t('spreed', 'Dismiss') }}
 			</NcButton>
+			<NcActions v-if="supportPollDrafts" force-menu>
+				<NcActionButton v-if="isModerator" :disabled="!isFilled" @click="createPollDraft">
+					<template #icon>
+						<IconFileEdit :size="20" />
+					</template>
+					{{ t('spreed', 'Save as draft') }}
+				</NcActionButton>
+			</NcActions>
 			<NcButton type="primary" :disabled="!isFilled" @click="createPoll">
 				{{ t('spreed', 'Create poll') }}
 			</NcButton>
@@ -69,16 +77,22 @@
 import { computed, nextTick, reactive, ref } from 'vue'
 
 import Close from 'vue-material-design-icons/Close.vue'
+import IconFileEdit from 'vue-material-design-icons/FileEdit.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
+import { showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 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 { usePollsStore } from '../../stores/polls.ts'
 import type { createPollParams } from '../../types/index.ts'
 
@@ -89,6 +103,9 @@ const emit = defineEmits<{
 	(event: 'close'): void,
 }>()
 
+const supportPollDrafts = hasTalkFeature(props.token, 'talk-polls-drafts')
+
+const store = useStore()
 const pollsStore = usePollsStore()
 
 const pollOption = ref(null)
@@ -120,6 +137,7 @@ const isMultipleAnswer = computed({
 	}
 })
 
+const isModerator = computed(() => (store.getters as unknown).isModerator)
 /**
  * Remove a previously added option
  * @param index option index
@@ -150,6 +168,19 @@ async function createPoll() {
 		emit('close')
 	}
 }
+
+/**
+ * Saves a poll draft for this conversation
+ */
+async function createPollDraft() {
+	const poll = await pollsStore.createPollDraft({
+		token: props.token,
+		form: pollForm,
+	})
+	if (poll) {
+		showSuccess(t('spreed', 'Poll draft has been saved'))
+	}
+}
 </script>
 
 <style lang="scss" scoped>

src/components/PollViewer/PollViewer.vue

@@ -71,8 +71,13 @@
 					@click="modalPage = 'voting'">
 					{{ t('spreed', 'Change your vote') }}
 				</NcButton>
-				<!-- End poll button-->
 				<NcActions v-if="canEndPoll" force-menu>
+					<NcActionButton v-if="supportPollDrafts" @click="createPollDraft">
+						<template #icon>
+							<IconFileEdit :size="20" />
+						</template>
+						{{ t('spreed', 'Save as draft') }}
+					</NcActionButton>
 					<NcActionButton class="critical" @click="endPoll">
 						{{ t('spreed', 'End poll') }}
 						<template #icon>
@@ -81,17 +86,27 @@
 					</NcActionButton>
 				</NcActions>
 			</div>
+			<div v-else-if="supportPollDrafts && selfIsOwnerOrModerator" class="poll-modal__actions">
+				<NcButton type="tertiary" @click="createPollDraft">
+					<template #icon>
+						<IconFileEdit :size="20" />
+					</template>
+					{{ t('spreed', 'Save as draft') }}
+				</NcButton>
+			</div>
 		</div>
 		<NcLoadingIcon v-else class="poll-modal__loading" />
 	</NcModal>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import IconFileEdit from 'vue-material-design-icons/FileEdit.vue'
 import FileLock from 'vue-material-design-icons/FileLock.vue'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
 
+import { showSuccess } from '@nextcloud/dialogs'
 import { t, n } from '@nextcloud/l10n'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -107,6 +122,7 @@ import PollVotersDetails from './PollVotersDetails.vue'
 import { useId } from '../../composables/useId.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { POLL } from '../../constants.js'
+import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.js'
 import { usePollsStore } from '../../stores/polls.ts'
 
@@ -124,6 +140,7 @@ export default {
 		PollVotersDetails,
 		// icons
 		FileLock,
+		IconFileEdit,
 		PollIcon,
 	},
 
@@ -133,37 +150,31 @@ export default {
 		const loading = ref(false)
 		const dialogHeaderId = `guest-welcome-header-${useId()}`
 
+		const pollsStore = usePollsStore()
+		const activePoll = computed(() => pollsStore.activePoll)
+		const name = computed(() => activePoll.value?.name)
+		const id = computed(() => activePoll.value?.id)
+		const token = computed(() => activePoll.value?.token)
+
+		const poll = computed(() => pollsStore.getPoll(token.value, id.value))
+		const supportPollDrafts = computed(() => hasTalkFeature(token.value, 'talk-polls-drafts'))
+
 		return {
 			isInCall: useIsInCall(),
-			pollsStore: usePollsStore(),
+			pollsStore,
 			voteToSubmit,
 			modalPage,
 			loading,
 			dialogHeaderId,
+			name,
+			id,
+			token,
+			poll,
+			supportPollDrafts,
 		}
 	},
 
 	computed: {
-		activePoll() {
-			return this.pollsStore.activePoll
-		},
-
-		name() {
-			return this.activePoll?.name
-		},
-
-		id() {
-			return this.activePoll?.id
-		},
-
-		token() {
-			return this.activePoll?.token
-		},
-
-		poll() {
-			return this.pollsStore.getPoll(this.token, this.id)
-		},
-
 		selfHasVoted() {
 			return this.poll?.votedSelf?.length > 0
 		},
@@ -324,6 +335,16 @@ export default {
 			this.loading = false
 		},
 
+		async createPollDraft() {
+			const poll = await this.pollsStore.createPollDraft({
+				token: this.token,
+				form: this.poll,
+			})
+			if (poll) {
+				showSuccess(t('spreed', 'Poll draft has been saved'))
+			}
+		},
+
 		selfHasVotedOption(index) {
 			return this.poll?.votedSelf.includes(index)
 		},