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

195 lines
5.5 KiB
QML
Raw Normal View History

2020-06-17 15:56:48 +00:00
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
2020-06-17 15:56:48 +00:00
import "./"
ModalPopup {
id: popup
property var pubKeys: []
property bool selectChatMembers: true
property int memberCount: 1
readonly property int maxMembers: 10
property string channelNameValidationError: ""
2020-06-17 15:56:48 +00:00
onOpened: {
groupName.text = "";
searchBox.text = "";
selectChatMembers = true;
memberCount = 1;
pubKeys = [];
2020-12-11 20:38:10 +00:00
contactList.membersData.clear();
chatView.getContactListObject(contactList.membersData)
contactList.membersData.append({
//% "(You)"
name: profileModel.profile.username + " " + qsTrId("(you)"),
2020-06-17 15:56:48 +00:00
pubKey: profileModel.profile.pubKey,
address: "",
2020-06-17 15:56:48 +00:00
identicon: profileModel.profile.identicon,
2020-11-30 17:03:52 +00:00
thumbnailImage: profileModel.profile.thumbnailImage,
2020-06-17 15:56:48 +00:00
isUser: true
});
2020-12-06 22:15:51 +00:00
noContactsRect.visible = !profileModel.contacts.list.hasAddedContacts();
2020-12-11 20:38:10 +00:00
contactList.visible = !noContactsRect.visible;
if (!contactList.visible) {
memberCount = 0;
}
2020-06-17 15:56:48 +00:00
}
function validate() {
if (groupName.text === "") {
2021-02-18 16:36:05 +00:00
//% "You need to enter a channel name"
channelNameValidationError = qsTrId("you-need-to-enter-a-channel-name")
} else if (!Utils.isValidChannelName(groupName.text)) {
2021-02-18 16:36:05 +00:00
//% "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
}
2020-12-11 20:38:10 +00:00
if (pubKeys.length === 0) {
return;
}
chatsModel.groups.create(Utils.filterXSS(groupName.text), JSON.stringify(pubKeys));
2020-06-17 15:56:48 +00:00
popup.close();
}
function groupNameFilter(text) {
groupName.text = text.toLowerCase().replace(' ', '-');
}
2020-06-17 15:56:48 +00:00
header: Item {
height: 30
width: parent.width
StyledText {
2020-06-17 15:56:48 +00:00
id: lblNewGroup
//% "New group chat"
text: qsTrId("new-group-chat")
2020-06-17 15:56:48 +00:00
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.top: parent.top
}
StyledText {
2020-06-17 15:56:48 +00:00
anchors.top: lblNewGroup.bottom
//% "%1 / 10 members"
text: qsTrId("%1-/-10-members").arg(memberCount)
color: Style.current.secondaryText
2020-06-17 15:56:48 +00:00
font.pixelSize: 15
}
}
2020-06-18 13:54:08 +00:00
SearchBox {
2020-06-17 15:56:48 +00:00
id: searchBox
visible: selectChatMembers
iconWidth: 17
iconHeight: 17
2020-06-18 13:54:08 +00:00
customHeight: 44
fontPixelSize: 15
2020-06-17 15:56:48 +00:00
}
Input {
id: groupName
//% "Group name"
placeholderText: qsTrId("group-name")
2020-06-17 15:56:48 +00:00
visible: !selectChatMembers
validationError: channelNameValidationError
onTextEdited: function (text) {
groupNameFilter(text)
}
validator: RegExpValidator { regExp: /^[a-zA-Z0-9\-\ ]+$/ }
2020-06-17 15:56:48 +00:00
}
2020-12-11 20:38:10 +00:00
NoFriendsRectangle {
id: noContactsRect
anchors.top: groupName.bottom
anchors.topMargin: Style.current.xlPadding
anchors.horizontalCenter: parent.horizontalCenter
}
2020-12-11 20:38:10 +00:00
ContactList {
id: contactList
searchString: searchBox.text.toLowerCase()
selectMode: selectChatMembers && memberCount < maxMembers
2020-06-17 15:56:48 +00:00
anchors.topMargin: 50
anchors.top: searchBox.bottom
2020-12-11 20:38:10 +00:00
onItemChecked: function(pubKey, itemChecked){
var idx = pubKeys.indexOf(pubKey)
if(itemChecked){
if(idx === -1){
pubKeys.push(pubKey)
2020-06-17 15:56:48 +00:00
}
2020-12-11 20:38:10 +00:00
} else {
if(idx > -1){
pubKeys.splice(idx, 1);
2020-06-17 15:56:48 +00:00
}
}
2020-12-11 20:38:10 +00:00
memberCount = pubKeys.length + 1;
btnSelectMembers.enabled = pubKeys.length > 0
2020-06-17 15:56:48 +00:00
}
}
2020-12-11 20:38:10 +00:00
2020-06-17 15:56:48 +00:00
footer: Item {
width: parent.width
height: btnSelectMembers.height
2020-06-17 15:56:48 +00:00
StatusRoundButton {
2020-06-17 15:56:48 +00:00
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)
2020-06-17 15:56:48 +00:00
}
}
StatusRoundButton {
2020-06-17 15:56:48 +00:00
id: btnBack
visible: !selectChatMembers
anchors.bottom: parent.bottom
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
onClicked : {
selectChatMembers = true
2020-06-17 15:56:48 +00:00
}
}
StatusButton {
2020-06-17 15:56:48 +00:00
visible: !selectChatMembers
anchors.bottom: parent.bottom
anchors.right: parent.right
//% "Create Group Chat"
text: qsTrId("create-group-chat")
enabled: groupName.text !== ""
2020-06-17 15:56:48 +00:00
onClicked : doJoin()
}
}
}