ADD: Optional sorting for PaginatorList

frontend/src/components/PaginatorList.vue

 <template>
   <div class="paginator">
     <FilterInput v-model="filterValue"></FilterInput>
-    <Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event" @per-page="items_per_page = $event" :total_rows="filtered_items.length" v-if="filtered_items.length > 0"/>
+    <Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event"
+               @per-page="items_per_page = $event" :total_rows="filtered_and_sorted_items.length"
+               v-if="filtered_and_sorted_items.length > 0"/>
 
     <div class="pagination_container">
       <slot name="content_skeleton_item" v-if="!items || items.length === 0"></slot>
@@ -9,12 +11,14 @@
             v-for="item in sliced_items"
             v-bind:item="item"/>
     </div>
-    <div v-if="!items || filtered_items.length === 0"
+    <div v-if="!items || filtered_and_sorted_items.length === 0"
          class="font-italic text-center my-3">
       <span class="font-italic">{{ no_items_text }}</span><br/>
     </div>
 
-    <Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event" @per-page="items_per_page = $event" :total_rows="filtered_items.length" v-if="filtered_items.length > 0"/>
+    <Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event"
+               @per-page="items_per_page = $event" :total_rows="filtered_and_sorted_items.length"
+               v-if="filtered_and_sorted_items.length > 0"/>
   </div>
 </template>
 
@@ -77,17 +81,24 @@ export default {
           return false
         }
       }
+    },
+    sort_function: {
+      type: Function,
+      default() {
+        return null
+      }
     }
   },
   computed: {
-    filtered_items() {
-      return this.filterValue === '' ? this.items : this.items.filter(x => this.filter_function()(x, this.filterValue))
+    filtered_and_sorted_items() {
+      const filtered_items = this.filterValue === '' ? this.items : this.items.filter(x => this.filter_function()(x, this.filterValue))
+      return this.sort_function ? filtered_items.sort(this.sort_function) : filtered_items
     },
     sliced_items() {
       if (this.items_per_page === 0) {
-        return this.filtered_items()
+        return this.sorted_items()
       }
-      return this.filtered_items.slice((this.current_page - 1) * this.items_per_page, Math.min(this.items.length, this.current_page * this.items_per_page))
+      return this.filtered_and_sorted_items.slice((this.current_page - 1) * this.items_per_page, Math.min(this.items.length, this.current_page * this.items_per_page))
     }
   }
 }