Split into files from tutorial

src/contents/ui/AddEditSheet.qml

@@ -0,0 +1,91 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.20 as Kirigami
+
+// Overlay sheets appear over a part of the window
+Kirigami.OverlaySheet {
+    id: addEditSheet
+
+    // Sheet mode
+    property string mode: "add"
+
+    property int index: -1
+    property alias name: nameField.text
+    property alias description: descriptionField.text
+    property alias kdate: dateField.text
+
+    // Signals can be read and certain actions performed when these happen
+    signal added(string name, string description, var kdate)
+    signal edited(int index, string name, string description, var kdate)
+    signal removed(int index)
+
+    header: Kirigami.Heading {
+        // i18nc is useful for adding context for translators
+        text: mode === "add" ? i18nc("@title:window", "Add kountdown") :
+            i18nc("@title:window", "Edit kountdown")
+    }
+    // Form layouts help align and structure a layout with several inputs
+    Kirigami.FormLayout {
+        // Textfields let you input text in a thin textbox
+        Controls.TextField {
+            id: nameField
+            // Provides label attached to the textfield
+            Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
+            // Placeholder text is visible before you enter anything
+            placeholderText: i18n("Event name (required)")
+            // What to do after input is accepted (i.e. pressed enter)
+            // In this case, it moves the focus to the next field
+            onAccepted: descriptionField.forceActiveFocus()
+        }
+        Controls.TextField {
+            id: descriptionField
+            Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
+            placeholderText: i18n("Optional")
+            onAccepted: dateField.forceActiveFocus()
+        }
+        Controls.TextField {
+            id: dateField
+            Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
+            inputMask: "0000-00-00"
+            placeholderText: i18n("YYYY-MM-DD")
+        }
+        // This is a button.
+        Controls.Button {
+            id: deleteButton
+            Layout.fillWidth: true
+            text: i18nc("@action:button", "Delete")
+            visible: mode === "edit"
+            onClicked: {
+                addEditSheet.removed(addEditSheet.index)
+                close();
+            }
+        }
+        Controls.Button {
+            id: doneButton
+            Layout.fillWidth: true
+            text: i18nc("@action:button", "Done")
+            // Button is only enabled if the user has entered something into the nameField
+            enabled: nameField.text.length > 0
+            onClicked: {
+                // Add a listelement to the kountdownModel ListModel
+                if(mode === "add") {
+                    addEditSheet.added(
+                        nameField.text,
+                        descriptionField.text,
+                        dateField.text
+                    );
+                }
+                else {
+                    addEditSheet.edited(
+                        index,
+                        nameField.text,
+                        descriptionField.text,
+                        dateField.text
+                    );
+                }
+                close();
+            }
+        }
+    }
+}

src/contents/ui/KountdownDelegate.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.20 as Kirigami
+
+Kirigami.AbstractCard {
+    id: kountdownDelegate
+    contentItem: Item {
+        implicitWidth: delegateLayout.implicitWidth
+        implicitHeight: delegateLayout.implicitHeight
+        GridLayout {
+            id: delegateLayout
+            anchors {
+                left: parent.left
+                top: parent.top
+                right: parent.right
+            }
+            rowSpacing: Kirigami.Units.largeSpacing
+            columnSpacing: Kirigami.Units.largeSpacing
+            columns: root.wideScreen ? 4 : 2
+
+            Kirigami.Heading {
+                Layout.fillHeight: true
+                level: 1
+                text: i18n("%1 days", Math.round((date-Date.now())/86400000))
+            }
+
+            ColumnLayout {
+                Kirigami.Heading {
+                    Layout.fillWidth: true
+                    level: 2
+                    text: name
+                }
+                Kirigami.Separator {
+                    Layout.fillWidth: true
+                    visible: description.length > 0
+                }
+                Controls.Label {
+                    Layout.fillWidth: true
+                    wrapMode: Text.WordWrap
+                    text: description
+                    visible: description.length > 0
+                }
+            }
+            Controls.Button {
+                Layout.alignment: Qt.AlignRight
+                // Column spanning within grid layout (vertically in this case)
+                Layout.columnSpan: 2
+                text: i18n("Edit")
+                onClicked: openPopulatedSheet("edit", index, name, description, new Date(date).toISOString().slice(0,10))
+            }
+        }
+    }
+}

src/contents/ui/main.qml

@@ -28,129 +28,33 @@ Kirigami.ApplicationWindow {
 
     ListModel {
         id: kountdownModel
-        // Each ListElement is an element on the list, containing information
-        ListElement {
-            name: "Dog birthday!!"
-            description: "Big doggo birthday blowout."
-            date: 100
-        }
-
-        ListElement {
-            name: "Dog birthday!!"
-            description: "Big doggo birthday blowout."
-            date: 100
-        }
     }
 
-    Component {
+    // Fetches item from addEditSheet.qml and does action on signal
-        id: kountdownDelegate
+    AddEditSheet {
-        Kirigami.AbstractCard {
+        id: addEditSheet
-            contentItem: Item {
+        onAdded: kountdownModel.append({
-                implicitWidth: delegateLayout.implicitWidth
+            "name": name,
-                implicitHeight: delegateLayout.implicitHeight
+            "description": description,
-                GridLayout {
+            "date": Date.parse(kdate)
-                    id: delegateLayout
+        });
-                    anchors {
+        onEdited: kountdownModel.set(index, {
-                        left: parent.left
+            "name": name,
-                        top: parent.top
+            "description": description,
-                        right: parent.right
+            "date": Date.parse(kdate)
-                    }
+        });
-                    rowSpacing: Kirigami.Units.largeSpacing
+        onRemoved: kountdownModel.remove(index, 1)
-                    columnSpacing: Kirigami.Units.largeSpacing
-                    columns: root.wideScreen ? 4 : 2
-
-                    Kirigami.Heading {
-                        // Heading will be as tall as possible while respecting constraints
-                        Layout.fillHeight: true
-                        // Level determines the size of the heading
-                        level: 1
-                        text: date
-                    }
-
-                    // Layout for positioning elements vertically
-                    ColumnLayout {
-                        Kirigami.Heading {
-                            Layout.fillWidth: true
-                            level: 2
-                            text: name
-                        }
-                        // Horizontal rule
-                        Kirigami.Separator {
-                            Layout.fillWidth: true
-                            visible: description.length > 0
-                        }
-                        // Labels contain text
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            // Word wrap makes text stay within box and shift with size
-                            wrapMode: Text.WordWrap
-                            text: description
-                            visible: description.length > 0
-                        }
-                    }
-                    Controls.Button {
-                        Layout.alignment: Qt.AlignRight
-                        // Column spanning within grid layout (vertically in this case)
-                        Layout.columnSpan: 2
-                        text: i18n("Edit")
-                        //onClicked: to be done...
-                    }
-                }
-            }
-        }
     }
 
-    // Overlay sheets appear over a part of the window
+    // Function called by 'edit' button on card and by 'add'-Action
-    Kirigami.OverlaySheet {
+    function openPopulatedSheet(mode, index = -1, listName = "", listDesc = "", listDate = "") {
-        id: addSheet
+        addEditSheet.mode = mode
-        header: Kirigami.Heading {
+        addEditSheet.index = index;
-            text: i18nc("@title:window", "Add kountdown")
+        addEditSheet.name = listName
-        }
+        addEditSheet.description = listDesc
-        // Form layouts help align and structure a layout with several inputs
+        addEditSheet.kdate = listDate
-        Kirigami.FormLayout {
+
-            // Textfields let you input text in a thin textbox
+        addEditSheet.open()
-            Controls.TextField {
-                id: nameField
-                // Provides label attached to the textfield
-                Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
-                // Placeholder text is visible before you enter anything
-                placeholderText: i18n("Event name (required)")
-                // What to do after input is accepted (i.e. pressed enter)
-                // In this case, it moves the focus to the next field
-                onAccepted: descriptionField.forceActiveFocus()
-            }
-            Controls.TextField {
-                id: descriptionField
-                Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
-                placeholderText: i18n("Optional")
-                onAccepted: dateField.forceActiveFocus()
-            }
-            Controls.TextField {
-                id: dateField
-                Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
-                placeholderText: i18n("YYYY-MM-DD")
-                inputMask: "0000-00-00"
-            }
-            Controls.Button {
-                id: doneButton
-                Layout.fillWidth: true
-                text: i18nc("@action:button", "Done")
-                // Button is only enabled if the user has entered something into the nameField
-                enabled: nameField.text.length > 0
-                onClicked: {
-                    // Add a listelement to the kountdownModel ListModel
-                    kountdownModel.append({
-                        name: nameField.text,
-                        description: descriptionField.text,
-                        date: Date.parse(dateField.text)
-                    });
-                    nameField.text = ""
-                    descriptionField.text = ""
-                    dateField.text = ""
-                    addSheet.close();
-                }
-            }
-        }
     }
 
     // Set the first page that will be loaded when the app opens
@@ -163,18 +67,17 @@ Kirigami.ApplicationWindow {
                 id: addAction
                 icon.name: "list-add"
                 text: i18nc("@action:button", "Add kountdown")
-                onTriggered: addSheet.open()
+                onTriggered:openPopulatedSheet("add")
             }
         ]
 
-
         // List view for card elements
         Kirigami.CardsListView {
             id: cardsView
             // Model contains info to be displayed
             model: kountdownModel
             // Delegate is how the information will be presented in the ListView
-            delegate: kountdownDelegate
+            delegate: KountdownDelegate {}
         }
     }
 }

src/resources.qrc

@@ -1,5 +1,7 @@
 <RCC>
     <qresource prefix="/">
         <file alias="main.qml">contents/ui/main.qml</file>
+        <file alias="AddEditSheet.qml">contents/ui/AddEditSheet.qml</file>
+        <file alias="KountdownDelegate.qml">contents/ui/KountdownDelegate.qml</file>
     </qresource>
 </RCC>