status-desktop/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import "../../../../imports"
import "../../../../shared"
import "./"

ModalPopup {
    id: popup

    property var pubKeys: []
    property bool selectChatMembers: true
    property int memberCount: 1
    readonly property int maxMembers: 10
    property string channelNameValidationError: ""

    onOpened: {
        groupName.text = "";
        searchBox.text = "";
        selectChatMembers = true;
        memberCount = 1;
        pubKeys = [];
        btnSelectMembers.state = "inactive";
        for(var i in groupMembers.contentItem.children){
            if (groupMembers.contentItem.children[i].isChecked !== null) {
                groupMembers.contentItem.children[i].isChecked = false
            }
        }

        data.clear();
        const nbContacts = profileModel.contacts.list.rowCount()
        for(let i = 0; i < nbContacts; i++){
            data.append({
                name: profileModel.contacts.list.rowData(i, "name"),
                localNickname: profileModel.contacts.list.rowData(i, "localNickname"),
                pubKey: profileModel.contacts.list.rowData(i, "pubKey"),
                address: profileModel.contacts.list.rowData(i, "address"),
                identicon: profileModel.contacts.list.rowData(i, "identicon"),
                thumbnailImage: profileModel.contacts.list.rowData(i, "thumbnailImage"),
                isUser: false,
                isContact: profileModel.contacts.list.rowData(i, "isContact") !== "false"
            });
        }
        data.append({
            //% "(You)"
            name: profileModel.profile.username + " " + qsTrId("(you)"),
            pubKey: profileModel.profile.pubKey,
            address: "",
            identicon: profileModel.profile.identicon,
            thumbnailImage: profileModel.profile.thumbnailImage,
            isUser: true
        });
        noContactsRect.visible = !profileModel.contacts.list.hasAddedContacts();
        svMembers.visible = !noContactsRect.visible;
        if(!svMembers.visible){
            memberCount = 0;
        }
    }

    function validate() {
        if (groupName.text === "") {
            channelNameValidationError = qsTr("You need to enter a channel name")
        } else if (!Utils.isValidChannelName(groupName.text)) {
            channelNameValidationError = qsTr("The channel name can only contain lowercase letters, numbers and dashes")
        } else {
            channelNameValidationError = ""
        }

        return channelNameValidationError === ""
    }

    function doJoin() {
        if (!validate()) {
            return
        }
        if(pubKeys.length === 0) {
            return;
        }
        chatsModel.groups.create(Utils.filterXSS(groupName.text), JSON.stringify(pubKeys));
        popup.close();
    }

    header: Item {
      height: 30
      width: parent.width
   
      StyledText {
          id: lblNewGroup
          //% "New group chat"
          text: qsTrId("new-group-chat")
          anchors.left: parent.left
          font.bold: true
          font.pixelSize: 17
          anchors.top: parent.top
      }

      StyledText {
          anchors.top: lblNewGroup.bottom
          //% "%1 / 10 members"
          text: qsTrId("%1-/-10-members").arg(memberCount)
          color: Style.current.darkGrey
          font.pixelSize: 15
      }
    }

    SearchBox {
        id: searchBox
        visible: selectChatMembers
        iconWidth: 17
        iconHeight: 17
        customHeight: 44
        fontPixelSize: 15
    }

    Input {
        id: groupName
        //% "Group name"
        placeholderText: qsTrId("group-name")
        visible: !selectChatMembers
        validationError: channelNameValidationError
    }

    Rectangle {
        id: noContactsRect
        width: 260
        anchors.top: groupName.bottom
        anchors.topMargin: Style.current.xlPadding
        anchors.horizontalCenter: parent.horizontalCenter
        StyledText {
            id: noContacts
            //% "You don’t have any contacts yet. Invite your friends to start chatting."
            text: qsTrId("you-don-t-have-any-contacts-yet--invite-your-friends-to-start-chatting-")
            color: Style.current.darkGrey
            anchors.top: parent.top
            anchors.topMargin: Style.current.padding
            anchors.left: parent.left
            anchors.right: parent.right
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
        }
        StyledButton {
            //% "Invite friends"
            label: qsTrId("invite-friends")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: noContacts.bottom
            anchors.topMargin: Style.current.xlPadding
            onClicked: {
                inviteFriendsPopup.open()
            }
        }
        InviteFriendsPopup {
            id: inviteFriendsPopup
        }
    }

    ScrollView {
        anchors.fill: parent
        anchors.topMargin: 50
        anchors.top: searchBox.bottom
        Layout.fillWidth: true
        Layout.fillHeight: true

        id: svMembers
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.vertical.policy: groupMembers.contentHeight > groupMembers.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff

        ListView {
            anchors.fill: parent
            model: ListModel {
                id: data
            }
            spacing: 0
            clip: true
            id: groupMembers
            delegate: Contact {
                isVisible: {
                    if(selectChatMembers){
                        return searchBox.text == "" || model.name.includes(searchBox.text)
                    } else {
                        return isChecked || isUser
                    }
                }
                showCheckbox: selectChatMembers && memberCount < maxMembers
                pubKey: model.pubKey
                isContact: !!model.isContact
                isUser: model.isUser
                name: !model.name.endsWith(".eth") && !!model.localNickname ?
                          model.localNickname : Utils.removeStatusEns(model.name)
                address: model.address
                identicon: model.thumbnailImage || model.identicon
                onItemChecked: function(pubKey, itemChecked){
                    var idx = pubKeys.indexOf(pubKey)
                    if(itemChecked){
                        if(idx === -1){
                            pubKeys.push(pubKey)
                        }
                    } else {
                        if(idx > -1){
                            pubKeys.splice(idx, 1);
                        }
                    }
                    memberCount = pubKeys.length + 1;
                    btnSelectMembers.state = pubKeys.length > 0 ? "active" : "inactive"
                }
            }
        }
    }
    
    footer: Item {
        anchors.top: parent.bottom
        anchors.right: parent.right
        anchors.bottom: popup.bottom
        anchors.left: parent.left

        Button {
            id: btnSelectMembers
            visible: selectChatMembers
            width: 44
            height: 44
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            state: "inactive"
            states: [
                State {
                    name: "inactive"
                    PropertyChanges {
                        target: btnSelectMembersImg
                        source: "../../../img/arrow-right-btn-inactive.svg"
                    }
                },
                State {
                    name: "active"
                    PropertyChanges {
                        target: btnSelectMembersImg
                        source: "../../../img/arrow-right-btn-active.svg"
                    }
                }
            ]
            SVGImage {
                id: btnSelectMembersImg
                width: 50
                height: 50
            }
            background: Rectangle {
                color: "transparent"
            }
            MouseArea {
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked : {
                    if(pubKeys.length > 0)
                        selectChatMembers = false
                        searchBox.text = ""
                        groupName.forceActiveFocus(Qt.MouseFocusReason)
                }
            }
        }

        Button {
            id: btnBack
            visible: !selectChatMembers
            width: 44
            height: 44
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            SVGImage {
                source: "../../../img/arrow-left-btn-active.svg"
                width: 50
                height: 50
            }
            background: Rectangle {
                color: "transparent"
            }
            MouseArea {
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked : {
                    selectChatMembers = true
                }
            }
        }

        StyledButton {
            visible: !selectChatMembers
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            //% "Create Group Chat"
            label: qsTrId("create-group-chat")
            disabled: groupName.text === ""
            onClicked : doJoin()
        }
    }
}