1 files changed, 25 insertions, 1 deletions
diff --git a/javascript/app/components/file-tree.js b/javascript/app/components/file-tree.js
index c86a71d..d255229 100644
--- a/javascript/app/components/file-tree.js
+++ b/javascript/app/components/file-tree.js
@@ -35,23 +35,47 @@ const containsHaskellModule = function(node) {
   });
 }
 
+const fileExtension = function (filename) {  
+  const idx = filename.lastIndexOf('.');  
+  return (idx < 1) ? "" : filename.substr(idx + 1);  
+}
+
 export default Ember.Component.extend({
   query: null,
+  sortType: "alphabetical",
+  sortTypeObserver : Ember.observer('sortType',function() {
+    Ember.run.next(this,() => {
+      this.jstree.refresh();
+    });
+  }),
   didInsertElement : function () {
     this._super(...arguments);    
     const element = this.element.getElementsByClassName('file-tree')[0];
+    const component = this;
     
     const jstreeElement = Ember.$(element).jstree({
       'core' : {
         'data' : directoryTreeToJsTree(this.get('packageId'),this.get('directoryTree'))
       },
       "plugins" : [
-        "search"
+        "search",
+        "sort"
       ],
       "search": {
         "case_insensitive": true,
         "show_only_matches" : true,
         "show_only_matches_children": true
+      },
+      'sort' : function (a,b) {
+        const node1 = this.get_node(a).data;
+        const node2 = this.get_node(b).data;
+        if(component.get("sortType") === "alphabetical") {          
+          return node1.name > node2.name;
+        } else {          
+          const extendedName1 = (node1.tag === "Dir" ? "0" : "1") + fileExtension(node1.name) + node1.name;
+          const extendedName2 = (node2.tag === "Dir" ? "0" : "1") + fileExtension(node2.name) + node2.name;          
+          return extendedName1 > extendedName2;
+        }
       }
     });