From 667676d520d3b490587b8474ed12b7fcab78f847 Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Sun, 23 Mar 2025 13:37:30 +0530
Subject: [PATCH 1/5] fix: trash page sorting and show more

---
 .../channelEdit/views/trash/TrashModal.vue    | 45 +++++++++++++------
 .../channelEdit/vuex/contentNode/actions.js   |  4 +-
 .../frontend/shared/data/resources.js         | 11 ++++-
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index e1ba3e3625..15fe783d2a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -67,7 +67,7 @@
             </template>
           </VDataTable>
           <div class="show-more-button-container">
-            <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+            <KButton v-if="hasMore" :disabled="moreLoading" @click="loadMore">
               {{ showMoreLabel }}
             </KButton>
           </div>
@@ -201,7 +201,7 @@
         ];
       },
       items() {
-        return sortBy(this.getContentNodeChildren(this.trashId), 'modified');
+        return sortBy(this.getContentNodeChildren(this.trashId), 'modified').reverse();
       },
       backLink() {
         return {
@@ -216,6 +216,10 @@
         // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
         return showMoreTranslator.$tr('showMore');
       },
+      // "hasMore" returns true only if "more" is a nonempty plain object.
+      hasMore() {
+        return this.more && Object.keys(this.more).length > 0;
+      },
     },
     watch: {
       dialog(newValue) {
@@ -225,9 +229,9 @@
       },
     },
     created() {
-      this.loadContentNodes({ parent__in: [this.rootId] }),
-        this.loadAncestors({ id: this.nodeId }),
-        this.loadNodes();
+      this.loadContentNodes({ parent__in: [this.rootId] });
+      this.loadAncestors({ id: this.nodeId });
+      this.loadNodes();
     },
     mounted() {
       this.updateTabTitle(this.$store.getters.appendChannelName(this.$tr('trashModalTitle')));
@@ -246,7 +250,7 @@
           this.loading = false;
           return;
         }
-        this.loadChildren({ parent: this.trashId }).then(childrenResponse => {
+        this.loadChildren({ parent: this.trashId, ordering: '-modified' }).then(childrenResponse => {
           this.loading = false;
           this.more = childrenResponse.more || null;
         });
@@ -284,13 +288,26 @@
         return this.previewNodeId === id ? this.$vuetify.theme.greyBackground : 'transparent';
       },
       loadMore() {
-        if (this.more && !this.moreLoading) {
-          this.moreLoading = true;
-          this.loadContentNodes(this.more).then(response => {
-            this.more = response.more || null;
-            this.moreLoading = false;
-          });
-        }
+        // Prevent further calls if "more" is falsy or already loading.
+        if (!this.more || this.moreLoading) return;
+        this.moreLoading = true;
+        // Capture current item count and clone "more" parameters.
+        const currentItemsLength = this.items.length;
+        const currentMore = JSON.stringify(this.more);
+        // Call loadContentNodes with a deep clone of the "more" object.
+        this.loadContentNodes(JSON.parse(JSON.stringify(this.more))).then(response => {
+          // If no new "more" is returned or item count hasn't increased, clear "more"
+          if (
+            !response.more ||
+            JSON.stringify(response.more) === currentMore ||
+            this.items.length === currentItemsLength
+          ) {
+            this.more = null;
+          } else {
+            this.more = response.more;
+          }
+          this.moreLoading = false;
+        });
       },
     },
     $trs: {
@@ -311,7 +328,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .show-more-button-container {
     display: flex;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
index df048f8a5b..a57a93b0f1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -71,8 +71,8 @@ export function loadContentNodeByNodeId(context, nodeId) {
     });
 }
 
-export function loadChildren(context, { parent, published = null, complete = null }) {
-  const params = { parent, max_results: 25 };
+export function loadChildren(context, { parent, published = null, complete = null, ordering = 'lft' }) {
+  const params = { parent, max_results: 25, ordering };
   if (published !== null) {
     params.published = published;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 6f180dc08b..54e527c670 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -541,6 +541,14 @@ class IndexedDBResource {
       collection = collection.filter(filterFn);
     }
     if (paginationActive) {
+      // Default pagination field is 'lft'
+      let paginationField = 'lft';
+      if (params.ordering) {
+        paginationField = params.ordering.replace(/^-/, '');
+      }
+      // Determine the operator based on the ordering direction.
+      const operator = params.ordering && params.ordering.startsWith('-') ? 'lt' : 'gt';
+
       let results;
       if (sortBy) {
         // If we still have a sortBy value here, then we have not sorted using orderBy
@@ -558,7 +566,8 @@ class IndexedDBResource {
         more: hasMore
           ? {
               ...params,
-              lft__gt: results[maxResults - 1].lft,
+              // Dynamically set the pagination cursor based on the pagination field and operator.
+              [`${paginationField}__${operator}`]: results[maxResults - 1][paginationField],
             }
           : null,
       };

From 455c64874a8a809c13bad5109a596410304f47c5 Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Sat, 5 Apr 2025 13:08:00 +0530
Subject: [PATCH 2/5] wip

---
 .../channelEdit/vuex/contentNode/actions.js   |  3 +-
 .../contentcuration/viewsets/contentnode.py   | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
index a57a93b0f1..6459baa5f2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -71,7 +71,8 @@ export function loadContentNodeByNodeId(context, nodeId) {
     });
 }
 
-export function loadChildren(context, { parent, published = null, complete = null, ordering = 'lft' }) {
+export function loadChildren(context, { parent, published =
+  null, complete = null, ordering = null }) {
   const params = { parent, max_results: 25, ordering };
   if (published !== null) {
     params.published = published;
diff --git a/contentcuration/contentcuration/viewsets/contentnode.py b/contentcuration/contentcuration/viewsets/contentnode.py
index 612e38807c..b032498e7e 100644
--- a/contentcuration/contentcuration/viewsets/contentnode.py
+++ b/contentcuration/contentcuration/viewsets/contentnode.py
@@ -669,45 +669,56 @@ def dict_if_none(obj, field_name=None):
 
 class ContentNodePagination(ValuesViewsetCursorPagination):
     """
-    A simplified cursor pagination class for ContentNodeViewSet.
-    Instead of using an opaque cursor, it uses the lft value for filtering.
-    As such, if this pagination scheme is used without applying a filter
-    that will guarantee membership to a specific MPTT tree, such as parent
-    or tree_id, the pagination scheme will not be predictable.
+    A simplified cursor pagination class
+    Instead of using a fixed 'lft' cursor, it dynamically sets the pagination field and operator
+    based on the incoming `ordering` query parameter.
     """
-    cursor_query_param = "lft__gt"
-    ordering = "lft"
     page_size_query_param = "max_results"
     max_page_size = 100
 
+    def get_pagination_params(self):
+        # Default ordering is "lft" if not provided.
+        ordering_param = self.request.query_params.get("ordering", "lft")
+        # Remove the leading '-' if present to get the field name.
+        pagination_field = ordering_param.lstrip("-")
+        # Determine operator: if ordering starts with '-', use __lt; otherwise __gt.
+        operator = "__lt" if ordering_param.startswith("-") else "__gt"
+        return pagination_field, operator
+
     def decode_cursor(self, request):
         """
-        Given a request with a cursor, return a `Cursor` instance.
+        Given a request with a cursor parameter, return a `Cursor` instance.
+        The cursor parameter name is dynamically built from the pagination field and operator.
         """
-        # Determine if we have a cursor, and if so then decode it.
-        value = request.query_params.get(self.cursor_query_param)
+        pagination_field, operator = self.get_pagination_params()
+        cursor_param = f"{pagination_field}{operator}"
+        value = request.query_params.get(cursor_param)
         if value is None:
             return None
-
         return Cursor(offset=0, reverse=False, position=value)
 
     def encode_cursor(self, cursor):
         """
-        Given a Cursor instance, return an url with query parameter.
+        Given a Cursor instance, return a URL with the dynamic pagination cursor query parameter.
         """
-        return replace_query_param(self.base_url, self.cursor_query_param, str(cursor.position))
+        pagination_field, operator = self.get_pagination_params()
+        cursor_param = f"{pagination_field}{operator}"
+        return replace_query_param(self.base_url, cursor_param, str(cursor.position))
 
     def get_more(self):
+        """
+        Construct a "more" URL (or query parameters) that includes the pagination cursor
+        built from the dynamic field and operator.
+        """
+        pagination_field, operator = self.get_pagination_params()
+        cursor_param = f"{pagination_field}{operator}"
         position, offset = self._get_more_position_offset()
         if position is None and offset is None:
             return None
         params = self.request.query_params.copy()
-        params.update({
-            self.cursor_query_param: position,
-        })
+        params.update({cursor_param: position})
         return params
 
-
 # Apply mixin first to override ValuesViewset
 class ContentNodeViewSet(BulkUpdateMixin, ValuesViewset):
     queryset = ContentNode.objects.all()

From 76a2b10381212b5551d395f1c9551f38b39edde4 Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Sat, 5 Apr 2025 13:39:10 +0530
Subject: [PATCH 3/5] wip

---
 .../frontend/channelEdit/views/trash/TrashModal.vue    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 15fe783d2a..170b11c7f2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -250,10 +250,12 @@
           this.loading = false;
           return;
         }
-        this.loadChildren({ parent: this.trashId, ordering: '-modified' }).then(childrenResponse => {
-          this.loading = false;
-          this.more = childrenResponse.more || null;
-        });
+        this.loadChildren({ parent: this.trashId, ordering: '-modified' }).then(
+          childrenResponse => {
+            this.loading = false;
+            this.more = childrenResponse.more || null;
+          }
+        );
       },
       moveNodes(target) {
         return this.moveContentNodes({

From 7770d152cf96c189364a3b933ba214a5de0cc04c Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Sat, 5 Apr 2025 13:46:54 +0530
Subject: [PATCH 4/5] wip

---
 .../frontend/channelEdit/vuex/contentNode/actions.js        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
index 6459baa5f2..646b374991 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -71,8 +71,10 @@ export function loadContentNodeByNodeId(context, nodeId) {
     });
 }
 
-export function loadChildren(context, { parent, published =
-  null, complete = null, ordering = null }) {
+export function loadChildren(
+  context,
+  { parent, published = null, complete = null, ordering = null }
+) {
   const params = { parent, max_results: 25, ordering };
   if (published !== null) {
     params.published = published;

From 0467286363e2183834c0c11bdeadbb0937494ff9 Mon Sep 17 00:00:00 2001
From: Garvit Singhal <garvitsinghal2003@gmail.com>
Date: Fri, 9 May 2025 18:08:18 +0530
Subject: [PATCH 5/5] wip

---
 .../channelEdit/views/trash/TrashModal.vue    | 33 +++++--------------
 .../contentcuration/viewsets/contentnode.py   |  9 ++---
 2 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 170b11c7f2..9aa7b2c605 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -67,7 +67,7 @@
             </template>
           </VDataTable>
           <div class="show-more-button-container">
-            <KButton v-if="hasMore" :disabled="moreLoading" @click="loadMore">
+            <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
               {{ showMoreLabel }}
             </KButton>
           </div>
@@ -216,10 +216,6 @@
         // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
         return showMoreTranslator.$tr('showMore');
       },
-      // "hasMore" returns true only if "more" is a nonempty plain object.
-      hasMore() {
-        return this.more && Object.keys(this.more).length > 0;
-      },
     },
     watch: {
       dialog(newValue) {
@@ -290,26 +286,13 @@
         return this.previewNodeId === id ? this.$vuetify.theme.greyBackground : 'transparent';
       },
       loadMore() {
-        // Prevent further calls if "more" is falsy or already loading.
-        if (!this.more || this.moreLoading) return;
-        this.moreLoading = true;
-        // Capture current item count and clone "more" parameters.
-        const currentItemsLength = this.items.length;
-        const currentMore = JSON.stringify(this.more);
-        // Call loadContentNodes with a deep clone of the "more" object.
-        this.loadContentNodes(JSON.parse(JSON.stringify(this.more))).then(response => {
-          // If no new "more" is returned or item count hasn't increased, clear "more"
-          if (
-            !response.more ||
-            JSON.stringify(response.more) === currentMore ||
-            this.items.length === currentItemsLength
-          ) {
-            this.more = null;
-          } else {
-            this.more = response.more;
-          }
-          this.moreLoading = false;
-        });
+        if (this.more && !this.moreLoading) {
+          this.moreLoading = true;
+          this.loadContentNodes(this.more).then(response => {
+            this.more = response.more || null;
+            this.moreLoading = false;
+          });
+        }
       },
     },
     $trs: {
diff --git a/contentcuration/contentcuration/viewsets/contentnode.py b/contentcuration/contentcuration/viewsets/contentnode.py
index f7a03dd150..3033c228ca 100644
--- a/contentcuration/contentcuration/viewsets/contentnode.py
+++ b/contentcuration/contentcuration/viewsets/contentnode.py
@@ -695,10 +695,11 @@ def decode_cursor(self, request):
         value = request.query_params.get(cursor_param)
         if value is None:
             return None
-        try:
-            value = int(value)
-        except ValueError:
-            raise ValidationError("lft must be an integer but an invalid value was given.")
+        if pagination_field == "lft":
+            try:
+                value = int(value)
+            except ValueError:
+                raise ValidationError("lft must be an integer but an invalid value was given.")
 
         return Cursor(offset=0, reverse=False, position=value)