feat(storybook): extended editing of communities portal page

- added tags editor
- added active members editor
- refactored icon/banner models (removed imperative transforms)
- refactored icon/banner selection (removed single shots)

closes: #8032

storybook/pages/CommunitiesPortalLayoutPage.qml

@@ -7,6 +7,7 @@ import AppLayouts.CommunitiesPortal.stores 1.0
 import SortFilterProxyModel 0.2
 
 import Storybook 1.0
+import Models 1.0
 
 import utils 1.0
 
@@ -24,12 +25,7 @@ SplitView {
             communitiesStore: CommunitiesStore {
                 readonly property string locale: ""
                 readonly property int unreadNotificationsCount: 42
-                readonly property string communityTags:
+                readonly property string communityTags: ModelsData.communityTags
-                    JSON.stringify({"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈",
-                                    "Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Ethereum":"Ξ","Event":"🗓","Fantasy":"🧙‍♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍",
-                                    "Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆",
-                                    "News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕",
-                                    "Software dev":"👩‍💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"})
                 readonly property var curatedCommunitiesModel: SortFilterProxyModel {
 
                     sourceModel: CommunitiesPortalDummyModel { id: mockedModel }

storybook/pages/CommunitiesPortalModelEditor.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import Storybook 1.0
+import Models 1.0
 
 ListView {
     id: root
@@ -10,43 +11,11 @@ ListView {
     spacing: 25
     ScrollBar.vertical: ScrollBar { x: root.width }
 
-    ImageSelectPopup {
-        id: iconSelector
-
-        parent: root
-        anchors.centerIn: parent
-        width: parent.width * 0.8
-        height: parent.height * 0.8
-
-        model: ListModel {
-            id: iconsModel
-        }
-
-        Component.onCompleted: {
-            const uniqueIcons = StorybookUtils.getUniqueValuesFromModel(root.model, "icon")
-            uniqueIcons.map(image => iconsModel.append( { image }))
-        }
-    }
-
-    ImageSelectPopup {
-        id: bannerSelector
-
-        parent: root
-        anchors.centerIn: parent
-        width: parent.width * 0.8
-        height: parent.height * 0.8
-
-        model: ListModel {
-            id: bannersModel
-        }
-
-        Component.onCompleted: {
-            const uniqueBanners = StorybookUtils.getUniqueValuesFromModel(root.model, "banner")
-            uniqueBanners.map(image => bannersModel.append( { image }))
-        }
-    }
-
     delegate: ColumnLayout {
+        id: rootDelegate
+
+        readonly property var _model: model
+
         width: ListView.view.width
 
         Label {
@@ -87,6 +56,49 @@ ListView {
             }
         }
 
+        ListView {
+            id: tagsSelector
+
+            Layout.fillWidth: true
+            implicitHeight: contentItem.childrenRect.height + ScrollBar.horizontal.height
+
+            clip: true
+            orientation: ListView.Horizontal
+            spacing: 4
+
+            model: ListModel {
+                id: communityTags
+                Component.onCompleted: {
+                    const allTags = JSON.parse(ModelsData.communityTags)
+                    const selectedTags = JSON.parse(rootDelegate._model.tags)
+                    for (const key of Object.keys(allTags)) {
+                        const selected = selectedTags.find(tag => tag.name === key) !== undefined
+                        communityTags.append({ name: key, emoji: allTags[key], selected: selected });
+                    }
+                }
+            }
+
+            delegate: Button {
+                text: model.name
+                checkable: true
+                checked: model.selected
+
+                onClicked: {
+                    model.selected = !model.selected
+
+                    const selectedTags = []
+                    for (let i = 0; i < communityTags.count; ++i) {
+                        const tag = communityTags.get(i)
+                        if (tag.selected) selectedTags.push({ name: tag.name, emoji: tag.emoji })
+                    }
+
+                    rootDelegate._model.tags = JSON.stringify(selectedTags)
+                }
+            }
+
+            ScrollBar.horizontal: ScrollBar {}
+        }
+
         RowLayout {
             Layout.fillWidth: true
             Layout.preferredHeight: 50
@@ -105,12 +117,22 @@ ListView {
 
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: {
+                    onClicked: iconSelector.open()
-                        iconSelector.open()
+
-                        StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
+                    ImageSelectPopup {
-                            model.icon = icon
+                        id: iconSelector
-                            iconSelector.close()
+
-                        })
+                        parent: root
+                        anchors.centerIn: parent
+                        width: parent.width * 0.8
+                        height: parent.height * 0.8
+
+                        model: IconModel {}
+
+                        onSelected: {
+                            rootDelegate._model.icon = icon
+                            close()
+                        }
                     }
                 }
             }
@@ -129,12 +151,22 @@ ListView {
 
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: {
+                    onClicked: bannerSelector.open()
-                        bannerSelector.open()
+
-                        StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
+                    ImageSelectPopup {
-                            model.banner = banner
+                        id: bannerSelector
-                            bannerSelector.close()
+
-                        })
+                        parent: root
+                        anchors.centerIn: parent
+                        width: parent.width * 0.8
+                        height: parent.height * 0.8
+
+                        model: BannerModel {}
+
+                        onSelected: {
+                            rootDelegate._model.banner = icon
+                            close()
+                        }
                     }
                 }
             }
@@ -169,6 +201,21 @@ ListView {
             }
         }
 
+        Row {
+            Label {
+                anchors.verticalCenter: parent.verticalCenter
+                text: "active:\t"
+            }
+
+            SpinBox {
+                editable: true
+                height: 30
+                from: 0; to: 10 * 1000 * 1000
+                value:  model.activeMembers
+                onValueChanged: model.activeMembers = value
+            }
+        }
+
         Row {
             Label {
                 anchors.verticalCenter: parent.verticalCenter

storybook/src/Models/BannerModel.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.14
+
+ListModel {
+    Component.onCompleted: append([
+        {image: ModelsData.banners.status},
+        {image: ModelsData.banners.superRare},
+        {image: ModelsData.banners.coinbase},
+        {image: ModelsData.banners.dragonereum},
+        {image: ModelsData.banners.cryptPunks},
+        {image: ModelsData.banners.socks}])
+}

storybook/src/Models/IconModel.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.14
+
+ListModel {
+    Component.onCompleted: append([
+        {image: ModelsData.icons.cryptoKitty},
+        {image: ModelsData.icons.superRare},
+        {image: ModelsData.icons.coinbase},
+        {image: ModelsData.icons.dragonereum},
+        {image: ModelsData.icons.cryptPunks},
+        {image: ModelsData.icons.socks},
+        {image: ModelsData.icons.spotify},
+        {image: ModelsData.icons.dribble}])
+}

storybook/src/Models/qmldir

@@ -0,0 +1,3 @@
+singleton ModelsData 1.0 ModelsData.qml
+IconModel 1.0 IconModel.qml
+BannerModel 1.0 BannerModel.qml

ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml

@@ -73,6 +73,7 @@ StatusScrollView {
             name: model.name
             description: model.description
             members: model.members
+            activeUsers: model.activeMembers
             popularity: model.popularity
             categories: tagsJson.model