Handle global filter in routes

docs/guide/upgrading/9.0.md

@@ -113,7 +113,7 @@ Be sure to [register this new Service Provider](https://laravel.com/docs/provide
 
 ## Middleware updates (legacy config only)
 
-Due to migration to inertia, two middleware must be added to the config. Also, `SetSharpLocale` must be removed from `api` group.
+Due to migration to inertia, three middleware must be added to the config. Also, `SetSharpLocale` must be removed from `api` group.
 
 ::: info
 If you migrated to the new config builder class, you should be ok unless you have explicitly overridden the whole middleware list.
@@ -126,7 +126,11 @@ Here is the impact on the deprecated config file:
 
 return [
     'middleware' => [
-        // ...
+        'common' => [
+            // ...
+            \Code16\Sharp\Http\Middleware\HandleGlobalFilters::class,
+            \Illuminate\Routing\Middleware\SubstituteBindings::class, // <- be sure to place this one after HandleGlobalFilters
+        ],
         'web' => [
             // ...
             \Code16\Sharp\Http\Middleware\HandleSharpErrors::class,

resources/js/Pages/Show/Show.vue

@@ -340,7 +340,7 @@
                                                                     </template>
                                                                     <template v-if="show.authorizations.update">
                                                                         <Button class="h-8 pointer-events-auto" size="sm" :disabled="isReordering" as-child>
-                                                                            <Link :as="isReordering ? 'button' : 'a'" :href="show.formUrl">
+                                                                            <Link :as="isReordering ? 'button' : 'a'" :href="show.config.formEditUrl">
                                                                                 {{ props.show.config.editButtonLabel || __('sharp::action_bar.show.edit_button') }}
                                                                             </Link>
                                                                         </Button>

resources/js/entity-list/components/EntityList.vue

@@ -13,7 +13,7 @@
     import { computed, ref, watch } from "vue";
     import { showAlert, showDeleteConfirm } from "@/utils/dialogs";
     import { EntityListInstance, InstanceId } from "../types";
-    import { getAppendableParentUri, route } from "@/utils/url";
+    import { route } from "@/utils/url";
     import { Button } from '@/components/ui/button';
     import { api } from "@/api/api";
     import EntityListPagination from "@/entity-list/components/EntityListPagination.vue";
@@ -500,7 +500,7 @@
                                             class="h-8 gap-1"
                                             size="sm"
                                             :disabled="reordering || selecting"
-                                            :href="route('code16.sharp.form.create', { parentUri: getAppendableParentUri(), entityKey })"
+                                            :href="entityList.config.formCreateUrl"
                                             @click="onCreate"
                                         >
                                             {{ props.entityList.config.createButtonLabel || __('sharp::action_bar.list.create_button') }}

resources/js/filters/components/GlobalFilters.vue

@@ -4,42 +4,42 @@
     import { useFilters } from "../useFilters";
     import { route } from "@/utils/url";
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+    import { useTemplateRef } from "vue";
+    import { getCsrfToken } from "@/utils/request";
 
     const props = defineProps<{
         globalFilters: GlobalFiltersData,
     }>();
 
     const filters = useFilters(props.globalFilters.config.filters, props.globalFilters.filterValues);
 
-    function onChanged(filter: FilterData, value: FilterData['value']) {
-        router.post(
-            route('code16.sharp.filters.update', { filterKey: filter.key }),
-            { value },
-            { preserveState: false, preserveScroll: false }
-        );
-    }
+    const form = useTemplateRef<HTMLFormElement>('form');
 </script>
 
 <template>
-    <div class="grid gap-2">
-        <template v-for="filter in filters.rootFilters" :key="filter.key">
-            <template v-if="filter.type === 'select'">
-                <Select
-                    :model-value="String(filters.currentValues[filter.key])"
-                    @update:model-value="onChanged(filter, $event as string)"
-                >
-                    <SelectTrigger class="h-8">
-                        <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <template v-for="value in filter.values">
-                            <SelectItem :value="String(value.id)">
-                                {{ value.label ?? value.id }}
-                            </SelectItem>
-                        </template>
-                    </SelectContent>
-                </Select>
+    <form :action="route('code16.sharp.filters.update')" method="post" ref="form">
+        <input name="_token" :value="getCsrfToken()" type="hidden">
+        <div class="grid gap-2">
+            <template v-for="filter in filters.rootFilters" :key="filter.key">
+                <template v-if="filter.type === 'select'">
+                    <Select
+                        :name="`filterValues[${filter.key}]`"
+                        v-model="filters.currentValues[filter.key]"
+                        @update:model-value="$nextTick(() => form.submit())"
+                    >
+                        <SelectTrigger class="h-8">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <template v-for="value in filter.values">
+                                <SelectItem :value="value.id">
+                                    {{ value.label ?? value.id }}
+                                </SelectItem>
+                            </template>
+                        </SelectContent>
+                    </Select>
+                </template>
             </template>
-        </template>
-    </div>
+        </div>
+    </form>
 </template>

resources/js/show/Show.ts

@@ -8,7 +8,6 @@ import {
     ShowListFieldData,
     ShowTextFieldData
 } from "@/types";
-import { getAppendableParentUri, route } from "@/utils/url";
 import { config } from "@/utils/config";
 
 
@@ -31,21 +30,6 @@ export class Show implements ShowData {
         this.instanceId = instanceId;
     }
 
-    get formUrl(): string {
-        if(route().params.instanceId) {
-            return route('code16.sharp.form.edit', {
-                parentUri: getAppendableParentUri(),
-                entityKey: this.entityKey,
-                instanceId: this.instanceId,
-            });
-        }
-
-        return route('code16.sharp.form.create', {
-            parentUri: getAppendableParentUri(),
-            entityKey: this.entityKey,
-        });
-    }
-
     get instanceState(): string | number | null {
         return this.config.state
             ? this.data[this.config.state.attribute] as any

resources/js/types/generated.d.ts

@@ -789,6 +789,7 @@ export type SessionData = {
 export type SessionStatusLevel = "error" | "success";
 export type ShowConfigData = {
   deleteConfirmationText: string;
+  formEditUrl: string;
   isSingle: boolean;
   commands: ConfigCommandsData | null;
   titleAttribute: string | null;

resources/js/types/routes.d.ts

@@ -4,8 +4,13 @@ declare module 'ziggy-js' {
     "code16.sharp.home": [],
     "code16.sharp.dashboard": [
         {
-            "name": "dashboardKey",
+            "name": "filterKey",
             "required": true
+        },
+        {
+            "name": "dashboardKey",
+            "required": true,
+            "binding": "key"
         }
     ],
     "code16.sharp.dashboard.filters.store": [
@@ -16,8 +21,13 @@ declare module 'ziggy-js' {
     ],
     "code16.sharp.list": [
         {
-            "name": "entityKey",
+            "name": "filterKey",
             "required": true
+        },
+        {
+            "name": "entityKey",
+            "required": true,
+            "binding": "key"
         }
     ],
     "code16.sharp.list.filters.store": [
@@ -27,6 +37,10 @@ declare module 'ziggy-js' {
         }
     ],
     "code16.sharp.single-show": [
+        {
+            "name": "filterKey",
+            "required": true
+        },
         {
             "name": "entityKey",
             "required": true,
@@ -44,6 +58,10 @@ declare module 'ziggy-js' {
         }
     ],
     "code16.sharp.show.show": [
+        {
+            "name": "filterKey",
+            "required": true
+        },
         {
             "name": "parentUri",
             "required": true
@@ -73,6 +91,10 @@ declare module 'ziggy-js' {
         }
     ],
     "code16.sharp.form.create": [
+        {
+            "name": "filterKey",
+            "required": true
+        },
         {
             "name": "parentUri",
             "required": true
@@ -95,6 +117,10 @@ declare module 'ziggy-js' {
         }
     ],
     "code16.sharp.form.edit": [
+        {
+            "name": "filterKey",
+            "required": true
+        },
         {
             "name": "parentUri",
             "required": true
@@ -177,8 +203,13 @@ declare module 'ziggy-js' {
     ],
     "code16.sharp.api.list": [
         {
-            "name": "entityKey",
+            "name": "filterKey",
             "required": true
+        },
+        {
+            "name": "entityKey",
+            "required": true,
+            "binding": "key"
         }
     ],
     "code16.sharp.api.list.filters.store": [
@@ -263,8 +294,13 @@ declare module 'ziggy-js' {
     ],
     "code16.sharp.api.dashboard": [
         {
-            "name": "dashboardKey",
+            "name": "filterKey",
             "required": true
+        },
+        {
+            "name": "dashboardKey",
+            "required": true,
+            "binding": "key"
         }
     ],
     "code16.sharp.api.dashboard.filters.store": [

resources/js/utils/url.ts

@@ -1,9 +1,6 @@
 import { route as routeFn } from 'ziggy-js';
 import { config } from "@/utils/config";
 
-export function getAppendableParentUri() {
-    return location.pathname.replace(new RegExp(`^/${config('sharp.custom_url_segment')}/`), '');
-}
 
 export function isSharpLink(url: string) {
     return (

src/Config/SharpConfigBuilder.php

@@ -44,6 +44,7 @@ class SharpConfigBuilder
                 \Illuminate\Session\Middleware\StartSession::class,
                 \Illuminate\View\Middleware\ShareErrorsFromSession::class,
                 \Illuminate\Foundation\Http\Middleware\VerifyCsrfToken::class,
+                \Code16\Sharp\Http\Middleware\HandleGlobalFilters::class,
                 \Illuminate\Routing\Middleware\SubstituteBindings::class,
             ],
             'web' => [

src/Data/Show/ShowConfigData.php

@@ -13,6 +13,7 @@ final class ShowConfigData extends Data
 {
     public function __construct(
         public string $deleteConfirmationText,
+        public string $formEditUrl,
         public bool $isSingle = false,
         public ?ConfigCommandsData $commands = null,
         public ?string $titleAttribute = null,

src/Filters/GlobalFilters/GlobalFilters.php

@@ -6,16 +6,25 @@
 use Code16\Sharp\Filters\Filter;
 use Code16\Sharp\Filters\GlobalRequiredFilter;
 use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Support\Collection;
 
 final class GlobalFilters implements Arrayable
 {
     use HasFilters;
 
+    public static string $defaultKey = 'root';
+    public static string $valuesUrlSeparator = '~';
+    private ?Collection $globalFilters = null;
+
     public function getFilters(): array
     {
-        return collect(sharp()->config()->get('global_filters'))
-            ->filter(fn (GlobalRequiredFilter $filter) => $filter->authorize())
-            ->all();
+        if ($this->globalFilters === null) {
+            $this->globalFilters = collect(sharp()->config()->get('global_filters'))
+                ->filter(fn (GlobalRequiredFilter $filter) => $filter->authorize())
+                ->values();
+        }
+
+        return $this->globalFilters->all();
     }
 
     public function isEnabled(): bool
@@ -32,15 +41,11 @@ public function toArray(): array
             'filterValues' => [
                 'default' => $this->filterContainer()->getFilterHandlers()
                     ->flatten()
-                    ->mapWithKeys(function (Filter $handler) {
-                        return [$handler->getKey() => $handler->defaultValue()];
-                    })
+                    ->mapWithKeys(fn (Filter $handler) => [$handler->getKey() => $handler->defaultValue()])
                     ->toArray(),
                 'current' => $this->filterContainer()->getFilterHandlers()
                     ->flatten()
-                    ->mapWithKeys(function (Filter $handler) {
-                        return [$handler->getKey() => $handler->currentValue()];
-                    })
+                    ->mapWithKeys(fn (Filter $handler) => [$handler->getKey() => $handler->currentValue()])
                     ->toArray(),
                 'valuated' => [], // not needed here
             ],

src/Filters/GlobalRequiredFilter.php

@@ -4,23 +4,19 @@
 
 abstract class GlobalRequiredFilter extends SelectRequiredFilter
 {
+    private mixed $currentValue = null;
+
     final public function currentValue(): mixed
     {
-        $value = session()->get($this->getSessionKey());
-
-        if ($value === null) {
-            if (($value = $this->defaultValue()) !== null) {
-                session()->put($this->getSessionKey(), $value);
-            }
-        }
-
-        return $value;
+        return $this->currentValue !== null
+            ? $this->currentValue
+            : $this->defaultValue();
     }
 
     final public function setCurrentValue(mixed $value): void
     {
         if ($value === null) {
-            session()->forget($this->getSessionKey());
+            $this->currentValue = null;
 
             return;
         }
@@ -29,12 +25,7 @@ final public function setCurrentValue(mixed $value): void
             ->where('id', $value)
             ->first();
 
-        session()->put($this->getSessionKey(), $formattedValue['id'] ?? null);
-    }
-
-    private function getSessionKey(): string
-    {
-        return '_sharp_retained_global_filter_'.$this->getKey();
+        $this->currentValue = $formattedValue['id'] ?? null;
     }
 
     public function authorize(): bool

src/Filters/SelectFilterTrait.php

@@ -78,9 +78,7 @@ protected function formattedValues(): array
 
         if (! is_array(collect($values)->first())) {
             return collect($values)
-                ->map(function ($label, $id) {
-                    return compact('id', 'label');
-                })
+                ->map(fn ($label, $id) => compact('id', 'label'))
                 ->values()
                 ->all();
         }