Merge branch 'fix/emoji-upload' into 'develop'

Update emoji API

Closes #75

See merge request pleroma/admin-fe!112

src/api/emojiPacks.js

@@ -2,22 +2,77 @@ import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
-import _ from 'lodash'
+export async function addNewEmojiFile(packName, file, shortcode, filename, host, token) {
+  const data = new FormData()
+  if (filename.trim() !== '') {
+    data.set('filename', filename)
+  }
+  if (shortcode.trim() !== '') {
+    data.set('shortcode', shortcode)
+  }
+  data.set('file', file)
 
-export async function deletePack(host, token, name) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${name}`,
+    url: `/api/pleroma/emoji/packs/${packName}/files`,
+    method: 'post',
+    headers: authHeaders(token),
+    data
+  })
+}
+
+export function addressOfEmojiInPack(host, packName, name) {
+  return `${baseName(host)}/emoji/${packName}/${name}`
+}
+
+export async function createPack(host, token, packName) {
+  return await request({
+    baseURL: baseName(host),
+    url: `/api/pleroma/emoji/packs/${packName}`,
+    method: 'post',
+    headers: authHeaders(token)
+  })
+}
+
+export async function deleteEmojiFile(packName, shortcode, host, token) {
+  return await request({
+    baseURL: baseName(host),
+    url: `/api/pleroma/emoji/packs/${packName}/files`,
+    method: 'delete',
+    headers: authHeaders(token),
+    data: { shortcode }
+  })
+}
+
+export async function deletePack(host, token, packName) {
+  return await request({
+    baseURL: baseName(host),
+    url: `/api/pleroma/emoji/packs/${packName}`,
     method: 'delete',
     headers: authHeaders(token)
   })
 }
 
-export async function reloadEmoji(host, token) {
+export async function downloadFrom(host, instance, packName, as, token) {
+  if (as.trim() === '') {
+    as = null
+  }
+
   return await request({
     baseURL: baseName(host),
-    url: '/api/pleroma/admin/reload_emoji',
+    url: '/api/pleroma/emoji/packs/download',
     method: 'post',
+    headers: authHeaders(token),
+    data: { url: baseName(instance), name: packName, as },
+    timeout: 0
+  })
+}
+
+export async function fetchPack(packName, host, token) {
+  return await request({
+    baseURL: baseName(host),
+    url: `/api/pleroma/emoji/packs/${packName}`,
+    method: 'get',
     headers: authHeaders(token)
   })
 }
@@ -25,17 +80,8 @@ export async function reloadEmoji(host, token) {
 export async function importFromFS(host, token) {
   return await request({
     baseURL: baseName(host),
-    url: '/api/pleroma/emoji/packs/import_from_fs',
+    url: '/api/pleroma/emoji/packs/import',
-    method: 'post',
+    method: 'get',
-    headers: authHeaders(token)
-  })
-}
-
-export async function createPack(host, token, name) {
-  return await request({
-    baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${name}`,
-    method: 'put',
     headers: authHeaders(token)
   })
 }
@@ -51,106 +97,40 @@ export async function listPacks(host) {
 export async function listRemotePacks(host, token, instance) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/list_from`,
+    url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}`,
-    method: 'post',
+    method: 'get',
-    headers: authHeaders(token),
+    headers: authHeaders(token)
-    data: { instance_address: baseName(instance) }
   })
 }
 
-export async function downloadFrom(host, instance_address, pack_name, as, token) {
+export async function reloadEmoji(host, token) {
-  if (as.trim() === '') {
-    as = null
-  }
-
   return await request({
     baseURL: baseName(host),
-    url: '/api/pleroma/emoji/packs/download_from',
+    url: '/api/pleroma/admin/reload_emoji',
     method: 'post',
-    headers: authHeaders(token),
+    headers: authHeaders(token)
-    data: { instance_address: baseName(instance_address), pack_name, as },
-    timeout: 0
   })
 }
 
-export async function savePackMetadata(host, token, name, new_data) {
+export async function savePackMetadata(host, token, packName, metadata) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${name}/update_metadata`,
+    url: `/api/pleroma/emoji/packs/${packName}`,
-    method: 'post',
+    method: 'patch',
     headers: authHeaders(token),
-    data: { name, new_data },
+    data: { metadata },
     timeout: 0 // This might take a long time
   })
 }
 
-function fileUpdateFormData(d) {
+export async function updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, host, token) {
-  const data = new FormData()
-
-  _.each(d, (v, k) => {
-    data.set(k, v)
-  })
-
-  return data
-}
-
-export async function updatePackFile(host, token, args) {
-  let data = null
-
-  switch (args.action) {
-    case 'add': {
-      const { shortcode, file, fileName } = args
-
-      data = fileUpdateFormData({
-        action: 'add',
-        shortcode: shortcode,
-        file: file
-      })
-      if (fileName.trim() !== '') {
-        data.set('filename', fileName)
-      }
-
-      break
-    }
-
-    case 'update': {
-      const { oldName, newName, newFilename } = args
-
-      data = fileUpdateFormData({
-        action: 'update',
-        shortcode: oldName,
-        new_shortcode: newName,
-        new_filename: newFilename
-      })
-
-      break
-    }
-
-    case 'remove': {
-      const { name } = args
-      data = fileUpdateFormData({
-        action: 'remove',
-        shortcode: name
-      })
-
-      break
-    }
-  }
-
-  const { packName } = args
-
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${packName}/update_file`,
+    url: `/api/pleroma/emoji/packs/${packName}/files`,
-    method: 'post',
+    method: 'patch',
     headers: authHeaders(token),
-    data: data,
+    data: { shortcode, new_shortcode: newShortcode, new_filename: newFilename, force }
-    timeout: 0
   })
 }
 
-export function addressOfEmojiInPack(host, packName, name) {
-  return `${baseName(host)}/emoji/${packName}/${name}`
-}
-
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/store/modules/emojiPacks.js

@@ -1,13 +1,16 @@
 import {
+  addNewEmojiFile,
+  createPack,
+  deleteEmojiFile,
+  deletePack,
+  downloadFrom,
+  importFromFS,
   listPacks,
   listRemotePacks,
-  downloadFrom,
   reloadEmoji,
-  createPack,
-  deletePack,
   savePackMetadata,
-  importFromFS,
+  updateEmojiFile
-  updatePackFile } from '@/api/emojiPacks'
+} from '@/api/emojiPacks'
 import i18n from '@/lang'
 import { Message } from 'element-ui'
 
@@ -49,6 +52,36 @@ const packs = {
     }
   },
   actions: {
+    async AddNewEmojiFile({ commit, getters }, { packName, file, shortcode, filename }) {
+      let result
+      try {
+        result = await addNewEmojiFile(packName, file, shortcode, filename, getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      }
+      Message({
+        message: `${i18n.t('settings.successfullyUpdated')} ${packName} ${i18n.t('settings.metadatLowerCase')}`,
+        type: 'success',
+        duration: 5 * 1000
+      })
+
+      commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
+    },
+    async DeleteEmojiFile({ commit, getters }, { packName, shortcode }) {
+      let result
+      try {
+        result = await deleteEmojiFile(packName, shortcode, getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      }
+      Message({
+        message: `${i18n.t('settings.successfullyUpdated')} ${packName} ${i18n.t('settings.metadatLowerCase')}`,
+        type: 'success',
+        duration: 5 * 1000
+      })
+
+      commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
+    },
     async CreatePack({ getters }, { name }) {
       await createPack(getters.authHost, getters.token, name)
     },
@@ -116,12 +149,16 @@ const packs = {
       commit('SET_REMOTE_INSTANCE', remoteInstance)
       commit('SET_REMOTE_PACKS', data)
     },
-    async UpdateAndSavePackFile({ commit, getters }, args) {
+    SetRemoteInstance({ commit }, instance) {
-      const result = await updatePackFile(getters.authHost, getters.token, args)
+      commit('SET_REMOTE_INSTANCE', instance)
-
+    },
-      if (result.status === 200) {
+    async UpdateEmojiFile({ commit, getters }, { packName, shortcode, newShortcode, newFilename, force }) {
-        const { packName } = args
+      let result
-
+      try {
+        result = await updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      }
       Message({
         message: `${i18n.t('settings.successfullyUpdated')} ${packName} ${i18n.t('settings.metadatLowerCase')}`,
         type: 'success',
@@ -129,7 +166,6 @@ const packs = {
       })
 
       commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
-      }
     },
     async UpdateLocalPackVal({ commit }, args) {
       commit('UPDATE_LOCAL_PACK_VAL', args)

src/views/emojiPacks/components/LocalEmojiPack.vue

@@ -44,11 +44,11 @@
       </el-collapse-item>
       <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
         <single-emoji-editor
-          v-for="(file, ename) in pack.files"
+          v-for="(file, shortcode) in pack.files"
-          :key="ename"
+          :key="shortcode"
           :host="host"
           :pack-name="name"
-          :name="ename"
+          :shortcode="shortcode"
           :file="file"
           :is-local="isLocal" />
       </el-collapse-item>
@@ -96,9 +96,9 @@ export default {
       if (this.isMobile) {
         return '90px'
       } else if (this.isTablet) {
-        return '120px'
+        return '155px'
       } else {
-        return '120px'
+        return '155px'
       }
     },
     share: {

src/views/emojiPacks/components/NewEmojiUploader.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form :label-position="isMobile ? 'top' : 'left'" label-width="130px" size="small" class="new-emoji-uploader-form">
     <el-form-item :label="$t('emoji.shortcode')">
-      <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
+      <el-input v-model="shortcode" :placeholder="$t('emoji.optional')"/>
     </el-form-item>
     <el-form-item :label="$t('emoji.customFilename')">
       <el-input v-model="customFileName" :placeholder="$t('emoji.optional')"/>
@@ -9,7 +9,7 @@
     <el-form-item :label="$t('emoji.uploadFile')">
       <div class="upload-file-url">
         <el-input v-model="imageUploadURL" :placeholder="$t('emoji.url')"/>
-        <el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('emoji.upload') }}</el-button>
+        <el-button type="primary" class="upload-button" @click="uploadEmoji">{{ $t('emoji.upload') }}</el-button>
       </div>
       <div class="upload-container">
         <p class="text">or</p>
@@ -18,7 +18,7 @@
           :multiple="false"
           :show-file-list="false"
           action="add">
-          <el-button :disabled="shortcodePresent" type="primary">{{ $t('emoji.clickToUpload') }}</el-button>
+          <el-button type="primary">{{ $t('emoji.clickToUpload') }}</el-button>
         </el-upload>
       </div>
     </el-form-item>
@@ -46,26 +46,25 @@ export default {
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
-    },
-    shortcodePresent() {
-      return this.shortcode.trim() === ''
     }
   },
   methods: {
-    uploadEmoji({ file }) {
+    async uploadEmoji({ file }) {
-      this.$store.dispatch('UpdateAndSavePackFile', {
+      try {
-        action: 'add',
+        this.$store.dispatch('AddNewEmojiFile', {
           packName: this.packName,
-        shortcode: this.shortcode,
           file: file || this.imageUploadURL,
-        fileName: this.customFileName
+          shortcode: this.shortcode,
-      }).then(() => {
+          filename: this.customFileName
+        })
+      } catch (e) {
+        return
+      }
       this.shortcode = ''
       this.imageUploadURL = ''
       this.customFileName = ''
 
       this.$store.dispatch('ReloadEmoji')
-      })
     }
   }
 }

src/views/emojiPacks/components/RemoteEmojiPack.vue

@@ -36,11 +36,11 @@
       <el-collapse v-model="showPackContent" class="contents-collapse">
         <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
           <single-emoji-editor
-            v-for="(file, ename) in pack.files"
+            v-for="(file, shortcode) in pack.files"
-            :key="ename"
+            :key="shortcode"
             :host="host"
             :pack-name="name"
-            :name="ename"
+            :shortcode="shortcode"
             :file="file"
             :is-local="isLocal" />
         </el-collapse-item>
@@ -52,7 +52,7 @@
           </p>
           <div class="download-shared-pack">
             <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
-            <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance(pack.pack['homepage'])">
+            <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
               {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
             </el-button>
           </div>
@@ -113,6 +113,9 @@ export default {
     loadRemotePack() {
       return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
     },
+    remoteInstanceAddress() {
+      return this.$store.state.emojiPacks.remoteInstance
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -171,11 +174,10 @@ export default {
     }
   },
   methods: {
-    downloadFromInstance(url) {
+    downloadFromInstance() {
-      const instanceAddress = `${new URL(url).protocol}//${new URL(url).hostname}`
       this.$store.dispatch(
         'DownloadFrom',
-        { instanceAddress, packName: this.name, as: this.downloadSharedAs }
+        { instanceAddress: this.remoteInstanceAddress, packName: this.name, as: this.downloadSharedAs }
       ).then(() => this.$store.dispatch('ReloadEmoji'))
         .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
     }

src/views/emojiPacks/components/SingleEmojiEditor.vue

@@ -34,6 +34,7 @@
         <el-button
           :disabled="!copyToLocalPackName"
           type="primary"
+          class="copy-to-local-pack-button"
           @click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
         <el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
       </el-popover>
@@ -54,7 +55,7 @@ export default {
       type: String,
       required: true
     },
-    name: {
+    shortcode: {
       type: String,
       required: true
     },
@@ -69,7 +70,7 @@ export default {
   },
   data() {
     return {
-      newName: null,
+      newShortcode: null,
       newFile: null,
       copyToLocalPackName: null,
       copyPopoverVisible: false,
@@ -80,14 +81,14 @@ export default {
   computed: {
     emojiName: {
       get() {
-        // Return a modified name if it was modified, otherwise return the old name
+        // Return a modified shortcode if it was modified, otherwise return the old shortcode
-        return this.newName !== null ? this.newName : this.name
+        return this.newShortcode !== null ? this.newShortcode : this.shortcode
       },
-      set(val) { this.newName = val }
+      set(val) { this.newShortcode = val }
     },
     emojiFile: {
       get() {
-        // Return a modified name if it was modified, otherwise return the old name
+        // Return a modified file name if it was modified, otherwise return the old file name
         return this.newFile !== null ? this.newFile : this.file
       },
       set(val) { this.newFile = val }
@@ -102,23 +103,26 @@ export default {
       return this.$store.state.emojiPacks.localPacks
     },
     remoteInstance() {
-      return this.$store.state.emojiPacks.remoteInstance
+      return new URL(this.$store.state.emojiPacks.remoteInstance).host
     }
   },
   methods: {
-    update() {
+    async update() {
-      this.$store.dispatch('UpdateAndSavePackFile', {
+      try {
-        action: 'update',
+        this.$store.dispatch('UpdateEmojiFile', {
           packName: this.packName,
-        oldName: this.name,
+          shortcode: this.shortcode,
-        newName: this.emojiName,
+          newShortcode: this.emojiName,
-        newFilename: this.emojiFile
+          newFilename: this.emojiFile,
-      }).then(() => {
+          force: true
-        this.newName = null
+        })
+      } catch (e) {
+        return
+      }
+      this.newShortcode = null
       this.newFile = null
 
       this.$store.dispatch('ReloadEmoji')
-      })
     },
     remove() {
       this.$confirm('This will delete the emoji, are you sure?', 'Warning', {
@@ -126,12 +130,11 @@ export default {
         cancelButtonText: 'No, leave it be',
         type: 'warning'
       }).then(() => {
-        this.$store.dispatch('UpdateAndSavePackFile', {
+        this.$store.dispatch('DeleteEmojiFile', {
-          action: 'remove',
           packName: this.packName,
-          name: this.name
+          shortcode: this.shortcode
         }).then(() => {
-          this.newName = null
+          this.newShortcode = null
           this.newFile = null
 
           this.$store.dispatch('ReloadEmoji')
@@ -139,20 +142,22 @@ export default {
       })
     },
     copyToLocal() {
-      this.$store.dispatch('UpdateAndSavePackFile', {
+      try {
-        action: 'add',
+        this.$store.dispatch('AddNewEmojiFile', {
           packName: this.copyToLocalPackName,
-        shortcode: this.copyToShortcode.trim() !== '' ? this.copyToShortcode.trim() : this.name,
+          file: this.addressOfEmojiInPack(this.remoteInstance, this.packName, this.file),
-        fileName: this.copyToFilename.trim() !== '' ? this.copyToFilename.trim() : this.file,
+          shortcode: this.copyToShortcode.trim() !== '' ? this.copyToShortcode.trim() : this.shortcode,
-        file: this.addressOfEmojiInPack(this.host, this.packName, this.file)
+          filename: this.copyToFilename.trim() !== '' ? this.copyToFilename.trim() : this.file
-      }).then(() => {
+        })
+      } catch (e) {
+        return
+      }
       this.copyToLocalPackName = null
       this.copyToLocalVisible = false
       this.copyToShortcode = ''
       this.copyToFilename = ''
 
       this.$store.dispatch('ReloadEmoji')
-      })
     },
     addressOfEmojiInPack
   }
@@ -163,6 +168,10 @@ export default {
 .copy-popover {
   width: 330px
 }
+.copy-to-local-pack-button {
+  margin-top: 15px;
+  float: right;
+}
 .emoji-buttons {
   place-self: center;
   min-width: 200px

src/views/emojiPacks/index.vue

@@ -69,7 +69,6 @@ export default {
   components: { LocalEmojiPack, RebootButton, RemoteEmojiPack },
   data() {
     return {
-      remoteInstanceAddress: '',
       newPackName: '',
       activeLocalPack: [],
       activeRemotePack: [],
@@ -95,6 +94,14 @@ export default {
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
     },
+    remoteInstanceAddress: {
+      get() {
+        return this.$store.state.emojiPacks.remoteInstance
+      },
+      set(instance) {
+        this.$store.dispatch('SetRemoteInstance', instance)
+      }
+    },
     remotePacks() {
       return this.$store.state.emojiPacks.remotePacks
     }