munch-ease-frontend/src/components/meals/PersonList.vue

<template>
<span class="person-list">
    <span v-for="person in people" :key="person.id">
        <button class="person-circle remove-person" @click="$emit('remove-person', person)" >{{ person.name }}</button>
    </span>
    <span>
        <button v-if="!isAddingPerson" class="person-circle add-person" @click="isAddingPerson = true">+</button>
        <input v-else v-model="searchName" ref="searchNameInput" @keyup.enter="addPerson" @keyup.esc="isAddingPerson = false" @blur="isAddingPerson = false" />
        <ul class="person-droplist" ref="persondroplist" v-if="isAddingPerson && searchResults.length">
            <li v-for="person in searchResults" :key="person.id">
                <button class="person-circle add-person" @mousedown="addPerson(person)">{{ person.name }}</button>
            </li>
        </ul>
    </span>
</span>
</template>

<style scoped>

.person-list {
    display: inline-block;
    text-align: center;
    min-height: 50px;
    padding: 0;
    margin: 0;
}

/* Remove all the button styling */
.person-circle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Show the initials of the person in a circle */
.person-circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background: #eee;
}

/* On hover, prompt the user to click to remove the person */
/* change opacity of circle, and use css to add a large cross over the circle */
.remove-person:hover {
    cursor: pointer;
    position: relative;
    background-color: lightcoral;
}

/* Add a cross to the circle */
.remove-person:hover::before, .remove-person:hover::after {
    pointer-events: none;
    content: "X";
    color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.add-person {
    background-color: lightgreen;
}

.add-person:hover {
    cursor: pointer;
    font-weight: bolder;
    color: white;
    background-color: green;
}

.person-droplist {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 40vh;
    overflow-y: scroll;
    z-index: 1000;
}

.person-droplist li {
    padding: 8px;
    cursor: pointer;
    display: inline;
    padding: 1ex 1em;
}

</style>

<script>
import { ref } from 'vue';
import data from '@/data.js'

export default {
    name: 'PersonList',
    props: {
        people: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            isAddingPerson: false,
            searchName: '',
            searchResults: [],
        }
    },
    setup() {
        const searchNameInput = ref(null);
        const persondroplist = ref(null);
        return { searchNameInput, persondroplist };
    },
    watch: {
        searchName: async function() {
            await this.updateSearchResults()
        },
        searchNameInput: async function() {
            this.searchNameInput?.focus();
            await this.updateSearchResults()
        },
        persondroplist: function() {
            if (this.persondroplist && this.searchNameInput)
            {
                // Align the droplist to the input field & its size
                const inputRect = this.searchNameInput.getBoundingClientRect();
                this.persondroplist.style.left = `${inputRect.left}px`;
                this.persondroplist.style.top = `${inputRect.bottom}px`;
                this.persondroplist.style.width = `${inputRect.width}px`;
            }
        }
    },
    methods: {
        async updateSearchResults() {
            const results = await data.searchPerson(this.searchName);
            // Exclude people already in the list
            const idSet = new Set(this.people.map(p => p.id));
            this.searchResults = results.filter(p => !idSet.has(p.id));
        },
        addPerson(person) {
            if (!person && this.searchResults.length > 0)
            {
                person = this.searchResults[0];
            }

            if (person?.id >= 0 && !this.people.find(p => p.id === person.id))
            {
                this.$emit('add-person', person);
            }

            this.searchName = '';
            this.searchResults = [];
            this.isAddingPerson = false;
        },
        removePerson(person) {
            this.$emit('remove-person', person);
        },
    }
}

</script>