Koha/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt
Owen Leonard 169758fb56
Bug 31014: Minor UI problems in QOTD editor tool
This patch makes some cosmetic and functional updates to Quote of the
Day template, including simplifying some JavaScript, adding consisten
styles to buttons and page sections, and adding visible buttons to
jEditable text inputs.

The patch also improves the Quotes page breadcrumbs to add context
on the single quote entry page.

The patch removes quotes.css which is obsolete.

To test, apply the page and go to Tools -> Quote editor.

- The breadcrumbs should read "Tools -> Quote editor."
- Click the "New quote" button. The breadcrumbs should read "Tools ->
  Quote editor -> Add quote"
- Go back and click the "Import quotes" button.
- Confirm that the layout of the page looks good and that the upload
  instructions are shown.
- Upload a CSV file of quotes
  - The instructions should now show information about editing and
    saving quotes.
  - The "Save quotes" button should be styled consistently with other
    submit buttons.
  - Confirm that you can click in the "Source" and "Quote" table cells
    to trigger the display of a textarea where you can edit the text.
    Confirm that both the "Save" and "Cancel" buttons work.
  - Click the "Save quotes" button. A message should appear which shows
    how many quotes were imported.*
  - Confirm that your quotes are saved correctly, including any changes
    you made.

* This process could be improved: When the quotes are done importing the
toolbar doesn't change, and there isn't an indication that the import is
complete.

Signed-off-by: Sam Lau <samalau@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-09-01 11:23:20 -03:00

251 lines
10 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

[% USE raw %]
[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Quote editor &rsaquo; Tools &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
</head>
<body id="tools_quotes" class="tools">
[% WRAPPER 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
[% END %]
[% WRAPPER 'sub-header.inc' %]
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item %]
<a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
[% END %]
[% IF op == 'add_form' %]
[% WRAPPER breadcrumb_item %]
<a href="/cgi-bin/koha/tools/quotes.pl">Quote editor</a>
[% END %]
[% WRAPPER breadcrumb_item bc_active= 1 %]
<span>Add quote</span>
[% END %]
[% ELSE %]
[% WRAPPER breadcrumb_item bc_active= 1 %]
<span>Quote editor</span>
[% END %]
[% END %]
[% END #/ WRAPPER breadcrumbs %]
[% END #/ WRAPPER sub-header.inc %]
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
[% FOREACH m IN messages %]
<div class="dialog [% m.type | html %]" id="quote_action_result_dialog">
[% SWITCH m.code %]
[% CASE 'error_on_update' %]
<span>An error occurred when updating this quote. Perhaps it already exists</span>
[% CASE 'error_on_insert' %]
<span>An error occurred when adding this quote</span>
[% CASE 'success_on_update' %]
<span>Quote updated successfully</span>
[% CASE 'success_on_insert' %]
<span>Quote added successfully</span>
[% CASE %]
<span>[% m.code | html %]</span>
[% END %]
</div>
[% END %]
<div class="dialog message" id="quote_delete_success" style="display: none;"></div>
<div class="dialog alert" id="quote_delete_error" style="display: none;"></div>
[% IF op == 'list' %]
<div id="toolbar" class="btn-toolbar">
<a class="btn btn-default" id="newquote" href="/cgi-bin/koha/tools/quotes.pl?op=add_form"><i class="fa fa-plus"></i> New quote</a>
<a class="btn btn-default" id="import_quotes" href="/cgi-bin/koha/tools/quotes-upload.pl"><i class="fa fa-folder-open"></i> Import quotes</a>
</div>
[% END %]
[% IF op == 'add_form' %]
<h1>[% IF quote %]Modify quote[% ELSE %]New quote[% END %]</h1>
<form action="/cgi-bin/koha/tools/quotes.pl" id="Aform" name="Aform" class="validated" method="post">
<fieldset class="rows">
<input type="hidden" name="op" value="add_validate" />
<ol>
<li>
<label for="text" class="required">Source: </label>
<input type="text" name="source" id="source" value="[% quote.source | html %]" class="required" required="required" />
<span class="required">Required</span>
</li>
<li>
<label for="text" class="required">Text: </label>
<textarea name="text" id="text" class="required" required="required" />[% quote.text | html %]</textarea>
<span class="required">Required</span>
</li>
</ol>
</fieldset>
<fieldset class="action">
<input type="hidden" name="id" value="[% quote.id | html %]" />
<input type="submit" class="btn btn-primary" value="Submit" />
<a class="cancel" href="/cgi-bin/koha/tools/quotes.pl">Cancel</a>
</fieldset>
</form>
[% END %]
[% IF op == 'delete_confirm' %]
<div class="dialog alert">
<form action="/cgi-bin/koha/tools/quotes.pl" method="post">
<h1>Are you sure you want to delete the following quote?</h1>
[% quote.source | html %] - [% quote.text | html %]
<input type="hidden" name="op" value="delete_confirmed" />
<input type="hidden" name="id" value="[% quote.id | html %]" />
<button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete</button>
</form>
<form action="/cgi-bin/koha/tools/quotes.pl" method="get">
<button type="submit" class="deny"><i class="fa fa-fw fa-times"></i> No, do not delete</button>
</form>
</div>
[% END %]
[% IF op == 'list' %]
<h1>Quotes</h1>
[% IF quotes_count > 0 %]
<div class="page-section">
<table id="quotes">
<thead>
<tr>
<th>ID</th>
<th>Source</th>
<th>Text</th>
<th>Last display</th>
<th data-class-name="actions" class="noExport">Actions</th>
</tr>
</thead>
</table>
</div> <!-- /.page-section -->
[% ELSE %]
<div class="dialog message">There are no quotes defined. <a href="/cgi-bin/koha/tools/quotes.pl?op=add_form">Start defining quotes</a>.</div>
[% END %]
<div id="delete_confirm_modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="delete_confirm_modal_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="delete_confirm_modal_label">Delete quote</h3>
</div>
<div class="modal-body">
<div id="delete_confirm_dialog"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" id="delete_confirm_modal_button" role="button" data-toggle="modal">Delete</a>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- #delete_confirm_modal -->
[% END %]
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'tools-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("js/tools-menu.js") | $raw %]
[% INCLUDE 'datatables.inc' %]
<script>
$(document).ready(function() {
var quotes_url = '/api/v1/quotes';
var quotes = $("#quotes").kohaTable({
"ajax": {
"url": quotes_url
},
'emptyTable': '<div class="dialog message">'+_("There are no quotes defined.")+' <a href="/cgi-bin/koha/tools/quotes.pl?op=add_form">'+_("Start defining quotes")+'</a>.</div>',
"columnDefs": [ {
"targets": [0,1,2,3],
"render": function (data, type, row, meta) {
if ( type == 'display' ) {
if ( data != null ) {
return data.escapeHtml();
}
else {
return "";
}
}
return data;
}
} ],
"columns": [
{
"data": "quote_id",
"searchable": true,
"orderable": true
},
{
"data": "source",
"searchable": true,
"orderable": true
},
{
"data": "text",
"searchable": true,
"orderable": true
},
{
"data": "displayed_on",
"render": function(data, type, row, meta) {
return $datetime(row.displayed_on);
},
"searchable": true,
"orderable": true
},
{
"data": function( row, type, val, meta ) {
var result = '<a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/quotes.pl?op=add_form&amp;id='+encodeURIComponent(row.quote_id)+'" role="button"><i class="fa-solid fa-pencil" aria-hidden="true"></i> '+_("Edit")+'</a>';
result += '<form action="/cgi-bin/koha/tools/quotes.pl" method="post">';
result += '<input type="hidden" name="id" value="'+row.quote_id.escapeHtml()+'" />'+"\n";
result += '<a class="btn btn-default btn-xs delete_quote" role="button" href="#" data-toggle="modal" data-target="#delete_confirm_modal" data-quote-id="'+ encodeURIComponent(row.quote_id) +'"><i class="fa fa-trash-can" aria-hidden="true"></i> '+_("Delete")+'</a>';
return result;
},
"searchable": false,
"orderable": false
},
]
});
$('#quotes').on( "click", '.delete_quote', function () {
var quote_id = decodeURIComponent($(this).data('quote-id'));
$("#delete_confirm_dialog").html(
_("You are about to delete the quote #%s.").format(quote_id)
);
$("#delete_confirm_modal_button").unbind("click").on( "click", function () {
$.ajax({
method: "DELETE",
url: "/api/v1/quotes/"+quote_id
}).success(function() {
$("#delete_confirm_modal").modal('hide');
quotes.api().ajax.reload(function (data) {
$("#quote_action_result_dialog").hide();
$("#quote_delete_success").html(_("Quote #%s deleted successfully.").format(quote_id)).show();
});
}).error(function () {
$("#quote_delete_error").html(_("Error deleting quote #%s. Check the logs.").format(quote_id)).show();
});
});
});
});
</script>
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]