From e28ec8115ffd3411bd7ffd0bfaf5dab35f807c2a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bernd=20Ble=C3=9Fmann?= Date: Mon, 11 Jan 2021 16:13:16 +0100 Subject: [PATCH] Projekt-Picker-Lupe: Copy/paste und Anpassungen vom Chart-Picker --- SL/Controller/Project.pm | 8 +++ css/kivitendo/main.css | 14 +++-- css/lx-office-erp/main.css | 21 +++++-- js/autocomplete_project.js | 61 +++++++++++++++---- .../project/_project_picker_result.html | 20 ++++++ .../project/project_picker_search.html | 15 +++++ 6 files changed, 116 insertions(+), 23 deletions(-) create mode 100644 templates/webpages/project/_project_picker_result.html create mode 100644 templates/webpages/project/project_picker_search.html diff --git a/SL/Controller/Project.pm b/SL/Controller/Project.pm index 76f85b27a..80833b0a1 100644 --- 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 563bda962..1cbebb2ce 100644 --- 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 36fe035b1..0c604fd72 100644 --- 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 3a40935d5..e781d96d6 100644 --- 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 = $('').addClass('position-absolute'); - var picker = $('
'); - $dummy.after(pcont); - pcont.append(picker); - + var popup_button = $('').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 index 000000000..ee52c5da4 --- /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 %] +
+ + + [% project.projectnumber | html %] + [% project.description | html %] +
+[%- END %] + +
+ +[% L.paginate_controls(target='#project_picker_result', selector='#project_picker_result', models=SELF.models) %] + diff --git a/templates/webpages/project/project_picker_search.html b/templates/webpages/project/project_picker_search.html new file mode 100644 index 000000000..476a5df0d --- /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') %] +
+ [% L.checkbox_tag('no_paginate', checked=FORM.no_paginate, id='no_paginate', for_submit=1, label=LxERP.t8('All as list')) %] +
+ +
+
-- 2.20.1