Add functionality to edit mealplan item

frontend/components/global/BaseDialog.vue

@@ -170,6 +170,7 @@ export default defineComponent({
     close() {
       this.dialog = false;
       this.logDeprecatedProp("close");
+      this.$emit("closed");
     },
     logDeprecatedProp(val: string) {
       console.warn(

frontend/lang/messages/en-GB.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/en-US.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/gl-ES.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/ja-JP.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "今週の夕食",
     "dinner-today": "今日の夕食",
     "dinner-tonight": "今夜の夕食",

frontend/lang/messages/ko-KR.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/lv-LV.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/sr-SP.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/lang/messages/vi-VN.json

@@ -249,6 +249,7 @@
   },
   "meal-plan": {
     "create-a-new-meal-plan": "Create a New Meal Plan",
+    "update-this-meal-plan": "Update this Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
     "dinner-tonight": "DINNER TONIGHT",

frontend/pages/group/mealplan/planner/edit.vue

@@ -1,15 +1,28 @@
 <template>
   <div>
+    {{ state.dialog }}
     <!-- Create Meal Dialog -->
     <BaseDialog
       v-model="state.dialog"
-      :title="$tc('meal-plan.create-a-new-meal-plan')"
+      :title="$tc(newMeal.existing
+        ? 'meal-plan.update-this-meal-plan'
+        : 'meal-plan.create-a-new-meal-plan'
+      )"
+      :submit-text="$tc(newMeal.existing
+        ? 'general.update'
+        : 'general.create'
+      )"
       color="primary"
       :icon="$globals.icons.foods"
       @submit="
-        actions.createOne(newMeal);
+        if (newMeal.existing) {
+          actions.updateOne(newMeal);
+        } else {
+          actions.createOne(newMeal);
+        }
         resetDialog();
       "
+      @close="resetDialog()"
     >
       <v-card-text>
         <v-menu
@@ -68,7 +81,6 @@
         </v-card-actions>
       </v-card-text>
     </BaseDialog>
-
     <v-row>
       <v-col
         v-for="(plan, index) in mealplans"
@@ -101,7 +113,9 @@
             class="my-1"
             :class="{ handle: $vuetify.breakpoint.smAndUp }"
           >
-            <v-list-item>
+            <v-list-item
+              @click="editMeal(mealplan)"
+            >
               <v-list-item-avatar :rounded="false">
                 <RecipeCardImage
                   v-if="mealplan.recipe"
@@ -213,7 +227,7 @@ import draggable from "vuedraggable";
 import { MealsByDate } from "./types";
 import { useMealplans, usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
-import { PlanEntryType } from "~/lib/api/types/meal-plan";
+import { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
 import { useUserApi } from "~/composables/api";
 import { useGroupSelf } from "~/composables/use-groups";
 import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
@@ -290,8 +304,6 @@ export default defineComponent({
       if (dialog.note) {
         newMeal.recipeId = undefined;
       }
-      newMeal.title = "";
-      newMeal.text = "";
     });
 
     const newMeal = reactive({
@@ -300,6 +312,9 @@ export default defineComponent({
       text: "",
       recipeId: undefined as string | undefined,
       entryType: "dinner" as PlanEntryType,
+      existing: false,
+      id: 0,
+      groupId: ""
     });
 
     function openDialog(date: Date) {
@@ -307,12 +322,32 @@ export default defineComponent({
       state.value.dialog = true;
     }
 
+    function editMeal(mealplan: UpdatePlanEntry) {
+      const { date, title, text, entryType, recipeId, id, groupId } = mealplan;
+      if (!entryType) return;
+
+      newMeal.date = date;
+      newMeal.title = title || "";
+      newMeal.text = text || "";
+      newMeal.recipeId = recipeId;
+      newMeal.entryType = entryType;
+      newMeal.existing = true;
+      newMeal.id = id;
+      newMeal.groupId = groupId;
+
+      state.value.dialog = true;
+      dialog.note = !recipeId;
+    }
+
     function resetDialog() {
       newMeal.date = "";
       newMeal.title = "";
       newMeal.text = "";
       newMeal.entryType = "dinner";
       newMeal.recipeId = undefined;
+      newMeal.existing = false;
+      newMeal.id = 0;
+      newMeal.groupId = "";
     }
 
     async function randomMeal(date: Date, type: PlanEntryType) {
@@ -346,6 +381,7 @@ export default defineComponent({
       dialog,
       newMeal,
       openDialog,
+      editMeal,
       resetDialog,
       randomMeal,