From: Garry Collum <gcollum@gmail.com>
Date: Wed, 2 Nov 2022 19:25:27 +0000 (+0000)
Subject: LP1995510 Bootstrap Opac: Inconsistent bevahior in the Bib Email Form
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fgcollum%2Flp195510_Bootstrap_opac_email_form;p=working%2FEvergreen.git

LP1995510 Bootstrap Opac: Inconsistent bevahior in the Bib Email Form

Fixes some of the inconsistencies and style issues with the Email form.

All of the drop-down lists will now refresh the page so that the preview
is updated.

The email field requires a value and must be in an email format.  The update
button is next to this field and is only enabled when there is a change in
 the field.

The subject field has been hidden with a 'Fixme' tag.  Currently the subject
is always 'Bibliographic Records' regardless of what is entered in the field.

The style has been changed to be more consistent with other pages in the opac.

Signed-off-by: Garry Collum <gcollum@gmail.com>
---

diff --git a/Open-ILS/src/templates-bootstrap/opac/record/email.tt2 b/Open-ILS/src/templates-bootstrap/opac/record/email.tt2
index a08b743dc8..cdd6695250 100755
--- a/Open-ILS/src/templates-bootstrap/opac/record/email.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/record/email.tt2
@@ -5,26 +5,27 @@
     ctx.page_title = l("Record Detail") %]
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <br class="clear-both" />
-    <div id="content-wrapper" class="content-wrapper-record-page">
+    <div id="content-wrapper" class="container">
         <div id='main-content'>
-            <div class="alert alert-success" role="alert">
-                <h2>[% l('Your email has been queued for delivery to [_1]', ctx.email ) %]</h2>
+        <h3>[% l('Email Sent') %]</h3>
+            <div role="alert">
+                <big><strong class="success"><i class="fas fa-check-circle"></i>
+                 [% l('Your email has been queued for delivery to [_1].', ctx.email ) %]
+                </strong></big>
             </div>
             [% IF ctx.user && !ctx.user.email %]
-            <div class="alert alert-danger" role="alert">
-            <h2>
+            <div class="alert" role="alert">
                 [% here_link_text = "<a href=\"${ctx.opac_root}/myopac/update_email\">";
-                   here_link_text = here_link_text _ l("Set your email address here");
+                   here_link_text = here_link_text _ l("preferences");
                    here_link_text = here_link_text _ "</a>";
-                   l('Your account does not currently have an email address set. [_1]', here_link_text) %]
-            </h2>
+                   l('Visit [_1] to set the email address in your account.', here_link_text) %]
             </div>
             [% END %]
             <br/>
             [% IF ctx.redirect_to %]
-            <p><a class="btn btn-outline-primary" href="[% ctx.redirect_to | html %]">[% l("Return") %]</a>  </p>
+            <p><a class="btn btn-confirm" href="[% ctx.redirect_to | html %]"><i class="fas fa-arrow-circle-left" aria-hidden="true"></i> [% l("Return") %]</a>  </p>
             [% ELSE %]
-            <p><a class="btn btn-outline-primary" href="[% mkurl(ctx.opac_root  _ '/record/' _ ctx.bre_id) %]">[% l("Back to Record") %]</a></p>
+            <p><a class="btn btn-confirm" href="[% mkurl(ctx.opac_root  _ '/record/' _ ctx.bre_id) %]"><i class="fas fa-arrow-circle-left" aria-hidden="true"></i> [% l("Back to Record") %]</a></p>
             [% END %]
             <div class="common-full-pad"></div>
         </div>
diff --git a/Open-ILS/src/templates-bootstrap/opac/record/email_preview.tt2 b/Open-ILS/src/templates-bootstrap/opac/record/email_preview.tt2
index f28cf8953f..b1e1bce547 100644
--- a/Open-ILS/src/templates-bootstrap/opac/record/email_preview.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/record/email_preview.tt2
@@ -6,8 +6,9 @@
 -%]
     <h2 class="sr-only">[% l('Email Record Preview') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
-    <br class="clear-both" />
-    <div id="content-wrapper" class="content-wrapper-record-page">
+    
+    <div id="content-wrapper" class="container">
+        <div class="card">
 
     <form id="previewForm" method="POST" action="[% mkurl('',{},['locg','format','sort','sort_dir','context_org','bre_id','is_list']) %]">
         <input type="hidden" name="old_event" value="[% ctx.preview_record.id %]"/>
@@ -15,87 +16,95 @@
         <input type="hidden" name="locg" value="[% ctx.selected_print_email_loc %]"/>
         <input type="hidden" name="is_list" value="[% ctx.is_list %]"/>
         <input type="hidden" name="redirect_to" value="[% ctx.redirect_to | html %]"/>
+        <div class="card-body">
+        <h5 class="card-title">Email Options</h5>
 
-        <div class="searchbar">
-            <label for="email">[% l('Email Address: ') %]
-                <input class="form-control" id="email" type="text" name="email" value="[% ctx.email || ctx.user.email %]"/>
-            </label>
+        <div class="form-row align-items-center">
+            <div class="form-group col-md-6">
+                <label for="email" class="font-weight-bold">[% l('Email Address: ') %]</label>
+                <div class="input-group">
+                <input class="form-control" id="email" type="email" name="email" value="[% ctx.email || ctx.user.email %]" required />
+                <div class="input-group-prepend">
+                    <button type="submit" class="enableOnInput form-control btn btn-opac" disabled>[% l("Update Preview") %]
+                </div>
+                </div>
+            </div>
         </div>
 
-        <div class="searchbar">
-            <label for="subject">[% l('Custom Email Subject: ') %]
+        <!-- Fixme: subject is currently hardcoded in the default trigger --->
+        <!--
+        <div class="form-row">
+            <div class="form-group col-md-6">
+                <label for="subject" class="font-weight-bold">[% l('Custom Email Subject: ') %]</label>
                 <input class="form-control" id="subject" type="text" name="subject" value="[% ctx.subject || '' %]"/>
-            </label>
+            </div>
         </div>
+        -->
 
-        <div class="searchbar">
-            <label for="formats">[% l('Format: ') %]
-                <select class="form-control" id="formats" name="format">
-                    [% FOR f IN ctx.formats %]
-                        [% IF !ctx.format_obj; ctx.format_obj = f; END %]
-                        <option [% IF f.id == ctx.format; ctx.format_obj = f; 'selected="selected"'; END %] value="[% f.id %]">[% f.name | html %]</option>
-                    [% END %]
-                </select>
-            </label>
+        <div class="form-row">
+            <div class="form-group col-md-2">
+                <label for="formats" class="font-weight-bold">[% l('Format: ') %]</label>
+                    <select class="form-control" id="formats" name="format" onchange="this.form.submit()">
+                        [% FOR f IN ctx.formats %]
+                            [% IF !ctx.format_obj; ctx.format_obj = f; END %]
+                            <option [% IF f.id == ctx.format; ctx.format_obj = f; 'selected="selected"'; END %] value="[% f.id %]">[% f.name | html %]</option>
+                        [% END %]
+                    </select>
+            </div>
         </div>
 
         [% IF ctx.is_list == '1' %]
-        <div class="searchbar">
-            <label for="sortby">[% l('Sort by: ') %]
-                <select class="form-control" id="sortby" name="sort">
-                    <option [% IF ctx.sort == 'author'; 'selected="selected"'; END %] value="author">[% l('Author') %]</option>
-                    <option [% IF ctx.sort == 'title'; 'selected="selected"'; END %] value="title">[% l('Title') %]</option>
-                    <option [% IF ctx.sort == 'pubdate'; 'selected="selected"'; END %] value="pubdate">[% l('Publication Date') %]</option>
-                </select>
-                <select class="form-control" id="sort_dir" name="sort_dir">
-                    <option [% IF ctx.sort_dir == 'ascending'; 'selected="selected"'; END %] value="ascending">[% l('Ascending') %]</option>
-                    <option [% IF ctx.sort_dir == 'descending'; 'selected="selected"'; END %] value="descending">[% l('Descending') %]</option>
-                </select>
-            </label>
+        <div class="form-row">
+            <div class="form-group cold-md-3">
+                <label for="sortby" class="font-weight-bold">[% l('Sort by: ') %]</label>
+                    <select class="form-control" id="sortby" name="sort" onchange="this.form.submit()">
+                        <option [% IF ctx.sort == 'author'; 'selected="selected"'; END %] value="author">[% l('Author') %]</option>
+                        <option [% IF ctx.sort == 'title'; 'selected="selected"'; END %] value="title">[% l('Title') %]</option>
+                        <option [% IF ctx.sort == 'pubdate'; 'selected="selected"'; END %] value="pubdate">[% l('Publication Date') %]</option>
+                    </select>
+                <label for="sort_dir" class="font-weight-bold">[% l('Sort order:') %]</label>
+                    <select class="form-control" id="sort_dir" name="sort_dir" onchange="this.form.submit()">
+                        <option [% IF ctx.sort_dir == 'ascending'; 'selected="selected"'; END %] value="ascending">[% l('Ascending') %]</option>
+                        <option [% IF ctx.sort_dir == 'descending'; 'selected="selected"'; END %] value="descending">[% l('Descending') %]</option>
+                    </select>
+            </div>
         </div>
         [% END %]
 
         [% IF ctx.format_obj.holdings == 't' %]
-        <div class="searchbar">
-            <label for="context_org">[% l('Holdings Library: ') %]
-                [% INCLUDE build_org_selector id='context_org' name='context_org' value=ctx.selected_print_email_loc %]</br>
-            </label>
+        <div class="form-row">
+            <div class="form-group col-md-3">
+                <label for="context_org" class="font-weight-bold">[% l('Holdings Library: ') %]</label>
+                    [% INCLUDE build_org_selector id='context_org' name='context_org' value=ctx.selected_print_email_loc %]
+            </div>
         </div>
         [% END %]
 
-        <br/>
-        <div class="searchbar">
-            <button type="submit" class="btn btn-confirm">[% l("Update") %]</button>
         </div>
-        <br/>
-    </form>
-
-        <hr/>
-
-    <form id="emailForm" method="POST" action="[% mkurl('../email/' _ ctx.preview_record.id,{},['locg','old_event','email','format','sort','bre_id','is_list']) %]">
-        <input type="hidden" name="old_event" value="[% ctx.preview_record.id %]"/>
-        <input type="hidden" name="bre_id" value="[% ctx.bre_id %]"/>
-        <input type="hidden" name="locg" value="[% ctx.selected_print_email_loc %]"/>
-        <input type="hidden" name="is_list" value="[% ctx.is_list %]"/>
-        <input type="hidden" name="redirect_to" value="[% ctx.redirect_to | html %]"/>
-        <input type="hidden" name="email" value="[% ctx.email || ctx.user.email %]"/>
-
+        <div class="card-footer">
 
         [% IF ctx.preview_record.template_output %]
             [% IF ctx.captcha.key %]
-            <div class="searchbar">
+            <div class="form-group">
                 <p>[% l('Please prove you are not a robot by answering the following addition problem:') %]</p>
                 <p>[% ctx.captcha.left %] + [% ctx.captcha.right %] = <input type="text" name="capanswer"/></p>
                 <input type="hidden" name="capkey" value="[% ctx.captcha.key %]"/>
             </div>
             [% END %]
-            <div class="searchbar">
-                <button type="submit" class="btn btn-confirm">[% l("Email Now") %]</button> |
-                <a class="btn btn-confirm" href="[% ctx.redirect_to | html %]">[% l("Return") %]</a>
-                <br/>
-                <br/>
-                <pre>[% ctx.preview_record.template_output.data %]</pre>
+            
+
+            <div class="row d-flex justify-content-center">
+                <div class="col-auto">
+                    <button type="submit" formmethod="post" formaction="[% mkurl('../email/' _ ctx.preview_record.id,{},['locg','old_event','email','format','sort','bre_id','is_list']) %]" class="form-control btn btn-opac btn-sm">[% l("Email Now") %]</button>
+                </div>
+                <div class="col-auto">
+                    <a class="btn btn-deny btn-sm form-control" href="[% ctx.redirect_to | html %]">[% l("Return") %]</a>
+                </div>
             </div>
+
+                <div class="row">
+                    <pre>[% ctx.preview_record.template_output.data %]</pre>
+                </div>
         [% ELSE %]
             <div class="alert alert-danger" role="alert">
                 [% l(
@@ -105,12 +114,35 @@
                         l('No record data returned from server')
                     ) | html %]
             </div>
-            <hr />
-            <div class="searchbar">
-                <a class="btn btn-confirm" href="[% ctx.redirect_to | html %]">[% l("Return") %]</a>
+            <div class="form-row">
+                <a class="btn btn-action btn-sm" href="[% ctx.redirect_to | html %]">[% l("Return") %]</a>
             </div>
         [% END %]
-        <br class="clear-both" />
+        </div>
     </form>
+        </div>
     </div>
+
+<script>
+    if(document.getElementById('context_org')) {
+        const orgselect = document.getElementById('context_org');
+
+        orgselect.addEventListener('change', function handleChange(event) {
+            document.getElementById('previewForm').submit();
+        });
+    }
+</script>
+
+<script>
+    $(function () {
+        $('#email').keyup(function () {
+            if($(this).val() == '') {
+                $('.enableOnInput').prop('disabled', true);
+            } else {
+                $('.enableOnInput').prop('disabled', false);
+            }
+        });
+    });
+</script>
 [%- END %]
+