Change meal purchasing to show all meals and allow filtering on purchased meals

src/App.vue

@@ -42,6 +42,7 @@ export default {
 </script>
 
 <style>
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -70,6 +71,10 @@ export default {
     background-color: #333;
 }
 
+.nav li {
+    flex: 1;
+}
+
 /* Style the links inside the navigation bar */
 .nav a {
     display: inline-block;
@@ -80,7 +85,7 @@ export default {
 }
 
 /* Have active route use different color */
-.nav a.active {
+.nav li:has(> a.active) {
     background-color: #4CAF50;
     color: white;
 }

src/components/meals/MealCard.vue

@@ -1,41 +1,19 @@
 <template>
     <div class="meal-card">
-        <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
-        
-        <p v-if="meal.recipes.length && meal.extra_ingredients.length">
-            <span v-for="(meal_recipe, index) in meal.recipes" :key="meal_recipe.recipe.id">
-                {{ meal_recipe.recipe.name }}{{ seperator(index, meal.recipes) }}
-            </span>
-            with
-            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
-                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
-            </span>
-        </p>
-        <p v-else-if="meal.recipes.length">
-            <span v-for="(meal_recipe, index) in meal.recipes" :key="meal_recipe.recipe.id">
-                {{ meal_recipe.recipe.name }}{{ seperator(index, meal.recipes) }}
-            </span>
-        </p>
-        <p v-else-if="meal.extra_ingredients.length">
-            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
-                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
-            </span>
-        </p>
-        <p v-else>
-            Nothing planned
-        </p>
+        <h3>{{ mealTitle }}</h3>
+        <h4>{{ dayOfWeek }} <small>{{ date }}</small></h4>
         
         <p>
             Cooked by 
             <span v-for="(chef, index) in meal.chefs" :key="chef.id">
-                {{ chef.name }}{{ seperator(index, meal.chefs) }}
+                {{ chef.name }}{{ englishSeperator(index, meal.chefs) }}
             </span>
             <span v-if="!meal.chefs.length">somebody?</span>
         </p>
         <p> 
             For 
             <span v-for="(consumer, index) in meal.consumers" :key="consumer.id">
-                {{ consumer.name }}{{ seperator(index, meal.consumers) }}
+                {{ consumer.name }}{{ englishSeperator(index, meal.consumers) }}
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
@@ -52,6 +30,30 @@
 
 import { ago } from '@/dateformats.js'
 
+function englishSeperator(index, list) {
+    switch (index) {
+        case list.length - 1:
+            return '';
+        case list.length - 2:
+            return ' and ';
+        default:
+            return ', ';
+    }
+}
+
+function englishList(list) {
+    switch (list.length) {
+        case 0:
+            return '';
+        case 1:
+            return list[0];
+        case 2:
+            return `${list[0]} and ${list[1]}`;
+        default:
+            return `${list.slice(0, -1).join(', ')}, and ${list.slice(-1)}`;
+    }
+}
+
 export default {
     name: 'MealCard',
     props: ['meal'],
@@ -62,18 +64,21 @@ export default {
         dayOfWeek() {
             return this.meal.suggested_date.toLocaleDateString('en-au', { weekday: 'long' })
         },
+        mealTitle() {
+            const recipesText = englishList(this.meal.recipes.map(mealRecipe => mealRecipe.recipe.name));
+            const ingredientsText = englishList(this.meal.extra_ingredients.map(ingredient => ingredient.name));
+
+            if (recipesText && ingredientsText) {
+                return `${recipesText} with ${ingredientsText}`;
+            } else if (recipesText || ingredientsText) {
+                return recipesText || ingredientsText;
+            } else {
+                return 'Nothing planned';
+            }
+        }
     },
     methods: {
-        seperator(index, list) {
-            switch (index) {
-                case list.length - 1:
-                    return '';
-                case list.length - 2:
-                    return ' and ';
-                default:
-                    return ', ';
-            }
-        },
+        englishSeperator,
         ago
     }
 }

src/components/recipes/RecipeSearchBox.vue

@@ -58,7 +58,7 @@ export default {
 }
 
 .recipe-search-box input {
-    width: 100%;
+    width: calc(100% - 2em);
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;

src/components/shopping/CurrentShoppingListPage.vue

@@ -22,8 +22,11 @@
         <button v-else @click="showPurchased=true">⏷ Show Purchased ⏷</button>
 
         <div v-if="showPurchased">
+            <h4>Purchased Meals</h4>
+            <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="purchasedMeals" />
+
             <h4>
-                Already Purchased
+                Purchased Items
             </h4>
             <ul class="full-shopping-list">
                 <li v-for="item in purchasedGroups" :key="item.id">
@@ -170,7 +173,7 @@ export default {
         const to = new Date();
         to.setDate(to.getDate() + 7);
 
-        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
+        return { from, to, availableMeals: [], purchasedMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
     },
     async beforeMount() {
         this.loadData();
@@ -183,9 +186,17 @@ export default {
     },
     methods: {
         async loadData() {
-            const allMeals = await data.getUpcomingMeals(this.from, this.to);
-            this.availableMeals = allMeals.filter(m => !m.purchase_date);
             this.shoppingList = await data.getCurrentShoppingList();
+
+            const upcomingMeals = await data.getUpcomingMeals(this.from, this.to);
+            const requestedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
+
+            const meals = {};
+            requestedMeals.forEach(m => meals[m.id] = m);
+            upcomingMeals.forEach(m => meals[m.id] = m);
+
+            this.purchasedMeals = Object.values(meals).filter(m => m.purchase_date);
+            this.availableMeals = Object.values(meals).filter(m => !m.purchase_date);
         },
         async updateLists() {
             if (!this.shoppingList)

src/components/shopping/MealSelectionList.vue

@@ -4,7 +4,7 @@
     <li v-for="meal in meals" :key="meal.id">
         <!-- Have a checkbox and card for each meal, show the image and name -->
         <!-- Emit meal-selected event on checked and meal-unselected on unchecked -->
-        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
+        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="disabled" />
         <label :for="meal.id" :style="getImageStyling(meal)">
             {{ formatDate(meal.suggested_date) }}
         </label>
@@ -121,6 +121,10 @@ export default {
     props: {
         meals: Array,
         checked: Array,
+        disabled: {
+            type: Boolean,
+            default: false
+        }
     },
     methods: {
         formatDate,

src/components/shopping/PurchasedShoppingListPage.vue

@@ -2,7 +2,7 @@
     <h3>Purchased {{ shoppingList ? ago(shoppingList.created_date) : '' }}</h3>
     
     <h4>Included Meals</h4>
-    <meal-selection-list :checked="includedMeals" :meals="includedMeals" />
+    <meal-selection-list :checked="includedMeals" :meals="includedMeals" :disabled="true" />
 
     <ul class="full-shopping-list">
         <li v-for="item in listByProduct" :key="item.id">