Bug 3374 - Display patron attributes in the same format as other patron data

This patch revises the interface for displaying and editing
patron attributes so that it is consistent with other
similar interfaces.

Display of patron attributes should match the display of other
kinds of patron data, and codes should be omitted in favor of
descriptions.

Entry of patron attributes should match other patron entry
forms and should also omit codes in favor of descriptions.

To test, view and edit patron attributes. Special functions
like "Clear" and "New" should function as before.

Signed-off-by: Nicole C. Engard <nengard@bywatersolutions.com>
Tested by viewing patrons with attributes, editing those attributes
and editing the entire patron record. In all places the editing/adding
works and the display is improved.

Signed-off-by: Paul Poulain <paul.poulain@biblibre.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 cda5b9e..be057ab 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -634,8 +634,9 @@ fieldset.rows label, fieldset.rows span.label {
 }
 
 fieldset.rows fieldset {
+    background-color: #FFF;
        border-width : 1px;
-       margin : 0 0 .5em 0;
+    margin : 1em;
        padding : .3em;
 }
 
@@ -734,6 +735,10 @@ fieldset.action, div.action {
   width: auto;
 }
 
+div.rows+div.rows {
+    margin-top : .6em;
+}
+
 div.rows {
 float : left;
 clear : left;
@@ -1184,6 +1189,16 @@ div.alert strong {
     list-style-position:inside;
 }
 
+a.clear-field {
+    background : transparent url("../../img/clear-field.png") center left no-repeat;
+    padding-left : 16px;
+}
+
+a.clone-field {
+    background : transparent url("../../img/clone-field.png") center left no-repeat;
+    padding-left : 20px;
+}
+
 a.document {
        background-position : left middle;
        background-repeat : no-repeat;

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
index bd62f58..f4734c0 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
@@ -36,49 +36,39 @@
     });
 
     function clear_entry(node) {
-        var original = node.parentNode.parentNode;
+        var original = node.parentNode;
         $("input[type=text]", original).attr('value', '');
         $("select", original).attr('value', '');
     }
 
     function clone_entry(node) {
-        var original = node.parentNode.parentNode;
-        var clone = original.cloneNode(true);
+        var original = $(node).parent();
+        var clone = original.clone();
+
         var newId = 50 + parseInt(Math.random() * 100000);
-        $("input", clone).attr('id', function() {
+        $("input,select,textarea", clone).attr('id', function() {
             return this.id.replace(/patron_attr_\d+/, 'patron_attr_' + newId);
         });
-        $("input", clone).attr('name', function() {
+        $("input,select,textarea", clone).attr('name', function() {
             return this.name.replace(/patron_attr_\d+/, 'patron_attr_' + newId);
         });
-        $("select", clone).attr('id', function() {
-            return this.id.replace(/patron_attr_\d+/, 'patron_attr_' + newId);
-        });
-        $("select", clone).attr('name', function() {
-            return this.name.replace(/patron_attr_\d+/, 'patron_attr_' + newId);
+        $("label", clone).attr('for', function() {
+            return $(this).attr("for").replace(/patron_attr_\d+/, 'patron_attr_' + newId);
         });
         $("input#patron_attr_" + newId, clone).attr('value','');
         $("select#patron_attr_" + newId, clone).attr('value','');
-        original.parentNode.insertBefore(clone, original.nextSibling);
+        $(original).after(clone);
+        return false;
     }
 
     function update_category_code(category_code) {
         if ( $(category_code).is("select") ) {
             category_code = $("#categorycode").find("option:selected").val();
         }
-        var mytables = $(".attributes_table>tbody");
-
-        mytables.find("tr").each(function(){
-            $(this).hide()
-        });
-
-        mytables.find("tr[data-category_code="+category_code+"]").each(function(){
-            $(this).show();
-        });
-        mytables.find("tr[data-category_code='']").each(function(){
-            $(this).show();
-        });
-
+        var mytables = $(".attributes_table");
+        $(mytables).find("li").hide();
+        $(mytables).find(" li[data-category_code="+category_code+"]").show();
+        $(mytables).find(" li[data-category_code='']").show();
     }
 
                var MSG_SEPARATOR = _("Separator must be / in field ");
@@ -1345,24 +1335,13 @@
     <legend>Additional attributes and identifiers</legend>
     [% FOREACH pa_loo IN patron_attributes %]
         [% IF pa_loo.class %]
-            <table id="aai_[% pa_loo.class %]" class="attributes_table">
-            <caption>[% pa_loo.lib %]</caption>
-        [% ELSE %]
-            <table id="aai" class="attributes_table">
+            <fieldset id="aai_[% pa_loo.class %]">
+            <legend>[% pa_loo.lib %]</legend>
         [% END %]
-        <thead>
-            <tr>
-                <th>Type</th>
-                <th colspan="2">Value</th>
-            </tr>
-        </thead>
-        <tbody>
+        <ol class="attributes_table">
             [% FOREACH patron_attribute IN pa_loo.items %]
-                <tr data-category_code="[% patron_attribute.category_code %]">
-                    <td>
-                        [% patron_attribute.code %] ([% patron_attribute.description %])
-                    </td>
-                    <td>
+                <li data-category_code="[% patron_attribute.category_code %]">
+                    <label for="[% patron_attribute.form_id %]">[% patron_attribute.description %]: </label>
                         <input type="hidden" id="[% patron_attribute.form_id %]_code" name="[% patron_attribute.form_id %]_code" value="[% patron_attribute.code |html %]" />
                         [% IF ( patron_attribute.use_dropdown ) %]
                             <select id="[% patron_attribute.form_id %]" name="[% patron_attribute.form_id %]">
@@ -1389,20 +1368,17 @@
                             [% END %]
                         [% END %]
                         [% IF ( patron_attribute.password_allowed ) %]
-                            (Password: <input type="password" maxlength="64" value="[% patron_attribute.password %]"
+                            (<label class="yesno" for="[% patron_attribute.form_id %]_password">Password:</label> <input type="password" maxlength="64" value="[% patron_attribute.password %]"
                                    id="[% patron_attribute.form_id %]_password" name="[% patron_attribute.form_id %]_password" />)
                         [% END %]
-                    </td>
-                    <td>
-                        <a href="#" onclick="clear_entry(this); return false;">Clear</a>
+                        <a href="#" class="clear-field" onclick="clear_entry(this); return false;">Clear</a>
                         [% IF ( patron_attribute.repeatable ) %]
-                        <a href="#" onclick="clone_entry(this); return false;">New</a>
+                        <a href="#" class="clone-field" onclick="clone_entry(this); return false;">New</a>
                         [% END %]
-                    </td>
-                </tr>
+                </li>
             [% END %]
-        </tbody>
-        </table>
+        </ol>
+        [% IF pa_loo.class %]</fieldset>[% END %]
     [% END %]
   </fieldset>
 [% END %][% END %][% END %]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
index b6df1b3..11bb33f 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
@@ -290,32 +290,24 @@ function validate1(date) {
 <h3>Additional attributes and identifiers</h3>
 [% FOREACH attribute IN attributes_loop %]
     [% IF attribute.class %]
-        <h4>[% attribute.lib %]</h4>
-        <table id="aai_[% attribute.class %]">
+        <div id="aai_[% attribute.class %]" class="rows">
     [% ELSE %]
-        <table id="aai">
+        <div id="aai" class="rows">
     [% END %]
-        <thead>
-            <tr>
-                <th>Type</th>
-                <th>Description</th>
-                <th>Value</th>
-            </tr>
-        </thead>
-        <tbody>
+        <h4>[% attribute.lib %]</h4>
+        <ol>
         [% FOREACH item IN attribute.items %]
-            <tr>
-                <td>[% item.code %]</td>
-                <td>[% item.description %]</td>
-                <td>[% item.value %]
-                    [% IF ( item.value_description ) %]
-                        ([% item.value_description %])
-                    [% END %]
-                </td>
-            </tr>
+            <li>
+                <span class="label">[% item.description %]: </span>
+                [% IF ( item.value_description ) %]
+                    [% item.value_description %]
+                [% ELSE %]
+                    [% item.value %]
+                [% END %]
+            </li>
         [% END %]
-        </tbody>
-    </table>
+        </ol>
+    </div>
 [% END %]
 </div>
 <div class="action"><a href="memberentry.pl?op=modify&amp;borrowernumber=[% borrowernumber %]&amp;step=4">Edit</a></div>

diff --git a/koha-tmpl/intranet-tmpl/prog/img/clear-field.png b/koha-tmpl/intranet-tmpl/prog/img/clear-field.png
new file mode 100644 (file)
index 0000000..80287bf
Binary files /dev/null and b/koha-tmpl/intranet-tmpl/prog/img/clear-field.png differ

diff --git a/koha-tmpl/intranet-tmpl/prog/img/clone-field.png b/koha-tmpl/intranet-tmpl/prog/img/clone-field.png
new file mode 100644 (file)
index 0000000..702efb3
Binary files /dev/null and b/koha-tmpl/intranet-tmpl/prog/img/clone-field.png differ