mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 15:13:50 +00:00
Apply prettier rules
This commit is contained in:
@@ -1,199 +1,213 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!onlyButton"
|
||||
class="mt-4 flex-grow-1"
|
||||
>
|
||||
<div class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t('loading') }}</span>
|
||||
</div>
|
||||
<div v-if="!onlyButton" class="mt-4 flex-grow-1">
|
||||
<div class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t("loading") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="errorMsg && errorMsg.length > 0"
|
||||
class="alert alert-danger"
|
||||
>
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="flag.success"
|
||||
class="alert alert-success"
|
||||
>
|
||||
{{ $t(getSuccessText) }}
|
||||
<span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
|
||||
</div>
|
||||
<div v-if="flag.success" class="alert alert-success">
|
||||
{{ $t(getSuccessText) }}
|
||||
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')"
|
||||
class="mt-5"
|
||||
>
|
||||
<div class="no-address-yet">
|
||||
<i
|
||||
class="fa fa-map-marker"
|
||||
aria-hidden="true"
|
||||
<div
|
||||
v-if="
|
||||
!this.context.edit &&
|
||||
!this.flag.success &&
|
||||
this.context.target.name !== 'household'
|
||||
"
|
||||
class="mt-5"
|
||||
>
|
||||
<div class="no-address-yet">
|
||||
<i class="fa fa-map-marker" aria-hidden="true" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("not_yet_address") }}
|
||||
</p>
|
||||
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #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>
|
||||
|
||||
<address-render-box
|
||||
:address="address"
|
||||
:is-multiline="false"
|
||||
:use-date-pane="useDatePane"
|
||||
/>
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t('not_yet_address') }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="this.context.target.name === 'household' || this.context.edit"
|
||||
>
|
||||
<action-buttons :options="this.options" :defaultz="this.defaultz">
|
||||
<template #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-if="onlyButton">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #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>
|
||||
<template #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>
|
||||
|
||||
<address-render-box
|
||||
:address="address"
|
||||
:is-multiline="false"
|
||||
:use-date-pane="useDatePane"
|
||||
/>
|
||||
|
||||
<div v-if="this.context.target.name === 'household' || this.context.edit">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #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-if="onlyButton">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: 'ShowPane',
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'defaultz',
|
||||
'options',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'useDatePane'
|
||||
],
|
||||
emits: ['openEditPane'],
|
||||
mounted() {
|
||||
//console.log('context', this.context)
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
displayTextButton() {
|
||||
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
|
||||
this.options.button.displayText : this.defaultz.button.displayText;
|
||||
},
|
||||
getClassButton() {
|
||||
let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
|
||||
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
|
||||
`${this.options.button.size} ` : '';
|
||||
return `${size}${type}`;
|
||||
},
|
||||
getTextButton() {
|
||||
if ( typeof this.options.button.text !== 'undefined'
|
||||
&& ( this.options.button.text.edit !== null
|
||||
|| this.options.button.text.create !== null
|
||||
)) {
|
||||
return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
|
||||
}
|
||||
return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
|
||||
},
|
||||
getSuccessText() {
|
||||
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
|
||||
},
|
||||
onlyButton() {
|
||||
return (typeof this.options.onlyButton !== 'undefined') ?
|
||||
this.options.onlyButton : this.defaultz.onlyButton;
|
||||
},
|
||||
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;
|
||||
// }
|
||||
}
|
||||
name: "ShowPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"defaultz",
|
||||
"options",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"useDatePane",
|
||||
],
|
||||
emits: ["openEditPane"],
|
||||
mounted() {
|
||||
//console.log('context', this.context)
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
displayTextButton() {
|
||||
return typeof this.options.button !== "undefined" &&
|
||||
typeof this.options.button.displayText !== "undefined"
|
||||
? this.options.button.displayText
|
||||
: this.defaultz.button.displayText;
|
||||
},
|
||||
getClassButton() {
|
||||
let type = this.context.edit
|
||||
? this.defaultz.button.type.edit
|
||||
: this.defaultz.button.type.create;
|
||||
let size =
|
||||
typeof this.options.button !== "undefined" &&
|
||||
this.options.button.size !== null
|
||||
? `${this.options.button.size} `
|
||||
: "";
|
||||
return `${size}${type}`;
|
||||
},
|
||||
getTextButton() {
|
||||
if (
|
||||
typeof this.options.button.text !== "undefined" &&
|
||||
(this.options.button.text.edit !== null ||
|
||||
this.options.button.text.create !== null)
|
||||
) {
|
||||
return this.context.edit
|
||||
? this.options.button.text.edit
|
||||
: this.options.button.text.create;
|
||||
}
|
||||
return this.context.edit
|
||||
? this.defaultz.button.text.edit
|
||||
: this.defaultz.button.text.create;
|
||||
},
|
||||
getSuccessText() {
|
||||
return this.context.edit
|
||||
? "address_edit_success"
|
||||
: "address_new_success";
|
||||
},
|
||||
onlyButton() {
|
||||
return typeof this.options.onlyButton !== "undefined"
|
||||
? this.options.onlyButton
|
||||
: this.defaultz.onlyButton;
|
||||
},
|
||||
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;
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.address-container {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.no-address-yet {
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
padding:1.5rem;
|
||||
margin-bottom:2rem;
|
||||
i {
|
||||
font-size:2rem;
|
||||
margin-bottom:2rem;
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user