Bug 15887: Revise layout and behavior of item search fields management

This patch adds some JavaScript to the item search fields management
page so that the add form is not displayed by default. This simplifies
the interface and makes it more consistent with other similar
interfaces.

Also changed in this patch:
- Changing instances of "Items search fields" to "Item search fields."
- Correct form structure to use ordered list
- Add "required" classes and enable built-in JS form validation.
- Add explicitly labeled "Choose" options to <select>s.
- Add missing ids to form fields (labels don't work without them).
- Correct classes of message and alert dialogs.
- Add JS confirmation of deletions.
- Convert MARC tag and subfield dropdowns to regular inputs (Bug 15384).

To test, apply the patch and go to Administration.

- Confirm that the "Item search fields" link is correct.
- Follow the link and confirm that the list of existing fields is shown
  by default, or a message saying there are no existing fields.
- Click the "New search field" button and confirm that it displays the
  entry form.
  - Confirm that submitting an empty form does not work.
  - Confirm that clicking the "Cancel" link correctly hides the form.
  - Confirm that submitting valid data works correctly.
- In the table of existing item search fields, confirm that the "Edit"
  button works correctly.
  - Confirm that submitting edits works correctly.
- In the table of existing item search fields, confirm that clicking
  "Delete" highlights the row in question and a confirmation dialog
  appears.
  - Test both canceling and confirming deletion.

Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>
Works as described. JSHint OK, koha-qa OK.

Revision per QA: Undid the change making tag and subfield inputs text
fields.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Brendan A Gallagher <brendan@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 73f532e..b8a857d 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -262,7 +262,8 @@ table+table {
        border : 0;
 }
 
-.highlighted-row { background-color: orange !important }
+.highlighted-row,
+.highlighted-row td { background-color: #FFD000 !important }
 
 tbody tr:nth-child(odd) td {
        background-color : #F3F3F3;

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
index 995e1f6..a886a8b 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
@@ -1,24 +1,27 @@
-<ul>
+<ol>
   <li>
-    <label for="name">Name</label>
-    [% IF field %]
-      <input type="text" name="name" value="[% field.name %]" disabled="disabled">
-      <input type="hidden" name="name" value="[% field.name %]">
-    [% ELSE %]
-      <input type="text" name="name" />
-    [% END %]
+      [% IF field %]
+          <span class="label">Name: </span>
+          [% field.name %]
+          <input type="hidden" name="name" value="[% field.name %]">
+      [% ELSE %]
+          <label class="required" for="name">Name: </label>
+          <input type="text" name="name" id="name" class="required" required="required" />
+          <span class="required">Required</span>
+      [% END %]
   </li>
   <li>
-    <label for="label">Label</label>
+    <label class="required" for="label">Label: </label>
     [% IF field %]
-      <input type="text" name="label" value="[% field.label %]" />
+        <input type="text" name="label" id="label" value="[% field.label %]" class="required" required="required" />
     [% ELSE %]
-      <input type="text" name="label" />
+        <input type="text" name="label" id="label" class="required" required="required" />
     [% END %]
+          <span class="required">Required</span>
   </li>
   <li>
-    <label for="tagfield">MARC field</label>
-    <select name="tagfield">
+    <label for="tagfield" required="required">MARC field: </label>
+    <select id="tagfield" name="tagfield" class="required" required="required">
       [% FOREACH tagfield IN ['001'..'999'] %]
         [% IF field && field.tagfield == tagfield %]
           <option value="[% tagfield %]" selected="selected">[% tagfield %]</option>
@@ -27,10 +30,11 @@
         [% END %]
       [% END %]
     </select>
+    <span class="required">Required</span>
   </li>
   <li>
-    <label for="tagsubfield">MARC subfield</label>
-    <select name="tagsubfield">
+    <label for="tagsubfield">MARC subfield: </label>
+    <select id="tagsubfield" name="tagsubfield">
       [% codes = [''] %]
       [% codes = codes.merge([0..9], ['a'..'z']) %]
       [% FOREACH tagsubfield IN codes %]
@@ -43,8 +47,8 @@
     </select>
   </li>
   <li>
-    <label for="authorised_values_category">Authorised values category</label>
-    <select name="authorised_values_category">
+    <label for="authorised_values_category">Authorised values category: </label>
+    <select id="authorised_values_category" name="authorised_values_category">
       <option value="">- None -</option>
       [% FOREACH category IN authorised_values_categories %]
         [% IF field && field.authorised_values_category == category %]
@@ -55,4 +59,4 @@
       [% END %]
     </select>
   </li>
-</ul>
+</ol>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-menu.inc
index 6e6fa49..74bd3dc 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-menu.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-menu.inc
@@ -45,7 +45,7 @@
     <li><a href="/cgi-bin/koha/admin/classsources.pl">Classification sources</a></li>
     <li><a href="/cgi-bin/koha/admin/matching-rules.pl">Record matching rules</a></li>
     <li><a href="/cgi-bin/koha/admin/oai_sets.pl">OAI sets configuration</a></li>
-    <li><a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a></li>
+    <li><a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a></li>
 </ul>
 
 <h5>Acquisition parameters</h5>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/item_search_fields.js b/koha-tmpl/intranet-tmpl/prog/en/js/item_search_fields.js
new file mode 100644 (file)
index 0000000..32418b5
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/item_search_fields.js
@@ -0,0 +1,24 @@
+$(document).ready(function(){
+    $("#add_field_form").hide();
+    $("#new_search_field").on("click",function(e){
+        e.preventDefault();
+        $("#add_field_form").show();
+        $(".dialog").hide();
+        $("#search_fields_list,#toolbar").hide();
+    });
+    $(".cancel").on("click",function(e){
+        e.preventDefault();
+        $("#add_field_form").hide();
+        $(".dialog").show();
+        $("#search_fields_list,#toolbar").show();
+    });
+    $(".field-delete").on("click",function(){
+        $(this).parent().parent().addClass("highlighted-row");
+        if( confirm( MSG_ITEM_SEARCH_DELETE_CONFIRM )){
+            return true;
+        } else {
+            $(this).parent().parent().removeClass("highlighted-row");
+            return false;
+        }
+    });
+});
\ No newline at end of file

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/admin-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/admin-home.tt
index d0f65f2..eea0b0d 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/admin-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/admin-home.tt
@@ -83,8 +83,8 @@
                     <dd>Manage rules for automatically matching MARC records during record imports.</dd>
                     <dt><a href="/cgi-bin/koha/admin/oai_sets.pl">OAI sets configuration</a></dt>
                     <dd>Manage OAI Sets</dd>
-                    <dt><a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a></dt>
-                    <dd>Manage custom fields for items search</dd>
+                    <dt><a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a></dt>
+                    <dd>Manage custom fields for item search.</dd>
                 </dl>
 
                 <h3>Acquisition parameters</h3>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
index 6e0f373..ed1f9c5 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
@@ -1,5 +1,5 @@
 [% INCLUDE 'doc-head-open.inc' %]
-  <title>Koha &rsaquo; Administration &rsaquo; Items search fields</title>
+  <title>Koha &rsaquo; Administration &rsaquo; Item search fields</title>
   [% INCLUDE 'doc-head-close.inc' %]
 </head>
 <body id="admin_itemssearchfields" class="admin">
@@ -8,7 +8,7 @@
   <div id="breadcrumbs">
     <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
     <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo;
-    <a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a> &rsaquo;
+    <a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a> &rsaquo;
     [% field.name %]
   </div>
 
@@ -16,21 +16,21 @@
     <div id="bd">
       <div id="yui-main">
         <div class="yui-b">
-          <h1>Items search field: [% field.label %]</h1>
+          <h1>Item search field: [% field.label %]</h1>
 
-          <form action="" method="POST">
+          <form action="/cgi-bin/koha/admin/items_search_field.pl" method="POST" class="validated">
             <fieldset class="rows">
               <legend>Edit field</legend>
               [% INCLUDE 'admin-items-search-field-form.inc' field=field %]
               <div>
                 <input type="hidden" name="op" value="mod" />
               </div>
-              <fieldset class="action">
-                <input type="submit" value="Update" />
-              </fieldset>
+            </fieldset>
+            <fieldset class="action">
+                <input type="submit" value="Submit" />
+                <a class="cancel" href="/cgi-bin/koha/admin/items_search_fields.pl">Cancel</a>
             </fieldset>
           </form>
-          <a href="/cgi-bin/koha/admin/items_search_fields.pl">Return to items search fields overview page</a>
         </div>
       </div>
       <div class="yui-b">

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_fields.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_fields.tt
index 200e614..f5b980c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_fields.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_fields.tt
@@ -1,6 +1,10 @@
 [% INCLUDE 'doc-head-open.inc' %]
-  <title>Koha &rsaquo; Administration &rsaquo; Items search fields</title>
+  <title>Koha &rsaquo; Administration &rsaquo; Item search fields</title>
   [% INCLUDE 'doc-head-close.inc' %]
+  <script type="text/javascript">
+      var MSG_ITEM_SEARCH_DELETE_CONFIRM = _("Are you sure you want to delete this field?");
+  </script>
+  <script type="text/javascript" src="[% themelang %]/js/item_search_fields.js"></script>
 </head>
 <body id="admin_itemssearchfields" class="admin">
   [% INCLUDE 'header.inc' %]
@@ -8,83 +12,96 @@
   <div id="breadcrumbs">
     <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
     <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo;
-    Items search fields
+    Item search fields
   </div>
 
   <div id="doc3" class="yui-t2">
     <div id="bd">
       <div id="yui-main">
         <div class="yui-b">
+
+    <div id="toolbar" class="btn-toolbar">
+        <a class="btn btn-small" id="new_search_field" href="/cgi-bin/koha/admin/items_search_fields.pl"><i class="fa fa-plus"></i> New search field</a>
+    </div>
+
           [% IF field_added %]
-            <div class="dialog">
+            <div class="dialog message">
               Field successfully added: [% field_added.label %]
             </div>
           [% ELSIF field_not_added %]
-            <div class="alert">
-              <p>Failed to add field. Please check if the field name doesn't already exist.</p>
+            <div class="dialog alert">
+              <p>Failed to add field. Please make sure the field name doesn't already exist.</p>
               <p>Check logs for more details.</p>
             </div>
           [% ELSIF field_deleted %]
-            <div class="dialog">
+            <div class="dialog message">
               Field successfully deleted.
             </div>
           [% ELSIF field_not_deleted %]
-            <div class="alert">
+            <div class="dialog alert">
               <p>Failed to delete field.</p>
               <p>Check logs for more details.</p>
             </div>
           [% ELSIF field_updated %]
-            <div class="dialog">
+            <div class="dialog message">
               Field successfully updated: [% field_updated.label %]
             </div>
           [% ELSIF field_not_updated %]
-            <div class="alert">
+            <div class="dialog alert">
               <p>Failed to update field.</p>
               <p>Check logs for more details.</p>
             </div>
           [% END %]
-          <h1>Items search fields</h1>
           [% IF fields.size %]
-            <table>
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Label</th>
-                  <th>MARC field</th>
-                  <th>MARC subfield</th>
-                  <th>Authorised values category</th>
-                  <th>Operations</th>
-                </tr>
-              </thead>
-              <tbody>
-                [% FOREACH field IN fields %]
-                  <tr>
-                    <td>[% field.name %]</td>
-                    <td>[% field.label %]</td>
-                    <td>[% field.tagfield %]</td>
-                    <td>[% field.tagsubfield %]</td>
-                    <td>[% field.authorised_values_category %]</td>
-                    <td>
-                      <a href="/cgi-bin/koha/admin/items_search_field.pl?name=[% field.name %]" title="Edit [% field.name %] field">Edit</a>
-                      <a href="/cgi-bin/koha/admin/items_search_fields.pl?op=del&name=[% field.name %]" title="Delete [% field.name %] field">Delete</a>
-                    </td>
-                  </tr>
-                [% END %]
-              </tbody>
-            </table>
+              <div id="search_fields_list">
+                  <h2>Item search fields</h2>
+
+                  <table id="search_fields_table">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Label</th>
+                        <th>MARC field</th>
+                        <th>MARC subfield</th>
+                        <th>Authorised values category</th>
+                        <th>Operations</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      [% FOREACH field IN fields %]
+                        <tr>
+                          <td>[% field.name %]</td>
+                          <td>[% field.label %]</td>
+                          <td>[% field.tagfield %]</td>
+                          <td>[% field.tagsubfield %]</td>
+                          <td>[% field.authorised_values_category %]</td>
+                          <td>
+                            <a class="btn btn-mini" href="/cgi-bin/koha/admin/items_search_field.pl?name=[% field.name %]" title="Edit [% field.name %] field"><i class="fa fa-pencil"></i> Edit</a>
+                            <a class="field-delete btn btn-mini" href="/cgi-bin/koha/admin/items_search_fields.pl?op=del&name=[% field.name %]"><i class="fa fa-remove"></i> Delete</a>
+                          </td>
+                        </tr>
+                      [% END %]
+                    </tbody>
+                  </table>
+              </div>
+          [% ELSE %]
+              <div class="dialog message">
+                  There are no item search fields defined.
+              </div>
           [% END %]
-          <form action="" method="POST">
+
+          <form id="add_field_form" action="/cgi-bin/koha/admin/items_search_fields.pl" method="POST" class="validated">
             <fieldset class="rows">
               <legend>Add a new field</legend>
               [% INCLUDE 'admin-items-search-field-form.inc' field=undef %]
-              <div>
-                <input type="hidden" name="op" value="add" />
-              </div>
-              <fieldset class="action">
-                <input type="submit" value="Add this field" />
-              </fieldset>
+              <input type="hidden" name="op" value="add" />
+            </fieldset>
+            <fieldset class="action">
+              <input type="submit" value="Submit" />
+              <a href="#" class="cancel">Cancel</a>
             </fieldset>
           </form>
+
         </div>
       </div>
       <div class="yui-b">