visual changes when option 'create household' is checked in user create form

This commit is contained in:
Julie Lenaerts 2022-06-13 15:35:35 +02:00
parent ceb0f741ef
commit f0187536c1

View File

@ -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>