devel/grid_example: Implement base_bootgrid_table and base_apply_button into grid example (#4815)

devel/grid_example/src/opnsense/mvc/app/controllers/OPNsense/GridExample/Api/ServiceController.php

@@ -0,0 +1,49 @@
+<?php
+
+/**
+ *    Copyright (C) 2015-2025 Deciso B.V.
+ *
+ *    All rights reserved.
+ *
+ *    Redistribution and use in source and binary forms, with or without
+ *    modification, are permitted provided that the following conditions are met:
+ *
+ *    1. Redistributions of source code must retain the above copyright notice,
+ *       this list of conditions and the following disclaimer.
+ *
+ *    2. Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *
+ *    THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES,
+ *    INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
+ *    AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *    AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ *    OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ *    SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ *    INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ *    CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ *    ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ *    POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+namespace OPNsense\GridExample\Api;
+
+use OPNsense\Base\ApiControllerBase;
+
+/**
+ * Class ServiceController
+ * @package OPNsense\GridExample
+ */
+class ServiceController extends ApiControllerBase
+{
+    /**
+     * non operational reconfigure for base_apply_button
+     */
+    public function reconfigureAction()
+    {
+        sleep(1); // simulate something happening
+        return ["status" => "ok"];
+    }
+}

devel/grid_example/src/opnsense/mvc/app/controllers/OPNsense/GridExample/Api/SettingsController.php

@@ -1,7 +1,7 @@
 <?php
 
 /**
- *    Copyright (C) 2019 Deciso B.V.
+ *    Copyright (C) 2019-2025 Deciso B.V.
  *
  *    All rights reserved.
  *
@@ -43,7 +43,7 @@ class SettingsController extends ApiMutableModelControllerBase
 
     public function searchItemAction()
     {
-        return $this->searchBase("addresses.address", array('enabled', 'email'), "email");
+        return $this->searchBase("addresses.address", null, "email");
     }
 
     public function setItemAction($uuid)
@@ -70,4 +70,5 @@ class SettingsController extends ApiMutableModelControllerBase
     {
         return $this->toggleBase("addresses.address", $uuid, $enabled);
     }
+
 }

devel/grid_example/src/opnsense/mvc/app/controllers/OPNsense/GridExample/IndexController.php

@@ -1,7 +1,7 @@
 <?php
 
 /**
- *    Copyright (C) 2019 Deciso B.V.
+ *    Copyright (C) 2019-2025 Deciso B.V.
  *
  *    All rights reserved.
  *
@@ -40,5 +40,7 @@ class IndexController extends \OPNsense\Base\IndexController
     {
         $this->view->pick('OPNsense/GridExample/index');
         $this->view->formDialogAddress = $this->getForm("dialogAddress");
+        // convert dialog for grid table
+        $this->view->formGridAddress = $this->getFormGrid("dialogAddress");
     }
 }

devel/grid_example/src/opnsense/mvc/app/controllers/OPNsense/GridExample/forms/dialogAddress.xml

@@ -1,13 +1,30 @@
 <form>
     <field>
         <id>address.enabled</id>
-        <label>enabled</label>
+        <label>Enabled</label>
         <type>checkbox</type>
         <help>Enable this address</help>
+        <!-- Format the grid column for enabled button-->
+        <grid_view>
+            <width>6em</width>
+            <type>boolean</type>
+            <formatter>rowtoggle</formatter>
+        </grid_view>
     </field>
     <field>
         <id>address.email</id>
         <label>Email</label>
         <type>text</type>
+        <help>Enter the email address</help>
+    </field>
+    <field>
+        <id>address.description</id>
+        <label>Description</label>
+        <type>text</type>
+        <help>Enter an optional description</help>
+        <!-- Hide this grid column per default -->
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
 </form>

devel/grid_example/src/opnsense/mvc/app/models/OPNsense/GridExample/GridExample.xml

@@ -13,6 +13,7 @@
                 <email type="EmailField">
                     <Required>Y</Required>
                 </email>
+                <description type="DescriptionField"/>
             </address>
         </addresses>
     </items>

devel/grid_example/src/opnsense/mvc/app/views/OPNsense/GridExample/index.volt

@@ -1,5 +1,5 @@
 {#
- # Copyright (c) 2019 Deciso B.V.
+ # Copyright (c) 2019-2025 Deciso B.V.
  # All rights reserved.
  #
  # Redistribution and use in source and binary forms, with or without modification,
@@ -25,9 +25,9 @@
 #}
 
 <script>
-
-    $( document ).ready(function() {
-        $("#grid-addresses").UIBootgrid(
+    $(document).ready(function() {
+        // set up the UIBootgrid API endpoints for the base_bootgrid_table
+        $("#{{formGridAddress['table_id']}}").UIBootgrid(
             {   search:'/api/gridexample/settings/search_item/',
                 get:'/api/gridexample/settings/get_item/',
                 set:'/api/gridexample/settings/set_item/',
@@ -36,32 +36,18 @@
                 toggle:'/api/gridexample/settings/toggle_item/'
             }
         );
+
+        // use SimpleActionButton() to call /api/gridexample/service/reconfigure as example
+        $("#reconfigureAct").SimpleActionButton();
     });
 
 </script>
 
-
-<table id="grid-addresses" class="table table-condensed table-hover table-striped" data-editDialog="DialogAddress">
-    <thead>
-        <tr>
-            <th data-column-id="uuid" data-type="string" data-identifier="true"  data-visible="false">{{ lang._('ID') }}</th>
-            <th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
-            <th data-column-id="email" data-type="string">{{ lang._('Email') }}</th>
-            <th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-    <tfoot>
-        <tr>
-            <td></td>
-            <td>
-                <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
-                <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
-            </td>
-        </tr>
-    </tfoot>
-</table>
-
-
-{{ partial("layout_partials/base_dialog",['fields':formDialogAddress,'id':'DialogAddress','label':lang._('Edit address')])}}
+<div class="content-box">
+    <!-- auto creates a bootgrid from the data in formGridAddress -->
+    {{ partial('layout_partials/base_bootgrid_table', formGridAddress) }}
+</div>
+<!-- general purpose apply button, used to trigger reconfigureAct -->
+{{ partial('layout_partials/base_apply_button', {'data_endpoint': '/api/gridexample/service/reconfigure'}) }}
+<!-- base_dialog used by the base_bootgrid_table -->
+{{ partial("layout_partials/base_dialog",['fields':formDialogAddress,'id':formGridAddress['edit_dialog_id'],'label':lang._('Edit address')])}}