chill-bundles/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue

<template>
    <teleport to="#add-persons" v-if="isComponentVisible">
        <div class="flex-bloc concerned-groups" :class="getContext">
            <persons-bloc
                v-for="bloc in contextPersonsBlocs"
                :key="bloc.key"
                :bloc="bloc"
                :bloc-width="getBlocWidth"
                :set-persons-in-bloc="setPersonsInBloc"
            />
        </div>
        <div
            v-if="
                getContext === 'accompanyingCourse' &&
                suggestedEntities.length > 0
            "
        >
            <ul class="list-suggest add-items inline">
                <li
                    v-for="(p, i) in suggestedEntities"
                    @click="addSuggestedEntity(p)"
                    :key="`suggestedEntities-${i}`"
                >
                    <person-text v-if="p.type === 'person'" :person="p" />
                    <span v-else>{{ p.text }}</span>
                </li>
            </ul>
        </div>

        <ul class="record_actions">
            <li class="add-persons">
                <add-persons
                    :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
                    :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
                    v-bind:key="addPersons.key"
                    v-bind:options="addPersonsOptions"
                    @addNewPersons="addNewPersons"
                    ref="addPersons"
                >
                </add-persons>
            </li>
        </ul>
    </teleport>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import PersonsBloc from "./ConcernedGroups/PersonsBloc.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
import {
    ACTIVITY_BLOC_PERSONS,
    ACTIVITY_BLOC_PERSONS_ASSOCIATED,
    ACTIVITY_BLOC_THIRDPARTY,
    ACTIVITY_BLOC_USERS,
    ACTIVITY_ADD_PERSONS,
    trans,
} from "translator";

export default {
    name: "ConcernedGroups",
    components: {
        AddPersons,
        PersonsBloc,
        PersonText,
    },
    setup() {
        return {
            trans,
            ACTIVITY_ADD_PERSONS,
        };
    },
    data() {
        return {
            personsBlocs: [
                {
                    key: "persons",
                    title: trans(ACTIVITY_BLOC_PERSONS),
                    persons: [],
                    included: false,
                },
                {
                    key: "personsAssociated",
                    title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
                    persons: [],
                    included: window.activity
                        ? window.activity.activityType.personsVisible !== 0
                        : true,
                },
                {
                    key: "personsNotAssociated",
                    title: "activity.bloc_persons_not_associated",
                    persons: [],
                    included: window.activity
                        ? window.activity.activityType.personsVisible !== 0
                        : true,
                },
                {
                    key: "thirdparty",
                    title: trans(ACTIVITY_BLOC_THIRDPARTY),
                    persons: [],
                    included: window.activity
                        ? window.activity.activityType.thirdPartiesVisible !== 0
                        : true,
                },
                {
                    key: "users",
                    title: trans(ACTIVITY_BLOC_USERS),
                    persons: [],
                    included: window.activity
                        ? window.activity.activityType.usersVisible !== 0
                        : true,
                },
            ],
            addPersons: {
                key: "activity",
            },
        };
    },
    computed: {
        isComponentVisible() {
            return window.activity
                ? window.activity.activityType.personsVisible !== 0 ||
                      window.activity.activityType.thirdPartiesVisible !== 0 ||
                      window.activity.activityType.usersVisible !== 0
                : true;
        },
        ...mapState({
            persons: (state) => state.activity.persons,
            thirdParties: (state) => state.activity.thirdParties,
            users: (state) => state.activity.users,
            accompanyingCourse: (state) => state.activity.accompanyingPeriod,
        }),
        ...mapGetters(["suggestedEntities"]),
        getContext() {
            return this.accompanyingCourse ? "accompanyingCourse" : "person";
        },
        contextPersonsBlocs() {
            return this.personsBlocs.filter((bloc) => bloc.included !== false);
        },
        addPersonsOptions() {
            let optionsType = [];
            if (window.activity) {
                if (window.activity.activityType.personsVisible !== 0) {
                    optionsType.push("person");
                }
                if (window.activity.activityType.thirdPartiesVisible !== 0) {
                    optionsType.push("thirdparty");
                }
                if (window.activity.activityType.usersVisible !== 0) {
                    optionsType.push("user");
                }
            } else {
                optionsType = ["person", "thirdparty", "user"];
            }
            return {
                type: optionsType,
                priority: null,
                uniq: false,
                button: {
                    size: "btn-sm",
                },
            };
        },
        getBlocWidth() {
            return Math.round(100 / this.contextPersonsBlocs.length) + "%";
        },
    },
    mounted() {
        this.setPersonsInBloc();
    },
    methods: {
        setPersonsInBloc() {
            let groups;
            if (this.accompanyingCourse) {
                groups = this.splitPersonsInGroups();
            }
            this.personsBlocs.forEach((bloc) => {
                if (this.accompanyingCourse) {
                    switch (bloc.key) {
                        case "personsAssociated":
                            bloc.persons = groups.personsAssociated;
                            bloc.included = true;
                            break;
                        case "personsNotAssociated":
                            bloc.persons = groups.personsNotAssociated;
                            bloc.included = true;
                            break;
                    }
                } else {
                    switch (bloc.key) {
                        case "persons":
                            bloc.persons = this.persons;
                            bloc.included = true;
                            break;
                    }
                }
                switch (bloc.key) {
                    case "thirdparty":
                        bloc.persons = this.thirdParties;
                        break;
                    case "users":
                        bloc.persons = this.users;
                        break;
                }
            }, groups);
        },
        splitPersonsInGroups() {
            let personsAssociated = [];
            let personsNotAssociated = this.persons;
            let participations = this.getCourseParticipations();
            this.persons.forEach((person) => {
                participations.forEach((participation) => {
                    if (person.id === participation.id) {
                        //console.log(person.id);
                        personsAssociated.push(person);
                        personsNotAssociated = personsNotAssociated.filter(
                            (p) => p !== person,
                        );
                    }
                });
            });
            return {
                personsAssociated: personsAssociated,
                personsNotAssociated: personsNotAssociated,
            };
        },
        getCourseParticipations() {
            let participations = [];
            this.accompanyingCourse.participations.forEach((participation) => {
                if (!participation.endDate) {
                    participations.push(participation.person);
                }
            });
            return participations;
        },
        addNewPersons({ selected, modal }) {
            console.log("@@@ CLICK button addNewPersons", selected);
            selected.forEach((item) => {
                this.$store.dispatch("addPersonsInvolved", item);
            }, this);
            this.$refs.addPersons.resetSearch(); // to cast child method
            modal.showModal = false;
            this.setPersonsInBloc();
        },
        addSuggestedEntity(person) {
            this.$store.dispatch("addPersonsInvolved", {
                result: person,
                type: "person",
            });
            this.setPersonsInBloc();
        },
    },
};
</script>

<style lang="scss" scoped></style>