meal plan editor tweaks

This commit is contained in:
vabene1111
2024-10-10 21:13:58 +02:00
parent 4f425fb99a
commit eee8ed70e7
8 changed files with 40 additions and 183 deletions

View File

@@ -21,7 +21,7 @@
<div class="align-self-center">
<v-btn variant="flat" icon="">
<i class="fas fa-plus"></i>
<meal-plan-dialog></meal-plan-dialog>
<model-edit-dialog model="MealPlan"></model-edit-dialog>
</v-btn>
</div>
</div>
@@ -40,7 +40,7 @@
<v-list-item-subtitle>
{{ p.mealType.name }}
</v-list-item-subtitle>
<meal-plan-dialog :meal-plan="p"></meal-plan-dialog>
<model-edit-dialog model="MealPlan" :item="p"></model-edit-dialog>
</v-list-item>
</v-list>
@@ -55,14 +55,13 @@
<script lang="ts" setup>
import {computed, onMounted, PropType, ref, toRefs} from 'vue'
import RecipeCard from "@/components/display/RecipeCard.vue";
import {computed, onMounted, ref} from 'vue'
import {useDisplay} from "vuetify";
import {MealPlan, Recipe, RecipeOverview} from "@/openapi";
import {MealPlan} from "@/openapi";
import {useMealPlanStore} from "@/stores/MealPlanStore";
import {DateTime} from "luxon";
import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
import {homePageCols} from "@/utils/breakpoint_utils";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
const loading = ref(false)

View File

@@ -17,9 +17,8 @@
</span>
</div>
</div>
<meal-plan-dialog :meal-plan="mealPlan"></meal-plan-dialog>
<model-edit-dialog model="MealPlan" :item="mealPlan" @delete="(args: MealPlan) => emit('delete', args)"></model-edit-dialog>
</v-card-text>
</v-card>
</template>
@@ -28,12 +27,16 @@
import {computed, PropType} from "vue";
import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
import RecipeImage from "@/components/display/RecipeImage.vue";
import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import {MealPlan} from "@/openapi";
const emit = defineEmits({
onDragStart: (value: IMealPlanNormalizedCalendarItem, event: DragEvent) => {
return true
},
delete: (value: MealPlan) => {
return true
}
})
let props = defineProps({

View File

@@ -2,22 +2,25 @@
<v-row class="h-100">
<v-col>
<!-- TODO add hint about CTRL key while drag/drop -->
<v-btn>
<model-edit-dialog model="MealPlan"></model-edit-dialog>
</v-btn>
<CalendarView
:items="planItems"
class="theme-default"
:item-content-height="calendarItemHeight"
:enable-drag-drop="true"
@dropOnDate="dropCalendarItemOnDate">
@dropOnDate="dropCalendarItemOnDate"
@click-date="">
<template #header="{ headerProps }">
<CalendarViewHeader :header-props="headerProps"/>
</template>
<template #item="{ value, weekStartDate, top }">
<meal-plan-calendar-item :item-height="calendarItemHeight" :value="value" :item-top="top" @onDragStart="currentlyDraggedMealplan = value" :detailed-items="lgAndUp"></meal-plan-calendar-item>
<meal-plan-calendar-item
:item-height="calendarItemHeight"
:value="value"
:item-top="top"
@onDragStart="currentlyDraggedMealplan = value"
@delete="(arg: MealPlan) => {useMealPlanStore().plans.delete(arg.id)}"
:detailed-items="lgAndUp"
></meal-plan-calendar-item>
</template>
</CalendarView>
</v-col>
@@ -37,8 +40,8 @@ import {computed, onMounted, ref} from "vue";
import {DateTime} from "luxon";
import {useDisplay} from "vuetify";
import {useMealPlanStore} from "@/stores/MealPlanStore";
import MealPlanEditor from "@/components/model_editors/MealPlanEditor.vue";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import {MealPlan} from "@/openapi";
const {lgAndUp} = useDisplay()