Personalización del pie de página

A partir de NexoPOS 5.3, puedes renderizar componentes Vue personalizados en el pie de cualquier objeto de configuración. La idea es proporcionar una forma de interactuar con el formulario actual que se está renderizando. Normalmente lo usarás para (entre otras cosas):

• restablecer la configuración predeterminada
• guardar la configuración de otra manera
• etc.

Requisitos

Antes de cargar un componente personalizado en el pie de página de la configuración, debes inyectar ese componente primero. Al definir tu componente, el componente de configuración proporcionará una propiedad «parent» a ese componente para que puedas acceder al formulario de configuración desde tu componente y, si es necesario, recargar la configuración (console.log será tu mejor aliado).

<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 clase de configuración del componente

Si tu módulo define clases de configuración, la usaremos para agregar nuestros botones personalizados. Una clase de configuración típica se vería así:

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

Ahora, agregaremos a la sección «tab» una nueva subsección «footer» que admite «extraComponents», el cual definirá un arreglo de cadenas (que son los nombres de los componentes Vue que definiste en «nsExtraComponents» arriba). En la configuración anterior, usamos «myExtraComponent» como el nombre de nuestro componente Vue; eso es lo que usaremos.

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

Deberíamos tener una configuración que se vea así.