Ajouter des boutons d’en-tête

Sur chaque instance de table CRUD, vous pouvez injecter des boutons d’en-tête. Ces boutons d’en-tête sont des composants Vue 3 qui fournissent des fonctionnalités personnalisées à la table CRUD actuelle. Vous les utiliserez pour effectuer des requêtes asynchrones sur les entrées sélectionnées ou davantage.

Voici comment vous définirez vos boutons.

<?php
namespace Modules\YourModule\Crud\YourCrud;

use App\Services\CrudService;

class YourCrud extends CrudService
{
    // ...
    
    public function getHeaderButtons(): array
    {
        return [ 'CustomHeaderButtonComponent' ];
    }
    
    // ...
}

Vous devez définir une méthode « getHeaderButtons » sur votre composant CRUD qui renverra un tableau de chaînes. Ces chaînes correspondent à des propriétés définies sur nsExtraComponents, une variable globale qui contient tous les composants Vue personnalisés définis et fournis par NexoPOS ou par des modules personnalisés.

Une fois injectés, les composants seront responsables du rendu du bouton lui-même ainsi que de toute la logique qui le sous-tend. En supposant ce qui est défini ci-dessus, voici comment nous allons créer notre composant de bouton :

@verbatim
<script type="text/javascript">
    document.addEventListener( 'DOMContentLoaded', () => {
        nsExtraComponents.CustomHeaderButtonComponent   =   defineComponent({
            template  : `<ns-button @click="increment">Custom Button {{ count }}</ns-button>`,
            data() {
            return {
                count: 0
            }
            },
            mounted() {
            console.log( 'the component is mounted' )
            },
            methods: {
                increment(){
                    this.count++;
                }
            }
        });
    });
</script>
@endverbatim

Cela produira la sortie suivante.

Étend les autres boutons d’en-tête CRUD

Vous pouvez également injecter un bouton d’en-tête personnalisé sur d’autres tables CRUD. Il peut s’agir d’un CRUD défini par NexoPOS ou par un autre module. Dans votre ServiceProvider de module, vous injecterez d’abord le bouton de votre module client.

<?php
namespace Modules\YourModule\Providers;

use App\Hook\Service;
use App\Providers\ServiceProvider as CoreServiceProvider;
use App\Crud\ProductCrud;

class ServiceProvider extends CoreServiceProvider
{
    public function register()
    {
        Hook::addFilter( ProductCrud::method( 'getHeaderButtons' ), function( $buttons ) {
            $buttons[]  = 'YourCustomComponentVariableName';
            return $buttons;
        });
    }
}

Ensuite, vous injecterez une vue dans le pied de page du tableau CRUD, comme ceci :

<?php
namespace Modules\YourModule\Providers;

use App\Hook\Service;
use App\Providers\ServiceProvider as CoreServiceProvider;
use App\Crud\ProductCrud;
use App\Classes\Output;

class ServiceProvider extends CoreServiceProvider
{
    public function register()
    {
        Hook::addAction( ProductCrud::method( 'getHeaderButtons' ), function( $buttons ) {
            $buttons[]  = 'YourCustomComponentVariableName';
            return $buttons;
        });
        
        Hook::addAction( ProductCrud::method( 'getTableFooter' ), fn( Output $output ) => $output->addView( 'YourModule::footer' ) );
    }
}

La fonction inline utilisée comme rappel pour l’action « ProductCrud::method( 'getTableFooter' ) » chargera une vue « footer.blade.php » définie dans le répertoire « Resources » au sein du module « YourModule ».