From 4451cccb3c1244a179b9f5017e6a4536eb5456f1 Mon Sep 17 00:00:00 2001 From: Ekaterina Vaartis Date: Sun, 7 Jan 2024 12:26:40 +0300 Subject: [PATCH] Error handling, uploading/deleting new emojis, sorting --- .../settings_modal/admin_tabs/emoji_tab.js | 96 +++++++++++++++++-- .../settings_modal/admin_tabs/emoji_tab.scss | 11 ++- .../settings_modal/admin_tabs/emoji_tab.vue | 67 ++++++++++++- src/services/api/api.service.js | 2 +- 4 files changed, 164 insertions(+), 12 deletions(-) diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js index 874d1c3bb6..f3adc3d53c 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.js +++ b/src/components/settings_modal/admin_tabs/emoji_tab.js @@ -8,6 +8,8 @@ import Popover from 'components/popover/popover.vue' import ConfirmModal from 'components/confirm_modal/confirm_modal.vue' import ModifiedIndicator from '../helpers/modified_indicator.vue' +const newEmojiUploadBase = { shortcode: '', file: '', upload: [] } + const EmojiTab = { components: { TabSwitcher, @@ -27,7 +29,8 @@ const EmojiTab = { editedMetadata: { }, packName: '', newPackName: '', - deleteModalVisible: false + deleteModalVisible: false, + newEmojiUpload: clone(newEmojiUploadBase) } }, @@ -37,7 +40,7 @@ const EmojiTab = { }, packMeta () { if (this.editedMetadata[this.packName] === undefined) { - this.editedMetadata[this.packName] = clone(this.knownPacks[this.packName].pack) + this.editedMetadata[this.packName] = clone(this.pack.pack) } return this.editedMetadata[this.packName] @@ -55,6 +58,27 @@ const EmojiTab = { return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}` }, + uploadEmoji () { + this.$refs.addEmojiPopover.hidePopover() + + this.$store.state.api.backendInteractor.addNewEmojiFile({ + packName: this.packName, + file: this.newEmojiUpload.upload[0], + shortcode: this.newEmojiUpload.shortcode, + filename: this.newEmojiUpload.file + }).then(resp => resp.json()).then(resp => { + if (resp.error !== undefined) { + this.displayError(resp.error) + return + } + + this.pack.files = resp + this.sortPackFiles(this.packName) + + this.newEmojiUpload = clone(newEmojiUploadBase) + }) + }, + createEmojiPack () { this.$store.state.api.backendInteractor.createEmojiPack( { name: this.newPackName } @@ -62,6 +86,7 @@ const EmojiTab = { if (resp === 'ok') { return this.refreshPackList() } else { + this.displayError(resp.error) return Promise.reject(resp) } }).then(done => { @@ -78,6 +103,7 @@ const EmojiTab = { if (resp === 'ok') { return this.refreshPackList() } else { + this.displayError(resp.error) return Promise.reject(resp) } }).then(done => { @@ -96,6 +122,11 @@ const EmojiTab = { this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then( resp => resp.json() ).then(resp => { + if (resp.error !== undefined) { + this.displayError(resp.error) + return + } + // Update actual pack data this.pack.pack = resp // Delete edited pack data, should auto-update itself @@ -108,28 +139,81 @@ const EmojiTab = { if (this.editedParts[this.packName][shortcode] === undefined) { this.editedParts[this.packName][shortcode] = { - shortcode, file: this.knownPacks[this.packName].files[shortcode] + shortcode, file: this.pack.files[shortcode] } } }, + deleteEmoji (shortcode) { + this.editedParts[this.packName][shortcode].deleteModalVisible = false + + this.$store.state.api.backendInteractor.deleteEmojiFile( + { packName: this.packName, shortcode } + ).then(resp => resp.json()).then(resp => { + if (resp.error !== undefined) { + this.displayError(resp.error) + return + } + + this.pack.files = resp + delete this.editedParts[this.packName][shortcode] + + this.sortPackFiles(this.packName) + }) + }, saveEditedEmoji (shortcode) { const edited = this.editedParts[this.packName][shortcode] + if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) { + delete this.editedParts[this.packName][shortcode] + return + } + this.$store.state.api.backendInteractor.updateEmojiFile( { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false } - ).then(resp => - resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText)) ).then(resp => { - this.knownPacks[this.packName].files = resp + if (resp.error !== undefined) { + this.displayError(resp.error) + return Promise.reject(resp.error) + } + + return resp.json() + }).then(resp => { + this.pack.files = resp delete this.editedParts[this.packName][shortcode] + + this.sortPackFiles(this.packName) }) }, refreshPackList () { return this.$store.state.api.backendInteractor.listEmojiPacks() .then(data => data.json()) .then(packData => { + if (packData.error !== undefined) { + this.displayError(packData.error) + return + } + this.knownPacks = packData.packs + for (const name of Object.keys(this.knownPacks)) { + this.sortPackFiles(name) + } }) + }, + displayError (msg) { + this.$store.dispatch('pushGlobalNotice', { + messageKey: 'upload.error.message', + messageArgs: [msg], + level: 'error' + }) + }, + sortPackFiles (nameOfPack) { + // Sort by key + const sorted = Object.keys(this.knownPacks[nameOfPack].files).sort().reduce((acc, key) => { + if (key.length === 0) return acc + acc[key] = this.knownPacks[nameOfPack].files[key] + return acc + }, {}) + this.knownPacks[nameOfPack].files = sorted } }, diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss index 89bf2f7f17..52b9e2bbcf 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.scss +++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss @@ -25,7 +25,7 @@ } .emoji-unsaved { - box-shadow: 2px 3px 5px var(--cBlue, $fallback--cBlue); + box-shadow: 0 3px 5px var(--cBlue, $fallback--cBlue); } .emoji-list { @@ -44,3 +44,12 @@ .emoji-tab-popover-button { margin-left: 0.5em; } + +.emoji-tab-popover-input { + width: 20em; + margin-bottom: 0.5em; + + &:not(:first-child) { + margin-left: 0.5em; + } +} diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue index 534f881a44..cdde95c39c 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.vue +++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue @@ -22,7 +22,7 @@ -
  • +
    • @@ -111,13 +111,58 @@ -
  • +
  • + + + + +
    • @@ -152,7 +197,21 @@ @click="saveEditedEmoji(shortcode)"> Save - + + + Are you sure you want to delete {{ shortcode }}? +