diff --git a/app/Http/Middleware/InertiaShareMiddleware.php b/app/Http/Middleware/InertiaShareMiddleware.php index f8b97da0..325ca973 100644 --- a/app/Http/Middleware/InertiaShareMiddleware.php +++ b/app/Http/Middleware/InertiaShareMiddleware.php @@ -20,6 +20,7 @@ class InertiaShareMiddleware { \Inertia::share([ 'auth' => ['user' => auth()->check() ? new UserResource(auth()->user()) : null], + 'search' => $request->query('search', ''), 'menu' => function() { return session()->get('menu'); }, diff --git a/resources/css/base.css b/resources/css/base.css index 5378f66b..a5f9fa6f 100644 --- a/resources/css/base.css +++ b/resources/css/base.css @@ -80,3 +80,7 @@ .mainnav > div > a { @apply py-2; } + +input, select { + outline: none; +} diff --git a/resources/js/layouts/App.vue b/resources/js/layouts/App.vue index cfd96c96..c83cd8d9 100644 --- a/resources/js/layouts/App.vue +++ b/resources/js/layouts/App.vue @@ -10,7 +10,12 @@ </div> <div class="flex-grow ml-56 bg-gray-900 flex flex-col"> - <div class="h-16 text-xl font-semibold text-white flex items-center pl-5 border-b border-gray-600" v-html="$page.props.title"></div> + <div class="h-16 p-6 flex justify-between items-center border-b border-gray-600"> + <span class="text-xl font-semibold text-white" v-html="$page.props.title"></span> + <label for="search"> + <input class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400" placeholder="Suchen…" name="search" v-model="isearch"></input> + </label> + </div> <div class="flex-grow"> <slot></slot> @@ -22,9 +27,27 @@ <script> import VLink from './_VLink.vue'; +import { debounce } from 'lodash'; +import mergesQueryString from '../mixins/mergesQueryString.js'; export default { - components: { VLink } + components: { VLink }, + mixins: [ mergesQueryString ], + + computed: { + isearch: { + set: debounce(function(v) { + this.$inertia.visit(this.qs({ search: v }), { + only: ['search', 'data'], + preserveState: true, + }); + }, 500), + get() { + return this.$page.props.search; + } + } + } + }; </script> diff --git a/resources/js/mixins/mergesQueryString.js b/resources/js/mixins/mergesQueryString.js index a2690a9f..3ea230c2 100644 --- a/resources/js/mixins/mergesQueryString.js +++ b/resources/js/mixins/mergesQueryString.js @@ -9,8 +9,7 @@ export default { var mn = {}; Object.keys(m).forEach((k) => { - console.log(m[k]); - if (m[k] !== null && !isNaN(m[k])) { + if (m[k] !== null) { mn[k] = m[k]; } });