From f93eaedd6c1576b79018f0c4a827cdf232735f7e Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 6 Mar 2023 18:54:22 +0000
Subject: [PATCH] Bug 33157: Use template wrapper for item types administration
 tabs

This patch updates the item types administration template so that it
uses the new WRAPPER directive to build tabbed navigation.

To test, apply the patch and go to Administration -> Item types.

- Edit an item type.
- On the edit page you should see tabs under "Choose an icon."
- Confirm that the tabs look correct and work correctly.
- If you did not previously have any icon selected, the "None" tab
  should be active.
- If you had an icon selected, that icon set's tab should be active.
- Confirm that if you specify a remote image
  (e.g.https://via.placeholder.com/50/FF0000/FFFFFF.png) the tab is
  correctly shown after you save and re-edit.
- Confirm that changing icons works correctly and that the selected
  icon's tab is always active when you return to the edit view.
---
 .../prog/en/modules/admin/itemtypes.tt        | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
index ee95cd7f1e..f8f27cab43 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
@@ -238,44 +238,44 @@ Item types &rsaquo; Administration &rsaquo; Koha
                 [% END %]
             </ol>
             [% UNLESS Koha.Preference('noItemTypeImages') && Koha.Preference('OpacNoItemTypeImages') %]
-                <div id="icons" class="toptabs">
+
+                [% WRAPPER tabs id= "icons" %]
                     <h5>Choose an icon:</h5>
-                    <ul class="nav nav-tabs" role="tablist">
-                        <li role="presentation">
-                            <a aria-controls="non" role="tab" data-toggle="tab" href="#none">None</a>
-                        </li>
+                    [% WRAPPER tabs_nav %]
+                        [% WRAPPER tab_item tabname="none" %]
+                            <span>None</span>
+                        [% END %]
                         [% FOREACH imageset IN imagesets %]
                             [% IF ( imageset.imagesetactive ) %]
-                                <li role="presentation" class="active">
+                                [% SET bt_active = 1 %]
                             [% ELSE %]
-                                <li role="presentation">
+                                [% SET bt_active = 0 %]
                             [% END %]
-                                <a aria-controls="[% imageset.imagesetname | uri %]" role="tab" data-toggle="tab" href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a>
-                            </li>
+                            [% WRAPPER tab_item tabname= imageset.imagesetname bt_active= bt_active %] [% imageset.imagesetname | html %] [% END %]
                         [% END %]
                         [% IF itemtype.image_location('intranet').match('^http') %]
-                            <li role="presentation" class="active">
+                            [% SET bt_active = 1 %]
                         [% ELSE %]
-                            <li role="presentation">
+                            [% SET bt_active = 0 %]
                         [% END %]
-                            <a aria-controls="remote" role="tab" data-toggle="tab" href="#remote">Remote image</a>
-                        </li>
-                    </ul>
-                    <div class="tab-content">
-                        <div id="none" role="tabpanel" class="tab-pane">
+                        [% WRAPPER tab_item tabname= "remote" bt_active= bt_active %] <span>Remote image</span> [% END %]
+                    [% END %]
+
+                    [% WRAPPER tab_panels %]
+                        [% WRAPPER tab_panel tabname="none" %]
                             <div class="itemtype-icons">
                                 <label for="noimage">No image:
                                     <input type="radio" name="image" id="noimage" value="removeImage" />
                                 </label>
                             </div>
-                        </div> <!-- /.tab-pane -->
-
+                        [% END %]
                         [% FOREACH imageset IN imagesets %]
                             [% IF ( imageset.imagesetactive ) %]
-                                <div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane active">
+                                [% SET bt_active = 1 %]
                             [% ELSE %]
-                                <div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane">
+                                [% SET bt_active = 0 %]
                             [% END %]
+                            [% WRAPPER tab_panel tabname=imageset.imagesetname bt_active= bt_active %]
                                 <div class="itemtype-icons">
                                     [% FOREACH image IN imageset.images %]
                                         <label>
@@ -290,15 +290,15 @@ Item types &rsaquo; Administration &rsaquo; Koha
                                         </label>
                                     [% END #/ FOREACH image %]
                                 </div> <!-- /.itemtype-icons -->
-                            </div> <!-- /.tab-pane -->
-                        [% END #/FOREACH imageset %]
-
+                            [% END # /tab_panel %]
+                        [% END # /FOREACH imageset %]
                         [% SET image_location = itemtype.image_location('intranet') %]
                         [% IF image_location.match('^http') %]
-                            <div id="remote" role="tabpanel" class="tab-pane active">
+                            [% SET bt_active = 1 %]
                         [% ELSE %]
-                            <div id="remote" role="tabpanel" class="tab-pane">
+                            [% SET bt_active = 0 %]
                         [% END %]
+                        [% WRAPPER tab_panel tabname="remote" %]
                             <label for="remote_image_check"> Remote image:</label>
                             [% IF image_location.match('^http') %]
                                 <input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
@@ -310,9 +310,10 @@ Item types &rsaquo; Administration &rsaquo; Koha
                                 <input type="radio" id="remote_image_check" name="image" value="remoteImage" />
                                 <input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
                             [% END %]
-                        </div> <!-- /#remote -->
-                    </div> <!-- /.tab-content -->
-                </div> <!-- /#icons -->
+                        [% END %]
+                    [% END # /tab_panels %]
+                [% END # /tabs#icons %]
+
             [% END %]
             <ol class="oladditemtype">
                 <li>
-- 
2.30.2