Add pagination to /api/v1/comments (#1614)

* Add pagination to `/api/v1/comments` 
* Update CommentBox component to have pagination buttons
* Closes #1599

CTFd/api/v1/comments.py

@@ -87,14 +87,32 @@ class CommentList(Resource):
         CommentModel = get_comment_model(data=query_args)
         filters = build_model_filters(model=CommentModel, query=q, field=field)
 
-        comments = CommentModel.query.filter_by(**query_args).filter(*filters).all()
+        comments = (
+            CommentModel.query.filter_by(**query_args)
+            .filter(*filters)
+            .order_by(CommentModel.id.desc())
+            .paginate(max_per_page=100)
+        )
         schema = CommentSchema(many=True)
-        response = schema.dump(comments)
+        response = schema.dump(comments.items)
 
         if response.errors:
             return {"success": False, "errors": response.errors}, 400
 
-        return {"success": True, "data": response.data}
+        return {
+            "meta": {
+                "pagination": {
+                    "page": comments.page,
+                    "next": comments.next_num,
+                    "prev": comments.prev_num,
+                    "pages": comments.pages,
+                    "per_page": comments.per_page,
+                    "total": comments.total,
+                }
+            },
+            "success": True,
+            "data": response.data,
+        }
 
     @admins_only
     @comments_namespace.doc(

CTFd/themes/admin/assets/js/components/comments/CommentBox.vue

@@ -20,11 +20,42 @@
         </div>
       </div>
     </div>
+
+    <div class="row" v-if="pages > 1">
+      <div class="col-md-12">
+        <div class="text-center">
+          <!-- Inversed ternary b/c disabled will turn the button off -->
+          <button
+            type="button"
+            class="btn btn-link p-0"
+            @click="prevPage()"
+            :disabled="prev ? false : true"
+          >
+            &lt;&lt;&lt;
+          </button>
+          <button
+            type="button"
+            class="btn btn-link p-0"
+            @click="nextPage()"
+            :disabled="next ? false : true"
+          >
+            &gt;&gt;&gt;
+          </button>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="text-center">
+          <small class="text-muted"
+            >Page {{ page }} of {{ total }} comments</small
+          >
+        </div>
+      </div>
+    </div>
     <div class="comments">
       <transition-group name="comment-card">
         <div
           class="comment-card card mb-2"
-          v-for="comment in comments.slice().reverse()"
+          v-for="comment in comments"
           :key="comment.id"
         >
           <div class="card-body pl-0 pb-0 pt-2 pr-2">
@@ -53,6 +84,36 @@
         </div>
       </transition-group>
     </div>
+    <div class="row" v-if="pages > 1">
+      <div class="col-md-12">
+        <div class="text-center">
+          <!-- Inversed ternary b/c disabled will turn the button off -->
+          <button
+            type="button"
+            class="btn btn-link p-0"
+            @click="prevPage()"
+            :disabled="prev ? false : true"
+          >
+            &lt;&lt;&lt;
+          </button>
+          <button
+            type="button"
+            class="btn btn-link p-0"
+            @click="nextPage()"
+            :disabled="next ? false : true"
+          >
+            &gt;&gt;&gt;
+          </button>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="text-center">
+          <small class="text-muted"
+            >Page {{ page }} of {{ total }} comments</small
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -69,6 +130,11 @@ export default {
   },
   data: function() {
     return {
+      page: 1,
+      pages: null,
+      next: null,
+      prev: null,
+      total: null,
       comment: "",
       comments: [],
       urlRoot: CTFd.config.urlRoot
@@ -80,6 +146,14 @@ export default {
         .local()
         .format("MMMM Do, h:mm:ss A");
     },
+    nextPage: function() {
+      this.page++;
+      this.loadComments();
+    },
+    prevPage: function() {
+      this.page--;
+      this.loadComments();
+    },
     getArgs: function() {
       let args = {};
       args[`${this.$props.type}_id`] = this.$props.id;
@@ -87,7 +161,15 @@ export default {
     },
     loadComments: function() {
       let apiArgs = this.getArgs();
+      apiArgs[`page`] = this.page;
+      apiArgs[`per_page`] = 10;
+
       helpers.comments.get_comments(apiArgs).then(response => {
+        this.page = response.meta.pagination.page;
+        this.pages = response.meta.pagination.pages;
+        this.next = response.meta.pagination.next;
+        this.prev = response.meta.pagination.prev;
+        this.total = response.meta.pagination.total;
         this.comments = response.data;
         return this.comments;
       });