status-desktop/storybook/pages/JoinCommunityViewPage.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1

import AppLayouts.Communities.views 1.0

import Storybook 1.0
import Models 1.0

import utils 1.0

SplitView {

    QtObject {
        id: d

        // General properties:
        property string name: "Uniswap"
        property string communityDesc: "General channel for the community"
        property string introMessage: "%1 sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

1. Ut enim ad minim veniam
2. Excepteur sint occaecat cupidatat non proident
3. Duis aute irure
4. Dolore eu fugiat nulla pariatur
5. 🚗 consectetur adipiscing elit

Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.".arg(d.name)

        property color color: "orchid"
        property string channelName: joinCommunity ? "general" : "#vip"
        property string channelDesc: "VIP members only"
        property bool joinCommunity: true // Otherwise it means join channel action
        property int accessType: Constants.communityChatPublicAccess

        // Overlay component:
        property bool requirementsMet: true
        property int requestToJoinState: Constants.RequestToJoinState.None
        property bool isInvitationPending: requestToJoinState !== Constants.RequestToJoinState.None

        property bool isJoinRequestRejected: false
        property bool requiresRequest: false

        property var communityHoldingsModel: PermissionsModel.shortPermissionsModel
        property var viewOnlyHoldingsModel: PermissionsModel.shortPermissionsModel
        property var viewAndPostHoldingsModel: PermissionsModel.shortPermissionsModel
        property var moderateHoldingsModel: PermissionsModel.shortPermissionsModel
        property var assetsModel: AssetsModel {}
        property var collectiblesModel: CollectiblesModel {}

        // Blur background:
        property int membersCount: 184
        property bool amISectionAdmin: false
        property url image: Theme.png("tokens/UNI")
        property var communityItemsModel: model1
        property string chatDateTimeText: "Dec 31, 2020"
        property string  listUsersText: "simon, Mark Cuban "
        readonly property ListModel model1:  ListModel {
            ListElement { name: "welcome"; selected: false; notificationsCount: 0; hasUnreadMessages: false}
            ListElement { name: "general"; selected: false; notificationsCount: 0; hasUnreadMessages: true}
            ListElement { name: "design"; selected: true; notificationsCount: 3; hasUnreadMessages: true}
            ListElement { name: "random"; selected: false; notificationsCount: 0; hasUnreadMessages: false}
            ListElement { name: "vip"; selected: false; notificationsCount: 0; hasUnreadMessages: true}
        }
        readonly property ListModel model2:  ListModel {
            ListElement { name: "general"; selected: false; notificationsCount: 3; hasUnreadMessages: false}
            ListElement { name: "blockchain"; selected: true; notificationsCount: 3; hasUnreadMessages: true}
            ListElement { name: "faq"; selected: false; notificationsCount: 0; hasUnreadMessages: false}
        }
        readonly property var messagesModel: ListModel {
            ListElement {
                timestamp: 1656937930
                senderDisplayName: "simon"
                contentType: StatusMessage.ContentType.Text
                message:  "Hello, this is awesome! Feels like decentralized Discord!"
                isContact: true
                trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
                colorId: 4
            }
            ListElement {
                timestamp: 1657937930
                senderDisplayName: "Mark Cuban"
                contentType: StatusMessage.ContentType.Text
                message: "I know a lot of you really seem to get off or be validated by arguing with strangers online but please know it's a complete waste of your time and energy"
                isContact: false
                trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
                colorId: 2
            }
        }        
    }

    Logs { id: logs }

    SplitView {
        orientation: Qt.Vertical
        SplitView.fillWidth: true

        Rectangle {
            SplitView.fillWidth: true
            SplitView.fillHeight: true
            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
            clip: true

            JoinCommunityView {
                anchors.fill: parent
                anchors.margins: 50

                // General properties:
                name: d.name
                communityDesc: d.communityDesc
                introMessage: d.introMessage
                color: d.color
                channelName: d.channelName
                channelDesc: d.channelDesc
                joinCommunity: d.joinCommunity
                accessType: d.accessType
                requestToJoinState: d.requestToJoinState

                // Blur background properties:
                membersCount: d.membersCount
                image: d.image                
                amISectionAdmin: d.amISectionAdmin
                openCreateChat: false
                communityItemsModel: d.communityItemsModel
                chatDateTimeText: d.chatDateTimeText
                listUsersText: d.listUsersText
                messagesModel: d.messagesModel

                // Permissions properties
                requirementsMet: d.requirementsMet
                isJoinRequestRejected: d.isJoinRequestRejected
                requiresRequest: d.requiresRequest

                communityHoldingsModel: d.communityHoldingsModel
                viewOnlyHoldingsModel: d.viewOnlyHoldingsModel
                viewAndPostHoldingsModel: d.viewAndPostHoldingsModel
                moderateHoldingsModel: d.moderateHoldingsModel
                assetsModel: d.assetsModel
                collectiblesModel: d.collectiblesModel

                onInfoButtonClicked: logs.logEvent("JoinCommunityView::onInfoButtonClicked()")
                onAdHocChatButtonClicked: {
                    logs.logEvent("JoinCommunityView::store.openCloseCreateChatView(): " + openCreateChat.toString())
                    openCreateChat = !openCreateChat
                }
                onNotificationButtonClicked: logs.logEvent("JoinCommunityView::onNotificationButtonClicked()")
                onRequestToJoinClicked: logs.logEvent("JoinCommunityView::onRequestToJoinClicked()")
                onInvitationPendingClicked: logs.logEvent("JoinCommunityView::onInvitationPendingClicked()")
            }
        }

        LogsAndControlsPanel {
            id: logsAndControlsPanel

            SplitView.minimumHeight: 100
            SplitView.preferredHeight: 150

            logsView.logText: logs.logText
        }
    }

    Pane {
        SplitView.minimumWidth: 300
        SplitView.preferredWidth: 300

        ScrollView {
            anchors.fill: parent

            ColumnLayout {
                spacing: 16

                // Blur info editor:
                Label {
                    Layout.fillWidth: true
                    text: "BLUR INFO EDITOR"
                    font.bold: true
                    font.pixelSize: 18
                }

                CommunityInfoEditor {
                    name: d.name
                    membersCount: d.membersCount
                    amISectionAdmin: d.amISectionAdmin
                    color: d.color
                    image: d.image
                    colorVisible: true

                    onNameChanged: d.name = name
                    onMembersCountChanged: d.membersCount = membersCount
                    onAmISectionAdminChanged: d.amISectionAdmin = amISectionAdmin
                    onColorChanged: d.color = color
                    onImageChanged: d.image = image
                }

                ColumnLayout {
                    Label {
                        Layout.fillWidth: true
                        text: "Community items model:"
                    }

                    RadioButton {
                           checked: true
                           text: qsTr("Model 1")
                           onCheckedChanged: if(checked) d.communityItemsModel =  d.model1
                       }
                       RadioButton {
                           text: qsTr("Model 2")
                            onCheckedChanged: if(checked) d.communityItemsModel = d.model2
                       }
                }

                // Join types:
                Label {
                    Layout.fillWidth: true
                    text: "JOIN TYPES"
                    font.bold: true
                    font.pixelSize: 18
                }

                ColumnLayout {
                    Label {
                        Layout.fillWidth: true
                        text: "Is invitation pending:"
                    }

                    CheckBox {
                        checked: d.isInvitationPending
                        onCheckedChanged: {
                            d.isInvitationPending = checked
                            d.requestToJoinState = d.isInvitationPending ? Constants.RequestToJoinState.Requested : Constants.RequestToJoinState.None
                        }
                    }
                }

                ColumnLayout {
                    visible: d.requestToJoinState === Constants.RequestToJoinState.None
                    Label {
                        Layout.fillWidth: true
                        text: "Access type:"
                    }

                    RadioButton {
                        checked: true
                        text: qsTr("Public access")
                        onCheckedChanged: d.accessType = Constants.communityChatPublicAccess
                    }
                    RadioButton {
                        text: qsTr("On request")
                        onCheckedChanged: d.accessType = Constants.communityChatOnRequestAccess
                    }
                }

                // Join community overlay editor:
                Label {
                    Layout.fillWidth: true
                    text: "JOIN HOLDINGS EDITOR"
                    font.bold: true
                    font.pixelSize: 18
                }

                JoinCommunityPermissionsEditor {
                    channelName: d.chanelName
                    joinCommunity: d.joinCommunity
                    requirementsMet: d.requirementsMet
                    isInvitationPending: d.requestToJoinState !== Constants.RequestToJoinState.None
                    isJoinRequestRejected: d.isJoinRequestRejected
                    requiresRequest: d.requiresRequest

                    onChannelNameChanged: d.channelName = channelName
                    onJoinCommunityChanged: d.joinCommunity = joinCommunity
                    onRequirementsMetChanged: d.requirementsMet = requirementsMet
                    onIsInvitationPendingChanged: d.isInvitationPending = isInvitationPending
                    onIsJoinRequestRejectedChanged: d.isJoinRequestRejected = isJoinRequestRejected
                    onRequiresRequestChanged: d.requiresRequest = requiresRequest
                    onCommunityHoldingsModelChanged: d.communityHoldingsModel = communityHoldingsModel
                    onViewOnlyHoldingsModelChanged: d.viewOnlyHoldingsModel = viewOnlyHoldingsModel
                    onViewAndPostHoldingsModelChanged: d.viewAndPostHoldingsModel = viewAndPostHoldingsModel
                    onModerateHoldingsModelChanged: d.moderateHoldingsModel = moderateHoldingsModel
                }
            }
        }
    }
}

// category: Views

// https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A317901&t=05yQWHWBWOs2DUTp-0
// https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2698%3A380426&t=UOvsb3QLi26KmVrk-0
// https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0