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>
This commit is contained in:
Nico Hirsch
2025-12-05 17:05:47 +01:00
committed by GitHub
parent e3e970213c
commit c115e6d83f
2 changed files with 22 additions and 57 deletions

View File

@@ -45,31 +45,15 @@
@confirm="addRecipeToPlan()"
>
<v-card-text>
<v-menu
v-model="pickerMenu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<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-date-picker
v-model="newMealdate"
class="mx-auto mb-3"
hide-header
show-adjacent-months
color="primary"
:first-day-of-week="firstDayOfWeek"
:local="$i18n.locale"
/>
<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

View File

@@ -22,34 +22,17 @@
"
@close="resetDialog()"
>
<v-card-text>
<v-menu
v-model="state.pickerMenu!"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<template #activator="{ props }">
<v-text-field
: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-card-text class="pb-2">
<v-date-picker
v-model="newMeal.date"
class="mx-auto"
hide-header
show-adjacent-months
color="primary"
:first-day-of-week="firstDayOfWeek"
:local="$i18n.locale"
/>
<v-card-text class="pb-0">
<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-switch v-model="dialog.note" class="mt-n3" :label="$t('meal-plan.note-only')" />
<v-card-actions class="py-0 px-4">
<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(() => {