Error handling, uploading/deleting new emojis, sorting

1 files changed, 90 insertions, 6 deletions

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index 874d1c3b..f3adc3d5 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
     }
   },