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

Update emoji API Closes #75 See merge request pleroma/admin-fe!112
2020-04-30 16:36:27 +00:00 · 2020-04-30 16:36:27 +00:00 · 5c87ff33a1
commit 5c87ff33a1
parent 96125402cd a2072165aa
7 changed files with 215 additions and 182 deletions
--- a/src/api/emojiPacks.js
+++ b/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',
-    method: 'post',
-    headers: authHeaders(token)
-  })
-}
-
-export async function createPack(host, token, name) {
-  return await request({
-    baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${name}`,
-    method: 'put',
+    url: '/api/pleroma/emoji/packs/import',
+    method: 'get',
    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`,
-    method: 'post',
-    headers: authHeaders(token),
-    data: { instance_address: baseName(instance) }
+    url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}`,
+    method: 'get',
+    headers: authHeaders(token)
  })
 }

-export async function downloadFrom(host, instance_address, pack_name, as, token) {
-  if (as.trim() === '') {
-    as = null
-  }
-
+export async function reloadEmoji(host, token) {
  return await request({
    baseURL: baseName(host),
-    url: '/api/pleroma/emoji/packs/download_from',
+    url: '/api/pleroma/admin/reload_emoji',
    method: 'post',
-    headers: authHeaders(token),
-    data: { instance_address: baseName(instance_address), pack_name, as },
-    timeout: 0
+    headers: authHeaders(token)
  })
 }

-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`,
-    method: 'post',
+    url: `/api/pleroma/emoji/packs/${packName}`,
+    method: 'patch',
    headers: authHeaders(token),
-    data: { name, new_data },
+    data: { metadata },
    timeout: 0 // This might take a long time
  })
 }

-function fileUpdateFormData(d) {
-  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
-
+export async function updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, host, token) {
  return await request({
    baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${packName}/update_file`,
-    method: 'post',
+    url: `/api/pleroma/emoji/packs/${packName}/files`,
+    method: 'patch',
    headers: authHeaders(token),
-    data: data,
-    timeout: 0
+    data: { shortcode, new_shortcode: newShortcode, new_filename: newFilename, force }
  })
 }

-export function addressOfEmojiInPack(host, packName, name) {
-  return `${baseName(host)}/emoji/${packName}/${name}`
-}
-
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@ -1,13 +1,16 @@
 import {
+  addNewEmojiFile,
+  createPack,
+  deleteEmojiFile,
+  deletePack,
+  downloadFrom,
+  importFromFS,
  listPacks,
  listRemotePacks,
-  downloadFrom,
  reloadEmoji,
-  createPack,
-  deletePack,
  savePackMetadata,
-  importFromFS,
-  updatePackFile } from '@/api/emojiPacks'
+  updateEmojiFile
+} 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,20 +149,23 @@ const packs = {
      commit('SET_REMOTE_INSTANCE', remoteInstance)
      commit('SET_REMOTE_PACKS', data)
    },
-    async UpdateAndSavePackFile({ commit, getters }, args) {
-      const result = await updatePackFile(getters.authHost, getters.token, args)
-
-      if (result.status === 200) {
-        const { packName } = args
-
-        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 })
+    SetRemoteInstance({ commit }, instance) {
+      commit('SET_REMOTE_INSTANCE', instance)
+    },
+    async UpdateEmojiFile({ commit, getters }, { packName, shortcode, newShortcode, newFilename, force }) {
+      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',
+        duration: 5 * 1000
+      })
+
+      commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
    },
    async UpdateLocalPackVal({ commit }, args) {
      commit('UPDATE_LOCAL_PACK_VAL', args)
--- a/src/views/emojiPacks/components/LocalEmojiPack.vue
+++ b/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"
-          :key="ename"
+          v-for="(file, shortcode) in pack.files"
+          :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: {
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/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 }) {
-      this.$store.dispatch('UpdateAndSavePackFile', {
-        action: 'add',
-        packName: this.packName,
-        shortcode: this.shortcode,
-        file: file || this.imageUploadURL,
-        fileName: this.customFileName
-      }).then(() => {
-        this.shortcode = ''
-        this.imageUploadURL = ''
-        this.customFileName = ''
+    async uploadEmoji({ file }) {
+      try {
+        this.$store.dispatch('AddNewEmojiFile', {
+          packName: this.packName,
+          file: file || this.imageUploadURL,
+          shortcode: this.shortcode,
+          filename: this.customFileName
+        })
+      } catch (e) {
+        return
+      }
+      this.shortcode = ''
+      this.imageUploadURL = ''
+      this.customFileName = ''

-        this.$store.dispatch('ReloadEmoji')
-      })
+      this.$store.dispatch('ReloadEmoji')
    }
  }
 }
--- a/src/views/emojiPacks/components/RemoteEmojiPack.vue
+++ b/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"
-            :key="ename"
+            v-for="(file, shortcode) in pack.files"
+            :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) {
-      const instanceAddress = `${new URL(url).protocol}//${new URL(url).hostname}`
+    downloadFromInstance() {
      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'))
    }
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/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 this.newName !== null ? this.newName : this.name
+        // Return a modified shortcode if it was modified, otherwise return the old shortcode
+        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() {
-      this.$store.dispatch('UpdateAndSavePackFile', {
-        action: 'update',
-        packName: this.packName,
-        oldName: this.name,
-        newName: this.emojiName,
-        newFilename: this.emojiFile
-      }).then(() => {
-        this.newName = null
-        this.newFile = null
+    async update() {
+      try {
+        this.$store.dispatch('UpdateEmojiFile', {
+          packName: this.packName,
+          shortcode: this.shortcode,
+          newShortcode: this.emojiName,
+          newFilename: this.emojiFile,
+          force: true
+        })
+      } catch (e) {
+        return
+      }
+      this.newShortcode = null
+      this.newFile = null

-        this.$store.dispatch('ReloadEmoji')
-      })
+      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', {
-          action: 'remove',
+        this.$store.dispatch('DeleteEmojiFile', {
          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', {
-        action: 'add',
-        packName: this.copyToLocalPackName,
-        shortcode: this.copyToShortcode.trim() !== '' ? this.copyToShortcode.trim() : this.name,
-        fileName: this.copyToFilename.trim() !== '' ? this.copyToFilename.trim() : this.file,
-        file: this.addressOfEmojiInPack(this.host, this.packName, this.file)
-      }).then(() => {
-        this.copyToLocalPackName = null
-        this.copyToLocalVisible = false
-        this.copyToShortcode = ''
-        this.copyToFilename = ''
+      try {
+        this.$store.dispatch('AddNewEmojiFile', {
+          packName: this.copyToLocalPackName,
+          file: this.addressOfEmojiInPack(this.remoteInstance, this.packName, this.file),
+          shortcode: this.copyToShortcode.trim() !== '' ? this.copyToShortcode.trim() : this.shortcode,
+          filename: this.copyToFilename.trim() !== '' ? this.copyToFilename.trim() : this.file
+        })
+      } catch (e) {
+        return
+      }
+      this.copyToLocalPackName = null
+      this.copyToLocalVisible = false
+      this.copyToShortcode = ''
+      this.copyToFilename = ''

-        this.$store.dispatch('ReloadEmoji')
-      })
+      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
--- a/src/views/emojiPacks/index.vue
+++ b/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
    }