Добавлено отображение оценок книг

client/components/Search/BookView/BookView.vue

@@ -1,6 +1,29 @@
 <template>
-    <div class="row items-center">
+    <div class="row items-center q-my-sm">
-        <div class="q-my-sm clickable2" @click="selectTitle">
+        <div v-if="showRate || showDeleted">
+            <div v-if="showRate && !book.del">
+                <div v-if="book.librate">
+                    <q-knob
+                        :model-value="book.librate"
+                        :min="0"
+                        :max="5"
+                        show-value
+                        size="22px"
+                        font-size="12px"
+                        :thickness="0.3"
+                        :color="rateColor"
+                        track-color="grey-4"
+                        readonly
+                    />
+                </div>
+                <div v-else style="width: 22px" />
+            </div>
+            <div v-else class="row justify-center" style="width: 22px">
+                <q-icon v-if="book.del" class="la la-trash text-bold text-red" size="22px" />
+            </div>
+        </div>
+
+        <div class="q-ml-sm clickable2" @click="selectTitle">
             {{ book.serno ? `${book.serno}. ` : '' }}
             <span class="text-blue-10">{{ book.title }}</span>
         </div>
@@ -21,7 +44,9 @@
             {{ bookGenre }}
         </div>
 
-        {{ book.src1 }}
+        <div v-show="false">
+            {{ book }}
+        </div>
     </div>
 </template>
 
@@ -45,7 +70,9 @@ class BookView {
         genreTree: Array,
     };
 
+    showRate = true;
     showGenres = true;
+    showDeleted = false;
 
     created() {
         this.loadSettings();
@@ -54,7 +81,9 @@ class BookView {
     loadSettings() {
         const settings = this.settings;
 
+        this.showRate = settings.showRate;
         this.showGenres = settings.showGenres;
+        this.showDeleted = settings.showDeleted;
     }
 
     get settings() {
@@ -71,6 +100,14 @@ class BookView {
         return `${size.toFixed(0)}${unit}`;
     }
 
+    get rateColor() {
+        const rate = (this.book.librate > 5 ? 5 : this.book.librate);
+        if (rate > 2)
+            return `green-${(rate - 1)*2}`;
+        else
+            return `red-${10 - rate*2}`;
+    }
+
     get bookGenre() {
         let result = [];
         const genre = new Set(this.book.genre.split(','));

client/components/Search/Search.vue

@@ -214,7 +214,8 @@
                     />
                 </div>
 
-                <q-checkbox v-model="showCounts" size="36px" label="Показывать количество" />
+                <q-checkbox v-model="showCounts" size="36px" label="Показывать количество" />                
+                <q-checkbox v-model="showRate" size="36px" label="Показывать оценки" />
                 <q-checkbox v-model="showGenres" size="36px" label="Показывать жанры" />
                 <q-checkbox v-model="showDeleted" size="36px" label="Показывать удаленные" />
                 <q-checkbox v-model="abCacheEnabled" size="36px" label="Кешировать запросы" />
@@ -284,6 +285,9 @@ const componentOptions = {
         showCounts(newValue) {
             this.setSetting('showCounts', newValue);
         },
+        showRate(newValue) {
+            this.setSetting('showRate', newValue);
+        },
         showGenres(newValue) {
             this.setSetting('showGenres', newValue);
         },
@@ -337,7 +341,8 @@ class Search {
     expanded = [];
     expandedSeries = [];
     showCounts = true;
-    showGenres = true;
+    showRate = true;
+    showGenres = true;    
     showDeleted = false;
     abCacheEnabled = true;
     langDefault = '';
@@ -402,6 +407,7 @@ class Search {
         this.expanded = _.cloneDeep(settings.expanded);
         this.expandedSeries = _.cloneDeep(settings.expandedSeries);
         this.showCounts = settings.showCounts;
+        this.showRate = settings.showRate;
         this.showGenres = settings.showGenres;
         this.showDeleted = settings.showDeleted;
         this.abCacheEnabled = settings.abCacheEnabled;
@@ -1228,6 +1234,6 @@ export default vueComponent(Search);
 }
 
 .book-row {
-    margin-left: 70px;
+    margin-left: 50px;
 }
 </style>

client/quasar.js

@@ -35,6 +35,7 @@ import {QTree} from 'quasar/src/components/tree';
 //import {QVirtualScroll} from 'quasar/src/components/virtual-scroll';
 //import {QExpansionItem} from 'quasar/src/components/expansion-item';
 import {QOptionGroup} from 'quasar/src/components/option-group';
+import {QKnob} from 'quasar/src/components/knob';
 
 
 const components = {
@@ -68,6 +69,7 @@ const components = {
     //QExpansionItem,
     //QVirtualScroll,
     QOptionGroup,
+    QKnob,
 };
 
 //directives 

client/store/root.js

@@ -7,6 +7,7 @@ const state = {
         expanded: [],
         expandedSeries: [],
         showCounts: true,
+        showRate: true,
         showGenres: true,
         showDeleted: false,
         abCacheEnabled: true,