2b6d88105c
at least the Edit User form should work now, for instance
88 lines
3.1 KiB
Mako
88 lines
3.1 KiB
Mako
## -*- coding: utf-8; -*-
|
|
|
|
## TODO: This function signature is getting out of hand...
|
|
<%def name="autocomplete(field_name, service_url, field_value=None, field_display=None, width='300px', select=None, selected=None, cleared=None, change_clicked=None, options={})">
|
|
<div id="${field_name}-container" class="autocomplete-container">
|
|
${h.hidden(field_name, id=field_name, value=field_value)}
|
|
${h.text(field_name+'-textbox', id=field_name+'-textbox', value=field_display,
|
|
class_='autocomplete-textbox', style='display: none;' if field_value else '')}
|
|
<div id="${field_name}-display" class="autocomplete-display"${'' if field_value else ' style="display: none;"'|n}>
|
|
<span>${field_display or ''}</span>
|
|
<button type="button" id="${field_name}-change" class="autocomplete-change">Change</button>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$('#${field_name}-textbox').autocomplete({
|
|
source: '${service_url}',
|
|
autoFocus: true,
|
|
% for key, value in options.items():
|
|
${key}: ${value},
|
|
% endfor
|
|
focus: function(event, ui) {
|
|
return false;
|
|
},
|
|
% if select:
|
|
select: ${select}
|
|
% else:
|
|
select: function(event, ui) {
|
|
$('#${field_name}').val(ui.item.value);
|
|
$('#${field_name}-display span:first').text(ui.item.label);
|
|
$('#${field_name}-textbox').hide();
|
|
$('#${field_name}-display').show();
|
|
% if selected:
|
|
${selected}(ui.item.value, ui.item.label);
|
|
% endif
|
|
return false;
|
|
}
|
|
% endif
|
|
});
|
|
$('#${field_name}-change').click(function() {
|
|
% if change_clicked:
|
|
if (! ${change_clicked}()) {
|
|
return false;
|
|
}
|
|
% endif
|
|
$('#${field_name}').val('');
|
|
$('#${field_name}-display').hide();
|
|
with ($('#${field_name}-textbox')) {
|
|
val('');
|
|
show();
|
|
focus();
|
|
}
|
|
% if cleared:
|
|
${cleared}();
|
|
% endif
|
|
});
|
|
});
|
|
</script>
|
|
</%def>
|
|
|
|
<%def name="tailbone_autocomplete_template()">
|
|
<script type="text/x-template" id="tailbone-autocomplete-template">
|
|
<div>
|
|
|
|
<b-autocomplete ref="autocomplete"
|
|
:name="name"
|
|
v-show="!selected"
|
|
v-model="autocompleteValue"
|
|
:data="data"
|
|
@typing="getAsyncData"
|
|
@select="selectionMade"
|
|
@input="itemSelected"
|
|
keep-first>
|
|
<template slot-scope="props">
|
|
{{ props.option.label }}
|
|
</template>
|
|
</b-autocomplete>
|
|
|
|
<b-button v-if="selected"
|
|
style="width: 100%; justify-content: left;"
|
|
@click="clearSelection()">
|
|
{{ selected.label }} (click to change)
|
|
</b-button>
|
|
|
|
</div>
|
|
</script>
|
|
</%def>
|
|
|