From 7d0673844cff8315f0e9c1fa8b80501b78e48947 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 8 Apr 2022 12:20:00 +0000
Subject: [PATCH] Bug 30545: Replace the use of jQueryUI Accordion on the
notices page
This patch updates the notices edit interface in order to replace
jQueryUI accordion and tabs widgets with Bootstrap collapse and tabs.
To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Set the TranslateNotices system preference to "Don't allow."
- Go to Tools -> Notices and edit any notice.
- On the "Modify notice" page you should see three collapsed sections:
Email, Print, and SMS.
- Clicking the section headings should expand and collapse the panels.
- With one of the panels open, click Save -> Save and continue editing.
- When the page reloads the same panel should be expanded.
- Enable the TranslateNotices system preference.
- Return to the edit interface for one of your notices.
- You should now see at least two tabs: Default and English.
- The sections under each tab should continue to work correctly.
- Test the "Save and continue" functionality again. When redirected you
should return to both the correct tab and the correct panel, e.g. the
"Print" section under the "English (en)" tab.
---
.../prog/en/modules/tools/letter.tt | 219 +++++++++++-------
koha-tmpl/intranet-tmpl/prog/js/letter.js | 37 +--
tools/letter.pl | 4 +-
3 files changed, 158 insertions(+), 102 deletions(-)
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
index f2337e39e9..7997752a30 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
@@ -22,7 +22,30 @@
Notices › Tools › Koha
</title>
[% INCLUDE 'doc-head-close.inc' %]
-<style>#preview_template .modal-dialog { width : 80%; } .spinner { display: none; } @media (max-width: 767px) { #preview_template { margin: 0; width : auto; } }</style>
+[% FILTER collapse %]
+ <style>
+ #preview_template .modal-dialog {
+ width : 80%;
+ }
+ .spinner {
+ display: none;
+ }
+ @media (max-width: 767px) {
+ #preview_template {
+ margin: 0; width : auto;
+ }
+ }
+ .panel-body fieldset.rows {
+ border: 0;
+ background: transparent none;
+ margin: 0 0 .5em 0;
+ }
+ #tabs,
+ .panel-group {
+ margin-top: 3px;
+ }
+ </style>
+[% END %]
</head>
<body id="tools_letter" class="tools">
@@ -416,112 +439,134 @@
[% IF Koha.Preference('TranslateNotices') %]
<div style="clear:both"></div>
<div id="tabs">
- <ul>
- <li><a href="#lang_default">Default</a></li>
+ <!-- Nav tabs -->
+ <ul class="nav nav-tabs" role="tablist">
+ <li role="presentation">
+ <a href="#lang_default" aria-controls="lang_default" role="tab" data-toggle="tab">Default</a>
+ </li>
[% FOR language IN languages %]
[% FOR sublanguage IN language.sublanguages_loop %]
[% IF language.plural %]
- <li><a href="#lang_[% sublanguage.rfc4646_subtag | uri %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</a></li>
+ <li role="presentation">
+ <a href="#lang_[% sublanguage.rfc4646_subtag | uri %]" aria-controls="lang_[% sublanguage.rfc4646_subtag | uri %]" role="tab" data-toggle="tab">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</a>
+ </li>
[% ELSE %]
- <li><a href="#lang_[% sublanguage.rfc4646_subtag | uri %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</a></li>
+ <li role="presentation">
+ <a href="#lang_[% sublanguage.rfc4646_subtag | uri %]" aria-controls="lang_[% sublanguage.rfc4646_subtag | uri %]" role="tab" data-toggle="tab">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</a>
+ </li>
[% END %]
[% END %]
[% END %]
</ul>
+ <div class="tab-content">
+ [% ELSE %]
+ <div style="clear:both"></div>
[% END # /IF TranslateNotices %]
[% FOREACH lang IN letters.keys %]
- <div id="lang_[% lang | html %]">
- <div class="transport-types" style="clear:both">
- [% FOR mtt IN letters.$lang.templates.keys.sort %]
- [% SET letter = letters.$lang.templates.$mtt %]
- [% NEXT IF letter.message_transport_type == "itiva" && !Koha.Preference('TalkingTechItivaPhoneNotification') %]
- [% NEXT IF letter.message_transport_type == "phone" && !Koha.Preference('PhoneNotification') %]
- <h3>
- [% SWITCH letter.message_transport_type %]
- [% CASE 'email' %]
- Email
- [% CASE 'print' %]
- Print
- [% CASE 'sms' %]
- SMS
- [% CASE 'feed' %]
- Feed
- [% CASE 'itiva' %]
- Phone ( Itiva )
- [% CASE 'phone' %]
- Phone
- [% CASE %]
- [% letter.message_transport_type | html %]
- [% END %]
- </h3>
- [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
- <fieldset class="rows mtt" id="[% letter.message_transport_type | html %]_[% lang | html %]" disabled="disabled">
- <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
- [% ELSE %]
- <fieldset class="rows mtt" id="[% letter.message_transport_type | html %]_[% lang | html %]">
- [% END %]
- <ol>
- [% IF ( letter.updated_on ) %]
- <li>
- <label for="updated_on_[% letter.message_transport_type | html %]_[% lang | html %]">Last updated:</label>
- [% letter.updated_on | $KohaDates with_hours = 1 %]
- </li>
- [% END %]
- <li>
- <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type | html %]" />
- <input type="hidden" name="lang" value="[% lang | html %]" />
- <label for="is_html_[% letter.message_transport_type | html %]_[% lang | html %]">HTML message:</label>
- [% IF letter.is_html %]
- <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" checked="checked" />
- [% ELSE %]
- <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" />
+ <div role="tabpanel" class="tab-pane" id="lang_[% lang | html %]">
+ <div class="panel-group" id="group_[% lang | html %]" role="tablist" aria-multiselectable="true">
+ [% FOR mtt IN letters.$lang.templates.keys.sort %]
+ [% SET letter = letters.$lang.templates.$mtt %]
+ [% NEXT IF letter.message_transport_type == "itiva" && !Koha.Preference('TalkingTechItivaPhoneNotification') %]
+ [% NEXT IF letter.message_transport_type == "phone" && !Koha.Preference('PhoneNotification') %]
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="[% letter.message_transport_type | html %]_[% lang | html %]Heading">
+ <h3 class="panel-title">
+ <a role="button" class="collapsed" data-toggle="collapse" data-parent="#group_[% lang | html %]" href="#[% letter.message_transport_type | html %]_[% lang | html %]" aria-expanded="false" aria-controls="[% letter.message_transport_type | html %]_[% lang | html %]">
+ [% SWITCH letter.message_transport_type %]
+ [% CASE 'email' %]
+ Email
+ [% CASE 'print' %]
+ Print
+ [% CASE 'sms' %]
+ SMS
+ [% CASE 'feed' %]
+ Feed
+ [% CASE 'itiva' %]
+ Phone ( Itiva )
+ [% CASE 'phone' %]
+ Phone
+ [% CASE %]
+ [% letter.message_transport_type | html %]
[% END %]
- </li>
- <li>
- <label for="title_[% letter.message_transport_type | html %]_[% lang | html %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type | html %]_[% lang | html %]" name="title" size="60" value="[% letter.title | html %]" />
- </li>
- <li>
- <label for="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]">Message body:</label>
- [% IF letter.message_transport_type == 'sms' %]
- <span class="sms_counter" id="sms_counter_[% lang | html %]">[% IF letter.content && letter.content.length > 0 %][% letter.content.length | html %][% ELSE %]0[% END %]/160 characters</span>
- [% END %]
- <table>
- <tr>
- <td>
- <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]" multiple="multiple" size="9">
- [% FOREACH SQLfieldname IN SQLfieldnames %]
- <option value="[% SQLfieldname.value | html %]">[% SQLfieldname.text | html %]</option>
- [% END %]
- </select>
- </td>
- <td class="actions">
- <button type="button" data-containerid="[% letter.message_transport_type | html %]_[% lang | html %]" class="btn btn-default btn-sm insert">Insert <i class="fa fa-long-arrow-right"></i></button>
- </td>
- <td>
- <textarea name="content" data-lang="[% lang | html %]" class="content_[% letter.message_transport_type | html %]" id="content_[% letter.message_transport_type | html %]_[% lang | html %]" cols="80" rows="15">[% letter.content | html %]</textarea>
- </td>
- </tr>
- </table>
- </li>
- [% IF preview_is_available %]
- <li>
- <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type | html %]" data-lang="[% lang | html %]"><i class="fa fa-eye"></i> Preview</a>
- </li>
+ </a>
+ </h3>
+ </div> <!-- /.panel-heading -->
+ <div id="[% letter.message_transport_type | html %]_[% lang | html %]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="[% letter.message_transport_type | html %]_[% lang | html %]Heading">
+ <div class="panel-body">
+ [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
+ <fieldset class="rows mtt" disabled="disabled">
+ <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
+ [% ELSE %]
+ <fieldset class="rows mtt">
[% END %]
- </ol>
- </fieldset> <!-- /.rows.mtt -->
- [% END # /FOR mtt %]
- </div>
- </div> <!-- / #transport-types -->
+ <ol>
+ [% IF ( letter.updated_on ) %]
+ <li>
+ <span class="label">Last updated:</span>
+ [% letter.updated_on | $KohaDates with_hours = 1 %]
+ </li>
+ [% END %]
+ <li>
+ <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type | html %]" />
+ <input type="hidden" name="lang" value="[% lang | html %]" />
+ <label for="is_html_[% letter.message_transport_type | html %]_[% lang | html %]">HTML message:</label>
+ [% IF letter.is_html %]
+ <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" checked="checked" />
+ [% ELSE %]
+ <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" />
+ [% END %]
+ </li>
+ <li>
+ <label for="title_[% letter.message_transport_type | html %]_[% lang | html %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type | html %]_[% lang | html %]" name="title" size="60" value="[% letter.title | html %]" />
+ </li>
+ <li>
+ <label for="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]">Message body:</label>
+ [% IF letter.message_transport_type == 'sms' %]
+ <span class="sms_counter" id="sms_counter_[% lang | html %]">[% IF letter.content && letter.content.length > 0 %][% letter.content.length | html %][% ELSE %]0[% END %]/160 characters</span>
+ [% END %]
+ <table>
+ <tr>
+ <td>
+ <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]" multiple="multiple" size="9">
+ [% FOREACH SQLfieldname IN SQLfieldnames %]
+ <option value="[% SQLfieldname.value | html %]">[% SQLfieldname.text | html %]</option>
+ [% END %]
+ </select>
+ </td>
+ <td class="actions">
+ <button type="button" data-containerid="[% letter.message_transport_type | html %]_[% lang | html %]" class="btn btn-default btn-sm insert">Insert <i class="fa fa-long-arrow-right"></i></button>
+ </td>
+ <td>
+ <textarea name="content" data-lang="[% lang | html %]" class="content_[% letter.message_transport_type | html %]" id="content_[% letter.message_transport_type | html %]_[% lang | html %]" cols="80" rows="15">[% letter.content | html %]</textarea>
+ </td>
+ </tr>
+ </table>
+ </li>
+ [% IF preview_is_available %]
+ <li>
+ <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type | html %]" data-lang="[% lang | html %]"><i class="fa fa-eye"></i> Preview</a>
+ </li>
+ [% END %]
+ </ol>
+ </fieldset> <!-- /.rows.mtt -->
+ </div> <!-- /.panel-body -->
+ </div> <!-- /.panel-collapse -->
+ </div> <!-- /.panel.panel-default -->
+ [% END # /FOR mtt %]
+ </div> <!-- /.panel-group#lang_[% lang | html %] -->
+ </div> <!-- /.tab-panel -->
[% END # /FOREACH lang %]
[% IF Koha.Preference('TranslateNotices') %]
- </div>
+ </div> <!-- /.tab-content -->
+ </div> <!-- /#tabs -->
[% END %]
<input type="hidden" id="redirect" name="redirect" value="" />
<input type="hidden" id="section" name="section" value="[% section | html %]" />
+ <input type="hidden" id="langtab" name="langtab" value="[% langtab | html %]" />
<input type="hidden" name="searchfield" value="[% searchfield | html %]" />
</form> <!-- /#add_notice -->
[% END # /IF add_form %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/letter.js b/koha-tmpl/intranet-tmpl/prog/js/letter.js
index 84e63c9d96..3eeee72a57 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/letter.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/letter.js
@@ -128,20 +128,31 @@ $(document).ready(function() {
}
});
- $( ".transport-types" ).accordion({
- collapsible: true,
- active: parseInt( $("#section").val(), 10),
- animate: 200,
- activate: function() {
- var active = $( ".transport-types" ).accordion( "option", "active" );
- if( active === false ){
- $("#section").val("");
- } else {
- $("#section").val( active );
- }
- }
+ let section = $("#section").val();
+ if( section != "" ){
+ $("a[href='#" + section + "']").click();
+ }
+
+ $(".panel-group").on("shown.bs.collapse", function (e) {
+ $("#section").val( e.target.id );
+ }).on("hidden.bs.collapse", function (e) {
+ $("#section").val("");
});
+ if( $("#tabs").length > 0 ){
+ let langtab = $("#langtab").val();
+ $("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
+ var link = e.target.hash.replace("#","");
+ $("#langtab").val( link );
+ });
+
+ if( langtab != "" ){
+ $("#tabs a[href='#" + langtab + "']").tab("show");
+ } else {
+ $("#tabs a:first").tab("show");
+ }
+ }
+
$(".insert").on("click",function(){
var containerid = $(this).data("containerid");
insertValueQuery( containerid );
@@ -153,8 +164,6 @@ $(document).ready(function() {
$("#submit_form").click();
});
- $("#tabs").tabs();
-
$("body").on("click", ".preview_template", function(e){
e.preventDefault();
var mtt = $(this).data("mtt");
diff --git a/tools/letter.pl b/tools/letter.pl
index 1b6f39ae89..4276e46280 100755
--- a/tools/letter.pl
+++ b/tools/letter.pl
@@ -70,6 +70,7 @@ my $content = $input->param('content');
my $op = $input->param('op') || '';
my $redirect = $input->param('redirect');
my $section = $input->param('section');
+my $langtab = $input->param('langtab');
my $dbh = C4::Context->dbh;
@@ -93,13 +94,14 @@ $template->param(
searchfield => $searchfield,
branchcode => $branchcode,
section => $section,
+ langtab => $langtab,
action => $script_name
);
if ( $op eq 'add_validate' or $op eq 'copy_validate' ) {
add_validate();
if( $redirect eq "just_save" ){
- print $input->redirect("/cgi-bin/koha/tools/letter.pl?op=add_form&branchcode=$branchcode&module=$module&code=$code&redirect=done§ion=$section");
+ print $input->redirect("/cgi-bin/koha/tools/letter.pl?op=add_form&branchcode=$branchcode&module=$module&code=$code&redirect=done§ion=$section&langtab=$langtab");
exit;
} else {
$op = q{}; # we return to the default screen for the next operation
--
2.20.1