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

208 lines
5.7 KiB
QML

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import utils 1.0
import shared.controls 1.0
import StatusQ.Controls 0.1
import shared.views 1.0
import shared.panels 1.0
import shared.popups 1.0
import "../panels"
import "../controls"
// TODO: replace with StatusModal
ModalPopup {
id: popup
property var store
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 = [];
popup.store.addToGroupContacts.clear();
getContactListObject(popup.store.addToGroupContacts)
popup.store.addToGroupContacts.append({
//% "(You)"
name: userProfile.name + " " + qsTrId("(you)"),
pubKey: userProfile.pubKey,
address: "",
identicon: userProfile.icon,
thumbnailImage: userProfile.icon,
isUser: true
});
noContactsRect.visible = !popup.store.allContacts.hasAddedContacts();
contactList.visible = !noContactsRect.visible;
if (!contactList.visible) {
memberCount = 0;
}
}
function validate() {
if (groupName.text === "") {
//% "You need to enter a channel name"
channelNameValidationError = qsTrId("you-need-to-enter-a-channel-name")
} else if (!Utils.isValidChannelName(groupName.text)) {
//% "The channel name can only contain lowercase letters, numbers and dashes"
channelNameValidationError = qsTrId("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;
}
// Not Refactored Yet
// popup.store.chatsModelInst.groups.create(Utils.filterXSS(groupName.text), JSON.stringify(pubKeys));
popup.close();
}
function groupNameFilter(text) {
groupName.text = text.toLowerCase().replace(' ', '-');
}
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.secondaryText
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
onTextEdited: function (text) {
groupNameFilter(text)
}
validator: RegExpValidator { regExp: /^[a-zA-Z0-9\-\ ]+$/ }
}
NoFriendsRectangle {
id: noContactsRect
visible: false
anchors.top: groupName.bottom
anchors.topMargin: Style.current.xlPadding
anchors.horizontalCenter: parent.horizontalCenter
}
ContactListPanel {
id: contactList
anchors.fill: parent
model: popup.store.addToGroupContacts
searchString: searchBox.text.toLowerCase()
selectMode: selectChatMembers && memberCount < maxMembers
anchors.topMargin: 50
anchors.top: searchBox.bottom
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.enabled = pubKeys.length > 0
}
}
footer: Item {
width: parent.width
height: btnSelectMembers.height
StatusRoundButton {
id: btnSelectMembers
visible: selectChatMembers
anchors.bottom: parent.bottom
anchors.right: parent.right
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
enabled: !!pubKeys.length
onClicked : {
if(pubKeys.length > 0)
selectChatMembers = false
searchBox.text = ""
groupName.forceActiveFocus(Qt.MouseFocusReason)
}
}
StatusRoundButton {
id: btnBack
visible: !selectChatMembers
anchors.bottom: parent.bottom
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
icon.rotation: 180
onClicked : {
selectChatMembers = true
}
}
StatusButton {
visible: !selectChatMembers
anchors.bottom: parent.bottom
anchors.right: parent.right
//% "Create Group Chat"
text: qsTrId("create-group-chat")
enabled: groupName.text !== ""
onClicked : doJoin()
}
}
}