Reload button to force a polling event

[internetbug256]

Hello. I wonder why Nova does not have a way to allow to refresh the contents of a view, without having to reload the whole page.
So far I found the polling on/off feature, which is good, but in my case I want to solve the case where an impatient user (not me! of course...) keep reloading the page until he sees a record marked as completed, or any action performed by another user impacting my view.

Any suggestions?
Thanks in advance

[crynobone]

You could create a custom shortcut which will trigger refresh-resources event.

Nova.addShortcut('r', () => Nova.$emit('refresh-resources'))

[davidhemphill]

Right now Lenses do not listen to the refresh-resources event. This could be added in a patch release.

[internetbug256]

That's a useful shortcut!

I added it as a button in the nav bar too

<div class="mr-2 cursor-pointer">
    <svg onclick="Nova.$emit('refresh-resources')" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
    </svg>
</div>

Where exactly are you adding this into Nova's blades?
Sorry for the newbie question. I didn't touch the Nova interface too much.

[vesper8]

in resources/views/vendor/nova/layout.blade.php

You may have to publish those views first for customization.

Adding it here:

            <div class="content">
                <div class="flex items-center relative shadow h-header bg-white z-20 px-view">
                    <a v-if="@json(\Laravel\Nova\Nova::name() !== null)" href="{{ \Illuminate\Support\Facades\Config::get('nova.url') }}" class="no-underline dim font-bold text-90 mr-6">
                        {{ \Laravel\Nova\Nova::name() }}
                    </a>

                    @if (count(\Laravel\Nova\Nova::globallySearchableResources(request())) > 0)
                        <global-search dusk="global-search-component"></global-search>
                    @endif

                    <div class="ml-auto flex flex-row items-center">
                        <div class="mr-2 cursor-pointer">
                            <svg onclick="Nova.$emit('refresh-resources')" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                        </div>

[internetbug256]

Great! It works
Now, what about showing it in a better place, like in the attached image?
@davidhemphill: any plans to add this to a future release

?

[keyzzrivas]

⚠️ I tried this solution in Laravel Nova v^4.19, I'm not sure if it will work in older or later versions.

Create a mixin file:
public\js\mixin.js

const mixin = {
    mounted() {
        this.$nextTick(() => {
            if(this.$options.name != 'ResourceTableHeader') {
                return;
            }

            let resName = Nova.$router.page.props.resourceName
            let wrapper = document.querySelector(`div[dusk="${resName}-index-component"]`)
            let parent  = wrapper?.querySelector('[dusk="filter-selector"]')?.parentElement

            if(!parent || parent.querySelector('[dusk="refresh-button"]')) {
                return
            }

            var div = document.createElement('div')
            div.className = 'flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded'
            div.setAttribute('dusk', 'refresh-button')
            div.innerHTML =
                `<button title="Recargar" onclick="Nova.$emit('refresh-resources')" class="group rounded active:outline-none active:ring focus:outline-none focus:ring focus:ring-primary-200 dark:focus:ring-gray-600 px-2" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 transition ease-in-out group-hover:rotate-180">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                    </svg>
                </button>`

            parent.prepend(div)
        })
    }
}

Nova.app.mixin(mixin)

Update the NovaServiceProvider file:
app\Providers\NovaServiceProvider.php

public function boot()
{
    ....

    Nova::serving(function () {
        Nova::script('mixin', asset('js/mixin.js')); // ⬅️ Add this line
    });

    ...