From 96576307c8f7e79d01bd7b6455e75c1088eedf4c Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 28 Oct 2022 20:18:30 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=BE=D0=BC=20?=
 =?UTF-8?q?=D0=BF=D0=BE=20=D0=BE=D1=86=D0=B5=D0=BD=D0=BA=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Search/Search.vue           |  33 +++++-
 .../SelectLibRateDialog.vue                   | 103 ++++++++++++++++++
 2 files changed, 130 insertions(+), 6 deletions(-)
 create mode 100644 client/components/Search/SelectLibRateDialog/SelectLibRateDialog.vue

diff --git a/client/components/Search/Search.vue b/client/components/Search/Search.vue
index 4c2f0d0..e8f8cf7 100644
--- a/client/components/Search/Search.vue
+++ b/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"
-                        class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 180px;" label="Оценка" stack-label outlined dense clearable
+                        v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                        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">
-                            {{ search.librate }}
+                        <q-tooltip v-if="librateNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                            {{ 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))
@@ -704,6 +720,11 @@ class Search {
         this.hideTooltip();
         this.selectLangDialogVisible = true;
     }
+
+    selectLibRate() {
+        this.hideTooltip();
+        this.selectLibRateDialogVisible = true;
+    }
     
     onScroll() {
         if (this.ignoreScrolling)
diff --git a/client/components/Search/SelectLibRateDialog/SelectLibRateDialog.vue b/client/components/Search/SelectLibRateDialog/SelectLibRateDialog.vue
new file mode 100644
index 0000000..ca9bed0
--- /dev/null
+++ b/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>
\ No newline at end of file