Add new countdown dialog

src/Main.qml

@@ -38,11 +38,7 @@ Kirigami.ApplicationWindow {
                 id: addAction
                 icon.name: "list-add-symbolic"
                 text: i18nc("@action:button", "Add countdown")
-                onTriggered: countdownModel.append({
+                onTriggered: addDialog.open()
-                    name: "New countdown",
-                    description: "This was added with the add countdown button",
-                    date: 1000
-                })
             }
         ]
         Kirigami.CardsListView {
@@ -114,4 +110,65 @@ Kirigami.ApplicationWindow {
             }
         }
     }
+
+    Kirigami.Dialog {
+        id: addDialog
+        title: i18nc("@title:window", "Add countdown")
+        standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
+        padding: Kirigami.Units.largeSpacing
+        preferredWidth: Kirigami.Units.gridUnit * 20
+
+        Kirigami.FormLayout {
+            Controls.TextField {
+                id: nameField
+                Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
+                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", "ISO Date*:")
+                inputMask: "D999-99-99"
+                onAccepted: addDialog.onAccepted()
+            }
+            Controls.Label {
+                text: "* = required fields"
+            }
+        }
+
+        Component.onCompleted: {
+            const button = standardButton(Kirigami.Dialog.Ok);
+            button.enabled = Qt.binding(() => requiredFieldsFilled());
+        }
+
+        function requiredFieldsFilled() {
+            return (nameField.text !== "" && dateField.acceptableInput);
+        }
+
+        function appendDataToModel() {
+            countdownModel.append({
+                name: nameField.text,
+                description: descriptionField.text,
+                date: new Date(dateField.text)
+            });
+        }
+        function clearFieldsAndClose() {
+            nameField.text = "";
+            descriptionField.text = "";
+            dateField.text = "";
+            addDialog.close();
+        }
+
+        onAccepted: {
+            if (!addDialog.requiredFieldsFilled())
+                return;
+            appendDataToModel();
+            clearFieldsAndClose();
+        }
+    }
 }