Merge pull request #251 from YunoHost/config-panel-ynh-arguments

Config panel ynh arguments

src/css/style.less

@@ -633,6 +633,17 @@ input[type='radio'].nice-radio {
     margin-top: -5px;
 }
 
+.auto-width {
+    width: auto;
+}
+
+.input-hidden {
+    display: none;
+}
+
+.alert-debug {
+    background-color: white;
+}
 
 .app-card .panel-body {
     padding: 1.5rem;

src/js/yunohost/controllers/apps.js

@@ -272,6 +272,11 @@
     // Get app config panel
     app.get('#/apps/:app/config-panel', function (c) {
         c.api('/apps/'+c.params['app']+'/config-panel', function(data) {
+            $.each(data.config_panel.panel, function(_, panel) {
+                $.each(panel.sections, function(_, section) {
+                    formatYunoHostStyleArguments(section.options, c.params);
+                });
+            });
             c.view('app/app_config-panel', data);
         });
     });
@@ -318,7 +323,7 @@
             args[k].inputType = 'text';
             args[k].isPassword = false;
             args[k].isDisplayText = false;
-            args[k].required = (typeof v.optional !== 'undefined' && v.optional == "true") ? '' : 'required';
+            args[k].required = (typeof v.optional !== 'undefined' && (v.optional == "true" || v.optional == true)) ? '' : 'required';
             args[k].attributes = "";
             args[k].helpText = "";
             args[k].helpLink = "";

src/js/yunohost/filters.js

@@ -30,6 +30,8 @@
     app.before(/apps\/install\//, prefetchUsers);
     app.before(/apps\/\w+\/actions/, prefetchUsers);
     app.before(/apps\/\w+\/actions/, prefetchDomains);
+    app.before(/apps\/\w+\/config-panel/, prefetchUsers);
+    app.before(/apps\/\w+\/config-panel/, prefetchDomains);
 
 
     app.before({except: {path: ['#/logout', '#/login', '#/postinstall', '#/postinstall/domain', '#/postinstall/password']}}, function (req) {

src/views/app/app_config-panel.ms

@@ -16,6 +16,7 @@
 {{#config_panel}}
 <h2>{{../app_name}} configuration panel</h2>
 <hr>
+<form class="form-horizontal" action="#/apps/{{../app_id}}/config" method="POST">
 {{#panel}}
     <div class="panel panel-default">
         <div class="panel-heading" role="tab" id="heading-{{ @index }}">
@@ -28,40 +29,51 @@
         </div>
         <div id="collapse-{{ @index }}" class="panel-collapse collapse {{#if (eq @index 0)}}in{{/if}}" role="tabpanel" aria-labelledby="heading-{{ @index }}">
             <div class="panel-body">
-            <form class="form-horizontal" action="#/apps/{{../../app_id}}/config" method="POST">
                 {{#sections}}
                 <div class="panel panel-default">
                     <div class="panel-heading"><h3 class="panel-title">{{name}} <small>{{help}}</small></h3></div>
                     <div class="panel-body">
-                        <ul>
                         {{#options}}
-                        <div class="form-group">
+                        <div class="form-group input-{{inputType}}">
-                            <label for="{{id}}" class="col-sm-2 control-label">{{name}}</label>
+                            <label for="{{name}}" class="col-sm-2 control-label">{{label}}</label>
+
                             <div class="col-sm-10">
-                            {{#if (in type "number" "text" "password" "color" "date" "datetime-local" "email" "month number" "range" "search" "tel" "time" "url" "week")}}
+
-                                <input type="number" class="form-control" id="{{id}}" name="{{id}}" placeholder="{{placeholder}}">
+                                {{#if choices}}
-                                <span class="help-block">{{ help }}</span>
+                                <select id="{{name}}" name="{{name}}" required class="form-control" {{{attributes}}}>
-                            {{else if (eq type "bool")}}
+                                    {{#choices}}<option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/choices}}
-                            <input type="radio" name="{{id}}" value="true" {{#if value}}checked{{/if}}> yes
+                                </select>
-                            <input type="radio" name="{{id}}" value="false"{{#if (eq value false)}}checked{{/if}}> no
+                                {{else if (eq inputType "checkbox")}}
-                            <span class="help-block">{{ help }}</span>
+                                <input type="{{inputType}}" id="{{name}}" name="{{name}}" class="form-control auto-width" value="{{default}}" placeholder="{{example}}" {{required}} {{{attributes}}}>
-                            {{/if}}
+                                {{else}}
+                                <input type="{{inputType}}" id="{{name}}" name="{{name}}" class="form-control" value="{{default}}" placeholder="{{example}}" {{required}} {{{attributes}}}>
+                                {{/if}}
+
+                                {{#if helpLink}}
+                                <span class="help-block help-block--link">{{{helpLink}}}</span>
+                                {{/if}}
+
+                                {{#if example}}
+                                <span class="help-block help-block--example">{{t 'form_input_example' example}}</span>
+                                {{/if}}
+
+                                {{#if helpText}}
+                                <span class="help-block">{{{helpText}}}</span>
+                                {{/if}}
                             </div>
                         </div>
                         {{/options}}
-                        </ul></li>
-                        </ul>
                     </div>
                 </div>
                 {{/sections}}
 
-                <br>
-                <div><button class="btn btn-primary" type="submit">Save</button></div>
-            </form>
             </div>
         </div>
     </div>
 {{/panel}}
+<br>
+<div><button class="btn btn-primary" type="submit">Save</button></div>
+</form>
 {{/config_panel}}
 </div>