kcms/mobiledata: Move EditProfileDialog to EditProfilePage

As requested in #277 by Devin. I mark this as a draft because there are small issues that need to be fixed, but 75% is working right now.

- [x] Adding connection works
- [x] Loading existing connection works
- [x] Update existing connections works
- [ ] Show updated list of profiles without restarting the kcm
- [ ] Find a way to use that in initial start (because the whole software is going left-to-right, so pushing an edit page to the right might not be intuitive)

I'm still wondering if using checkboxes for 4G/3G/2G might not be better.

kcms/cellularnetwork/ui/EditProfileDialog.qml

@@ -1,71 +0,0 @@
-// SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
-// SPDX-License-Identifier: GPL-2.0-or-later
-
-import QtQuick 2.12
-import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.12 as Controls
-
-import org.kde.kirigami 2.19 as Kirigami
-
-import cellularnetworkkcm 1.0
-
-Kirigami.Dialog {
-    id: dialog
-    title: i18n("Edit APN")
-    clip: true
-    
-    property Modem modem
-    property ProfileSettings profile
-    
-    property int pageWidth
-    
-    standardButtons: Controls.Dialog.Ok | Controls.Dialog.Cancel
-    
-    onAccepted: {
-        if (profile == null) { // create new profile
-            modem.addProfile(profileName.text, profileApn.text, profileUsername.text, profilePassword.text, profileNetworkType.value);
-        } else { // edit existing profile
-            modem.updateProfile(profile.connectionUni, profileName.text, profileApn.text, profileUsername.text, profilePassword.text, profileNetworkType.value);
-        }
-    }
-    preferredWidth: pageWidth - Kirigami.Units.gridUnit * 4
-    padding: Kirigami.Units.gridUnit
-    
-    ColumnLayout {
-        Kirigami.FormLayout {
-            Layout.fillWidth: true
-            wideMode: false
-            
-            Controls.TextField {
-                id: profileName
-                Kirigami.FormData.label: i18n("Name")
-                text: profile != null ? profile.name : ""
-            }
-            Controls.TextField {
-                id: profileApn
-                Kirigami.FormData.label: i18n("APN")
-                text: profile != null ? profile.apn : ""
-            }
-            Controls.TextField {
-                id: profileUsername
-                Kirigami.FormData.label: i18n("Username")
-                text: profile != null ? profile.user : ""
-            }
-            Controls.TextField {
-                id: profilePassword
-                Kirigami.FormData.label: i18n("Password")
-                text: profile != null ? profile.password : ""
-            }
-            Controls.ComboBox {
-                id: profileNetworkType
-                Kirigami.FormData.label: i18n("Network type")
-                model: [i18n("4G/3G/2G"), i18n("3G/2G"), i18n("2G"), i18n("Only 4G"), i18n("Only 3G"), i18n("Only 2G"), i18n("Any")]
-                Component.onCompleted: {
-                    if (profile != null) {
-                        currentIndex = indexOfValue(profile.networkType)
-                    }
-                }
-            }
-        }
-    }
-}

kcms/cellularnetwork/ui/EditProfilePage.qml

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.12 as Controls
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.formcard 1 as FormCard
+
+import cellularnetworkkcm 1.0
+
+FormCard.FormCardPage {
+    id: editProfile
+    title: profile != null ? i18n("Edit APN") : i18n("New APN")
+
+    topPadding: Kirigami.Units.gridUnit
+    bottomPadding: Kirigami.Units.gridUnit
+    leftPadding: 0
+    rightPadding: 0
+    
+    property Modem modem
+    property ProfileSettings profile
+    
+    FormCard.FormCard {
+        Layout.topMargin: Kirigami.Units.gridUnit
+            
+        FormCard.FormTextFieldDelegate {
+            id: profileName
+            label: i18n("Name")
+            text: profile != null ? profile.name : ""
+        }
+
+        FormCard.FormDelegateSeparator { above: profileName; below: profileApn }
+
+        FormCard.FormTextFieldDelegate {
+            id: profileApn
+            label: i18n("APN")
+            text: profile != null ? profile.apn : ""
+        }
+
+        FormCard.FormDelegateSeparator { above: profileApn; below: profileUsername }
+
+        FormCard.FormTextFieldDelegate {
+            id: profileUsername
+            label: i18n("Username")
+            text: profile != null ? profile.user : ""
+        }
+
+        FormCard.FormDelegateSeparator { above: profileUsername; below: profilePassword }
+
+        FormCard.FormTextFieldDelegate {
+            id: profilePassword
+            label: i18n("Password")
+            text: profile != null ? profile.password : ""
+        }
+
+        FormCard.FormDelegateSeparator { above: profilePassword; below: profileNetworkType }
+
+        FormCard.FormComboBoxDelegate {
+            id: profileNetworkType
+            text: i18n("Network type")
+            model: [i18n("4G/3G/2G"), i18n("3G/2G"), i18n("2G"), i18n("Only 4G"), i18n("Only 3G"), i18n("Only 2G"), i18n("Any")]
+            Component.onCompleted: {
+                if (profile != null) {
+                    currentIndex = indexOfValue(profile.networkType)
+                }
+            }
+        }
+
+        FormCard.FormDelegateSeparator { above: profileNetworkType; below: profileSave }
+
+        FormCard.FormButtonDelegate {
+            id: profileSave
+            text: i18n("Save profile")
+            icon.name: "document-save"
+            onClicked: {
+                if (profile == null) { // create new profile
+                    modem.addProfile(profileName.text, profileApn.text, profileUsername.text, profilePassword.text, profileNetworkType.currentText);
+                } else { // edit existing profile
+                    modem.updateProfile(profile.connectionUni, profileName.text, profileApn.text, profileUsername.text, profilePassword.text, profileNetworkType.currentText);
+                }
+                kcm.pop()
+            }
+        }
+    }
+}

kcms/cellularnetwork/ui/ProfileList.qml

@@ -29,14 +29,6 @@ Kirigami.ScrollablePage {
             onCheckedChanged: root.editMode = checked
         }
     ]
-    
-    property var dialog: EditProfileDialog {
-        id: profileDialog
-        parent: root
-        modem: root.modem
-        profile: null
-        pageWidth: root.width
-    }
 
     ColumnLayout {
         spacing: 0
@@ -96,8 +88,7 @@ Kirigami.ScrollablePage {
                             text: i18n("Edit")
                             display: Controls.ToolButton.IconOnly
                             onClicked: {
-                                profileDialog.profile = modelData;
+                                kcm.push("EditProfilePage.qml", { "profile": modelData, "modem": modem });
-                                profileDialog.open();
                             }
                         }
 
@@ -116,8 +107,7 @@ Kirigami.ScrollablePage {
                 text: i18n("Add APN")
                 icon.name: 'list-add'
                 onClicked: {
-                    profileDialog.profile = null;
+                    kcm.push("EditProfilePage.qml", { "profile": null, "modem": modem });
-                    profileDialog.open();
                 }
             }