From 3635e7c5597f42e7b725af79edc1141c8e765bb9 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Wed, 26 Apr 2017 19:07:22 +0200
Subject: [PATCH] FlatsTable columns should be sortable

Closes issue #4.
---
 flatisfy/web/js_src/components/flatstable.vue | 64 +++++++++++++++++--
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/flatisfy/web/js_src/components/flatstable.vue b/flatisfy/web/js_src/components/flatstable.vue
index 0512a6d..6eb03d1 100644
--- a/flatisfy/web/js_src/components/flatstable.vue
+++ b/flatisfy/web/js_src/components/flatstable.vue
@@ -2,10 +2,34 @@
     <table>
         <thead>
             <tr>
-                <th>{{ $t("flatsDetails.Title") }}</th>
-                <th>{{ $t("flatsDetails.Area") }}</th>
-                <th>{{ $t("flatsDetails.Rooms") }}</th>
-                <th>{{ $t("flatsDetails.Cost") }}</th>
+                <th class="pointer" v-on:click="updateSortBy('title')">
+                    {{ $t("flatsDetails.Title") }}
+                    <span v-if="sortBy === 'title'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only"></span>
+                    </span>
+                </th>
+                <th class="pointer" v-on:click="updateSortBy('area')">
+                    {{ $t("flatsDetails.Area") }}
+                    <span v-if="sortBy === 'area'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only"></span>
+                    </span>
+                </th>
+                <th class="pointer" v-on:click="updateSortBy('rooms')">
+                    {{ $t("flatsDetails.Rooms") }}
+                    <span v-if="sortBy === 'rooms'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only"></span>
+                    </span>
+                </th>
+                <th class="pointer" v-on:click="updateSortBy('cost')">
+                    {{ $t("flatsDetails.Cost") }}
+                    <span v-if="sortBy === 'cost'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only"></span>
+                    </span>
+                </th>
                 <th>{{ $t("common.Actions") }}</th>
             </tr>
         </thead>
@@ -55,17 +79,43 @@
 import "font-awesome-webpack"
 
 export default {
+    data () {
+        return {
+            sortBy: 'cost',
+            sortOrder: 'up'
+        }
+    },
+
     props: ['flats'],
 
     computed: {
         sortedFlats () {
-            return this.flats.sort((flat1, flat2) => flat1.cost - flat2.cost)
+            return this.flats.sort(
+                (flat1, flat2) => {
+                    if (this.sortOrder === "up") {
+                        return flat1[this.sortBy] > flat2[this.sortBy]
+                    } else {
+                        return flat1[this.sortBy] < flat2[this.sortBy]
+                    }
+                }
+            )
         }
     },
 
     methods: {
         updateFlatStatus (id, status) {
             this.$store.dispatch('updateFlatStatus', { flatId: id, newStatus: status })
+        },
+        updateSortBy (field) {
+            if (this.sortBy === field) {
+                if (this.sortOrder === "up") {
+                    this.sortOrder = "down"
+                } else {
+                    this.sortOrder = "up"
+                }
+            } else {
+                this.sortBy = field;
+            }
         }
     }
 }
@@ -89,4 +139,8 @@ button {
     font-size: 1em;
     cursor: pointer;
 }
+
+.pointer {
+    cursor: pointer;
+}
 </style>