Sort working

_assets/src/components/Listing.vue

@@ -8,14 +8,14 @@
       <div class="item header">
         <div></div>
         <div>
-          <p v-bind:class="{ active: req.sort === 'name' }" class="name"><span>Name</span>
-            <a v-if="req.sort === 'name' && req.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
-            <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
+          <p :class="{ active: nameSorted }" class="name" @click="sort('name')">
+            <span>Name</span>
+            <i class="material-icons">{{ nameIcon }}</i>
           </p>
 
-          <p v-bind:class="{ active: req.sort === 'size' }" class="size"><span>Size</span>
-            <a v-if="req.sort === 'size' && req.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
-            <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
+          <p :class="{ active: !nameSorted }" class="size" @click="sort('size')">
+            <span>Size</span>
+            <i class="material-icons">{{ sizeIcon }}</i>
           </p>
 
           <p class="modified">Last modified</p>
@@ -74,7 +74,29 @@ import api from '@/utils/api'
 export default {
   name: 'listing',
   components: { Item },
-  computed: mapState(['req']),
+  computed: {
+    ...mapState(['req']),
+    nameSorted () {
+      return (this.req.sort === 'name')
+    },
+    ascOrdered () {
+      return (this.req.order === 'asc')
+    },
+    nameIcon () {
+      if (this.nameSorted && !this.ascOrdered) {
+        return 'arrow_upward'
+      }
+
+      return 'arrow_downward'
+    },
+    sizeIcon () {
+      if (!this.nameSorted && this.ascOrdered) {
+        return 'arrow_downward'
+      }
+
+      return 'arrow_upward'
+    }
+  },
   mounted: function () {
     document.addEventListener('dragover', function (event) {
       event.preventDefault()
@@ -151,6 +173,23 @@ export default {
         })
 
       return false
+    },
+    sort (sort) {
+      let order = 'desc'
+
+      if (sort === 'name') {
+        if (this.nameIcon === 'arrow_upward') {
+          order = 'asc'
+        }
+      } else {
+        if (this.sizeIcon === 'arrow_upward') {
+          order = 'asc'
+        }
+      }
+
+      document.cookie = `sort=${sort}; max-age=31536000; path=${this.$store.state.baseURL}`
+      document.cookie = `order=${order}; max-age=31536000; path=${this.$store.state.baseURL}`
+      this.$store.commit('setReload', true)
     }
   }
 }

api.go

@@ -268,7 +268,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
 		if sortCookie, sortErr := r.Cookie("sort"); sortErr == nil {
 			sort = sortCookie.Value
 		}
-	case "name", "size", "type":
+	case "name", "size":
 		http.SetCookie(w, &http.Cookie{
 			Name:   "sort",
 			Value:  sort,

file.go

@@ -313,8 +313,6 @@ func (l listing) ApplySort() {
 			sort.Sort(sort.Reverse(byName(l)))
 		case "size":
 			sort.Sort(sort.Reverse(bySize(l)))
-		case "time":
-			sort.Sort(sort.Reverse(byTime(l)))
 		default:
 			// If not one of the above, do nothing
 			return
@@ -325,8 +323,6 @@ func (l listing) ApplySort() {
 			sort.Sort(byName(l))
 		case "size":
 			sort.Sort(bySize(l))
-		case "time":
-			sort.Sort(byTime(l))
 		default:
 			sort.Sort(byName(l))
 			return
@@ -337,7 +333,6 @@ func (l listing) ApplySort() {
 // Implement sorting for listing
 type byName listing
 type bySize listing
-type byTime listing
 
 // By Name
 func (l byName) Len() int {
@@ -382,17 +377,6 @@ func (l bySize) Less(i, j int) bool {
 	return iSize < jSize
 }
 
-// By Time
-func (l byTime) Len() int {
-	return len(l.Items)
-}
-func (l byTime) Swap(i, j int) {
-	l.Items[i], l.Items[j] = l.Items[j], l.Items[i]
-}
-func (l byTime) Less(i, j int) bool {
-	return l.Items[i].ModTime.Before(l.Items[j].ModTime)
-}
-
 var textExtensions = [...]string{
 	".md", ".markdown", ".mdown", ".mmark",
 	".asciidoc", ".adoc", ".ad",