MT#5879 Form with datatable field for one page app.

lib/NGCP/Panel/Controller/Invoice.pm

@@ -7,6 +7,9 @@ use DateTime::Format::Strptime;
 use HTTP::Status qw(HTTP_SEE_OTHER);
 use File::Type;
 use MIME::Base64 qw(encode_base64);
+use JSON;
+use Number::Phone;
+use URI::Encode;
 
 use NGCP::Panel::Utils::Contract;
 use NGCP::Panel::Utils::Message;
@@ -17,9 +20,6 @@ use NGCP::Panel::Form::Invoice::Basic;
 use NGCP::Panel::Model::DB::InvoiceTemplate;
 use NGCP::Panel::Utils::InvoiceTemplate;
 
-use JSON;
-use Number::Phone;
-
 sub auto {
     my ($self, $c) = @_;
     $c->log->debug(__PACKAGE__ . '::auto');
@@ -319,7 +319,15 @@ sub invoice_generate :Chained('base') :PathPart('generate') :Args(0) {
     $in->{provider_id} = $c->stash->{provider}->id;
 
 
-    $validator = NGCP::Panel::Form::Invoice::Generate->new( backend => $backend );
+    $validator = NGCP::Panel::Form::Invoice::Generate->new( 
+        #backend => $backend, 
+        #client_contract_ajax_src => $c->uri_for_action( '/invoice/ajax_datatables_data', [ $self->provider_id, 'invoice_list_data' ],
+    );
+    $validator->field('client_contract_id')->ajax_src(  
+        $c->uri_for_action( 
+            '/invoice/ajax_datatables_data', 
+            [ $in->{provider_id}, 'provider_client_list' ] ,
+        )->as_string());
     $validator->remove_undef_in($in);
     #need to think how to automate it - maybe through form showing param through args? what about args for uri_for_action?
     $validator->action( $c->uri_for_action('invoice/invoice_generate',[$in->{provider_id}]) );

lib/NGCP/Panel/Field/DataTable.pm

@@ -1,6 +1,9 @@
 package NGCP::Panel::Field::DataTable;
 use HTML::FormHandler::Moose;
 use Template;
+use JSON;
+use URI::Encode;
+
 extends 'HTML::FormHandler::Field';
 
 has '+widget' => (default => ''); # leave this empty, as there is no widget ...
@@ -17,7 +20,12 @@ sub render_element {
     my $output = '';
 
     (my $tablename = $self->html_name) =~ s!\.!!g;
-
+    if($self->ajax_src !~/dt_columns/){
+        my $i = 0;
+        my $dt_columns = [ map {{name=>$_,title=>$self->table_titles->[$i++],}} @{$self->table_fields} ];
+        my $decoder = URI::Encode->new;
+        $self->ajax_src( $self->ajax_src.($self->ajax_src!~/\?/?'?':'&').'dt_columns='.$decoder->encode(to_json($dt_columns)) );
+    }
     my $vars = {
         label => $self->label,
         field_name => $self->html_name,
@@ -30,6 +38,7 @@ sub render_element {
         errors => $self->errors,
         language_file => $self->language_file,
     };
+    
     my $t = new Template({ 
         ABSOLUTE => 1, 
         INCLUDE_PATH => [

share/templates/helpers/modal.tt

@@ -40,6 +40,11 @@
             window.location.href="[% m.close_target ? m.close_target : c.uri_for() %]";
             [%END%]
         });
+        [%IF m.ajax_load%]
+        $('#mod_edit script').each(function( key, value ) {
+            eval(value.innerHTML);
+        });
+        [%END%]
 
         // on clicking a button within the form, add a hidden field "submitid"
         // determining the name of the button being clicked

share/templates/invoice/list.tt

@@ -62,6 +62,14 @@ function applyClientFilter(table,tr,contact_id){
     localStorage.setItem('ngcp_dt.invoice_list_data_ajax_table.paramsJSON',JSON.stringify({'client_contact_id':contact_id}));
     refreshInvoicesTable();
 }
+function showGenerateForm(contract_id, contact_id){
+    fetch_into(
+        'invoice_generate_form', 
+        '[%c.uri_for_action("/invoice/invoice_generate", [ provider.id])%]',
+        'item=invoice_generate&client_contract_id='+contract_id,
+        function(){modalFormScript();}
+    );
+}
 </script>
 
 <div class="ngcp-separator"></div>
@@ -93,7 +101,7 @@ function applyClientFilter(table,tr,contact_id){
         { 
             name => c.loc('Generate invoice'), 
             uri => 'javascript:void(0);', 
-            onclick => "fetch_into(\\'invoice_generate_form\\', \\'" _ c.uri_for_action('/invoice/invoice_generate', [ provider.id]) _ "\\',\\'item=invoice_generate&client_contract_id='+full.contracts_id+'\\',function(){modalFormScript();});void(0);", 
+            onclick => "showGenerateForm('+full.contracts_id+');void(0);", 
             class => 'btn-small btn-primary', 
             icon => 'icon-star' 
         },