Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: draft polls management 📊 #13518

Merged
merged 4 commits into from
Oct 18, 2024
Merged

feat: draft polls management 📊 #13518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9e926c
feat: save poll drafts from filled forms, created and closed polls
Antreesy Oct 14, 2024
5a07116
feat: browse poll drafts from poll editor and shared items
Antreesy Oct 14, 2024
d07fc91
feat: create new poll from drafts
Antreesy Oct 14, 2024
72b5efb
feat: delete poll drafts
Antreesy Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 59 additions & 7 deletions src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,33 @@

<template>
<!-- Poll card -->
<a v-if="!showAsButton"
<div v-if="draft" class="poll-card" @click="openDraft">
<span class="poll-card__header">
<IconPoll :size="20" />
<span>{{ name }}</span>
</span>
<span class="poll-card__footer">
{{ pollFooterText }}
</span>

<NcButton class="poll-card__delete-draft"
type="tertiary"
:title="t('spreed', 'Delete poll draft')"
:aria-label="t('spreed', 'Delete poll draft')"
@click.stop="deleteDraft">
<template #icon>
<IconDelete :size="20" />
</template>
</NcButton>
</div>
<a v-else-if="!showAsButton"
v-intersection-observer="getPollData"
:aria-label="t('spreed', 'Poll')"
class="poll-card"
role="button"
@click="openPoll">
<span class="poll-card__header">
<PollIcon :size="20" />
<IconPoll :size="20" />
<span>{{ name }}</span>
</span>
<span class="poll-card__footer">
Expand All @@ -32,9 +51,10 @@
<script>
import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components'

import PollIcon from 'vue-material-design-icons/Poll.vue'
import IconDelete from 'vue-material-design-icons/Delete.vue'
import IconPoll 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'

Expand All @@ -46,7 +66,8 @@ export default {

components: {
NcButton,
PollIcon,
IconDelete,
IconPoll,
},

directives: {
Expand All @@ -73,8 +94,15 @@ export default {
type: Boolean,
default: false,
},

draft: {
type: Boolean,
default: false,
},
},

emits: ['click'],

setup() {
return {
pollsStore: usePollsStore(),
Expand All @@ -83,14 +111,18 @@ 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() {
if (this.poll?.status === POLL.STATUS.OPEN) {
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')
Expand All @@ -101,6 +133,7 @@ export default {

methods: {
t,
n,
getPollData() {
if (!this.poll) {
this.pollsStore.getPollData({
Expand All @@ -110,6 +143,17 @@ export default {
}
},

openDraft() {
this.$emit('click', this.id)
},

deleteDraft() {
this.pollsStore.deletePollDraft({
token: this.token,
pollId: this.id,
})
},

openPoll() {
this.pollsStore.setActivePoll({
token: this.token,
Expand All @@ -123,9 +167,10 @@ export default {

<style lang="scss" scoped>
.poll-card {
position: relative;
display: block;
max-width: 300px;
padding: 16px;
padding: calc(3 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large);
background: var(--color-main-background);
Expand All @@ -146,6 +191,7 @@ export default {
font-weight: bold;
white-space: normal;
word-wrap: anywhere;
margin-right: var(--default-clickable-area);

:deep(.material-design-icon) {
margin-bottom: auto;
Expand All @@ -156,6 +202,12 @@ export default {
color: var(--color-text-maxcontrast);
white-space: normal;
}

& &__delete-draft {
position: absolute;
top: var(--default-grid-baseline);
right: var(--default-grid-baseline);
}
}

.poll-closed {
Expand Down
31 changes: 31 additions & 0 deletions src/components/NewMessage/NewMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,15 @@

<!-- Poll creation dialog -->
<NewMessagePollEditor 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"
Expand Down Expand Up @@ -194,6 +200,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'
Expand Down Expand Up @@ -226,6 +233,7 @@ export default {
NewMessageAudioRecorder,
NewMessageNewFileDialog,
NewMessagePollEditor,
PollDraftHandler,
NewMessageTypingIndicator,
Quote,
// Icons
Expand Down Expand Up @@ -301,6 +309,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
Expand Down Expand Up @@ -386,6 +395,10 @@ 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
},
Expand Down Expand Up @@ -538,6 +551,8 @@ 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')
Expand All @@ -550,6 +565,8 @@ 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: {
Expand Down Expand Up @@ -892,6 +909,20 @@ export default {
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
},

async autoComplete(search, callback) {
const response = await searchPossibleMentions(this.token, search)
if (!response) {
Expand Down
Loading
Loading