Browse Source

Create Notation component

Gautier P 10 months ago
parent
commit
e4aef0bfaf

+ 6
- 56
flatisfy/web/js_src/components/flat.vue View File

@@ -152,13 +152,7 @@
152 152
             <nav>
153 153
                 <ul>
154 154
                     <template v-if="flat.status !== 'user_deleted'">
155
-                        <li ref="notationButton">
156
-                            <template v-for="n in range(5)">
157
-                                <button class="btnIcon" v-bind:key="n" v-on:mouseover="handleNotationHover(n)" v-on:mouseout="handleNotationOut()" v-on:click="updateFlatNotation(n)">
158
-                                    <i class="fa" v-bind:class="{'fa-star': n < notation, 'fa-star-o': n >= notation}" aria-hidden="true"></i>
159
-                                </button>
160
-                            </template>
161
-                        </li>
155
+                        <Notation :flat="flat"></Notation>
162 156
                         <li>
163 157
                             <button v-on:click="updateFlatStatus('user_deleted')" class="fullButton">
164 158
                                 <i class="fa fa-trash" aria-hidden="true"></i>
@@ -189,30 +183,16 @@ import 'flatpickr/dist/flatpickr.css'
189 183
 
190 184
 import FlatsMap from '../components/flatsmap.vue'
191 185
 import Slider from '../components/slider.vue'
186
+import Notation from '../components/notation.vue'
192 187
 
193
-import { capitalize, range } from '../tools'
188
+import { capitalize } from '../tools'
194 189
 
195 190
 export default {
196 191
     components: {
197 192
         FlatsMap,
198 193
         Slider,
199
-        flatPickr
200
-    },
201
-    filters: {
202
-        cost: function (value, currency) {
203
-            if (!value) {
204
-                return 'N/A'
205
-            }
206
-
207
-            if (currency === 'EUR') {
208
-                currency = ' €'
209
-            }
210
-
211
-            var valueStr = value.toString()
212
-            valueStr = ' '.repeat((3 + valueStr.length) % 3) + valueStr
213
-
214
-            return valueStr.match(/.{1,3}/g).join('.') + currency
215
-        }
194
+        flatPickr,
195
+        Notation
216 196
     },
217 197
 
218 198
     created () {
@@ -294,20 +274,6 @@ export default {
294 274
             this.$store.dispatch('getAllTimeToPlaces')
295 275
         },
296 276
 
297
-        updateFlatNotation (notation) {
298
-            notation = notation + 1
299
-
300
-            if (notation === this.flat.notation) {
301
-                this.flat.notation = 0
302
-                this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: 0 })
303
-                this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'new' })
304
-            } else {
305
-                this.flat.notation = notation
306
-                this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: notation })
307
-                this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'followed' })
308
-            }
309
-        },
310
-
311 277
         updateFlatStatus (status) {
312 278
             this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: status })
313 279
         },
@@ -335,23 +301,13 @@ export default {
335 301
             return minutes + ' ' + this.$tc('common.mins', minutes)
336 302
         },
337 303
 
338
-        handleNotationHover (n) {
339
-            this.overloadNotation = n + 1
340
-        },
341
-
342
-        handleNotationOut () {
343
-            this.overloadNotation = null
344
-        },
345
-
346 304
         normalizePhoneNumber (phoneNumber) {
347 305
             phoneNumber = phoneNumber.replace(/ /g, '')
348 306
             phoneNumber = phoneNumber.replace(/\./g, '')
349 307
             return phoneNumber
350 308
         },
351 309
 
352
-        capitalize: capitalize,
353
-
354
-        range: range
310
+        capitalize: capitalize
355 311
     }
356 312
 }
357 313
 </script>
@@ -426,12 +382,6 @@ td {
426 382
     list-style-type: none;
427 383
 }
428 384
 
429
-.btnIcon {
430
-    border: none;
431
-    width: auto;
432
-    background-color: transparent;
433
-}
434
-
435 385
 @media screen and (max-width: 767px) {
436 386
     .right-panel nav {
437 387
         text-align: center;

+ 9
- 12
flatisfy/web/js_src/components/flatstableline.vue View File

@@ -1,16 +1,11 @@
1 1
 <template>
2 2
     <tr>
3 3
         <td v-if="showNotationColumn">
4
-            <template v-for="n in notationRange">
5
-                <i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
6
-            </template>
4
+            <Notation :flat="flat" :title="capitalizedStatus"></Notation>
7 5
         </td>
8 6
         <td class="no-padding">
7
+            <Notation v-if="!showNotationColumn" :flat="flat" :title="capitalizedStatus"></Notation>
9 8
             <router-link class="fill" :to="{name: 'details', params: {id: flat.id}}">
10
-                <template v-if="!showNotationColumn" v-for="n in notationRange">
11
-                    <i class="fa fa-star" aria-hidden="true" :title="capitalizedStatus"></i>
12
-                </template>
13
-
14 9
                 [{{ flat.id.split("@")[1] }}]
15 10
                 <span class="expired">{{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}</span>
16 11
                 {{ flat.title }}
@@ -31,7 +26,7 @@
31 26
             {{ flat.rooms ? flat.rooms : '?'}}
32 27
         </td>
33 28
         <td>
34
-            {{ flat.cost }} {{ flat.currency }}
29
+            {{ flat.cost | cost(flat.currency) }}
35 30
             <template v-if="flat.utilities == 'included'">
36 31
                 {{ $t("flatsDetails.utilities_included") }}
37 32
             </template>
@@ -60,7 +55,8 @@
60 55
 </template>
61 56
 
62 57
 <script>
63
-import { capitalize, range } from '../tools'
58
+import { capitalize } from '../tools'
59
+import Notation from '../components/notation.vue'
64 60
 
65 61
 export default {
66 62
     props: {
@@ -69,6 +65,10 @@ export default {
69 65
         showNotes: Boolean
70 66
     },
71 67
 
68
+    components: {
69
+        Notation
70
+    },
71
+
72 72
     computed: {
73 73
         capitalizedStatus () {
74 74
             return capitalize(this.$t('status.followed'))
@@ -81,9 +81,6 @@ export default {
81 81
                 return this.flat.photos[0].url
82 82
             }
83 83
             return null
84
-        },
85
-        notationRange () {
86
-            return range(this.flat.notation)
87 84
         }
88 85
     },
89 86
 

+ 68
- 0
flatisfy/web/js_src/components/notation.vue View File

@@ -0,0 +1,68 @@
1
+<template>
2
+    <div>
3
+        <template v-for="n in range(5)">
4
+            <button v-bind:key="n" v-on:mouseover="handleHover(n)" v-on:mouseout="handleOut()" v-on:click="updateNotation(n)">
5
+                <i class="fa" v-bind:class="{'fa-star': n < notation, 'fa-star-o': n >= notation}" aria-hidden="true"></i>
6
+            </button>
7
+        </template>
8
+    </div>
9
+</template>
10
+
11
+<script>
12
+
13
+import { range } from '../tools'
14
+import 'flatpickr/dist/flatpickr.css'
15
+
16
+export default {
17
+    data () {
18
+        return {
19
+            'overloadNotation': null
20
+        }
21
+    },
22
+
23
+    props: ['flat'],
24
+
25
+    computed: {
26
+        notation () {
27
+            if (this.overloadNotation) {
28
+                return this.overloadNotation
29
+            }
30
+            return this.flat.notation
31
+        }
32
+    },
33
+
34
+    methods: {
35
+        updateNotation (notation) {
36
+            notation = notation + 1
37
+
38
+            if (notation === this.flat.notation) {
39
+                this.flat.notation = 0
40
+                this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: 0 })
41
+                this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'new' })
42
+            } else {
43
+                this.flat.notation = notation
44
+                this.$store.dispatch('updateFlatNotation', { flatId: this.flat.id, newNotation: notation })
45
+                this.$store.dispatch('updateFlatStatus', { flatId: this.flat.id, newStatus: 'followed' })
46
+            }
47
+        },
48
+
49
+        handleHover (n) {
50
+            this.overloadNotation = n + 1
51
+        },
52
+
53
+        handleOut () {
54
+            this.overloadNotation = null
55
+        },
56
+
57
+        range: range
58
+    }
59
+}
60
+</script>
61
+
62
+<style scoped>
63
+button {
64
+    border: none;
65
+    width: auto;
66
+    background-color: transparent;
67
+}
68
+</style>

+ 3
- 0
flatisfy/web/js_src/main.js View File

@@ -3,9 +3,12 @@ import Vue from 'vue'
3 3
 import i18n from './i18n'
4 4
 import router from './router'
5 5
 import store from './store'
6
+import { costFilter } from './tools'
6 7
 
7 8
 import App from './components/app.vue'
8 9
 
10
+Vue.filter('cost', costFilter)
11
+
9 12
 new Vue({
10 13
     i18n,
11 14
     router,

+ 4
- 2
flatisfy/web/js_src/store/getters.js View File

@@ -1,4 +1,4 @@
1
-import { findFlatGPS } from '../tools'
1
+import { findFlatGPS, costFilter } from '../tools'
2 2
 
3 3
 export default {
4 4
     allFlats: state => state.flats,
@@ -42,7 +42,9 @@ export default {
42 42
                       // gps[1] += (Math.random() - 0.5) / 500
43 43
                     }
44 44
                     const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
45
-                    const cost = flat.cost ? ' ( ' + flat.cost + '€)' : ''
45
+                    const cost = flat.cost
46
+                        ? costFilter(flat.cost, flat.currency)
47
+                        : ''
46 48
                     markers.push({
47 49
                         'title': '',
48 50
                         'content': '<a href="' + href + '">' + flat.title + '</a>' + cost,

+ 15
- 0
flatisfy/web/js_src/tools/index.js View File

@@ -25,3 +25,18 @@ export function capitalize (string) {
25 25
 export function range (n) {
26 26
     return [...Array(n).keys()]
27 27
 }
28
+
29
+export function costFilter (value, currency) {
30
+    if (!value) {
31
+        return 'N/A'
32
+    }
33
+
34
+    if (currency === 'EUR') {
35
+        currency = ' €'
36
+    }
37
+
38
+    var valueStr = value.toString()
39
+    valueStr = ' '.repeat((3 + valueStr.length) % 3) + valueStr
40
+
41
+    return valueStr.match(/.{1,3}/g).join('.') + currency
42
+}