diff --git a/backend/examples/views/comment.py b/backend/examples/views/comment.py index 928f3890..dadb8c72 100644 --- a/backend/examples/views/comment.py +++ b/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"]) diff --git a/frontend/components/comment/CommentList.vue b/frontend/components/comment/CommentList.vue index 7c95068d..76c64718 100644 --- a/frontend/components/comment/CommentList.vue +++ b/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: { diff --git a/frontend/repositories/comment/apiCommentRepository.ts b/frontend/repositories/comment/apiCommentRepository.ts index bae3ef53..0739da4d 100644 --- a/frontend/repositories/comment/apiCommentRepository.ts +++ b/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> { - 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,