From 409fe4964393beebc2533a415530464ee27a9522 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 7 Mar 2023 14:28:23 +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        | 74 ++++++++-----------
 1 file changed, 29 insertions(+), 45 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 e3c54aae33..451cf1ca36 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt
@@ -238,61 +238,44 @@ Item types &rsaquo; Administration &rsaquo; Koha
                 [% END %]
             </ol>
             [% UNLESS Koha.Preference('noItemTypeImages') && Koha.Preference('OpacNoItemTypeImages') %]
-                    <h5>Choose an icon:</h5>
+                <h5>Choose an icon:</h5>
 
-                    [% WRAPPER tabs id= "icons" %]
-
-                        [% WRAPPER tabs_nav %]
-                            [% WRAPPER tab_item tabname= "none" bt_active= 1 %] <span>None</span> [% END %]
-                            [% WRAPPER tab_item tabname= "tab_name_2" %] content [% END %]
-                        [% END # /WRAPPER tabs_nav %]
-
-                        [% WRAPPER tab_panels %]
-                            [% WRAPPER tab_panel tabname="tab_name_1" bt_active= 1 %]
-                                content
-                            [% END %]
-                            [% WRAPPER tab_panel tabname="tab_name_2" %]
-                                content
-                            [% END %]
-                        [% END # /WRAPPER tab_panels %]
-
-                    [% END # /WRAPPER tabs %]
-                    <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 id= "icons" %]
+                    [% 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>
@@ -307,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" />
@@ -327,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