Improvement: Added textinput, select

amd/src/actionbutton.js

@@ -50,7 +50,6 @@ export function initializeActionButton(selector, idstring, encodedtable) {
     return;
   }
   const actionbuttons = container.querySelectorAll(SELECTOR.ACTIONBUTTON);
-
   actionbuttons.forEach(button => {
     if (button.dataset.initialized) {
       return;
@@ -60,20 +59,33 @@ export function initializeActionButton(selector, idstring, encodedtable) {
 
     // First check if we have a valid methodname.
     if (button.dataset.methodname && button.dataset.methodname.length > 0) {
-
       // Second check if it's a checkbox, then we need a change listener.
       if (button.dataset.ischeckbox) {
         button.addEventListener('change', () => {
 
           const data = button.dataset;
           data.state = button.checked;
 
-          // eslint-disable-next-line no-console
-          console.log(data.state);
-
           transmitAction(button.dataset.id, button.dataset.methodname,
             JSON.stringify(data), idstring, encodedtable);
         });
+      } else if (button.dataset.methodname == 'textinputchange') {
+        const debouncedInputHandler = debounce(() => {
+            const data = button.dataset;
+            data.value = button.value;
+
+            transmitAction(button.dataset.id, button.dataset.methodname,
+                JSON.stringify(data), idstring, encodedtable);
+        }, 300);
+
+        button.addEventListener('input', debouncedInputHandler);
+      } else if (button.dataset.methodname == 'selectoption') {
+        button.addEventListener('change', () => {
+            const data = button.dataset;
+            data.selectedValue = button.value;
+            transmitAction(button.dataset.id, button.dataset.methodname,
+                JSON.stringify(data), idstring, encodedtable);
+        });
       } else {
         // Else it's a button, we attach the click listener.
         button.addEventListener('click', async() => {
@@ -156,6 +168,19 @@ async function showConfirmationModal(button, idstring, encodedtable, result) {
   });
 }
 
+/**
+ * Shows generic confirmation modal.
+ * @param {*} func
+ * @param {int} delay
+ */
+function debounce(func, delay) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), delay);
+    };
+}
+
 
 /**
  * Function to collect the ids, check if selection of ids is mandatory and prepare a string of selected lables.

classes/demo_table.php

@@ -25,6 +25,10 @@
 
 namespace local_wunderbyte_table;
 
+use local_wunderbyte_table\dynamicactionelements\dynamiccheckbox;
+use local_wunderbyte_table\dynamicactionelements\dynamicselect;
+use local_wunderbyte_table\dynamicactionelements\dynamictextinput;
+
 defined('MOODLE_INTERNAL') || die();
 
 use local_wunderbyte_table\output\table;
@@ -97,20 +101,9 @@ public function col_action($values) {
             ]
         ];
 
-        $data[] = [
-            'label' => get_string('checkbox', 'local_wunderbyte_table'), // Name of your action button.
-            'class' => 'btn btn-success',
-            'href' => '#', // You can either use the link, or JS, or both.
-            'iclass' => 'fa fa-edit', // Add an icon before the label.
-            'id' => $values->id.'-'.$this->uniqueid,
-            'name' => $this->uniqueid.'-'.$values->id,
-            'methodname' => 'togglecheckbox', // The method needs to be added to your child of wunderbyte_table class.
-            'ischeckbox' => true,
-            'data' => [ // Will be added eg as data-id = $values->id, so values can be transmitted to the method above.
-                'id' => $values->id,
-                'labelcolumn' => 'username',
-            ]
-        ];
+        $data[] = dynamiccheckbox::generate_data($values->id, $this->uniqueid);;
+        $data[] = dynamicselect::generate_data($values->id, $this->uniqueid);
+        $data[] = dynamictextinput::generate_data($values->id, $this->uniqueid);
 
         // This transforms the array to make it easier to use in mustache template.
         table::transform_actionbuttons_array($data);
@@ -163,5 +156,33 @@ public function action_togglecheckbox(int $id, string $data):array {
            'message' => $dataobject->state == 'true' ? 'checked' : 'unchecked',
         ];
     }
+    /**
+     * Toggle Checkbox
+     *
+     * @param int $id
+     * @param string $data
+     * @return array
+     */
+    public function action_textinputchange(int $id, string $data):array {
+        $dataobject = json_decode($data);
+        return [
+           'success' => 1,
+           'message' => 'Entered string is: ' . $dataobject->value,
+        ];
+    }
+    /**
+     * Toggle Checkbox
+     *
+     * @param int $id
+     * @param string $data
+     * @return array
+     */
+    public function action_selectoption(int $id, string $data):array {
+        $dataobject = json_decode($data);
+        return [
+           'success' => 1,
+           'message' => 'Selected option: ' . $dataobject->selectedValue,
+        ];
+    }
 
 }

classes/dynamicactionelements/dynamiccheckbox.php

@@ -0,0 +1,56 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * The Wunderbyte table class is an extension of the tablelib table_sql class.
+ *
+ * @package local_wunderbyte_table
+ * @copyright 2023 Wunderbyte Gmbh <[email protected]>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+// phpcs:ignoreFile
+
+namespace local_wunderbyte_table\dynamicactionelements;
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Wunderbyte table demo class.
+ */
+class dynamiccheckbox {
+    /**
+     * Returns data format
+     * @param string $valueid
+     * @param string $uniqueid
+     * @return array
+     */
+    public static function generate_data($valueid, $uniqueid) {
+        return [
+            'label' => get_string('checkbox', 'local_wunderbyte_table'),
+            'class' => 'btn btn-success',
+            'href' => '#',
+            'iclass' => 'fa fa-edit',
+            'id' => $valueid.'-'.$uniqueid,
+            'name' => $uniqueid.'-'. $valueid,
+            'methodname' => 'togglecheckbox',
+            'ischeckbox' => true,
+            'data' => [
+                'id' => $valueid,
+                'labelcolumn' => 'username',
+            ]
+        ];
+    }
+}

classes/dynamicactionelements/dynamicselect.php

@@ -0,0 +1,66 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * The Wunderbyte table class is an extension of the tablelib table_sql class.
+ *
+ * @package local_wunderbyte_table
+ * @copyright 2023 Wunderbyte Gmbh <[email protected]>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+// phpcs:ignoreFile
+
+namespace local_wunderbyte_table\dynamicactionelements;
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Wunderbyte table demo class.
+ */
+class dynamicselect {
+    /**
+     * Returns data format
+     * @param string $valueid
+     * @param string $uniqueid
+     * @return array
+     */
+    public static function generate_data($valueid, $uniqueid) {
+        return [
+            'isselect' => true,
+            'id' => $valueid . '-' . $uniqueid,
+            'name' => $uniqueid . '-' . $valueid,
+            'class' => 'form-select',
+            'methodname' => 'selectoption',
+            'data' => [
+                'id' => $valueid,
+            ],
+            'options' => self::get_options(),
+        ];
+    }
+
+    /**
+     * Returns data format
+     * @return array
+     */
+    private static function get_options() {
+        return [
+            ['value' => '', 'text' => 'Please select something', 'disabled' => true, 'selected' => true],
+            ['value' => 'option1', 'text' => 'Option 1'],
+            ['value' => 'option2', 'text' => 'Option 2'],
+            ['value' => 'option3', 'text' => 'Option 3'],
+        ];
+    }
+}

classes/dynamicactionelements/dynamictextinput.php

@@ -0,0 +1,54 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * The Wunderbyte table class is an extension of the tablelib table_sql class.
+ *
+ * @package local_wunderbyte_table
+ * @copyright 2023 Wunderbyte Gmbh <[email protected]>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+// phpcs:ignoreFile
+
+namespace local_wunderbyte_table\dynamicactionelements;
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Wunderbyte table demo class.
+ */
+class dynamictextinput {
+    /**
+     * Returns data format for text input
+     * @param string $valueid
+     * @param string $uniqueid
+     * @return array
+     */
+    public static function generate_data($valueid, $uniqueid) {
+        return [
+            'istextinput' => true,
+            'id' => $valueid . '-' . $uniqueid,
+            'name' => $uniqueid . '-' . $valueid,
+            'class' => 'form-control',
+            'methodname' => 'textinputchange',
+            'data' => [
+                'id' => $valueid,
+                'placeholder' => 'Enter some text...',
+                'maxlength' => 255,
+            ]
+        ];
+    }
+}

classes/external/execute_action.php

@@ -78,7 +78,8 @@ public static function execute(
         string $methodname,
         string $encodedtable,
         int $id,
-        string $data) {
+        string $data
+    ) {
 
         global $USER, $PAGE;