@christianriedl/media 1.0.172 → 1.0.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.172",
+  "version": "1.0.173",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",

package/src/components/BookLine.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { IBook } from '@christianriedl/media';
+
+    const props = defineProps<{ book: IBook, add?: boolean, allbooks?: IBook[]  }>();
+    const book = props.book;
+    const emits = defineEmits<{
+        (e: 'selectbook', id: number, func: () => void): void,
+        (e: 'deletebook', id: number): void,
+        (e: 'savebook', book: IBook): void
+    }>();
+
+    const cls = props.add ? ["bg-climate"] : ["bg-office"];
+    const showDelete = ref(!props.add);
+    const showSelect = ref(!props.add);
+    const showSave = ref(false);
+    const selected = ref<IBook | string | undefined>();
+
+    async function titleChanged(arg: IBook | string) {
+        if (typeof arg == 'string') {
+            book.id = 0;
+            book.title = arg as string;
+        }
+        else {
+            const b = arg as IBook;
+            book.id = 0;
+            book.title = b.title;
+            book.year = b.year;
+        }
+        showSave.value = true;
+    }
+
+    function onDelete () {
+        if (!props.add)
+            emits("deletebook", book.id);
+    }
+    function onSelect() {
+        if (!props.add)
+            emits("selectbook", book.id, fieldChanged);
+    }
+    function onSave() {
+        emits("savebook", book);
+        showSave.value = false;
+    }
+    function fieldChanged () {
+        showSave.value = true;
+    }
+    function ratingChanged (value: string | number) {   // modelValue not working
+        book.rating = Number(value);
+        showSave.value = true;
+    }
+</script>
+
+<template>
+    <v-row dense align="center" :class="cls" @click="onSelect" >
+        <v-col v-if="props.add" cols="6" >
+            <v-combobox v-model="selected" :items="props.allbooks" item-value="id" item-title="title" hide-details density="compact" single-line @update:modelValue="titleChanged"></v-combobox>
+        </v-col>
+        <v-col v-else cols="6" >
+          <v-text-field v-model="book.title" hide-details density="compact" @update:modelValue="fieldChanged"></v-text-field>
+        </v-col>
+        <v-col cols="2" >
+          <v-text-field v-model="book.year" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
+        </v-col>
+        <v-col cols="2" >
+          <v-rating hover clearable :length="5" :size="32" :model-value="book.rating" active-color="primary" @update:modelValue="ratingChanged" />
+      </v-col>
+      <v-col cols="2">
+         <v-btn v-if="showDelete" icon="$delete" @click="onDelete"></v-btn>
+         <v-btn v-if="showSave" icon="$save" @click="onSave"></v-btn>
+      </v-col>
+    </v-row>
+</template>

package/src/views/BooksPage.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, onMounted, onUnmounted, computed, StyleValue } from 'vue';
+    import { IAppState, appStateSymbol, getOpenAISymbol, IOpenAIService, ICompleteData } from '@christianriedl/utils';
+    import { BooksService, getBooksSymbol, IAuthorShort, IAuthor, IBook } from '@christianriedl/media';
+    import BookLine from '../components/BookLine.vue';
+
+		const appState = inject(appStateSymbol)!;
+    const getBooksService = inject(getBooksSymbol)!;
+    const booksService = getBooksService() as BooksService;
+    const getOpenAI = inject(getOpenAISymbol)!;
+    const openAI = getOpenAI();
+    const authors = reactive<IAuthorShort[]>([]);
+    const selected = ref<IAuthorShort | string | undefined>();
+    const author = reactive<IAuthor>({ id: 0, surName: "", givenName: "", yearOfBirth: 0, books: [] });
+    const currentBook = ref<IBook>({ id: 0, authorId: 0, title: ""});
+    let   newBook:  IBook;
+    const allBooks = ref<IBook[]>([]);
+    const lastAllBooksId = ref(0);
+    const mustAddAuthor = ref(false);
+    const mustUpdateAuthor = ref(false);
+    const showAddBookLine = ref(false);
+    const showCurrentBook = ref(false);
+    let   setBookChanged: () => void;
+
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + "px", overflowY: "auto" } });
+    start();
+
+    async function start() {   
+        const authorsShort = await booksService.getAuthorsShort();
+        if (authorsShort) {
+            authors.splice(0, authors.length, ...authorsShort);
+        }
+    }
+    async function addAuthor() {
+        const id = await booksService.addAuthor(author);
+        if (id > 0) {
+            author.id = id;
+            mustAddAuthor.value = false;
+        }
+    }
+    async function updateAuthor() {
+        const rc = await booksService.updateAuthor(author);
+        if (rc)
+            mustUpdateAuthor.value = false;
+    }
+    async function deleteAuthor() {
+        const rc = await booksService.deleteAuthor(author.id);
+        if (rc) {
+            mustUpdateAuthor.value = false;
+            initAuthor ("");
+        }
+    }
+    function initAuthor(surName: string) {
+        author.id = 0;
+        author.surName = surName;
+        author.givenName = "";
+        author.yearOfBirth = 0;
+        author.yearOfDeath = undefined;
+        author.country = undefined;
+        author.books = [];
+    }
+    async function getAuthor (id: number, withBooks: boolean) : Promise<boolean> {
+          const authors = await booksService.getAuthors(undefined, undefined, withBooks, id);
+          if (authors && authors.length > 0) {
+              const a = authors[0];
+              author.id = a.id;
+              author.surName = a.surName;
+              author.givenName = a.givenName;
+              author.yearOfBirth = a.yearOfBirth;
+              author.yearOfDeath = a.yearOfDeath;
+              author.country = a.country;
+              author.books = a.books ? a.books : [];
+              return true;
+          }
+          else {
+              initAuthor ("");
+              return false;
+          }
+    }
+    async function nameChanged(arg: IAuthorShort | string) {
+        showCurrentBook.value = false;
+        currentBook.value = { id: 0, authorId: 0, title: ""};
+        mustAddAuthor.value = typeof arg == 'string';
+        if (!mustAddAuthor.value) {
+            const authorShort = arg as IAuthorShort;
+            const rc = await getAuthor (authorShort.id, true);
+        }
+        else {
+            initAuthor (arg as string);
+            mustUpdateAuthor.value = false;
+        }
+    }
+    function fieldChanged() {
+        if (!mustAddAuthor.value) {
+            mustUpdateAuthor.value = true;
+        }
+    }
+    async function givenNameFocused(focus: boolean) {
+        if (!focus && mustAddAuthor.value) {
+          await getAuthorDataFromAI(author.surName, author.givenName);
+        }
+    }
+    async function addBook() {
+        if (lastAllBooksId.value != author.id) {
+            allBooks.value = await getAuthorBooksFromAI (author.surName, author.givenName, author.id);
+            lastAllBooksId.value = author.id;
+        }
+        newBook = reactive<IBook>({ id: 0, authorId: author.id, title: "", rating: 0 });
+        showAddBookLine.value = true;
+    }
+    function cancelAddBook() {
+        showAddBookLine.value = false;
+    }
+    async function selectBook(id: number, func: () => void) {
+        if (currentBook.value.id == id) {
+            return;
+        }
+        setBookChanged = func;
+        if (author.books) {
+            currentBook.value = author.books.find (x => x.id == id) as IBook;
+            if (currentBook.value && !currentBook.value.description && !currentBook.value.comment) {
+                const books = await booksService.getBooks (author.id, currentBook.value.id);
+                if (books && books.length > 0) {
+                    currentBook.value.description = books[0].description;
+                    currentBook.value.comment = books[0].comment;
+                }
+                showCurrentBook.value = true;
+                if (!currentBook.value.description) {
+                    currentBook.value.description ="WAITING..."
+                    currentBook.value.description = await getBookDescriptionFromAI (author.surName, author.givenName, currentBook.value.title);
+                    if (currentBook.value.description && setBookChanged)
+                        setBookChanged();
+                }
+
+            }
+        }
+    }
+    function descriptionChanged () {
+        if (setBookChanged)
+            setBookChanged();
+
+    }
+    async function deleteBook(id: number) {
+        setBookChanged = () => {};
+        const rc = await booksService.deleteBook (id);
+        if (rc && author.books) {
+          const idx = author.books.findIndex ((x) => x.id == id);
+          if (idx >= 0)
+              author.books.splice (idx, 1);
+        }
+    }
+    async function saveBook(book: IBook) {
+        if (showAddBookLine.value) {
+            const id = await booksService.addBook (book);
+            if (id > 0 && author.books) {
+                book.id = id;
+                author.books.splice (0, 0, book);
+                showAddBookLine.value = false;
+            }
+        }
+        else {
+            const rc = await booksService.updateBook (book);
+        }
+    }
+    async function getAuthorDataFromAI(surName: string, givenName: string) {
+        const schema =
+        {
+          "name": "author_data",
+          "schema": {
+            "$schema": "http://json-schema.oeg/draft-07/schema#",
+            "additionalProperties": false,
+            "properties": {
+              "geburtstag": {
+                "type": "string"
+              },
+              "sterbetag": {
+                "type": ["string", "null"]
+              },
+              "geburtsland": {
+                "type": ["string", "null"]
+              },
+            },
+            "required": ["geburtstag", "sterbetag", "geburtsland"],
+            "type": "object"
+          },
+          "strict": true
+        }
+        const prompt = `Geburtstag, Sterbetag, Geburtsland von ${givenName} ${surName} ?`;
+        const result = await openAI.completeJson(prompt, schema) as any;
+        if (result) {
+            author.yearOfBirth = getYear(result.geburtstag);
+            author.yearOfDeath = result.sterbetag ? getYear(result.sterbetag) : undefined;
+            author.country = result.geburtsland;
+        }
+        else {
+          alert("No AI result for : " + prompt);  
+        }
+    }
+    function getYear(dt: string): number {
+        if (dt) {
+            const arr = dt.split(' ');
+            if (arr.length == 3)
+                return Number(arr[2]);
+        }
+        return 0;
+    }
+    async function getAuthorBooksFromAI(surName: string, givenName: string,  authorId: number) : Promise  <IBook[]> {
+        const schema = 
+        {
+          "name": "books",
+          "schema": {
+              "$schema": "http://json-schema.oeg/draft-07/schema#",
+              "additionalProperties": false,
+              "properties": {
+                  "werke": {
+                    "items": {
+                      "additionalProperties": false,
+                      "properties": {
+                        "werk": {
+                          "type": "string"
+                        },
+                        "erscheinungsjahr": {
+                          "type": "number"
+                        }
+                      },
+                      "required": ["werk", "erscheinungsjahr"],
+                      "type": "object"
+                    },
+                    "type": "array",
+                  }
+              },
+              "required": ["werke"],
+              "type": "object"
+          },
+          "strict": true
+        }
+        const prompt = `Alle Werke mit Erscheinungsjahr von ${givenName} ${surName}`;
+        const result = await openAI.completeJson(prompt, schema) as any;
+        if (result && result.werke) {
+            const books: IBook[] = [];
+            for (let i = 0; i < result.werke.length; i++) {
+                books.push ({ id: i, authorId: authorId, title: result.werke[i].werk, year : result.werke[i].erscheinungsjahr});
+            }
+            return books;
+        }
+        else {
+          alert("No AI result for : " + prompt);
+          return [];
+        }
+    }
+    async function getBookDescriptionFromAI(surName: string, givenName: string,  title: string, prefix?: string) : Promise <string> {
+        const prompt = `Eine ${prefix} Inhaltsangabe von dem Buch "${title}" von ${givenName} ${surName}`;
+        const result = await openAI.complete(prompt);
+        if (result && result.choices) {
+            return result.choices[0];
+        }
+        else {
+          alert("No AI result for : " + prompt);
+          return "";
+        }
+    }
+</script>
+
+<template>
+  <v-container fluid class="bg-office" :style="heightStyle">
+      <v-defaults-provider :defaults="{'VBtn':{'size':'large','variant':'flat','class':'bg-office'}}">
+    <v-row dense align="center">
+      <v-col cols="2">Name</v-col>
+      <v-col cols="2">Vorname</v-col>
+      <v-col cols="2">Von</v-col>
+      <v-col cols="2">Bis</v-col>
+      <v-col cols="2">Land</v-col>
+    </v-row>
+    <v-row dense align="center">
+      <v-col cols="2">
+        <v-combobox v-model="selected" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="nameChanged"></v-combobox>
+      </v-col>
+      <v-col cols="2">
+        <v-text-field v-model="author.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
+      </v-col>
+      <v-col cols="2">
+        <v-text-field v-model="author.yearOfBirth" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
+      </v-col>
+      <v-col cols="2">
+        <v-text-field v-model="author.yearOfDeath" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
+      </v-col>
+      <v-col cols="2">
+        <v-text-field v-model="author.country" hide-details density="compact" @update:modelValue="fieldChanged"></v-text-field>
+      </v-col>
+      <v-col cols="2">
+        <v-btn v-if="mustAddAuthor" @click="addAuthor" append-icon="$plus">AUTHOR</v-btn>
+        <v-btn v-if="mustUpdateAuthor" @click="updateAuthor" icon="$save"></v-btn>
+        <v-btn v-if="author.id > 0" @click="deleteAuthor" icon="$delete"></v-btn>
+      </v-col>
+    </v-row>
+    <v-divider></v-divider>
+    <v-row dense align="center">
+        <v-col cols="6">TITEL</v-col>
+        <v-col cols="2">JAHR</v-col>
+        <v-col cols="2">RATING</v-col>
+        <v-col v-if="author.id" cols="2">
+          <v-btn v-if="!showAddBookLine" @click="addBook" append-icon="$plus">BOOK</v-btn>
+          <v-btn v-if="showAddBookLine" @click="cancelAddBook" icon="$cancel"></v-btn>
+        </v-col>
+    </v-row>
+    <book-line v-if="showAddBookLine" :book="newBook" :add="true" :allbooks="allBooks" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
+    <book-line v-for="book in author.books" :key="book.id" :book="book" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
+    <v-textarea v-if="showCurrentBook" clearable auto-grow variant="outlined" label="Description" v-model="currentBook.description" @update:modelValue="descriptionChanged">
+    </v-textarea>
+    <v-textarea v-if="showCurrentBook" clearable auto-grow variant="outlined" label="Comment" v-model="currentBook.comment" @update:modelValue="descriptionChanged">
+    </v-textarea>
+    </v-defaults-provider>
+  </v-container>
+</template>
+