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

<template>
    <div class="address-form">
        <!-- Not display in modal -->
        <div v-if="insideModal === false" class="loading">
            <i
                v-if="flag.loading"
                class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
            />
            <span class="sr-only">Loading...</span>
        </div>

        <div v-if="errors.length" class="alert alert-warning">
            <ul>
                <li v-for="(e, i) in errors" :key="i">
                    {{ e }}
                </li>
            </ul>
        </div>

        <h4 class="h3">
            {{ trans(ADDRESS_SELECT_AN_ADDRESS_TITLE) }}
        </h4>
        <div class="row my-3">
            <div class="col-lg-6">
                <div class="form-check">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="isConfidential"
                        v-model="isConfidential"
                        :value="valueConfidential"
                    />
                    <label class="form-check-label" for="isConfidential">
                        {{ trans(ADDRESS_IS_CONFIDENTIAL) }}
                    </label>
                </div>
                <div class="form-check">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="isNoAddress"
                        v-model="isNoAddress"
                        :value="value"
                    />
                    <label class="form-check-label" for="isNoAddress">
                        {{ trans(ADDRESS_IS_NO_ADDRESS) }}
                    </label>
                </div>

                <country-selection
                    :context="context"
                    :entity="entity"
                    :flag="flag"
                    :check-errors="checkErrors"
                    @get-cities="$emit('getCities', selected.country)"
                />

                <city-selection
                    :entity="entity"
                    :context="context"
                    :focus-on-address="focusOnAddress"
                    :update-map-center="updateMapCenter"
                    :flag="flag"
                    :check-errors="checkErrors"
                    @get-reference-addresses="
                        $emit('getReferenceAddresses', selected.city)
                    "
                />

                <address-selection
                    v-if="!isNoAddress"
                    :entity="entity"
                    :context="context"
                    :update-map-center="updateMapCenter"
                    :flag="flag"
                    :check-errors="checkErrors"
                />
            </div>
            <div class="col-lg-6 mt-3 mt-lg-0">
                <address-map :entity="entity" ref="addressMap" />
            </div>
        </div>

        <address-more :entity="entity" :is-no-address="isNoAddress" />

        <action-buttons
            v-if="insideModal === false"
            :options="this.options"
            :defaultz="this.defaultz"
        >
            <template #before>
                <slot name="before" />
            </template>
            <template #action>
                <slot name="action" />
            </template>
            <template #after>
                <slot name="after" />
            </template>
        </action-buttons>
    </div>
</template>

<script>
import CountrySelection from "./AddAddress/CountrySelection";
import CitySelection from "./AddAddress/CitySelection";
import AddressSelection from "./AddAddress/AddressSelection";
import AddressMap from "./AddAddress/AddressMap";
import AddressMore from "./AddAddress/AddressMore";
import ActionButtons from "./ActionButtons.vue";
import {
    ADDRESS_SELECT_AN_ADDRESS_TITLE,
    ADDRESS_IS_CONFIDENTIAL,
    ADDRESS_IS_NO_ADDRESS,
    trans,
} from "translator";

export default {
    name: "EditPane",
    components: {
        CountrySelection,
        CitySelection,
        AddressSelection,
        AddressMap,
        AddressMore,
        ActionButtons,
    },
    setup() {
        return {
            trans,
            ADDRESS_SELECT_AN_ADDRESS_TITLE,
            ADDRESS_IS_CONFIDENTIAL,
            ADDRESS_IS_NO_ADDRESS,
        };
    },
    props: [
        "context",
        "options",
        "defaultz",
        "flag",
        "entity",
        "errorMsg",
        "insideModal",
        "errors",
        "checkErrors",
    ],
    emits: ["getCities", "getReferenceAddresses"],
    data() {
        return {
            value: false,
            valueConfidential: false,
        };
    },
    computed: {
        address() {
            return this.entity.address;
        },
        loaded() {
            return this.entity.loaded;
        },
        selected() {
            return this.entity.selected;
        },
        addressMap() {
            return this.entity.addressMap;
        },
        isConfidential: {
            set(value) {
                this.entity.selected.confidential = value;
            },
            get() {
                return this.entity.selected.confidential;
            },
        },
        isNoAddress: {
            set(value) {
                console.log("isNoAddress value", value);
                this.entity.selected.isNoAddress = value;
                this.checkErrors();
            },
            get() {
                return this.entity.selected.isNoAddress;
            },
        },
    },
    methods: {
        focusOnAddress() {
            const addressSelector = document.getElementById("addressSelector");
            if (addressSelector !== null) {
                addressSelector.focus();
            }
        },
        updateMapCenter(point) {
            console.log("point", point);
            this.addressMap.center[0] = point.coordinates[0];
            this.addressMap.center[1] = point.coordinates[1];
            this.$refs.addressMap.update(); // cast child methods
        },
    },
};
</script>

<style lang="scss">
div.address-form {
    div#address_map {
        height: 400px;
        width: 100%;
        z-index: 1;
    }
}
</style>