BookStack Code Mirror - bookstack/blob - resources/js/components/list-sort-control.js

   1 /**
   2  * ListSortControl
   3  * Manages the logic for the control which provides list sorting options.
   4  */
   5 import {Component} from "./component";
   6
   7 export class ListSortControl extends Component {
   8
   9     setup() {
  10         this.elem = this.$el;
  11         this.menu = this.$refs.menu;
  12
  13         this.sortInput = this.$refs.sort;
  14         this.orderInput = this.$refs.order;
  15         this.form = this.$refs.form;
  16
  17         this.setupListeners();
  18     }
  19
  20     setupListeners() {
  21         this.menu.addEventListener('click', event => {
  22             if (event.target.closest('[data-sort-value]') !== null) {
  23                 this.sortOptionClick(event);
  24             }
  25         });
  26
  27         this.elem.addEventListener('click', event => {
  28             if (event.target.closest('[data-sort-dir]') !== null) {
  29                 this.sortDirectionClick(event);
  30             }
  31         });
  32     }
  33
  34     sortOptionClick(event) {
  35         const sortOption = event.target.closest('[data-sort-value]');
  36         this.sortInput.value = sortOption.getAttribute('data-sort-value');
  37         event.preventDefault();
  38         this.form.submit();
  39     }
  40
  41     sortDirectionClick(event) {
  42         const currentDir = this.orderInput.value;
  43         this.orderInput.value = (currentDir === 'asc') ? 'desc' : 'asc';
  44         event.preventDefault();
  45         this.form.submit();
  46     }
  47
  48 }