Edit people in meal

src/components/meals/EditMealPage.vue

@@ -2,6 +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>
         <div class="recipes">
             <h2>Recipes</h2>
@@ -21,7 +26,7 @@
             </div>
         </div>
         <div class="ingredients">
-            <h2>Additional Ingredients</h2>
+            <h2>Sides & Additional Ingredients</h2>
             <ul v-if="meal.extra_ingredients && meal.extra_ingredients.length">
                 <li v-for="ingredient in meal.extra_ingredients" :key="ingredient" class="saved-ingredient">
                     <p>
@@ -43,13 +48,14 @@
 import data from '@/data.js'
 import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue';
 import RecipeCard from '@/components/recipes/RecipeCard.vue';
+import CompactParsedIngredient from '@/components/ingredients/CompactParsedIngredient.vue';
 import DatePicker from './DatePicker.vue';
 import IngredientAddBox from './IngredientAddBox.vue';
-import CompactParsedIngredient from '@/components/ingredients/CompactParsedIngredient.vue';
+import PersonList from './PersonList.vue';
 
 export default {
     props: ['id'],
-    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, CompactParsedIngredient },
+    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, CompactParsedIngredient, PersonList },
     data() {
         return {
             meal: {
@@ -96,6 +102,12 @@ export default {
         deleteIngredient(ingredient) {
             this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i != ingredient);
         },
+        removePerson(list, person) {
+            this.meal[list] = this.meal[list].filter(p => p.id !== person.id);
+        },
+        addPerson(list, person) {
+            this.meal[list].push(person);
+        },
         async saveMeal() {
             const meal = await data.saveMeal(this.meal);
             if (meal?.id) {
@@ -111,6 +123,21 @@ export default {
 
 <style scoped>
 
+.persons-list {
+    text-align: left;
+    padding-left: 2em;
+}
+
+.persons-list p {
+    margin: 0;
+    padding-bottom: 1em;
+}
+
+.person-list li {
+    display: inline-block;
+    padding-right: 1em;
+}
+
 .container {
     margin: 1em auto;
 }

src/components/meals/PersonList.vue

@@ -0,0 +1,146 @@
+<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>

src/data.js

@@ -122,5 +122,9 @@ export default {
             credentials: "include",
         });
         return await response.json();
-    }
+    },
+    async searchPerson(name) {
+        const response = await fetch(BASE_URL + "/persons?q=" + encodeURIComponent(name));
+        return await response.json();
+    },
 }