Работа над поиском по оценкам

client/components/Search/Search.vue

@@ -76,7 +76,7 @@
                     <div class="q-mx-xs" />
                     <q-input
                         v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                        class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
+                        class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 100px;" label="Язык" stack-label outlined dense clearable readonly
                         @click="selectLang"
                     >
                         <template v-if="search.lang" #append>
@@ -126,15 +126,16 @@
 
                     <div class="q-mx-xs" />
                     <q-input
-                        v-model="search.librate" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                        v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                        class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 180px;" label="Оценка" stack-label outlined dense clearable
+                        class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 100px;" label="Оценка" stack-label outlined dense clearable readonly
+                        @click="selectLibRate"
                     >
-                        <template v-if="search.librate" #append>
+                        <template v-if="librateNames" #append>
                             <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.librate = ''" />
                         </template>
 
-                        <q-tooltip v-if="search.librate && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                        <q-tooltip v-if="librateNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                            {{ search.librate }}
+                            {{ librateNames }}
                         </q-tooltip>
                     </q-input>
                 </div>
@@ -202,6 +203,7 @@
 
         <SelectGenreDialog v-model="selectGenreDialogVisible" v-model:genre="search.genre" :genre-tree="genreTree" />
         <SelectLangDialog v-model="selectLangDialogVisible" v-model:lang="search.lang" :lang-list="langList" :lang-default="langDefault" />        
+        <SelectLibRateDialog v-model="selectLibRateDialogVisible" v-model:librate="search.librate" />
     </div>
 </template>
 
@@ -216,6 +218,7 @@ import TitleList from './TitleList/TitleList.vue';
 import PageScroller from './PageScroller/PageScroller.vue';
 import SelectGenreDialog from './SelectGenreDialog/SelectGenreDialog.vue';
 import SelectLangDialog from './SelectLangDialog/SelectLangDialog.vue';
+import SelectLibRateDialog from './SelectLibRateDialog/SelectLibRateDialog.vue';
 
 import authorBooksStorage from './authorBooksStorage';
 import DivBtn from '../share/DivBtn.vue';
@@ -240,6 +243,7 @@ const componentOptions = {
         PageScroller,
         SelectGenreDialog,
         SelectLangDialog,
+        SelectLibRateDialog,
         Dialog,
         DivBtn
     },
@@ -337,6 +341,7 @@ class Search {
     settingsDialogVisible = false;
     selectGenreDialogVisible = false;
     selectLangDialogVisible = false;
+    selectLibRateDialogVisible = false;
 
     pageCount = 1;    
 
@@ -494,6 +499,17 @@ class Search {
         return result.join(', ');
     }
 
+    get librateNames() {
+        let result = [];
+        const rates = this.search.librate.split(',');
+
+        for (const r of rates) {
+            result.push(r == '0' ? 'Без оценки' : r);
+        }
+
+        return result.join(', ');
+    }
+
     get listOptions() {
         const result = [];
         for (const [route, rec] of Object.entries(route2component))
@@ -705,6 +721,11 @@ class Search {
         this.selectLangDialogVisible = true;
     }
 
+    selectLibRate() {
+        this.hideTooltip();
+        this.selectLibRateDialogVisible = true;
+    }
+    
     onScroll() {
         if (this.ignoreScrolling)
             return;

client/components/Search/SelectLibRateDialog/SelectLibRateDialog.vue

@@ -0,0 +1,103 @@
+<template>
+    <Dialog ref="dialog" v-model="dialogVisible">
+        <template #header>
+            <div class="row items-center">
+                <div style="font-size: 130%">
+                    Выбрать оценки
+                </div>
+            </div>
+        </template>
+
+        <div ref="box" class="column q-mt-xs overflow-auto no-wrap" style="width: 200px; padding: 0px 10px 10px 10px;">
+            <q-option-group
+                v-model="ticked"
+                :options="options"
+                type="checkbox"
+            >
+            </q-option-group>
+        </div>
+
+        <template #footer>
+            <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
+                OK
+            </q-btn>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+import Dialog from '../../share/Dialog.vue';
+
+const componentOptions = {
+    components: {
+        Dialog
+    },
+    watch: {
+        modelValue(newValue) {
+            this.dialogVisible = newValue;
+        },
+        dialogVisible(newValue) {
+            this.$emit('update:modelValue', newValue);
+        },
+        librate() {
+            this.updateTicked();
+        },
+        ticked() {
+            this.updateLibrate();
+        },
+    }
+};
+class SelectLibRateDialog {
+    _options = componentOptions;
+    _props = {
+        modelValue: Boolean,
+        librate: String,
+    };
+
+    dialogVisible = false;
+
+    ticked = [];
+    tickAll = false;
+
+    created() {
+        this.commit = this.$store.commit;
+    }
+
+    mounted() {
+        this.updateTicked();
+    }
+
+    get options() {
+        return [
+            {label: 'Без оценки', value: '0'},
+            {label: '1', value: '1'},
+            {label: '2', value: '2'},
+            {label: '3', value: '3'},
+            {label: '4', value: '4'},
+            {label: '5', value: '5'},
+        ];
+    }
+
+    updateTicked() {
+        this.ticked = this.librate.split(',').filter(s => s);
+    }
+
+    updateLibrate() {
+        this.ticked.sort((a, b) => a.localeCompare(b))
+        this.$emit('update:librate', this.ticked.join(','));
+    }
+
+    okClick() {
+        this.dialogVisible = false;
+    }
+}
+
+export default vueComponent(SelectLibRateDialog);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+</style>