Fetch local pack's files only after opening collapse item to manage emojis

src/lang/en.js

@@ -475,6 +475,7 @@ export default {
     specifyShortcode: 'Specify a custom shortcode',
     specifyFilename: 'Specify a custom filename',
     copy: 'Copy',
-    copyToLocalPack: 'Copy to local pack'
+    copyToLocalPack: 'Copy to local pack',
+    emptyPack: 'This emoji pack is empty'
   }
 }

src/store/modules/emojiPacks.js

@@ -4,6 +4,7 @@ import {
   deleteEmojiFile,
   deletePack,
   downloadFrom,
+  fetchPack,
   importFromFS,
   listPacks,
   listRemotePacks,
@@ -30,6 +31,9 @@ const packs = {
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
+    SET_PACK_FILES: (state, { name, files }) => {
+      state.localPacks = { ...state.localPacks, [name]: { ...state.localPacks[name], files }}
+    },
     SET_REMOTE_INSTANCE: (state, name) => {
       state.remoteInstance = name
     },
@@ -99,6 +103,10 @@ const packs = {
         })
       }
     },
+    async FetchPack({ getters, commit }, name) {
+      const { data } = await fetchPack(name, getters.authHost, getters.token)
+      commit('SET_PACK_FILES', { name, files: data.files })
+    },
     async ImportFromFS({ getters }) {
       const result = await importFromFS(getters.authHost, getters.token)
 
@@ -136,12 +144,17 @@ const packs = {
         commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
       }
     },
-    SetActiveCollapseItems({ commit, state }, activeItems) {
+    SetActiveCollapseItems({ commit }, activeItems) {
       commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
     },
     async SetLocalEmojiPacks({ commit, getters }) {
       const { data } = await listPacks(getters.authHost)
-      commit('SET_LOCAL_PACKS', data)
+      const packs = Object.keys(data).reduce((acc, packName) => {
+        const { files, ...pack } = data[packName]
+        acc[packName] = pack
+        return acc
+      }, {})
+      commit('SET_LOCAL_PACKS', packs)
     },
     async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
       const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)

src/views/emojiPacks/components/LocalEmojiPack.vue

@@ -38,19 +38,22 @@
         </el-link>
       </div>
     </div>
-    <el-collapse v-model="showPackContent" class="contents-collapse">
+    <el-collapse v-model="showPackContent" class="contents-collapse" @change="handleChange($event, name)">
       <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background">
         <new-emoji-uploader :pack-name="name"/>
       </el-collapse-item>
-      <el-collapse-item v-if="pack.files.length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
-        <single-emoji-editor
-          v-for="[shortcode, file] in pack.files"
-          :key="shortcode"
-          :host="host"
-          :pack-name="name"
-          :shortcode="shortcode"
-          :file="file"
-          :is-local="isLocal" />
+      <el-collapse-item :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
+        <div v-if="pack.files && sortedFiles.length > 0">
+          <single-emoji-editor
+            v-for="[shortcode, file] in sortedFiles"
+            :key="shortcode"
+            :host="host"
+            :pack-name="name"
+            :shortcode="shortcode"
+            :file="file"
+            :is-local="isLocal" />
+        </div>
+        <span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
       </el-collapse-item>
     </el-collapse>
   </el-collapse-item>
@@ -101,6 +104,10 @@ export default {
         return '155px'
       }
     },
+    sortedFiles() {
+      return Object.keys(this.pack.files).sort((a, b) => a.localeCompare(b))
+        .map(key => [key, this.pack.files[key]])
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -170,6 +177,11 @@ export default {
           .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
       }).catch(() => {})
     },
+    handleChange(openTabs, name) {
+      if (openTabs.includes('manageEmoji')) {
+        this.$store.dispatch('FetchPack', name)
+      }
+    },
     savePackMetadata() {
       this.$store.dispatch('SavePackMetadata', { packName: this.name })
     }

src/views/emojiPacks/index.vue

@@ -31,8 +31,8 @@
         </div>
       </el-form-item>
       <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
-        <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack">
-          <local-emoji-pack :name="name" :pack="sortPack(pack)" :host="$store.getters.authHost" :is-local="true" />
+        <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" @change="setActiveCollapseItems">
+          <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
         </el-collapse>
       </el-form-item>
       <el-divider class="divider"/>
@@ -128,11 +128,6 @@ export default {
           this.$store.dispatch('ReloadEmoji')
         })
     },
-    sortPack(pack) {
-      const orderedFiles = Object.keys(pack.files).sort((a, b) => a.localeCompare(b))
-        .map(key => [key, pack.files[key]])
-      return { ...pack, files: orderedFiles }
-    },
     refreshLocalPacks() {
       try {
         this.$store.dispatch('SetLocalEmojiPacks')