usable books page

vue3/src/components/display/BookEntryCard.vue

@@ -0,0 +1,58 @@
+<template>
+    <v-card :loading="loading">
+        <v-card-title>{{ props.recipeOverview.name }}</v-card-title>
+        <recipe-image height="25vh" :recipe="props.recipeOverview"></recipe-image>
+        <v-card-subtitle>{{ props.recipeOverview.description }}</v-card-subtitle>
+        <v-card-text>
+            <keywords-bar :keywords="props.recipeOverview.keywords"></keywords-bar>
+        </v-card-text>
+        <ingredients-table :ingredient-factor="1" v-model="ingredients" :show-checkbox="false"></ingredients-table>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import RecipeImage from "@/components/display/RecipeImage.vue";
+import {ApiApi, Ingredient, Recipe, RecipeOverview} from "@/openapi";
+import {onMounted, PropType, ref} from "vue";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import IngredientsTable from "@/components/display/IngredientsTable.vue";
+import {getRecipeIngredients} from "@/utils/model_utils";
+import {useI18n} from "vue-i18n";
+import KeywordsBar from "@/components/display/KeywordsBar.vue";
+
+const props = defineProps({
+    recipeOverview: {type: {} as PropType<RecipeOverview>, required: true}
+})
+
+const {t} = useI18n()
+
+const loading = ref(false)
+const recipe = ref({} as Recipe)
+const ingredients = ref([] as Ingredient[])
+
+onMounted(() => {
+    loadRecipe()
+})
+
+function loadRecipe() {
+    let api = new ApiApi()
+
+    loading.value = true
+
+    api.apiRecipeRetrieve({id: props.recipeOverview.id!}).then(r => {
+        recipe.value = r
+        ingredients.value = getRecipeIngredients(recipe.value, t,{showStepHeaders: true})
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    }).finally(() => {
+        loading.value = false
+    })
+}
+
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/display/IngredientsTable.vue

@@ -33,7 +33,7 @@
                 <td colspan="5" class="font-weight-bold">{{ i.note }}</td>
             </template>
             <template v-else>
-                <td style="width: 1%; text-wrap: nowrap" class="pa-0">
+                <td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
                     <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
                 </td>
                 <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)"></td>
@@ -73,6 +73,10 @@ const props = defineProps({
         type: Number,
         required: true,
     },
+    showCheckbox: {
+        type: Boolean,
+        default: true
+    },
 })
 
 const tableHeaders = computed(() => {