design changes

app/Http/Controllers/CarController.php

@@ -15,11 +15,19 @@ class CarController extends Controller
      *
      * @return \Illuminate\Http\Response
      */
-    public function index()
+    public function index(Request $request)
     {
+        $direction = $this->getDirection($request);
+        $sortBy = $this->getSortBy($request);
+        $cars = $this->getWithCustomSort($sortBy, $direction);
+
         return Inertia::render('Cars/Index', [
-            'filters' => request()->all('search', 'trashed'),
+            'filters' => $request->all('search', 'trashed'),
-            'cars' => Car::filter(request()->only('search', 'trashed'))
+            'sort' => [
+                'by' => $sortBy,
+                'direction' => $direction,
+            ],
+            'cars' => $cars->filter($request->only('search', 'trashed'))
                 ->orderByInitialDate()
                 ->paginate(50)
                 ->withQueryString()
@@ -41,6 +49,39 @@ class CarController extends Controller
         ]);
     }
 
+    private function getWithCustomSort(string $sortBy, string $direction)
+    {
+        switch($sortBy) {
+            case 'initial_date':
+                return Car::orderBy('initial_date', $direction);
+            case 'stammnummer':
+                return Car::orderBy('stammnummer', $direction);
+            default:
+                //return Car::orderByName($direction);
+                return Car::orderBy('initial_date', $direction);
+        }
+    }
+
+    private function getSortBy(Request $request)
+    {
+        if ($request->has('sortby')) {
+            return $request->get('sortby');
+        }
+
+        return 'name';
+    }
+
+    private function getDirection(Request $request)
+    {
+        if ($request->has('direction')) {
+            if (in_array($request->get('direction'), ['asc', 'desc'])) {
+                return $request->get('direction');
+            }
+        }
+
+        return 'asc';
+    }
+
     /**
      * Show the form for creating a new resource.
      *

app/Http/Controllers/ContactController.php

@@ -19,16 +19,17 @@ class ContactController extends Controller
      */
     public function index(Request $request)
     {
-        $sortby = $request->only('sortby') ?: 'lastname';
+        $direction = $this->getDirection($request);
-        $direction = $request->only('direction') ?: 'asc';
+        $sortBy = $this->getSortBy($request);
+        $contacts = $this->getWithCustomSort($sortBy, $direction);
+
         return Inertia::render('Contacts/Index', [
             'filters' => $request->all('search', 'trashed'),
             'sort' => [
-                'by' => $sortby,
+                'by' => $sortBy,
                 'direction' => $direction,
             ],
-            'contacts' => Contact::filter($request->only('search', 'trashed'))
+            'contacts' => $contacts->filter($request->only('search', 'trashed'))
-                ->orderBy($sortby, $direction)
                 ->paginate(50)
                 ->withQueryString()
                 ->through(fn ($contact) => [
@@ -43,6 +44,38 @@ class ContactController extends Controller
         ]);
     }
 
+    private function getWithCustomSort(string $sortBy, string $direction)
+    {
+        switch($sortBy) {
+            case 'company':
+                return Contact::orderBy('company', $direction);
+            case 'fullCity':
+                return Contact::orderBy('city', $direction);
+            default:
+                return Contact::orderByName($direction);
+        }
+    }
+
+    private function getSortBy(Request $request)
+    {
+        if ($request->has('sortby')) {
+            return $request->get('sortby');
+        }
+
+        return 'name';
+    }
+
+    private function getDirection(Request $request)
+    {
+        if ($request->has('direction')) {
+            if (in_array($request->get('direction'), ['asc', 'desc'])) {
+                return $request->get('direction');
+            }
+        }
+
+        return 'asc';
+    }
+
     /**
      * Show the form for creating a new resource.
      *

app/Models/Contact.php

@@ -42,9 +42,9 @@ class Contact extends Model
         return $this->zip . ' ' . $this->city;
     }
 
-    public function scopeOrderByName($query)
+    public function scopeOrderByName($query, $direction)
     {
-        $query->orderBy('lastname')->orderBy('firstname');
+        $query->orderBy('lastname', $direction)->orderBy('firstname', $direction);
     }
 
     public function sellContracts()

public/js/app.js

@@ -16726,17 +16726,18 @@ __webpack_require__.r(__webpack_exports__);
         this.sort.direction = this.sort.direction == 'asc' ? 'desc' : 'asc';
       } else {
         this.sort.direction = 'asc';
-      } //this.$inertia.get(this.route('contacts'), { preserveState: true })
-
-
-      this.sort.by = col;
-    },
-    getIconColor: function getIconColor(col, dir) {
-      if (col == this.sort.by && dir == this.sort.direction) {
-        return '#4B5563';
       }
 
-      return '#a0a5b9';
+      this.sort.by = col;
+      this.$inertia.get(this.data.path, {
+        'sortby': this.sort.by,
+        'direction': this.sort.direction
+      }, {
+        preserveState: true
+      });
+    },
+    isActiveSort: function isActiveSort(col, dir) {
+      return col == this.sort.by && dir == this.sort.direction;
     }
   }
 });
@@ -19356,31 +19357,28 @@ var _hoisted_6 = {
   "class": "text-left font-bold"
 };
 var _hoisted_7 = {
-  "class": "grid grid-cols-1 place-items-center ml-1"
-};
-var _hoisted_8 = {
   key: 1,
   "class": "flex items-center"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   key: 1,
   "class": "px-6 py-4 flex items-center focus:text-indigo-500"
 };
-var _hoisted_10 = {
+var _hoisted_9 = {
   key: 0,
   "class": "border-t w-px"
 };
-var _hoisted_11 = {
+var _hoisted_10 = {
   key: 0
 };
-var _hoisted_12 = {
+var _hoisted_11 = {
   key: 2
 };
-var _hoisted_13 = {
+var _hoisted_12 = {
   "class": "inline-flex font-medium text-gray-500 ml-3"
 };
 
-var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
+var _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
@@ -19402,26 +19400,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return $options.sortTable(col.key);
       },
-      "class": "flex items-center"
+      "class": "flex place-items-center"
     }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value) + " ", 1
     /* TEXT */
-    ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+    ), $options.isActiveSort(col.key, 'asc') ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_unicon, {
-      fill: $options.getIconColor(col.key, 'asc'),
+      key: 0,
+      fill: "#4B5563",
       height: "22",
       width: "22",
-      name: "angle-up"
+      name: "arrow-up"
-    }, null, 8
+    })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $options.isActiveSort(col.key, 'desc') ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_unicon, {
-    /* PROPS */
+      key: 1,
-    , ["fill"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+      fill: "#4B5563",
-      fill: $options.getIconColor(col.key, 'desc'),
       height: "22",
       width: "22",
-      name: "angle-down"
+      name: "arrow-down"
-    }, null, 8
+    })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 8
     /* PROPS */
-    , ["fill"])])], 8
+    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
-    /* PROPS */
-    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
     /* TEXT */
     ))], 8
     /* PROPS */
@@ -19451,12 +19447,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 1032
       /* PROPS, DYNAMIC_SLOTS */
-      , ["href"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(row[col.key]), 1
+      , ["href"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(row[col.key]), 1
       /* TEXT */
       ))]);
     }), 128
     /* KEYED_FRAGMENT */
-    )), row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+    )), row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
       "class": "px-4 flex items-center",
       href: row.link,
       tabindex: "-1"
@@ -19477,18 +19473,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
   }), 128
   /* KEYED_FRAGMENT */
-  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
+  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
     "class": "border-t px-6 py-4",
     colspan: $props.columns.length
   }, "Keine Einträge gefunden", 8
   /* PROPS */
-  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
     fill: "#7e8491",
     "class": "mr-2",
     height: "24",
     width: "24",
     name: "meh"
-  }), _hoisted_14])]))]), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
+  }), _hoisted_13])]))]), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
     key: 0,
     "class": "mt-6",
     links: $props.data.links

resources/js/Components/SimpleTable.vue

@@ -8,12 +8,10 @@
                 <table class="w-full whitespace-nowrap">
                    <tr class="text-left font-bold">
                         <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
-                            <a v-if="col.sortable" href="#" @click="sortTable(col.key)" class="flex items-center">
+                            <a v-if="col.sortable" href="#" @click="sortTable(col.key)" class="flex place-items-center">
                                 {{ col.value }}
-                                <div class="grid grid-cols-1 place-items-center ml-1">
+                                <unicon v-if="isActiveSort(col.key, 'asc')" fill="#4B5563" height="22" width="22" name="arrow-up"></unicon>
-                                    <unicon :fill="getIconColor(col.key, 'asc')" height="22" width="22" name="angle-up"></unicon>
+                                <unicon v-if="isActiveSort(col.key, 'desc')" fill="#4B5563" height="22" width="22" name="arrow-down"></unicon>
-                                    <unicon :fill="getIconColor(col.key, 'desc')" height="22" width="22" name="angle-down"></unicon>
-                                </div>
                             </a>
                             <span v-else class="flex items-center">
                                 {{ col.value }}
@@ -78,15 +76,11 @@ export default {
         } else {
             this.sort.direction = 'asc';
         }
-        //this.$inertia.get(this.route('contacts'), { preserveState: true })
         this.sort.by = col;
+        this.$inertia.get(this.data.path, {'sortby': this.sort.by, 'direction': this.sort.direction}, { preserveState: true })
     },
-    getIconColor(col, dir) {
+    isActiveSort(col, dir) {
-        if (col == this.sort.by && dir == this.sort.direction) {
+        return col == this.sort.by && dir == this.sort.direction;
-            return '#4B5563';
-        }
-
-        return '#a0a5b9';
     }
   },
 }