Revision e28ec811
Von Bernd Bleßmann vor mehr als 3 Jahren hinzugefügt
| SL/Controller/Project.pm | ||
|---|---|---|
| 138 | 138 |
$_[0]->render('project/test_page');
|
| 139 | 139 |
} |
| 140 | 140 |
|
| 141 |
sub action_project_picker_search {
|
|
| 142 |
$_[0]->render('project/project_picker_search', { layout => 0 });
|
|
| 143 |
} |
|
| 144 |
|
|
| 145 |
sub action_project_picker_result {
|
|
| 146 |
$_[0]->render('project/_project_picker_result', { layout => 0 });
|
|
| 147 |
} |
|
| 148 |
|
|
| 141 | 149 |
# |
| 142 | 150 |
# filters |
| 143 | 151 |
# |
| css/kivitendo/main.css | ||
|---|---|---|
| 409 | 409 |
} |
| 410 | 410 |
|
| 411 | 411 |
.chart_picker, |
| 412 |
.part_picker {
|
|
| 412 |
.part_picker, |
|
| 413 |
.project_picker, |
|
| 413 | 414 |
display: inline-block; |
| 414 | 415 |
} |
| 415 | 416 |
.chart_picker:before, |
| 416 |
.part_picker:before {
|
|
| 417 |
.part_picker:before, |
|
| 418 |
.project_picker:before {
|
|
| 417 | 419 |
display: inline-block; |
| 418 | 420 |
vertical-align: middle; |
| 419 | 421 |
height: 100%; |
| ... | ... | |
| 427 | 429 |
font-style: italic; |
| 428 | 430 |
} |
| 429 | 431 |
|
| 432 |
div.project_picker_project, |
|
| 430 | 433 |
div.part_picker_part, |
| 431 | 434 |
div.chart_picker_chart {
|
| 432 | 435 |
padding: 5px; |
| ... | ... | |
| 440 | 443 |
background-color: white; |
| 441 | 444 |
cursor: pointer; |
| 442 | 445 |
} |
| 446 |
div.project_picker_project:hover, |
|
| 443 | 447 |
div.part_picker_part:hover, |
| 444 | 448 |
div.chart_picker_chart:hover {
|
| 445 | 449 |
color: #FE5F14; |
| ... | ... | |
| 463 | 467 |
background-size: contain; |
| 464 | 468 |
} |
| 465 | 469 |
span.chart_picker input, |
| 466 |
span.part_picker input {
|
|
| 470 |
span.part_picker input, |
|
| 471 |
span.project_picker input {
|
|
| 467 | 472 |
padding-right: 20px; |
| 468 | 473 |
box-sizing: padding-box; |
| 469 | 474 |
-moz-box-sizing: padding-box; |
| 470 | 475 |
-webkit-box-sizing: padding-box; |
| 471 | 476 |
} |
| 472 | 477 |
span.chart_picker, |
| 473 |
span.part_picker {
|
|
| 478 |
span.part_picker, |
|
| 479 |
span.project_picker {
|
|
| 474 | 480 |
white-space: nowrap; |
| 475 | 481 |
} |
| 476 | 482 |
div.ppp_block span.ppp_block_number, |
| css/lx-office-erp/main.css | ||
|---|---|---|
| 376 | 376 |
} |
| 377 | 377 |
|
| 378 | 378 |
.chart_picker, |
| 379 |
.part_picker {
|
|
| 379 |
.part_picker, |
|
| 380 |
.project_picker {
|
|
| 380 | 381 |
} |
| 381 | 382 |
.kivi-validator-invalid, |
| 382 | 383 |
.customer-vendor-picker-undefined, |
| ... | ... | |
| 387 | 388 |
font-style: italic; |
| 388 | 389 |
} |
| 389 | 390 |
div.part_picker_part, |
| 390 |
div.chart_picker_chart {
|
|
| 391 |
div.chart_picker_chart, |
|
| 392 |
div.project_picker_project {
|
|
| 391 | 393 |
padding: 5px; |
| 392 | 394 |
margin: 5px; |
| 393 | 395 |
border: 1px; |
| ... | ... | |
| 400 | 402 |
cursor: pointer; |
| 401 | 403 |
} |
| 402 | 404 |
div.part_picker_part:hover, |
| 403 |
div.chart_picker_chart:hover {
|
|
| 405 |
div.chart_picker_chart:hover, |
|
| 406 |
div.project_picker_project:hover {
|
|
| 404 | 407 |
background-color: lightgray; |
| 405 | 408 |
border-color: gray; |
| 406 | 409 |
} |
| ... | ... | |
| 431 | 434 |
margin-left: -13px; |
| 432 | 435 |
} |
| 433 | 436 |
span.chart_picker input, |
| 434 |
span.part_picker input {
|
|
| 437 |
span.part_picker input, |
|
| 438 |
span.project_picker input {
|
|
| 435 | 439 |
padding-right: 20px; |
| 436 | 440 |
background: white url("../../image/search.svg") no-repeat center right;
|
| 437 | 441 |
background-size: contain; |
| ... | ... | |
| 443 | 447 |
td span.chart_picker input, |
| 444 | 448 |
th span.chart_picker input, |
| 445 | 449 |
td span.part_picker input, |
| 446 |
th span.part_picker input {
|
|
| 450 |
th span.part_picker input, |
|
| 451 |
td span.project_picker input, |
|
| 452 |
th span.project_picker input {
|
|
| 453 |
|
|
| 447 | 454 |
padding-right: 15px; |
| 448 | 455 |
} |
| 449 | 456 |
|
| 450 | 457 |
span.chart_picker, |
| 451 |
span.part_picker {
|
|
| 458 |
span.part_picker, |
|
| 459 |
span.project_picker {
|
|
| 452 | 460 |
/* white-space: nowrap;*/ |
| 453 | 461 |
} |
| 454 | 462 |
|
| ... | ... | |
| 475 | 483 |
float:left; |
| 476 | 484 |
margin-left:1em; |
| 477 | 485 |
} |
| 486 |
|
|
| 478 | 487 |
div.ppp_line span.ppp_block_description, |
| 479 | 488 |
div.cpc_line span.cpc_block_description |
| 480 | 489 |
{
|
| js/autocomplete_project.js | ||
|---|---|---|
| 38 | 38 |
var last_dummy = $dummy.val(); |
| 39 | 39 |
var timer; |
| 40 | 40 |
|
| 41 |
function open_dialog () {
|
|
| 42 |
k.popup_dialog({
|
|
| 43 |
url: 'controller.pl?action=Project/project_picker_search', |
|
| 44 |
// data that can be accessed in template project_picker_search via FORM.boss |
|
| 45 |
data: $.extend({ // add id of part to the rest of the data in ajax_data, e.g. no_paginate, booked, ...
|
|
| 46 |
real_id: real_id, |
|
| 47 |
select: 1, |
|
| 48 |
}, ajax_data($dummy.val())), |
|
| 49 |
id: 'project_selection', |
|
| 50 |
dialog: {
|
|
| 51 |
title: k.t8('Project picker'),
|
|
| 52 |
width: 800, |
|
| 53 |
height: 800, |
|
| 54 |
}, |
|
| 55 |
load: function() { init_search(); }
|
|
| 56 |
}); |
|
| 57 |
window.clearTimeout(timer); |
|
| 58 |
return true; |
|
| 59 |
} |
|
| 60 |
|
|
| 61 |
function init_search() {
|
|
| 62 |
$('#project_picker_filter').keypress(function(e) { result_timer(e) }).focus();
|
|
| 63 |
$('#no_paginate').change(function() { update_results() });
|
|
| 64 |
$('#project_picker_clear_filter').click(function() {
|
|
| 65 |
$('#project_picker_filter').val('').focus();
|
|
| 66 |
update_results(); |
|
| 67 |
}); |
|
| 68 |
update_results(); |
|
| 69 |
} |
|
| 70 |
|
|
| 41 | 71 |
function ajax_data(term) {
|
| 42 | 72 |
var data = {
|
| 43 | 73 |
'filter.all:substr:multi::ilike': term, |
| 44 | 74 |
'filter.valid': 'valid', |
| 75 |
'filter.active': 'active', |
|
| 45 | 76 |
no_paginate: $('#no_paginate').prop('checked') ? 1 : 0,
|
| 46 | 77 |
current: $real.val(), |
| 47 | 78 |
}; |
| 48 | 79 |
|
| 49 | 80 |
if ($customer_id && $customer_id.val()) |
| 50 | 81 |
data['filter.customer_id'] = $customer_id.val().split(',');
|
| 51 |
|
|
| 52 | 82 |
return data; |
| 53 | 83 |
} |
| 54 | 84 |
|
| ... | ... | |
| 99 | 129 |
data: $.extend({
|
| 100 | 130 |
'real_id': $real.val(), |
| 101 | 131 |
}, ajax_data(function(){ var val = $('#project_picker_filter').val(); return val === undefined ? '' : val })),
|
| 102 |
success: function(data){ $('#project_picker_result').html(data) }
|
|
| 132 |
success: function(data){
|
|
| 133 |
$('#project_picker_result').html(data);
|
|
| 134 |
} |
|
| 103 | 135 |
}); |
| 104 | 136 |
} |
| 105 | 137 |
|
| ... | ... | |
| 118 | 150 |
timer = window.setTimeout(update_results, 100); |
| 119 | 151 |
} |
| 120 | 152 |
|
| 153 |
function close_popup() {
|
|
| 154 |
$('#project_selection').dialog('close');
|
|
| 155 |
} |
|
| 156 |
|
|
| 121 | 157 |
function handle_changed_text(callbacks) {
|
| 122 | 158 |
$.ajax({
|
| 123 | 159 |
url: 'controller.pl?action=Project/ajax_autocomplete', |
| ... | ... | |
| 204 | 240 |
}); |
| 205 | 241 |
|
| 206 | 242 |
// now add a picker div after the original input |
| 207 |
var pcont = $('<span>').addClass('position-absolute');
|
|
| 208 |
var picker = $('<div>');
|
|
| 209 |
$dummy.after(pcont); |
|
| 210 |
pcont.append(picker); |
|
| 211 |
|
|
| 243 |
var popup_button = $('<span>').addClass('ppp_popup_button');
|
|
| 244 |
$dummy.after(popup_button); |
|
| 245 |
popup_button.click(open_dialog); |
|
| 212 | 246 |
var pp = {
|
| 213 | 247 |
real: function() { return $real },
|
| 214 | 248 |
dummy: function() { return $dummy },
|
| ... | ... | |
| 218 | 252 |
set_item: set_item, |
| 219 | 253 |
reset: make_defined_state, |
| 220 | 254 |
is_defined_state: function() { return state == STATES.PICKED },
|
| 221 |
init_results: function () {
|
|
| 255 |
init_results: function() {
|
|
| 222 | 256 |
$('div.project_picker_project').each(function(){
|
| 223 | 257 |
$(this).click(function(){
|
| 224 | 258 |
set_item({
|
| 225 | 259 |
id: $(this).children('input.project_picker_id').val(),
|
| 226 | 260 |
name: $(this).children('input.project_picker_description').val(),
|
| 227 | 261 |
}); |
| 262 |
close_popup(); |
|
| 228 | 263 |
$dummy.focus(); |
| 229 | 264 |
return true; |
| 230 |
}); |
|
| 231 |
}); |
|
| 265 |
}); }); |
|
| 232 | 266 |
$('#project_selection').keydown(function(e){
|
| 233 |
if (e.which == KEY.ESCAPE) {
|
|
| 234 |
$dummy.focus(); |
|
| 235 |
} |
|
| 267 |
if (e.which == KEY.ESCAPE) {
|
|
| 268 |
close_popup(); |
|
| 269 |
$dummy.focus(); |
|
| 270 |
} |
|
| 236 | 271 |
}); |
| 237 | 272 |
} |
| 238 | 273 |
} |
| templates/webpages/project/_project_picker_result.html | ||
|---|---|---|
| 1 |
[%- USE T8 %] |
|
| 2 |
[%- USE HTML %] |
|
| 3 |
[%- USE L %] |
|
| 4 |
[%- USE LxERP %] |
|
| 5 |
|
|
| 6 |
[% FOREACH project = SELF.projects %] |
|
| 7 |
<div class='project_picker_project [% FORM.hide_project_details ? 'ppp_line' : 'ppp_block' %]'> |
|
| 8 |
<input type='hidden' class='project_picker_id' value='[% project.id %]'> |
|
| 9 |
<input type='hidden' class='project_picker_description' value='[% project.displayable_name %]'> |
|
| 10 |
<span class='ppp_block_number'>[% project.projectnumber | html %]</span> |
|
| 11 |
<span class='ppp_block_description'>[% project.description | html %]</span> |
|
| 12 |
</div> |
|
| 13 |
[%- END %] |
|
| 14 |
|
|
| 15 |
<div style='clear:both'></div> |
|
| 16 |
|
|
| 17 |
[% L.paginate_controls(target='#project_picker_result', selector='#project_picker_result', models=SELF.models) %] |
|
| 18 |
<script type='text/javascript'> |
|
| 19 |
kivi.ProjectPicker($('#'+$('#project_picker_real_id').val())).init_results();
|
|
| 20 |
</script> |
|
| templates/webpages/project/project_picker_search.html | ||
|---|---|---|
| 1 |
[%- USE HTML %] |
|
| 2 |
[%- USE L %] |
|
| 3 |
[%- USE P %] |
|
| 4 |
[%- USE LxERP %] |
|
| 5 |
[%- USE T8 %] |
|
| 6 |
|
|
| 7 |
[% L.hidden_tag('project_picker_real_id', FORM.real_id) %]
|
|
| 8 |
[% LxERP.t8("Filter") %]: [% L.input_tag('project_picker_filter', SELF.models.filtered.laundered.all_substr_multi__ilike, class='project_picker_filter') %]
|
|
| 9 |
[% P.link_tag("javascript:void(0);", "x", id='project_picker_clear_filter') %]
|
|
| 10 |
<div class='float-right'> |
|
| 11 |
[% L.checkbox_tag('no_paginate', checked=FORM.no_paginate, id='no_paginate', for_submit=1, label=LxERP.t8('All as list')) %]
|
|
| 12 |
</div> |
|
| 13 |
|
|
| 14 |
<div id='project_picker_result'> |
|
| 15 |
</div> |
|
Auch abrufbar als: Unified diff
Projekt-Picker-Lupe: Copy/paste und Anpassungen vom Chart-Picker