Feat: Select poste on clicking

src/components/box.vue

@@ -1,13 +1,17 @@
 <template>
-  <b-card :bg-variant="poste.variant"
+  <b-card v-if="poste"
+          :bg-variant="poste.variant"
           text-variant="white"
           class="text-center">
-    <p class="card-text">
-      <font-awesome-icon :icon="poste.icon" />
-      {{ poste.name }}
-      </br>
-      {{ total() }}€
-    </p>
+    <div class="card-text">
+        <div class="icon">
+          <font-awesome-icon :icon="poste.icon" class="fa-3x"/>
+        </div>
+        <div class="amount">
+          <h3>{{ total() }}€</h3>
+          {{ poste.name }}
+        </div>
+    </div>
   </b-card>
 </template>
 
@@ -21,11 +25,6 @@ export default {
   ],
   data () {
     return {
-      empty_poste: {
-        variant: '',
-        icon: '',
-        name: ''
-      }
     }
   },
   computed: {
@@ -33,11 +32,7 @@ export default {
       'postes'
     ]),
     poste () {
-      if (this.postes) {
-        return this.postes[this.postename]
-      } else {
-        return this.empty_poste
-      }
+      return this.postes[this.postename]
     }
   },
   methods: {
@@ -75,4 +70,18 @@ export default {
 </script>
 
 <style scoped>
+.card-body {
+  padding: 10px;
+}
+.card-text {
+  display: flex;
+}
+.icon {
+  flex: 40%;
+}
+.amount {
+  flex: 50%;
+  text-align: right;
+  margin-left: 10px;
+}
 </style>