Bug 17835: Add an additional LEFT JOIN condition using DBIx::Class
[srvgit] / koha-tmpl / intranet-tmpl / prog / en / modules / reports / reserves_stats.tt
index f5d03f5..9b6c77d 100644 (file)
@@ -1,12 +1,85 @@
+[% USE Branches %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Reports &rsaquo; Holds statistics [% IF ( do_it ) %]&rsaquo; Results[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'calendar.inc' %]
+<script type="text/javascript">
+//<![CDATA[
+        $(document).ready(function() {
+            // http://jqueryui.com/demos/datepicker/#date-range
+            var dates = $( "#filter_reservedate_begin, #filter_reservedate_end" ).datepicker({
+                changeMonth: true,
+                numberOfMonths: 1,
+                onSelect: function( selectedDate ) {
+                    var option = this.id == "filter_reservedate_begin" ? "minDate" : "maxDate",
+                        instance = $( this ).data( "datepicker" );
+                        date = $.datepicker.parseDate(
+                            instance.settings.dateFormat ||
+                            $.datepicker._defaults.dateFormat,
+                            selectedDate, instance.settings );
+                    dates.not( this ).datepicker( "option", option, date );
+                }
+            });
+            var datesND = $( "#filter_notificationdate_begin, #filter_notificationdate_end" ).datepicker({
+                changeMonth: true,
+                numberOfMonths: 1,
+                onSelect: function( selectedDate ) {
+                    var option = this.id == "filter_notificationdate_begin" ? "minDate" : "maxDate",
+                        instance = $( this ).data( "datepicker" );
+                        date = $.datepicker.parseDate(
+                            instance.settings.dateFormat ||
+                            $.datepicker._defaults.dateFormat,
+                            selectedDate, instance.settings );
+                    datesND.not( this ).datepicker( "option", option, date );
+                }
+            });
+            var datesRD = $( "#filter_reminderdate_begin, #filter_reminderdate_end" ).datepicker({
+                changeMonth: true,
+                numberOfMonths: 1,
+                onSelect: function( selectedDate ) {
+                    var option = this.id == "filter_reminderdate_begin" ? "minDate" : "maxDate",
+                        instance = $( this ).data( "datepicker" );
+                        date = $.datepicker.parseDate(
+                            instance.settings.dateFormat ||
+                            $.datepicker._defaults.dateFormat,
+                            selectedDate, instance.settings );
+                    datesRD.not( this ).datepicker( "option", option, date );
+                }
+            });
+            var datesWD = $( "#filter_waitingdate_begin, #filter_waitingdate_end" ).datepicker({
+                changeMonth: true,
+                numberOfMonths: 1,
+                onSelect: function( selectedDate ) {
+                    var option = this.id == "filter_waitingdate_begin" ? "minDate" : "maxDate",
+                        instance = $( this ).data( "datepicker" );
+                        date = $.datepicker.parseDate(
+                            instance.settings.dateFormat ||
+                            $.datepicker._defaults.dateFormat,
+                            selectedDate, instance.settings );
+                    datesWD.not( this ).datepicker( "option", option, date );
+                }
+            });
+            var datesCD = $( "#filter_cancellationdate_begin, #filter_cancellationdate_end" ).datepicker({
+                changeMonth: true,
+                numberOfMonths: 1,
+                onSelect: function( selectedDate ) {
+                    var option = this.id == "filter_cancellationdate_begin" ? "minDate" : "maxDate",
+                        instance = $( this ).data( "datepicker" );
+                        date = $.datepicker.parseDate(
+                            instance.settings.dateFormat ||
+                            $.datepicker._defaults.dateFormat,
+                            selectedDate, instance.settings );
+                    datesCD.not( this ).datepicker( "option", option, date );
+                }
+            });
+        });
+//]]>
+</script>
 <style type="text/css">
        .sql {display:none;}
 </style>
 </head>
-<body>
+<body id="rep_reserve_stats" class="rep">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
@@ -22,7 +95,7 @@
     [% IF ( mainloop ) %]
         <h1>Holds statistics</h1>
         [% IF ( loopfilter ) %]
-            <p>Filtered on</p>
+            <p>Filtered on:</p>
             <ul>
             [% FOREACH loopfilte IN loopfilter %]
                 [% IF ( loopfilte.err ) %]<li class="error">Error:
                 <th>TOTAL</th>
                 </tr>
                 [% FOREACH loopro IN mainloo.looprow %]
-                    [% IF ( loop.odd ) %]
                     <tr>
-                    [% ELSE %]
-                    <tr class="highlight">
-                    [% END %]
                         <td>[% loopro.rowtitle_display or "UNKNOWN VALUE" |html %]</td>
                     [% FOREACH loopcel IN loopro.loopcell %]
                                                <td align="center">
         </thead>
         <tbody>
                <tr >
-                <td>Hold Status </td>
+                <td>Hold status </td>
                 <td><input type="radio" name="Line" value="reservestatus" /></td>
                 <td><input type="radio" name="Column" value="reservestatus" checked="checked" /></td>
                 <td>
                                <input type="checkbox" name="filter_reservestatus_or_5" value="5" /> Cancelled
                                </td>
              </tr>
-             <tr class="highlight">
+             <tr>
                 <td>Hold Date</td>
                 <td><input type="radio" name="Line" value="reservedate" /></td>
                 <td><input type="radio" name="Column" value="reservedate" /></td>
                 <td><label for="filter_reservedate_begin">From</label> <input type="text"  size="10" id="filter_reservedate_begin" name="filter_reservedate_begin" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" border="0" id="openreservedateFrom" style="cursor: pointer;" />
-                   <script type="text/javascript">
-                                  //<![CDATA[ 
-                                  function validate1(date) {
-                        var day = date.getDate();
-                        var month = date.getMonth() + 1;
-                        var year = date.getFullYear();
-                        var weekDay = date.getDay();
-                        var dayMonth = month + '-' + day;
-                        var dateString = year + '-' + month + '-' + day;
-                        var dateTo = document.getElementById('filter_reservedate_end').value.split("-");
-                        var limitDate = new Date(dateTo[0], (dateTo[1] - 1), dateTo[2]);
-                        if (date > limitDate) {
-                             return true;
-                        } else {
-                             return false;
-                        }
-                    }
-                    Calendar.setup({
-                            inputField : "filter_reservedate_begin",
-                            ifFormat : "[% DHTMLcalendar_dateformat %]",
-                            button : "openreservedateFrom",
-                            disableFunc : validate1,
-                            dateStatusFunc : validate1
-                    });
-                                       //]]>
-                                       </script>
                     <label for="filter_reservedate_end">To</label> <input size="10" id="filter_reservedate_end" name="filter_reservedate_end" value="" type="text" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" id="openreservedateTo" style="cursor: pointer;" border="0" />
-                    <script type="text/javascript">
-                                       //<![CDATA[  
-                                       function validate2(date) {
-                         var day = date.getDate();
-                         var month = date.getMonth() + 1;
-                         var year = date.getFullYear();
-                         var weekDay = date.getDay();
-                         var dayMonth = month + '-' + day;
-                         var dateString = year + '-' + month + '-' + day;
-                         var dateFrom = document.getElementById('filter_reservedate_begin').value.split("-");
-                         var limitDate = new Date(dateFrom[0], (dateFrom[1] - 1), dateFrom[2]);
-                         if (limitDate > date) {
-                              return true;
-                         } else {
-                              return false;
-                         }
-                     }
-                     Calendar.setup({
-                             inputField : "filter_reservedate_end",
-                             ifFormat : "[% DHTMLcalendar_dateformat %]",
-                             button : "openreservedateTo",
-                             disableFunc : validate2,
-                             dateStatusFunc : validate2
-                     });
-                                       //]]>
-                                       </script>
                     </td>
                 </tr>
             <tr>
                 <td><input type="radio" name="Line" value="notificationdate" /></td>
                 <td><input type="radio" name="Column" value="notificationdate" /></td>
                 <td><label for="filter_notificationdate_begin">From</label> <input type="text"  size="10" id="filter_notificationdate_begin" name="filter_notificationdate_begin" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" border="0" id="opennotificationdateFrom" style="cursor: pointer;" />
-                   <script type="text/javascript">
-                                  //<![CDATA[ 
-                                  function validate1(date) {
-                        var day = date.getDate();
-                        var month = date.getMonth() + 1;
-                        var year = date.getFullYear();
-                        var weekDay = date.getDay();
-                        var dayMonth = month + '-' + day;
-                        var dateString = year + '-' + month + '-' + day;
-                        var dateTo = document.getElementById('filter_notificationdate_end').value.split("-");
-                        var limitDate = new Date(dateTo[0], (dateTo[1] - 1), dateTo[2]);
-                        if (date > limitDate) {
-                             return true;
-                        } else {
-                             return false;
-                        }
-                    }
-                    Calendar.setup({
-                            inputField : "filter_notificationdate_begin",
-                            ifFormat : "[% DHTMLcalendar_dateformat %]",
-                            button : "opennotificationdateFrom",
-                            disableFunc : validate1,
-                            dateStatusFunc : validate1
-                    });
-                                       //]]>
-                                       </script>
                     <label for="filter_notificationdate_end">To</label> <input  size="10" id="filter_notificationdate_end" name="filter_notificationdate_end" value="" type="text" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" id="opennotificationdateTo" style="cursor: pointer;" border="0" />
-                    <script type="text/javascript">
-                                       //<![CDATA[  
-                                       function validate2(date) {
-                         var day = date.getDate();
-                         var month = date.getMonth() + 1;
-                         var year = date.getFullYear();
-                         var weekDay = date.getDay();
-                         var dayMonth = month + '-' + day;
-                         var dateString = year + '-' + month + '-' + day;
-                         var dateFrom = document.getElementById('filter_notificationdate_begin').value.split("-");
-                         var limitDate = new Date(dateFrom[0], (dateFrom[1] - 1), dateFrom[2]);
-                         if (limitDate > date) {
-                              return true;
-                         } else {
-                              return false;
-                         }
-                     }
-                     Calendar.setup({
-                             inputField : "filter_notificationdate_end",
-                             ifFormat : "[% DHTMLcalendar_dateformat %]",
-                             button : "opennotificationdateTo",
-                             disableFunc : validate2,
-                             dateStatusFunc : validate2
-                     });
-                                       //]]>
-                                       </script>
                     </td>
              </tr>
             <tr>
                 <td><input type="radio" name="Line" value="reminderdate" /></td>
                 <td><input type="radio" name="Column" value="reminderdate" /></td>
                 <td><label for="filter_reminderdate_begin">From</label> <input type="text"  size="10" id="filter_reminderdate_begin" name="Filter" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" border="0" id="openreminderdateFrom" style="cursor: pointer;" />
-                   <script type="text/javascript">
-                                  //<![CDATA[ 
-                                  function validate1(date) {
-                        var day = date.getDate();
-                        var month = date.getMonth() + 1;
-                        var year = date.getFullYear();
-                        var weekDay = date.getDay();
-                        var dayMonth = month + '-' + day;
-                        var dateString = year + '-' + month + '-' + day;
-                        var dateTo = document.getElementById('filter_reminderdate_end').value.split("-");
-                        var limitDate = new Date(dateTo[0], (dateTo[1] - 1), dateTo[2]);
-                        if (date > limitDate) {
-                             return true;
-                        } else {
-                             return false;
-                        }
-                    }
-                    Calendar.setup({
-                            inputField : "filter_reminderdate_begin",
-                            ifFormat : "[% DHTMLcalendar_dateformat %]",
-                            button : "openreminderdateFrom",
-                            disableFunc : validate1,
-                            dateStatusFunc : validate1
-                    });
-                                       //]]>
-                                       </script>
                     <label for="filter_reminderdate_end">To</label> <input size="10" id="filter_reminderdate_end" name="filter_reminderdate_end" value="" type="text" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" id="openreminderdateTo" style="cursor: pointer;" border="0" />
-                    <script type="text/javascript">
-                                       //<![CDATA[  
-                                       function validate2(date) {
-                         var day = date.getDate();
-                         var month = date.getMonth() + 1;
-                         var year = date.getFullYear();
-                         var weekDay = date.getDay();
-                         var dayMonth = month + '-' + day;
-                         var dateString = year + '-' + month + '-' + day;
-                         var dateFrom = document.getElementById('filter_reminderdate_begin').value.split("-");
-                         var limitDate = new Date(dateFrom[0], (dateFrom[1] - 1), dateFrom[2]);
-                         if (limitDate > date) {
-                              return true;
-                         } else {
-                              return false;
-                         }
-                     }
-                     Calendar.setup({
-                             inputField : "filter_reminderdate_end",
-                             ifFormat : "[% DHTMLcalendar_dateformat %]",
-                             button : "openreminderdateTo",
-                             disableFunc : validate2,
-                             dateStatusFunc : validate2
-                     });
-                                       //]]>
-                                       </script>
                     </td>
              </tr>
             <tr>
                 <td><input type="radio" name="Line" value="waitingdate" /></td>
                 <td><input type="radio" name="Column" value="waitingdate" /></td>
                 <td><label for="filter_waitingdate_begin">From</label> <input type="text"  size="10" id="filter_waitingdate_begin" name="filter_waitingdate_begin" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" border="0" id="openwaitingdateFrom" style="cursor: pointer;" />
-                   <script type="text/javascript">
-                                  //<![CDATA[ 
-                                  function validate1(date) {
-                        var day = date.getDate();
-                        var month = date.getMonth() + 1;
-                        var year = date.getFullYear();
-                        var weekDay = date.getDay();
-                        var dayMonth = month + '-' + day;
-                        var dateString = year + '-' + month + '-' + day;
-                        var dateTo = document.getElementById('filter_waitingdate_end').value.split("-");
-                        var limitDate = new Date(dateTo[0], (dateTo[1] - 1), dateTo[2]);
-                        if (date > limitDate) {
-                             return true;
-                        } else {
-                             return false;
-                        }
-                    }
-                    Calendar.setup({
-                            inputField : "filter_waitingdate_begin",
-                            ifFormat : "[% DHTMLcalendar_dateformat %]",
-                            button : "openwaitingdateFrom",
-                            disableFunc : validate1,
-                            dateStatusFunc : validate1
-                    });
-                                       //]]>
-                                       </script>
                     <label for="filter_waitingdate_end">To</label> <input  size="10" id="filter_waitingdate_end" name="filter_waitingdate_end" value="" type="text" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" id="openwaitingdateTo" style="cursor: pointer;" border="0" />
-                    <script type="text/javascript">
-                                       //<![CDATA[  
-                                       function validate2(date) {
-                         var day = date.getDate();
-                         var month = date.getMonth() + 1;
-                         var year = date.getFullYear();
-                         var weekDay = date.getDay();
-                         var dayMonth = month + '-' + day;
-                         var dateString = year + '-' + month + '-' + day;
-                         var dateFrom = document.getElementById('filter_waitingdate_begin').value.split("-");
-                         var limitDate = new Date(dateFrom[0], (dateFrom[1] - 1), dateFrom[2]);
-                         if (limitDate > date) {
-                              return true;
-                         } else {
-                              return false;
-                         }
-                     }
-                     Calendar.setup({
-                             inputField : "filter_waitingdate_end",
-                             ifFormat : "[% DHTMLcalendar_dateformat %]",
-                             button : "openwaitingdateTo",
-                             disableFunc : validate2,
-                             dateStatusFunc : validate2
-                     });
-                                       //]]>
-                                       </script>
                     </td>
              </tr>
                         <tr>
                 <td><input type="radio" name="Line" value="cancellationdate" /></td>
                 <td><input type="radio" name="Column" value="cancellationdate" /></td>
                 <td><label for="filter_cancellationdate_begin">From</label> <input type="text"  size="10" id="filter_cancellationdate_begin" name="filter_cancellationdate_begin" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" border="0" id="opencancellationdateFrom" style="cursor: pointer;" />
-                   <script type="text/javascript">
-                                  //<![CDATA[ 
-                                  function validate1(date) {
-                        var day = date.getDate();
-                        var month = date.getMonth() + 1;
-                        var year = date.getFullYear();
-                        var weekDay = date.getDay();
-                        var dayMonth = month + '-' + day;
-                        var dateString = year + '-' + month + '-' + day;
-                        var dateTo = document.getElementById('filter_cancellationdate_end').value.split("-");
-                        var limitDate = new Date(dateTo[0], (dateTo[1] - 1), dateTo[2]);
-                        if (date > limitDate) {
-                             return true;
-                        } else {
-                             return false;
-                        }
-                    }
-                    Calendar.setup({
-                            inputField : "filter_cancellationdate_begin",
-                            ifFormat : "[% DHTMLcalendar_dateformat %]",
-                            button : "opencancellationdateFrom",
-                            disableFunc : validate1,
-                            dateStatusFunc : validate1
-                    });
-                                       //]]>
-                                       </script>
                     <label for="filter_cancellationdate_end">To</label> <input  size="10" id="filter_cancellationdate_end" name="filter_cancellationdate_end" value="" type="text" />
-                    <img src="[% themelang %]/lib/calendar/cal.gif" alt="Show Calendar" id="opencancellationdateTo" style="cursor: pointer;" border="0" />
-                    <script type="text/javascript">
-                                       //<![CDATA[  
-                                       function validate2(date) {
-                         var day = date.getDate();
-                         var month = date.getMonth() + 1;
-                         var year = date.getFullYear();
-                         var weekDay = date.getDay();
-                         var dayMonth = month + '-' + day;
-                         var dateString = year + '-' + month + '-' + day;
-                         var dateFrom = document.getElementById('filter_cancellationdate_begin').value.split("-");
-                         var limitDate = new Date(dateFrom[0], (dateFrom[1] - 1), dateFrom[2]);
-                         if (limitDate > date) {
-                              return true;
-                         } else {
-                              return false;
-                         }
-                     }
-                     Calendar.setup({
-                             inputField : "filter_cancellationdate_end",
-                             ifFormat : "[% DHTMLcalendar_dateformat %]",
-                             button : "opencancellationdateTo",
-                             disableFunc : validate2,
-                             dateStatusFunc : validate2
-                     });
-                                       //]]>
-                                       </script>
                     </td>
              </tr>
         <tr>
-            <td>Patron Category</td>
+            <td>Patron category</td>
             <td><input type="radio" name="Line" value="borrowers.categorycode" /></td>
             <td><input type="radio" name="Column" value="borrowers.categorycode" /></td>
            <td><select name="filter_categorycode" id="borcat">
                <option value=""> </option>
                [% FOREACH categoryloo IN categoryloop %]
-                 [% IF ( categoryloo.selected ) %]<option value="[% categoryloo.categorycode %]" selected="selected">[% categoryloo.description %]</option>[% ELSE %]<option value="[% categoryloo.categorycode %]">[% categoryloo.description %]</option>[% END %]
+                 <option value="[% categoryloo.categorycode %]">[% categoryloo.description %]</option>
                [% END %]
                </select>
              </td> 
         </tr>
-        <tr class="highlight">
-            <td>Item Type</td>
+        <tr>
+            <td>Item type</td>
             <td><input type="radio" name="Line" value="items.itype" /></td>
             <td><input type="radio" name="Column" value="items.itype" /></td>
            <td><select name="filter_items.itype" id="itype">
                <option value=""> </option>
-               [% FOREACH itypeloo IN itemtypeloop %]
-                 [% IF ( itypeloo.selected ) %]<option value="[% itypeloo.code %]" selected="selected">[% itypeloo.description %]</option>[% ELSE %]<option value="[% itypeloo.code %]">[% itypeloo.description %]</option>[% END %]
+               [% FOREACH itemtype IN itemtypes %]
+                 <option value="[% itemtype.itemtype %]">[% itemtype.translated_description %]</option>
                [% END %]
                </select>
              </td> 
         </tr>
         <tr>
-            <td>Pickup Library</td>
+            <td>Pickup library</td>
             <td><input type="radio" name="Line" value="reserves.branchcode" checked="checked" /></td>
             <td><input type="radio" name="Column" value="reserves.branchcode" /></td>
             <td><select name="filter_reserves.branchcode" id="resbranchcode">
                <option value=""> </option>
-               [% FOREACH branchloo IN branchloop %]
-[% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
-                               [% END %]
+                [% PROCESS options_for_libraries libraries => Branches.all() %]
                </select>
              </td> 
         </tr>
-        <tr class="highlight">
-            <td>Holding Library</td>
+        <tr>
+            <td>Holding library</td>
             <td><input type="radio" name="Line" value="items.holdingbranch" /></td>
             <td><input type="radio" name="Column" value="items.holdingbranch" /></td>
             <td><select name="filter_items.holdingbranch" id="holdingbranch">
                <option value=""> </option>
-               [% FOREACH branchloo IN branchloop %]
-[% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
-                               [% END %]
+                [% PROCESS options_for_libraries libraries => Branches.all() %]
                </select>
              </td> 
         </tr>
         <tr>
-            <td>Home Library</td>
+            <td>Home library</td>
             <td><input type="radio" name="Line" value="items.homebranch" /></td>
             <td><input type="radio" name="Column" value="items.homebranch" /></td>
             <td><select name="filter_items.homebranch" id="homebranch">
-               <option value=""> </option>
-               [% FOREACH branchloo IN branchloop %]
-[% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
-                               [% END %]
+                <option value=""> </option>
+                [% PROCESS options_for_libraries libraries => Branches.all() %]
                </select>
              </td> 
         </tr>
-        <tr class="highlight">
+        <tr>
             <td>Collection</td>
             <td><input type="radio" name="Line"   value="items.ccode" /></td>
             <td><input type="radio" name="Column" value="items.ccode" /></td>
             </td>
         </tr>
         <tr>
-            <td>Shelving Location</td>
+            <td>Shelving location</td>
             <td><input type="radio" name="Line" value="items.location" /></td>
             <td><input type="radio" name="Column" value="items.location" /></td>
             <td><select name="filter_items.location" id="location">
                </select>
             </td> 
         </tr>
-        <tr class="highlight">
-            <td>Item Call Number</td>
+        <tr>
+            <td>Item call number</td>
             <td></td>
             <td></td>
             <td>From <input type="text" name="filter_items.itemcallnumber_begin" size="10" /> (inclusive) to <input type="text" name="filter_items.itemcallnumber_endex" size="10" /> (exclusive) </td>
         </tr>
         [% IF ( hassort1 ) %]
-        <tr><td>Patron sort1</td>
+        <tr><td>Patron sort 1</td>
                        <td><input type="radio" name="Line" value="borrowers.sort1" /></td>
                        <td><input type="radio" name="Column" value="borrowers.sort1" /></td>
                        <td><select name="filter_borrowers.sort1" id="sort1">
         </tr>
         [% END %]
         [% IF ( hassort2 ) %]
-        <tr class="highlight"><td>Patron sort2</td>
+        <tr><td>Patron sort 2</td>
             <td><input type="radio" name="Line" value="borrowers.sort2" /></td>
             <td><input type="radio" name="Column" value="borrowers.sort2" /></td>
                <td><select name="filter_borrowers.sort2" id="sort2">
         </tbody>
     </table><br /></fieldset>
 
-<fieldset class="rows"><legend>Cell value </legend><ol><li><label for="cellvalue1">Count holds</label> <input type="radio" name="Cellvalue" value="1" id="cellvalue1" checked="checked" /> </li>
-            <li><label for="cellvalue2">Count unique borrowers</label> <input type="radio" name="Cellvalue" value="2" id="cellvalue2" /> </li><li><label for="cellvalue3">Count unique items</label> <input type="radio" name="Cellvalue" id="cellvalue3" value="3" /> </li><li><label for="cellvalue4">Count unique biblios</label> <input type="radio" name="Cellvalue" id="cellvalue4" value="4" /> </li></ol></fieldset>
+<fieldset class="rows"><legend>Cell value </legend><ol><li><label for="cellvalue1">Count holds:</label> <input type="radio" name="Cellvalue" value="1" id="cellvalue1" checked="checked" /> </li>
+            <li><label for="cellvalue2">Count unique borrowers:</label> <input type="radio" name="Cellvalue" value="2" id="cellvalue2" /> </li><li><label for="cellvalue3">Count unique items:</label> <input type="radio" name="Cellvalue" id="cellvalue3" value="3" /> </li><li><label for="cellvalue4">Count unique biblios:</label> <input type="radio" name="Cellvalue" id="cellvalue4" value="4" /> </li></ol></fieldset>
                        
        <fieldset class="rows">
        <legend>Output</legend>
-<ol><li><label for="outputscreen">To screen into the browser: </label><input type="radio" checked="checked" name="output" id="outputscreen" value="screen" /> </li>
-<li><label for="outputfile">To a file:</label> <input type="radio" name="output" value="file" id="outputfile" /> <label class="inline" for="basename">Named: </label><input type="text" name="basename" id="basename" value="Export" /> <label class="inline" for="MIME">Into an application  
-               </label>[% CGIextChoice %]
-               [% CGIsepChoice %]</li></ol>
+    <ol>
+        <li>
+            <label for="outputscreen">To screen into the browser: </label><input type="radio" checked="checked" name="output" id="outputscreen" value="screen" />
+        </li>
+        <li>
+            <label for="outputfile">To a file:</label> <input type="radio" name="output" value="file" id="outputfile" />
+            <label class="inline" for="basename">Named: </label><input type="text" name="basename" id="basename" value="Export" />
+            <label class="inline" for="MIME">Into an application:</label>
+            <select name="MIME" id="MIME" size="1">
+            [% FOREACH value IN CGIextChoice %]
+                <option value="[% value %]">[% value %]</option>
+            [% END %]
+            </select>
+            <select name="sep" id="sep" size="1">
+            [% FOREACH value IN CGIsepChoice.values.sort() %]
+              [% IF ( value == CGIsepChoice.default ) %]
+                <option value="[% value %]" selected="selected">[% value %]</option>
+              [% ELSE %]
+                <option value="[% value %]">[% value %]</option>
+              [% END %]
+            [% END %]
+            </select>
+        </li>
+    </ol>
        </fieldset>
 
        <fieldset class="action">