nadim
/
automngr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design changes

shift-build-2464
Nadim Salloum 2021-05-14 19:08:39 +02:00
parent 210d9cb831
commit 9d8beb2630
5 changed files with 122 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/Http/Controllers/CarController.php
View File

@ -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'),
'cars' => Car::filter(request()->only('search', 'trashed'))
'filters' => $request->all('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.
*

43
app/Http/Controllers/ContactController.php
View File

@ -19,16 +19,17 @@ class ContactController extends Controller
*/
public function index(Request $request)
{
$sortby = $request->only('sortby') ?: 'lastname';
$direction = $request->only('direction') ?: 'asc';
$direction = $this->getDirection($request);
$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'))
->orderBy($sortby, $direction)
'contacts' => $contacts->filter($request->only('search', 'trashed'))
->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.
*

4
app/Models/Contact.php
View File

@ -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()

68
public/js/app.js vendored
View File

@ -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, {
fill: $options.getIconColor(col.key, 'asc'),
), $options.isActiveSort(col.key, 'asc') ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_unicon, {
key: 0,
fill: "#4B5563",
height: "22",
width: "22",
name: "angle-up"
}, null, 8
/* PROPS */
, ["fill"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
fill: $options.getIconColor(col.key, 'desc'),
name: "arrow-up"
})) : (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, {
key: 1,
fill: "#4B5563",
height: "22",
width: "22",
name: "angle-down"
}, null, 8
name: "arrow-down"
})) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 8
/* PROPS */
, ["fill"])])], 8
/* 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
, ["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
/* 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

18
resources/js/Components/SimpleTable.vue
View File

@ -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 :fill="getIconColor(col.key, 'asc')" height="22" width="22" name="angle-up"></unicon>
<unicon :fill="getIconColor(col.key, 'desc')" height="22" width="22" name="angle-down"></unicon>
</div>
<unicon v-if="isActiveSort(col.key, 'asc')" fill="#4B5563" height="22" width="22" name="arrow-up"></unicon>
<unicon v-if="isActiveSort(col.key, 'desc')" fill="#4B5563" height="22" width="22" name="arrow-down"></unicon>
</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) {
if (col == this.sort.by && dir == this.sort.direction) {
return '#4B5563';
}
return '#a0a5b9';
isActiveSort(col, dir) {
return col == this.sort.by && dir == this.sort.direction;
}
},
}