Drag reservations with “snap to grid”

No drop yet.

Had to use MouseArea instead of DragHandler because the latter refuses
to work, and instead scrolls the list on click; have not figured out
why.

src/CMakeLists.txt

@@ -24,6 +24,7 @@ qt_add_qml_module(${PROJECT_NAME}
         MnemonicAction.qml
         MnemonicLabel.qml
         PermanentScrollBar.qml
+        Reservation.qml
         ReservationsPage.qml
         ReservationsTimeline.qml
         SelectableLabel.qml

src/Reservation.qml

@@ -0,0 +1,76 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+
+Label {
+    id: control
+
+    required property Item dragParent
+    required property string holder
+    required property string reservationStatus
+
+    Drag.active: dragHandler.active
+    Drag.hotSpot.x: 0
+    Drag.hotSpot.y: 0
+    elide: Text.ElideRight
+    padding: 2
+    text: holder
+    verticalAlignment: Text.AlignVCenter
+    z: 1
+
+    background: Rectangle {
+        function backgroundColor(status) {
+            switch (status) {
+            case "created":
+                return "#cbebff";
+            case "cancelled":
+                return "#ffbaa6";
+            case "confirmed":
+                return "#ffe673";
+            case "checked-in":
+                return "#9fefb9";
+            case "invoiced":
+                return "#e1dbd6";
+            }
+        }
+
+        function borderColor(status) {
+            switch (status) {
+            case "created":
+                return "#6fc7fe";
+            case "cancelled":
+                return "#ff7851";
+            case "confirmed":
+                return "#ffd829";
+            case "checked-in":
+                return "#5ae387";
+            case "invoiced":
+                return "#bbaea3";
+            }
+        }
+
+        border.color: borderColor(control.reservationStatus)
+        color: backgroundColor(control.reservationStatus)
+        radius: 5
+    }
+    states: [
+        State {
+            when: dragHandler.active
+
+            ParentChange {
+                parent: control.dragParent
+                target: control
+            }
+        }
+    ]
+
+    MouseArea {
+        id: dragHandler
+
+        property alias active: dragHandler.drag.active
+
+        anchors.fill: parent
+        cursorShape: Qt.OpenHandCursor
+        drag.target: control
+    }
+}

src/ReservationsTimeline.qml

@@ -99,72 +99,40 @@ Control {
                 id: verticalScroll
 
             }
-            delegate: TimelineView {
+            delegate: DropArea {
                 property real contentWidth: ListView.view.contentWidth
+                required property string name
                 required property TimelineModel timeline
+                property real viewportWidth: ListView.view.width
+                property real viewportX: ListView.view.contentX
 
-                dayWidth: control.dayWidth
-                fromDate: control.fromDate
                 height: control.rowHeight
-                model: timeline
+                width: contentWidth
-                toDate: control.toDate
-                viewportWidth: ListView.view.width
-                viewportX: ListView.view.contentX
 
-                delegate: Label {
+                onPositionChanged: function (drag) {
-                    id: reservation
+                    drag.source.y = y;
-
+                    drag.source.x = (Math.floor(drag.x / control.dayWidth) + .5) * control.dayWidth;
-                    required property string holder
-                    required property string reservationStatus
-
-                    elide: Text.ElideRight
-                    padding: 2
-                    text: holder
-                    verticalAlignment: Text.AlignVCenter
-                    z: 1
-
-                    background: Rectangle {
-                        function backgroundColor(status) {
-                            switch (status) {
-                            case "created":
-                                return "#cbebff";
-                            case "cancelled":
-                                return "#ffbaa6";
-                            case "confirmed":
-                                return "#ffe673";
-                            case "checked-in":
-                                return "#9fefb9";
-                            case "invoiced":
-                                return "#e1dbd6";
-                            }
-                        }
-
-                        function borderColor(status) {
-                            switch (status) {
-                            case "created":
-                                return "#6fc7fe";
-                            case "cancelled":
-                                return "#ff7851";
-                            case "confirmed":
-                                return "#ffd829";
-                            case "checked-in":
-                                return "#5ae387";
-                            case "invoiced":
-                                return "#bbaea3";
-                            }
-                        }
-
-                        border.color: borderColor(reservation.reservationStatus)
-                        color: backgroundColor(reservation.reservationStatus)
-                        radius: 5
-                    }
                 }
 
-                Separator {
+                TimelineView {
-                    anchors.bottom: parent.bottom
+                    dayWidth: control.dayWidth
-                    anchors.left: parent.left
+                    fromDate: control.fromDate
-                    anchors.right: parent.right
+                    height: parent.height
-                    palette: control.palette
+                    model: parent.timeline
+                    toDate: control.toDate
+                    viewportWidth: parent.viewportWidth
+                    viewportX: parent.viewportX
+
+                    delegate: Reservation {
+                        dragParent: timelineList.contentItem
+                    }
+
+                    Separator {
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        palette: control.palette
+                    }
                 }
             }
             header: Rectangle {