Implement emoji pack metadata updating on frontend

src/api/emoji_packs.js

@@ -42,4 +42,15 @@ export async function downloadFrom(host, instance_address, pack_name, as, token)
   })
 }
 
+export async function savePackMetadata(host, token, name, new_data) {
+  return await request({
+    baseURL: baseName(host),
+    url: `/api/pleroma/emoji/packs/update_metadata/${name}`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: { name, new_data },
+    timeout: 0 // This might take a long time
+  })
+}
+
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/store/modules/emoji_packs.js

-import { listPacks, downloadFrom, reloadEmoji, deletePack } from '@/api/emoji_packs'
+import { listPacks, downloadFrom, reloadEmoji, deletePack, savePackMetadata } from '@/api/emoji_packs'
 
 import { Message } from 'element-ui'
 
 const packs = {
   state: {
     localPacks: {},
-    remotePacks: {},
-    downloadFromState: null
+    remotePacks: {}
   },
   mutations: {
     SET_LOCAL_PACKS: (state, packs) => {
@@ -15,8 +14,13 @@ const packs = {
     SET_REMOTE_PACKS: (state, packs) => {
       state.remotePacks = packs
     },
-    SET_DOWNLOAD_FROM_STATE: (state, st) => {
-      state.downloadFromState = st
+
+    UPDATE_LOCAL_PACK_VAL: (state, { name, key, value }) => {
+      state.localPacks[name]['pack'][key] = value
+    },
+
+    UPDATE_LOCAL_PACK: (state, { name, pack }) => {
+      state.localPacks[name]['pack'] = pack
     }
   },
   actions: {
@@ -33,7 +37,7 @@ const packs = {
 
       if (result.data === 'ok') {
         Message({
-          message: `Successfully downlaoded ${packName}`,
+          message: `Successfully downloaded ${packName}`,
           type: 'success',
           duration: 5 * 1000
         })
@@ -46,6 +50,32 @@ const packs = {
     },
     async DeletePack({ commit, getters, state }, { name }) {
       await deletePack(getters.authHost, getters.token, name)
+    },
+
+    async UpdateLocalPackVal({ commit, getters, state }, args) {
+      commit('UPDATE_LOCAL_PACK_VAL', args)
+    },
+    async DeleteLocalPackVals({ commit, getters, state }, args) {
+      commit('DEL_LOCAL_PACK_VALS', args)
+    },
+
+    async SavePackMetadata({ commit, getters, state }, { packName }) {
+      const result =
+        await savePackMetadata(getters.authHost,
+          getters.token,
+          packName,
+          state.localPacks[packName]['pack']
+        )
+
+      if (result.status === 200) {
+        Message({
+          message: `Successfully updated ${packName} metadata`,
+          type: 'success',
+          duration: 5 * 1000
+        })
+
+        commit('UPDATE_LOCAL_PACK', { name: packName, pack: result.data })
+      }
     }
   }
 }

src/views/emoji-packs/components/EmojiPack.vue

@@ -2,18 +2,23 @@
   <div>
     <h2>{{ name }}</h2>
 
-    <el-row v-for="(prop, propName) in pack.pack" :key="propName">
-      <el-row :gutter="20" class="prop-row">
-        <el-col :span="4">
-          <b>
-            {{ propName | prettifyPropName }}
-          </b>
-        </el-col>
-        <el-col :span="10">
-          {{ prop }}
-        </el-col>
-      </el-row>
-    </el-row>
+    <prop-editing-row name="Share pack">
+      <el-switch v-model="share" />
+    </prop-editing-row>
+    <prop-editing-row name="Homepage">
+      <el-input v-model="homepage" />
+    </prop-editing-row>
+    <prop-editing-row name="Description">
+      <el-input :rows="2" v-model="description" type="textarea" />
+    </prop-editing-row>
+    <prop-editing-row name="License">
+      <el-input v-model="license" />
+    </prop-editing-row>
+    <prop-editing-row name="Fallback source">
+      <el-input v-model="fallbackSrc" />
+    </prop-editing-row>
+
+    <el-button type="success" @click="savePackMetadata">Save pack metadata</el-button>
 
     <el-collapse v-model="shownPackEmoji" class="contents-collapse">
       <el-collapse-item :name="name" title="Show pack contents">
@@ -82,13 +87,11 @@
 </style>
 
 <script>
+import PropEditingRow from './PropertyEditingRow.vue'
+
 export default {
-  filters: {
-    prettifyPropName(nm) {
-      const capitalized = nm.charAt(0).toUpperCase() + nm.slice(1)
-      return capitalized.replace(/-/g, ' ')
-    }
-  },
+
+  components: { PropEditingRow },
   props: {
     name: {
       type: String,
@@ -107,12 +110,71 @@ export default {
       required: true
     }
   },
+
   data() {
     return {
       shownPackEmoji: [],
       downloadSharedAs: ''
     }
   },
+  computed: {
+    share: {
+      get() { return this.pack.pack['share-files'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'share-files', value }
+        )
+      }
+    },
+    homepage: {
+      get() { return this.pack.pack['homepage'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'homepage', value }
+        )
+      }
+    },
+    description: {
+      get() { return this.pack.pack['description'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'description', value }
+        )
+      }
+    },
+    license: {
+      get() { return this.pack.pack['license'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'license', value }
+        )
+      }
+    },
+    fallbackSrc: {
+      get() { return this.pack.pack['fallback-src'] },
+      set(value) {
+        if (value.trim() !== '') {
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src', value }
+          )
+        } else {
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src', value: null }
+          )
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src-sha256', value: null }
+          )
+        }
+      }
+    }
+  },
   methods: {
     downloadFromInstance() {
       this.$store.dispatch(
@@ -132,6 +194,10 @@ export default {
           .then(() => this.$store.dispatch('ReloadEmoji'))
           .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
       }).catch(() => {})
+    },
+
+    savePackMetadata() {
+      this.$store.dispatch('SavePackMetadata', { packName: this.name })
     }
   }
 }

src/views/emoji-packs/components/PropertyEditingRow.vue

+<template>
+  <el-row :gutter="20" class="prop-row">
+    <el-col :span="4">
+      <b>{{ name }}</b>
+    </el-col>
+    <el-col :span="10">
+      <slot/>
+    </el-col>
+  </el-row>
+</template>
+
+<style>
+  .prop-row {
+    margin-bottom: 1em;
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/views/emoji-packs/index.vue

@@ -52,10 +52,6 @@
     margin: 22px 0 0 15px;
   }
 
-  .prop-row {
-    margin-bottom: 1em;
-  }
-
   .local-packs-actions {
     margin-top: 1em;
     margin-bottom: 1em;