Merge pull request #263 from FranckKe/tp-multiple_tweak_and_fixes

[master] Fix tracer url i18n
FranckKe · Apr 20, 2019 · 5ca30f4 · 5ca30f4
2 parents c2eea9c + 12b02fc
commit 5ca30f4
Show file tree

Hide file tree

Showing 12 changed files with 806 additions and 468 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -109,7 +109,7 @@ $navbar-breakpoint: 1024px;
 @import '~buefy/src/scss/buefy';
 
 :root {
-  --header-height: 52px;
+  --header-height: 56px;
   --primary: #{$primary};
   @custom-media --only-small (width < 500px);
   @custom-media --only-medium (width >= 500px) and (width <= 839px);
@@ -120,17 +120,24 @@ $navbar-breakpoint: 1024px;
 
 html {
   overflow-y: auto;
+  height: 100vh;
+  width: 100%;
 }
 
 body {
   margin: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   padding-top: var(--header-height);
+  height: 100%;
+  width: 100%;
+
   & > .section {
     padding-top: var(--header-height);
   }

diff --git a/frontend/src/components/AddReport.vue b/frontend/src/components/AddReport.vue
@@ -104,7 +104,7 @@
                   </a>
                 </b-upload>
                 <span class="file-name" v-if="file">{{ file.name }}</span>
-                  <p>{{ $t('photo_multiple_tracer') }}</p>
+                <p>{{ $t('photo_multiple_tracer') }}</p>
               </b-field>
               <b-field
                 :label="$t('report_date')"
@@ -336,7 +336,13 @@
       "
       class="add-report-button button is-success"
       :class="{ hidden: isFormActive }"
-      >{{ $t('add_report') }}</a
+    >
+      <span class="icon is-small">
+        <font-awesome-icon icon="plus" />
+      </span>
+      <span class="add-report-button-text">
+        {{ $t('report_verb') }}
+      </span></a
     >
   </div>
 </template>
@@ -422,7 +428,7 @@ export default {
                 validatefile
               ])
               resolve(validation.every(v => v))
-              document.querySelector('.add-report').scrollTop = 0;
+              document.querySelector('.add-report').scrollTop = 0
             }
 
             if (step === 2) {
@@ -844,7 +850,8 @@ export default {
 <i18n>
 {
   "en": {
-    "add_report": "Add a report",
+    "report_verb": "Report",
+    "add_report": "Report a waste",
     "address": "Address",
     "cancel_report": "Close reporting",
     "click_select": "Click to select",
@@ -870,11 +877,12 @@ export default {
     "load_tracers_failure": "Fail to load tracers"
   },
   "fr": {
-    "add_report": "Ajouter un témoignage",
+    "report_verb": "Signaler",
+    "add_report": "Signaler un déchêt",
     "address": "Adresse",
-    "cancel_report": "Fermer l'ajout de témoignage",
+    "cancel_report": "Fermer l'ajout de signalement",
     "click_select": "Cliquez pour sélectionner",
-    "click_to_report": "Cliquer sur la carte pour localiser le témoignage",
+    "click_to_report": "Cliquer sur la carte pour localiser le signalement",
     "close": "Fermer",
     "description": "Description",
     "done": "Fin",
@@ -885,18 +893,19 @@ export default {
     "optional": "optionnel",
     "previous": "Précédent",
     "quantity": "Quantité",
-    "report_date": "Date de témoignage",
-    "report_review": "Merci pour votre témoignage. Un administrateur va bientôt le passer en revu.",
-    "report": "Témoignage",
+    "report_date": "Date de signalement",
+    "report_review": "Merci pour votre signalement. Un administrateur va bientôt le passer en revu.",
+    "report": "Signalement",
     "submit": "Soumettre",
     "tracers": "Traceur | Traceurs",
-    "submit_report_failure": "Échec d'ajout d'un témoignage",
+    "submit_report_failure": "Échec d'ajout d'un signalement",
     "photo": "Photo",
     "photo_multiple_tracer": "Une photo peut contenir plusieurs tracers",
     "load_tracers_failure": "Échec de chargement des tracers"
   },
   "es": {
-    "add_report": "Agrega un testimonio",
+    "report_verb": "Informe",
+    "add_report": "Reportar un desperdicio",
     "address": "Dirección",
     "cancel_report": "Cerrar agrega testimonio",
     "click_select": "Clic para seleccionar",

diff --git a/frontend/src/components/MenuNav.vue b/frontend/src/components/MenuNav.vue
@@ -178,9 +178,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .navbar {
   width: var(--header-height);
+  height: var(--header-height);
 }
 
 .navbar-menu {
@@ -228,6 +229,14 @@ export default {
   flex: 1;
 }
 
+.navbar-burger {
+  color: var(--primary);
+  width: var(--header-height);
+  height: var(--header-height);
+  span {
+    height: 2px;
+  }
+}
 @media (--below-large) {
   .navbar-menu.is-active {
     height: 100vh;

diff --git a/frontend/src/components/TracersGrid.vue b/frontend/src/components/TracersGrid.vue
@@ -30,6 +30,10 @@
                 {{ tracer.created_at | formatDate }}
               </time>
             </p>
+            <p>
+              <strong>{{ $t('reported_quantity') }}:</strong>
+              {{ getReportCount()(tracer.id) }}
+            </p>
           </div>
         </div>
       </article>
@@ -38,13 +42,19 @@
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
+const reportsModule = createNamespacedHelpers('reports')
+
 export default {
   name: 'tracers-grid',
   props: ['tracers'],
   data() {
     return {
       apiUrl: this.$apiUrl
     }
+  },
+  methods: {
+    ...reportsModule.mapGetters(['getReportCount'])
   }
 }
 </script>
@@ -67,16 +77,19 @@ export default {
   "en": {
     "created_at": "Created at",
     "origin": "Origin",
+    "reported_quantity": "Reported quantity",
     "type": "Type"
   },
   "fr": {
     "created_at": "Créé le",
     "origin": "Origine",
+    "reported_quantity": "Quantité signalée",
     "type": "Type"
   },
   "es": {
     "created_at": "Creado en",
     "origin": "Origen",
+    "reported_quantity": "Cantidad testificada",
     "type": "Tipo"
   }
 }

diff --git a/frontend/src/components/TracersList.vue b/frontend/src/components/TracersList.vue
@@ -18,6 +18,7 @@
       :opened-detailed="defaultOpenedDetails"
       default-sort="name"
       detailed
+      striped
       detail-key="id"
     >
       <template slot-scope="props">
@@ -34,13 +35,21 @@
           field="created_at"
           v-bind:label="$t('created_at')"
           sortable
-          >{{ props.row.created_at | formatDate }}</b-table-column
-        >
+          >{{ props.row.created_at | formatDate }}
+        </b-table-column>
+        <b-table-column
+          field="reported_quantity"
+          v-bind:label="$t('reported_quantity')"
+          sortable
+          width="100"
+          centered
+          >{{ getReportCount()(props.row.id) }}
+        </b-table-column>
       </template>
       <template slot="detail" slot-scope="props">
         <article class="media">
           <figure class="media-left">
-            <p class="image is-64x64">
+            <p class="image">
               <img :src="`${apiUrl}${props.row.photo}`" />
             </p>
           </figure>
@@ -70,6 +79,7 @@ import { createNamespacedHelpers } from 'vuex'
 const { mapState, mapGetters, mapMutations } = createNamespacedHelpers(
   'tracers'
 )
+const reportsModule = createNamespacedHelpers('reports')
 
 export default {
   name: 'tracers-list',
@@ -84,7 +94,8 @@ export default {
   },
   methods: {
     ...mapMutations(['setPerPage']),
-    ...mapGetters(['getPerPage'])
+    ...mapGetters(['getPerPage']),
+    ...reportsModule.mapGetters(['getReportCount'])
   },
   computed: {
     ...mapState({
@@ -107,6 +118,9 @@ export default {
 .tracer-description {
   max-width: 700px;
 }
+.detail .image {
+  width: 128px;
+}
 </style>
 
 <i18n>
@@ -117,6 +131,7 @@ export default {
     "nothing": "No data",
     "origin": "Origin",
     "per_page": "per page",
+    "reported_quantity": "Reported quantity",
     "type": "Type"
   },
   "fr": {
@@ -125,6 +140,7 @@ export default {
     "nothing": "Pas de données",
     "origin": "Origine",
     "per_page": "par page",
+    "reported_quantity": "Quantité signalée",
     "type": "Type"
   },
   "es": {
@@ -133,6 +149,7 @@ export default {
     "nothing": "Sin datos",
     "origin": "Origen",
     "per_page": "por página",
+    "reported_quantity": "Cantidad testificada",
     "type": "Tipo"
   }
 }

diff --git a/frontend/src/components/tools/FilterReportsByTracer.vue b/frontend/src/components/tools/FilterReportsByTracer.vue
@@ -75,7 +75,10 @@ export default {
     },
     filteredTracersList: function() {
       return this.tracers.filter(t => {
-        return t.name.toLowerCase().includes(this.search.toLowerCase())
+        return (
+          t.name.toLowerCase().includes(this.search.toLowerCase()) &&
+          this.getReportCount()(t.id) > 0
+        )
       })
     }
   },
@@ -93,36 +96,44 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .filter-report-search {
   margin: 0.5em 0;
 }
+
 .legend-tracers {
   margin-bottom: 1.5em;
 }
+
 .legend-tracer {
   width: 100%;
   display: flex;
   align-items: center;
   padding-left: 0.5em;
   flex-direction: column;
   min-height: 25px;
+
+  &:hover {
+    background-color: gainsboro;
+  }
+
+  label {
+    width: 100%;
+    display: flex;
+    height: 35px;
+    height: 100%;
+    padding: 5px 0;
+  }
+
+  .control-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    text-transform: capitalize;
+  }
 }
-.legend-tracer:hover {
-  background-color: gainsboro;
-}
-.legend-tracer label {
-  width: 100%;
-  display: flex;
-  height: 35px;
-}
-.legend-tracer .control-label {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  text-transform: capitalize;
-}
+
 .legend-circle {
   width: 20px;
   height: 20px;
@@ -131,6 +142,7 @@ export default {
   align-items: center;
   margin-right: 0.5em;
 }
+
 .check-buttons {
   display: flex;
   align-items: center;
@@ -145,6 +157,7 @@ export default {
 .check-buttons button:first-child {
   margin-right: 0.5em;
 }
+
 .close-filter-button {
   display: none;
 }

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -29,6 +29,7 @@ import {
   faMapMarkerAlt,
   faUser,
   faFilter,
+  faPlus,
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -142,6 +143,7 @@ library.add(
   faFilter,
   faSignOutAlt,
   faMapMarkerAlt,
+  faPlus,
   faUser
 )
 Vue.component('font-awesome-icon', FontAwesomeIcon)

diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -59,7 +59,7 @@ let routes = [
   {
     path: '/tracers',
     component: Tracers,
-    alias: '/trazadores'
+    alias: ['/traceurs', 'trazadores']
   },
   {
     path: '/users/send_reset_password',