Personalização do Rodapé

A partir do NexoPOS 5.3, você pode renderizar componentes Vue personalizados no rodapé de qualquer objeto de configurações. A ideia é permitir interagir com o formulário atual que está sendo renderizado. Normalmente, você usará isso para (entre outras coisas):

• restaurar configurações padrão
• salvar as configurações de forma diferente
• etc.

Requisitos

Antes de carregar um componente personalizado no rodapé de configurações, você deve injetar esse componente primeiro. Ao definir seu componente, o componente de configurações fornecerá uma propriedade “parent” para esse componente, para que você possa acessar o formulário de configurações a partir do seu componente e, eventualmente, recarregar as configurações, se necessário (o console.log será seu melhor amigo).

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

Definir classe de configuração do componente

Se o seu módulo definir classes de configurações, usaremos isso para adicionar nossos botões personalizados. Uma classe de configurações típica terá esta aparência:

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

Agora, vamos adicionar à seção “tab” uma nova subseção “footer”, que oferece suporte a “extraComponents”, o qual definirá um array de strings (que são os nomes dos componentes Vue que você definiu no nsExtraComponents acima). Nas configurações acima, usamos “myExtraComponent” como o nome do nosso componente Vue; é isso que vamos usar.

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

Devemos ter uma configuração que pareça assim.