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" @keyup.enter="addPerson" @keyup.esc="isAddingPerson = false" @blur="addPerson" />
        <ul class="person-droplist" v-if="isAddingPerson && searchResults.length">
            <li v-for="person in searchResults" :key="person.id">
                <button class="person-circle add-person" @click="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;
    margin-right: 1em;
}

/* 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;
}

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

</style>

<script>

import data from '@/data.js'

export default {
    name: 'PersonList',
    props: {
        people: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            isAddingPerson: false,
            searchName: '',
            searchResults: [],
        }
    },
    watch: {
        searchName: async function() {
            this.searchResults = await data.searchPerson(this.searchName);
        }
    },
    methods: {
        addPerson(person) {
            if (!person?.id && this.searchResults.length > 0)
            {
                person = this.searchResults[0];
            }

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

</script>