Class luya\admin\helpers\Angular
Inheritance | luya\admin\helpers\Angular |
---|---|
Available since version | 1.0.0 |
Source Code | https://github.com/luyadev/luya-module-admin/blob/master/src/helpers/Angular.php |
Helper Method to create angular tags.
The LUYA admin provides some default angular directives which are prefixed with zaa
. In order to create custom
NgRest Plugins sometimes you may want to reuse those. There is also a helper method called directive
which
allows you the quickly generate a Html Tag for directives.
If the method has the suffix array
it means the assigned model will contain an array of values. So
Public Methods
Method | Description | Defined By |
---|---|---|
asyncRequest() | Generates a directive which requies a value from an api where the model is the primary key field of the api. | luya\admin\helpers\Angular |
checkbox() | ZaaCheckbox directive | luya\admin\helpers\Angular |
checkboxArray() | ZaaCheckboxArray directive | luya\admin\helpers\Angular |
date() | ZaaDate directive | luya\admin\helpers\Angular |
datetime() | ZaaDatetime directive | luya\admin\helpers\Angular |
decimal() | ZaaDecimal directive | luya\admin\helpers\Angular |
directive() | Create a Angular Directive tag based on the name. | luya\admin\helpers\Angular |
fileArrayUpload() | ZaaFileArrayUpload directive | luya\admin\helpers\Angular |
fileUpload() | ZaaFileUpload directive | luya\admin\helpers\Angular |
imageArrayUpload() | ZaaImageArrayUpload directive | luya\admin\helpers\Angular |
imageUpload() | ZaaImageUpload directive | luya\admin\helpers\Angular |
listArray() | ZaaListArray directive | luya\admin\helpers\Angular |
number() | ZaaNumber directive | luya\admin\helpers\Angular |
optionsArrayInput() | Ensures the input structure for optional data for selects, radios etc. | luya\admin\helpers\Angular |
optionsFilter() | Filter empty values like null , '' and false but keep 0, as its common to use 0 as default value. |
luya\admin\helpers\Angular |
password() | Passwort | luya\admin\helpers\Angular |
radio() | Radio Input. | luya\admin\helpers\Angular |
readonly() | Generate a read only attribute tag. | luya\admin\helpers\Angular |
replaceFieldFromNgModelContext() | Extract the context attribute name from the ngModel and replace with given $field name. | luya\admin\helpers\Angular |
schedule() | Generate the LUYA admin scheduler tag. | luya\admin\helpers\Angular |
select() | Select directive | luya\admin\helpers\Angular |
sortRelationArray() | Sort Relation Array. | luya\admin\helpers\Angular |
table() | ZaaTable directive | luya\admin\helpers\Angular |
tagArray() | Generate a directive which assignes an array of selected tag ids to the model. | luya\admin\helpers\Angular |
text() | ZaaText directive | luya\admin\helpers\Angular |
textarea() | ZaaTextarea directive | luya\admin\helpers\Angular |
typeCast() | Type Cast values. | luya\admin\helpers\Angular |
variablizeContext() | The given string will be variablized and prefixed with current condition. | luya\admin\helpers\Angular |
Protected Methods
Method | Description | Defined By |
---|---|---|
injector() | Internal method to use to create the angular injector helper method like in angular context of directives.js | luya\admin\helpers\Angular |
Method Details
Generates a directive which requies a value from an api where the model is the primary key field of the api.
Angular code example
zaa-async-value model="theModel" label="Hello world" api="admin/api-admin-users" fields="[foo,bar]" />
public static luya\admin\helpers\AngularObject asyncRequest ( $ngModel, $label, $api, $fields, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$api | string |
The path to the api endpoint like |
$fields | array |
An array with all fiels which should be requested from the api |
$options | array |
public static function asyncRequest($ngModel, $label, $api, $fields, array $options = [])
{
return self::injector(TYpesInterface::TYPE_ASYNC_VALUE, $ngModel, $label, [], ['api' => $api, 'fields' => $fields]);
}
ZaaCheckbox directive
public static luya\admin\helpers\AngularObject checkbox ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function checkbox($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_CHECKBOX, $ngModel, $label, [], $options);
}
ZaaCheckboxArray directive
AngularInput::zaaCheckboxArray($ngModel, $this->alias, ['123' => 'OneTwoTrhee', 'foo' => 'Bar']);
If you like to build your custom angular directive to use two way binding without items data you can use something like this:
Angular::directive('zaa-checkbox-array', $ngModel, ['options' => $this->getServiceName('myDataService')]);
But make sure the service you call returns the data within ['items' => $data].
public static luya\admin\helpers\AngularObject checkboxArray ( $ngModel, $label, $data, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$data | array|string |
If a string is given it will be taken as two-way bind condition, otherwise an array input will be correctly convereted. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content.
|
public static function checkboxArray($ngModel, $label, $data, array $options = [])
{
return self::injector(TypesInterface::TYPE_CHECKBOX_ARRAY, $ngModel, $label, ['items' => is_scalar($data) ? $data : self::optionsArrayInput($data)], $options);
}
ZaaDate directive
public static luya\admin\helpers\AngularObject date ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content.
|
public static function date($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_DATE, $ngModel, $label, [], $options);
}
ZaaDatetime directive
public static luya\admin\helpers\AngularObject datetime ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content.
|
public static function datetime($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_DATETIME, $ngModel, $label, [], $options);
}
ZaaDecimal directive
public static luya\admin\helpers\AngularObject decimal ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function decimal($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_DECIMAL, $ngModel, $label, [], $options);
}
Create a Angular Directive tag based on the name.
Angular::directive('my-input', 'name');
would produce the my input directive tag:
<my-input ng-model="name"></my-input>
public static string directive ( $name, array $options = [] ) | ||
$name | string |
The name for the generated direcitve tag which will be converted from camelcase to id notation. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function directive($name, array $options = [])
{
return Html::tag(Inflector::camel2id($name), null, $options);
}
ZaaFileArrayUpload directive
public static luya\admin\helpers\AngularObject fileArrayUpload ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function fileArrayUpload($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_FILEUPLOAD_ARRAY, $ngModel, $label, [], $options);
}
ZaaFileUpload directive
public static luya\admin\helpers\AngularObject fileUpload ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function fileUpload($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_FILEUPLOAD, $ngModel, $label, [], $options);
}
ZaaImageArrayUpload directive
public static luya\admin\helpers\AngularObject imageArrayUpload ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function imageArrayUpload($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_IMAGEUPLOAD_ARRAY, $ngModel, $label, [], $options);
}
ZaaImageUpload directive
public static luya\admin\helpers\AngularObject imageUpload ( $ngModel, $label, array $options = [], $noFilter = false ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
$noFilter | boolean |
Whether the user can select a filter not, if not the original is taken. |
public static function imageUpload($ngModel, $label, array $options = [], $noFilter = false)
{
return self::injector(TypesInterface::TYPE_IMAGEUPLOAD, $ngModel, $label, ['no_filter' => (int) $noFilter], $options);
}
Internal method to use to create the angular injector helper method like in angular context of directives.js
"dir": "=",
"model": "=",
"options": "=",
"label": "@label",
"grid": "@grid",
"fieldid": "@fieldid",
"fieldname": "@fieldname",
"placeholder": "@placeholder",
"initvalue": "@initvalue"
protected static void injector ( $type, $ngModel, $label, $options = [], array $mergeOptions = [] ) | ||
$type | string | |
$ngModel | string | |
$label | string | |
$options | array |
The options parameter is mostly a data provider for the directive an is depending on the type. |
$mergeOptions | array |
Additonal attributes to be set for the tag $type.
|
protected static function injector($type, $ngModel, $label, $options = [], array $mergeOptions = [])
{
// parse boolean values to integer values is it would not bind the values correctly to the angular directive.
foreach ($mergeOptions as $key => $value) {
if (!is_array($value) && is_bool($value)) {
$mergeOptions[$key] = (int) $value;
}
}
$opt = array_merge($mergeOptions, [
'model' => $ngModel,
'label' => $label,
'options' => empty($options) ? null : $options,
'fieldid' => Inflector::camel2id(Inflector::camelize($ngModel.'-'.$type)),
'fieldname' => Inflector::camel2id(Inflector::camelize($ngModel)),
]);
return new AngularObject([
'type' => $type,
'options' => $opt,
]);
}
ZaaListArray directive
public static luya\admin\helpers\AngularObject listArray ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function listArray($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_LIST_ARRAY, $ngModel, $label, [], $options);
}
ZaaNumber directive
public static luya\admin\helpers\AngularObject number ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function number($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_NUMBER, $ngModel, $label, [], $options);
}
Ensures the input structure for optional data for selects, radios etc.
Following options are possible:
- An array with key => values.
- An array with a nested array ['label' => , 'value' => ] format.
- A string, this can be used when two way data binding should be used instead of array genertion
public static array optionsArrayInput ( $data ) | ||
$data |
public static function optionsArrayInput($data)
{
// seems to be a two way data binind, thefore direct return the string and do not transform.
if (is_scalar($data)) {
return $data;
}
$output = [];
foreach ($data as $value => $label) {
if (is_array($label)) {
if (!isset($label['label']) || !isset($label['value'])) {
throw new InvalidConfigException("The options array data for the given element must contain a label and value key.");
}
$output[] = $label;
} else {
$output[] = ['label' => $label, 'value' => $value];
}
}
return $output;
}
Filter empty values like null
, ''
and false but keep 0, as its common to use 0 as default value.
public static array optionsFilter ( array $array ) | ||
$array | array |
Filter empty values from array, but keep integer values. |
return | array |
An array with filtered values. |
---|
public static function optionsFilter(array $array)
{
return array_filter($array, function ($value) {
if (is_null($value) || $value === '' || $value === false) {
return false;
}
return true;
});
}
Passwort
public static luya\admin\helpers\AngularObject password ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The ng-model attribute which should be used as reference to be bound into the element. |
$label | string |
The label which should be displayed for the given field. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function password($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_PASSWORD, $ngModel, $label, [], $options);
}
Radio Input.
Generate a list of radios where you can select only one element.
Example:
Angular::radio('exportType', 'Format', ['csv' => 'CSV', 'xlss' => 'XLSX'])
public static luya\admin\helpers\AngularObject radio ( $ngModel, $label, array $data, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$data | array|string |
If a string is given it will be taken as two way binding value. An array with data where the array key is what is stored in the model e.g. |
$options | array |
Additonal arguments to create the tag. |
public static function radio($ngModel, $label, array $data, array $options = [])
{
return self::injector(TypesInterface::TYPE_RADIO, $ngModel, $label, is_scalar($data) ? $data : self::optionsArrayInput($data), $options);
}
Generate a read only attribute tag.
public static luya\admin\helpers\AngularObject readonly ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function readonly($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_READONLY, $ngModel, $label, [], $options);
}
Extract the context attribute name from the ngModel and replace with given $field name.
If an empty field value is provided no content will be returned.
public static string replaceFieldFromNgModelContext ( $ngModel, $field, $angularJsVariable = false ) | ||
$ngModel | string |
Context like |
$field | string |
The new field name to replace with the context field name. |
$angularJsVariable | boolean |
Whether the output should be enclosed in curly brackets or not {}} |
return | string |
Returns the string with the name field name like |
---|
public static function replaceFieldFromNgModelContext($ngModel, $field, $angularJsVariable = false)
{
if (empty($field)) {
return;
}
// get all keys
$parts = explode(".", $ngModel);
$key = array_key_last($parts);
// old last $field name
$oldField = $parts[$key];
if (StringHelper::endsWith($oldField, ']')) {
// its an i18n field which has ['en'] suffix, we should extra this and add to $field
if (preg_match('/\[.*\]/', $oldField, $matches) === 1) {
$field .= $matches[0];
}
}
// replace the last key with the new fieldname
$parts[$key] = $field;
$variable = implode(".", $parts);
return $angularJsVariable ? '{{'.$variable.'}}' : $variable;
}
Generate the LUYA admin scheduler tag.
Angular::schedule('data.is_online', 'Online Status', 1, [0 => 'No', 1 => 'Yes'], 'path/to/model', 'is_online');
public static luya\admin\helpers\AngularObject schedule ( $ngModel, $label, $primaryKeyValue, array $values, $modelClass, $attributeName, array $options = [] ) | ||
$ngModel | string |
The angular model to read the data from. |
$label | string | |
$primaryKeyValue | string |
The primary key value like |
$values | array |
An array with values to schedule. |
$modelClass | string |
The full class path of the model implementing NgRestModelInterface. |
$attributeName | string |
The name of the attribute inside the model to change the value. This is commonly the same as $ngModel. |
$options |
public static function schedule($ngModel, $label, $primaryKeyValue, array $values, $modelClass, $attributeName, array $options = [])
{
return new AngularObject([
'type' => 'luya-schedule',
'options' => array_merge([
'value' => $ngModel,
'model-class' => $modelClass,
'title' => $label,
'attribute-name' => $attributeName,
'attribute-values' => Angular::optionsArrayInput($values),
'primary-key-value' => $primaryKeyValue,
], $options)
]);
}
Select directive
return AngularInput::zaaSelect($ngModel, $this->alias, [['value' => 123, 'label' => 123123]]);
public static luya\admin\helpers\AngularObject select ( $ngModel, $label, $data, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$data | array|string |
If a string is given it will be taken as two-way bind condition, otherwise an array input will be correctly convereted. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function select($ngModel, $label, $data, array $options = [])
{
return self::injector(TypesInterface::TYPE_SELECT, $ngModel, $label, is_scalar($data) ? $data : self::optionsArrayInput($data), $options);
}
Sort Relation Array.
Generates a multi selection and sortable list and returns a json array with the selected values.
public static luya\admin\helpers\AngularObject sortRelationArray ( $ngModel, $label, array $sourceData, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$sourceData | array | |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function sortRelationArray($ngModel, $label, array $sourceData, array $options = [])
{
return self::injector(TypesInterface::TYPE_SORT_RELATION_ARRAY, $ngModel, $label, ['sourceData' => static::optionsArrayInput($sourceData)], $options);
}
ZaaTable directive
public static luya\admin\helpers\AngularObject table ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function table($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_TABLE, $ngModel, $label, [], $options);
}
Generate a directive which assignes an array of selected tag ids to the model.
public static luya\admin\helpers\AngularObject tagArray ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function tagArray($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_TAG_ARRAY, $ngModel, $label, [], $options);
}
ZaaText directive
public static luya\admin\helpers\AngularObject text ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content.
|
public static function text($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_TEXT, $ngModel, $label, [], $options);
}
ZaaTextarea directive
public static luya\admin\helpers\AngularObject textarea ( $ngModel, $label, array $options = [] ) | ||
$ngModel | string |
The name of the ng model which should be used for data binding. |
$label | string |
The label to display for the form input. |
$options | array |
An array with optional properties for the tag creation, where key is the property name and value its content. |
public static function textarea($ngModel, $label, array $options = [])
{
return self::injector(TypesInterface::TYPE_TEXTAREA, $ngModel, $label, [], $options);
}
Type Cast values.
This is important as the angularjs admin is required to have integer values for boolean values, since pgsql does return boolean values we have to type cast those value, this is the purpose of this function.
public static mixed typeCast ( $value ) | ||
$value | mixed |
public static function typeCast($value)
{
if (is_bool($value)) {
$value = (int) $value;
}
return $value;
}
The given string will be variablized and prefixed with current condition.
For example when you like to access an attribute you can use the variable name in curly braces. This will ensure the correct angularjs context value will be taken.
For example:
admin/api-admin-user/search?query={firstname}
This will replace {firstname}
by data.create.firstname
or if enabled it will be {{data.create.firstname}}
public static string variablizeContext ( $ngModel, $string, $angularJsVariable ) | ||
$ngModel | string | |
$string | string | |
$angularJsVariable | boolean |
Whether the output should be enclosed in curly brackets or not {}} |
public static function variablizeContext($ngModel, $string, $angularJsVariable)
{
if (!$string) {
return '';
}
preg_match_all('/{(.*?)}/', $string, $matches, PREG_SET_ORDER);
$search = [];
$replace = [];
foreach ($matches as $match) {
$search[] = $match[0];
$replace[] = self::replaceFieldFromNgModelContext($ngModel, $match[1], $angularJsVariable);
}
return str_replace($search, $replace, $string);
}