src/App.vue

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

src/components/meals/MealCard.vue

@@ -1,19 +1,41 @@
 <template>
     <div class="meal-card">
-        <h3>{{ mealTitle }}</h3>
+        <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
-        <h4>{{ dayOfWeek }} <small>{{ date }}</small></h4>
         
+        <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>
+
         <p>
             Cooked by 
             <span v-for="(chef, index) in meal.chefs" :key="chef.id">
-                {{ chef.name }}{{ englishSeperator(index, meal.chefs) }}
+                {{ chef.name }}{{ seperator(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 }}{{ englishSeperator(index, meal.consumers) }}
+                {{ consumer.name }}{{ seperator(index, meal.consumers) }}
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
@@ -30,30 +52,6 @@
 
 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'],
@@ -64,21 +62,18 @@ 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: {
-        englishSeperator,
+        seperator(index, list) {
+            switch (index) {
+                case list.length - 1:
+                    return '';
+                case list.length - 2:
+                    return ' and ';
+                default:
+                    return ', ';
+            }
+        },
         ago
     }
 }

src/components/recipes/RecipeSearchBox.vue

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

src/components/shopping/CurrentShoppingListPage.vue

@@ -3,7 +3,7 @@
     
     <h4>Included Meals</h4>
     <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="availableMeals" />
-    
+
     <ul class="full-shopping-list">
         <li v-for="item in productGroupsToPurchase" :key="item.id" class="selectable" :class="{ 'selected': isSelected(item) }" @click="toggleSelect(item)">
             <shopping-list-item :productGrouping="item" />
@@ -22,11 +22,8 @@
         <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>
-                Purchased Items
+                Already Purchased
             </h4>
             <ul class="full-shopping-list">
                 <li v-for="item in purchasedGroups" :key="item.id">
@@ -173,7 +170,7 @@ export default {
         const to = new Date();
         to.setDate(to.getDate() + 7);
 
-        return { from, to, availableMeals: [], purchasedMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
+        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
     },
     async beforeMount() {
         this.loadData();
@@ -186,17 +183,9 @@ 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="disabled" />
+        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
         <label :for="meal.id" :style="getImageStyling(meal)">
             {{ formatDate(meal.suggested_date) }}
         </label>
@@ -121,10 +121,6 @@ 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" :disabled="true" />
+    <meal-selection-list :checked="includedMeals" :meals="includedMeals" />
 
     <ul class="full-shopping-list">
         <li v-for="item in listByProduct" :key="item.id">