Laravel Nova:Přidání vlastních tlačítek do panelů nástrojů zdrojů

Pokud jste viděli problém 786 o vydáních laravel/nova na Github nebo jste se pokusili přidat vlastní tlačítka do zdrojů v Laravel Nova, pravděpodobně jste frustrovaní. Strávil jsem celý den, kdy se to snažím zjistit. Ale je to mnohem jednodušší, než si myslíte!

Laravel Nova je poháněn Vue.JS, velmi výkonným mikrorámcem JS. Každý prostředek má vlastní komponentu a tato komponenta má svůj vlastní rozsah. To nám umožňuje přepsat vestavěné komponenty Nova a přidat vlastní tlačítka.

Začněme vytvořením nového nástroje Nova Resource Tool:

php artisan nova:resource-tool 0x15f/custom-resource-toolbar

Řekněte yes na všechny výzvy...

Nyní, když jste vytvořili svůj zdrojový nástroj, přejděte na nova-components/custom-resource-toolbar/resources/js adresář otevřít tool.js ve svém oblíbeném editoru JS a vložte následující.

Nova.booting((Vue, router) => {
    Vue.component('custom-detail-toolbar', require('./components/CustomDetailToolbar'));
    Vue.component('quotes-detail-toolbar', require('./components/QuotesDetailToolbar'));
})

Přejděte do components adresář a odstraňte Tool.vue . Nyní vytvořte dva soubory, jeden s názvem CustomDetailToolbar.vue druhý s názvem QuotesDetailToolbar.vue . Do CustomDetailToolbar.vue vložte následující :

<template>
    <div class="flex w-full justify-end items-center mx-3">
        <component v-if="hasComponent" :is="component" />
    </div>
</template>

<script>
    export default {
        props: ['resourceName', 'resourceId'],
        computed: {
            component(){
                return this.resourceName + '-detail-toolbar';
            },
            hasComponent()
            {
                return this.component in this.$options.components;
            }    
        }
    }
</script>

A vložte následující do QuotesDetailToolbar.vue :

<template>
    <div>
        <div class="flex w-full justify-end items-center">
           <a
                class="btn btn-default btn-icon btn-white"
                :href="'/nova-vendor/custom-resource-toolbar/export-quote/' + this.$parent.resourceId"
                style="background-color: var(--primary); color: white;">
                Export as PDF
             </a>
        </div>
    </div>
</template> 

<script>
    export default {
        props: ['resourceName', 'resourceId', 'field'],
        mounted() {
            var elements = document.getElementById('nova').querySelectorAll('h4');
            [].forEach.call(elements, function(element) {
                if(element.innerHTML === 'Custom Detail Toolbar') {
                    element.parentNode.remove();
                }
            });
        }
    }
</script>

Nyní můžete vytvořit svůj Resource Tool pomocí npm run watch , přidejte jej do svých zdrojů a otevřete CustomResourceToolbar.php a změňte název komponenty na custom-detail-toolbar . Níže vysvětlím, co jsme udělali.

V tool.js zaregistrovali jsme dvě nové komponenty custom-detail-toolbar a quotes-detail-toolbar , custom-detail-toolbar používá Nova k načtení jakýchkoli součástí, které by měly být zobrazeny na tomto panelu nástrojů. Nova poté hledá panel nástrojů zdroje. Komponentu panelu nástrojů zdrojů můžete definovat registrací komponenty s názvem v množném čísle zdrojů následovaným -detail-toolbar . V rámci této komponenty můžete přidat libovolný CSS/JS, který by měl být umístěn na liště.

Pokud si všimnete, mám mounted funkce v mé komponentě s následujícím kódem:

mounted() {
    var elements = document.getElementById('nova').querySelectorAll('h4');
    [].forEach.call(elements, function(element) {
        if(element.innerHTML === 'Custom Detail Toolbar') {
            element.parentNode.remove();
        }
    });
}

Nástroj zdrojů má obvykle panel na stránce podrobností o zdroji. Tato funkce se spustí, když je náš komponent namontován, aby se odstranil panel, který nova přidává, aby vaše stránka vypadala čistě.

Veškerý kód použitý v tomto tutoriálu najdete na github.

Poznámka: Rychle jsem napsal tento článek, později to uklidím.