From 7a351bbad38a51122a21c8b9e66d85ee334aa3d5 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 25 Aug 2022 19:21:56 +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=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Search/Search.vue | 51 +++++++++++++++++++++--------
 client/quasar.js                    |  4 +--
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/client/components/Search/Search.vue b/client/components/Search/Search.vue
index f5ddb32..56a89dd 100644
--- a/client/components/Search/Search.vue
+++ b/client/components/Search/Search.vue
@@ -19,8 +19,8 @@
 
         <div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
             <div ref="toolPanel" class="tool-panel column bg-green-11" style="position: sticky; top: 0; z-index: 10;">
-                <div class="header q-mx-md q-mt-xs row items-center justify-between">
-                    <div class="row items-center q-mr-xs" style="font-size: 150%;">
+                <div class="header q-mx-md q-mt-xs row items-center">
+                    <div class="row items-center" style="font-size: 150%;">
                         <div class="q-py-xs q-px-sm bg-green-12" style="border: 1px solid #aaaaaa; border-radius: 6px">
                             {{ projectName }}
                         </div>
@@ -31,16 +31,8 @@
                             {{ collection }}
                         </div>
                     </div>
-                    <div class="row items-center" style="font-size: 120%;">
-                        <div class="q-mr-xs">
-                            На странице
-                        </div>
-                        <q-select
-                            v-model="limit" :options="limitOptions" class="bg-white"
-                            dropdown-icon="la la-angle-down la-sm"
-                            outlined dense emit-value map-options
-                        />
-                    </div>
+                    
+                    <q-btn class="q-ml-md" round dense color="secondary" icon="la la-cog" @click="settingsDialogVisible = true" />
                 </div>
                 <div class="row q-mx-md q-mb-sm items-center">
                     <q-input
@@ -70,7 +62,7 @@
                         @click="selectLang"
                     />
                     <div class="q-mx-xs" />                
-                    <q-btn round dense style="height: 20px" color="grey-13" icon="la la-question" @click="showSearchHelp" />
+                    <q-btn round dense color="grey-13" icon="la la-question" @click="showSearchHelp" />
 
                     <div class="q-mx-xs" />
                     <div class="row items-center q-mt-xs">
@@ -135,6 +127,36 @@
             </div>
             <div v-else class="q-my-sm" />
         </div>
+
+        <Dialog v-model="settingsDialogVisible">
+            <template #header>
+                <div class="row items-center">
+                    <q-icon class="q-mr-sm" name="la la-cog" size="28px"></q-icon>
+                    Настройки
+                </div>
+            </template>
+
+            <div class="q-mx-md column" style="min-width: 300px; font-size: 120%;">
+                <div class="row items-center q-ml-sm">
+                    <div class="q-mr-sm">
+                        Результатов на странице
+                    </div>
+                    <q-select
+                        v-model="limit" :options="limitOptions" class="bg-white"
+                        dropdown-icon="la la-angle-down la-sm"
+                        outlined dense emit-value map-options
+                    />
+                </div>
+
+                <q-checkbox v-model="showDeleted" size="36px" label="Показывать удаленные" />
+            </div>
+
+            <template #footer>
+                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="settingsDialogVisible = false">
+                    OK
+                </q-btn>
+            </template>
+        </Dialog>
     </div>
 </template>
 
@@ -145,6 +167,7 @@ import { reactive } from 'vue';
 
 import PageScroller from './PageScroller/PageScroller.vue';
 import DivBtn from '../share/DivBtn.vue';
+import Dialog from '../share/Dialog.vue';
 
 import * as utils from '../../share/utils';
 
@@ -153,6 +176,7 @@ import _ from 'lodash';
 const componentOptions = {
     components: {
         PageScroller,
+        Dialog,
         DivBtn
     },
     watch: {
@@ -201,6 +225,7 @@ class Search {
 
     loadingMessage = '';
     loadingMessage2 = '';
+    settingsDialogVisible = false;
     page = 1;
     pageCount = 1;
 
diff --git a/client/quasar.js b/client/quasar.js
index 670858d..73db3d3 100644
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -24,7 +24,7 @@ import {QIcon} from 'quasar/src/components/icon';
 import {QTooltip} from 'quasar/src/components/tooltip';
 import {QSpinner} from 'quasar/src/components/spinner';
 //import {QTable, QTh, QTr, QTd} from 'quasar/src/components/table';
-//import {QCheckbox} from 'quasar/src/components/checkbox';
+import {QCheckbox} from 'quasar/src/components/checkbox';
 import {QSelect} from 'quasar/src/components/select';
 //import {QColor} from 'quasar/src/components/color';
 //import {QPopupProxy} from 'quasar/src/components/popup-proxy';
@@ -55,7 +55,7 @@ const components = {
     QTooltip,
     QSpinner,
     //QTable, QTh, QTr, QTd,
-    //QCheckbox,
+    QCheckbox,
     QSelect,
     //QColor,
     //QPopupProxy,