@christianriedl/media 1.0.185 → 1.0.186

package/package.json

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

package/src/views/BooksPage.vue

@@ -15,17 +15,18 @@
     const selectedAuthor = ref<IAuthorShort | string | undefined>();
     const currentAuthor = reactive<IAuthor>({ id: 0, surName: "", givenName: "", yearOfBirth: 0, books: [] });
     const selectedBook = 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 showSelectedBook = ref(false);
-    let   setBookChanged: () => void;
-    let   readonly = !(appState.scopes & EScope.Admin);
-    let   isMobile = appState.isMobile && (appState.device != EDevice.iPad);
+    const sortedByYear = ref(false);
+    const readonly = !(appState.scopes & EScope.Admin);
+    const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + "px", overflowY: "auto" } });
+    let   newBook:  IBook;
+    let   setBookChanged: () => void;
 
     start();
 
@@ -94,6 +95,9 @@
               currentAuthor.category = a.category;
               currentAuthor.country = a.country;
               currentAuthor.books = a.books ? a.books : [];
+              if (sortedByYear.value) {
+                  currentAuthor.books = sortBooks (currentAuthor.books, true);
+              }
               return true;
           }
           else {
@@ -348,6 +352,24 @@
           return "";
         }
     }
+    function sortByTitle () {
+        if (sortedByYear.value && currentAuthor.books) {
+            currentAuthor.books = sortBooks (currentAuthor.books, false);
+            sortedByYear.value = false;
+        }
+    }
+    function sortByYear ()  {
+        if (!sortedByYear.value && currentAuthor.books) {
+            currentAuthor.books = sortBooks (currentAuthor.books, true);
+            sortedByYear.value = true;
+        }
+    }
+    function sortBooks (books: IBook[], byYear: boolean) : IBook[] {
+        if (byYear)
+            return books.sort ((a, b) => (a.year || 0) - (b.year || 0));
+        else
+            return books.sort ((a, b) => a.title.localeCompare(b.title));
+    }
 </script>
 
 <template>
@@ -410,8 +432,14 @@
             <v-col cols="3">JAHR</v-col>
         </v-row>
         <v-row v-else dense align="center" class="bg-office" >
-            <v-col cols="6">TITEL</v-col>
-            <v-col cols="1">JAHR</v-col>
+            <v-col cols="6">
+              <v-btn v-if="sortedByYear" class="bg-office" @click="sortByTitle" icon="$down"></v-btn>
+              TITEL
+            </v-col>
+            <v-col cols="1">
+              <v-btn v-if="!sortedByYear" class="bg-office" @click="sortByYear" icon="$down"></v-btn>
+              JAHR
+            </v-col>
             <v-col cols="1">RATING</v-col>
             <v-col cols="2">STATUS</v-col>
             <v-col v-if="currentAuthor.id" cols="2">