Komponenten Laraknife

Links

• Laraknife
• Kochbuch Laraknife

Zielsetzung

Hier werden die vordefinierten Komponenten beschrieben. Komponenten sind HTML-ähnliche Elemente, die in Views verwendet werden können.

Formularfelder

Panels (Gruppierungen von Feldern)

Für Modul Create (Erzeugen)

<x-laraknife.panels.create title="{{ $title }}">
...
</x-laraknife.panels.create>

Parameter:

• "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul edit (Ändern)

<x-laraknife.panels.edit title="{{ $title }}">
... 
</x-laraknife.panels.edit/>

Parameter:

• "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul Index (Übersicht)

<x-laraknife.panels.index title="{{ $title }}">
... 
</x-laraknife.panels.index>

Parameter:

• "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul Show (Anzeigen/Löschen)

<x-laraknife.panels.show title="{{ $title }}">
... 
</x-laraknife.panels.show>

Parameter:

• "title": Dieser Titel wird in als Überschrift angezeigt.

Filter-Panel

Dieses Panel wird normalerweise in Modul Index (Übersicht) verwendet.

<x-laraknife.panels.filter legend="{{ $l }}"> 
... 
</x-laraknife.panels.filter>

Parameter:

• "legend": Dieser Text wird in einer Box am oberen Rand eingeblendet

Eingabefelder

Gemeinsame Attribute

• "position": Werte: "alone" (alleine in der Formulargitterzelle), "first": erstes Feld "last": letztes Feld, "": weder erstes noch letztes Feld in der Zelle.
  • Wenn in einer Zelle "first" verwendet wird, muss unbedingt ein Element mit "last" folgen, evt. mit <laraknife.setposition position="last" />
• "id": das ID-Attribut des HTML-Feldes
• "name": das Name-Attribut des HTML-Feldes
• "label": Wenn vorhanden, wird vor dem Feld dieser Text als Textvorspann angezeigt
• "width1": Breite der Spalte des Vorspanns: (0..11). Das Elternelement ist immer 12 Einheiten breit.
• "width2": Breite des Eingabefeldes (1..12)
• "attribute": Zusätzliche Attribute, z.B. "readonly" oder "disabled"

Es gibt folgende Eingabefelder in Formularen:

Einzeiliges Textfeld

<x-laraknife.forms.string position="first" name="id" label="Id" value="{{ $context->model->id }}" />

Attribute:

• "value": Der aktuelle Wert des Textfeldes.
• "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.

Mehrzeiliger Text

<x-laraknife.forms.text  name="id" label="Id" value="{{ $context->model->id }}" /> 

Attribute:

• "value": Der aktuelle Wert des Textfeldes.
• "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.
• "rows": Anzahl Zeilen des Eingabefeldes beim Aufruf (kann mit der Maus vergrößert werden).

Passwort

Der eingegebene Text wird nur als mit Sternchen angezeigt.

<x-laraknife.forms.password  name="password" label="Password" value="{{ $context->model->id }}" />

Attribute:

• "value": Der aktuelle Wert des Textfeldes.
• "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.

Auswahlbox (Combobox)

<x-laraknife.forms.combobox name="role" label="Role" :options="$roleOptions" class="lkn-autoupdate" />

Attribute:

• ":options": Hier wird eine Variable übergeben, die die Listenelemente der Auswahl enthält.
• Wird z.B. so erzeugt: $optionsCategory = SProperty::optionsByScope('category', $fields['category'], 'all');
• Weiteres Beispiel: $optionsUser = DbHelper::comboboxDataOfTable('users', 'name', 'id', $fields['user']);

Position setzen

Wenn kein Feld benutzt werden kann, um "position" zu setzen, dann schließt dieses Element die Zelle:

<x-laraknife.layout.set-position position="last" />

Beispiel: Es soll ein Button am Ende einer Zeile stehen (Buttons haben kein Attribut "position")

Leere Zelle

<x-laraknife.layout.col-empty width="3" />

Attribut:

• "width": Breite: 1..12

Leere Zeile

<x-laraknife.layout.row-empty />

Buttons

Allgemeiner Button

<x-laraknife.buttons.button name="btnAssign" label="{{ __('Assign Roles')}}" width1="0" width2="6"  />
<x-laraknife.buttons.button-position position="last" name="btnLogin" label="{{ __('Login') }}" />

Vordefinierte Buttons

<x-laraknife.buttons.btn-cancel width2="3" />
<x-laraknife.buttons.delete width2="3" />
<x-laraknife.buttons.new width2="3" />
<x-laraknife.buttons.search width2="3" />
<x-laraknife.button.store width2="3" />
<!-- definiert unter anderem den Button, der von JS-Scripts verwendet wird.
<x-laraknife.forms.hidden-elements />

Icons

Bootstrap bietet ca. 1000 Icons an, die mit UTF-Zeichen realisiert werden.

Eine Übersicht mit Filterfunktion siehe https://icons.getbootstrap.com/

Von dort muss der Klassenname extrahiert werden, der dann das Icon spezifiziert.

Icon im Fließext

Das funktioniert ohne spezielle Komponente:

<i class="bi bi-trash"></i>

Icons in der Übersichtstabelle (module-index)

In der Tabelle können der Bleistift ("Ändern") und der Papierkorb ("Löschen") eingebunden werden:

<td><x-laraknife.icons.change-record module="sproperty" no="{{ $sproperty->id }}" /></td>
...
<td><x-laraknife.icons.delete-record module="sproperty" key="{{ $sproperty->id }}" /></td>

• Diese Icons bilden mittels Javascript einen Button nach, der die Identifikation (Kombination von Modulnamen und Nummer) im verborgenen Feld "_lknAction" zurückliefert.
• Die Auswertung übernimmt die Routine function ViewHelper::numberOfButton(array $fields, string $name): ?int.

if (($no = ViewHelper::numberOfButton($fields, 'insert')) != null){
  log($no);
}

Icon mit Link-Funktion

Diese Icons rufen beim Anklicken einen Link auf.

<x-laraknife.icons.icon-as-link icon="bi bi-trash" link="{{ $data->link }}" width1="0" width2="2"/>

• icon: Klassenname laut https://icons.getbootstrap.com/
• header: Wird über dem Icon ausgegeben
• footer: Wird unter dem Icon ausgegeben
• link: Dieser Link wird beim Anklicken aufgerufen

Aktionsicons

Diese Icons wirken wie Buttons. Das ist mit Javascript realisiert.

Komponente:

<x-laraknife.actions.action name="insert" no="{{ $menuitem->id }}" icon="bi bi-box-arrow-in-up" />

Vordefinierte Aktionsicons:

• x-laraknife.actions.delete (mit Papierkorb)
• x-laraknife.actions.up (Pfeil nach oben)
• x-laraknife.actions.down (Pfeil nach unten)

• Diese Icons bilden mittels Javascript einen Button nach, der die Identifikation (Kombination von Modulnamen und Nummer) im verborgenen Feld "_lknAction" zurückliefert.
• Die Auswertung übernimmt die Routine function ViewHelper::numberOfButton(array $fields, string $name): ?int.

if (($no = ViewHelper::numberOfButton($fields, 'delete')) != null){
  log($no);
}