From f38190d374c83b0aa60f7b5151ac520d38da3404 Mon Sep 17 00:00:00 2001
From: Olivier Auverlot <oauv@duck.com>
Date: Mon, 4 Mar 2024 07:11:30 +0100
Subject: [PATCH 1/2] A unique identifier for the input, which can then be used
 to select and manage the field with Javascript code.

---
 .../sqlpage/migrations/01_documentation.sql              | 3 ++-
 sqlpage/templates/form.handlebars                        | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index a3876da0..5ce9d6b9 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -237,7 +237,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('class', 'A CSS class to apply to the form element.', 'TEXT', FALSE, TRUE),
     ('prefix_icon','Icon to display on the left side of the input field, on the same line.','ICON',FALSE,TRUE),
     ('prefix','Text to display on the left side of the input field, on the same line.','TEXT',FALSE,TRUE),
-    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE)
+    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE),
+    ('id','A unique identifier for the input, which can then be used to select and manage the field with Javascript code. Usefull for advanced using as setting client side event listeners, interactive control of input field (disabled, visibility, read only, e.g.) and AJAX requests.','TEXT',FALSE,TRUE)
 ) x;
 INSERT INTO example(component, description, properties) VALUES
     (
diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars
index 74db9fd9..db1fcdf5 100644
--- a/sqlpage/templates/form.handlebars
+++ b/sqlpage/templates/form.handlebars
@@ -16,7 +16,7 @@
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
                     <label class="form-selectgroup-item flex-fill">
-                        <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
+                        <input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                         <div class="form-selectgroup-label d-flex align-items-center p-3">
                             <div class="me-3">
                                 <span class="form-selectgroup-check"></span>
@@ -35,7 +35,7 @@
                 </div>
             {{else}}
             {{~#if (eq type "hidden")}}
-                <input type="hidden" name="{{name}}" value="{{value}}">
+                <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
             {{else}}
                 <label class="form-label mb-2 col-md-{{default width 12}}">
                     {{default label name}}
@@ -48,7 +48,8 @@
                             class="form-control"
                             placeholder="{{placeholder}}"
                             rows="{{default rows 3}}"
-                            {{#if value}}value="{{value}}" {{/if~}}
+                            {{#if id}}id="{{id}}" {{/if~}}
+                            {{~#if value}}value="{{value}}" {{/if~}}
                             {{~#if minlength}}minlength="{{minlength}}" {{/if~}}
                             {{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
                             {{~#if required}}required="required" {{/if~}}
@@ -58,6 +59,7 @@
                         </textarea>
                     {{else}}{{#if (eq type 'select')}}
                         <select name="{{name}}" class="form-select"
+                        {{~#if id}} id="{{id}}" {{/if~}}
                         {{~#if required}} required="required" {{/if~}}
                         {{~#if autofocus}} autofocus {{/if~}}
                         {{~#if multiple}} multiple {{/if~}}
@@ -71,6 +73,7 @@
                             {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
                             {{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
                             <input name="{{name}}" class="form-control {{class}}" 
+                                {{~#if id}} id="{{id}}" {{/if~}}
                                 {{~#if type}} type="{{type}}" {{/if~}}
                                 {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                                 {{~#if value}} value="{{value}}" {{/if~}}

From 14663f7d3527a0b065205eed87bc52fec25cc5a9 Mon Sep 17 00:00:00 2001
From: Olivier Auverlot <oauv@duck.com>
Date: Mon, 4 Mar 2024 08:06:19 +0100
Subject: [PATCH 2/2] A debug component that displays a value and his datatype

---
 .../sqlpage/migrations/36_probe.sql           | 54 +++++++++++++++++++
 sqlpage/templates/probe.handlebars            |  1 +
 2 files changed, 55 insertions(+)
 create mode 100644 examples/official-site/sqlpage/migrations/36_probe.sql
 create mode 100644 sqlpage/templates/probe.handlebars

diff --git a/examples/official-site/sqlpage/migrations/36_probe.sql b/examples/official-site/sqlpage/migrations/36_probe.sql
new file mode 100644
index 00000000..8fd427e1
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/36_probe.sql
@@ -0,0 +1,54 @@
+-- Documentation for the probe component
+INSERT INTO component (name, description, icon, introduced_in_version) VALUES (
+    'probe',
+    'A debug component that displays a value (constant, variable, parameter value, result of an SQL function, e.g.). Usefull to validate data flow or function behaviour. Each value (except NULL value) is surrounded by double quotes and followed by datatype (number, string, boolean, e.g.).',
+    'microscope',
+    '0.20.0'
+);
+
+INSERT INTO parameter (component,name,description,type,top_level,optional) VALUES (
+    'probe',
+    'name',
+    'Value identifier (used to display the probe result).',
+    'TEXT',
+    TRUE,
+    FALSE
+),(
+    'probe',
+    'contents',
+    'A value to analyze by the probe.',
+    'VARIANT',
+    TRUE,
+    FALSE
+);
+
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a number.',
+    JSON(
+        '[
+            {"component":"probe","name":"myValue","contents":42}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a string.',
+    JSON(
+        '[
+            {"component":"probe","name":"myString","contents": "Hello world! "}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a NULL value.',
+    JSON(
+        '[
+            {"component":"probe","name":"myVar","contents": null}
+        ]'
+    )
+);
\ No newline at end of file
diff --git a/sqlpage/templates/probe.handlebars b/sqlpage/templates/probe.handlebars
new file mode 100644
index 00000000..3c8d018a
--- /dev/null
+++ b/sqlpage/templates/probe.handlebars
@@ -0,0 +1 @@
+<pre>Value of {{name}} is {{#if (eq contents NULL)}}NULL{{else}}"{{contents}}" ({{typeof contents}}){{/if}}</pre>
\ No newline at end of file