Enable sorting of documents in frontend

Author: Andrew Reitano

app/server/static/components/annotation.pug

@@ -55,6 +55,15 @@ div.columns(v-cloak="")
       div.main.pt0.pb0.pr20.pl20
         span About {{ count }} results
 
+      div.main.pt0.pb0.pr20.pl20
+        div.select
+          select(v-model="ordering")
+            option(value="", disabled, selected) Sort by
+            option(value="created_at") Created : Ascending
+            option(value="-created_at") Created : Descending
+            option(value="updated_at") Updated : Ascending
+            option(value="-updated_at") Updated : Descending
+
       div.main
         a.item(
           v-for="(doc, index) in docs"

app/server/static/components/annotationMixin.js

@@ -52,6 +52,7 @@ export default {
       url: '',
       offset: getOffsetFromUrl(window.location.href),
       picked: 'all',
+      ordering: '',
       count: 0,
       isSuperuser: false,
       isMetadataActive: false,
@@ -109,7 +110,7 @@ export default {
 
     async submit() {
       const state = this.getState();
-      this.url = `docs?q=${this.searchQuery}&is_checked=${state}&offset=${this.offset}`;
+      this.url = `docs?q=${this.searchQuery}&is_checked=${state}&offset=${this.offset}&ordering=${this.ordering}`;
       await this.search();
       this.pageNumber = 0;
     },
@@ -155,6 +156,11 @@ export default {
       this.submit();
     },
 
+    ordering() {
+      this.offset = 0;
+      this.submit();
+    },
+
     annotations() {
       // fetch progress info.
       HTTP.get('statistics').then((response) => {

app/server/static/components/document_classification.vue

@@ -64,7 +64,7 @@ export default {
 
     async submit() {
       const state = this.getState();
-      this.url = `docs?q=${this.searchQuery}&doc_annotations__isnull=${state}&offset=${this.offset}`;
+      this.url = `docs?q=${this.searchQuery}&doc_annotations__isnull=${state}&offset=${this.offset}&ordering=${this.ordering}`;
       await this.search();
       this.pageNumber = 0;
     },

app/server/static/components/seq2seq.vue

@@ -105,7 +105,7 @@ export default {
 
     async submit() {
       const state = this.getState();
-      this.url = `docs?q=${this.searchQuery}&seq2seq_annotations__isnull=${state}&offset=${this.offset}`;
+      this.url = `docs?q=${this.searchQuery}&seq2seq_annotations__isnull=${state}&offset=${this.offset}&ordering=${this.ordering}`;
       await this.search();
       this.pageNumber = 0;
     },

app/server/static/components/sequence_labeling.vue

@@ -66,7 +66,7 @@ export default {
 
     async submit() {
       const state = this.getState();
-      this.url = `docs?q=${this.searchQuery}&seq_annotations__isnull=${state}&offset=${this.offset}`;
+      this.url = `docs?q=${this.searchQuery}&seq_annotations__isnull=${state}&offset=${this.offset}&ordering=${this.ordering}`;
       await this.search();
       this.pageNumber = 0;
     },