Bug 30549: Replace the use of jQueryUI Accordion on pending patron updates page
authorOwen Leonard <oleonard@myacpl.org>
Thu, 14 Apr 2022 18:02:22 +0000 (18:02 +0000)
committerFridolin Somers <fridolin.somers@biblibre.com>
Thu, 5 May 2022 00:29:24 +0000 (14:29 -1000)
This patch updates the pending patron updates page to use Bootstrap
collapse instead of jQueryUI.

This patch contains whitespace changes, so view the diff with this in
mind.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- If necessary, log into the OPAC and submit an update via the "Your
  personal details" page. Ideally do this for two or more patrons.
- In the staff client, follow the "Patrons requesting modifications"
  link.
- On the "Update patron records" page you should see the headings
  representing each of the patrons with pending updates. The first panel
  should be expanded.
- Confirm that the panels expand and collapse correctly.
- Follow the "Patron details" link for one of these patrons.
- Click the "Review pending modifications" link on the patron detail
  page.
- When the update page opens that patron's panel should be expanded.

Signed-off-by: Lisette Scheer <lisetteslatah@gmail.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
koha-tmpl/intranet-tmpl/prog/en/modules/members/members-update.tt

index b269c15..9384c65 100644 (file)
             <h1>Update patron records</h1>
             [% IF PendingModifications %]
                 <form method="post" action="members-update-do.pl">
-                    <div id="pending_updates">
-                            [% FOREACH pm IN PendingModifications %]
-                                [% SET borrowernumber = pm.borrowernumber %]
-                                <h3 class="panel-header" id="panel-header-[% pm.borrowernumber | html %]"><a href="#panel_modify_[% pm.borrowernumber | uri %]">[% borrowers.$borrowernumber.surname | html %][% IF ( borrowers.$borrowernumber.firstname ) %], [% borrowers.$borrowernumber.firstname | html %][% END %] - [% Categories.GetName( borrowers.$borrowernumber.categorycode ) | html %] ([% Branches.GetName( borrowers.$borrowernumber.branchcode ) | html %]) ([% borrowers.$borrowernumber.cardnumber | html %]) - Requested on [% pm.timestamp | $KohaDates with_hours = 1 %]</a></h3>
-                                <div id="panel_modify_[% pm.borrowernumber | html %]">
-                                    <div class="btn-toolbar">
-                                        <input type="radio" id="approve_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="approve" />
-                                        <label for="approve_modify_[% pm.borrowernumber | html %]">Approve</label>
-
-                                        <input type="radio" id="deny_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="deny" />
-                                        <label for="deny_modify_[% pm.borrowernumber | html %]">Deny</label>
-
-                                        <input type="radio" id="ignore_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="ignore" checked="checked"/>
-                                        <label for="ignore_modify_[% pm.borrowernumber | html %]">Ignore</label>
-                                        | <a target="_blank" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% pm.borrowernumber | html %]" >Patron details</a>
-                                    </div>
-
-                                    [% IF borrowers.$borrowernumber.gonenoaddress > 0 %]
-                                        <div class="dialog message" style="margin-top:.8em">
-                                            <h4>Patron's address in doubt</h4>
-                                            <p>The <strong>Gone no address</strong> flag is set for this patron. If this modification request resolves the issue, please unset the flag.</p>
-                                            <input type="checkbox" id="unset_gna_[% pm.borrowernumber | html %]" name="unset_gna_[% pm.borrowernumber | html %]" value="unset_gna_[% pm.borrowernumber | html %]"/>
-                                            <label for="unset_gna_[% pm.borrowernumber | html %]">Unset Gone no address for this patron</label>
+                    <div id="pending_updates" class="panel-group" role="tablist" aria-multiselectable="true">
+                        [% FOREACH pm IN PendingModifications %]
+                            [% SET borrowernumber = pm.borrowernumber %]
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="panel-header-[% pm.borrowernumber | html %]">
+                                    <h3 class="panel-title">
+                                        <a role="button" class="collapsed" data-toggle="collapse" data-parent="#pending_updates" aria-controls="panel_modify_[% pm.borrowernumber | html %]" href="#panel_modify_[% pm.borrowernumber | uri %]">[% borrowers.$borrowernumber.surname | html %][% IF ( borrowers.$borrowernumber.firstname ) %], [% borrowers.$borrowernumber.firstname | html %][% END %] - [% Categories.GetName( borrowers.$borrowernumber.categorycode ) | html %] ([% Branches.GetName( borrowers.$borrowernumber.branchcode ) | html %]) ([% borrowers.$borrowernumber.cardnumber | html %]) - Requested on [% pm.timestamp | $KohaDates with_hours = 1 %]</a>
+                                    </h3>
+                                </div> <!-- /.panel-heading -->
+                                <div id="panel_modify_[% pm.borrowernumber | html %]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="panel-header-[% pm.borrowernumber | html %]">
+                                    <div class="panel-body">
+                                        <div class="btn-toolbar">
+                                            <input type="radio" id="approve_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="approve" />
+                                            <label for="approve_modify_[% pm.borrowernumber | html %]">Approve</label>
+
+                                            <input type="radio" id="deny_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="deny" />
+                                            <label for="deny_modify_[% pm.borrowernumber | html %]">Deny</label>
+
+                                            <input type="radio" id="ignore_modify_[% pm.borrowernumber | html %]" name="modify_[% pm.borrowernumber | html %]" value="ignore" checked="checked"/>
+                                            <label for="ignore_modify_[% pm.borrowernumber | html %]">Ignore</label>
+                                            | <a target="_blank" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% pm.borrowernumber | html %]" >Patron details</a>
                                         </div>
-                                    [% END %]
-
-                                  [% IF !pm.extended_attributes and pm.size > 3 or pm.extended_attributes and pm.size > 4 %]
-                                  [%# timestamp+verification_token+borrowernumber=3 %]
-                                    <div class="members-update-table">
-                                        <table>
-                                            <tr>
-                                                <th>Field</th>
-                                                <th>Old value</th>
-                                                <th>New value</th>
-                                            </tr>
-
-
-                                            [% FOREACH key IN pm.keys %]
-                                                [% IF ( key != "timestamp" and key != "extended_attributes" ) %]
-                                                    [% IF ( ( pm.$key OR borrowers.$borrowernumber.$key ) && ( pm.$key != borrowers.$borrowernumber.$key ) ) %]
-                                                        <tr>
-                                                            <td>[% PROCESS display_names field = key %]</td>
-                                                            [% IF ( key == "dateofbirth" ) %]
-                                                                <td>[% borrowers.$borrowernumber.$key | $KohaDates %]</td>
-                                                                <td>[% pm.$key | $KohaDates %]</td>
-                                                            [% ELSIF key == 'branchcode' %]
-                                                                <td>[% Branches.GetName( borrowers.$borrowernumber.$key ) | html %]</td>
-                                                                <td>[% Branches.GetName( pm.$key ) | html %]</td>
-                                                            [% ELSE %]
-                                                                <td>[% borrowers.$borrowernumber.$key | html %]</td>
-                                                                <td>[% pm.$key | html %]</td>
+
+                                        [% IF borrowers.$borrowernumber.gonenoaddress > 0 %]
+                                            <div class="dialog message" style="margin-top:.8em">
+                                                <h4>Patron's address in doubt</h4>
+                                                <p>The <strong>Gone no address</strong> flag is set for this patron. If this modification request resolves the issue, please unset the flag.</p>
+                                                <input type="checkbox" id="unset_gna_[% pm.borrowernumber | html %]" name="unset_gna_[% pm.borrowernumber | html %]" value="unset_gna_[% pm.borrowernumber | html %]"/>
+                                                <label for="unset_gna_[% pm.borrowernumber | html %]">Unset Gone no address for this patron</label>
+                                            </div>
+                                        [% END %]
+
+                                        [% IF !pm.extended_attributes and pm.size > 3 or pm.extended_attributes and pm.size > 4 %]
+                                            [%# timestamp+verification_token+borrowernumber=3 %]
+                                            <div class="members-update-table">
+                                                <table>
+                                                    <tr>
+                                                        <th>Field</th>
+                                                        <th>Old value</th>
+                                                        <th>New value</th>
+                                                    </tr>
+
+
+                                                    [% FOREACH key IN pm.keys %]
+                                                        [% IF ( key != "timestamp" and key != "extended_attributes" ) %]
+                                                            [% IF ( ( pm.$key OR borrowers.$borrowernumber.$key ) && ( pm.$key != borrowers.$borrowernumber.$key ) ) %]
+                                                                <tr>
+                                                                    <td>[% PROCESS display_names field = key %]</td>
+                                                                    [% IF ( key == "dateofbirth" ) %]
+                                                                        <td>[% borrowers.$borrowernumber.$key | $KohaDates %]</td>
+                                                                        <td>[% pm.$key | $KohaDates %]</td>
+                                                                    [% ELSIF key == 'branchcode' %]
+                                                                        <td>[% Branches.GetName( borrowers.$borrowernumber.$key ) | html %]</td>
+                                                                        <td>[% Branches.GetName( pm.$key ) | html %]</td>
+                                                                    [% ELSE %]
+                                                                        <td>[% borrowers.$borrowernumber.$key | html %]</td>
+                                                                        <td>[% pm.$key | html %]</td>
+                                                                    [% END %]
+                                                                </tr>
                                                             [% END %]
+                                                        [% END %]
+                                                    [% END %]
+                                                </table>
+                                            </div> <!-- /.members-update-table -->
+                                        [% END # /!pm.extended_attributes %]
+                                        [% IF borrowers.$borrowernumber.modified_attributes %]
+                                            <div class="members-update-table">
+                                                <h4>[% PROCESS display_names field='extended_attributes' %]</h4>
+                                                <table>
+                                                    <tr>
+                                                        <th>Field</th>
+                                                        <th>Old value</th>
+                                                        <th>New value</th>
+                                                    </tr>
+                                                    [% FOREACH attribute_group IN borrowers.$borrowernumber.modified_attributes %]
+                                                        <tr>
+                                                            <td>[% attribute_group.type.description | html %]</td>
+                                                            <td>[% PROCESS display_extended_attributes attrs=attribute_group.before type=attribute_group.type %]</td>
+                                                            <td>[% PROCESS display_extended_attributes attrs=attribute_group.after type=attribute_group.type %]</td>
                                                         </tr>
                                                     [% END %]
-                                                [% END %]
-                                            [% END %]
-                                        </table>
-                                    </div>
-                                  [%  END %]
-                                  [% IF borrowers.$borrowernumber.modified_attributes %]
-                                    <div class="members-update-table">
-                                        <h4>[% PROCESS display_names field='extended_attributes' %]</h4>
-                                        <table>
-                                            <tr>
-                                                <th>Field</th>
-                                                <th>Old value</th>
-                                                <th>New value</th>
-                                            </tr>
-                                          [% FOREACH attribute_group IN borrowers.$borrowernumber.modified_attributes %]
-                                            <tr>
-                                                <td>[% attribute_group.type.description | html %]</td>
-                                                <td>[% PROCESS display_extended_attributes attrs=attribute_group.before type=attribute_group.type %]</td>
-                                                <td>[% PROCESS display_extended_attributes attrs=attribute_group.after type=attribute_group.type %]</td>
-                                            </tr>
-                                          [% END %]
-                                        </table>
-                                    </div>
-                                  [%  END %]
-                                </div>
-                            [% END %]
-                        </div>
+                                                </table>
+                                            </div> <!-- /.members-update-table -->
+                                        [% END # / borrowers.$borrowernumber.modified_attributes %]
+                                    </div> <!-- /.panel-body -->
+                                </div> <!-- /.panel-collapse.collapse -->
+                            </div> <!-- /panel.panel-default -->
+                        [% END # /FOREACH pm %]
+                    </div> <!-- /#pending-updates -->
                     <fieldset class="action"><input type="submit" value="Submit" /></fieldset>
                 </form>
             [% ELSE %]
-            <div class="dialog message">
-                <p>There are no pending patron modifications.</p>
-            </div>
+                <div class="dialog message">
+                    <p>There are no pending patron modifications.</p>
+                </div>
             [% END %]
 
         </div>
     [% INCLUDE 'str/members-menu.inc' %]
     [% Asset.js("js/members-menu.js") | $raw %]
     <script>
-        $(function() {
-            $( "#pending_updates" ).accordion({
-                collapsible: true,
-                heightStyle: "content",
-                header: ".panel-header",
-                [%- IF ( active ) -%]
-                    active: $(".panel-header").index( $("#panel-header-[% active | html %]") )
-                [%- ELSE -%]
-                    active: 0
-                [%- END -%]
-            });
+        $(document).ready(function(){
+            [%- IF ( active ) -%]
+                $("#pending_updates a[href='#panel_modify_" + [% active | html %] + "']").click();
+            [%- ELSE -%]
+                $("#pending_updates a.collapsed:eq(0)").click();
+            [%- END -%]
         });
     </script>
 [% END %]