From f0187536c173da203cdef839e3242e52b125ecaf Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 13 Jun 2022 15:35:35 +0200
Subject: [PATCH] visual changes when option 'create household' is checked in
 user create form

---
 .../vuejs/Address/components/ShowPane.vue     | 81 +++++++++++++------
 1 file changed, 58 insertions(+), 23 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index 4be073991..4197079d4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -15,27 +15,46 @@
          <span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
       </div>
 
-      <div v-if="showMessageWhenNoAddress" class="mt-5">
-         <p class="chill-no-data-statement">
-            {{ $t('not_yet_address') }}
-         </p>
+      <div v-if="!flag.success && this.context.target.name !== 'household'" class="mt-5">
+         <div class="no-address-yet">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            <p class="chill-no-data-statement">
+               {{ $t('not_yet_address') }}
+            </p>
+
+            <action-buttons
+               :options="this.options"
+               :defaultz="this.defaultz"
+               class="add-address-btn">
+               <template v-slot:action>
+                  <button @click.prevent="$emit('openEditPane')"
+                     class="btn" :class="getClassButton"
+                     type="button" name="button" :title="$t(getTextButton)">
+                     <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+                  </button>
+               </template>
+            </action-buttons>
+         </div>
+      </div>
+
+      <div v-else-if="this.context.target.name === 'household'">
+         <action-buttons
+            :options="this.options"
+            :defaultz="this.defaultz"
+            class="add-address-btn">
+            <template v-slot:action>
+               <button @click.prevent="$emit('openEditPane')"
+                  class="btn" :class="getClassButton"
+                  type="button" name="button" :title="$t(getTextButton)">
+                  <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+               </button>
+            </template>
+         </action-buttons>
       </div>
 
       <address-render-box :address="address" :useDatePane="useDatePane"></address-render-box>
    </div>
 
-   <action-buttons
-      :options="this.options"
-      :defaultz="this.defaultz">
-      <template v-slot:action>
-         <button @click.prevent="$emit('openEditPane')"
-            class="btn" :class="getClassButton"
-            type="button" name="button" :title="$t(getTextButton)">
-            <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-         </button>
-      </template>
-   </action-buttons>
-
 </template>
 
 <script>
@@ -91,13 +110,29 @@ export default {
       forceRedirect() {
          return (!(this.context.backUrl === null || typeof this.context.backUrl === 'undefined'));
       },
-      showMessageWhenNoAddress() {
-          let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
-          if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
-              return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
-          }
-         return !this.context.edit && !this.address.id && this.options.stickyActions;
-      }
+      // showMessageWhenNoAddress() {
+      //     let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
+      //     if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
+      //         return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
+      //     }
+      //    return !this.context.edit && !this.address.id && this.options.stickyActions;
+      // }
    }
 };
 </script>
+
+<style lang="scss">
+
+.no-address-yet {
+   text-align: center;
+   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+   padding:1.5rem;
+   i {
+      font-size:2rem;
+      margin-bottom:2rem;
+   }
+   .add-address-btn {
+      display: block
+   }
+}
+</style>