feat(ChannelPermissions): Show confirmation dialog before closing the channel edit popup

storybook/pages/CreateChannelPopupPage.qml

@@ -48,8 +48,6 @@ SplitView {
             CreateChannelPopup {
                 id: dialog
                 anchors.centerIn: parent
-                modal: false
-                closePolicy: Popup.NoAutoClose
                 destroyOnClose: true
                 isEdit: true
                 isDeleteable: isDeleteableCheckBox.checked

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml

@@ -22,6 +22,11 @@ Dialog {
         This property decides the modal background color
     */
     property string backgroundColor: Theme.palette.statusModal.backgroundColor
+    /*!
+       \qmlproperty closeHandler
+        This property decides the action to be performed when the close button is clicked. It allows to define
+    */
+    property var closeHandler: root.close
 
     anchors.centerIn: Overlay.overlay
 
@@ -57,7 +62,7 @@ Dialog {
         visible: root.title || root.subtitle
         headline.title: root.title
         headline.subtitle: root.subtitle
-        actions.closeButton.onClicked: root.close()
+        actions.closeButton.onClicked: root.closeHandler()
     }
 
     footer: StatusDialogFooter {

ui/StatusQ/src/StatusQ/Popups/StatusConfirmationDialog.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import QtQml.Models 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups.Dialog 0.1
+
+StatusDialog {
+    id: root
+
+    property alias body: bodyItem.text
+    property alias acceptButtonText: acceptButton.text
+    property alias rejectButtonText: rejectButton.text
+
+    implicitWidth: 480
+    closePolicy: Popup.NoAutoClose
+    
+    footer: StatusDialogFooter {
+        spacing: 16
+        rightButtons: ObjectModel {
+            StatusButton {
+                id: rejectButton
+                type: StatusButton.Danger
+                onClicked: {
+                    root.reject();
+                }
+            }
+            StatusButton {
+                id: acceptButton
+                onClicked: {
+                    root.accept();
+                }
+            }
+        }
+    }
+
+    StatusBaseText {
+        id: bodyItem
+        anchors.fill: parent
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+    }
+}

ui/StatusQ/src/StatusQ/Popups/StatusModal.qml

@@ -215,7 +215,7 @@ StatusDialog {
 
             onEditButtonClicked: root.editButtonClicked()
             onHeaderImageClicked: root.headerImageClicked()
-            onClose: root.close()
+            onClose: root.closeHandler()
         }
 
         Loader {

ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml

@@ -45,7 +45,7 @@ StatusModal {
 
     property Item finishButton: StatusButton {
         text: qsTr("Finish")
-        onClicked: root.close()
+        onClicked: root.closeHandler()
     }
 
     function replace(item) { replaceItem = item; }
@@ -127,7 +127,7 @@ StatusModal {
                 onItemChanged: {
                     root.rightButtons = item ? item.rightButtons : [ nextButton, finishButton ]
                     if (!item && root.itemsCount == 0) {
-                        root.close();
+                        root.closeHandler();
                     }
                 }
             }

ui/StatusQ/src/StatusQ/Popups/qmldir

@@ -1,17 +1,18 @@
 module StatusQ.Popups
 
-StatusMenuSeparator 0.1 StatusMenuSeparator.qml
 StatusAction 0.1 StatusAction.qml
-StatusSuccessAction 0.1 StatusSuccessAction.qml
+StatusColorDialog 0.1 StatusColorDialog.qml
+StatusConfirmationDialog 0.1 StatusConfirmationDialog.qml
+StatusDialog 0.1 StatusDialog.qml
 StatusMenu 0.1 StatusMenu.qml
+StatusMenuHeadline 0.1 StatusMenuHeadline.qml
 StatusMenuItem 0.1 StatusMenuItem.qml
 StatusMenuInstantiator 0.1 StatusMenuInstantiator.qml
-StatusMenuHeadline 0.1 StatusMenuHeadline.qml
+StatusMenuSeparator 0.1 StatusMenuSeparator.qml
 StatusModal 0.1 StatusModal.qml
-StatusStackModal 0.1 StatusStackModal.qml
-StatusDialog 0.1 StatusDialog.qml
-StatusSearchPopup 0.1 StatusSearchPopup.qml
 StatusModalDivider 0.1 StatusModalDivider.qml
-StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
 StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
-StatusColorDialog 0.1 StatusColorDialog.qml
+StatusSearchPopup 0.1 StatusSearchPopup.qml
+StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
+StatusStackModal 0.1 StatusStackModal.qml
+StatusSuccessAction 0.1 StatusSuccessAction.qml

ui/StatusQ/src/statusq.qrc

@@ -220,6 +220,7 @@
         <file>StatusQ/Popups/Dialog/qmldir</file>
         <file>StatusQ/Popups/StatusAction.qml</file>
         <file>StatusQ/Popups/StatusColorDialog.qml</file>
+        <file>StatusQ/Popups/StatusConfirmationDialog.qml</file>
         <file>StatusQ/Popups/StatusMenu.qml</file>
         <file>StatusQ/Popups/StatusMenuHeadline.qml</file>
         <file>StatusQ/Popups/StatusMenuInstantiator.qml</file>

ui/app/AppLayouts/Communities/popups/CreateChannelPopup.qml

@@ -84,7 +84,10 @@ StatusStackModal {
     leftPadding: 0
     rightPadding: 0
     currentIndex: d.currentPage
-
+    closePolicy: d.dirty && !root.isDiscordImport ? Popup.NoAutoClose : (Popup.CloseOnEscape | Popup.CloseOnPressOutside)
+    
+    closeHandler: d.closeRequested
+    
     enum CurrentPage {
         ChannelDetails, //0
         ColorPicker, //1
@@ -95,6 +98,15 @@ StatusStackModal {
 
     QtObject {
         id: d
+
+        readonly property bool dirty: d.channelEditModel.dirtyPermissions ||
+                                    d.viewOnlyCanAddReaction !== root.viewOnlyCanAddReaction ||
+                                    d.hideIfPermissionsNotMet !== root.hideIfPermissionsNotMet ||
+                                    nameInput.input.text !== root.channelName ||
+                                    descriptionTextArea.text !== root.channelDescription ||
+                                    colorPanel.color.toString().toUpperCase() !== root.channelColor ||
+                                    nameInput.input.asset.emoji !== root.channelEmoji
+
         property int currentPage: CreateChannelPopup.CurrentPage.ChannelDetails
 
         readonly property QtObject communityDetails: QtObject {
@@ -165,6 +177,10 @@ StatusStackModal {
         }
 
         function saveAndClose() {
+            if (!d.isFormValid()) {
+                scrollView.scrollBackUp()
+                return
+            }
             let emoji = StatusQUtils.Emoji.deparse(nameInput.input.asset.emoji)
             if (!isEdit) {
                 root.createCommunityChannel(StatusQUtils.Utils.filterXSS(nameInput.input.text),
@@ -208,6 +224,27 @@ StatusStackModal {
             // TODO Open the channel once we have designs for it
             root.close()
         }
+
+        function closeRequested() {
+            if (d.dirty && !root.isDiscordImport)
+                closeConfirmation.open()
+            else
+                root.close()
+        }
+    }
+
+    StatusConfirmationDialog {
+        id: closeConfirmation
+        title: qsTr("Save changes to #%1 channel?").arg(root.channelName || nameInput.input.text)
+        body: qsTr("You have made changes to #%1 channel. If you close this dialog without saving these changes will be lost?").arg(root.channelName || nameInput.input.text)
+        acceptButtonText: qsTr("Save changes")
+        rejectButtonText: qsTr("Close without saving")
+        onAccepted: {
+            d.saveAndClose()
+        }
+        onRejected: {
+            root.close()
+        }
     }
 
     stackTitle: isDiscordImport ? qsTr("New Channel With Imported Chat History") :
@@ -637,7 +674,7 @@ StatusStackModal {
         StatusScrollView {
             id: scrollView
 
-            readonly property bool canGoNext: d.isFormValid()
+            readonly property bool canGoNext: d.isFormValid() && (root.isDiscordImport ? true : d.dirty)
 
             property ScrollBar vScrollBar: ScrollBar.vertical
 
@@ -861,11 +898,6 @@ StatusStackModal {
             }
             readonly property var nextAction: function () {
                 if (!root.isDiscordImport) {
-                    if (!d.isFormValid()) {
-                        scrollView.scrollBackUp()
-                        return
-                    }
-
                     d.saveAndClose()
                 } else {
                     d.currentPage = CreateChannelPopup.CurrentPage.DiscordImportUploadFile;