glib-web 4.42.4 → 4.43.0

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

@@ -2,74 +2,115 @@ json.title 'Test Page (List)'
 
 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: 'Overview'
-    res.p text: 'List panels render rows using templates and support pagination, drag, and edit modes.'
-
-    res.spacer height: 12
-    res.hr width: 'matchParent'
-
-    res.h2 text: 'Basic'
-    res.spacer height: 8
-    res.panels_list id: 'list_main', firstSection: ->(section) do
-      section.rows builder: ->(template) do
-        template.standard title: 'Alpha', subtitle: 'Basic list row'
-        template.standard title: 'Bravo', subtitle: 'Basic list row'
-        template.standard title: 'Charlie', subtitle: 'Basic list row'
-      end
-    end
-
-    res.spacer height: 12
-    res.hr width: 'matchParent'
-
-    res.h2 text: 'Variants and Props'
-    res.spacer height: 8
-    res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
-      flow.button text: 'One column', onClick: ->(action) do
-        action.components_set targetId: 'list_main', data: { responsiveCols: 1 }
-      end
-      flow.spacer width: 4
-      flow.button text: 'Three columns', onClick: ->(action) do
-        action.components_set targetId: 'list_main', data: { responsiveCols: 3 }
+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: 'Overview'
+        res.p text: 'List panels render rows using templates and support pagination, drag, and edit modes.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic'
+        res.spacer height: 8
+        res.panels_list(
+          id: 'list_main',
+          firstSection: ->(section) do
+            section.rows(
+              builder: ->(template) do
+                template.standard title: 'Alpha', subtitle: 'Basic list row'
+                template.standard title: 'Bravo', subtitle: 'Basic list row'
+                template.standard title: 'Charlie', subtitle: 'Basic list row'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Variants and Props'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'One column',
+              onClick: ->(action) do
+                action.components_set targetId: 'list_main', data: { responsiveCols: 1 }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Three columns',
+              onClick: ->(action) do
+                action.components_set targetId: 'list_main', data: { responsiveCols: 3 }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Card style',
+              onClick: ->(action) do
+                action.components_set targetId: 'list_main', data: { styleClasses: ['card'], padding: glib_json_padding_list }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Clear style',
+              onClick: ->(action) do
+                action.components_set targetId: 'list_main', data: { styleClasses: nil, padding: nil }
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Actions and Events'
+        res.spacer height: 8
+        res.label id: 'list_event_status', text: 'Scroll events: idle'
+        res.spacer height: 6
+        res.panels_list(
+          id: 'list_events',
+          height: 180,
+          onScrollToTop: ->(action) do
+            action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: top reached' }
+          end,
+          onScrollToBottom: ->(action) do
+            action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: bottom reached' }
+          end,
+          firstSection: ->(section) do
+            section.rows(
+              builder: ->(template) do
+                (1..12).each do |index|
+                  template.standard title: "Row #{index}", subtitle: 'Scroll to trigger events'
+                end
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Autoload'
+        res.spacer height: 8
+        res.label text: 'Scroll to load more rows (asNeeded).'
+        res.spacer height: 8
+        res.panels_list(
+          id: 'list_autoload',
+          height: 220,
+          nextPage: {
+            url: json_ui_garage_url(path: 'lists/autoload_as_needed', page: 1, section_only: 'v1'),
+            autoload: 'asNeeded'
+          },
+          firstSection: ->(section) do
+            render 'json_ui/garage/lists/autoload_section', page: page, page_index: 0
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge and Advanced'
+        res.spacer height: 8
+        res.label text: 'Empty list (sections: [])'
+        res.panels_list sections: []
       end
-      flow.spacer width: 4
-      flow.button text: 'Card style', onClick: ->(action) do
-        action.components_set targetId: 'list_main', data: { styleClasses: ['card'], padding: glib_json_padding_list }
-      end
-      flow.spacer width: 4
-      flow.button text: 'Clear style', onClick: ->(action) do
-        action.components_set targetId: 'list_main', data: { styleClasses: nil, padding: nil }
-      end
-    end
-
-    res.spacer height: 12
-    res.hr width: 'matchParent'
-
-    res.h2 text: 'Actions and Events'
-    res.spacer height: 8
-    res.label id: 'list_event_status', text: 'Scroll events: idle'
-    res.spacer height: 6
-    res.panels_list id: 'list_events', height: 180, onScrollToTop: ->(action) do
-      action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: top reached' }
-    end, onScrollToBottom: ->(action) do
-      action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: bottom reached' }
-    end, firstSection: ->(section) do
-      section.rows builder: ->(template) do
-        (1..12).each do |index|
-          template.standard title: "Row #{index}", subtitle: 'Scroll to trigger events'
-        end
-      end
-    end
-
-    res.spacer height: 12
-    res.hr width: 'matchParent'
-
-    res.h2 text: 'Edge and Advanced'
-    res.spacer height: 8
-    res.label text: 'Empty list (sections: [])'
-    res.panels_list sections: []
+    )
   end
-end
+)

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

@@ -0,0 +1,240 @@
+json.title 'Test Page (Panels Bulk Edit 2)'
+
+page = json_ui_page json
+
+options = [{ text: 'yes', value: 'yes' }, { text: 'no', value: 'no' }]
+source_options = ['Generators', 'Power Station', 'Solar Panels'].map do |source|
+  { text: source, value: source }
+end
+
+default_headers = [
+  { text: 'Month', id: 'month', importable: true, tooltip: { text: 'Month', placement: 'top' } },
+  { text: 'Electricity usage', id: 'electricity_usage', importable: true },
+  { text: 'Gas usage', id: 'gas_usage', importable: true },
+  { text: 'Sources', id: 'sources', importable: true },
+  { text: 'Compliant', id: 'compliant', importable: true }
+]
+
+default_cells = [
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_select width: 'matchParent', options: source_options, multiple: true
+  end,
+  ->(view) do
+    view.fields_select width: 'matchParent', options: options
+  end
+]
+
+[
+  { text: 'Month', id: 'month', importable: true },
+  { text: 'Usage (kWh)', id: 'electricity_usage', importable: true },
+  { text: 'Usage (Therms)', id: 'gas_usage', importable: true }
+]
+
+[
+  ->(view) do
+    view.fields_number width: 120
+  end,
+  ->(view) do
+    view.fields_number width: 140
+  end,
+  ->(view) do
+    view.fields_number width: 140
+  end
+]
+
+import_settings = { submitUrl: json_ui_garage_url(path: 'forms/bulk_edit_post2'), paramName: 'user' }
+
+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: 'Overview'
+        res.p text: 'panels_bulkEdit2 renders an editable grid with import-backed rows and bulk submission events.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.panels_horizontal(
+          align: 'middle',
+          childViews: ->(horizontal) do
+            horizontal.label text: 'Loaded: '
+            horizontal.label id: 'bulk_edit_loaded_count', text: '0'
+            horizontal.spacer width: 12
+            horizontal.label text: 'Selected: '
+            horizontal.label id: 'bulk_edit_selected_count', text: '0'
+            horizontal.spacer width: 12
+            horizontal.chip id: 'bulk_edit_succeeded_count', styleClass: 'success', text: 'Uploaded: 0', displayed: false
+          end
+        )
+        res.spacer height: 8
+        res.panels_bulkEdit2(
+          id: 'bulk_edit_main',
+          width: 'matchParent',
+          paramNameForRowId: 'row_id',
+          import: import_settings,
+          viewHeaders: default_headers,
+          viewCells: default_cells,
+          onCellChange: ->(action) do
+            action.snackbars_alert debug: true, paramName: 'message', fieldName: 'row'
+          end,
+          onSubmitStart: ->(action) do
+            action.runMultiple(
+              childActions: ->(multiple) do
+                multiple.components_set targetId: 'bulk_edit_submit_top', data: { disabled: true }
+                multiple.components_set targetId: 'bulk_edit_submit_bottom', data: { disabled: true }
+                multiple.components_set targetId: 'bulk_edit_cancel', data: { displayed: true }
+              end
+            )
+          end,
+          onSubmitEnd: ->(action) do
+            action.runMultiple(
+              childActions: ->(multiple) do
+                multiple.components_set targetId: 'bulk_edit_submit_top', data: { disabled: false }
+                multiple.components_set targetId: 'bulk_edit_submit_bottom', data: { disabled: false }
+                multiple.components_set targetId: 'bulk_edit_cancel', data: { displayed: false }
+              end
+            )
+          end,
+          onRowsLoad: ->(action) do
+            action.runMultiple(
+              debug: true,
+              fieldName: 'data',
+              childActions: ->(multiple) do
+                multiple.logics_set(
+                  targetId: 'bulk_edit_loaded_count',
+                  debug: true,
+                  paramName: 'variables',
+                  fieldName: 'data',
+                  conditionalData: {
+                  text: { "count": [{ "var": 'data.loadedRows' }] }
+                  }
+                )
+                multiple.components_set targetId: 'bulk_edit_submit_top', data: { displayed: true }
+                multiple.components_set targetId: 'bulk_edit_submit_bottom', data: { displayed: true }
+              end
+            )
+          end,
+          onRowsSelect: ->(action) do
+            action.logics_set(
+              targetId: 'bulk_edit_selected_count',
+              debug: true,
+              paramName: 'variables',
+              fieldName: 'data',
+              conditionalData: {
+              text: { "count": [{ "var": 'data.selectedRows' }] }
+              }
+            )
+          end,
+          onRowsSucceed: ->(action) do
+            action.logics_set(
+              targetId: 'bulk_edit_succeeded_count',
+              debug: true,
+              paramName: 'variables',
+              fieldName: 'data',
+              conditionalData: {
+              text: {
+              "printf": [
+              'Uploaded: {0}',
+              { "count": [{ "var": 'data.succeededRows' }] }
+              ]
+              },
+              displayed: true
+              }
+            )
+          end
+        )
+        res.spacer height: 12
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              id: 'bulk_edit_submit_top',
+              text: 'Submit (top)',
+              displayed: false,
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              id: 'bulk_edit_submit_bottom',
+              text: 'Submit (bottom)',
+              displayed: false,
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              id: 'bulk_edit_cancel',
+              text: 'Cancel import',
+              displayed: false,
+              onClick: ->(action) do
+                action.components_invoke targetId: 'bulk_edit_main', name: 'cancelImport'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        # res.h2 text: 'Variants/props'
+        # res.spacer height: 8
+        # res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+        #   flow.button text: 'Default columns', onClick: ->(action) do
+        #     action.components_set targetId: 'bulk_edit_main', data: { viewHeaders: default_headers, viewCells: default_cells }
+        #   end
+        #   flow.spacer width: 8
+        #   flow.button text: 'Compact columns', onClick: ->(action) do
+        #     action.components_set targetId: 'bulk_edit_main', data: { viewHeaders: compact_headers, viewCells: compact_cells }
+        #   end
+        #   flow.spacer width: 8
+        #   flow.button text: 'Reset counts', onClick: ->(action) do
+        #     action.runMultiple childActions: ->(multiple) do
+        #       multiple.components_set targetId: 'bulk_edit_loaded_count', data: { text: '0' }
+        #       multiple.components_set targetId: 'bulk_edit_selected_count', data: { text: '0' }
+        #       multiple.components_set targetId: 'bulk_edit_succeeded_count', data: { text: 'Uploaded: 0', displayed: false }
+        #     end
+        #   end
+        # end
+        # res.spacer height: 12
+        # res.hr width: 'matchParent'
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Submit (forms_submit)',
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Cancel import (invoke)',
+              onClick: ->(action) do
+                action.components_invoke targetId: 'bulk_edit_main', name: 'cancelImport'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.label text: 'Swap to compact headers then try editing rows before submitting.'
+      end
+    )
+  end
+)

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

@@ -81,8 +81,12 @@ page.body(
         res.button(
           text: 'popovers/close menu',
           onClick: ->(action) do
-            action.popovers_close key: 'popover_menu'
-            action.logics_set targetId: 'popovers_status', data: { text: 'Status: closed' }
+            action.runMultiple(
+              childActions: ->(multi) do
+                multi.popovers_close key: 'popover_menu'
+                multi.logics_set targetId: 'popovers_status', data: { text: 'Status: closed' }
+              end
+            )
           end
         )
 

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

@@ -32,38 +32,41 @@ page.body(
         res.h2 text: 'Variants and props'
         res.label text: 'Adjust value, size, and stroke width.'
         res.spacer height: 8
-        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
-          flow.button(
-            text: '35% default',
-            onClick: ->(action) do
-              action.components_set(
-                targetId: 'progress_circle_main',
-                data: { value: 35, size: 160, width: 16, color: '#4B56D2', half: nil, text: nil }
-              )
-            end
-          )
-          flow.spacer width: 6
-          flow.button(
-            text: '65%',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { value: 65 }
-            end
-          )
-          flow.spacer width: 6
-          flow.button(
-            text: 'Thick stroke',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { width: 28 }
-            end
-          )
-          flow.spacer width: 6
-          flow.button(
-            text: 'Small size',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { size: 110 }
-            end
-          )
-        end
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: '35% default',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'progress_circle_main',
+                  data: { value: 35, size: 160, width: 16, color: '#4B56D2', half: nil, text: nil }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: '65%',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { value: 65 }
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Thick stroke',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { width: 28 }
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Small size',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { size: 110 }
+              end
+            )
+          end
+        )
 
         res.spacer height: 12
         res.hr width: 'matchParent'
@@ -72,24 +75,27 @@ page.body(
         res.h2 text: 'Actions and events'
         res.label text: 'Swap color and label to confirm metadata rendering.'
         res.spacer height: 8
-        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
-          flow.button(
-            text: 'Half circle + label',
-            onClick: ->(action) do
-              action.components_set(
-                targetId: 'progress_circle_main',
-                data: { value: 80, half: true, text: 'Section A', color: '#9E0A0A', width: 22 }
-              )
-            end
-          )
-          flow.spacer width: 6
-          flow.button(
-            text: 'Accent color',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { color: '#F9C80E', half: nil, text: nil }
-            end
-          )
-        end
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Half circle + label',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'progress_circle_main',
+                  data: { value: 80, half: true, text: 'Section A', color: '#9E0A0A', width: 22 }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Accent color',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { color: '#F9C80E', half: nil, text: nil }
+              end
+            )
+          end
+        )
 
         res.spacer height: 12
         res.hr width: 'matchParent'
@@ -98,21 +104,24 @@ page.body(
         res.h2 text: 'Edge and advanced'
         res.label text: 'Confirm 0% and 100% values render correctly.'
         res.spacer height: 8
-        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
-          flow.button(
-            text: '0%',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { value: 0, half: nil, text: nil }
-            end
-          )
-          flow.spacer width: 6
-          flow.button(
-            text: '100%',
-            onClick: ->(action) do
-              action.components_set targetId: 'progress_circle_main', data: { value: 100, half: nil, text: nil }
-            end
-          )
-        end
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: '0%',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { value: '0', half: nil, text: nil }
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: '100%',
+              onClick: ->(action) do
+                action.components_set targetId: 'progress_circle_main', data: { value: 100, half: nil, text: nil }
+              end
+            )
+          end
+        )
       end
     )
   end