refactor: migrate config form to Twig template

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [UNRELEASED]
 
+### Changed
+
+- Migrate config form to Twig template (Bootstrap 5 card layout)
+
 ### Fixed
 
 - Fix tag search

inc/config.class.php

@@ -28,13 +28,14 @@
  * -------------------------------------------------------------------------
  */
 
+use Glpi\Application\View\TemplateRenderer;
+
 class PluginTagConfig extends CommonDBTM
 {
     protected static $notable = true;
 
     public function getTabNameForItem(CommonGLPI $item, $withtemplate = 0)
     {
-
         if (!$withtemplate && $item->getType() === 'Config') {
             return self::createTabEntry(__s('Tag Management', 'tag'), 0, $item::getType(), PluginTagTag::getIcon());
         }
@@ -50,35 +51,14 @@ public function showConfigForm()
 
         $config = Config::getConfigurationValues('plugin:Tag');
 
-        echo "<form name='form' action=\"" . Toolbox::getItemTypeFormURL('Config') . "\" method='post'>";
-        echo "<input type='hidden' name='config_class' value='" . self::class . "'>";
-        echo "<input type='hidden' name='config_context' value='plugin:Tag'>";
-        echo "<div class='center' id='tabsbody'>";
-        echo "<table class='tab_cadre_fixe'><thead>";
-        echo "<th colspan='4'>" . __s('Tag Management', 'tag') . '</th></thead>';
-        echo '<td>' . __s('Tags location', 'tag') . '</td><td>';
-        Dropdown::showFromArray(
-            'tags_location',
-            [
-                __s('Top'),
-                __s('Bottom'),
-            ],
-            [
-                'value'  => $config['tags_location'] ?? 0,
-            ],
-        );
-        echo '</td></tr>';
-        echo '</table>';
+        TemplateRenderer::getInstance()->display('@tag/forms/config.html.twig', [
+            'form_action'    => Toolbox::getItemTypeFormURL('Config'),
+            'config_class'   => self::class,
+            'config_context' => 'plugin:Tag',
+            'tags_location'  => (int) ($config['tags_location'] ?? 0),
+        ]);
 
-        echo "<table class='tab_cadre_fixe'>";
-        echo "<tr class='tab_bg_2'>";
-        echo "<td colspan='4' class='center'>";
-        echo "<input type='submit' name='update' class='submit' value=\"" . _sx('button', 'Save') . '">';
-        echo '</td></tr>';
-        echo '</table>';
-        echo '</div>';
-        Html::closeForm();
-        return null;
+        return true;
     }
 
     public static function displayTabContentForItem(CommonGLPI $item, $tabnum = 1, $withtemplate = 0)

templates/forms/config.html.twig

@@ -0,0 +1,60 @@
+{#
+ # -------------------------------------------------------------------------
+ # Tag plugin for GLPI
+ # -------------------------------------------------------------------------
+ #
+ # LICENSE
+ #
+ # This file is part of Tag.
+ #
+ # Tag 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 2 of the License, or
+ # (at your option) any later version.
+ #
+ # Tag 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 Tag. If not, see <http://www.gnu.org/licenses/>.
+ # -------------------------------------------------------------------------
+ # @copyright Copyright (C) 2014-2023 by Teclib'.
+ # @license   GPLv2 https://www.gnu.org/licenses/gpl-2.0.html
+ # @link      https://github.com/pluginsGLPI/tag
+ # -------------------------------------------------------------------------
+ #}
+
+{% import 'components/form/fields_macros.html.twig' as fields %}
+
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">{{ __('Tag Management', 'tag') }}</h3>
+    </div>
+
+    <form method="post" action="{{ form_action }}">
+        <input type="hidden" name="config_class"   value="{{ config_class }}">
+        <input type="hidden" name="config_context" value="{{ config_context }}">
+        <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}">
+
+        <div class="card-body row">
+            {{ fields.dropdownArrayField(
+                'tags_location',
+                tags_location,
+                {
+                    0: __('Top'),
+                    1: __('Bottom')
+                },
+                __('Tags location', 'tag')
+            ) }}
+        </div>
+
+        <div class="card-footer mx-n2 mb-n3 d-flex">
+            <button type="submit" name="update" class="btn btn-primary ms-auto">
+                <i class="ti ti-device-floppy me-1"></i>
+                {{ __('Save') }}
+            </button>
+        </div>
+    </form>
+</div>