Better "Followed" page

"Followed" page is now sorted by notation for each postal code. Notes
left about the flats are listed in the list, to help have a good
overview of the followed flats.

This closes issue #45.

flatisfy/web/js_src/components/flatstable.vue

@@ -2,6 +2,13 @@
     <table>
         <thead>
             <tr>
+                <th v-if="showNotationColumn" class="pointer" v-on:click="updateSortBy('notation')">
+                    {{ $t("flatsDetails.Notation") }}
+                    <span v-if="sortBy === 'notation'">
+                        <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
+                    </span>
+                </th>
                 <th class="pointer" v-on:click="updateSortBy('title')">
                     {{ $t("flatsDetails.Title") }}
                     <span v-if="sortBy === 'title'">
@@ -35,10 +42,15 @@
         </thead>
         <tbody>
             <tr v-for="flat in sortedFlats" :key="flat.id" v-on:click="showMore(flat.id)" class="pointer">
-                <td>
+                <td v-if="showNotationColumn">
                     <template v-for="n in range(flat.notation)">
                         <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
                     </template>
+                </td>
+                <td>
+                    <template v-if="!showNotationColumn" v-for="n in range(flat.notation)">
+                        <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
+                    </template>
 
                     [{{ flat.id.split("@")[1] }}] {{ flat.title }}
 
@@ -46,6 +58,11 @@
                         <br/>
                         <img :src="flat.photos[0].url"/>
                     </template>
+
+                    <template v-if="showNotes">
+                        <br/>
+                        <pre>{{ flat.notes }}</pre>
+                    </template>
                 </td>
                 <td>{{ flat.area }} m²</td>
                 <td>
@@ -87,12 +104,39 @@ import { capitalize, range } from '../tools'
 export default {
     data () {
         return {
-            sortBy: 'cost',
+            sortBy: this.initialSortBy,
-            sortOrder: 'up'
+            sortOrder: this.initialSortOrder
         }
     },
 
-    props: ['flats'],
+    props: {
+        flats: Array,
+        showNotationColumn: {
+            type: Boolean,
+            default: false
+        },
+        showNotes: {
+            type: Boolean,
+            default: false
+        },
+        initialSortBy: {
+            type: String,
+            default: 'cost'
+        },
+        initialSortOrder: {
+            type: String,
+            default: 'up'
+        }
+    },
+
+    watch: {
+        initialSortBy () {
+            this.sortBy = this.initialSortBy
+        },
+        initialSortOrder () {
+            this.sortOrder = this.initialSortOrder
+        }
+    },
 
     computed: {
         sortedFlats () {
@@ -163,4 +207,9 @@ button {
     height:1px;
     overflow:hidden;
 }
+
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
 </style>

flatisfy/web/js_src/i18n/en/index.js

@@ -29,6 +29,7 @@ export default {
         'search': 'Search'
     },
     flatsDetails: {
+        'Notation': 'Note',
         'Title': 'Title',
         'Area': 'Area',
         'Rooms': 'Rooms',

flatisfy/web/js_src/views/details.vue

@@ -202,7 +202,7 @@ export default {
         // Fetch data again when the component is updated
         '$route': 'fetchData',
         title () {
-            document.title = this.title;
+            document.title = this.title
         }
     },
 
@@ -214,7 +214,7 @@ export default {
 
     computed: {
         title () {
-            return "Flatisfy - " + this.$route.params.id
+            return 'Flatisfy - ' + this.$route.params.id
         },
         flatMarkers () {
             return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.$route.params.id)

flatisfy/web/js_src/views/home.vue

@@ -31,7 +31,7 @@ export default {
     },
 
     created () {
-        document.title = "Flatisfy"  // Set title
+        document.title = 'Flatisfy'  // Set title
 
         // Fetch flats when the component is created
         this.$store.dispatch('getAllFlats')

flatisfy/web/js_src/views/search.vue

@@ -33,7 +33,7 @@ export default {
     },
 
     created () {
-        document.title = "Flatisfy - " + this.$t('menu.search')  // Set title
+        document.title = 'Flatisfy - ' + this.$t('menu.search')  // Set title
 
         this.doSearch()
     },

flatisfy/web/js_src/views/status.vue

@@ -16,7 +16,13 @@
         <template v-if="Object.keys(postalCodesFlatsBuckets).length">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
                 <h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
-                <FlatsTable :flats="postal_code_data.flats"></FlatsTable>
+                <FlatsTable
+                    :flats="postal_code_data.flats"
+                    :showNotationColumn="$route.params.status === 'followed'"
+                    :showNotes="$route.params.status === 'followed'"
+                    :initialSortBy="$route.params.status === 'followed' ? 'notation' : undefined"
+                    :initialSortOrder="$route.params.status === 'followed' ? 'down' : undefined"
+                ></FlatsTable>
             </template>
         </template>
         <template v-else>
@@ -58,7 +64,7 @@ export default {
     watch: {
         title () {
             // only used when the title changes after page load
-            document.title = this.title;
+            document.title = this.title
         }
     },
 
@@ -75,7 +81,7 @@ export default {
             return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status)
         },
         title () {
-            return "Flatisfy - " + capitalize(this.$t("status." + this.$route.params.status))
+            return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
         }
     },
 
@@ -120,6 +126,7 @@ export default {
     font-weight: 700;
     color: #333;
     font-family: "Helvetica", "Arial", sans-serif;
+    cursor: pointer;
 }
 
 .hidden {