UI improvements for selecting taxproducts, #71555 and #71556

2 files changed, 125 insertions, 27 deletions

diff --git a/httemplate/elements/select-taxproduct.html b/httemplate/elements/select-taxproduct.html
index 5feb71d80..d08ac22d1 100644
--- a/httemplate/elements/select-taxproduct.html
+++ b/httemplate/elements/select-taxproduct.html
@@ -1,14 +1,79 @@
-<% $opt{'prefix'} %><INPUT NAME    = "<% $name %>"
-                           ID      = "<% $name %>"
-                           TYPE    = "hidden"
-                           VALUE   = "<% $value |h %>"
-                    >
-                    <INPUT NAME    = "<% $name %>_description"
-                           ID      = "<% $name %>_description"
-                           TYPE    = "text"
-                           VALUE   = "<% $description %>"
-                           SIZE    = "12"
-                           onClick = "<% $onclick %>"><% $opt{'postfix'} %>
+% if (!$init) {
+%   $init = 1;
+<STYLE TYPE="text/css">
+.ui-autocomplete-loading {
+  background-color: silver;
+}
+ul.ui-autocomplete li.ui-menu-item {
+  font-size: 0.8em;
+  padding: 2px;
+}
+ul.ui-autocomplete li.ui-state-focus {
+  font-weight: normal;
+  color: #7e0079;
+  background-color: inherit;
+  border: 1px solid #7e0079;
+}
+</STYLE>
+<SCRIPT TYPE="text/javascript">
+$().ready(function() {
+  $('input.taxproduct_desc').autocomplete({
+    source: '<% $fsurl %>misc/taxproduct.cgi',
+    minLength: 3,
+    autoFocus: true,
+    response: function( event, ui ) {
+      // if there's only one choice (user entered an exact taxproduct) then
+      // select it
+      if ( ui.content.length == 1 ) {
+        var input_taxproductnum = $(this).siblings('.taxproductnum')
+        var item = ui.content[0];
+        $(this).val(item.label);
+        input_taxproductnum.val(item.value);
+      }
+    },
+    focus: function( event, ui ) {
+      return false;
+    },
+    select: function( event, ui ) {
+      // find the hidden input for the taxproductnum
+      var input_taxproductnum = $(this).siblings('.taxproductnum')
+      if ( ui.item ) {
+        $(this).val(ui.item.label);
+        input_taxproductnum.val(ui.item.value);
+        return false; // don't store item.value in this input
+      } else {
+        input_taxproductnum.val('');
+      }
+    },
+    change: function( event, ui ) {
+      var input_taxproductnum = $(this).siblings('.taxproductnum')
+      if ( $(this).val() == '' ) {
+        input_taxproductnum.val('');
+      }
+    }
+  });
+});
+</SCRIPT>
+% }
+<% $opt{'prefix'} %>
+<INPUT NAME    = "<% $name %>"
+       ID      = "<% $name %>"
+       TYPE    = "hidden"
+       VALUE   = "<% $value |h %>"
+       CLASS   = "taxproductnum"
+>
+<INPUT NAME    = "<% $name %>_description"
+       ID      = "<% $name %>_description"
+       TYPE    = "text"
+       VALUE   = "<% $description %>"
+       SIZE    = "50"
+       CLASS   = "taxproduct_desc" 
+>
+<BUTTON STYLE="padding: 0" onclick="<% $onclick %>">...</BUTTON>
+<% $opt{'postfix'} %>
+<%shared>
+my $init = 0;
+</%shared>
 <%init>
 
 my %opt = @_;
@@ -19,7 +84,8 @@ my $description = $opt{'taxproduct_description'};
 unless ( $description || ! $value ) {
     my $part_pkg_taxproduct =
       qsearchs( 'part_pkg_taxproduct', { 'taxproductnum'=> $value } );
-    $description = $part_pkg_taxproduct->description
+    $description = $part_pkg_taxproduct->taxproduct . ' ' .
+                   $part_pkg_taxproduct->description
       if $part_pkg_taxproduct;
 }
 
diff --git a/httemplate/elements/tr-part_pkg-taxproducts.html b/httemplate/elements/tr-part_pkg-taxproducts.html
index c57232c08..5dcea09f1 100644
--- a/httemplate/elements/tr-part_pkg-taxproducts.html
+++ b/httemplate/elements/tr-part_pkg-taxproducts.html
@@ -1,18 +1,39 @@
+%# by default, only show default
 <TR>
-  <TH COLSPAN=2>Tax products</TH>
+  <TH ALIGN="right"><% emt('Tax product') %></TH>
+  <TD><& select-taxproduct.html,
+        %opt,
+        'field'       => $field.'_', # expected in edit/process/part_pkg
+        'curr_value'  => $curr_values{''},
+      &>
+  </TD>
+</TR>
+% if ( !$separate ) {
+<TR STYLE="font-size: small">
+  <TD></TD>
+  <TD>
+  <BUTTON TYPE="button" ID="show_taxproduct_class">By usage class
+    <IMG SRC="<%$fsurl%>images/arrow.down.black.png">
+  </BUTTON>
+  </TD>
 </TR>
+<SCRIPT TYPE="text/javascript">
+$().ready(function() {
+  $('#show_taxproduct_class').on('click', function() {
+    this.disabled = true;
+    $('tr.taxproduct_class').show();
+  });
+});
+</SCRIPT>
+% }
 % foreach my $usage_class (@classes) {
 %   my $classnum = $usage_class->classnum;
-%   my $curr_value =
-%        $cgi->param("usage_taxproductnum_$classnum")
-%     || $pkg_options{"usage_taxproductnum_$classnum"}
-%     || '';
-<TR>
-  <TD><% $usage_class->classname %></TD>
+<TR CLASS="taxproduct_class" STYLE="<% $separate ? '' : 'display:none' %>">
+  <TH ALIGN="right"><% $usage_class->classname %></TH>
   <TD><& select-taxproduct.html,
         %opt,
         'field'       => $field.'_'.$classnum,
-        'curr_value'  => $curr_value
+        'curr_value'  => $curr_values{$classnum},
       &>
   </TD>
 </TR>
@@ -20,18 +41,29 @@
 <%init>
 my %opt = @_;
 my $field = delete($opt{field}) || 'taxproductnum';
+my @classes = qsearch('usage_class', { 'disabled' => '' });
+unshift @classes,
+  FS::usage_class->new({ 'classnum' => 'setup', 'classname' => 'Setup', }),
+  FS::usage_class->new({ 'classnum' => 'recur', 'classname' => 'Recur', }),
+;
+my $separate = 0; # will change to 1 if any non-default classes have values
+
 my $pkgpart = delete($opt{pkgpart});
+my %curr_values;
 my %pkg_options;
 if ($pkgpart) {
   my $part_pkg = FS::part_pkg->by_key($pkgpart);
   %pkg_options = $part_pkg->options;
-  $pkg_options{'usage_taxproductnum_'} = $part_pkg->taxproductnum;
+  $curr_values{''} = $part_pkg->taxproductnum;
 }
 
-my @classes = qsearch('usage_class', { 'disabled' => '' });
-unshift @classes,
-  FS::usage_class->new({ 'classnum' => '', 'classname' => '(default)', }),
-  FS::usage_class->new({ 'classnum' => 'setup', 'classname' => 'Setup', }),
-  FS::usage_class->new({ 'classnum' => 'recur', 'classname' => 'Recur', }),
-;
+foreach my $usage_class (@classes) {
+  my $classnum = $usage_class->classnum;
+  my $curr_value =
+       $cgi->param("usage_taxproductnum_$classnum")
+    || $pkg_options{"usage_taxproductnum_$classnum"}
+    || '';
+  $curr_values{$classnum} = $curr_value;
+  $separate = 1 if ( length($classnum) and length($curr_value) );
+}
 </%init>