2015-05-14 08:44:52 +02:00
|
|
|
# Lemonldap::NG::Manager forms
|
|
|
|
|
|
|
|
This files contains the form used to expose configuration attributes. The form
|
|
|
|
is chosen by looking at the *type* property of the current data.
|
|
|
|
|
2015-12-26 21:08:31 +01:00
|
|
|
This property is defined in `Lemonldap::NG::Manager::Build::Attributes` package.
|
2015-05-14 08:44:52 +02:00
|
|
|
By default, it is set to *text*.
|
|
|
|
|
2015-12-26 21:08:31 +01:00
|
|
|
`Lemonldap::NG::Manager::Build::Attributes` is compiled into JSON/JS files by
|
2015-05-14 08:44:52 +02:00
|
|
|
`jsongenerator.pl`script.
|
|
|
|
|
|
|
|
## 1. Form file architecture
|
|
|
|
|
|
|
|
Form files must be called `<type>.json` where *<type>* is the declared type of
|
|
|
|
configuration property to display.
|
|
|
|
|
|
|
|
Form files must contain only HTML that will be included in the manager DOM
|
|
|
|
*(in `#form` div)*. It **must** consist of two blocks:
|
|
|
|
|
|
|
|
* a `<div class="panel panel-default">` div that contains the form,
|
2016-02-16 07:21:40 +01:00
|
|
|
* a `<script type="text/menu">` script that defines which item to display
|
2015-05-14 08:44:52 +02:00
|
|
|
in context menu.
|
|
|
|
|
|
|
|
Basic example:
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-heading">
|
2015-05-14 08:44:52 +02:00
|
|
|
<h3 class="panel-title">{{translate(currentNode)}}</h3>
|
|
|
|
</div>
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-body">
|
2015-05-14 08:44:52 +02:00
|
|
|
<div class="input-group">
|
2016-01-20 22:23:29 +01:00
|
|
|
<label class="input-group-addon" for="textinput" trspan="value"></label>
|
2015-05-14 08:44:52 +02:00
|
|
|
<input id="textinput" class="form-control" ng-model="currentNode.data"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[{
|
2015-05-14 08:44:52 +02:00
|
|
|
"title": "cancel"
|
2016-02-16 07:21:40 +01:00
|
|
|
}]
|
2015-05-14 08:44:52 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
## 2. Form main div
|
|
|
|
|
|
|
|
Based on bootstrap CSS, the main div part may look like:
|
|
|
|
|
|
|
|
If configuration item name is read-only:
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-heading">
|
2015-05-14 08:44:52 +02:00
|
|
|
<h3 class="panel-title">{{translate(currentNode)}}</h3>
|
|
|
|
</div>
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-body">
|
2015-05-14 08:44:52 +02:00
|
|
|
__ FORM INPUTS __
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
If configuration item name may be modified:
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-heading"> <!-- optional -->
|
2016-01-20 22:23:29 +01:00
|
|
|
<h3 class="panel-title" trspan="OptionalTitle"></h3>
|
2015-05-14 08:44:52 +02:00
|
|
|
</div>
|
2015-07-09 17:38:35 +02:00
|
|
|
<div class="panel-body">
|
2015-05-14 08:44:52 +02:00
|
|
|
__ FORM INPUTS __
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
> Note that keywords to translate must be set in all `languages/*.json` files.
|
|
|
|
|
|
|
|
### 2.1. AngularJS bindings
|
|
|
|
|
|
|
|
Some AngularJS variables are available :
|
|
|
|
|
|
|
|
* `currentNode`: the data subnode corresponding to the selected tree item
|
|
|
|
* `currentScope`: the AngularJS scope corresponding to the selected tree item
|
|
|
|
|
|
|
|
You can simply used them as follow:
|
|
|
|
|
|
|
|
<input class="form-control" ng-model="currentNode.data"/>
|
|
|
|
|
|
|
|
## 3. Script part
|
|
|
|
|
|
|
|
Form div **must** define which item menu to display. It is done via the script part
|
|
|
|
of the file:
|
|
|
|
|
|
|
|
Empty context menu:
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[]
|
2015-05-14 08:44:52 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
Else:
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[
|
2015-05-14 08:44:52 +02:00
|
|
|
{<menu item1>},
|
|
|
|
{<menu item2>},
|
|
|
|
{<menu item3>}
|
|
|
|
]
|
|
|
|
</script>
|
|
|
|
|
|
|
|
### 3.1. Menu item
|
|
|
|
|
|
|
|
#### 3.1.1. Simple case
|
|
|
|
|
|
|
|
Menu item is a javascript object with at least the key `title`.
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[
|
2015-05-14 08:44:52 +02:00
|
|
|
{ "title": "cancel" }
|
|
|
|
]
|
|
|
|
</script>
|
|
|
|
|
|
|
|
In this case, the item will be displayed using the translation of *cancel*. It
|
|
|
|
will launch the function `$scope.cancel()` declared in AngularJS controller
|
|
|
|
*(`js/manager.js` file)* without any argument: functions in the controller can
|
|
|
|
access to controller properties and methods.
|
|
|
|
|
|
|
|
#### 3.1.2. Dropdown item
|
|
|
|
|
|
|
|
You can have sub items simply using `buttons` key which must then be an array
|
|
|
|
of menu items.
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[{
|
2015-05-14 08:44:52 +02:00
|
|
|
"title": "textToTranslate",
|
|
|
|
"buttons": [
|
|
|
|
{ "title": "cancel" },
|
|
|
|
{ "other": "item" }
|
|
|
|
]
|
|
|
|
}]
|
|
|
|
</script>
|
|
|
|
|
|
|
|
#### 3.1.3. Specify function to use
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[{
|
2015-05-14 08:44:52 +02:00
|
|
|
"title": "addVirtualHost",
|
|
|
|
"action": "addVhost"
|
|
|
|
}]
|
|
|
|
</script>
|
|
|
|
|
2015-09-22 14:56:34 +02:00
|
|
|
Same as below except that it will launch `$scope.addVhost()`.
|
2015-05-14 08:44:52 +02:00
|
|
|
|
|
|
|
#### 3.1.4. Custom function
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[{
|
2015-05-14 08:44:52 +02:00
|
|
|
"title": "addVirtualHost",
|
|
|
|
"action": function(currentNode,currentScope){
|
|
|
|
doSomethingWith(currentNode);
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
</script>
|
|
|
|
|
|
|
|
In this case, the item will launch the defined function with two arguments:
|
|
|
|
|
|
|
|
* `currentNode`: the data subnode corresponding to the selected tree item
|
|
|
|
* `currentScope`: the AngularJS scope corresponding to the selected tree item
|
|
|
|
|
|
|
|
##### Tips
|
|
|
|
|
|
|
|
You can access to the parent using this:
|
|
|
|
|
|
|
|
* `currentScope.$parentNodeScope` for the parent scope
|
|
|
|
* `currentScope.$parentNodeScope.$modelValue` for the parent node
|
|
|
|
|
2015-07-13 16:49:39 +02:00
|
|
|
#### 3.1.5 Icons
|
|
|
|
|
2016-02-16 07:21:40 +01:00
|
|
|
<script type="text/menu">
|
|
|
|
[{
|
2015-07-13 16:49:39 +02:00
|
|
|
"title": "addVirtualHost",
|
|
|
|
"action": "addVhost",
|
|
|
|
"icon": "plus-sign",
|
|
|
|
}]
|
|
|
|
</script>
|
|
|
|
|
|
|
|
The field `icon` can be set to define the Bootstrap glyphicon to use.
|
|
|
|
|
2015-05-14 08:44:52 +02:00
|
|
|
## 4. Modal window
|
|
|
|
|
|
|
|
You can use a modal window to display a choice (look at forms/portalSkin.html
|
|
|
|
for a complete example):
|
|
|
|
|
|
|
|
<button class="btn btn-info" ng-click="showModal('portalSkinChoice.html')">
|
|
|
|
|
|
|
|
A modal window will be displayed using `portalSkinChoice.html` template. This
|
|
|
|
template must be declared in the file:
|
|
|
|
|
|
|
|
<script type="text/ng-template" id="portalSkinChoice.html">
|
|
|
|
<div class="modal-header">
|
2016-01-20 22:23:29 +01:00
|
|
|
<h3 class="modal-title" trspan="chooseSkin"></h3>
|
2015-05-14 08:44:52 +02:00
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<div class="btn-group">
|
|
|
|
<button class="btn" ng-repeat="b in currentNode.select" ng-click="ok(currentNode.data=b.k)">
|
|
|
|
{{b.v}}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button class="btn btn-primary" ng-click="ok()" trspan="ok"></button>
|
|
|
|
<button class="btn btn-warning" ng-click="cancel()" trspan="cancel"></button>
|
|
|
|
</div>
|
|
|
|
</script>
|
|
|
|
|