Merge branch 'emoji-pack-upload' into 'develop'

Add a way to upload new packs from URL/ZIP file

See merge request pleroma/pleroma-fe!1999

changelog.d/emoji-upload.-zip.add

@@ -0,0 +1 @@
+Added a way to upload new packs from a URL or ZIP file via the admin-fe

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -32,7 +32,10 @@ const EmojiTab = {
       newPackName: '',
       deleteModalVisible: false,
       remotePackInstance: '',
-      remotePackDownloadAs: ''
+      remotePackDownloadAs: '',
+
+      remotePackURL: '',
+      remotePackFile: null
     }
   },
 
@@ -220,7 +223,7 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.dlPackPopover.hidePopover()
+            this.$refs.downloadPackPopover.hidePopover()
 
             return this.refreshPackList()
           } else {
@@ -232,6 +235,47 @@ const EmojiTab = {
           this.remotePackDownloadAs = ''
         })
     },
+    downloadRemoteURLPack () {
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPackZIP({
+        url: this.remotePackURL, packName: this.newPackName
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.additionalRemotePopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(() => {
+          this.packName = this.newPackName
+          this.newPackName = ''
+          this.remotePackURL = ''
+        })
+    },
+    downloadRemoteFilePack () {
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPackZIP({
+        file: this.remotePackFile[0], packName: this.newPackName
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.additionalRemotePopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(() => {
+          this.packName = this.newPackName
+          this.newPackName = ''
+          this.remotePackURL = ''
+        })
+    },
+
     displayError (msg) {
       useInterfaceStore().pushGlobalNotice({
         messageKey: 'admin_dash.emoji.error',

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -62,6 +62,64 @@
               </template>
             </Popover>
           </button>
+          <button
+            class="button button-default emoji-panel-additional-actions"
+            @click="$refs.additionalRemotePopover.showPopover"
+          >
+            <FAIcon
+              icon="chevron-down"
+            />
+
+            <Popover
+              ref="additionalRemotePopover"
+              popover-class="emoji-tab-edit-popover popover-default"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                  <input
+                    v-model="newPackName"
+                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                    class="input"
+                  >
+                  <h3>Import pack from URL</h3>
+                  <input
+                    v-model="remotePackURL"
+                    class="input"
+                    placeholder="Pack .zip URL"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
+                    @click="downloadRemoteURLPack"
+                  >
+                    Import
+                  </button>
+                  <h3>Import pack from a file</h3>
+                  <input
+                    type="file"
+                    accept="application/zip"
+                    class="emoji-tab-popover-file input"
+                    @change="remotePackFile = $event.target.files"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
+                    @click="downloadRemoteFilePack"
+                  >
+                    Import
+                  </button>
+                </div>
+              </template>
+            </Popover>
+          </button>
         </li>
 
         <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
@@ -240,12 +298,12 @@
                 v-if="pack.remote !== undefined"
                 class="button button-default btn"
                 type="button"
-                @click="$refs.dlPackPopover.showPopover"
+                @click="$refs.downloadPackPopover.showPopover"
               >
                 {{ $t('admin_dash.emoji.download_pack') }}
 
                 <Popover
-                  ref="dlPackPopover"
+                  ref="downloadPackPopover"
                   trigger="click"
                   placement="bottom"
                   bound-to-selector=".emoji-tab"

src/services/api/api.service.js

@@ -122,6 +122,7 @@ const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
 const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
 const PLEROMA_EMOJI_PACK_URL = (name) => `/api/v1/pleroma/emoji/pack?name=${name}`
 const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/v1/pleroma/emoji/packs/download'
+const PLEROMA_EMOJI_PACKS_DL_REMOTE_ZIP_URL = '/api/v1/pleroma/emoji/packs/download_zip'
 const PLEROMA_EMOJI_PACKS_LS_REMOTE_URL =
   (url, page, pageSize) => `/api/v1/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
 const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/v1/pleroma/emoji/packs/files?name=${name}`
@@ -1946,6 +1947,18 @@ const downloadRemoteEmojiPack = ({ instance, packName, as }) => {
   )
 }
 
+const downloadRemoteEmojiPackZIP = ({ url, packName, file }) => {
+  const data = new FormData()
+  if (file) data.set('file', file)
+  if (url) data.set('url', url)
+  data.set('name', packName)
+
+  return fetch(
+    PLEROMA_EMOJI_PACKS_DL_REMOTE_ZIP_URL,
+    { method: 'POST', body: data }
+  )
+}
+
 const saveEmojiPackMetadata = ({ name, newData }) => {
   return fetch(
     PLEROMA_EMOJI_PACK_URL(name),
@@ -2152,6 +2165,7 @@ const apiService = {
   deleteEmojiFile,
   listRemoteEmojiPacks,
   downloadRemoteEmojiPack,
+  downloadRemoteEmojiPackZIP,
   fetchBookmarkFolders,
   createBookmarkFolder,
   updateBookmarkFolder,