Fußzeilenanpassung

Ab NexoPOS 5.3 können Sie benutzerdefinierte Vue-Komponenten im Footer eines beliebigen Settings-Objekts rendern. Die Idee ist, eine Möglichkeit zu schaffen, mit dem aktuell gerenderten Formular zu interagieren. Typischerweise nutzen Sie das dafür (unter anderem):

• Standardeinstellungen zurücksetzen
• Einstellungen anders speichern
• usw.

Anforderungen

Bevor Sie eine benutzerdefinierte Komponente im Footer der Einstellungen laden, müssen Sie diese Komponente zuerst einfügen. Bei der Definition Ihrer Komponente stellt die Settings-Komponente dieser Komponente eine „parent“-Eigenschaft bereit, damit Sie auf das Einstellungsformular aus Ihrer Komponente zugreifen und die Einstellungen bei Bedarf schließlich neu laden können (console.log wird Ihr bester Freund sein).

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

Komponente auf der Einstellungs-Klasse definieren

Wenn Ihr Modul Settings-Klassen definiert, verwenden wir diese, um unsere benutzerdefinierten Schaltflächen hinzuzufügen. Eine typische Settings-Klasse sieht etwa so aus:

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

Nun fügen wir im Abschnitt „tab“ eine neue Untersektion „footer“ hinzu, die „extraComponents“ unterstützt. Dabei wird ein Array von Strings definiert (das sind die Namen der Vue-Komponenten, die Sie oben im „nsExtraComponents“-Bereich definiert haben). In den obigen Einstellungen haben wir „myExtraComponent“ als Namen unserer Vue-Komponente verwendet; genau das werden wir verwenden.

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

Wir sollten eine Einstellung haben, die so aussieht.