refactor(Communities): use StatusQ's StatusInput in create channel popup

ui/app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml

@@ -1,15 +1,12 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.13
 import QtQuick.Dialogs 1.3
 import "../../../../imports"
-import "../components"
-import "../../../../shared"
-import "../../../../shared/status"
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
@@ -21,13 +18,7 @@ StatusModal {
     property string categoryId: ""
 
     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 var channelDescValidator: Utils.Validate.NoEmpty
-                                                | Utils.Validate.TextLength
     
     property Component pinnedMessagesPopupComponent
 
@@ -35,28 +26,20 @@ StatusModal {
     header.title: qsTrId("create-channel-title")
 
     onOpened: {
-        contentComponent.channelName.text = ""
+        contentComponent.channelName.input.text = ""
         if (isEdit) {
             //% "Edit #%1"
             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()
 
     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 {
@@ -83,28 +66,16 @@ StatusModal {
             id: content
             width: popup.width
 
-            Item {
+            StatusInput {
-                width: parent.width
+                id: nameInput
-                height: 76
+                charLimit: popup.maxChannelNameLength
-
+                input.placeholderText: qsTr("Channel name")
-                Input {
+                input.onTextChanged: {
-                    id: nameInput
+                    input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
-                    width: parent.width - 32
+                    input.cursorPosition = input.text.length
-                    anchors.centerIn: parent
+                    errorMessage = Utils.getErrorMessage(errors, qsTr("channel name"))
-                    //% "Channel name"
-                    placeholderText: qsTrId("name-your-channel-placeholder")
-                    maxLength: popup.maxChannelNameLength
-
-                    onTextEdited: {
-                        text = Utils.convertSpacesToDashesAndUpperToLowerCase(text);
-
-                        validationError = Utils.validateAndReturnError(text,
-                                                                        channelNameValidator,
-                                                                        //% "channel name"
-                                                                        qsTrId("channel-name"),
-                                                                        maxChannelNameLength)
-                    }
                 }
+                validators: [StatusMinLengthValidator { minLength: 1 }]
             }
 
             StatusModalDivider {
@@ -112,52 +83,17 @@ StatusModal {
                 bottomPadding: 8
             }
 
-            Item {
+            StatusInput {
-                height: descriptionTextArea.height + 26
+                id: descriptionTextArea
+                label: qsTr("Description")
+                charLimit: 140
 
-                anchors.left: parent.left
+                input.placeholderText: qsTr("Describe the channel")
-                anchors.right: parent.right
+                input.multiline: true
-                anchors.leftMargin: 16
+                input.implicitHeight: 88
-                anchors.rightMargin: 16
+                input.text: popup.isEdit ? popup.channel.description : ""
-
+                input.onTextChanged: errorMessage = Utils.getErrorMessage(errors, qsTr("channel description"))
-                StyledTextArea {
+                validators: [StatusMinLengthValidator { minLength: 1 }]
-                    id: descriptionTextArea
-
-                    anchors.top: parent.top
-                    anchors.topMargin: 10
-
-                    //% "Description"
-                    label: qsTrId("description")
-                    //% "Describe the channel"
-                    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 */
@@ -253,8 +189,8 @@ StatusModal {
                 let error = "";
                 if (!isEdit) {
                     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)
                                                                 // TODO: pass the private value when private channels
                                                                 // are implemented
@@ -262,8 +198,8 @@ StatusModal {
                 } else {
                     error = chatsModel.editCommunityChannel(communityId,
                                                                 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)
                                                                 // TODO: pass the private value when private channels
                                                                 // are implemented

ui/imports/Utils.qml

@@ -668,6 +668,17 @@ QtObject {
         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 */