@christianriedl/media 1.0.174 → 1.0.175

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.174",
+  "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() {   
@@ -324,14 +326,26 @@
 <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="authorNameChanged"></v-combobox>
       </v-col>
@@ -348,23 +362,27 @@
         <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="addNewBook" append-icon="$plus">BOOK</v-btn>
-          <v-btn v-if="showAddBookLine" @click="cancelAddNewBook" 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>
+    <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="Kommentar" v-model="currentBook.comment" @update:modelValue="descriptionChanged">