chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

<template>
    <ul :class="listClasses" v-if="picked.length && displayPicked">
        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
            <span
                v-if="'me' === p"
                class="chill_denomination current-user updatedBy"
                >{{ trans(USER_CURRENT_USER) }}</span
            >
            <span v-else class="chill_denomination">{{ p.text }}</span>
        </li>
    </ul>
    <ul class="record_actions">
        <li v-if="isCurrentUserPicker" class="btn btn-sm btn-misc">
            <label class="flex items-center gap-2">
                <input
                    :checked="picked.indexOf('me') >= 0 ? true : null"
                    ref="itsMeCheckbox"
                    :type="multiple ? 'checkbox' : 'radio'"
                    @change="selectItsMe"
                />
                {{ trans(USER_CURRENT_USER) }}
            </label>
        </li>
        <li class="add-persons">
            <add-persons
                :options="addPersonsOptions"
                :key="uniqid"
                :buttonTitle="translatedListOfTypes"
                :modalTitle="translatedListOfTypes"
                ref="addPersons"
                @addNewPersons="addNewEntity"
            >
            </add-persons>
        </li>
    </ul>
    <ul class="list-suggest add-items inline">
        <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
            <span>{{ s.text }}</span>
        </li>
    </ul>
</template>

<script setup>
import { ref, computed } from "vue";
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue"; // eslint-disable-line
import { appMessages } from "./i18n";
import { trans, USER_CURRENT_USER } from "translator";

const props = defineProps({
    multiple: Boolean,
    types: Array,
    picked: Array,
    uniqid: String,
    removableIfSet: { type: Boolean, default: true },
    displayPicked: { type: Boolean, default: true },
    suggested: { type: Array, default: () => [] },
    label: String,
    isCurrentUserPicker: { type: Boolean, default: false },
});

const emit = defineEmits([
    "addNewEntity",
    "removeEntity",
    "addNewEntityProcessEnded",
]);

const itsMeCheckbox = ref(null);
const addPersons = ref(null);

const addPersonsOptions = computed(() => ({
    uniq: !props.multiple,
    type: props.types,
    priority: null,
    button: { size: "btn-sm", class: "btn-submit" },
}));

const translatedListOfTypes = computed(() => {
    if (props.label) return props.label;
    let trans = props.types.map((t) =>
        props.multiple
            ? appMessages.fr.pick_entity[t].toLowerCase()
            : appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
    );
    return props.multiple
        ? appMessages.fr.pick_entity.modal_title + trans.join(", ")
        : appMessages.fr.pick_entity.modal_title_one + trans.join(", ");
});

const listClasses = computed(() => ({
    "list-suggest": true,
    "remove-items": props.removableIfSet,
}));

const selectItsMe = (event) =>
    event.target.checked ? addNewSuggested("me") : removeEntity("me");

const addNewSuggested = (entity) => {
    emit("addNewEntity", { entity });
};

const addNewEntity = ({ selected, modal }) => {
    selected.forEach((item) => emit("addNewEntity", { entity: item.result }));
    addPersons.value?.resetSearch();
    modal.showModal = false;
    emit("addNewEntityProcessEnded");
};

const removeEntity = (entity) => {
    if (!props.removableIfSet) return;
    if (entity === "me" && itsMeCheckbox.value) {
        itsMeCheckbox.value.checked = false;
    }
    emit("removeEntity", { entity });
};
</script>

<style lang="scss" scoped>
.current-user {
    color: var(--bs-body-color);
    background-color: var(--bs-chill-l-gray) !important;
}
</style>