@christianriedl/media 1.0.184 → 1.0.186

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/BookLine.vue +2 -2
  3. package/src/views/BooksPage.vue +106 -78
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@christianriedl/media",
3
- "version": "1.0.184",
3
+ "version": "1.0.186",
4
4
  "description": "RIC media interfaces",
5
5
 
6
6
  "main": "dist/index.js",
package/src/components/BookLine.vue CHANGED
@@ -82,8 +82,8 @@
82
82
  <v-select v-model="flags" :items="props.flags" multiple hide-details density="compact" single-line @update:modelValue="flagsChanged"></v-select>
83
83
  </v-col>
84
84
  <v-col cols="2">
85
- <v-btn v-if="showSave" icon="$save" :disabled="props.readonly" @click="onSave"></v-btn>
86
- <v-btn v-if="showDelete" icon="$delete" :disabled="props.readonly" @click="onDelete"></v-btn>
85
+ <v-btn v-if="showSave" icon="$save" :class="classObject" :disabled="props.readonly" @click="onSave"></v-btn>
86
+ <v-btn v-if="showDelete" icon="$delete" :class="classObject" :disabled="props.readonly" @click="onDelete"></v-btn>
87
87
  </v-col>
88
88
  </v-row>
89
89
  <v-divider></v-divider>
package/src/views/BooksPage.vue CHANGED
@@ -15,17 +15,18 @@
15
15
  const selectedAuthor = ref<IAuthorShort | string | undefined>();
16
16
  const currentAuthor = reactive<IAuthor>({ id: 0, surName: "", givenName: "", yearOfBirth: 0, books: [] });
17
17
  const selectedBook = ref<IBook>({ id: 0, authorId: 0, title: ""});
18
- let newBook: IBook;
19
18
  const allBooks = ref<IBook[]>([]);
20
19
  const lastAllBooksId = ref(0);
21
20
  const mustAddAuthor = ref(false);
22
21
  const mustUpdateAuthor = ref(false);
23
22
  const showAddBookLine = ref(false);
24
23
  const showSelectedBook = ref(false);
25
- let setBookChanged: () => void;
26
- let readonly = !(appState.scopes & EScope.Admin);
27
- let isMobile = appState.isMobile && (appState.device != EDevice.iPad);
24
+ const sortedByYear = ref(false);
25
+ const readonly = !(appState.scopes & EScope.Admin);
26
+ const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
28
27
  const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + "px", overflowY: "auto" } });
28
+ let newBook: IBook;
29
+ let setBookChanged: () => void;
29
30
 
30
31
  start();
31
32
 
@@ -94,6 +95,9 @@
94
95
  currentAuthor.category = a.category;
95
96
  currentAuthor.country = a.country;
96
97
  currentAuthor.books = a.books ? a.books : [];
98
+ if (sortedByYear.value) {
99
+ currentAuthor.books = sortBooks (currentAuthor.books, true);
100
+ }
97
101
  return true;
98
102
  }
99
103
  else {
@@ -348,83 +352,107 @@
348
352
  return "";
349
353
  }
350
354
  }
355
+ function sortByTitle () {
356
+ if (sortedByYear.value && currentAuthor.books) {
357
+ currentAuthor.books = sortBooks (currentAuthor.books, false);
358
+ sortedByYear.value = false;
359
+ }
360
+ }
361
+ function sortByYear () {
362
+ if (!sortedByYear.value && currentAuthor.books) {
363
+ currentAuthor.books = sortBooks (currentAuthor.books, true);
364
+ sortedByYear.value = true;
365
+ }
366
+ }
367
+ function sortBooks (books: IBook[], byYear: boolean) : IBook[] {
368
+ if (byYear)
369
+ return books.sort ((a, b) => (a.year || 0) - (b.year || 0));
370
+ else
371
+ return books.sort ((a, b) => a.title.localeCompare(b.title));
372
+ }
351
373
  </script>
352
374
 
353
375
  <template>
354
- <v-container fluid class="bg-office" :style="heightStyle">
355
- <v-defaults-provider :defaults="{'VBtn':{'size':'large','variant':'flat','class':'bg-office'}}">
356
- <v-row v-if="isMobile" dense align="center">
357
- <v-col cols="6">Name</v-col>
358
- <v-col cols="5">Vorname</v-col>
359
- <v-col cols="1">
360
- <v-btn icon="$search" @click="search"></v-btn>
361
- </v-col>
362
- </v-row>
363
- <v-row v-else dense align="center">
364
- <v-col cols="2">Name</v-col>
365
- <v-col cols="2">Vorname</v-col>
366
- <v-col cols="1">Von</v-col>
367
- <v-col cols="1">Bis</v-col>
368
- <v-col cols="2">Kategorie</v-col>
369
- <v-col cols="2">Land</v-col>
370
- <v-col cols="2">
371
- <v-btn prepend-icon="$search" @click="search">Search</v-btn>
372
- </v-col>
373
- </v-row>
374
- <v-row v-if="isMobile" dense align="center">
375
- <v-col cols="6">
376
- <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
377
- </v-col>
378
- <v-col cols="6">
379
- <v-text-field v-model="currentAuthor.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
380
- </v-col>
381
- </v-row>
382
- <v-row v-else dense align="center">
383
- <v-col cols="2">
384
- <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
385
- </v-col>
386
- <v-col cols="2">
387
- <v-text-field v-model="currentAuthor.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
388
- </v-col>
389
- <v-col cols="1">
390
- <v-text-field v-model="currentAuthor.yearOfBirth" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
391
- </v-col>
392
- <v-col cols="1">
393
- <v-text-field v-model="currentAuthor.yearOfDeath" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
394
- </v-col>
395
- <v-col cols="2">
396
- <v-select v-model="currentAuthor.category" :items="booksService.categories" hide-details density="compact" single-line @update:modelValue="fieldChanged"></v-select>
397
- </v-col>
398
- <v-col cols="2">
399
- <v-text-field v-model="currentAuthor.country" hide-details density="compact" @update:modelValue="fieldChanged"></v-text-field>
400
- </v-col>
401
- <v-col cols="2">
402
- <v-btn v-if="mustAddAuthor" @click="addAuthor" :disabled="readonly" prepend-icon="$plus">AUTHOR</v-btn>
403
- <v-btn v-if="mustUpdateAuthor" @click="updateAuthor" :disabled="readonly" icon="$save"></v-btn>
404
- <v-btn v-if="currentAuthor.id > 0" @click="deleteAuthor" :disabled="readonly" icon="$delete"></v-btn>
405
- </v-col>
406
- </v-row>
407
- <v-divider></v-divider>
408
- <v-row v-if="isMobile" dense align="center">
409
- <v-col cols="9">TITEL</v-col>
410
- <v-col cols="3">JAHR</v-col>
411
- </v-row>
412
- <v-row v-else dense align="center">
413
- <v-col cols="6">TITEL</v-col>
414
- <v-col cols="1">JAHR</v-col>
415
- <v-col cols="1">RATING</v-col>
416
- <v-col cols="2">STATUS</v-col>
417
- <v-col v-if="currentAuthor.id" cols="2">
418
- <v-btn v-if="!showAddBookLine" @click="addNewBook" :disabled="readonly" prepend-icon="$plus">BOOK</v-btn>
419
- <v-btn v-if="showAddBookLine" @click="cancelAddNewBook" :disabled="readonly" icon="$cancel"></v-btn>
420
- </v-col>
421
- </v-row>
422
- <book-line v-if="showAddBookLine" :book="newBook" :flags="booksService.flags" :add="true" :allbooks="allBooks" :readonly="readonly" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
423
- <book-line v-for="book in currentAuthor.books" :key="book.id" :book="book" :flags="booksService.flags" :readonly="readonly" :selected="selectedBook == book" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
424
- <v-textarea v-if="showSelectedBook" clearable auto-grow variant="outlined" label="Beschreibung" :disabled="isMobile" class="pt-2" v-model="selectedBook.description" @update:modelValue="descriptionChanged">
425
- </v-textarea>
426
- <v-textarea v-if="showSelectedBook" clearable auto-grow variant="outlined" label="Kommentar" :disabled="isMobile" v-model="selectedBook.comment" @update:modelValue="descriptionChanged">
427
- </v-textarea>
376
+ <v-container fluid :style="heightStyle">
377
+ <v-defaults-provider :defaults="{'VBtn':{'size':'large','variant':'flat'}}">
378
+ <v-row v-if="isMobile" dense align="center" class="bg-office" >
379
+ <v-col cols="6">Name</v-col>
380
+ <v-col cols="5">Vorname</v-col>
381
+ <v-col cols="1">
382
+ <v-btn icon="$search" class="bg-office" @click="search"></v-btn>
383
+ </v-col>
384
+ </v-row>
385
+ <v-row v-else dense align="center" class="bg-office" >
386
+ <v-col cols="2">Name</v-col>
387
+ <v-col cols="2">Vorname</v-col>
388
+ <v-col cols="1">Von</v-col>
389
+ <v-col cols="1">Bis</v-col>
390
+ <v-col cols="2">Kategorie</v-col>
391
+ <v-col cols="2">Land</v-col>
392
+ <v-col cols="2">
393
+ <v-btn prepend-icon="$search" class="bg-office" @click="search">Search</v-btn>
394
+ </v-col>
395
+ </v-row>
396
+ <v-row v-if="isMobile" dense align="center" class="bg-office" >
397
+ <v-col cols="6">
398
+ <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
399
+ </v-col>
400
+ <v-col cols="6">
401
+ <v-text-field v-model="currentAuthor.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
402
+ </v-col>
403
+ </v-row>
404
+ <v-row v-else dense align="center" class="bg-office" >
405
+ <v-col cols="2">
406
+ <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
407
+ </v-col>
408
+ <v-col cols="2">
409
+ <v-text-field v-model="currentAuthor.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
410
+ </v-col>
411
+ <v-col cols="1">
412
+ <v-text-field v-model="currentAuthor.yearOfBirth" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
413
+ </v-col>
414
+ <v-col cols="1">
415
+ <v-text-field v-model="currentAuthor.yearOfDeath" hide-details density="compact" type="number" @update:modelValue="fieldChanged"></v-text-field>
416
+ </v-col>
417
+ <v-col cols="2">
418
+ <v-select v-model="currentAuthor.category" :items="booksService.categories" hide-details density="compact" single-line @update:modelValue="fieldChanged"></v-select>
419
+ </v-col>
420
+ <v-col cols="2">
421
+ <v-text-field v-model="currentAuthor.country" hide-details density="compact" @update:modelValue="fieldChanged"></v-text-field>
422
+ </v-col>
423
+ <v-col cols="2">
424
+ <v-btn v-if="mustAddAuthor" class="bg-office" @click="addAuthor" :disabled="readonly" prepend-icon="$plus">AUTHOR</v-btn>
425
+ <v-btn v-if="mustUpdateAuthor" class="bg-office" @click="updateAuthor" :disabled="readonly" icon="$save"></v-btn>
426
+ <v-btn v-if="currentAuthor.id > 0" class="bg-office" @click="deleteAuthor" :disabled="readonly" icon="$delete"></v-btn>
427
+ </v-col>
428
+ </v-row>
429
+ <v-divider></v-divider>
430
+ <v-row v-if="isMobile" dense align="center" class="bg-office" >
431
+ <v-col cols="9">TITEL</v-col>
432
+ <v-col cols="3">JAHR</v-col>
433
+ </v-row>
434
+ <v-row v-else dense align="center" class="bg-office" >
435
+ <v-col cols="6">
436
+ <v-btn v-if="sortedByYear" class="bg-office" @click="sortByTitle" icon="$down"></v-btn>
437
+ TITEL
438
+ </v-col>
439
+ <v-col cols="1">
440
+ <v-btn v-if="!sortedByYear" class="bg-office" @click="sortByYear" icon="$down"></v-btn>
441
+ JAHR
442
+ </v-col>
443
+ <v-col cols="1">RATING</v-col>
444
+ <v-col cols="2">STATUS</v-col>
445
+ <v-col v-if="currentAuthor.id" cols="2">
446
+ <v-btn v-if="!showAddBookLine" class="bg-office" @click="addNewBook" :disabled="readonly" prepend-icon="$plus">BOOK</v-btn>
447
+ <v-btn v-if="showAddBookLine" class="bg-office" @click="cancelAddNewBook" :disabled="readonly" icon="$cancel"></v-btn>
448
+ </v-col>
449
+ </v-row>
450
+ <book-line v-if="showAddBookLine" :book="newBook" :flags="booksService.flags" :add="true" :allbooks="allBooks" :readonly="readonly" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
451
+ <book-line v-for="book in currentAuthor.books" :key="book.id" :book="book" :flags="booksService.flags" :readonly="readonly" :selected="selectedBook == book" :ismobile="isMobile" @selectbook="selectBook" @deletebook="deleteBook" @savebook="saveBook"></book-line>
452
+ <v-textarea v-if="showSelectedBook" clearable auto-grow variant="outlined" label="Beschreibung" :disabled="isMobile" class="bg-office pt-2" v-model="selectedBook.description" @update:modelValue="descriptionChanged">
453
+ </v-textarea>
454
+ <v-textarea v-if="showSelectedBook" clearable auto-grow variant="outlined" label="Kommentar" :disabled="isMobile" class="bg-office" v-model="selectedBook.comment" @update:modelValue="descriptionChanged">
455
+ </v-textarea>
428
456
  </v-defaults-provider>
429
457
  </v-container>
430
458
  </template>