chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

<template>
    <div class="vue-component">
        <h2>
            <a id="section-20" />
            {{ $t("courselocation.title") }}
        </h2>

        <div
            v-for="error in displayErrors"
            class="alert alert-danger my-2"
            :key="error"
        >
            {{ error }}
        </div>

        <div v-if="hasNoLocation">
            <label class="chill-no-data-statement">
                {{ $t("courselocation.no_address") }}
            </label>
        </div>

        <div class="flex-table" v-if="accompanyingCourse.location">
            <div class="item-bloc">
                <address-render-box :address="accompanyingCourse.location" />

                <div
                    v-if="isPersonLocation"
                    class="alert alert-secondary separator"
                >
                    <label class="col-form-label">
                        {{
                            $t("courselocation.person_locator", [
                                accompanyingCourse.personLocation.text,
                            ])
                        }}
                    </label>
                </div>

                <div
                    v-if="isTemporaryAddress"
                    class="alert alert-warning separator"
                >
                    <p>
                        {{
                            $t(
                                "courselocation.temporary_address_must_be_changed",
                            )
                        }}
                        <i class="fa fa-fw fa-map-marker" />
                    </p>
                </div>
            </div>
        </div>

        <div
            v-if="hasNoPersonLocation"
            class="alert alert-danger no-person-location"
        >
            <i class="fa fa-warning fa-2x" />
            <div>
                <p>
                    {{
                        $t(
                            "courselocation.associate_at_least_one_person_with_one_household_with_address",
                        )
                    }}
                    <a href="#section-10">
                        <i class="fa fa-level-up fa-fw" />
                    </a>
                </p>
            </div>
        </div>

        <div>
            <ul class="record_actions">
                <li>
                    <add-address
                        v-if="!isPersonLocation"
                        :key="key"
                        :context="context"
                        :options="options"
                        :address-changed-callback="submitTemporaryAddress"
                        ref="addAddress"
                    />
                </li>
            </ul>
        </div>

        <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
            {{ $t("courselocation.not_valid") }}
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";

export default {
    name: "CourseLocation",
    components: {
        AddAddress,
        AddressRenderBox,
    },
    data() {
        return {
            addAddress: {
                options: {
                    button: {
                        text: {
                            create: "courselocation.add_temporary_address",
                            edit: "courselocation.edit_temporary_address",
                        },
                    },
                    title: {
                        create: "courselocation.add_temporary_address",
                        edit: "courselocation.edit_temporary_address",
                    },
                    onlyButton: true,
                },
            },
        };
    },
    computed: {
        ...mapState({
            accompanyingCourse: (state) => state.accompanyingCourse,
            context: (state) => state.addressContext,
        }),
        ...mapGetters(["isLocationValid"]),
        options() {
            return this.addAddress.options;
        },
        key() {
            return this.context.edit
                ? "address_" + this.context.addressId
                : this.accompanyingCourse.type +
                      "_" +
                      this.accompanyingCourse.id;
        },
        isTemporaryAddress() {
            return this.accompanyingCourse.locationStatus === "address";
        },
        isPersonLocation() {
            return this.accompanyingCourse.locationStatus === "person";
        },
        hasNoLocation() {
            return this.accompanyingCourse.locationStatus === "none";
        },
        currentParticipations() {
            return this.accompanyingCourse.participations.filter(
                (p) => p.enddate !== null,
            );
        },
        hasNoPersonLocation() {
            let addressInParticipations_ = [];
            this.currentParticipations.forEach((p) => {
                addressInParticipations_.push(
                    this.checkHouseholdAddressForParticipation(p),
                );
            });

            const booleanReducer = (previousValue, currentValue) =>
                previousValue || currentValue;

            let addressInParticipations =
                addressInParticipations_.length > 0
                    ? addressInParticipations_.reduce(booleanReducer)
                    : false;

            //console.log(addressInParticipations_, addressInParticipations);
            return (
                this.accompanyingCourse.step !== "DRAFT" &&
                this.isTemporaryAddress &&
                !addressInParticipations
            );
        },
        isContextEdit() {
            return this.context.edit;
        },
    },
    methods: {
        checkHouseholdAddressForParticipation(participation) {
            if (participation.person.current_household_id === null) {
                return false;
            }
            return participation.person.current_household_address !== null;
        },
        initAddressContext() {
            let context = {
                target: {
                    name: this.accompanyingCourse.type,
                    id: this.accompanyingCourse.id,
                },
                edit: false,
                addressId: null,
                defaults: window.addaddress,
            };
            if (this.accompanyingCourse.location) {
                context["edit"] = true;
                context["addressId"] =
                    this.accompanyingCourse.location.address_id;
            }
            this.$store.commit("setAddressContext", context);
        },
        displayErrors() {
            return this.$refs.addAddress.errorMsg;
        },
        submitTemporaryAddress(payload) {
            //console.log('@@@ click on Submit Temporary Address Button', payload);
            payload["locationStatusTo"] = "address"; // <== temporary, not none, not person
            this.$store
                .dispatch("updateLocation", payload)
                .catch(({ name, violations }) => {
                    if (
                        name === "ValidationException" ||
                        name === "AccessException"
                    ) {
                        violations.forEach((violation) =>
                            this.$toast.open({ message: violation }),
                        );
                    } else {
                        this.$toast.open({ message: "An error occurred" });
                    }
                });

            this.$store.commit("setEditContextTrue", payload);
        },
    },
    created() {
        this.initAddressContext();

        //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
        //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
        //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
    },
};
</script>
<style lang="scss" scoped>
div#accompanying-course {
    div.vue-component {
        & > div.alert.no-person-location {
            margin: 1px 0 0;
        }
        div.no-person-location {
            padding-top: 1.5em;
            display: flex;
            flex-direction: row;
            & > i {
                flex-basis: 1.5em;
                flex-grow: 0;
                flex-shrink: 0;
                padding-top: 0.2em;
                opacity: 0.75;
            }
            & > div {
                flex-basis: auto;
                div.action {
                    button.btn-update {
                        margin-right: 2em;
                    }
                }
            }
        }
        div.flex-table {
            div.item-bloc {
                div.alert {
                    margin: 0 -0.9em -1em;
                }
            }
        }
    }
}
</style>