From 2a38907ebe6eb2d8db8291d39f8c9d9fa0fa991a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 29 Mar 2020 20:42:24 +0300
Subject: [PATCH] Load emoji packs that are open in collapse

---
 src/store/modules/emojiPacks.js               |   7 ++
 .../emojiPacks/components/RemoteEmojiPack.vue | 119 +++++++++---------
 src/views/emojiPacks/index.vue                |   6 +-
 3 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/store/modules/emojiPacks.js b/src/store/modules/emojiPacks.js
index 282a069e..f92e0fa5 100644
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@@ -15,11 +15,15 @@ import Vue from 'vue'
 
 const packs = {
   state: {
+    activeCollapseItems: [],
     localPacks: {},
     remoteInstance: '',
     remotePacks: {}
   },
   mutations: {
+    SET_ACTIVE_COLLAPSE_ITEMS: (state, items) => {
+      state.activeCollapseItems = items
+    },
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
@@ -99,6 +103,9 @@ const packs = {
         commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
       }
     },
+    SetActiveCollapseItems({ commit, state }, activeItems) {
+      commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
+    },
     async SetLocalEmojiPacks({ commit, getters }) {
       const { data } = await listPacks(getters.authHost)
       commit('SET_LOCAL_PACKS', data)
diff --git a/src/views/emojiPacks/components/RemoteEmojiPack.vue b/src/views/emojiPacks/components/RemoteEmojiPack.vue
index cb63ec3d..0c9ecaf3 100644
--- a/src/views/emojiPacks/components/RemoteEmojiPack.vue
+++ b/src/views/emojiPacks/components/RemoteEmojiPack.vue
@@ -1,62 +1,64 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
-      <el-form-item :label=" $t('emoji.sharePack')">
-        <el-switch v-model="share" disabled />
-      </el-form-item>
-      <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
-        <span>{{ homepage }}</span>
-      </el-form-item>
-      <el-form-item v-if="description" :label=" $t('emoji.description')">
-        <span>{{ description }}</span>
-      </el-form-item>
-      <el-form-item v-if="license" :label=" $t('emoji.license')">
-        <span>{{ license }}</span>
-      </el-form-item>
-      <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
-        <span>{{ fallbackSrc }}</span>
-      </el-form-item>
-      <el-form-item
-        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
-        :label=" $t('emoji.fallbackSrcSha')">
-        {{ pack.pack["fallback-src-sha256"] }}
-      </el-form-item>
-      <el-form-item>
-        <el-link
-          v-if="pack.pack['can-download']"
-          :href="pack.pack['fallback-src']"
-          :underline="false"
-          type="primary"
-          target="_blank">
-          <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
-        </el-link>
-      </el-form-item>
-    </el-form>
-    <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"
-          :host="host"
-          :pack-name="name"
-          :name="ename"
-          :file="file"
-          :is-local="isLocal" />
-      </el-collapse-item>
-      <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
-        <p>
-          {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
-          "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
-          {{ $t('emoji.willBeUsable') }}.
-        </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'])">
-            {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
-          </el-button>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
+    <div v-if="loadRemotePack">
+      <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
+        <el-form-item :label=" $t('emoji.sharePack')">
+          <el-switch v-model="share" disabled />
+        </el-form-item>
+        <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
+          <span>{{ homepage }}</span>
+        </el-form-item>
+        <el-form-item v-if="description" :label=" $t('emoji.description')">
+          <span>{{ description }}</span>
+        </el-form-item>
+        <el-form-item v-if="license" :label=" $t('emoji.license')">
+          <span>{{ license }}</span>
+        </el-form-item>
+        <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
+          <span>{{ fallbackSrc }}</span>
+        </el-form-item>
+        <el-form-item
+          v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+          :label=" $t('emoji.fallbackSrcSha')">
+          {{ pack.pack["fallback-src-sha256"] }}
+        </el-form-item>
+        <el-form-item>
+          <el-link
+            v-if="pack.pack['can-download']"
+            :href="pack.pack['fallback-src']"
+            :underline="false"
+            type="primary"
+            target="_blank">
+            <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
+          </el-link>
+        </el-form-item>
+      </el-form>
+      <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"
+            :host="host"
+            :pack-name="name"
+            :name="ename"
+            :file="file"
+            :is-local="isLocal" />
+        </el-collapse-item>
+        <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
+          <p>
+            {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
+            "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
+            {{ $t('emoji.willBeUsable') }}.
+          </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'])">
+              {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
+            </el-button>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </el-collapse-item>
 </template>
 
@@ -108,6 +110,9 @@ export default {
         return '120px'
       }
     },
+    loadRemotePack() {
+      return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 28f964d8..8154f254 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -46,7 +46,7 @@
         </div>
       </el-form-item>
       <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
-        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack">
+        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
           <remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
         </el-collapse>
       </el-form-item>
@@ -139,6 +139,10 @@ export default {
         type: 'success',
         message: i18n.t('emoji.reloaded')
       })
+    },
+    setActiveCollapseItems(activeItems) {
+      const items = Array.isArray(activeItems) ? activeItems : [activeItems]
+      this.$store.dispatch('SetActiveCollapseItems', items)
     }
   }
 }