feat(CommunityPortal/StatusCommunityCard): Prepared `StatusCommunityCard` to display permissions row

- `StatusCommunityCard` updated with a new hearder component. - `CommunitiesGridView` updated to use `CommunityPermissionsRow` component inside card. - Added needed models. - Updated storybook. Pending backend integration: Part of task #10410
2023-04-18 16:22:27 +02:00 · 2023-04-18 16:22:27 +02:00 · 8ccd091ebc
parent 8a98a08f7b
commit 8ccd091ebc
7 changed files with 66 additions and 40 deletions
--- a/storybook/pages/CommunitiesPortalDummyModel.qml
+++ b/storybook/pages/CommunitiesPortalDummyModel.qml
@ -38,7 +38,9 @@ ListModel {
                    "name": "Career",
                    "emoji": "💼",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.shortPermissionsModel,
+            allTokenRequirementsMet: true
        },
        {
            featured: true,
@ -66,7 +68,9 @@ ListModel {
                    "name": "Career",
                    "emoji": "💼",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.twoShortPermissionsModel,
+            allTokenRequirementsMet: false
        },
        {
            featured: true,
@ -90,7 +94,9 @@ ListModel {
                    "name": "Career",
                    "emoji": "💼",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.moreThanTwoInitialShortPermissionsModel,
+            allTokenRequirementsMet: false


        },
@ -112,7 +118,9 @@ ListModel {
                    "name": "Career",
                    "emoji": "💼",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.longPermissionsModel,
+            allTokenRequirementsMet: false
        },
        {
            featured: false,
@ -127,7 +135,9 @@ ListModel {
            activeMembers: 2800,
            popularity: 4,
            available: true,
-            tags: JSON.stringify([])
+            tags: JSON.stringify([]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModelData,
+            allTokenRequirementsMet: false
        },
        {
            featured: false,
@ -155,7 +165,9 @@ ListModel {
                    "name": "Books & blogs",
                    "emoji": "📚",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModel,
+            allTokenRequirementsMet: true
        },
        {
            featured: false,
@ -171,6 +183,8 @@ ListModel {
            popularity: 4,
            available: true,
            tags: JSON.stringify([]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModel,
+            allTokenRequirementsMet: false
        },
        {
            featured: false,
@ -202,7 +216,9 @@ ListModel {
                    "name": "Career",
                    "emoji": "💼",
                },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.longPermissionsModel,
+            allTokenRequirementsMet: true
        },
        {
            featured: false,
--- a/storybook/pages/CommunitiesPortalLayoutPage.qml
+++ b/storybook/pages/CommunitiesPortalLayoutPage.qml
@ -29,6 +29,8 @@ SplitView {
            SplitView.fillWidth: true
            SplitView.fillHeight: true

+            assetsModel: AssetsModel {}
+            collectiblesModel:  CollectiblesModel {}
            communitiesStore: CommunitiesStore {
                readonly property int unreadNotificationsCount: 42
                readonly property string communityTags: ModelsData.communityTags
--- a/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@ -146,7 +146,6 @@ StatusSectionLayout {
                            activeUsers: model.activeUsers
                            popularity: model.popularity
                            tokenLogo: model.tokenLogo
-                            isPrivate: model.isPrivate
                            banner: model.banner

                            onClicked: { d.navigateToCommunity(communityId) }
--- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
@ -109,18 +109,19 @@ Rectangle {
       If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
    */
    property color communityColor: Theme.palette.primaryColor1
-    /*!
-       \qmlproperty bool StatusCommunityCard::isPrivate
-       This property holds if the community is private.
-       If not provided, default value is false.
-    */
-    property bool isPrivate: false
    /*!
       \qmlproperty url StatusCommunityCard::tokenLogo
       This property holds the image of the token needed if the community is private.
    */
    property url tokenLogo: ""

+    /*!
+       \qmlproperty Item StatusCommunityCard::rigthHeaderComponent
+       This property holds an extra info header component that will be displayed on top right of the card.
+       Example: Community token permissions row.
+    */
+    property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent
+
    /*!
        \qmlsignal StatusCommunityCard::clicked(string communityId)
        This signal is emitted when the card item is clicked.
@ -249,36 +250,16 @@ Rectangle {
        color: d.cardColor
        radius: d.cardRadius
        clip: true
-        // Community restriccions
-        Rectangle {
-            visible: root.isPrivate
+
+        // Right header extra info component
+        Loader {
+            id: rightHeaderLoader
            anchors.top: parent.top
            anchors.topMargin: 8
            anchors.right: parent.right
            anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
-            color: d.loadingColor2
-            radius: 200
-            StatusIcon {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.leftMargin: 6
-                anchors.left: parent.left
-                icon: "tiny/unlocked"
-                width: 16
-                height: 16
-                color: Theme.palette.baseColor1
-            }
-            StatusRoundedImage {
-                anchors.rightMargin: 2
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: width
-                image.source: root.tokenLogo
-                color: "transparent"
-            }
        }
+
        // Community info
        ColumnLayout {
            anchors.fill: parent
--- a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml
@ -24,13 +24,16 @@ import "views"

 StatusSectionLayout {
    id: root
-    objectName: "communitiesPortalLayout"

    property CommunitiesStore communitiesStore: CommunitiesStore {}
    property var importCommunitiesPopup: importCommunitiesPopupComponent
    property var createCommunitiesPopup: createCommunitiesPopupComponent
    property var discordImportProgressPopup: discordImportProgressDialog

+    property alias assetsModel: communitiesGrid.assetsModel
+    property alias collectiblesModel: communitiesGrid.collectiblesModel
+
+    objectName: "communitiesPortalLayout"
    notificationCount: activityCenterStore.unreadNotificationsCount
    onNotificationButtonClicked: Global.openActivityCenterPopup()

@ -166,6 +169,7 @@ StatusSectionLayout {

                CommunitiesGridView {
                    id: communitiesGrid
+
                    anchors.fill: parent
                    anchors.rightMargin: d.preventShadowClipMargin
                    anchors.leftMargin: d.preventShadowClipMargin
@ -176,6 +180,9 @@ StatusSectionLayout {
                    model: filteredCommunitiesModel
                    searchLayout: d.searchMode

+                    assetsModel: root.assetsModel
+                    collectiblesModel: root.collectiblesModel
+
                    onCardClicked: root.communitiesStore.navigateToCommunity(communityId)
                }

--- a/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml
@ -10,12 +10,17 @@ import utils 1.0

 import SortFilterProxyModel 0.2

+import AppLayouts.Chat.controls.community 1.0
+
 StatusScrollView {
    id: root

    property var model
    property bool searchLayout: false

+    property var assetsModel
+    property var collectiblesModel
+
    readonly property bool isEmpty: !featuredRepeater.count && !popularRepeater.count

    signal cardClicked(string communityId)
@ -56,7 +61,11 @@ StatusScrollView {
        id: communityCardDelegate

        StatusCommunityCard {
+            id: card
+
            readonly property string tags: model.tags
+            readonly property var permissionsList: model.permissionsModel
+            readonly property bool requirementsMet: !!model.allTokenRequirementsMet ? model.allTokenRequirementsMet : false

            JSONListModel {
                id: tagsJson
@ -75,6 +84,15 @@ StatusScrollView {
            popularity: model.popularity
            categories: tagsJson.model

+            // Community restriccions
+            rigthHeaderComponent: CommunityPermissionsRow {
+                visible: !!card.permissionsList
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: card.permissionsList
+                requirementsMet: card.requirementsMet
+            }
+
            onClicked: root.cardClicked(communityId)
        }
    }
--- a/ui/app/mainui/AppMain.qml
+++ b/ui/app/mainui/AppMain.qml
@ -943,6 +943,9 @@ Item {

                    CommunitiesPortalLayout {
                        id: communitiesPortalLayoutContainer
+
+                        assetsModel: rootChatStore.assetsModel
+                        collectiblesModel: rootChatStore.collectiblesModel
                    }

                    Loader {