@christianriedl/media 1.0.173 → 1.0.175

package/package.json

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

package/src/components/BookLine.vue

@@ -2,7 +2,7 @@
     import { ref } from 'vue';
     import { IBook } from '@christianriedl/media';
 
-    const props = defineProps<{ book: IBook, add?: boolean, allbooks?: IBook[]  }>();
+    const props = defineProps<{ book: IBook, add?: boolean, readonly?: boolean, ismobile?: boolean, allbooks?: IBook[]  }>();
     const book = props.book;
     const emits = defineEmits<{
         (e: 'selectbook', id: number, func: () => void): void,
@@ -52,7 +52,15 @@
 </script>
 
 <template>
-    <v-row dense align="center" :class="cls" @click="onSelect" >
+    <v-row v-if="props.ismobile" dense align="center" :class="cls" @click="onSelect" >
+        <v-col cols="9" >
+          <v-text-field v-model="book.title" hide-details density="compact" ></v-text-field>
+        </v-col>
+        <v-col cols="3" >
+          <v-text-field v-model="book.year" hide-details density="compact" ></v-text-field>
+        </v-col>
+    </v-row>
+    <v-row v-else 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>
@@ -66,8 +74,8 @@
           <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-btn v-if="showDelete" icon="$delete" :disabled="props.readonly" @click="onDelete"></v-btn>
+         <v-btn v-if="showSave" icon="$save" :disabled="props.readonly" @click="onSave"></v-btn>
       </v-col>
     </v-row>
 </template>

package/src/views/BooksPage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
     import { inject, ref, reactive, onMounted, onUnmounted, computed, StyleValue } from 'vue';
-    import { IAppState, appStateSymbol, getOpenAISymbol, IOpenAIService, ICompleteData } from '@christianriedl/utils';
+    import { IAppState, appStateSymbol, getOpenAISymbol, IOpenAIService, ICompleteData, EScope, EDevice } from '@christianriedl/utils';
     import { BooksService, getBooksSymbol, IAuthorShort, IAuthor, IBook } from '@christianriedl/media';
     import BookLine from '../components/BookLine.vue';
 
-		const appState = inject(appStateSymbol)!;
+    const appState = inject(appStateSymbol)!;
     const getBooksService = inject(getBooksSymbol)!;
     const booksService = getBooksService() as BooksService;
     const getOpenAI = inject(getOpenAISymbol)!;
@@ -21,8 +21,10 @@
     const showAddBookLine = ref(false);
     const showCurrentBook = ref(false);
     let   setBookChanged: () => void;
-
+    let   readonly = !(appState.scopes & EScope.Admin);
+    let   isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + "px", overflowY: "auto" } });
+
     start();
 
     async function start() {   
@@ -32,23 +34,35 @@
         }
     }
     async function addAuthor() {
+        if (!checkAuthor(author))
+            return;
         const id = await booksService.addAuthor(author);
         if (id > 0) {
             author.id = id;
             mustAddAuthor.value = false;
         }
+        else 
+            alert (`AddAuthor - error ${id}`);
     }
     async function updateAuthor() {
+        if (!checkAuthor(author))
+            return;
         const rc = await booksService.updateAuthor(author);
         if (rc)
             mustUpdateAuthor.value = false;
+        else 
+            alert ('UpdateAuthor - error');
     }
     async function deleteAuthor() {
+        if (!window.confirm(`Willst du ${author.surName} wirklich l�schen ?`))
+            return;
         const rc = await booksService.deleteAuthor(author.id);
         if (rc) {
             mustUpdateAuthor.value = false;
             initAuthor ("");
         }
+        else 
+            alert (`DeleteAuthor ${author.id} - error`);
     }
     function initAuthor(surName: string) {
         author.id = 0;
@@ -59,7 +73,7 @@
         author.country = undefined;
         author.books = [];
     }
-    async function getAuthor (id: number, withBooks: boolean) : Promise<boolean> {
+    async function getCurrentAuthor (id: number, withBooks: boolean) : Promise<boolean> {
           const authors = await booksService.getAuthors(undefined, undefined, withBooks, id);
           if (authors && authors.length > 0) {
               const a = authors[0];
@@ -77,13 +91,13 @@
               return false;
           }
     }
-    async function nameChanged(arg: IAuthorShort | string) {
+    async function authorNameChanged(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);
+            const rc = await getCurrentAuthor (authorShort.id, true);
         }
         else {
             initAuthor (arg as string);
@@ -100,7 +114,7 @@
           await getAuthorDataFromAI(author.surName, author.givenName);
         }
     }
-    async function addBook() {
+    async function addNewBook() {
         if (lastAllBooksId.value != author.id) {
             allBooks.value = await getAuthorBooksFromAI (author.surName, author.givenName, author.id);
             lastAllBooksId.value = author.id;
@@ -108,7 +122,7 @@
         newBook = reactive<IBook>({ id: 0, authorId: author.id, title: "", rating: 0 });
         showAddBookLine.value = true;
     }
-    function cancelAddBook() {
+    function cancelAddNewBook() {
         showAddBookLine.value = false;
     }
     async function selectBook(id: number, func: () => void) {
@@ -141,8 +155,12 @@
 
     }
     async function deleteBook(id: number) {
+        if (!window.confirm(`Willst du das Buch wirklich l�schen ?`))
+            return;
         setBookChanged = () => {};
         const rc = await booksService.deleteBook (id);
+        if (!rc) 
+            alert (`DeleteBook ${id}- error`);
         if (rc && author.books) {
           const idx = author.books.findIndex ((x) => x.id == id);
           if (idx >= 0)
@@ -150,8 +168,12 @@
         }
     }
     async function saveBook(book: IBook) {
+        if (!checkBook(book))
+            return;
         if (showAddBookLine.value) {
             const id = await booksService.addBook (book);
+            if (id < 0) 
+                alert (`AddBook - error ${id}`);
             if (id > 0 && author.books) {
                 book.id = id;
                 author.books.splice (0, 0, book);
@@ -160,7 +182,47 @@
         }
         else {
             const rc = await booksService.updateBook (book);
+            if (!rc)
+                alert ('UpdateBook - error');
+        }
+    }
+    function checkAuthor (author: IAuthor): boolean {
+        if (!author.surName || !author.givenName) {
+            alert("Vor oder Nachname fehlt !");
+            return false;
         }
+        if (author.surName.length >= 64 || author.givenName.length >= 64) {
+            alert("Vor oder Nachname zu lang (>64) !");
+            return false;
+        }
+        if (author.country && author.country.length >= 64) {
+            alert("Geburtsland zu lang (>64) !");
+            return false;
+        }
+        return true;
+    }
+    function checkBook (book: IBook): boolean {
+        if (!book.title) {
+            alert("Titel fehlt !");
+            return false;
+        }
+        if (book.title.length >= 256) {
+            alert("Titel zu lang (>256) !");
+            return false;
+        }
+        if (!book.authorId) {
+            alert("Autor fehlt !");
+            return false;
+        }
+        if (book.description && book.description.length >= 4000) {
+            alert("Beschreibung zu lang (>4000) !");
+            return false;
+        }
+        if (book.comment && book.comment.length >= 1024) {
+            alert("Kommentar zu lang (>1024) !");
+            return false;
+        }
+        return true;
     }
     async function getAuthorDataFromAI(surName: string, givenName: string) {
         const schema =
@@ -264,16 +326,28 @@
 <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-row v-if="isMobile" dense align="center">
+      <v-col cols="6">Name</v-col>
+      <v-col cols="6">Vorname</v-col>
+    </v-row>
+    <v-row v-else 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-row v-if="isMobile" dense align="center">
+      <v-col cols="6">
+        <v-combobox v-model="selected" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
+      </v-col>
+      <v-col cols="6">
+        <v-text-field v-model="author.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row v-else 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-combobox v-model="selected" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></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>
@@ -288,26 +362,30 @@
         <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-btn v-if="mustAddAuthor" @click="addAuthor" :disabled="readonly" append-icon="$plus">AUTHOR</v-btn>
+        <v-btn v-if="mustUpdateAuthor" @click="updateAuthor" :disabled="readonly" icon="$save"></v-btn>
+        <v-btn v-if="author.id > 0" @click="deleteAuthor" :disabled="readonly" 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-row v-if="isMobile" dense align="center">
+        <v-col cols="7">TITEL</v-col>
         <v-col cols="2">JAHR</v-col>
-        <v-col cols="2">RATING</v-col>
+        <v-col cols="3">RATING</v-col>
+    </v-row>
+    <v-row v-else dense align="center">
+        <v-col cols="9">TITEL</v-col>
+        <v-col cols="3">JAHR</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-btn v-if="!showAddBookLine" @click="addNewBook" :disabled="readonly" append-icon="$plus">BOOK</v-btn>
+          <v-btn v-if="showAddBookLine" @click="cancelAddNewBook" :disabled="readonly" 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">
+    <book-line v-if="showAddBookLine" :book="newBook" :add="true" :allbooks="allBooks" :readonly="readonly" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
+    <book-line v-for="book in author.books" :key="book.id" :book="book" :readonly="readonly" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
+    <v-textarea v-if="showCurrentBook" class="pt-2"clearable auto-grow variant="outlined" label="Beschreibung" 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-if="showCurrentBook" clearable auto-grow variant="outlined" label="Kommentar" v-model="currentBook.comment" @update:modelValue="descriptionChanged">
     </v-textarea>
     </v-defaults-provider>
   </v-container>