From f24e697cfb47aa6e7efb788a060d5ec69c63216f Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 25 Mar 2016 13:06:03 -0400 Subject: [PATCH] Bug 16437 - Automatic item modifications by age needs prettying Content-Type: text/plain; charset="utf-8" This patch makes layout and behavior changes to the automatic item modifications by age interface, bringing some aspects of it closer into conformance with established interface patterns. - The intial view is now a standard table of information about existing rules, or a message dialog saying there are no rules. - If there are no rules, a toolbar button reads "Add rules." - If there are existing rules, the toolbar button reads "Edit rules." - Clicking the button leads to the rules edit interface, which now has a floating toolbar with "Add rule," "Save," and "Cancel" buttons. - Clicking the "Add rule" button displays a blank rule block. - If you are adding a rule to existing rules, the new block is appended at the bottom, and the page scrolls to the new rule. - As you add or remove rule blocks, the legend containing the rule count updates so that the numbers are sequential. - In each rule block, "age" and "substitutions" are now required. The age field is now validated to require a number. - The add/remove condition/substitution links now have more descriptive text labels. - The control to remove a rule is now a link in the element associated with each rule. - Most JavaScript for this page is now in a separate file. - Breadcrumbs are updated to be a little more specific. To test, apply the patch and clear your browser cache if necessary. - Go to Tools -> Automatic item modifications by age. - Test adding and removing rules. - Test removing all rules. - Test adding and removing conditions and substitutions within rules. - Test submitting the form without filling in required fields. --- koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 25 +- .../tools/automatic_item_modification_by_age.tt | 322 +++++++++------------ .../prog/js/automatic_item_modification_by_age.js | 123 ++++++++ 3 files changed, 269 insertions(+), 201 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/automatic_item_modification_by_age.js diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css index 35fa6f8..7a594b1 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css +++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css @@ -2694,7 +2694,12 @@ div#cn_browser_table_wrapper > table#cn_browser_table { div.rules { display: block; } -div#new_rule, div.rule { + +#new_rule { + display: none; +} + +#new_rule, div.rule { background-color: #F4F8F9; border: 2px solid #B9D8D9; border-radius: 5px; @@ -2702,21 +2707,13 @@ div#new_rule, div.rule { padding: .3em; } -div.duration, div.blocks { - border: 2px solid #B9D8D9; - border-radius: 5px 5px 5px 5px; - margin: .3em; - padding: 0 .3em .3em .3em; +.blocks { + margin-bottom: .3em; } -div.duration h5, div.blocks h5 { - padding-bottom: 4px; - padding-left: 0.2em; - background-color: #E6F0F2; - border-radius: 1px; -} -div.duration span, div.blocks div { - display:block; +.remove_rule { + padding-left: .7em; + font-size: 80%; } div[class$="_table_controls"] { diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/automatic_item_modification_by_age.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/automatic_item_modification_by_age.tt index 7e1e800..d0514fc 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/automatic_item_modification_by_age.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/automatic_item_modification_by_age.tt @@ -1,134 +1,74 @@ [% INCLUDE 'doc-head-open.inc' %] Koha › Tools › Automatic item modifications by age [% INCLUDE 'doc-head-close.inc' %] - + + +[% IF op == 'edit_form' %] + +[% END %] [% INCLUDE 'header.inc' %] [% INCLUDE 'cat-search.inc' %] - +
-

Automatic item modifications by age

-
- Edit -
+ + [% IF ( op == 'edit_form' ) %] +
+

Rules for automatic item modifications by age

+
+
+ +
+
+ +
+
+ Cancel +
+
+ [% ELSE %] +

Automatic item modifications by age

+ [% IF ( rules ) %] + + [% ELSE %] + + [% END %] + [% END %] + [% FOR message IN messages %] [% IF message.type == "error" %] -
+
[% END %] [% IF message.code == "unable_to_load_configuration" %] An error occurs: Unable to load the configuration. @@ -137,17 +77,17 @@ [% END %] [% IF op == 'edit_form' %] -
-

List of rules

[% FOR rule IN rules %] [% SET id = loop.count %] -
+
+ Rule [% loop.count %] Remove this rule
-
Age
- days +
Age in days
+ + Required
Conditions
@@ -165,8 +105,8 @@ = - - + Add a condition + Remove condition
[% END %]
@@ -174,7 +114,7 @@
Substitutions
[% FOR substitution IN rule.substitutions %]
- [% FOR field IN substitution_fields %] [% IF substitution.field == field %] @@ -185,32 +125,31 @@ [% END %] = - - - + + Add a substitution + Remove substitution + Required
[% END %]
- Remove this rule -
+ [% END %]
-
- There is no rule defined. -
-
- Cancel - -
-

Add a new rule

-
+ +
+ There are no rules defined. +
+ +
+ Rule Remove this rule
-
Age
- days +
Age in days
+ + Required
Conditions
@@ -223,66 +162,75 @@ = - - + Add a condition + Remove condition
Substitutions
- [% FOR field IN substitution_fields %] [% END %] = - - - + + Add a substitution + Remove substitution + Required
- Add this rule - Remove this rule -
- [% ELSIF rules and op == 'show' %] -
-

List of rules

- [% FOR rule IN rules %] -
-
-
Age
- [% IF rule.age.defined and rule.age.length > 0 %] - [% rule.age %] days - [% ELSE %] - There is no age for this rule. - [% END %] -
-
-
Conditions
- [% FOR condition IN rule.conditions %] - [% IF condition.field %] -
- [% condition.field %] = [% condition.value %] -
- [% ELSE %] - There is no condition for this rule. - [% END %] - [% END %] -
-
-
Substitutions
- [% FOR substitution IN rule.substitutions %] -
- [% substitution.field %] = [% substitution.value %] -
- [% END %] -
-
- [% END %] -
+ + [% ELSIF rules %] +
+

List of rules

+ + + + + + + + + + [% FOR rule IN rules %] + + + + + + [% END %] + +
AgeConditionsSubstitutions
+ [% IF rule.age.defined and rule.age.length > 0 %] + [% rule.age %] days + [% ELSE %] + There is no age for this rule. + [% END %] + + [% FOR condition IN rule.conditions %] + [% IF condition.field %] +
+ [% condition.field %] = [% condition.value %] +
+ [% ELSE %] + There is no condition for this rule. + [% END %] + [% END %] +
+ [% FOR substitution IN rule.substitutions %] +
+ [% substitution.field %] = [% substitution.value %] +
+ [% END %] +
+
[% ELSE %] - There is no rule defined. Please click on the edit button. +
+ There are no rules defined. +
[% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/automatic_item_modification_by_age.js b/koha-tmpl/intranet-tmpl/prog/js/automatic_item_modification_by_age.js new file mode 100644 index 0000000..1ebce82 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/automatic_item_modification_by_age.js @@ -0,0 +1,123 @@ +function clear_inputs(node, new_node) { + var selects = $(node).find("select"); + $(selects).each(function(i) { + var select = this; + $(new_node).find("select").eq(i).val($(select).val()); + }); + var inputs = $(node).find("input"); + $(inputs).each(function(i) { + var input = this; + $(new_node).find("input").eq(i).val($(input).val()); + }); +} + +function remove_block_action( link ) { + var blocks = $(link).parent().parent(); + if( $(blocks).find(".block").length > 2 ) { + $(blocks).find("a.remove_block").show(); + } else { + $(blocks).find("a.remove_block").hide(); + } + $(link).parent().remove(); +} + +function remove_rule_action( link ) { + if( $("#rules").find(".rule").length < 2 ) { + $("#rules").hide(); + $("#norules").show(); + } + $(link).parent().parent().remove(); + update_rule_count(); +} + +function clone_block(block) { + var new_block = $(block).clone(1); + clear_inputs(block, new_block); + $(new_block).find('a.remove_block').show(); + var blocks = $(block).parent(); + $(blocks).append(new_block); + $(blocks).find('a.remove_block').click(function(){ + remove_block_action($(this)); + }).show(); +} + +function update_rule_count(){ + rules = $(".rulecount"); + rules.each( function( i ){ + $(this).text( i + 1 ); + }); +} + +$(document).ready(function() { + $("#new_rule .remove_rule").hide(); + $("#new_rule a.remove_block").hide(); + $("#rules a.remove_block").click(function(e){ + e.preventDefault(); + remove_block_action($(this)); + }); + $("#rules .remove_rule").click(function(e){ + e.preventDefault(); + remove_rule_action($(this)); + }); + + var unique_id = $(".rule").length + 1; + $(".add_rule").click(function(e){ + e.preventDefault(); + var rule = $("#new_rule"); + var rules = $("#rules"); + var new_rule = rule.clone(1); + new_rule.removeAttr('id'); + new_rule.attr('class', 'rule'); + clear_inputs(rule, new_rule); + new_rule.find("select[name='condition_field']").attr('name', 'condition_field_' + unique_id); + new_rule.find("select[name='substitution_field']").attr('name', 'substitution_field_' + unique_id); + new_rule.find("input[name='condition_value']").attr('name', 'condition_value_' + unique_id); + new_rule.find("input[name='substitution_value']").attr('name', 'substitution_value_' + unique_id); + new_rule.find("input[name='age']").attr('name', 'age_' + unique_id); + new_rule.find("input[name='unique_id']").val(unique_id); + + $("#rules").append(new_rule); + update_rule_count(); + var scrollToPoint = new_rule.position(); + window.scroll(0, scrollToPoint.top - $("#toolbar").height() ); + + if( $("#rules").find(".rule").length > 0 ) { + $("#rules").show(); + $("#norules").hide(); + } + if( $("#rules").find(".conditions > .condition").length > 1 ) { + + } + if( $("#rules").find(".conditions > .condition").length > 1 ) { + + } + new_rule.find('.remove_rule').click(function(){ + remove_rule_action( $(this) ); + }).show(); + new_rule.find('.add_rule').remove(); + unique_id++; + }); + + $("a.add_block").click(function(e){ + e.preventDefault(); + clone_block( $(this).parent() ); + }); + + if( $("#rules").find(".rule").length < 1 ) { + $("#rules").hide(); + $("#norules").show(); + } + + $("#rules .rule .blocks").each(function(){ + if ( $(this).find(".block").length == 1 ) { + $(this).find("a.remove_block").hide(); + } + }); + + jQuery.validator.addClassRules("age", { + required: true, + digits: true + }); + + $("#rules_form").validate(); +}); -- 2.1.4