Personalizzazione del piè di pagina

A partir de NexoPOS 5.3, puoi eseguire il rendering di componenti Vue personalizzati nel footer di qualsiasi oggetto di impostazioni. L’idea è consentire di interagire con il modulo corrente che viene visualizzato. In genere lo userai per (non solo):

• ripristina le impostazioni predefinite
• Salva le impostazioni in modo diverso
• ecc.

Requisiti

Prima di caricare un componente personalizzato nel footer delle impostazioni, devi prima iniettare quel componente. Durante la definizione del tuo componente, il componente delle impostazioni fornirà una proprietà “parent” a quel componente, così potrai accedere al form delle impostazioni dal tuo componente e, se necessario, ricaricare infine le impostazioni (console.log sarà il tuo migliore amico).

<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>

Definisci la classe di impostazioni del componente

Se il tuo modulo definisce classi di impostazioni, le useremo per aggiungere i nostri pulsanti personalizzati. Una classe di impostazioni tipica sarà simile a questa:

<?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'
                          )
                      )
                  )
              )
          );
    }
}

Ora, aggiungeremo alla sezione "tab" una nuova sottosezione "footer" che supporta "extraComponents", il quale definirà un array di stringhe (che sono i nomi dei componenti Vue che hai definito in precedenza in nsExtraComponents). Nelle impostazioni di cui sopra, abbiamo usato "myExtraComponent" come nome del nostro componente Vue; è quello che useremo.

<?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'
                          )
                      )
                  )
              )
          );
    }
}

Dovremmo avere un’impostazione che assomigli a questa.