mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 07:08:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

various improvements for shopping line item dialog

Browse Source
This commit is contained in:
vabene1111
2024-10-23 18:23:48 +02:00
parent 4692526e48
commit 77748a951b
37 changed files with 192 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
vue3/src/components/dialogs/ShoppingLineItemDialog.vue
View File

@@ -1,73 +1,85 @@
<template>
<v-dialog v-model="showDialog" max-width="500px">
<v-dialog :fullscreen="mobile" v-model="showDialog" max-width="500px">
<v-card>
<v-closable-card-title :title="props.shoppingListFood.food.name" v-model="showDialog"></v-closable-card-title>
<v-card-text>
<v-card-text class="pt-0 pr-4 pl-4">
<v-label>{{ $t('Choose_Category') }}</v-label>
<ModelSelect model="SupermarketCategory"></ModelSelect>
<v-row>
<v-col>
<v-btn height="80px" color="info" block stacked>
<v-col class="pr-0">
<v-btn height="80px" color="info" density="compact" size="small" block stacked>
<i class="fa-solid fa-clock-rotate-left fa-2x mb-2"></i>
{{ $t('Postpone') }}
</v-btn>
</v-col>
<v-col>
<v-btn height="80px" color="secondary" block stacked>
<v-btn height="80px" color="secondary" density="compact" size="small" block stacked>
<i class="fa-solid fa-eye-slash fa-2x mb-2"></i>
{{ $t('Ignore_Shopping') }}
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn height="80px" color="primary" block stacked>
<v-col class="pr-0 pt-0">
<v-btn height="80px" color="primary" density="compact" size="small" block stacked>
<i class="fa-solid fa-pencil fa-2x mb-2"></i>
{{ $t('Edit_Food') }}
</v-btn>
</v-col>
<v-col>
<v-btn height="80px" color="success" block stacked>
<v-col class="pt-0">
<v-btn height="80px" color="success" density="compact" size="small" block stacked>
<i class="fa-solid fa-plus fa-2x mb-2"></i>
{{ $t('Add') }}
</v-btn>
</v-col>
</v-row>
<v-label class="mt-2">{{ $t('Entries') }}</v-label>
<v-label class="mt-3">{{ $t('Entries') }}</v-label>
<v-list density="compact">
<v-list-item variant="tonal" class="mt-1" v-for="[i, e] in props.shoppingListFood.entries" :key="e.id">
<v-list-item-title>
<b>
{{ e.amount }}
<span v-if="e.unit">{{ e.unit.name }}</span>
</b>
{{ e.food.name }}
</v-list-item-title>
<v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.recipeName !== ''">
<v-icon icon="$recipes" size="x-small"></v-icon> {{ e.recipeMealplan.servings }} {{ $t('Servings') }}
<router-link :to="{name: 'view_recipe', params: {id: e.recipeMealplan.id}}" target="_blank"><b>
{{ e.recipeMealplan.recipeName }} </b>
</router-link>
</v-list-item-subtitle>
<v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.mealplanType !== undefined">
<v-icon icon="$mealplan" size="x-small"></v-icon> {{ e.recipeMealplan.mealplanType }} {{ DateTime.fromJSDate(e.recipeMealplan.mealplanFromDate).toLocaleString(DateTime.DATE_SHORT) }}
</v-list-item-subtitle>
<v-list-item-subtitle>
<v-icon icon="fa-solid fa-user" size="x-small"></v-icon> {{ e.createdBy.displayName }} - {{ DateTime.fromJSDate(e.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
</v-list-item-subtitle>
<template v-for="[i, e] in props.shoppingListFood.entries" :key="e.id">
<v-list-item border class="mt-1" :class="{'cursor-pointer': !e.recipeMealplan}">
<v-list-item-title>
<b>
{{ e.amount }}
<span v-if="e.unit">{{ e.unit.name }}</span>
</b>
{{ e.food.name }}
</v-list-item-title>
<v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.recipeName !== ''">
{{ e.recipeMealplan.servings }} x
<router-link :to="{name: 'view_recipe', params: {id: e.recipeMealplan.id}}" target="_blank" class="text-decoration-none"><b>
{{ e.recipeMealplan.recipeName }} </b>
</router-link>
</v-list-item-subtitle>
<v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.mealplanType !== undefined">
{{ e.recipeMealplan.mealplanType }} {{ DateTime.fromJSDate(e.recipeMealplan.mealplanFromDate).toLocaleString(DateTime.DATE_SHORT) }}
</v-list-item-subtitle>
<v-list-item-subtitle>
{{ e.createdBy.displayName }} - {{ DateTime.fromJSDate(e.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
</v-list-item-subtitle>
<template #append>
<v-btn size="small" color="delete" icon="$delete" v-if="!e.recipeMealplan">
<v-icon icon="$delete"></v-icon>
</v-btn>
</template>
<!-- TODO make properly reactive or delete from the food instance in this component as well-->
<model-edit-dialog model="ShoppingListEntry" :item="e" @delete="useShoppingStore().entries.delete(e.id!);" v-if="!e.recipeMealplan"></model-edit-dialog>
</v-list-item>
</template>
<template #append>
<v-btn size="small" color="edit"> <v-icon icon="$edit"></v-icon></v-btn>
<v-btn size="small" color="delete"> <v-icon icon="$delete"></v-icon></v-btn>
</template>
</v-list-item>
</v-list>
</v-card-text>
<v-card-actions v-if="mobile">
<v-btn @click="showDialog = false">{{ $t('Close') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
@@ -79,7 +91,13 @@ import {ShoppingListEntry} from "@/openapi";
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {IShoppingList, IShoppingListFood} from "@/types/Shopping";
import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
import {VNumberInput} from "vuetify/labs/VNumberInput";
import {DateTime} from "luxon";
import {useDisplay} from "vuetify";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import {useShoppingStore} from "@/stores/ShoppingStore";
const {mobile} = useDisplay()
const showDialog = defineModel<Boolean>()
@@ -91,4 +109,5 @@ const props = defineProps({
<style scoped>
</style>