glib-web 3.28.0 → 4.0.0

data/app/views/json_ui/garage/forms/show_hide.json.jbuilder

@@ -3,301 +3,347 @@ json.title 'Forms'
 page = json_ui_page json
 render "#{@path_prefix}/nav_menu", json: json, page: page
 
-page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
-  form.h1 text: 'Text'
-  form.fields_password name: 'user[text1]', width: 'matchParent', label: 'Type "show"', value: ''
-  form.label text: 'Typed', showIf: {
-    "==": [
-      {
-        "var": 'user[text1]'
-      },
-      'show'
-    ]
-  }
-  form.label text: 'Type something', showIf: {
-    "==": [
-      {
-        "var": 'user[text1]'
-      },
-      ''
-    ]
-  }
-
-  form.spacer height: 20
-  form.h1 text: 'Textarea'
-  form.fields_textarea name: 'user[textarea1]', width: 'matchParent', label: 'Type "show"'
-  form.label text: 'Typed', showIf: {
-    "==": [
-      {
-        "var": 'user[textarea1]'
-      },
-      'show'
-    ]
-  }
+page.form \
+  url: json_ui_garage_url(path: 'forms/generic_post'),
+  method: 'post',
+  padding: glib_json_padding_body,
+  onChangeAndLoad: ->(action) do
+    action.runMultiple childActions: ->(saction) do
+      saction.logics_set targetId: 'label5', conditionalData: {
+        displayed: {
+          "and": [
+            {
+              "==": [
+                {
+                  "var": 'user[check1]'
+                },
+                'on'
+              ],
+            },
+            {
+              "==": [
+                {
+                  "var": 'user[check2]'
+                },
+                'on'
+              ]
+            }
+          ]
+        }
+      }
+      saction.logics_set targetId: 'label12', conditionalData: {
+        displayed: {
+          "==": [
+            {
+              "var": 'user[radio1]'
+            },
+            {
+              "var": 'user[select1]'
+            }
+          ]
+        }
+      }
+    end
+  end,
+  childViews: ->(form) do
+    form.h1 text: 'Text'
+    form.fields_password name: 'user[text1]', width: 'matchParent', label: 'Type "show"', value: '', onChangeAndLoad: ->(action) do
+      action.runMultiple childActions: ->(saction) do
+        saction.logics_set targetId: 'label1', conditionalData: { displayed: { "==": [{ "var": 'user[text1]' }, 'show'] } }
+        saction.logics_set targetId: 'label2', conditionalData: { displayed: { "==": [{ "var": 'user[text1]' }, ''] } }
+      end
+    end
+    form.label id: 'label1', text: 'Typed'
+    form.label id: 'label2', text: 'Type something'
 
-  form.spacer height: 20
-  form.h1 text: 'Check'
-  form.fields_check name: 'user[check1]', checkValue: 'on', uncheckValue: 'off', label: 'Show text', value: 'on'
-  form.spacer height: 10
-  form.label text: 'Checked', showIf: {
-    "==": [
-      {
-        "var": 'user[check1]'
-      },
-      'on'
-    ]
-  }
+    form.spacer height: 20
+    form.h1 text: 'Textarea'
+    form.fields_textarea name: 'user[textarea1]', width: 'matchParent', label: 'Type "show"', onChangeAndLoad: ->(action) do
+      action.logics_set targetId: 'label3', conditionalData: { displayed: { "==": [{ "var": 'user[textarea1]' }, 'show'] } }
+    end
+    form.label id: 'label3', text: 'Typed'
 
-  form.spacer height: 6
-  form.fields_check name: 'user[check2]', checkValue: 'on', label: 'Show text', uncheckValue: 'off'
-  form.spacer height: 10
-  form.label text: 'Both Checked', showIf: {
-    "and": [
-      {
-        "==": [
-          {
-            "var": 'user[check1]'
-          },
-          'on'
-        ],
-      },
-      {
-        "==": [
-          {
-            "var": 'user[check2]'
-          },
-          'on'
-        ]
-      }
-    ]
-  }
+    form.spacer height: 20
+    form.h1 text: 'Check'
+    form.fields_check name: 'user[check1]', checkValue: 'on', uncheckValue: 'off', label: 'Show text', value: 'on', onChangeAndLoad: ->(action) do
+      action.logics_set targetId: 'label4', conditionalData: { displayed: { "==": [{ "var": 'user[check1]' }, 'on'] } }
+    end
+    form.spacer height: 10
+    form.label id: 'label4', text: 'Checked'
 
-  form.spacer height: 20
-  form.h1 text: 'Radio Group'
-  form.fields_radioGroup name: 'user[radio1]', value: 'show', childViews: ->(group) do
-    group.fields_radio value: 'show', label: 'Show'
-    group.fields_radio value: 'hide', label: 'Hide'
-    group.fields_radio value: '', label: 'Empty'
-  end
-  form.spacer height: 10
-  form.label text: 'Chosen', showIf: {
-    "==": [
-      {
-        "var": 'user[radio1]'
-      },
-      'show'
-    ]
-  }
-  form.label text: 'Unspecified', showIf: {
-    "==": [
-      {
-        "var": 'user[radio1]'
-      },
-      ''
-    ]
-  }
+    form.spacer height: 6
+    form.fields_check name: 'user[check2]', checkValue: 'on', label: 'Show text', uncheckValue: 'off'
+    form.spacer height: 10
+    form.label id: 'label5', text: 'Both Checked'
 
-  form.spacer height: 20
-  form.h1 text: 'Select'
-  # options = ['', 'show', 'hide']
-  options = {
-    '' => '<EMPTY>',
-    'show' => 'Show',
-    'hide' => 'Hide',
-    nil => '<NULL>'
-  }.map { |k, v| { value: k, text: v } }
-  form.fields_select name: 'user[select1]', width: 'matchParent', label: 'Select "show"', options: options, value: ''
-  form.label text: 'Selected', showIf: {
-    "==": [
-      {
-        "var": 'user[select1]'
-      },
-      'show'
-    ]
-  }
-  form.label text: 'Unspecified', showIf: {
-    "==": [
-      {
-        "var": 'user[select1]'
-      },
-      ''
-    ]
-  }
-  form.label text: 'Null', showIf: {
-    "==": [
-      {
-        "var": 'user[select1]'
-      },
-      nil
-    ]
-  }
-  form.label text: 'Any', showIf: {
-    "!=": [
-      {
-        "var": 'user[select1]'
-      },
-      nil
-    ]
-  }
+    form.spacer height: 20
+    form.h1 text: 'Radio Group'
+    form.fields_radioGroup \
+      name: 'user[radio1]',
+      value: 'show',
+      onChangeAndLoad: ->(action) do
+        action.runMultiple childActions: ->(saction) do
+          saction.logics_set targetId: 'label6', conditionalData: {
+            displayed: {
+              "==": [
+                {
+                  "var": 'user[radio1]'
+                },
+                'show'
+              ]
+            }
+          }
+          saction.logics_set targetId: 'label7', conditionalData: {
+            displayed: {
+              "==": [
+                {
+                  "var": 'user[radio1]'
+                },
+                ''
+              ]
+            }
+          }
+        end
+      end,
+      childViews: ->(group) do
+        group.fields_radio value: 'show', label: 'Show'
+        group.fields_radio value: 'hide', label: 'Hide'
+        group.fields_radio value: '', label: 'Empty'
+      end
+    form.spacer height: 10
+    form.label id: 'label6', text: 'Chosen'
+    form.label id: 'label7', text: 'Unspecified'
 
-  form.spacer height: 20
-  form.h1 text: 'Combined conditions'
-  form.label text: 'Select the same option on both the radio and select fields above'
-  form.spacer height: 10
-  form.h3 text: 'Same!', showIf: {
-    "==": [
-      {
-        "var": 'user[radio1]'
-      },
-      {
-        "var": 'user[select1]'
-      },
-    ]
-  }
+    form.spacer height: 20
+    form.h1 text: 'Select'
+    # options = ['', 'show', 'hide']
+    options = {
+      '' => '<EMPTY>',
+      'show' => 'Show',
+      'hide' => 'Hide',
+      nil => '<NULL>'
+    }.map { |k, v| { value: k, text: v } }
+    form.fields_select name: 'user[select1]', width: 'matchParent', label: 'Select "show"', options: options, value: '', onChangeAndLoad: ->(action) do
+      action.runMultiple childActions: ->(saction) do
+        saction.logics_set targetId: 'label8', conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[select1]'
+              },
+              'show'
+            ]
+          }
+        }
+        saction.logics_set targetId: 'label9', conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[select1]'
+              },
+              ''
+            ]
+          }
+        }
+        saction.logics_set targetId: 'label10', conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[select1]'
+              },
+              nil
+            ]
+          }
+        }
+        saction.logics_set targetId: 'label11', conditionalData: {
+          displayed: {
+            "!=": [
+              {
+                "var": 'user[select1]'
+              },
+              nil
+            ]
+          }
+        }
+      end
+    end
+    form.label id: 'label8', text: 'Selected'
+    form.label id: 'label9', text: 'Unspecified'
+    form.label id: 'label10', text: 'Null'
+    form.label id: 'label11', text: 'Any'
 
-  form.spacer height: 20
-  form.h1 text: 'Show/hide another field'
-  form.spacer height: 10
-  form.fields_check name: 'user[check3]', checkValue: 'on', label: 'Show field'
-  form.spacer height: 10
-  form.fields_text width: 'matchParent', label: 'Comment (optional)', name: 'user[comment]', value: 'This field should be submitted even when it is hidden', showIf: {
-    "==": [
-      {
-        "var": 'user[check3]'
-      },
-      'on'
-    ]
-  }
+    form.spacer height: 20
+    form.h1 text: 'Combined conditions'
+    form.label text: 'Select the same option on both the radio and select fields above'
+    form.spacer height: 10
+    form.h3 id: 'label12', text: 'Same!'
 
-  form.spacer height: 20
-  form.h1 text: 'Show more/less text'
-  form.spacer height: 10
-  render "#{@path_prefix}/forms/read_more_text",
-    panel: form,
-    min_chars: 300,
-    max_lines: 2,
-    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    form.spacer height: 20
+    form.h1 text: 'Show/hide another field'
+    form.spacer height: 10
+    form.fields_check name: 'user[check3]', checkValue: 'on', label: 'Show field', onChangeAndLoad: ->(action) do
+      action.logics_set \
+        targetId: 'field1',
+        conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[check3]'
+              },
+              'on'
+            ]
+          }
+        },
+        data: { submitWhenNotDisplayed: true }
+    end
+    form.spacer height: 10
+    form.fields_text id: 'field1', width: 'matchParent', label: 'Comment (optional)', name: 'user[comment]', value: 'This field should be submitted even when it is hidden'
 
-  form.spacer height: 10
-  render "#{@path_prefix}/forms/read_more_text",
-    panel: form,
-    min_chars: 300,
-    max_lines: 2,
-    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    form.spacer height: 20
+    form.h1 text: 'Show more/less text'
+    form.spacer height: 10
+    render "#{@path_prefix}/forms/read_more_text",
+      id: 'readmore1',
+      panel: form,
+      min_chars: 300,
+      max_lines: 2,
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
 
-  form.spacer height: 20
-  form.h1 text: 'Show/hide conditional banner'
-  form.spacer height: 10
-  form.label text: 'The following banner does not appear because its menu is empty'
-  form.spacer height: 8
+    form.spacer height: 20
+    form.h1 text: 'Show/hide conditional banner'
+    form.spacer height: 10
+    form.label text: 'The following banner does not appear because its menu is empty'
+    form.spacer height: 8
 
-  render "#{@path_prefix}/forms/conditional_banner", panel: form, message: 'Admin menu 1' do |menu, state|
-    # This banner will not show because it does not have any content
-    # state[:has_content] = false
-  end
+    render "#{@path_prefix}/forms/conditional_banner", panel: form, message: 'Admin menu 1' do |menu, state|
+      # This banner will not show because it does not have any content
+      state[:has_content] = false
+    end
 
-  form.spacer height: 10
-  form.label text: 'The following banner appears because it has at least one menu item'
-  form.spacer height: 8
+    form.spacer height: 10
+    form.label text: 'The following banner appears because it has at least one menu item'
+    form.spacer height: 8
 
-  render "#{@path_prefix}/forms/conditional_banner", panel: form, message: 'Admin menu 2' do |menu, state|
-    state[:has_content] = true
+    render "#{@path_prefix}/forms/conditional_banner", panel: form, message: 'Admin menu 2' do |menu, state|
+      state[:has_content] = true
 
-    menu.button styleClass: 'link', text: 'Add', onClick: ->(action) do
-      action.dialogs_alert message: 'Do something'
+      menu.button styleClass: 'link', text: 'Add', onClick: ->(action) do
+        action.dialogs_alert message: 'Do something'
+      end
     end
-  end
 
-  form.spacer height: 20
-  form.h1 text: 'Show/hide without send data'
-  form.fields_check name: 'user[loadif1]', label: 'Show one field', checkValue: 'true', uncheckValue: 'false', value: 'true'
-  form.spacer height: 4
-  form.fields_text \
-    name: 'user[loadif_target1]', value: 'This field should not be submitted when it is hidden',
-    width: 'matchParent',
-    loadIf: {
-      "==": [
-        {
-          "var": 'user[loadif1]'
-        },
-        'true'
-      ]
-    }
-
-  form.spacer height: 8
-  form.fields_check name: 'user[loadif2]', label: 'Show & hide many field', checkValue: 'true', uncheckValue: 'false', value: 'false'
-  form.spacer height: 4
-  form.panels_responsive \
-    width: 'matchParent',
-    loadIf: {
-        "==": [
-          {
-            "var": 'user[loadif2]'
-          },
-          'true'
-        ]
-      },
-    childViews: ->(res) do
-      form.fields_text name: 'user[loadif_target2]', width: 'matchParent', value: 'Value 1'
-      form.spacer height: 4
-      form.fields_textarea name: 'user[loadif_target3]', width: 'matchParent', value: 'Value 2'
-      form.spacer height: 4
+    form.spacer height: 20
+    form.h1 text: 'Show/hide without send data'
+    form.fields_check name: 'user[loadif1]', label: 'Show one field', checkValue: 'true', uncheckValue: 'false', value: 'true', onChangeAndLoad: ->(action) do
+      action.logics_set \
+        targetId: 'field2',
+        conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[loadif1]'
+              },
+              'true'
+            ]
+          }
+        }
     end
+    form.spacer height: 4
+    form.fields_text \
+      id: 'field2',
+      name: 'user[loadif_target1]',
+      value: 'This field should not be submitted when it is hidden',
+      width: 'matchParent'
 
-  form.panels_responsive \
-    width: 'matchParent',
-    loadIf: {
-        "==": [
-          {
-            "var": 'user[loadif2]'
-          },
-          'false'
-        ]
-      },
-    childViews: ->(res) do
-      form.fields_richText name: 'user[loadIf_target4]', width: 'matchParent', value: 'Value 3'
-      form.spacer height: 4
-      form.fields_radioGroup name: 'user[loadIf_target5]', width: 'matchParent', value: 'choice_1', childViews: ->(group) do
-        group.fields_radio label: 'Choice 1', value: 'choice_1'
-        group.fields_radio label: 'Choice 2', value: 'choice_2'
-        group.fields_radio label: 'Choice 3', value: 'choice_3'
+    form.spacer height: 8
+    form.fields_check name: 'user[loadif2]', label: 'Show & hide many field', checkValue: 'true', uncheckValue: 'false', value: 'false', onChangeAndLoad: ->(action) do
+      action.runMultiple childActions: ->(saction) do
+        saction.logics_set targetId: 'panel1', conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[loadif2]'
+              },
+              'true'
+            ]
+          }
+        }
+        saction.logics_set targetId: 'panel2', conditionalData: {
+          displayed: {
+            "==": [
+              {
+                "var": 'user[loadif2]'
+              },
+              'false'
+            ]
+          }
+        }
       end
     end
+    form.spacer height: 4
+    form.panels_responsive \
+      id: 'panel1',
+      width: 'matchParent',
+      childViews: ->(res) do
+        form.fields_text name: 'user[loadif_target2]', width: 'matchParent', value: 'Value 1'
+        form.spacer height: 4
+        form.fields_textarea name: 'user[loadif_target3]', width: 'matchParent', value: 'Value 2'
+        form.spacer height: 4
+      end
 
-
-  form.spacer height: 8
-  form.fields_check name: 'user[loadif3]', label: 'Show target nested panels', checkValue: 'true', uncheckValue: 'false', value: 'false'
-  form.panels_responsive \
-    loadIf: { "==": [{ "var": 'user[loadif3]' }, 'true'] },
-    styleClass: 'border-2',
-    width: 'matchParent',
-    padding: { top: 8, right: 8, bottom: 8, left: 8 },
-    childViews: ->(res) do
-      res.panels_responsive \
-        styleClass: 'border-2',
-        width: 'matchParent',
-        padding: { top: 8, right: 8, bottom: 8, left: 8 },
-        childViews: ->(sres) do
-          sres.fields_text name: 'user[loadif_target6]', width: 'matchParent', value: 'Value 4'
+    form.panels_responsive \
+      id: 'panel2',
+      width: 'matchParent',
+      childViews: ->(res) do
+        form.fields_richText name: 'user[loadIf_target4]', width: 'matchParent', value: 'Value 3'
+        form.spacer height: 4
+        form.fields_radioGroup name: 'user[loadIf_target5]', width: 'matchParent', value: 'choice_1', childViews: ->(group) do
+          group.fields_radio label: 'Choice 1', value: 'choice_1'
+          group.fields_radio label: 'Choice 2', value: 'choice_2'
+          group.fields_radio label: 'Choice 3', value: 'choice_3'
         end
+      end
+
+
+    form.spacer height: 8
+    form.fields_check name: 'user[loadif3]', label: 'Show target nested panels', checkValue: 'true', uncheckValue: 'false', value: 'false', onChangeAndLoad: ->(action) do
+      action.logics_set targetId: 'panel3', conditionalData: { displayed: { "==": [{ "var": 'user[loadif3]' }, 'true'] } }
     end
+    form.panels_responsive \
+      id: 'panel3',
+      styleClass: 'border-2',
+      width: 'matchParent',
+      padding: { top: 8, right: 8, bottom: 8, left: 8 },
+      childViews: ->(res) do
+        res.panels_responsive \
+          styleClass: 'border-2',
+          width: 'matchParent',
+          padding: { top: 8, right: 8, bottom: 8, left: 8 },
+          childViews: ->(sres) do
+            sres.fields_text name: 'user[loadif_target6]', width: 'matchParent', value: 'Value 4'
+          end
+      end
 
-  form.spacer height: 8
+    # form.spacer height: 8
 
-  if !Rails.env.test?
-    form.button text: 'Reload component', onClick: ->(action) { action.windows_reload url: json_ui_garage_current_url({ key: SecureRandom.hex(3) }) }
-  end
+    if !Rails.env.test?
+      form.button text: 'Reload component', onClick: ->(action) { action.windows_reload url: json_ui_garage_current_url({ key: SecureRandom.hex(3) }) }
+    end
 
-  if !params[:key]
-    form.fields_check name: 'user[loadif4]', label: 'Show reload component 1', checkValue: 'true', uncheckValue: 'false', value: 'false'
-    form.fields_text name: 'user[loadif_target7]', width: 'matchParent', value: 'Value 5', loadIf: { "==": [{ "var": 'user[loadif4]' }, 'true'] }
-  else
-    form.fields_check name: 'user[loadif5]', label: 'Show reload component 2', checkValue: 'true', uncheckValue: 'false', value: 'false'
-    form.fields_text name: 'user[loadif_target8]', width: 'matchParent', value: params[:key], loadIf: { "==": [{ "var": 'user[loadif5]' }, 'true'] }
-  end
+    if !params[:key]
+      form.fields_check name: 'user[loadif4]', label: 'Show reload component 1', checkValue: 'true', uncheckValue: 'false', value: 'false', onChangeAndLoad: ->(action) do
+        action.logics_set targetId: 'field3', conditionalData: { displayed: { "==": [{ "var": 'user[loadif4]' }, 'true'] } }
+      end
+      form.fields_text id: 'field3', name: 'user[loadif_target7]', width: 'matchParent', value: 'Value 5'
+    else
+      form.fields_check name: 'user[loadif5]', label: 'Show reload component 2', checkValue: 'true', uncheckValue: 'false', value: 'false', onChangeAndLoad: ->(action) do
+        action.logics_set targetId: 'field4', conditionalData: { displayed: { "==": [{ "var": 'user[loadif5]' }, 'true'] } }
+      end
+      form.fields_text id: 'field4', name: 'user[loadif_target8]', width: 'matchParent', value: params[:key]
+    end
 
-  form.spacer height: 20
-  form.fields_submit text: 'Submit'
+    form.spacer height: 20
+    form.fields_submit text: 'Submit'
 
-  form.spacer height: 40
-end
+    form.spacer height: 40
+  end