feat: Put calendar directly in the date picker dialogs (#6110)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Michael Genson <genson.michael@gmail.com>

frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue

@@ -45,31 +45,15 @@
     @confirm="addRecipeToPlan()"
   >
     <v-card-text>
-      <v-menu
+      <v-date-picker
-        v-model="pickerMenu"
+        v-model="newMealdate"
-        :close-on-content-click="false"
+        class="mx-auto mb-3"
-        transition="scale-transition"
+        hide-header
-        offset-y
+        show-adjacent-months
-        max-width="290px"
+        color="primary"
-        min-width="auto"
+        :first-day-of-week="firstDayOfWeek"
-      >
+        :local="$i18n.locale"
-        <template #activator="{ props: activatorProps }">
+      />
-          <v-text-field
-            :model-value="$d(newMealdate)"
-            :label="$t('general.date')"
-            :prepend-icon="$globals.icons.calendar"
-            v-bind="activatorProps"
-            readonly
-          />
-        </template>
-        <v-date-picker
-          v-model="newMealdate"
-          hide-header
-          :first-day-of-week="firstDayOfWeek"
-          :local="$i18n.locale"
-          @update:model-value="pickerMenu = false"
-        />
-      </v-menu>
       <v-select
         v-model="newMealType"
         :return-object="false"
@@ -207,7 +191,6 @@ const loading = ref(false);
 const menuItems = ref<ContextMenuItem[]>([]);
 const newMealdate = ref(new Date());
 const newMealType = ref<PlanEntryType>("dinner");
-const pickerMenu = ref(false);
 
 const newMealdateString = computed(() => {
   // Format the date to YYYY-MM-DD in the same timezone as newMealdate

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

@@ -22,34 +22,17 @@
       "
       @close="resetDialog()"
     >
-      <v-card-text>
+      <v-card-text class="pb-2">
-        <v-menu
+        <v-date-picker
-          v-model="state.pickerMenu!"
+          v-model="newMeal.date"
-          :close-on-content-click="false"
+          class="mx-auto"
-          transition="scale-transition"
+          hide-header
-          offset-y
+          show-adjacent-months
-          max-width="290px"
+          color="primary"
-          min-width="auto"
+          :first-day-of-week="firstDayOfWeek"
-        >
+          :local="$i18n.locale"
-          <template #activator="{ props }">
+        />
-            <v-text-field
+        <v-card-text class="pb-0">
-              :model-value="$d(newMeal.date)"
-              :label="$t('general.date')"
-              persistent-hint
-              :prepend-icon="$globals.icons.calendar"
-              v-bind="props"
-              readonly
-            />
-          </template>
-          <v-date-picker
-            v-model="newMeal.date"
-            hide-header
-            :first-day-of-week="firstDayOfWeek"
-            :local="$i18n.locale"
-            @update:model-value="state.pickerMenu = false"
-          />
-        </v-menu>
-        <v-card-text>
           <v-select
             v-model="newMeal.entryType"
             :return-object="false"
@@ -76,8 +59,8 @@
             <v-textarea v-model="newMeal.text" rows="2" :label="$t('meal-plan.meal-note')" />
           </template>
         </v-card-text>
-        <v-card-actions class="my-0 py-0">
+        <v-card-actions class="py-0 px-4">
-          <v-switch v-model="dialog.note" class="mt-n3" :label="$t('meal-plan.note-only')" />
+          <v-switch v-model="dialog.note" class="mt-n3 mb-n4" :label="$t('meal-plan.note-only')" />
         </v-card-actions>
       </v-card-text>
     </BaseDialog>
@@ -261,7 +244,6 @@ export default defineNuxtComponent({
 
     const state = ref({
       dialog: false,
-      pickerMenu: null as null | boolean,
     });
 
     const firstDayOfWeek = computed(() => {