2022-08-01 14:17:28 +00:00
|
|
|
import QtQuick 2.14
|
|
|
|
import QtQuick.Controls 2.14
|
2020-12-11 20:29:46 +00:00
|
|
|
import QtQuick.Dialogs 1.3
|
2022-08-01 14:17:28 +00:00
|
|
|
import QtQml.Models 2.14
|
|
|
|
|
2021-10-08 12:26:46 +00:00
|
|
|
import utils 1.0
|
2022-05-12 17:18:25 +00:00
|
|
|
import shared.panels 1.0
|
2020-12-11 20:29:46 +00:00
|
|
|
|
2021-07-07 12:45:11 +00:00
|
|
|
import StatusQ.Core 0.1
|
|
|
|
import StatusQ.Core.Theme 0.1
|
2022-03-07 14:56:05 +00:00
|
|
|
import StatusQ.Core.Utils 0.1 as StatusQUtils
|
2021-07-07 12:45:11 +00:00
|
|
|
import StatusQ.Controls 0.1
|
2021-08-16 13:46:00 +00:00
|
|
|
import StatusQ.Controls.Validators 0.1
|
2021-07-07 12:45:11 +00:00
|
|
|
import StatusQ.Components 0.1
|
|
|
|
import StatusQ.Popups 0.1
|
2022-08-01 14:17:28 +00:00
|
|
|
import StatusQ.Popups.Dialog 0.1
|
2021-07-07 12:45:11 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
StatusDialog {
|
|
|
|
id: root
|
|
|
|
width: 480
|
|
|
|
height: 509
|
2021-12-21 09:26:13 +00:00
|
|
|
|
2021-05-28 02:55:50 +00:00
|
|
|
property bool isEdit: false
|
2022-08-05 06:47:19 +00:00
|
|
|
property bool isDeleteable: false
|
2022-01-31 18:57:05 +00:00
|
|
|
property string chatId: ""
|
2022-01-31 13:33:42 +00:00
|
|
|
property string categoryId: ""
|
2021-12-21 09:26:13 +00:00
|
|
|
property string channelName: ""
|
|
|
|
property string channelDescription: ""
|
2022-03-07 14:56:05 +00:00
|
|
|
property string channelEmoji: ""
|
2022-03-10 19:28:37 +00:00
|
|
|
property string channelColor: ""
|
2022-03-07 14:56:05 +00:00
|
|
|
property bool emojiPopupOpened: false
|
|
|
|
property var emojiPopup: null
|
2022-07-08 13:47:23 +00:00
|
|
|
readonly property int communityColorValidator: Utils.Validate.NoEmpty
|
2022-03-10 19:28:37 +00:00
|
|
|
| Utils.Validate.TextHexColor
|
2021-06-29 12:47:28 +00:00
|
|
|
|
2022-05-09 08:40:27 +00:00
|
|
|
readonly property int maxChannelNameLength: 24
|
2021-06-29 12:47:28 +00:00
|
|
|
readonly property int maxChannelDescLength: 140
|
2022-02-09 09:43:23 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
signal createCommunityChannel(string chName, string chDescription, string chEmoji, string chColor, string chCategoryId)
|
|
|
|
signal editCommunityChannel(string chName, string chDescription, string chEmoji, string chColor, string chCategoryId)
|
2022-08-05 06:47:19 +00:00
|
|
|
signal deleteCommunityChannel()
|
2021-06-02 19:43:33 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
title: qsTr("New channel")
|
2020-12-11 20:29:46 +00:00
|
|
|
|
|
|
|
onOpened: {
|
2022-08-01 14:17:28 +00:00
|
|
|
nameInput.text = ""
|
2022-08-11 11:55:08 +00:00
|
|
|
nameInput.input.asset.emoji = ""
|
2022-08-01 14:17:28 +00:00
|
|
|
nameInput.input.edit.forceActiveFocus(Qt.MouseFocusReason)
|
2021-05-28 02:55:50 +00:00
|
|
|
if (isEdit) {
|
2022-08-01 14:17:28 +00:00
|
|
|
root.title = qsTr("Edit #%1").arg(root.channelName);
|
|
|
|
nameInput.text = root.channelName
|
|
|
|
descriptionTextArea.text = root.channelDescription
|
|
|
|
if (root.channelEmoji) {
|
2022-08-11 11:55:08 +00:00
|
|
|
nameInput.input.asset.emoji = root.channelEmoji
|
2022-03-21 20:51:54 +00:00
|
|
|
}
|
2022-08-01 14:17:28 +00:00
|
|
|
colorDialog.color = root.channelColor
|
2022-05-09 16:12:17 +00:00
|
|
|
} else {
|
2022-08-11 11:55:08 +00:00
|
|
|
nameInput.input.asset.isLetterIdenticon = true;
|
2021-05-28 02:55:50 +00:00
|
|
|
}
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
2021-07-07 12:45:11 +00:00
|
|
|
|
2021-03-29 12:28:41 +00:00
|
|
|
onClosed: destroy()
|
2020-12-11 20:29:46 +00:00
|
|
|
|
2022-03-07 14:56:05 +00:00
|
|
|
Connections {
|
2022-08-01 14:17:28 +00:00
|
|
|
enabled: root.opened && root.emojiPopupOpened
|
2022-03-07 14:56:05 +00:00
|
|
|
target: emojiPopup
|
|
|
|
|
|
|
|
onEmojiSelected: function (emojiText, atCursor) {
|
2022-08-11 11:55:08 +00:00
|
|
|
nameInput.input.asset.isLetterIdenticon = false;
|
|
|
|
nameInput.input.asset.emoji = emojiText
|
2022-03-07 14:56:05 +00:00
|
|
|
}
|
|
|
|
onClosed: {
|
2022-08-01 14:17:28 +00:00
|
|
|
root.emojiPopupOpened = false
|
2022-03-07 14:56:05 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-29 12:47:28 +00:00
|
|
|
function isFormValid() {
|
2022-08-01 14:17:28 +00:00
|
|
|
return (nameInput.valid &&
|
|
|
|
descriptionTextArea.valid) &&
|
|
|
|
Utils.validateAndReturnError(colorDialog.color.toString().toUpperCase(),
|
|
|
|
communityColorValidator) === ""
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
StatusScrollView {
|
2021-07-07 12:45:11 +00:00
|
|
|
|
|
|
|
id: scrollView
|
2020-12-11 20:29:46 +00:00
|
|
|
|
|
|
|
property ScrollBar vScrollBar: ScrollBar.vertical
|
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
width: root.width
|
2021-07-07 12:45:11 +00:00
|
|
|
height: Math.min(content.height, 432)
|
2022-08-01 14:17:28 +00:00
|
|
|
leftPadding: 0
|
2020-12-11 20:29:46 +00:00
|
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
|
|
|
|
|
|
function scrollBackUp() {
|
|
|
|
vScrollBar.setPosition(0)
|
|
|
|
}
|
|
|
|
|
2021-07-07 12:45:11 +00:00
|
|
|
Column {
|
2020-12-11 20:29:46 +00:00
|
|
|
id: content
|
2021-07-07 12:45:11 +00:00
|
|
|
|
2021-08-16 13:46:00 +00:00
|
|
|
StatusInput {
|
|
|
|
id: nameInput
|
2022-07-25 17:15:02 +00:00
|
|
|
input.edit.objectName: "createOrEditCommunityChannelNameInput"
|
2022-03-10 19:28:37 +00:00
|
|
|
label: qsTr("Channel name")
|
2022-08-01 14:17:28 +00:00
|
|
|
charLimit: root.maxChannelNameLength
|
|
|
|
placeholderText: qsTr("# Name the channel")
|
|
|
|
|
2021-08-16 13:46:00 +00:00
|
|
|
input.onTextChanged: {
|
2022-11-08 21:28:37 +00:00
|
|
|
const cursorPosition = input.cursorPosition
|
|
|
|
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text)
|
|
|
|
input.cursorPosition = cursorPosition
|
2022-08-01 14:17:28 +00:00
|
|
|
if (root.channelEmoji === "") {
|
2022-05-12 17:18:25 +00:00
|
|
|
input.letterIconName = text;
|
|
|
|
}
|
2021-03-29 12:28:41 +00:00
|
|
|
}
|
2022-08-11 11:55:08 +00:00
|
|
|
input.asset.color: colorDialog.color.toString()
|
2023-01-05 00:30:06 +00:00
|
|
|
leftPadding: 16
|
2022-05-12 17:18:25 +00:00
|
|
|
input.rightComponent: StatusRoundButton {
|
2022-08-15 11:43:38 +00:00
|
|
|
objectName: "StatusChannelPopup_emojiButton"
|
2022-08-01 14:17:28 +00:00
|
|
|
implicitWidth: 32
|
|
|
|
implicitHeight: 32
|
|
|
|
icon.width: 20
|
|
|
|
icon.height: 20
|
2022-05-12 17:18:25 +00:00
|
|
|
icon.name: "smiley"
|
|
|
|
onClicked: {
|
2022-08-01 14:17:28 +00:00
|
|
|
root.emojiPopupOpened = true;
|
|
|
|
root.emojiPopup.open();
|
|
|
|
root.emojiPopup.emojiSize = StatusQUtils.Emoji.size.verySmall;
|
|
|
|
root.emojiPopup.x = root.x + (root.width - root.emojiPopup.width - Style.current.padding);
|
|
|
|
root.emojiPopup.y = root.y + root.header.height + root.topPadding + nameInput.height + Style.current.smallPadding;
|
2022-05-12 17:18:25 +00:00
|
|
|
}
|
2022-03-10 17:01:17 +00:00
|
|
|
}
|
2022-05-09 08:40:27 +00:00
|
|
|
validators: [
|
|
|
|
StatusMinLengthValidator {
|
|
|
|
minLength: 1
|
|
|
|
errorMessage: Utils.getErrorMessage(nameInput.errors, qsTr("channel name"))
|
2023-01-27 00:12:48 +00:00
|
|
|
},
|
|
|
|
StatusRegularExpressionValidator {
|
|
|
|
regularExpression: Constants.regularExpressions.alphanumericalExpanded
|
|
|
|
errorMessage: Constants.errorMessages.alphanumericalExpandedRegExp
|
2022-05-09 08:40:27 +00:00
|
|
|
}
|
|
|
|
]
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
|
|
|
|
2022-03-10 19:28:37 +00:00
|
|
|
Item {
|
|
|
|
id: spacer1
|
|
|
|
height: 16
|
|
|
|
width: parent.width
|
|
|
|
}
|
|
|
|
|
|
|
|
StatusBaseText {
|
2022-05-09 16:12:17 +00:00
|
|
|
text: qsTr("Channel colour")
|
2022-03-10 19:28:37 +00:00
|
|
|
font.pixelSize: 15
|
|
|
|
color: Theme.palette.directColor1
|
|
|
|
}
|
|
|
|
|
2022-05-09 16:12:17 +00:00
|
|
|
Item {
|
|
|
|
id: spacer2
|
|
|
|
height: 8
|
|
|
|
width: parent.width
|
|
|
|
}
|
|
|
|
|
2022-03-10 19:28:37 +00:00
|
|
|
Item {
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
height: colorSelectorButton.height + 16
|
2022-08-01 14:17:28 +00:00
|
|
|
width: parent.width
|
2022-03-10 19:28:37 +00:00
|
|
|
|
|
|
|
StatusPickerButton {
|
|
|
|
id: colorSelectorButton
|
|
|
|
|
|
|
|
property string validationError: ""
|
|
|
|
|
|
|
|
bgColor: colorDialog.colorSelected ?
|
2022-08-01 14:17:28 +00:00
|
|
|
colorDialog.color : Theme.palette.baseColor2
|
2022-03-10 19:28:37 +00:00
|
|
|
// TODO adjust text color depending on the background color to make it readable
|
|
|
|
// contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
|
|
|
|
text: colorDialog.colorSelected ?
|
2022-08-01 14:17:28 +00:00
|
|
|
colorDialog.color.toString().toUpperCase() :
|
2023-01-05 00:30:06 +00:00
|
|
|
qsTr("Pick a colour")
|
2022-03-10 19:28:37 +00:00
|
|
|
|
|
|
|
onClicked: colorDialog.open();
|
|
|
|
onTextChanged: {
|
|
|
|
if (colorDialog.colorSelected) {
|
|
|
|
validationError = Utils.validateAndReturnError(text, communityColorValidator)
|
|
|
|
}
|
|
|
|
}
|
2022-05-18 12:21:03 +00:00
|
|
|
}
|
2022-03-10 19:28:37 +00:00
|
|
|
|
2022-05-18 12:21:03 +00:00
|
|
|
StatusColorDialog {
|
|
|
|
id: colorDialog
|
|
|
|
anchors.centerIn: parent
|
2022-08-01 14:17:28 +00:00
|
|
|
property bool colorSelected: root.isEdit && root.channelColor
|
|
|
|
color: root.isEdit && root.channelColor ? root.channelColor :
|
|
|
|
Theme.palette.primaryColor1
|
2022-05-18 12:21:03 +00:00
|
|
|
onAccepted: colorSelected = true
|
2022-03-10 19:28:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
StatusBaseText {
|
|
|
|
text: colorSelectorButton.validationError
|
|
|
|
visible: !!text
|
|
|
|
color: Theme.palette.dangerColor1
|
|
|
|
anchors.top: colorSelectorButton.bottom
|
|
|
|
anchors.topMargin: 4
|
|
|
|
anchors.right: colorSelectorButton.right
|
|
|
|
}
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
|
|
|
|
2021-08-16 13:46:00 +00:00
|
|
|
StatusInput {
|
|
|
|
id: descriptionTextArea
|
2022-07-25 17:15:02 +00:00
|
|
|
input.edit.objectName: "createOrEditCommunityChannelDescriptionInput"
|
2022-08-01 14:17:28 +00:00
|
|
|
input.verticalAlignment: TextEdit.AlignTop
|
2021-08-16 13:46:00 +00:00
|
|
|
label: qsTr("Description")
|
|
|
|
charLimit: 140
|
|
|
|
|
2022-07-22 10:28:04 +00:00
|
|
|
placeholderText: qsTr("Describe the channel")
|
2021-08-16 13:46:00 +00:00
|
|
|
input.multiline: true
|
2022-07-26 09:49:28 +00:00
|
|
|
minimumHeight: 88
|
|
|
|
maximumHeight: 88
|
2021-09-20 03:00:50 +00:00
|
|
|
validators: [StatusMinLengthValidator {
|
2022-08-01 14:17:28 +00:00
|
|
|
minLength: 1
|
|
|
|
errorMessage: Utils.getErrorMessage(descriptionTextArea.errors, qsTr("channel description"))
|
|
|
|
}]
|
2021-05-28 02:55:50 +00:00
|
|
|
}
|
2021-08-16 13:46:00 +00:00
|
|
|
|
2021-07-07 12:45:11 +00:00
|
|
|
/* TODO: use the code below to enable private channels and message limit */
|
|
|
|
/* StatusListItem { */
|
|
|
|
/* width: parent.width */
|
|
|
|
/* height: 56 */
|
|
|
|
/* sensor.enabled: false */
|
2022-04-04 11:26:30 +00:00
|
|
|
/* title: qsTr("Private channel") */
|
2021-07-07 12:45:11 +00:00
|
|
|
/* components: [ */
|
|
|
|
/* StatusSwitch { */
|
|
|
|
/* id: privateSwitch */
|
|
|
|
/* } */
|
|
|
|
/* ] */
|
|
|
|
/* } */
|
|
|
|
|
|
|
|
/* StatusBaseText { */
|
|
|
|
/* width: parent.width - 32 */
|
|
|
|
/* anchors.left: parent.left */
|
|
|
|
/* anchors.right: parent.right */
|
|
|
|
/* anchors.rightMargin: 121 */
|
|
|
|
/* anchors.leftMargin: 16 */
|
|
|
|
/* color: Theme.palette.baseColor1 */
|
|
|
|
/* wrapMode: Text.WordWrap */
|
2022-04-04 11:26:30 +00:00
|
|
|
/* text: qsTr("By making a channel private, only members with selected permission will be able to access it") */
|
2021-07-07 12:45:11 +00:00
|
|
|
/* } */
|
|
|
|
|
|
|
|
/* StatusModalDivider { */
|
|
|
|
/* topPadding: 8 */
|
|
|
|
/* bottomPadding: 8 */
|
|
|
|
/* } */
|
|
|
|
|
|
|
|
/* StatusListItem { */
|
|
|
|
/* width: parent.width */
|
|
|
|
/* height: 56 */
|
|
|
|
/* sensor.enabled: false */
|
2022-04-04 11:26:30 +00:00
|
|
|
/* title: qsTr("Message limit") */
|
2021-07-07 12:45:11 +00:00
|
|
|
/* components: [ */
|
|
|
|
/* StatusSwitch {} */
|
|
|
|
/* ] */
|
|
|
|
/* } */
|
|
|
|
|
|
|
|
/* StatusBaseText { */
|
|
|
|
/* width: parent.width - 32 */
|
|
|
|
/* anchors.left: parent.left */
|
|
|
|
/* anchors.right: parent.right */
|
|
|
|
/* anchors.rightMargin: 121 */
|
|
|
|
/* anchors.leftMargin: 16 */
|
|
|
|
/* color: Theme.palette.baseColor1 */
|
|
|
|
/* wrapMode: Text.WordWrap */
|
2022-04-04 11:26:30 +00:00
|
|
|
/* text: qsTr("Limit channel members to sending one message per chose time interval") */
|
2021-07-07 12:45:11 +00:00
|
|
|
/* } */
|
|
|
|
|
2021-09-07 13:23:07 +00:00
|
|
|
Item {
|
|
|
|
width: parent.width
|
|
|
|
height: 8
|
|
|
|
}
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
2021-07-07 12:45:11 +00:00
|
|
|
}
|
2022-02-09 09:43:23 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
footer: StatusDialogFooter {
|
|
|
|
rightButtons: ObjectModel {
|
2022-08-05 06:47:19 +00:00
|
|
|
StatusButton {
|
|
|
|
objectName: "deleteCommunityChannelBtn"
|
|
|
|
visible: isEdit && isDeleteable
|
|
|
|
text: qsTr("Delete channel")
|
|
|
|
type: StatusBaseButton.Type.Danger
|
|
|
|
onClicked: {
|
|
|
|
root.deleteCommunityChannel()
|
|
|
|
}
|
|
|
|
}
|
2022-08-01 14:17:28 +00:00
|
|
|
StatusButton {
|
|
|
|
objectName: "createOrEditCommunityChannelBtn"
|
|
|
|
enabled: isFormValid()
|
|
|
|
text: isEdit ?
|
2022-08-05 06:47:19 +00:00
|
|
|
qsTr("Save changes") :
|
|
|
|
qsTr("Create channel")
|
2022-08-01 14:17:28 +00:00
|
|
|
onClicked: {
|
|
|
|
if (!isFormValid()) {
|
|
|
|
scrollView.scrollBackUp()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let error = "";
|
2022-08-11 11:55:08 +00:00
|
|
|
let emoji = StatusQUtils.Emoji.deparseFromParse(nameInput.input.asset.emoji)
|
2022-08-01 14:17:28 +00:00
|
|
|
|
|
|
|
if (!isEdit) {
|
|
|
|
//scrollView.communityColor.color.toString().toUpperCase()
|
2022-07-05 10:12:27 +00:00
|
|
|
root.createCommunityChannel(StatusQUtils.Utils.filterXSS(nameInput.input.text),
|
|
|
|
StatusQUtils.Utils.filterXSS(descriptionTextArea.text),
|
2022-08-01 14:17:28 +00:00
|
|
|
emoji,
|
|
|
|
colorDialog.color.toString().toUpperCase(),
|
|
|
|
root.categoryId)
|
|
|
|
} else {
|
2022-07-05 10:12:27 +00:00
|
|
|
root.editCommunityChannel(StatusQUtils.Utils.filterXSS(nameInput.input.text),
|
|
|
|
StatusQUtils.Utils.filterXSS(descriptionTextArea.text),
|
2022-08-01 14:17:28 +00:00
|
|
|
emoji,
|
|
|
|
colorDialog.color.toString().toUpperCase(),
|
|
|
|
root.categoryId)
|
|
|
|
}
|
2021-07-07 12:45:11 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
if (error) {
|
|
|
|
const errorJson = JSON.parse(error)
|
|
|
|
creatingError.text = errorJson.error
|
|
|
|
return creatingError.open()
|
|
|
|
}
|
2020-12-11 20:29:46 +00:00
|
|
|
|
2022-08-01 14:17:28 +00:00
|
|
|
// TODO Open the community once we have designs for it
|
|
|
|
root.close()
|
|
|
|
}
|
2021-07-07 12:45:11 +00:00
|
|
|
}
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
2022-08-01 14:17:28 +00:00
|
|
|
}
|
2021-07-07 12:45:11 +00:00
|
|
|
|
|
|
|
MessageDialog {
|
|
|
|
id: creatingError
|
2022-04-04 11:26:30 +00:00
|
|
|
title: qsTr("Error creating the community")
|
2021-07-07 12:45:11 +00:00
|
|
|
icon: StandardIcon.Critical
|
|
|
|
standardButtons: StandardButton.Ok
|
2020-12-11 20:29:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|