refactor(Communities): use StatusQ's StatusInput in create channel popup
This commit is contained in:
parent
a81678f742
commit
abb44cb1ec
|
@ -1,15 +1,12 @@
|
||||||
import QtQuick 2.12
|
import QtQuick 2.12
|
||||||
import QtQuick.Controls 2.3
|
import QtQuick.Controls 2.3
|
||||||
import QtGraphicalEffects 1.13
|
|
||||||
import QtQuick.Dialogs 1.3
|
import QtQuick.Dialogs 1.3
|
||||||
import "../../../../imports"
|
import "../../../../imports"
|
||||||
import "../components"
|
|
||||||
import "../../../../shared"
|
|
||||||
import "../../../../shared/status"
|
|
||||||
|
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
import StatusQ.Controls 0.1
|
import StatusQ.Controls 0.1
|
||||||
|
import StatusQ.Controls.Validators 0.1
|
||||||
import StatusQ.Components 0.1
|
import StatusQ.Components 0.1
|
||||||
import StatusQ.Popups 0.1
|
import StatusQ.Popups 0.1
|
||||||
|
|
||||||
|
@ -21,13 +18,7 @@ StatusModal {
|
||||||
property string categoryId: ""
|
property string categoryId: ""
|
||||||
|
|
||||||
readonly property int maxChannelNameLength: 30
|
readonly property int maxChannelNameLength: 30
|
||||||
readonly property var channelNameValidator: Utils.Validate.NoEmpty
|
|
||||||
| Utils.Validate.TextLength
|
|
||||||
| Utils.Validate.TextLowercaseLettersNumberAndDashes
|
|
||||||
|
|
||||||
readonly property int maxChannelDescLength: 140
|
readonly property int maxChannelDescLength: 140
|
||||||
readonly property var channelDescValidator: Utils.Validate.NoEmpty
|
|
||||||
| Utils.Validate.TextLength
|
|
||||||
|
|
||||||
property Component pinnedMessagesPopupComponent
|
property Component pinnedMessagesPopupComponent
|
||||||
|
|
||||||
|
@ -35,28 +26,20 @@ StatusModal {
|
||||||
header.title: qsTrId("create-channel-title")
|
header.title: qsTrId("create-channel-title")
|
||||||
|
|
||||||
onOpened: {
|
onOpened: {
|
||||||
contentComponent.channelName.text = ""
|
contentComponent.channelName.input.text = ""
|
||||||
if (isEdit) {
|
if (isEdit) {
|
||||||
//% "Edit #%1"
|
//% "Edit #%1"
|
||||||
header.title = qsTrId("edit---1").arg(channel.name);
|
header.title = qsTrId("edit---1").arg(channel.name);
|
||||||
contentComponent.channelName.text = channel.name
|
contentComponent.channelName.input.text = channel.name
|
||||||
}
|
}
|
||||||
contentComponent.channelName.forceActiveFocus(Qt.MouseFocusReason)
|
contentComponent.channelName.input.forceActiveFocus(Qt.MouseFocusReason)
|
||||||
}
|
}
|
||||||
|
|
||||||
onClosed: destroy()
|
onClosed: destroy()
|
||||||
|
|
||||||
function isFormValid() {
|
function isFormValid() {
|
||||||
return Utils.validateAndReturnError(contentComponent.channelName.text,
|
return contentComponent.channelName.valid &&
|
||||||
channelNameValidator,
|
contentComponent.channelDescription.valid
|
||||||
//% "channel name"
|
|
||||||
qsTrId("channel-name"),
|
|
||||||
maxChannelNameLength) === ""
|
|
||||||
&& Utils.validateAndReturnError(contentComponent.channelDescription.text,
|
|
||||||
channelDescValidator,
|
|
||||||
//% "channel decription"
|
|
||||||
qsTrId("channel-decription"),
|
|
||||||
maxChannelDescLength) === ""
|
|
||||||
}
|
}
|
||||||
|
|
||||||
content: ScrollView {
|
content: ScrollView {
|
||||||
|
@ -83,28 +66,16 @@ StatusModal {
|
||||||
id: content
|
id: content
|
||||||
width: popup.width
|
width: popup.width
|
||||||
|
|
||||||
Item {
|
StatusInput {
|
||||||
width: parent.width
|
|
||||||
height: 76
|
|
||||||
|
|
||||||
Input {
|
|
||||||
id: nameInput
|
id: nameInput
|
||||||
width: parent.width - 32
|
charLimit: popup.maxChannelNameLength
|
||||||
anchors.centerIn: parent
|
input.placeholderText: qsTr("Channel name")
|
||||||
//% "Channel name"
|
input.onTextChanged: {
|
||||||
placeholderText: qsTrId("name-your-channel-placeholder")
|
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
|
||||||
maxLength: popup.maxChannelNameLength
|
input.cursorPosition = input.text.length
|
||||||
|
errorMessage = Utils.getErrorMessage(errors, qsTr("channel name"))
|
||||||
onTextEdited: {
|
|
||||||
text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
|
|
||||||
|
|
||||||
validationError = Utils.validateAndReturnError(text,
|
|
||||||
channelNameValidator,
|
|
||||||
//% "channel name"
|
|
||||||
qsTrId("channel-name"),
|
|
||||||
maxChannelNameLength)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
validators: [StatusMinLengthValidator { minLength: 1 }]
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusModalDivider {
|
StatusModalDivider {
|
||||||
|
@ -112,52 +83,17 @@ StatusModal {
|
||||||
bottomPadding: 8
|
bottomPadding: 8
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
StatusInput {
|
||||||
height: descriptionTextArea.height + 26
|
|
||||||
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.leftMargin: 16
|
|
||||||
anchors.rightMargin: 16
|
|
||||||
|
|
||||||
StyledTextArea {
|
|
||||||
id: descriptionTextArea
|
id: descriptionTextArea
|
||||||
|
label: qsTr("Description")
|
||||||
|
charLimit: 140
|
||||||
|
|
||||||
anchors.top: parent.top
|
input.placeholderText: qsTr("Describe the channel")
|
||||||
anchors.topMargin: 10
|
input.multiline: true
|
||||||
|
input.implicitHeight: 88
|
||||||
//% "Description"
|
input.text: popup.isEdit ? popup.channel.description : ""
|
||||||
label: qsTrId("description")
|
input.onTextChanged: errorMessage = Utils.getErrorMessage(errors, qsTr("channel description"))
|
||||||
//% "Describe the channel"
|
validators: [StatusMinLengthValidator { minLength: 1 }]
|
||||||
placeholderText: qsTrId("describe-channel")
|
|
||||||
|
|
||||||
customHeight: 88
|
|
||||||
|
|
||||||
text: popup.isEdit ? popup.channel.description : ""
|
|
||||||
|
|
||||||
onTextChanged: {
|
|
||||||
if(text.length > maxChannelDescLength)
|
|
||||||
{
|
|
||||||
textField.remove(maxChannelDescLength, text.length)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
validationError = Utils.validateAndReturnError(text,
|
|
||||||
channelDescValidator,
|
|
||||||
//% "channel description"
|
|
||||||
qsTrId("channel-description"),
|
|
||||||
maxChannelDescLength)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
id: charLimit
|
|
||||||
text: `${descriptionTextArea.text.length}/${maxChannelDescLength}`
|
|
||||||
anchors.top: descriptionTextArea.top
|
|
||||||
anchors.right: descriptionTextArea.right
|
|
||||||
font.pixelSize: 12
|
|
||||||
color: !descriptionTextArea.validationError ? Theme.palette.baseColor1 : Theme.palette.dangerColor1
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: use the code below to enable private channels and message limit */
|
/* TODO: use the code below to enable private channels and message limit */
|
||||||
|
@ -253,8 +189,8 @@ StatusModal {
|
||||||
let error = "";
|
let error = "";
|
||||||
if (!isEdit) {
|
if (!isEdit) {
|
||||||
error = chatsModel.createCommunityChannel(communityId,
|
error = chatsModel.createCommunityChannel(communityId,
|
||||||
Utils.filterXSS(popup.contentComponent.channelName.text),
|
Utils.filterXSS(popup.contentComponent.channelName.input.text),
|
||||||
Utils.filterXSS(popup.contentComponent.channelDescription.text),
|
Utils.filterXSS(popup.contentComponent.channelDescription.input.text),
|
||||||
categoryId)
|
categoryId)
|
||||||
// TODO: pass the private value when private channels
|
// TODO: pass the private value when private channels
|
||||||
// are implemented
|
// are implemented
|
||||||
|
@ -262,8 +198,8 @@ StatusModal {
|
||||||
} else {
|
} else {
|
||||||
error = chatsModel.editCommunityChannel(communityId,
|
error = chatsModel.editCommunityChannel(communityId,
|
||||||
channel.id,
|
channel.id,
|
||||||
Utils.filterXSS(popup.contentComponent.channelName.text),
|
Utils.filterXSS(popup.contentComponent.channelName.input.text),
|
||||||
Utils.filterXSS(popup.contentComponent.channelDescription.text),
|
Utils.filterXSS(popup.contentComponent.channelDescription.input.text),
|
||||||
channel.categoryId)
|
channel.categoryId)
|
||||||
// TODO: pass the private value when private channels
|
// TODO: pass the private value when private channels
|
||||||
// are implemented
|
// are implemented
|
||||||
|
|
|
@ -668,6 +668,17 @@ QtObject {
|
||||||
return errMsg
|
return errMsg
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getErrorMessage(errors, fieldName) {
|
||||||
|
if (errors) {
|
||||||
|
if (errors.minLength) {
|
||||||
|
return errors.minLength.min === 1 ?
|
||||||
|
qsTr("You need to enter a %1").arg(fieldName) :
|
||||||
|
qsTr("Value has to be at least %1 characters long").arg(errors.minLength.min)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
|
||||||
/* Validation section end */
|
/* Validation section end */
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue