Koha/koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt
Owen Leonard 6c7c97f67c Bug 22015: Move DataTables CSS to global include
DataTables are used on enough pages in the staff client that it
doesn't make sense to put inclusion of the CSS into each template
where it is needed. This patch moves includes of datatables.css from
individual templates into the global header file.

To test, apply the patch and view various pages which have DataTables.
View various styles of DataTables, e.g.

 - Full pagination, like item search results
 - Four-button, like Saved SQL reports

Everything should look the same as it was.

Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
2019-02-19 19:40:35 +00:00

239 lines
10 KiB
Text

[% USE raw %]
[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Localization</title>
[% INCLUDE 'doc-head-close.inc' popup => 1 %]
</head>
<body id="admin_localization" class="admin">
<div id="main">
<form id="add_translation" method="post">
<input type="hidden" name="entity" value="[% entity | html %]" />
<input type="hidden" name="code" value="[% code | html %]" />
Lang: <select name="lang">
[% FOR language IN languages %]
[% FOR sublanguage IN language.sublanguages_loop %]
[% IF language.plural %]
<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% ELSE %]
<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% END %]
[% END %]
[% END %]
</select>
Translation: <input type="text" name="translation" />
<input type="submit" value="Add" />
</form>
<div id="messages"></div>
<table id="localization">
<thead>
<tr>
<th>Id</th>
<th>Entity</th>
<th>Code</th>
<th>Lang</th>
<th>Translation</th>
<th></th>
</tr>
</thead>
<tbody>
[% FOR t IN translations %]
<tr id="row_id_[% t.id | html %]" data-id="[% t.id | html %]">
<td>[% t.id | html %]</td>
<td>[% t.entity | html %]</td>
<td>[% t.code | html %]</td>
<td class="lang">[% t.lang | html %]</td>
<td class="translation" contenteditable="true">[% t.translation | html %]</td>
<td class="actions"><a href="#" class="delete"><i class="fa fa-trash"></i> Delete</a></td>
</tr>
[% END %]
</tbody>
</table>
</div>
[% MACRO jsinclude BLOCK %]
[% INCLUDE 'datatables.inc' %]
<script>
function show_message( params ) {
var type = params.type;
var data = params.data;
var messages = $("#messages");
var message;
if ( type == 'success_on_update' ) {
message = $('<div class="dialog message"></div>');
message.text(_("Entity %s (code %s) for lang %s has correctly been updated with '%s'").format(data.entity, data.code, data.lang, data.translation));
} else if ( type == 'error_on_update' ) {
message = $('<div class="dialog alert"></div>');
if ( data.error_code == 'already_exists' ) {
message.text(_("A translation already exists for this language."));
} else {
message.text(_("An error occurred when updating this translation."));
}
} else if ( type == 'success_on_delete' ) {
message = $('<div class="dialog message"></div>');
message.text(_("The translation (id %s) has been removed successfully").format(data.id));
} else if ( type == 'error_on_delete' ) {
message = $('<div class="dialog alert"></div>');
message.text(_("An error occurred when deleting this translation"));
} else if ( type == 'success_on_insert' ) {
message = $('<div class="dialog message"></div>');
message.text(_("Translation (id %s) has been added successfully").format(data.id));
} else if ( type == 'error_on_insert' ) {
message = $('<div class="dialog alert"></div>');
if ( data.error_code == 'already_exists' ) {
message.text(_("A translation already exists for this language."));
} else {
message.text(_("An error occurred when adding this translation"));
}
}
$(messages).append(message);
setTimeout(function(){
message.hide()
}, 3000);
}
function send_update_request( data, cell ) {
$.ajax({
data: data,
type: 'PUT',
url: '/cgi-bin/koha/svc/localization',
success: function (data) {
if ( data.error ) {
$(cell).css('background-color', '#FF0000');
show_message({ type: 'error_on_update', data: data });
} else if ( data.is_changed == 1 ) {
$(cell).css('background-color', '#00FF00');
show_message({ type: 'success_on_update', data: data });
}
if ( $(cell).hasClass('lang') ) {
$(cell).text(data.lang)
} else if ( $(cell).hasClass('translation') ) {
$(cell).text(data.translation)
}
},
error: function (data) {
$(cell).css('background-color', '#FF0000');
if ( $(cell).hasClass('lang') ) {
$(cell).text(data.lang)
} else if ( $(cell).hasClass('translation') ) {
$(cell).text(data.translation)
}
show_message({ type: 'error_on_update', data: data });
},
});
}
function send_delete_request( id, cell ) {
$.ajax({
type: 'DELETE',
url: '/cgi-bin/koha/svc/localization/?id='+id,
success: function (data) {
$("#localization").DataTable().row( '#row_id_' + id ).remove().draw();
show_message({ type: 'success_on_delete', data: data });
},
error: function (data) {
$(cell).css('background-color', '#FF0000');
show_message({ type: 'error_on_delete', data: data });
},
});
}
$(document).ready(function() {
$(".dialog").hide();
var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
'bPaginate': false,
}));
var languages_select = $('<select name="lang"></select>');
[% FOR language IN languages %]
[% FOR sublanguage IN language.sublanguages_loop %]
var option;
[% IF language.plural %]
option = $('<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>');
$(languages_select).append(option);
[% ELSE %]
option = $('<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>');
[% END %]
$(languages_select).append(option);
[% END %]
[% END %]
$("td.translation").on('focus', function(){
$(this).css('background-color', '');
});
$("td.lang").on('click', function(){
var td = this;
var lang = $(td).text();
$(td).css('background-color', '');
var my_select = $(languages_select).clone();
$(my_select).find('option[value="' + lang + '"]').attr('selected', 'selected');
$(my_select).on('click', function(e){
e.stopPropagation();
});
$(my_select).on('change', function(){
var tr = $(this).parent().parent();
var id = $(tr).data('id');
var lang = $(this).find('option:selected').val();
var data = "id=" + encodeURIComponent(id) + "&lang=" + encodeURIComponent(lang);
send_update_request( data, td );
});
$(my_select).on('blur', function(){
$(td).html(lang);
});
$(this).html(my_select);
});
$("td.translation").on('blur', function(){
var tr = $(this).parent();
var id = $(tr).data('id');
var translation = $(this).text();
var data = "id=" + encodeURIComponent(id) + "&translation=" + encodeURIComponent(translation);
send_update_request( data, this );
});
$("a.delete").on('click', function(e){
e.preventDefault();
if ( confirm(_("Are you sure you want to delete this translation?")) ) {
var td = $(this).parent();
var tr = $(td).parent();
var id = $(tr).data('id');
send_delete_request( id, td );
}
});
$("#add_translation").on('submit', function(e){
e.preventDefault();
var entity = $(this).find('input[name="entity"]').val();
var code = $(this).find('input[name="code"]').val();
var lang = $(this).find('select[name="lang"] option:selected').val();
var translation = $(this).find('input[name="translation"]').val();
var data = "entity=" + encodeURIComponent(entity) + "&code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang) + "&translation=" + encodeURIComponent(translation);
$.ajax({
data: data,
type: 'POST',
url: '/cgi-bin/koha/svc/localization',
success: function (data) {
if ( data.error ) {
show_message({ type: 'error_on_insert', data: data });
} else {
// FIXME Should append the delete link
table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
show_message({ type: 'success_on_insert', data: data });
}
},
error: function (data) {
show_message({ type: 'error_on_insert', data: data });
},
});
});
});
</script>
[% END %]
[% INCLUDE 'popup-bottom.inc' %]