From 09a76a2057314e623e7227a6fb1c397af4668f99 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 14 Feb 2025 16:43:18 +0100
Subject: [PATCH] books page

---
 vue/src/locales/en.json           |  1 +
 vue3/src/apps/tandoor/Tandoor.vue |  5 +-
 vue3/src/apps/tandoor/main.ts     |  2 +
 vue3/src/locales/de.json          |  1 +
 vue3/src/pages/BookViewPage.vue   | 93 +++++++++++++++++++++++++++++++
 vue3/src/pages/BooksPage.vue      | 28 ++++++++--
 6 files changed, 121 insertions(+), 9 deletions(-)
 create mode 100644 vue3/src/pages/BookViewPage.vue

diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index f2e9252d9..64b6a0262 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -480,6 +480,7 @@
 	"Imported": "Imported",
 	"Quick actions": "Quick actions",
 	"Ratings": "Ratings",
+	"Actions": "Actions",
 	"Internal": "Internal",
 	"Units": "Units",
 	"Manage_Emails": "Manage Emails",
diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 5a99c57b4..0a6fd757f 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -176,13 +176,10 @@ import {useDisplay} from "vuetify"
 import VSnackbarQueued from "@/components/display/VSnackbarQueued.vue";
 import MessageListDialog from "@/components/dialogs/MessageListDialog.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
-import {TAutomation, TCookLog, TFood, TKeyword, TPropertyType, TSupermarket, TSupermarketCategory, TUnit, TUnitConversion, TUserFile, TViewLog} from "@/types/Models";
 import NavigationDrawerContextMenu from "@/components/display/NavigationDrawerContextMenu.vue";
 import {useDjangoUrls} from "@/composables/useDjangoUrls";
 import {onMounted, ref} from "vue";
-import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
-import {ApiApi, Space} from "@/openapi";
-import {isSpaceAboveLimit, isSpaceAtLimit} from "@/utils/logic_utils";
+import {isSpaceAboveLimit} from "@/utils/logic_utils";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index dd57d2aeb..07c2780c0 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -29,6 +29,7 @@ import ModelEditPage from "@/pages/ModelEditPage.vue";
 import RecipeImportPage from "@/pages/RecipeImportPage.vue";
 import IngredientEditorPage from "@/pages/IngredientEditorPage.vue";
 import BooksPage from "@/pages/BooksPage.vue";
+import BookViewPage from "@/pages/BookViewPage.vue";
 
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
@@ -51,6 +52,7 @@ const routes = [
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
     {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},
     {path: '/books', component: BooksPage, name: 'BooksPage'},
+    {path: '/book/:bookId', component: BookViewPage, name: 'BookViewPage', props: true},
     {path: '/recipe/import', component: RecipeImportPage, name: 'RecipeImportPage'},
 
     {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
index 518e027fc..354666c32 100644
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -20,6 +20,7 @@
   "Added_on": "Hinzugefügt am",
   "Admin": "Admin",
   "Advanced": "Erweitert",
+  "Advanced Search Settings": "Erweiterte Sucheinstellungen",
   "Alignment": "Ausrichtung",
   "Amount": "Menge",
   "App": "App",
diff --git a/vue3/src/pages/BookViewPage.vue b/vue3/src/pages/BookViewPage.vue
new file mode 100644
index 000000000..8fc76ec51
--- /dev/null
+++ b/vue3/src/pages/BookViewPage.vue
@@ -0,0 +1,93 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col>
+                <v-card>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-btn variant="flat" @click="router.go(-1)" prepend-icon="fa-solid fa-arrow-left">{{ $t('Back') }}</v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col>
+                <h2>{{ book.name }}</h2>
+                <p class="text-disabled">{{ book.description }}</p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12" md="6">
+                <v-data-iterator :items="entries" :items-per-page="recipesPerPage" :page="page" @update:page="loadRecipe">
+                    <template #default="{items}">
+                        <v-card v-for="i in items">
+                            <v-card-title>{{i.raw.recipeContent.name}}</v-card-title>
+                            <v-card-subtitle>{{i.raw.recipeContent.desciption}}</v-card-subtitle>
+
+                        </v-card>
+                    </template>
+                </v-data-iterator>
+                <v-pagination v-model="page" :length="totalItems / recipesPerPage"></v-pagination>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+
+
+import {onMounted, ref} from "vue";
+import {ApiApi, RecipeBook, RecipeBookEntry} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {VDataTableUpdateOptions} from "@/vuetify";
+import {useRouter} from "vue-router";
+
+const props = defineProps({
+    bookId: {type: String, required: true},
+})
+
+const router = useRouter()
+
+const loading = ref(false)
+const page = ref(1)
+const recipesPerPage = ref(1)
+const totalItems = ref(0)
+
+const book = ref({} as RecipeBook)
+const entries = ref([] as RecipeBookEntry[])
+
+onMounted(() => {
+    loadBook()
+    loadEntries({page: 1})
+})
+
+/**
+ * load the given book
+ */
+function loadBook(){
+    const api = new ApiApi()
+    loading.value = true
+
+    api.apiRecipeBookRetrieve({id: props.bookId}).then(r => {
+        book.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    }).finally(() => {
+        loading.value = false
+    })
+}
+
+function loadEntries(options: VDataTableUpdateOptions){
+    const api = new ApiApi()
+
+    api.apiRecipeBookEntryList({book: props.bookId, page: options.page}).then(r => {
+        entries.value = r.results
+        totalItems.value = r.count
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped></style>
diff --git a/vue3/src/pages/BooksPage.vue b/vue3/src/pages/BooksPage.vue
index 1d5a0d044..58d447cde 100644
--- a/vue3/src/pages/BooksPage.vue
+++ b/vue3/src/pages/BooksPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-container>
+    <v-container >
         <v-row>
             <v-col cols="12" md="6" offset-md="3">
                 <v-text-field>
@@ -29,7 +29,7 @@
                             <model-edit-dialog model="RecipeBook" :item="books[i]"
                                                @delete="(arg: RecipeBook) => { books.splice(books.findIndex((value: RecipeBook) => value.id == arg.id!),1)}"></model-edit-dialog>
                         </v-btn>
-                        <v-btn>
+                        <v-btn :to="{name: 'BookViewPage', params: {bookId: b.id}}">
                             {{ $t('View') }}
                         </v-btn>
                     </v-card-actions>
@@ -43,21 +43,39 @@
 
 
 import {onMounted, ref} from "vue";
-import {ApiApi, RecipeBook} from "@/openapi";
+import {ApiApi, RecipeBook, RecipeBookEntry} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 
+const loading = ref(false)
+
+const viewingBook = ref<null | RecipeBook>(null)
+const viewingBookEntries = ref([] as RecipeBookEntry[])
+
 const books = ref([] as RecipeBook[])
 
 onMounted(() => {
-    const api = new ApiApi()
+    loadBooks()
+})
 
+function loadBooks() {
+    const api = new ApiApi()
+    loading.value = true
     api.apiRecipeBookList().then(r => {
         books.value = r.results
     }).catch(err => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR)
+    }).finally(() => {
+        loading.value = false
     })
-})
+}
+
+function loadBookEntries(recipeBook : RecipeBook){
+    const api = new ApiApi()
+    loading.value = true
+    api.apiRecipeBookEntryList({})
+}
+
 </script>
 
 <style scoped></style>