Implemented functionality to make books sort function

Also changed public user settings to be stored in session rather than DB.
Cleaned existing list view type logic.

resources/assets/js/components/index.js

@@ -19,6 +19,7 @@ import pageDisplay from "./page-display";
 import shelfSort from "./shelf-sort";
 import homepageControl from "./homepage-control";
 import headerMobileToggle from "./header-mobile-toggle";
+import listSortControl from "./list-sort-control";
 
 
 const componentMapping = {
@@ -42,7 +43,8 @@ const componentMapping = {
     'page-display': pageDisplay,
     'shelf-sort': shelfSort,
     'homepage-control': homepageControl,
-     'header-mobile-toggle': headerMobileToggle,
+    'header-mobile-toggle': headerMobileToggle,
+    'list-sort-control': listSortControl,
 };
 
 window.components = {};

resources/assets/js/components/list-sort-control.js

@@ -0,0 +1,42 @@
+/**
+ * ListSortControl
+ * Manages the logic for the control which provides list sorting options.
+ */
+class ListSortControl {
+
+    constructor(elem) {
+        this.elem = elem;
+
+        this.sortInput = elem.querySelector('[name="sort"]');
+        this.orderInput = elem.querySelector('[name="order"]');
+        this.form = elem.querySelector('form');
+
+        this.elem.addEventListener('click', event => {
+            if (event.target.closest('[data-sort-value]') !== null) {
+                this.sortOptionClick(event);
+            }
+            if (event.target.closest('[data-sort-dir]') !== null) {
+                this.sortDirectionClick(event);
+            }
+        })
+
+    }
+
+    sortOptionClick(event) {
+        const sortOption = event.target.closest('[data-sort-value]');
+        this.sortInput.value = sortOption.getAttribute('data-sort-value');
+        event.preventDefault();
+        this.form.submit();
+    }
+
+    sortDirectionClick(event) {
+        const currentDir = this.orderInput.value;
+        const newDir = (currentDir === 'asc') ? 'desc' : 'asc';
+        this.orderInput.value = newDir;
+        event.preventDefault();
+        this.form.submit();
+    }
+
+}
+
+export default ListSortControl;

resources/assets/sass/_lists.scss

@@ -369,6 +369,9 @@ ul.pagination {
     padding: $-xs $-m;
     line-height: 1.2;
   }
+  li.active a {
+    font-weight: 600;
+  }
   a, button {
     display: block;
     padding: $-xs $-m;

resources/assets/sass/styles.scss

@@ -258,6 +258,9 @@ $btt-size: 40px;
 
 .list-sort-container {
   display: inline-block;
+  form {
+    display: inline-block;
+  }
   .list-sort {
     display: inline-grid;
     margin-left: $-s;

resources/lang/en/common.php

@@ -40,6 +40,13 @@ return [
     'remove' => 'Remove',
     'add' => 'Add',
 
+    /**
+     * Sort Options
+     */
+    'sort_name' => 'Name',
+    'sort_created_at' => 'Created Date',
+    'sort_updated_at' => 'Updated Date',
+
     /**
      * Misc
      */

resources/views/books/index.blade.php

@@ -28,7 +28,7 @@
 @stop
 
 @section('body')
-    @include('books.list', ['books' => $books, 'bookViewType' => $booksViewType])
+    @include('books.list', ['books' => $books, 'view' => $view])
 @stop
 
 @section('right')
@@ -42,7 +42,7 @@
                     <span>{{ trans('entities.books_create') }}</span>
                 </a>
             @endif
-            @include('books.view-toggle', ['booksViewType' => $booksViewType])
+            @include('books.view-toggle', ['view' => $view])
         </div>
     </div>
 

resources/views/books/list.blade.php

@@ -1,30 +1,15 @@
 
-<div class="content-wrap card {{ $booksViewType === 'list' ? 'thin' : '' }}">
+<div class="content-wrap card {{ $view === 'list' ? 'thin' : '' }}">
     <div class="grid halves v-center">
         <h1 class="list-heading">{{ trans('entities.books') }}</h1>
         <div class="text-right">
 
-            <div class="list-sort-container">
-                <div class="list-sort-label">Sort</div>
-                <div class="list-sort">
-                    <div class="list-sort-type dropdown-container" dropdown>
-                        <div dropdown-toggle>Name</div>
-                        <ul>
-                            <li><a href="#">Name</a></li>
-                            <li><a href="#">Created Date</a></li>
-                            <li><a href="#">Popularity</a></li>
-                        </ul>
-                    </div>
-                    <div class="list-sort-dir">
-                        @icon('sort-up')
-                    </div>
-                </div>
-            </div>
+            @include('partials.sort', ['options' => $sortOptions, 'order' => $order, 'sort' => $sort])
 
         </div>
     </div>
     @if(count($books) > 0)
-        @if($booksViewType === 'list')
+        @if($view === 'list')
             <div class="entity-list">
                 @foreach($books as $book)
                     <a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">

resources/views/books/view-toggle.blade.php

@@ -2,8 +2,8 @@
     <form action="{{ baseUrl("/settings/users/{$currentUser->id}/switch-book-view") }}" method="POST" class="inline">
         {!! csrf_field() !!}
         {!! method_field('PATCH') !!}
-        <input type="hidden" value="{{ $booksViewType === 'list'? 'grid' : 'list' }}" name="view_type">
-        @if ($booksViewType === 'list')
+        <input type="hidden" value="{{ $view === 'list'? 'grid' : 'list' }}" name="view_type">
+        @if ($view === 'list')
             <a onclick="this.closest('form').submit()" type="submit" class="icon-list-item">
                 <span class="icon">@icon('grid')</span>
                 <span>{{ trans('common.grid_view') }}</span>

resources/views/partials/sort.blade.php

@@ -0,0 +1,32 @@
+<?php
+    $selectedSort = (isset($sort) && array_key_exists($sort, $options)) ? $sort : array_keys($options)[0];
+    $order = (isset($order) && in_array($order, ['asc', 'desc'])) ? $order : 'asc';
+?>
+<div class="list-sort-container" list-sort-control>
+    <div class="list-sort-label">{{ trans('common.sort') }}</div>
+    <form action="{{ baseUrl("/settings/users/{$currentUser->id}/change-books-sort") }}" method="post">
+
+        {!! csrf_field() !!}
+        {!! method_field('PATCH') !!}
+        <input type="hidden" value="{{ $selectedSort }}" name="sort">
+        <input type="hidden" value="{{ $order }}" name="order">
+
+        <div class="list-sort">
+            <div class="list-sort-type dropdown-container" dropdown>
+                <div dropdown-toggle>{{ $options[$selectedSort] }}</div>
+                <ul>
+                    @foreach($options as $key => $label)
+                        <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}">{{ $label }}</a></li>
+                    @endforeach
+                </ul>
+            </div>
+            <div class="list-sort-dir" data-sort-dir>
+                @if($order === 'desc')
+                    @icon('sort-up')
+                @else
+                    @icon('sort-down')
+                @endif
+            </div>
+        </div>
+    </form>
+</div>