Add round descriptions feature

client/src/assets/css/form.css

@@ -1,25 +1,26 @@
-.v-form {
-    padding-bottom: 60px;
-}
-
-.v-form h1 {
-    font-weight: normal;
-    margin: 20px;
-}
-
-.v-form h2 {
-    font-weight: normal;
-    margin: 10px 20px;
-}
-
-.v-form .v-text-field {
-    margin: 5px 20px;
-}
-
-.v-form .v-list {
-    padding: 0;
-}
-
-.v-list .v-text-field {
-    padding-top: 0;
-}
+:not(.v-card) > .v-form {
+    padding-bottom: 60px;
+}
+
+:not(.v-card) > .v-form h1 {
+    font-weight: normal;
+    margin: 20px;
+}
+
+:not(.v-card) > .v-form h2 {
+    font-weight: normal;
+    margin: 10px 20px;
+}
+
+:not(.v-card) > .v-form .v-text-field {
+    margin: 5px 20px;
+}
+
+:not(.v-card) > .v-form .v-list {
+    border-top: 1px solid #f0f0f0;
+    border-radius: 0;
+}
+
+:not(.v-card) > .v-form .v-list .v-text-field {
+    padding-top: 0;
+}

client/src/components/Auth.vue

@@ -10,6 +10,9 @@
             <p class="wrong" v-if="wrong">{{ $t("auth.wrong") }}</p>
           </v-slide-y-transition>
           <v-text-field v-model="input"
+                        outlined
+                        rounded
+                        hide-details
                         ref="input"
                         autocomplete="off"
                         @change="wrong = false"
@@ -25,7 +28,7 @@
           <v-btn text @click="dialog = false">
             {{ $t("button.cancel") }}
           </v-btn>
-          <v-btn text :loading="loading" color="primary" :disabled="!valid" type="submit">
+          <v-btn depressed color="primary" :loading="loading" :disabled="!valid" type="submit">
             {{ $t("button.ok") }}
           </v-btn>
         </v-card-actions>
@@ -110,10 +113,6 @@ export default {
 </script>
 
 <style scoped>
-.v-form {
-  padding: 0;
-}
-
 .wrong {
   color: red;
 }

client/src/components/RoundSummary.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-list>
+    <v-list-item v-for="(amount, name) in round.consumers" :key="name">
+      <v-list-item-content>
+        <v-list-item-title>
+          {{ name }}
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action class="amount">
+        {{ amount }} &times; {{ (parseFloat(round.price) / 100).toFixed(2) }}
+      </v-list-item-action>
+    </v-list-item>
+
+    <v-divider></v-divider>
+
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="total">
+          {{ $t("rounds.dialog.total") }}
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action class="amount">
+        {{ drinksCount }}
+        &times; {{ (parseFloat(round.price) / 100).toFixed(2) }}
+        = {{ (parseFloat(totalPrice) / 100).toFixed(2) }}
+      </v-list-item-action>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+    name: "RoundSummary",
+    props: {
+        round: Object
+    },
+    computed: {
+        drinksCount() {
+            return Object.values(this.round.consumers).reduce((a, b) => a + b);
+        },
+        totalPrice() {
+            return this.drinksCount * this.round.price
+        }
+    }
+}
+</script>
+
+<style scoped>
+.total {
+  font-weight: bold;
+}
+
+.amount {
+  text-align: right;
+  font-weight: bold;
+}
+</style>

client/src/locales/en.json

@@ -65,13 +65,22 @@
     "title": "Round payed by {0}",
     "subtitle": "Consumers",
     "price": {
-      "label": "Price"
+      "label": "Price",
+      "total": "Total"
+    },
+    "dialog": {
+      "title": "Confirm payment?"
+    },
+    "description": {
+      "label": "Add a note..."
     }
   },
   "rounds": {
     "title": "Rounds history",
-    "filter": "Search...",
     "none": "No rounds found",
+    "filter": {
+      "label": "Search..."
+    },
     "dialog": {
       "title": "Round payed by {0}",
       "total": "Total"

client/src/locales/fr.json

@@ -65,13 +65,22 @@
     "title": "Tournée payée par {0}",
     "subtitle": "Consommateurs",
     "price": {
-      "label": "Prix"
+      "label": "Prix",
+      "total": "Total"
+    },
+    "dialog": {
+      "title": "Confirmer le paiement ?"
+    },
+    "description": {
+      "label": "Ajouter une note..."
     }
   },
   "rounds": {
     "title": "Historique des tournées",
-    "filter": "Rechercher...",
     "none": "Aucune tournée trouvée",
+    "filter": {
+      "label": "Rechercher..."
+    },
     "dialog": {
       "title": "Tournée payée par {0}",
       "total": "Total"

client/src/views/Edit.vue

@@ -181,6 +181,7 @@ export default {
   left: 0;
   width: 100%;
   background: #eee;
+  border-radius: 0;
 }
 
 .v-btn:hover {
@@ -194,4 +195,8 @@ export default {
 .new-pass {
   margin-left: 20px;
 }
+
+.v-list {
+  margin-top: 10px;
+}
 </style>