chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue

<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="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="
                !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"
        />

        <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";

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;
        // }
    },
};
</script>

<style lang="scss">
.address-container {
    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;
    }
}
</style>