From be4b4f33826f80eb6eadd7e1648b07126c57b0f0 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 11 Mar 2023 12:30:08 +0100
Subject: [PATCH] [profile][bug] fix <ExpendableList> / reducedItems

---
 components/ExpandableList.vue | 22 +++++++++--------
 components/Profile.vue        | 45 ++++++++++++++++++-----------------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/components/ExpandableList.vue b/components/ExpandableList.vue
index 73dbd22d5..6c71bc96d 100644
--- a/components/ExpandableList.vue
+++ b/components/ExpandableList.vue
@@ -1,13 +1,11 @@
 <template>
     <ul>
-        <li v-for="(el, i) in values">
-            <template v-if="allShown || i < showLimit">
-                <slot v-bind:el="el" v-bind:i="i">
-                    {{ el }}
-                </slot>
-            </template>
+        <li v-for="(el, i) in values" :class="itemClass" v-if="allShown || i < showLimit">
+            <slot v-bind:el="el" v-bind:i="i">
+                {{ el }}
+            </slot>
         </li>
-        <li v-if="!allShown && hiddenCount > 0" class="small">
+        <li v-if="!allShown && hiddenCount > 0" :class="[itemClass, 'small']">
             <span v-if="static">
                 <Icon v="plus-circle"/>
                 <T :params="{count: hiddenCount}">profile.expendableList.more</T>
@@ -15,8 +13,10 @@
             <a v-else href="#" @click.prevent="allShown = true">
                 <Icon v="plus-circle"/>
                 <T :params="{count: hiddenCount}">profile.expendableList.more</T>
-                <br/>
-                <Icon v="spacer"/>
+                <template v-if="!(itemClass || '').includes('list-inline-item')">
+                    <br/>
+                    <Icon v="spacer"/>
+                </template>
                 <T>profile.expendableList.show</T>
             </a>
         </li>
@@ -30,8 +30,10 @@ export default {
     props: {
         values: { required: true },
         limit: { required: true },
+        reducedLimit: { 'default': 4 },
         static: { type: Boolean },
         expand: { type: Boolean },
+        itemClass: {},
     },
     data() {
         return this.calcData();
@@ -40,7 +42,7 @@ export default {
         calcData() {
             let showLimit = this.values.length;
             let hiddenCount = 0;
-            const limit = this.reducedItems ? 4 : this.limit;
+            const limit = (this.reducedItems === undefined || this.reducedItems) ? this.reducedLimit : this.limit;
 
             if (this.values.length > limit) {
                 showLimit = limit;
diff --git a/components/Profile.vue b/components/Profile.vue
index 394dd8c49..e83425f91 100644
--- a/components/Profile.vue
+++ b/components/Profile.vue
@@ -39,28 +39,29 @@
 
             <div v-if="profile.flags.length || profile.customFlags.length" :class="['col-12', manyFlagsLayout ? '' : 'col-lg-6']">
                 <ClientOnly>
-                <ul class="list-inline">
-                    <li v-for="flag in profile.flags" v-if="allFlags[flag]" class="list-inline-item p-1">
-                        <Flag :termkey="allFlags[flag]"
-                              :name="flag.startsWith('-') ? allFlags[flag] : $translateForPronoun(allFlags[flag], mainPronoun)"
-                              :alt="$t('flags_alt.' + flag.replace(/'/g, '*').replace(/ /g, '_'))"
-                              :img="`/flags/${flag}.png`"
-                              :terms="terms || []"
-                              :asterisk="flagsAsterisk.includes(flag)"
-                        />
-                    </li>
-                    <li v-for="{value: flag, name, description, alt, link} in profile.customFlags" class="list-inline-item p-1">
-                        <Flag :termkey="name"
-                              :name="name"
-                              :alt="alt || ''"
-                              :img="buildImageUrl(flag, 'flag')"
-                              :terms="terms|| []"
-                              custom
-                              :description="description"
-                              :customlink="link"
-                        />
-                    </li>
-                </ul>
+                    <ExpandableList :values="[...profile.flags.filter(flag => allFlags[flag]), ...profile.customFlags]"
+                                    :limit="32" :reducedLimit="8" class="list-inline" itemClass="list-inline-item p-1" :static="static" :expand="expandLinks">
+                        <template v-slot="s">
+                            <Flag v-if="typeof(s.el) === 'string'"
+                                  :termkey="allFlags[s.el]"
+                                  :name="s.el.startsWith('-') ? allFlags[s.el] : $translateForPronoun(allFlags[s.el], mainPronoun)"
+                                  :alt="$t('flags_alt.' + s.el.replace(/'/g, '*').replace(/ /g, '_'))"
+                                  :img="`/flags/${s.el}.png`"
+                                  :terms="terms || []"
+                                  :asterisk="flagsAsterisk.includes(s.el)"
+                            />
+                            <Flag v-else
+                                  :termkey="s.el.name"
+                                  :name="s.el.name"
+                                  :alt="s.el.alt || ''"
+                                  :img="buildImageUrl(s.el.value, 'flag')"
+                                  :terms="terms|| []"
+                                  custom
+                                  :description="s.el.description"
+                                  :customlink="s.el.link"
+                            />
+                        </template>
+                    </ExpandableList>
                 </ClientOnly>
             </div>
         </section>