From 5383c2d4c8c68c7b0a4e3ec7345e15fd8ab47f44 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Tue, 4 Jun 2019 19:56:40 +0200
Subject: [PATCH] [mod] use manifest.json/actions.json args format for the
 config_panel.toml

---
 src/css/style.less                  |  3 +++
 src/js/yunohost/controllers/apps.js |  6 +++++
 src/views/app/app_config-panel.ms   | 38 ++++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index e1496f71..78bccd4b 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -613,6 +613,9 @@ input[type='radio'].nice-radio {
     margin-top: -5px;
 }
 
+.auto-width {
+    width: auto;
+}
 
 .app-card .panel-body {
     padding: 1.5rem;
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index 9a7aafc9..74eaf76a 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -294,6 +294,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);
         });
     });
@@ -430,6 +435,7 @@
             if (args[k].type == 'boolean') {
                 args[k].inputType = 'checkbox';
 
+                console.log(args[k]);
                 // Checked or not ?
                 if (typeof args[k].default !== 'undefined') {
                     if (args[k].default == true) {
diff --git a/src/views/app/app_config-panel.ms b/src/views/app/app_config-panel.ms
index 3d00f64c..011513ee 100644
--- a/src/views/app/app_config-panel.ms
+++ b/src/views/app/app_config-panel.ms
@@ -36,18 +36,48 @@
                         <ul>
                         {{#options}}
                         <div class="form-group">
-                            <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 choices}}
+                                <select id="{{name}}" name="{{name}}" required class="form-control" {{{attributes}}}>
+                                    {{#choices}}<option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/choices}}
+                                </select>
+                                {{else if (eq inputType "checkbox")}}
+                                <input type="{{inputType}}" id="{{name}}" name="{{name}}" class="form-control auto-width" value="{{default}}" placeholder="{{example}}" {{required}} {{{attributes}}}>
+                                {{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>
+                        <!--
+                        <div class="form-group">
+                            <label for="{{name}}" class="col-sm-2 control-label">{{name}}</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}}">
+                                <input type="number" class="form-control" id="{{name}}" name="{{name}}" placeholder="{{placeholder}}">
                                 <span class="help-block">{{ help }}</span>
                             {{else if (eq type "bool")}}
-                            <input type="radio" name="{{id}}" value="true" {{#if value}}checked{{/if}}> yes
-                            <input type="radio" name="{{id}}" value="false"{{#if (eq value false)}}checked{{/if}}> no
+                            <input type="radio" name="{{name}}" value="true" {{#if value}}checked{{/if}}> yes
+                            <input type="radio" name="{{name}}" value="false"{{#if (eq value false)}}checked{{/if}}> no
                             <span class="help-block">{{ help }}</span>
                             {{/if}}
                             </div>
                         </div>
+                        -->
                         {{/options}}
                         </ul></li>
                         </ul>