Merge branch 'ameliorations_composants_vue' of gitlab.com:Chill-Projet/chill-bundles into ameliorations_composants_vue

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue

@@ -1,18 +1,39 @@
 <template>
-   <div class="chill-entity entity-address my-3">
-      <div class="address multiline">
-         <p v-if="address.text"
-            class="street">
-            {{ address.text }}
-         </p>
-         <p v-if="address.postcode"
-            class="postcode">
-            {{ address.postcode.code }} {{ address.postcode.name }}
-         </p>
-         <p v-if="address.country"
-            class="country">
-            {{ address.country.name.fr }}
-         </p>
+<div class="chill-entity entity-address my-3"></div>
+   
+   <component :is="component" :class="'address'+ isMultiline">
+      <p v-if="address.text"
+         class="street">
+         {{ address.text }},
+      </p>
+      <p v-if="address.postcode"
+         class="postcode">
+         {{ address.postcode.code }} {{ address.postcode.name }}
+      </p>
+      <p v-if="address.country"
+         class="country">
+         {{ address.country.name.fr }}
+      </p>
+
+      <div v-if="address.floor">
+         <span class="floor">
+            <b>{{ $t('floor') }}</b>: {{ address.floor }}
+         </span>
+      </div>
+      <div v-if="address.corridor">
+         <span class="corridor">
+            <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
+         </span>
+      </div>
+      <div v-if="address.steps">
+         <span class="steps">
+            <b>{{ $t('steps') }}</b>: {{ address.steps }}
+         </span>
+      </div>
+      <div v-if="address.flat">
+         <span class="flat">
+            <b>{{ $t('flat') }}</b>: {{ address.flat }}
+         </span>
       </div>
       <div>
          <div v-if="address.floor">
@@ -51,12 +72,38 @@
             </span>
          </div>
       </div>
-   </div>
+   </component>
+
 </template>
 
 <script>
 export default {
-   name: "ShowAddress",
-   props: ['address']
-}
+   name: 'ShowAddress',
+   props: {
+      address: {
+         type: Object
+      },
+      multiline: {
+         default: true,
+         type: Boolean
+      }
+   },
+   computed: {
+      component(){
+         return this.multiline == true ? "div" : "span";
+      },
+      isMultiline(){
+         return this.multiline == true ? " multiline" : "";
+      }
+   }
+};
 </script>
+
+<style lang="scss" scoped>
+p{
+   &:after{
+      content: " ";
+      margin-right: 0.3em;
+   }
+}
+</style>