Bug 7977: Further UI work on the QOTD editor
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / quotes.tt
1     [% INCLUDE 'doc-head-open.inc' %]
2     <title>Koha &rsaquo; Tools &rsaquo; Quote editor</title>
3     [% INCLUDE 'doc-head-close.inc' %]
4     <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
5     <link rel="stylesheet" type="text/css" href="[% themelang %]/css/quotes.css" />
6     <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.dataTables.min.js"></script>
7     <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/dataTables.fnReloadAjax.js"></script>
8     [% INCLUDE 'datatables-strings.inc' %]
9     </script>
10     <script type="text/javascript" src="[% themelang %]/js/datatables.js"></script>
11     <script type="text/javascript" src="[% themelang %]/js/jquery.jeditable.mini.js"></script>
12     <script type="text/javascript">
13     //<![CDATA[
14     var oTable; /* oTable needs to be global */
15     var sEmptyTable = _('No quotes available. Please use the \"Add Quote\" button to add a quote.'); /* override the default message in datatables-strings.inc */
16     $(document).ready(function() {
17         /* NOTE: This is an ajax-source datatable and *not* a server-side sourced datatable. */
18         /* See the datatable docs if you don't understand this difference. */
19         oTable = $("#quotes_editor").dataTable({
20                     "bAutoWidth"        : false,
21                     "bProcessing"       : true,
22                     "bPaginate"         : true,
23                     "sPaginationType"   : "full_numbers",
24                     "sAjaxSource"       : "/cgi-bin/koha/tools/quotes/quotes_ajax.pl",
25                     "aoColumns"         : [
26                                             { "sWidth": "3%"  },
27                                             { "sWidth": "11%" },
28                                             { "sWidth": "75%" },
29                                             { "sWidth": "11%" },
30                                           ],
31                    "oLanguage"          : {
32                                             "sEmptyTable": sEmptyTable,
33                                           },
34                    "fnPreDrawCallback": function(oSettings) {
35                         return true;
36                     },
37                     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
38                         /* do foo on the current row and its child nodes */
39                         var noEditFields = [];
40                         var quoteID = $('td', nRow)[0].innerHTML;
41                         $(nRow).attr("id", quoteID); /* set row ids to quote id */
42                         $('td:eq(0)', nRow).click(function() {$(this.parentNode).toggleClass('selected',this.clicked);}); /* add row selectors */
43                         $('td:eq(0)', nRow).attr("title", _("Click ID to select/deselect quote"));
44                         if (isNaN(quoteID)) {
45                             noEditFields = [0,1,2,3]; /* all fields when adding a quote */
46                         }
47                         else {
48                             noEditFields = [0,3]; /* id, timestamp */
49                         }
50                         /* apply no_edit id to noEditFields */
51                         for (i=0; i<noEditFields.length; i++) {
52                             $('td', nRow)[noEditFields[i]].setAttribute("id","no_edit");
53                         }
54                         return nRow;
55                     },
56                    "fnDrawCallback": function(oSettings) {
57                         /* Apply the jEditable handlers to the table on all fields w/o the no_edit id */
58                         $('#quotes_editor tbody td[id!="no_edit"]').editable( "/cgi-bin/koha/tools/quotes/quotes_ajax.pl", {
59                             "submitdata"    : function ( value, settings ) {
60                                                   return {
61                                                       "column"        : oTable.fnGetPosition( this )[2],
62                                                       "action"        : "edit",
63                                                   };
64                                               },
65                             "height"        : "14px",
66                             "placeholder"   : "Saving data...",
67                         });
68                    },
69         });
70     });
71
72         function fnClickAddQuote(e, node) {
73             if (e.charCode) {
74                 /* some browsers only give charCode, so this will need to be */
75                 /* fixed up to handle that */
76                 console.log('charCode: '+e.charCode);
77             }
78             if (e.keyCode == 13) {
79                 var quoteSource = $('#quoteSource').val();
80                 var quoteText = $('#quoteText').val()
81                 /* If passed a quote source, add the quote to the db */
82                 if (quoteSource && quoteText) {
83                     $.ajax({
84                         url: "/cgi-bin/koha/tools/quotes/quotes_ajax.pl",
85                         type: "POST",
86                         data: {
87                                 "source"    : quoteSource,
88                                 "text"      : quoteText,
89                                 "action"    : "add",
90                         },
91                         success: function(data){
92                                     var newQuote = data[0];
93                                     var aRow = oTable.fnUpdate(
94                                         newQuote,
95                                         node,
96                                         false,
97                                         false
98                                     );
99                                     oTable.fnPageChange( 'last' );
100                                     $('.add_quote_button').attr('onclick', 'fnClickAddRow()'); // re-enable add button
101                             }
102                     });
103                 }
104                 else {
105                     alert(_('Please supply both the text and source of the quote before saving.'));
106                 }
107             }
108             else if (e.keyCode == 27) {
109                 if (confirm(_('Are you sure you want to cancel adding this quote?'))) {
110                     oTable.fnDeleteRow(node);
111                 }
112                 else {
113                     return;
114                 }
115             }
116         }
117
118         function fnClickAddRow() {
119             $('.add_quote_button').removeAttr('onclick'); // disable add button once it has been clicked
120             var aRow = oTable.fnAddData(
121                 [
122                     'NA', // this is hackish to fool the datatable sort routine into placing this row at the end of the list...
123                     '<input id="quoteSource" type="text" style="height:14px; width:99%" onkeydown="fnClickAddQuote(event,this.parentNode.parentNode)"/>',
124                     '<input id="quoteText" type="text" style="height:14px; width:99%" onkeydown="fnClickAddQuote(event,this.parentNode.parentNode)"/>',
125                     '0000-00-00 00:00:00',
126                 ],
127                 false
128             );
129             oTable.fnPageChange( 'last' );
130             $('#quoteSource').focus();
131         }
132
133         function fnClickDeleteRow() {
134             var idsToDelete = oTable.$('.selected').map(function() {
135                   return this.id;
136             }).get().join(', ');
137             if (!idsToDelete) {
138                 alert(_('Please select a quote(s) by clicking the quote id(s) you desire to delete.'));
139             }
140             else if (confirm(_('Are you sure you wish to delete quote(s) ')+idsToDelete+'?')) {
141                 oTable.$('.selected').each(function(){
142                         var quoteID = $(this).attr('id');
143                             $.ajax({
144                                 url: "/cgi-bin/koha/tools/quotes/quotes_ajax.pl",
145                                 type: "POST",
146                                 data: {
147                                         "id"        : quoteID,
148                                         "action"    : "delete",
149                                 },
150                                 /* Delete the row from the datatable */
151                                 success: function(){
152                                     oTable.fnDeleteRow(this);
153                                     oTable.fnReloadAjax(null, null, true);
154                                 }
155                             });
156                     });
157             }
158             else {
159                 return;
160             }
161         }
162     //]]>
163     </script>
164 </head>
165 <body id="tools_quotes" class="tools">
166 [% INCLUDE 'header.inc' %]
167 [% INCLUDE 'cat-search.inc' %]
168
169 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; Quote Editor</div>
170
171 <div id="doc3" class="yui-t2">
172     <div id="bd">
173         <div id="yui-main">
174             <div class="yui-b">
175                 [% INCLUDE 'quotes-toolbar.inc' %]
176                 <h2>Quote editor</h2>
177                 <div id="instructions">
178                 <fieldset id="quote_editor_help" class="rows">
179                     <legend>Instructions</legend>
180                     <div id="quote_editor_inst">
181                         <ul>
182                         <li>Click on the 'Add Quote' button to add a single quote; Press the &lt;Enter&gt; key to save the quote. <b>Note:</b> Both the 'source' and 'text' fields must have content in order for the quote to be saved.</li>
183                         <li>Click on any field to edit the contents; Press the &lt;Enter&gt; key to save edit.</li>
184                         <li>Click on one or more quote numbers to select entire quotes for deletion; Click the 'Delete Quote(s)' button to delete selected quotes.</li>
185                         <li>Click the 'Import Quotes' button in the toolbar to import a CSV file of quotes.</li>
186                         </ul>
187                     </div>
188                 </fieldset>
189                 </div>
190                 <table id="quotes_editor">
191                 <thead>
192                     <tr>
193                         <th><span style="cursor: help" onclick="event.stopPropagation();alert(_('Click on the quote\'s id to select or deselect the quote. Multiple quotes may be selected.'));">ID</span></th>
194                         <th>Source</th>
195                         <th>Text</th>
196                         <th>Last Displayed</th>
197 <!--                        <th>Actions</th>-->
198                     </tr>
199                 </thead>
200                 <tbody>
201                     <!-- tbody content is generated by DataTables -->
202                     <tr>
203                         <td></td>
204                         <td></td>
205                         <td>Loading data...</td>
206                         <td></td>
207 <!--                        <td></td>-->
208                     </tr>
209                 </tbody>
210                 </table>
211                 <fieldset id="footer" class="action">
212                 </fieldset>
213             </div>
214         </div>
215     <div class="yui-b noprint">
216         [% INCLUDE 'tools-menu.inc' %]
217     </div>
218 </div>
219 [% INCLUDE 'intranet-bottom.inc' %]