Merge pull request #5917 from BookStackApp/copy_references

[bookstack] / resources / js / components / list-sort-control.js

diff --git a/resources/js/components/list-sort-control.js b/resources/js/components/list-sort-control.js
index 23fc64ae6a47cde19602f4af610c75926582d275..4b38fc1e50a5ca29528a1465ff75c16fb9d2aa1f 100644 (file)
--- a/resources/js/components/list-sort-control.js
+++ b/resources/js/components/list-sort-control.js
@@ -2,16 +2,22 @@
  * ListSortControl
  * Manages the logic for the control which provides list sorting options.
  */
-class ListSortControl {
+import {Component} from './component';
 
-    constructor(elem) {
-        this.elem = elem;
-        this.menu = elem.querySelector('ul');
+export class ListSortControl extends Component {
 
-        this.sortInput = elem.querySelector('[name="sort"]');
-        this.orderInput = elem.querySelector('[name="order"]');
-        this.form = elem.querySelector('form');
+    setup() {
+        this.elem = this.$el;
+        this.menu = this.$refs.menu;
 
+        this.sortInput = this.$refs.sort;
+        this.orderInput = this.$refs.order;
+        this.form = this.$refs.form;
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
         this.menu.addEventListener('click', event => {
             if (event.target.closest('[data-sort-value]') !== null) {
                 this.sortOptionClick(event);
@@ -34,12 +40,9 @@ class ListSortControl {
 
     sortDirectionClick(event) {
         const currentDir = this.orderInput.value;
-        const newDir = (currentDir === 'asc') ? 'desc' : 'asc';
-        this.orderInput.value = newDir;
+        this.orderInput.value = (currentDir === 'asc') ? 'desc' : 'asc';
         event.preventDefault();
         this.form.submit();
     }
 
 }
-
-export default ListSortControl;
\ No newline at end of file