Personnalisation du pied de page

À partir de NexoPOS 5.3, vous pouvez afficher des composants Vue personnalisés dans le pied de page de n’importe quel objet de paramètres. L’idée est de permettre d’interagir avec le formulaire actuellement rendu. Vous l’utiliserez généralement pour (sans s’y limiter) :

• réinitialiser les paramètres par défaut
• enregistrer les paramètres différemment
• etc.

Exigences

Avant de charger un composant personnalisé dans le pied de page des paramètres, vous devez d’abord injecter ce composant. Lors de la définition de votre composant, le composant des paramètres fournira une propriété « parent » à ce composant afin que vous puissiez accéder au formulaire des paramètres depuis votre composant et, si nécessaire, recharger éventuellement les paramètres (console.log sera votre meilleur ami).

<script type="module">
  nsExtraComponents.myExtraComponent = defineComponent({
      props: [ 'parent' ],
      template: `<ns-button>Hello World</ns-button>`,
      mounted() {
          // this.parent.loadSettingsForm() : Use this to refresh the form.
      }
  });
</script>

Définir la classe de configuration du composant

Si votre module définit des classes de paramètres, nous les utiliserons pour ajouter nos boutons personnalisés. Une classe de paramètres typique ressemblera à ceci :

<?php
namespace Modules\MyModule\Settings;

use App\Services\SettingsPage;
use App\Classes\SettingForm;

class ModuleSettings extends SettingsPage
{
    const IDENTIFIER = 'my-module-settings';
    const AUTOLAOD = true;
  
    public function __construct()
    {
          $this->form   =   SettingForm::form(
              title: __m( 'Your Setting Title', 'MyModule' ),
              description: __m( 'Your module settings description', 'MyModule' ),
              tabs: SettingForm::tabs(
                  SettingForm::tab(
                      label: __m( 'Base Settings', 'MyModule' ),
                      identifier: 'base-settings',
                      fields: SettingForm::fields(
                          FormInput::text(
                              label: __( 'Email' ),
                              name: 'email'
                          )
                      )
                  )
              )
          );
    }
}

Désormais, nous allons ajouter à la section « tab » une nouvelle sous-section « footer », qui prend en charge « extraComponents », lequel définira un tableau de chaînes (qui sont les noms des composants Vue que vous avez définis dans le « nsExtraComponents » ci-dessus). Dans les paramètres ci-dessus, nous avons utilisé « myExtraComponent » comme nom de notre composant Vue ; c’est celui que nous utiliserons.

<?php
namespace Modules\MyModule\Settings;

use App\Services\SettingsPage;
use App\Classes\SettingForm;

class ModuleSettings extends SettingsPage
{
    const IDENTIFIER = 'my-module-settings';
    const AUTOLAOD = true;
  
    public function __construct()
    {
          $this->form   =   SettingForm::form(
              title: __m( 'Your Setting Title', 'MyModule' ),
              description: __m( 'Your module settings description', 'MyModule' ),
              tabs: SettingForm::tabs(
                  SettingForm::tab(
                      label: __m( 'Base Settings', 'MyModule' ),
                      identifier: 'base-settings',
                      footer: SettingForm::tabFooter(
                          extraComponents: [ 'myExtraComponent' ] // <= we define the component here
                      ),
                      fields: SettingForm::fields(
                          FormInput::text(
                              label: __( 'Email' ),
                              name: 'email'
                          )
                      )
                  )
              )
          );
    }
}

Nous devrions avoir une configuration qui ressemble à ceci.