From 8cc01b0ab55ea494cf213b720826d0ade4f54888 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Thu, 2 May 2024 22:07:55 +1000
Subject: [PATCH] Meal card adjustments

---
 src/assets/chevron-down.svg     |  4 +++
 src/assets/chevron-up.svg       |  4 +++
 src/components/MealCard.vue     |  7 -----
 src/components/MealPlanPage.vue | 49 +++++++++++++++++++++++----------
 src/components/SwapMealPage.vue | 19 -------------
 5 files changed, 42 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/chevron-down.svg
 create mode 100644 src/assets/chevron-up.svg
 delete mode 100644 src/components/SwapMealPage.vue

diff --git a/src/assets/chevron-down.svg b/src/assets/chevron-down.svg
new file mode 100644
index 0000000..44d74ff
--- /dev/null
+++ b/src/assets/chevron-down.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 9.5L12 14.5L7 9.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/chevron-up.svg b/src/assets/chevron-up.svg
new file mode 100644
index 0000000..c654413
--- /dev/null
+++ b/src/assets/chevron-up.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14.5L12 9.5L17 14.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/MealCard.vue b/src/components/MealCard.vue
index d7927c5..117e3cd 100644
--- a/src/components/MealCard.vue
+++ b/src/components/MealCard.vue
@@ -39,17 +39,10 @@
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
-        <a @click="$emit('edit-meal', meal)">Edit</a>
     </div>
 </template>
 
 <style>
-.meal-card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
 </style>
 
 <script>
diff --git a/src/components/MealPlanPage.vue b/src/components/MealPlanPage.vue
index 017aa16..3078426 100644
--- a/src/components/MealPlanPage.vue
+++ b/src/components/MealPlanPage.vue
@@ -1,20 +1,21 @@
 <template>
     <div>
-        <ul v-if="meals.length">
+        <ul class="meals-list" v-if="meals.length">
             <li v-for="meal in meals" :key="meal.id">
-                <meal-card :meal="meal" @edit-meal="editmeal"/>
+                <meal-card :meal="meal"/>
+                <button class="toggle-actions" @click="selectedMeal = ((meal == selectedMeal) ? null : meal)">
+                    <img :src="meal == selectedMeal ? require('@/assets/chevron-down.svg') : require('@/assets/chevron-up.svg')" />
+                </button>
+                
+                <ul class="actions" v-if="selectedMeal == meal">
+                    <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
+                    <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
+                </ul>
             </li>
         </ul>
         <ul v-if="!meals.length">
             <li>No meals planned</li>
         </ul>
-
-        <ul class="actions" v-if="selectedMeal">
-            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
-            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}/swap`" active-class="active">Swap Day</router-link></li>
-            <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
-            <li><a @click="selectedMeal = null">Cancel</a></li>
-        </ul>
     </div>
 </template>
 
@@ -23,10 +24,31 @@ li {
     list-style-type: none;
 }
 
-.actions ul {
+.toggle-actions {
+    cursor: pointer;
+    background-color: #fff;
+    border: none;
+    border-bottom: solid 1px #ccc;
+    padding: 0 2em;
+    margin: 0;
+}
+
+.toggle-actions img {
+    width: 2em;
+    height: 2em;
+}
+
+.meals-list > li {
+    margin-bottom: 1em;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+ul.actions {
     margin: 0;
     padding: 0;
-    display: flex;
 }
 
 .actions li {
@@ -44,6 +66,7 @@ li {
     text-decoration: none;
     color: #000;
     width: 100%;
+    cursor: pointer;
 }
 
 </style>
@@ -75,10 +98,6 @@ export default {
         this.meals = meals;
     },
     methods: {
-        editmeal(meal) {
-            console.log('editmeal', meal)
-            this.selectedMeal = meal;
-        },
         async deleteSelectedMeal() {
             await data.deleteMeal(this.selectedMeal.id);
             this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
diff --git a/src/components/SwapMealPage.vue b/src/components/SwapMealPage.vue
deleted file mode 100644
index e0f723c..0000000
--- a/src/components/SwapMealPage.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script>
-export default {
-    props: ['id'],
-    data() {
-        return {
-            meal: {
-                meal_date: new Date(),
-                recipe: { name: 'Sar Tay' },
-                chefs: [{ name: 'Ryan' }],
-                consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
-            }
-        }
-    },
-}
-</script>