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 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(); for(let i = 0; i < profileModel.contactList.rowCount(); i++){ data.append({ name: profileModel.contactList.rowData(i, "name"), pubKey: profileModel.contactList.rowData(i, "pubKey"), address: profileModel.contactList.rowData(i, "address"), identicon: profileModel.contactList.rowData(i, "identicon"), isUser: false }); } data.append({ name: profileModel.profile.username + " " + qsTr("(You)"), pubKey: profileModel.profile.pubKey, address: profileModel.profile.address, identicon: profileModel.profile.identicon, isUser: true }); } function doJoin(){ if(pubKeys.length === 0) return; chatsModel.createGroup(groupName.text, JSON.stringify(pubKeys)); popup.close(); } header: Item { height: 30 width: parent.width StyledText { id: lblNewGroup text: qsTr("New group chat") anchors.left: parent.left font.bold: true font.pixelSize: 17 anchors.top: parent.top anchors.topMargin: Theme.padding } StyledText { anchors.top: lblNewGroup.bottom text: qsTr("%1 / 10 members").arg(memberCount) color: Theme.darkGrey font.pixelSize: 15 } } SearchBox { id: searchBox visible: selectChatMembers iconWidth: 17 iconHeight: 17 customHeight: 44 fontPixelSize: 15 } Input { id: groupName placeholderText: qsTr("Group name") visible: !selectChatMembers } ScrollView { anchors.fill: parent anchors.topMargin: 50 anchors.top: searchBox.bottom Layout.fillWidth: true Layout.fillHeight: true 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 isUser: model.isUser name: model.name address: model.address identicon: 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" } } ] Image { id: "btnSelectMembersImg" } 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 Image { source: "../../../img/arrow-left-btn-active.svg" } 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 label: qsTr("Create Group Chat") disabled: groupName.text === "" onClicked : doJoin() } } }