Improved people list

src/components/meals/EditMealPage.vue

@@ -2,11 +2,11 @@
     <div class="container">
         <div class="fields">
             <date-picker @date-selected="selectDate" :date="meal.meal_date" />
-            <table class="persons-list">
-            <tr><td><strong>Chefs</strong></td><td><person-list :people="meal.chefs" @remove-person="(p) => removePerson('chefs', p)" @add-person="(p) => addPerson('chefs', p)" /></td></tr>
-            <tr><td><strong>Consumers</strong></td><td><person-list :people="meal.consumers" @remove-person="(p) => removePerson('consumers', p)" @add-person="(p) => addPerson('consumers', p)" /></td></tr>
-            <tr><td><strong>Cleanup</strong></td><td><person-list :people="meal.cleanup" @remove-person="(p) => removePerson('cleanup', p)" @add-person="(p) => addPerson('cleanup', p)" /></td></tr>
-        </table>
+            <div class="persons-list">
+                Cooked by <person-list :people="meal.chefs" @remove-person="(p) => removePerson('chefs', p)" @add-person="(p) => addPerson('chefs', p)" /> 
+                for <person-list :people="meal.consumers" @remove-person="(p) => removePerson('consumers', p)" @add-person="(p) => addPerson('consumers', p)" />,
+                with <person-list :people="meal.cleanup" @remove-person="(p) => removePerson('cleanup', p)" @add-person="(p) => addPerson('cleanup', p)" /> on cleanup.
+            </div>
         </div>
         <div class="recipes">
             <h2>Recipes</h2>

src/components/meals/PersonList.vue

@@ -5,10 +5,10 @@
     </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">
+        <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" @click="addPerson(person)">{{ person.name }}</button>
+                <button class="person-circle add-person" @mousedown="addPerson(person)">{{ person.name }}</button>
             </li>
         </ul>
     </span>
@@ -42,7 +42,6 @@
     text-align: center;
     border-radius: 50%;
     background: #eee;
-    margin-right: 1em;
 }
 
 /* On hover, prompt the user to click to remove the person */
@@ -86,6 +85,7 @@
     margin: 0;
     max-height: 40vh;
     overflow-y: scroll;
+    z-index: 1000;
 }
 
 .person-droplist li {
@@ -98,7 +98,7 @@
 </style>
 
 <script>
-
+import { ref } from 'vue';
 import data from '@/data.js'
 
 export default {
@@ -116,19 +116,44 @@ export default {
             searchResults: [],
         }
     },
+    setup() {
+        const searchNameInput = ref(null);
+        const persondroplist = ref(null);
+        return { searchNameInput, persondroplist };
+    },
     watch: {
         searchName: async function() {
-            this.searchResults = await data.searchPerson(this.searchName);
+            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?.id && this.searchResults.length > 0)
             {
                 person = this.searchResults[0];
             }
 
-            if (person?.id)
+            if (person?.id && !this.people.find(p => p.id === person.id))
             {
                 this.$emit('add-person', person);
             }

src/components/recipes/RecipeSearchBox.vue

@@ -75,9 +75,7 @@ export default {
     border: 1px solid #ccc;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 1000;
-}
     
-.recipe-search-box .dropdown {
     list-style-type: none;
     margin: 0;
     padding: 0;