Do something with the is_expired column in the view

flatisfy/web/js_src/components/flatstableline.vue

@@ -11,7 +11,7 @@
                     <i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
                 </template>
 
-                [{{ flat.id.split("@")[1] }}] {{ flat.title }}
+                [{{ flat.id.split("@")[1] }}] {{ flat.is_expired ? "[EXPIRED]" : null }} {{ flat.title }}
 
                 <template v-if="photo">
                     <br/>

flatisfy/web/js_src/views/details.vue

@@ -11,6 +11,7 @@
                             -->{{ flat.status ? capitalize($t("status." + flat.status)) : '' }}<!--
                         --></router-link><!--
                     -->) {{ flat.title }} [{{ flat.id.split("@")[1] }}]
+                    {{ flat.is_expired ? '[EXPIRED]' : '' }}
                 </h2>
                 <div class="grid">
                     <div class="left-panel">

flatisfy/web/js_src/views/home.vue

@@ -2,7 +2,13 @@
     <div>
         <FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
 
-        <h2>{{ $t("home.new_available_flats") }}</h2>
+        <h2>
+          {{ $t("home.new_available_flats") }}
+          <label class="show-expired-flats-label">
+            <input type="checkbox" class="show-expired-flats-checkbox" v-model="showExpiredFlats" />
+            Show expired flats
+          </label>
+        </h2>
 
         <template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
@@ -12,7 +18,7 @@
                     </span>
                     - {{ 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" :key="postal_code"></FlatsTable>
             </template>
         </template>
         <template v-else-if="isLoading">
@@ -43,12 +49,24 @@ export default {
         this.$store.dispatch('getAllTimeToPlaces')
     },
 
+    data () {
+        return {
+            showExpiredFlats: false,
+        };
+    },
+
     computed: {
         postalCodesFlatsBuckets () {
-            return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === 'new')
+            return this.$store.getters.postalCodesFlatsBuckets(flat =>
+                flat.status === 'new' &&
+                (this.showExpiredFlats || !flat.is_expired)
+            )
         },
         flatsMarkers () {
-            return this.$store.getters.flatsMarkers(this.$router, flat => flat.status === 'new')
+            return this.$store.getters.flatsMarkers(this.$router, flat =>
+                flat.status === 'new' &&
+                (this.showExpiredFlats || !flat.is_expired)
+            )
         },
         timeToPlaces () {
             return this.$store.getters.allTimeToPlaces
@@ -59,3 +77,15 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+h2 {
+    display: flex;
+    justify-content: space-between;
+}
+
+.show-expired-flats-label {
+    font-weight: initial;
+    font-size: initial;
+}
+</style>