Add sorting options to class and moderator directories in scheduler (#…

…3266)
learning-unlimited · Apr 30, 2021 · a45a660 · a45a660
1 parent 5d6fc4d
commit a45a660
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/esp/public/media/default_styles/scheduling.css b/esp/public/media/default_styles/scheduling.css
@@ -8,6 +8,10 @@ a {
     cursor: pointer;
 }
 
+table.sortable thead th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
+    content: " \25B4\25BE" 
+}
+
 .moderator-cell{
     height: 40px;
     min-width: 80%;
@@ -132,7 +136,11 @@ input.numeric {
     width: 40px;
 }
 
-#class-search, #mod-search {
+#class-search {
+    margin-bottom: 10px
+}
+
+#mod-search, #class-sort {
     margin-bottom: 20px;
 }
 

diff --git a/esp/public/media/scripts/ajaxschedulingmodule/ESP/Moderators.js b/esp/public/media/scripts/ajaxschedulingmodule/ESP/Moderators.js
@@ -131,14 +131,15 @@ function ModeratorDirectory(el, moderators) {
         }.bind(this), 0);
 
         // Create the directory table
-        var table = $j("<table/>").css("width", "100%");
+        var table = $j("<table/>").css("width", "100%").addClass("sortable");
         table.append($j("<tr/>").append("<th>" + moderator_title + "</th>").append("<th>Available</br>Slots</th>").append("<th>Remaining</br>Slots</th>"));
         $j.each(this.filtered_moderators(), function(id, moderator){
             var row = new ModeratorRow(moderator, $j("<tr/>"), this);
             row.render();
             row.el.appendTo(table);
         }.bind(this))
         table.appendTo(this.el);
+        sorttable.makeSortable(table[0]);
     };
 
     /**

diff --git a/esp/public/media/scripts/ajaxschedulingmodule/ESP/Sections.js b/esp/public/media/scripts/ajaxschedulingmodule/ESP/Sections.js
@@ -113,6 +113,16 @@ function Sections(sections_data, section_details_data, categories_data, teacher_
         $j("body").trigger("schedule-changed");
     }.bind(this));
 
+    // Set up sort
+    this.sortObject = {field: "id", type: "asc"}
+    $j("#class-sort-field, [name='class-sort-type']").on("change", function(evt) {
+        if(evt.currentTarget.id === "class-sort-field") {
+            this.sortObject.field = evt.currentTarget.value;
+        } else {
+            this.sortObject.type = evt.currentTarget.value;
+        }
+        $j("body").trigger("schedule-changed");
+    }.bind(this));
 
     /**
      * Populate the sections data with teacher and section-detail info
@@ -213,7 +223,28 @@ function Sections(sections_data, section_details_data, categories_data, teacher_
                 returned_sections.push(section);
             }
         }.bind(this));
+        // sort sections based on selected field
+        switch(this.sortObject.field) {
+            case "id":
+                returned_sections.sort((a, b) => a.id - b.id);
+                break;
+            case "category":
+                returned_sections.sort((a, b) => a.category.localeCompare(b.category));
+                break;
+            case "length":
+                returned_sections.sort((a, b) => a.length - b.length);
+                break;
+            case "capacity":
+                returned_sections.sort((a, b) => a.class_size_max - b.class_size_max);
+                break;
+            case "availability":
+                returned_sections.sort((a, b) => this.getAvailableTimeslots(a)[0].length - this.getAvailableTimeslots(b)[0].length);
+                break;
+        }
+        // reverse if descending selected
+        if(this.sortObject.type === "des") returned_sections.reverse()
         return returned_sections;
+
     };
 
     /**

diff --git a/esp/templates/program/modules/ajaxschedulingmodule/ajax_scheduling.html b/esp/templates/program/modules/ajaxschedulingmodule/ajax_scheduling.html
@@ -46,6 +46,7 @@
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/Cell.js"></script>
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/Sections.js"></script>
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/Directory.js"></script>
+<script type="text/javascript" src="/media/scripts/sorttable.js"></script> <!-- For the moderator directory -->
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/Moderators.js"></script>
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/Matrix.js"></script>
 <script type="text/javascript" src="/media/scripts/ajaxschedulingmodule/ESP/MessagePanel.js"></script>
@@ -153,6 +154,23 @@ <h3>Class Filters</h3>
                             <input type="radio" name="class-search-type" value="emailcode">code</input>
                         </form>
                     </div>
+                    <div id="class-sort">
+                        <form>
+                            <label for="class-sort-field">Sort by:</label>
+                            <select id="class-sort-field">
+                                <option value="id" selected>ID</option>
+                                <option value="category">Category</option>
+                                <option value="availability">Teacher availability</option>
+                                <option value="capacity">Capacity</option>
+                                <option value="length">Length</option>
+                            </select>
+
+                            <label for="class-sort-type" class="ui-helper-hidden">Sort Type</label>
+                            <input type="radio" name="class-sort-type" value="asc"
+                                   checked="checked">asc</input>
+                            <input type="radio" name="class-sort-type" value="des">des</input>
+                        </form>
+                    </div>
                     <div id="directory"></div>
                 </div>
                 <div id="filters2">