glib-web 4.2.0 → 4.4.0

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

@@ -15,14 +15,48 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
     'melbourne' => 'Melbourne',
     'sydney' => 'Sydney',
   }
+
+  form.panels_responsive childViews: ->(column) do
+    form.fields_select \
+      name: 'user[city]',
+      width: 'matchParent',
+      label: 'City1',
+      placeholder: 'This is a placeholder',
+      options: languages.map { |k, v| { value: k, text: v } },
+      value: 'canberra',
+      onChange: ->(action) do
+        action.components_findClosest view: 'panels/responsive', onFind: ->(find) do
+          # This is to demonstrate that `components_set` can be a more flexible version
+          # of `components_replace`.
+          find.components_set dataBuilder: ->(set) do
+            # Don't update the childViews, just update the footer
+            set.panels_responsive accessory: ->(accessory) do
+              accessory.footer childViews: ->(footer) do
+                footer.label text: 'New footer'
+              end
+            end
+          end
+        end
+      end
+  end, accessory: ->(accessory) do
+    accessory.footer childViews: ->(footer) do
+      footer.label text: 'Original footer'
+    end
+  end
+
+  form.spacer height: 6
+
   form.fields_select \
-    name: 'user[city]',
+    name: 'user[cities][]',
     width: 'matchParent',
-    label: 'City1',
-    placeholder: 'This is a placeholder',
+    label: 'Cities',
     options: languages.map { |k, v| { value: k, text: v } },
-    value: 'canberra'
-  form.fields_select name: 'user[cities][]', width: 'matchParent', label: 'Cities', options: languages.map { |k, v| { value: k, text: v } }, value: ['melbourne', 'sydney'], multiple: true
+    value: ['melbourne', 'sydney'],
+    multiple: true,
+    onChange: ->(action) do
+      # TODO: Fix needed. When closing this dialog, the dirty prompt appears.
+      action.dialogs_alert message: 'Options selected'
+    end
 
   form.spacer height: 20
   form.h2 text: 'Select fields with grouping'

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

@@ -349,12 +349,14 @@ page.form \
     form.spacer height: 20
     options = [
       { text: 'Option 1', value: 'option1' },
-      { text: 'Option 2', value: 'option2' }
+      { text: 'Option 2', value: 'option2' },
+      { text: 'Option 3', value: 'option3' }
     ]
     form.fields_select name: 'user[loadif7]', width: 'matchParent', label: 'Select "show"', options: options, value: '', onChangeAndLoad: ->(action) do
       action.runMultiple childActions: ->(saction) do
         saction.logics_set targetId: 'panel7a', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option1'] } }
         saction.logics_set targetId: 'panel7b', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option2'] } }
+        saction.logics_set targetId: 'panel7c', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option3'] } }
       end
     end
 
@@ -363,8 +365,8 @@ page.form \
       styleClass: 'border-2',
       width: 'matchParent',
       padding: { top: 8, right: 8, bottom: 8, left: 8 },
-      childViews: ->(res) do
-        res.fields_text name: 'user[loadif_target9]', width: 'matchParent', value: 'Value 7a'
+      childViews: ->(vertical) do
+        vertical.fields_text name: 'user[0][loadif_target9]', width: 'matchParent', value: 'Value 7a'
       end
 
     form.panels_vertical \
@@ -372,8 +374,17 @@ page.form \
       styleClass: 'border-2',
       width: 'matchParent',
       padding: { top: 8, right: 8, bottom: 8, left: 8 },
-      childViews: ->(res) do
-        res.fields_text name: 'user[loadif_target9]', width: 'matchParent', value: 'Value 7b'
+      childViews: ->(vertical) do
+        vertical.fields_text name: 'user[1][loadif_target9]', width: 'matchParent', value: 'Value 7b'
+      end
+
+    form.panels_vertical \
+      id: 'panel7c',
+      styleClass: 'border-2',
+      width: 'matchParent',
+      padding: { top: 8, right: 8, bottom: 8, left: 8 },
+      childViews: ->(vertical) do
+        vertical.fields_text id: 'target_panel_3', name: 'user[2][loadif_target9]', width: 'matchParent', value: 'Value 7c'
       end
 
     form.spacer height: 20

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

@@ -107,7 +107,7 @@ page.scroll childViews: ->(scroll) do
         end
 
       form.spacer height: 20
-      rules = { fileType: 'image', maxFileSize: 5000, fileTypeErrorText: 'Invalid!', maxFileSizeErrorText: 'Too big!' }
+      rules = { fileType: 'image', maxFileSize: 5000, maxFileSizeErrorText: 'Too big!' }
       form.fields_file \
         name: 'user[photo][]',
         width: 'matchParent',

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

@@ -15,29 +15,32 @@ page.form \
       name: 'user[name]',
       width: 'matchParent',
       label: 'Name'
-
+    form.spacer height: 8
 
     form.fields_email \
       name: 'user[email]',
       width: 'matchParent',
       label: 'Email'
+    form.spacer height: 8
 
     form.fields_url \
       name: 'user[url]',
       width: 'matchParent',
       label: 'URL'
+    form.spacer height: 8
 
     form.fields_number \
       prop: :age,
       name: 'user[age]',
       width: 'matchParent',
       label: 'Age'
-
+    form.spacer height: 8
 
     form.fields_phone \
       name: 'user[phone1]',
       width: 'matchParent',
       label: 'Phone field'
+    form.spacer height: 8
 
     form.fields_phone \
       name: 'user[phone2]',
@@ -45,6 +48,7 @@ page.form \
       label: 'Phone field with Australia as the default country',
       disableAutoDetect: true, # Disable country auto detect by user IP
       defaultCountry: 'AU' # ISO Country code, see: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
+    form.spacer height: 8
 
     form.fields_password \
       name: 'user[password]',
@@ -52,6 +56,7 @@ page.form \
       label: 'Password',
       hint: 'Should contain at least 6 characters',
       leftIcon: 'lock'
+    form.spacer height: 8
 
     form.fields_textarea \
       prop: :words,
@@ -59,6 +64,7 @@ page.form \
       width: 'matchParent',
       label: 'Textarea with maxLength',
       maxLength: 1000
+    form.spacer height: 8
 
 
     options = ['programmer', 'devops', 'designer', 'ceo', 'office_boy'].map { |v| { text: v.humanize, value: v } }
@@ -68,11 +74,10 @@ page.form \
       width: 'matchParent',
       label: 'Position',
       options: options
+    form.spacer height: 8
 
 
-    form.spacer height: 10
     form.h4 text: 'Gender'
-    form.spacer height: 4
     form.fields_radioGroup \
       name: 'user[gender]',
       validation: { required: { message: 'Required' } },
@@ -82,9 +87,9 @@ page.form \
         group.fields_radio value: 'F', label: 'Female'
       end
 
-    form.spacer height: 10
+    form.spacer height: 8
+
     form.h4 text: 'Skills'
-    form.spacer height: 4
     form.fields_checkGroup \
       name: 'user[skills][]',
       uncheckValue: 1,
@@ -95,10 +100,10 @@ page.form \
         group.fields_check checkValue: 4, label: 'Mobile Development'
       end
 
-    form.spacer height: 10
+    form.spacer height: 8
     form.fields_check prop: :accept, label: 'Accept terms & condition', name: 'user[accept]'
 
-    form.spacer height: 30
+    form.spacer height: 8
     form.fields_submit text: 'Submit'
     form.fields_submit text: 'Submit (disable if form invalid)', disableIfFormInvalid: true
   end

data/app/views/json_ui/garage/test_page/_header.json.jbuilder

@@ -0,0 +1,14 @@
+navs = ['form', 'dialog', 'form_dynamic', 'auto_validate', 'multiupload']
+
+view.panels_flow innerPadding: { bottom: 0 }, styleClass: 'align-right', width: 'matchParent', childViews: ->(res) do
+  navs.each_with_index do |nav, index|
+    if index < navs.size && index != 0
+      res.spacer width: 4
+      res.label text: '|'
+      res.spacer width: 4
+    end
+    res.label text: nav, onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: "test_page/#{nav}")
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/auto_validate.json.jbuilder

@@ -0,0 +1,77 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  model = Glib::DummyJobApplication.new(
+    name: 'John Deo',
+    accept: '0',
+    words: '',
+    age: 17,
+    position: 'ceo',
+    pet_you_have: 'crocodile'
+  )
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Job Application'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      model: model,
+      autoValidate: true,
+      childViews: ->(form) do
+        form.fields_text prop: :name, label: 'name', name: 'user[name]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_text label: 'say hello', name: 'user[say]', width: 'matchParent', validation: { format: { regex: 'hello', message: 'Say hello!' } }, value: 'sup'
+        form.spacer height: 4
+
+        form.fields_number prop: :age, label: 'age', name: 'user[age]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_number \
+          name: 'user[height]',
+          label: 'height',
+          width: 'matchParent',
+          validation: { numericality: { greater_than_or_equal_to: 155, less_than_or_equal_to: 190, message: { greater_than_or_equal_to: 'Too short', less_than_or_equal_to: 'Too long' } } },
+          value: 150
+        form.spacer height: 4
+
+        form.fields_textarea prop: :words, label: 'words', name: 'user[words]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_textarea label: 'Tell me story', name: 'user[story]', width: 'matchParent', validation: { length: { minimum: 1, message: { too_short: { one: 'Min %{count} word', other: 'Min %{count} words' } } } }
+        form.spacer height: 4
+
+        options = ['programmer', 'devops', 'designer', 'ceo', 'office_boy'].map { |v| { text: v.humanize, value: v } }
+        form.fields_select prop: :position, label: 'postion', name: 'user[position]', width: 'matchParent', options: options
+        form.spacer height: 4
+
+        options2 = ['crocodile', 'cat', 'dog', 'bird', 'shark'].map { |v| { text: v.humanize, value: v } }
+        form.fields_select prop: :pet_you_have, label: 'Pet you have', name: 'user[pet_you_have]', width: 'matchParent', options: options2
+        form.spacer height: 4
+
+        form.label text: 'Decision'
+        options3 = ['choose me', 'dont choose me', 'whatever']
+        form.fields_radioGroup value: 'dont choose me', validation: { exclusion: { in: ['dont choose me'], message: 'dont choose me' } }, childViews: ->(radio) do
+          options3.each do |option|
+            radio.fields_radio label: option, value: option
+          end
+        end
+        form.spacer height: 4
+
+        form.fields_check prop: :accept, label: 'accept', name: 'user[accept]', width: 'matchParent', checkValue: '1'
+        form.spacer height: 4
+
+        form.spacer height: 4
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+    res.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/test_page/dialog.json.jbuilder

@@ -0,0 +1,38 @@
+
+
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Dialog'
+    res.spacer height: 8
+    res.button text: 'Dialog updateExisting', onClick: ->(action) do
+      action.runMultiple childActions: ->(saction) do
+        saction.dialogs_show content: ->(dialog) do
+          dialog.body padding: glib_json_padding_body, childViews: ->(sbody) do
+            sbody.h1 text: 'Hello world'
+            sbody.button text: 'change dialog content', onClick: ->(ssaction) do
+              ssaction.dialogs_show updateExisting: true, disableCloseButton: true, content: ->(sdialog) do
+                sdialog.body padding: glib_json_padding_body, childViews: ->(ssbody) do
+                  ssbody.h1 text: 'Hello world (updated)'
+                  ssbody.spacer height: 8
+                  ssbody.button text: 'close', onClick: ->(xaction) do
+                    xaction.dialogs_close
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    res.spacer height: 4
+    res.button text: 'Dialog open', onClick: ->(action) do
+      action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/dialog_open.json.jbuilder

@@ -0,0 +1,14 @@
+page = json_ui_page json
+
+page.body padding: glib_json_padding_body, childViews: ->(body) do
+  body.panels_responsive width: 'matchParent', childViews: ->(res) do
+    res.h2 text: 'Title'
+    res.spacer height: 16
+    res.button text: 'open', onClick: ->(action) do
+      action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+    end
+    res.button text: 'close', onClick: ->(action) do
+      action.dialogs_close
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/form.json.jbuilder

@@ -0,0 +1,111 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Form'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      childViews: ->(form) do
+        form.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(hori) do
+          hori.button text: 'components/set', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'textarea', data: { value: 'The quick brown fox jumps over the lazy dog' }
+              new_options = [{ text: 'Option99', value: 'option99' }]
+              ['select', 'chip_group'].each do |id|
+                saction.components_set targetId: id, data: { options: new_options, value: ['option99'] }
+              end
+            end
+          end
+          hori.spacer width: 4
+          hori.button text: 'logics/set', onClick: ->(action) do
+            action.logics_set targetId: 'date', conditionalData: { value: { "+": [{ "var": ['user[date]'] }, 60 * 60 * 24 * 3] } }
+          end
+          hori.spacer width: 4
+          hori.button text: 'components/replace', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_replace targetId: 'radio_group', newView: ->(view) do
+                view.fields_radioGroup value: '', childViews: ->(sview) do
+                  sview.fields_radio label: 'Option99', value: 'option99'
+                end
+              end
+
+              saction.components_replace targetId: 'check_group', newView: ->(view) do
+                view.fields_checkGroup value: '', childViews: ->(sview) do
+                  sview.fields_check label: 'Option99', value: nil, checkValue: 'option99'
+                end
+              end
+            end
+          end
+          hori.spacer width: 4
+          hori.button text: 'hide select', onClick: ->(action) do
+            action.components_set targetId: 'select', data: { displayed: false }
+          end
+          hori.spacer height: 4
+          hori.button text: 'hide jack', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'ver', data: { displayed: true }
+              saction.components_set targetId: 'ver1', data: { displayed: false }
+            end
+          end
+          hori.spacer height: 4
+          hori.button text: 'show jack', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'ver', data: { displayed: false }
+              saction.components_set targetId: 'ver1', data: { displayed: true }
+            end
+          end
+        end
+
+        form.spacer height: 8
+        form.hr width: 'matchParent'
+        form.spacer height: 8
+
+        validation = { required: { message: 'Required' } }
+        options = ['option1', 'option2', 'option3', 'option4'].map { |option| { 'text'=> option.humanize, 'value' => option } }
+
+        form.fields_date width: 'matchParent', name: 'user[date]', id: 'date', value: Date.new(2024, 7, 24), validation: validation
+        form.hr width: 'matchParent'
+        form.fields_select multiple: true, width: 'matchParent', name: 'user[select][]', id: 'select', options: options, value: ['option1', 'option2'], validation: validation
+        form.hr width: 'matchParent'
+        form.fields_chipGroup width: 'matchParent', name: 'user[chip_group]', id: 'chip_group', options: options, value: ['option2'], validation: validation
+        form.hr width: 'matchParent'
+        form.fields_radioGroup width: 'matchParent', name: 'user[radio_group]', id: 'radio_group', value: 'option3', validation: validation, childViews: ->(radio) do
+          options.each do |option|
+            radio.fields_radio label: option['text'], value: option['value']
+          end
+        end
+        form.hr width: 'matchParent'
+        check_group_value = ['option3', 'option1']
+        form.fields_checkGroup width: 'matchParent', name: 'user[check_group]', id: 'check_group', value: check_group_value, validation: validation, childViews: ->(radio) do
+          options.each do |option|
+            radio.fields_check label: option['text'], checkValue: option['value']
+          end
+        end
+        form.hr width: 'matchParent'
+        form.panels_vertical width: 'matchParent', id: 'ver', childViews: ->(ver) do
+          form.fields_text width: 'matchParent', name: 'user[text]', id: 'text', value: 'John Doe', validation: validation.merge(format: { regex: /Doe\z/, message: 'Must end with Doe' })
+        end
+        form.panels_vertical width: 'matchParent', id: 'ver1', displayed: false, childViews: ->(ver) do
+          form.fields_text width: 'matchParent', name: 'user[text]', value: 'Jack Doe', validation: validation.merge(format: { regex: /Doe\z/, message: 'Must end with Doe' })
+        end
+
+        form.hr width: 'matchParent'
+
+        form.fields_textarea width: 'matchParent', name: 'user[textarea]', id: 'textarea', value: 'Lorem ipsum et dumet bla bla bla...'
+
+        form.hr width: 'matchParent'
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+
+    res.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/test_page/form_dynamic.json.jbuilder

@@ -0,0 +1,63 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Form'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      childViews: ->(form) do
+
+        properties = [
+          [
+            { name: 'question', value: 'Punctuality' },
+            { name: 'type', value: 'rating' },
+          ],
+          [
+            { name: 'question', value: 'Quality of work' },
+            { name: 'type', value: 'rating' },
+            { name: 'enabled', value: '1' },
+          ],
+          [
+            { name: 'question', value: 'Satisfied?' },
+            { name: 'type', value: 'yes_no' },
+          ]
+        ]
+        validation = { required: { message: 'Required' } }
+        form.fields_dynamicGroup width: 'matchParent', name: 'user[evaluation]', groupFieldProperties: properties, titlePrefix: 'Entry', content: ->(group) do
+          group.template padding: { left: 32 }, childViews: ->(template) do
+            template.spacer height: 10
+            template.fields_text width: 'matchParent', name: 'question', label: 'Question', placeholder: 'Question', validation: validation
+
+            options = [ :rating, :yes_no ]
+            template.fields_select \
+              width: 'matchParent',
+              name: 'type',
+              label: 'Answer Type',
+              placeholder: 'Answer Type',
+              options: options.map { |o| { text: o.to_s.humanize, value: o } },
+              validation: validation
+
+            template.fields_check \
+              width: 'matchParent',
+              name: 'enabled',
+              label: 'Enable',
+              checkValue: '1',
+              showIf: { "==": [{ "var": 'user[evaluation][{{index}}][type]' }, 'rating'] }
+
+            template.spacer height: 14
+          end
+        end
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+    res.spacer height: 16
+  end
+end