Projekt-Picker-Lupe: Copy/paste und Anpassungen vom Chart-Picker

diff --git a/SL/Controller/Project.pm b/SL/Controller/Project.pm
index 76f85b2..80833b0 100644 (file)
--- a/SL/Controller/Project.pm
+++ b/SL/Controller/Project.pm
@@ -138,6 +138,14 @@ sub action_test_page {
   $_[0]->render('project/test_page');
 }
 
+sub action_project_picker_search {
+  $_[0]->render('project/project_picker_search', { layout => 0 });
+}
+
+sub action_project_picker_result {
+  $_[0]->render('project/_project_picker_result', { layout => 0 });
+}
+
 #
 # filters
 #

diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css
index 563bda9..1cbebb2 100644 (file)
--- a/css/kivitendo/main.css
+++ b/css/kivitendo/main.css
@@ -409,11 +409,13 @@ label {
 }
 
 .chart_picker,
-.part_picker {
+.part_picker,
+.project_picker,
   display: inline-block;
 }
 .chart_picker:before,
-.part_picker:before {
+.part_picker:before,
+.project_picker:before {
   display: inline-block;
   vertical-align: middle;
   height: 100%;
@@ -427,6 +429,7 @@ label {
   font-style: italic;
 }
 
+div.project_picker_project,
 div.part_picker_part,
 div.chart_picker_chart {
   padding: 5px;
@@ -440,6 +443,7 @@ div.chart_picker_chart {
   background-color: white;
   cursor: pointer;
 }
+div.project_picker_project:hover,
 div.part_picker_part:hover,
 div.chart_picker_chart:hover {
   color: #FE5F14;
@@ -463,14 +467,16 @@ span.ppp_popup_button {
   background-size: contain;
 }
 span.chart_picker input,
-span.part_picker input {
+span.part_picker input,
+span.project_picker input {
   padding-right: 20px;
   box-sizing: padding-box;
   -moz-box-sizing: padding-box;
   -webkit-box-sizing: padding-box;
 }
 span.chart_picker,
-span.part_picker {
+span.part_picker,
+span.project_picker {
   white-space: nowrap;
 }
 div.ppp_block span.ppp_block_number,

diff --git a/css/lx-office-erp/main.css b/css/lx-office-erp/main.css
index 36fe035..0c604fd 100644 (file)
--- a/css/lx-office-erp/main.css
+++ b/css/lx-office-erp/main.css
@@ -376,7 +376,8 @@ label {
 }
 
 .chart_picker,
-.part_picker {
+.part_picker,
+.project_picker {
 }
 .kivi-validator-invalid,
 .customer-vendor-picker-undefined,
@@ -387,7 +388,8 @@ label {
   font-style: italic;
 }
 div.part_picker_part,
-div.chart_picker_chart {
+div.chart_picker_chart,
+div.project_picker_project {
   padding: 5px;
   margin: 5px;
   border: 1px;
@@ -400,7 +402,8 @@ div.chart_picker_chart {
   cursor: pointer;
 }
 div.part_picker_part:hover,
-div.chart_picker_chart:hover {
+div.chart_picker_chart:hover,
+div.project_picker_project:hover {
   background-color: lightgray;
   border-color: gray;
 }
@@ -431,7 +434,8 @@ th span.ppp_popup_button {
   margin-left: -13px;
 }
 span.chart_picker input,
-span.part_picker input {
+span.part_picker input,
+span.project_picker input {
   padding-right: 20px;
   background: white url("../../image/search.svg") no-repeat center right;
   background-size: contain;
@@ -443,12 +447,16 @@ span.part_picker input {
 td span.chart_picker input,
 th span.chart_picker input,
 td span.part_picker input,
-th span.part_picker input {
+th span.part_picker input,
+td span.project_picker input,
+th span.project_picker input {
+
   padding-right: 15px;
 }
 
 span.chart_picker,
-span.part_picker {
+span.part_picker,
+span.project_picker {
  /* white-space: nowrap;*/
 }
 
@@ -475,6 +483,7 @@ div.ppp_line span.ppp_block_ean {
   float:left;
   margin-left:1em;
 }
+
 div.ppp_line span.ppp_block_description,
 div.cpc_line span.cpc_block_description
 {

diff --git a/js/autocomplete_project.js b/js/autocomplete_project.js
index 3a40935..e781d96 100644 (file)
--- a/js/autocomplete_project.js
+++ b/js/autocomplete_project.js
@@ -38,17 +38,47 @@ namespace('kivi', function(k){
     var last_dummy   = $dummy.val();
     var timer;
 
+    function open_dialog () {
+      k.popup_dialog({
+        url: 'controller.pl?action=Project/project_picker_search',
+        // data that can be accessed in template project_picker_search via FORM.boss
+        data: $.extend({  // add id of part to the rest of the data in ajax_data, e.g. no_paginate, booked, ...
+          real_id: real_id,
+          select: 1,
+        }, ajax_data($dummy.val())),
+        id: 'project_selection',
+        dialog: {
+          title: k.t8('Project picker'),
+          width: 800,
+          height: 800,
+        },
+        load: function() { init_search(); }
+      });
+      window.clearTimeout(timer);
+      return true;
+    }
+
+    function init_search() {
+      $('#project_picker_filter').keypress(function(e) { result_timer(e) }).focus();
+      $('#no_paginate').change(function() { update_results() });
+      $('#project_picker_clear_filter').click(function() {
+        $('#project_picker_filter').val('').focus();
+        update_results();
+      });
+      update_results();
+    }
+
     function ajax_data(term) {
       var data = {
         'filter.all:substr:multi::ilike': term,
         'filter.valid': 'valid',
+        'filter.active': 'active',
         no_paginate:  $('#no_paginate').prop('checked') ? 1 : 0,
         current:  $real.val(),
       };
 
       if ($customer_id && $customer_id.val())
         data['filter.customer_id'] = $customer_id.val().split(',');
-
       return data;
     }
 
@@ -99,7 +129,9 @@ namespace('kivi', function(k){
         data: $.extend({
             'real_id': $real.val(),
         }, ajax_data(function(){ var val = $('#project_picker_filter').val(); return val === undefined ? '' : val })),
-        success: function(data){ $('#project_picker_result').html(data) }
+        success: function(data){
+          $('#project_picker_result').html(data);
+        }
       });
     }
 
@@ -118,6 +150,10 @@ namespace('kivi', function(k){
       timer = window.setTimeout(update_results, 100);
     }
 
+    function close_popup() {
+      $('#project_selection').dialog('close');
+    }
+
     function handle_changed_text(callbacks) {
       $.ajax({
         url: 'controller.pl?action=Project/ajax_autocomplete',
@@ -204,11 +240,9 @@ namespace('kivi', function(k){
     });
 
     // now add a picker div after the original input
-    var pcont  = $('<span>').addClass('position-absolute');
-    var picker = $('<div>');
-    $dummy.after(pcont);
-    pcont.append(picker);
-
+    var popup_button = $('<span>').addClass('ppp_popup_button');
+    $dummy.after(popup_button);
+    popup_button.click(open_dialog);
     var pp = {
       real:           function() { return $real },
       dummy:          function() { return $dummy },
@@ -218,21 +252,22 @@ namespace('kivi', function(k){
       set_item:       set_item,
       reset:          make_defined_state,
       is_defined_state: function() { return state == STATES.PICKED },
-      init_results:    function () {
+      init_results: function() {
         $('div.project_picker_project').each(function(){
           $(this).click(function(){
             set_item({
               id:   $(this).children('input.project_picker_id').val(),
               name: $(this).children('input.project_picker_description').val(),
             });
+            close_popup();
             $dummy.focus();
             return true;
-          });
-        });
+          });  });
         $('#project_selection').keydown(function(e){
-           if (e.which == KEY.ESCAPE) {
-             $dummy.focus();
-           }
+          if (e.which == KEY.ESCAPE) {
+            close_popup();
+            $dummy.focus();
+          }
         });
       }
     }

diff --git a/templates/webpages/project/_project_picker_result.html b/templates/webpages/project/_project_picker_result.html
new file mode 100644 (file)
index 0000000..ee52c5d
--- /dev/null
+++ b/templates/webpages/project/_project_picker_result.html
@@ -0,0 +1,20 @@
+[%- USE T8 %]
+[%- USE HTML %]
+[%- USE L %]
+[%- USE LxERP %]
+
+[% FOREACH project = SELF.projects %]
+<div class='project_picker_project [% FORM.hide_project_details ? 'ppp_line' : 'ppp_block' %]'>
+  <input type='hidden' class='project_picker_id' value='[% project.id %]'>
+  <input type='hidden' class='project_picker_description' value='[% project.displayable_name %]'>
+  <span class='ppp_block_number'>[% project.projectnumber | html %]</span>
+  <span class='ppp_block_description'>[% project.description | html %]</span>
+</div>
+[%- END %]
+
+<div style='clear:both'></div>
+
+[% L.paginate_controls(target='#project_picker_result', selector='#project_picker_result', models=SELF.models) %]
+<script type='text/javascript'>
+  kivi.ProjectPicker($('#'+$('#project_picker_real_id').val())).init_results();
+</script>

diff --git a/templates/webpages/project/project_picker_search.html b/templates/webpages/project/project_picker_search.html
new file mode 100644 (file)
index 0000000..476a5df
--- /dev/null
+++ b/templates/webpages/project/project_picker_search.html
@@ -0,0 +1,15 @@
+[%- USE HTML %]
+[%- USE L %]
+[%- USE P %]
+[%- USE LxERP %]
+[%- USE T8 %]
+
+[% L.hidden_tag('project_picker_real_id', FORM.real_id) %]
+[% LxERP.t8("Filter") %]: [% L.input_tag('project_picker_filter', SELF.models.filtered.laundered.all_substr_multi__ilike, class='project_picker_filter') %]
+[% P.link_tag("javascript:void(0);", "x", id='project_picker_clear_filter') %]
+<div class='float-right'>
+  [% L.checkbox_tag('no_paginate', checked=FORM.no_paginate, id='no_paginate', for_submit=1, label=LxERP.t8('All as list')) %]
+</div>
+
+<div id='project_picker_result'>
+</div>