Questionnaire author to sort free response on name and date/time in s…

…ummary view

amd/src/table_sort.js

@@ -0,0 +1,78 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * JavaScript library for questionnaire response table sorting.
+ *
+ * @module     mod_questionnaire/table_sort
+ * @copyright
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery'], function($) {
+
+    var t = {
+        /**
+         * Initialise the event listeners.
+         *
+         */
+        init: function() {
+            M.util.js_pending('mod_questionnaire_tablesort');
+            $(".qn-handcursor").on('click', t.sortcolumn);
+            M.util.js_complete('mod_questionnaire_tablesort');
+        },
+
+        /**
+         * Javascript for sorting s'Text Box' Response.
+         * @param {Event} e
+         */
+        sortcolumn: function(e) {
+            e.preventDefault();
+            var col = $(this).index();
+            var id = $(this).closest('table').attr('id');
+            var sortOrder = 1;
+            $(this).siblings().find('span[class^="icon-container-"]').hide();
+            $(this).siblings().removeClass('asc desc');
+            $(this).find('span[class^="icon-container-"]').removeAttr('style');
+            if ($(this).is('.asc')) {
+                $(this).removeClass('asc').addClass('desc');
+                sortOrder = -1;
+            } else {
+                $(this).addClass('asc').removeClass('desc');
+            }
+            var arrData = $(this).closest('table').find('tbody >tr:has(td.cell)').get();
+            arrData.sort(function (a, b) {
+                var val1 = $(a).children('td').eq(col).text();
+                var val2 = $(b).children('td').eq(col).text();
+                // Regex to check for date sorting.
+                var dateregx = /^\d{2}.*\d{4},/;
+                if (dateregx.test(val1) && dateregx.test(val2)) {
+                    val1 = new Date(val1);
+                    val2 = new Date(val2);
+                    return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
+                } else if ($.isNumeric(val1) && $.isNumeric(val2)) {
+                    return sortOrder == 1 ? val1 - val2 : val2 - val1;
+                } else {
+                    return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
+                }
+            });
+            /* Append the sorted rows to tbody*/
+            $.each(arrData, function (index, row) {
+                var tableid = $('#' + id + ' tbody');
+                tableid.append(row);
+            });
+        },
+    };
+    return t;
+});

classes/responsetype/text.php

@@ -116,7 +116,7 @@ public function get_results($rids=false, $anonymous=false) {
                     'WHERE question_id=' . $this->question->id . $rsql .
                     ' AND t.response_id = r.id' .
                     ' AND u.id = r.userid ' .
-                    'ORDER BY u.lastname, u.firstname, r.submitted';
+                    'ORDER BY r.submitted DESC';
         }
         return $DB->get_records_sql($sql, $params);
     }
@@ -204,10 +204,15 @@ public function get_results_tags($weights, $participants, $respondents, $showtot
                 }
                 // The 'evencolor' attribute is used by the PDF template.
                 $response->evencolor = $evencolor;
+                $response->date = userdate($row->submitted, get_string('strftimedatetime'));
                 $pagetags->responses[] = (object)['response' => $response];
                 $evencolor = !$evencolor;
             }
-
+            // Sort table only when row count is greater than one.
+            if (count($weights) > 1) {
+                $pagetags->sortresponse = true;
+            }
+            $pagetags->tableid = $this->question->id;
             if ($showtotals == 1) {
                 $pagetags->total = new \stdClass();
                 $pagetags->total->total = "$respondents/$participants";

styles.css

@@ -426,7 +426,23 @@ td.selected {
 #page-mod-questionnaire-report .generaltable.questionnairereport td {
     border: 1px solid silver;
 }
+#page-mod-questionnaire-report .generaltable[id]  th.qn-handcursor {
+    cursor: pointer;
+}
+
+#page-mod-questionnaire-report  th.c0 a span[class^='icon-container-'],
+#page-mod-questionnaire-report  th.c1 a span.icon-container-asc,
+#page-mod-questionnaire-report  th.asc a span.icon-container-desc,
+#page-mod-questionnaire-report  th.desc a span.icon-container-asc {
+    display: none;
+}
+
+#page-mod-questionnaire-report  th.asc a span.icon-container-asc,
+#page-mod-questionnaire-report  th.desc a span.icon-container-desc {
+    display: inline-block;
+}
 
+#page-mod-questionnaire-report .frtlst,
 .qn-container .smalltext {
     font-size: 0.75em;
 }

templates/reportpage.mustache

@@ -83,4 +83,11 @@
         {{#responses}}{{{.}}}{{/responses}}
         {{#bottomnavigationbar}}<div class="box respondentsnavbar">{{{.}}}</div>{{/bottomnavigationbar}}
     </div>
-</div>
+</div>
+{{#js}}
+    require(['jquery', 'mod_questionnaire/table_sort'], function($, TableSort) {
+        $(document).ready(function() {
+            TableSort.init();
+        });
+    });
+{{/js}}

templates/results_text.mustache

@@ -50,11 +50,51 @@
     }}
 <!-- Begin HTML generated from results_text template. -->
 {{#responses.0}}
-<table class="generaltable">
+<table class="generaltable"  {{#tableid}}id="{{tableid}}"{{/tableid}}>
     <thead>
     <tr>
-        <th class="header c0" style="text-align:left;" scope="col">{{#str}} respondent, mod_questionnaire {{/str}}</th>
-        <th class="header c1 lastcol" style="text-align:right;" scope="col">{{#str}} response, mod_questionnaire {{/str}}</th>
+        <th class="header c0 {{#tableid}}qn-handcursor{{/tableid}}" style="text-align:left;" scope="col" data-value="{{#str}} respondent, mod_questionnaire {{/str}}">
+                {{#sortresponse}}
+                    <a href="#"
+                       title="{{#str}} respondent, mod_questionnaire {{/str}}"
+                       role="link"
+                       aria-label="{{#str}} respondent, mod_questionnaire {{/str}}" onclick="return false;">
+                        {{#str}} respondent, mod_questionnaire {{/str}}
+                        <span class="icon-container-asc">
+                            {{#pix}} t/sort_asc, moodle, {{#str}} sortbyx {{/str}}{{/pix}}
+                        </span>
+                        <span class="icon-container-desc">
+                            {{#pix}} t/sort_desc, moodle, {{#str}} sortbyxreverse {{/str}}{{/pix}}
+                        </span>
+                    </a>
+                {{/sortresponse}}
+                {{^sortresponse}}
+                    {{#str}} respondent, mod_questionnaire {{/str}}
+                {{/sortresponse}}
+                {{#tableid}}
+                <div class="frtlst">{{#str}} firstname {{/str}}/{{#str}} lastname {{/str}}</div>
+                <th class="header c1 {{#tableid}}qn-handcursor{{/tableid}} desc" style="text-align:center;" scope="col" data-value="{{#str}} date {{/str}}">
+                    {{#sortresponse}}
+                        <a href="#"
+                           title="{{#str}} date {{/str}}"
+                           role="link"
+                           aria-label="{{#str}} date {{/str}}" onclick="return false;">
+                            {{#str}} date {{/str}}
+                            <span class="icon-container-asc">
+                                {{#pix}} t/sort_asc, moodle, {{#str}} sortbyx {{/str}}{{/pix}}
+                            </span>
+                            <span class="icon-container-desc">
+                                {{#pix}} t/sort_desc, moodle, {{#str}} sortbyxreverse {{/str}}{{/pix}}
+                            </span>
+                        </a>
+                    {{/sortresponse}}
+                    {{^sortresponse}}
+                        {{#str}} date {{/str}}
+                    {{/sortresponse}}
+                </th>
+            {{/tableid}}
+        </th>
+        <th class="header c2 lastcol" style="text-align:right;" scope="col">{{#str}} response, mod_questionnaire{{/str}}</th>
     </tr>
     </thead>
     <tbody>
@@ -63,21 +103,29 @@
     {{#response}}
     <tr class="">
         <td class="cell c0" style="text-align:left;">{{{response.respondent}}}</td>
-        <td class="cell c1 lastcol" style="text-align:right;">{{{response.text}}}</td>
+        {{#tableid}}
+            <td class="cell c1" style="text-align:center;">{{{response.date}}}</td>
+        {{/tableid}}
+        <td class="cell c2 lastcol" style="text-align:right;">{{{response.text}}}</td>
     </tr>
     {{/response}}
 {{/responses}}
+{{#responses.0}}
+</tbody>
+<tfoot>
+{{/responses.0}}
 {{#total}}
     <tr>
-        <td colspan="2"><div class="tabledivider"></div></td>
+        <td colspan={{#tableid}}"3"{{/tableid}}{{^tableid}}"2"{{/tableid}}><div class="tabledivider"></div></td>
     </tr>
     <tr class="lastrow">
-        <td class="cell c0" style="text-align:left;">{{#str}} totalresponses, mod_questionnaire{{/str}}</td>
+        <td class="cell c0" {{#tableid}} colspan="2"{{/tableid}} style="text-align:left;">
+            {{#str}} totalresponses, mod_questionnaire{{/str}}</td>
         <td class="cell c1 lastcol" style="text-align:right;">{{total}}</td>
     </tr>
 {{/total}}
 {{#responses.0}}
-    </tbody>
+</tfoot>
 </table>
 {{/responses.0}}
 {{^responses}}