From d4523c191fbf5599415299e6097b7a2265b26080 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 4 Oct 2024 17:54:18 +0200 Subject: [PATCH] feat: import and export polls Signed-off-by: Maksim Sukharev --- .../NewMessage/NewMessagePollEditor.vue | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue index 27fefd55dab5..bbc7a3ac2299 100644 --- a/src/components/NewMessage/NewMessagePollEditor.vue +++ b/src/components/NewMessage/NewMessagePollEditor.vue @@ -13,6 +13,18 @@ {{ t('spreed', 'Question') }}

+ + + + {{ t('spreed', 'Import poll from file') }} +

@@ -58,6 +70,12 @@ {{ t('spreed', 'Dismiss') }} + + {{ t('spreed', 'Export') }} + {{ t('spreed', 'Create poll') }} @@ -111,10 +129,23 @@ export default { }) const isFilled = computed(() => !!pollForm.question || pollForm.options.some(option => option)) + const exportPollBlob = computed(() => { + if (!isFilled.value) { + return null + } + const jsonString = JSON.stringify(pollForm, null, 2) + const blob = new Blob([jsonString], { type: 'application/json' }) + + return URL.createObjectURL(blob) + }) + const exportPollFileName = `Talk Poll ${new Date().toISOString().slice(0, 10)}` + return { pollsStore: usePollsStore(), pollForm, isFilled, + exportPollBlob, + exportPollFileName, } }, @@ -149,6 +180,29 @@ export default { } }, + triggerImport() { + this.$refs.pollImport.click() + }, + + importPoll(event) { + if (!event?.target?.files?.[0]) { + return + } + + const reader = new FileReader() + reader.onload = (e) => { + try { + const jsonObject = JSON.parse(e.target.result) + for (const key of Object.keys(this.pollForm)) { + this.pollForm[key] = jsonObject[key] + } + } catch (error) { + console.error('Error while parsing JSON:', error) + } + } + + reader.readAsText(event.target.files[0]) + }, }, } @@ -162,6 +216,10 @@ export default { color: var(--color-primary-element); } + &__button { + margin-block: 8px; + } + &__option { display: flex; align-items: flex-end;