Enable to sort comments by example

backend/examples/views/comment.py

@@ -12,9 +12,10 @@ from projects.permissions import IsProjectMember
 class CommentList(generics.ListCreateAPIView):
     permission_classes = [IsAuthenticated & IsProjectMember]
     serializer_class = CommentSerializer
-    filter_backends = (DjangoFilterBackend, filters.SearchFilter)
+    filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)
     filterset_fields = ["example"]
     search_fields = ("text",)
+    ordering_fields = ("created_at", "example")
 
     def get_queryset(self):
         queryset = Comment.objects.filter(example__project_id=self.kwargs["project_id"])

frontend/components/comment/CommentList.vue

@@ -88,10 +88,10 @@ export default Vue.extend({
       search: '',
       options: {} as DataOptions,
       headers: [
-        { text: this.$t('dataset.text'), value: 'text' },
-        { text: this.$t('user.username'), value: 'username' },
-        { text: this.$t('comments.created_at'), value: 'createdAt' },
-        { text: this.$t('dataset.action'), value: 'action' },
+        { text: this.$t('dataset.text'), value: 'text', sortable: false },
+        { text: this.$t('user.username'), value: 'username', sortable: false },
+        { text: this.$t('comments.created_at'), value: 'createdAt', sortable: false },
+        { text: this.$t('dataset.action'), value: 'action', sortable: false },
         { text: this.$t('comments.document'), value: 'example' }
       ],
       mdiMagnify
@@ -101,7 +101,7 @@ export default Vue.extend({
   watch: {
     options: {
       handler() {
-        this.$emit('update:query', {
+        this.updateQuery({
           query: {
             limit: this.options.itemsPerPage.toString(),
             offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(),
@@ -112,7 +112,7 @@ export default Vue.extend({
       deep: true
     },
     search() {
-      this.$emit('update:query', {
+      this.updateQuery({
         query: {
           limit: this.options.itemsPerPage.toString(),
           offset: '0',
@@ -121,6 +121,20 @@ export default Vue.extend({
       })
       this.options.page = 1
     }
+  },
+
+  methods: {
+    updateQuery(payload: any) {
+      const { sortBy, sortDesc } = this.options
+      if (sortBy.length === 1 && sortDesc.length === 1) {
+        payload.query.sortBy = sortBy[0]
+        payload.query.sortDesc = sortDesc[0]
+      } else {
+        payload.query.sortBy = 'createdAt'
+        payload.query.sortDesc = true
+      }
+      this.$emit('update:query', payload)
+    }
   }
 
   // methods: {

frontend/repositories/comment/apiCommentRepository.ts

@@ -28,9 +28,10 @@ export class APICommentRepository {
 
   async listAll(
     projectId: string,
-    { limit = '10', offset = '0', q = '' }: SearchOption
+    { limit = '10', offset = '0', q = '', sortBy = '', sortDesc = '' }: SearchOption
   ): Promise<Page<CommentItem>> {
-    const url = `/projects/${projectId}/comments?q=${q}&limit=${limit}&offset=${offset}`
+    const ordering = sortDesc === 'true' ? `-${sortBy}` : `${sortBy}`
+    const url = `/projects/${projectId}/comments?q=${q}&limit=${limit}&offset=${offset}&ordering=${ordering}`
     const response = await this.request.get(url)
     return new Page(
       response.data.count,