Skip to content

Commit

Permalink
feat: introduce PollManager
Browse files Browse the repository at this point in the history
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
Antreesy committed Dec 19, 2024
1 parent 06bd302 commit 2738009
Show file tree
Hide file tree
Showing 9 changed files with 93 additions and 54 deletions.
3 changes: 3 additions & 0 deletions src/PublicShareAuthSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'
Expand All @@ -51,6 +53,7 @@ export default {
CallView,
ChatView,
MediaSettings,
PollManager,
PollViewer,
TopBar,
TransitionWrapper,
Expand Down
3 changes: 3 additions & 0 deletions src/PublicShareSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'
Expand Down Expand Up @@ -71,6 +73,7 @@ export default {
MediaSettings,
NcButton,
NcLoadingIcon,
PollManager,
PollViewer,
TopBar,
TransitionWrapper,
Expand Down
44 changes: 0 additions & 44 deletions src/components/NewMessage/NewMessage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -239,8 +225,6 @@ export default {
NewMessageAudioRecorder,
NewMessageChatSummary,
NewMessageNewFileDialog,
PollEditor,
PollDraftHandler,
NewMessageTypingIndicator,
Quote,
// Icons
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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')
Expand All @@ -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: {
Expand Down Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions src/components/NewMessage/NewMessageAttachments.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

<NcActionButton v-if="canCreatePoll"
close-after-click
@click="$emit('toggle-poll-editor')">
@click="showPollEditor">
<template #icon>
<PollIcon :size="20" />
</template>
Expand Down Expand Up @@ -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() {
Expand All @@ -139,6 +139,10 @@ export default {
showSmartPicker() {
EventBus.emit('smart-picker-open')
},

showPollEditor() {
EventBus.emit('poll-editor-open', { id: null, fromDrafts: false })
},
},
}
</script>
8 changes: 4 additions & 4 deletions src/components/PollViewer/PollDraftHandler.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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,
Expand All @@ -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>

Expand Down
9 changes: 5 additions & 4 deletions src/components/PollViewer/PollEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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])
}
}
Expand Down
66 changes: 66 additions & 0 deletions src/components/PollViewer/PollManager.vue
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions src/views/FilesSidebarChatView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'

Expand All @@ -31,6 +33,7 @@ export default {
CallFailedDialog,
ChatView,
MediaSettings,
PollManager,
PollViewer,
},

Expand Down
3 changes: 3 additions & 0 deletions src/views/MainView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'

Expand All @@ -36,6 +38,7 @@ export default {
CallFailedDialog,
ChatView,
LobbyScreen,
PollManager,
PollViewer,
TopBar,
},
Expand Down

0 comments on commit 2738009

Please sign in to comment.