Sort messages by clock

src/app/chat/views/message_list.nim

@@ -12,7 +12,7 @@ type
     ContentType = UserRole + 7
     Sticker = UserRole + 8
     FromAuthor = UserRole + 9
-
+    Clock = UserRole + 10
 QtObject:
   type
     ChatMessageList* = ref object of QAbstractListModel
@@ -47,6 +47,7 @@ QtObject:
       of ChatMessageRoles.UserName: result = newQVariant(message.userName)
       of ChatMessageRoles.Message: result = newQVariant(message.message)
       of ChatMessageRoles.Timestamp: result = newQVariant(message.timestamp)
+      of ChatMessageRoles.Clock: result = newQVariant($message.clock)
       of ChatMessageRoles.Identicon: result = newQVariant(message.identicon)
       of ChatMessageRoles.IsCurrentUser: result = newQVariant(message.isCurrentUser)
       of ChatMessageRoles.RepeatMessageInfo: result = newQVariant(repeatMessageInfo)
@@ -59,6 +60,7 @@ QtObject:
       ChatMessageRoles.UserName.int:"userName",
       ChatMessageRoles.Message.int:"message",
       ChatMessageRoles.Timestamp.int:"timestamp",
+      ChatMessageRoles.Clock.int:"clock",
       ChatMessageRoles.Identicon.int:"identicon",
       ChatMessageRoles.IsCurrentUser.int:"isCurrentUser",
       ChatMessageRoles.RepeatMessageInfo.int:"repeatMessageInfo",

src/signals/messages.nim

@@ -37,7 +37,7 @@ proc toMessage*(jsonMsg: JsonNode): Message =
   result = Message(
       alias: jsonMsg{"alias"}.getStr,
       chatId: jsonMsg{"chatId"}.getStr,
-      clock: $jsonMsg{"clock"}.getInt,
+      clock: jsonMsg{"clock"}.getInt,
       contentType: jsonMsg{"contentType"}.getInt,
       ensName: jsonMsg{"ensName"}.getStr,
       fromAuthor: jsonMsg{"from"}.getStr,

src/signals/types.nim

@@ -20,7 +20,7 @@ type WalletSignal* = ref object of Signal
 type Message* = object
   alias*: string
   chatId*: string
-  clock*: string
+  clock*: int
   # commandParameters*:   # ???
   contentType*: int      # ???
   ensName*: string        # ???

src/status/chat/chat_message.nim

@@ -7,6 +7,7 @@ type ChatMessage* = ref object
   message*: string
   fromAuthor*: string
   timestamp*: string
+  clock*: int
   identicon*: string
   isCurrentUser*: bool
   contentType*: int
@@ -20,6 +21,7 @@ proc newChatMessage*(): ChatMessage =
   result.userName = ""
   result.message = ""
   result.fromAuthor = ""
+  result.clock = 0
   result.timestamp = "0"
   result.identicon = ""
   result.isCurrentUser = false
@@ -31,6 +33,7 @@ proc toChatMessage*(payload: JsonNode): ChatMessage =
     userName: payload["alias"].str,
     message: payload["text"].str,
     timestamp: $payload["timestamp"],
+    clock: payload["clock"].getInt,
     identicon: payload["identicon"].str,
     isCurrentUser: false,
     contentType: payload["contentType"].getInt,
@@ -40,6 +43,7 @@ proc toChatMessage*(payload: JsonNode): ChatMessage =
 proc toChatMessage*(message: Message): ChatMessage =
   result = ChatMessage(
     userName: message.alias,
+    clock: message.clock,
     fromAuthor: message.fromAuthor,
     message: message.text,
     timestamp: message.timestamp,

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -17,13 +17,12 @@ ScrollView {
     ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-    ListView {
+    SortFilterModel {
-        anchors.fill: parent
+        id: messageListDelegate
-        spacing: 4
+        lessThan: function(left, right) {
-        id: chatLogView
+            return left.clock < right.clock;
+        }
         model: messageList
-        Layout.fillWidth: true
-        Layout.fillHeight: true
         delegate: Message {
             userName: model.userName
             message: model.message
@@ -34,8 +33,16 @@ ScrollView {
             sticker: model.sticker
             contentType: model.contentType
         }
-        highlightFollowsCurrentItem: true
+    }
 
+    ListView {
+        anchors.fill: parent
+        spacing: 4
+        id: chatLogView
+        model: messageListDelegate
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        highlightFollowsCurrentItem: true
         onCountChanged: {
             if (!this.atYEnd) {
                 // User has scrolled up, we don't want to scroll back

ui/shared/SortFilterModel.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.9
+import QtQml.Models 2.3
+
+// https://martin.rpdev.net/2019/01/15/using-delegatemodel-in-qml-for-sorting-and-filtering.html
+
+DelegateModel {
+    id: delegateModel
+
+    property var lessThan: function(left, right) { return true; }
+    property var filterAcceptsItem: function(item) { return true; }
+
+    function update() {
+        if (items.count > 0) {
+            items.setGroups(0, items.count, "items");
+        }
+
+        // Step 1: Filter items
+        var visible = [];
+        for (var i = 0; i < items.count; ++i) {
+            var item = items.get(i);
+            if (filterAcceptsItem(item.model)) {
+                visible.push(item);
+            }
+        }
+
+        // Step 2: Sort the list of visible items
+        visible.sort(function(a, b) {
+            return lessThan(a.model, b.model) ? -1 : 1;
+        });
+
+        // Step 3: Add all items to the visible group:
+        for (i = 0; i < visible.length; ++i) {
+            item = visible[i];
+            item.inVisible = true;
+            if (item.visibleIndex !== i) {
+                visibleItems.move(item.visibleIndex, i, 1);
+            }
+        }
+    }
+
+    items.onChanged: update()
+    onLessThanChanged: update()
+    onFilterAcceptsItemChanged: update()
+
+    groups: DelegateModelGroup {
+        id: visibleItems
+
+        name: "visible"
+        includeByDefault: false
+    }
+
+    filterOnGroup: "visible"
+}