Работа над расширенным поиском

client/components/Search/Search.vue

@@ -57,7 +57,7 @@
                 </div>
                 <div v-show="!isExtendedSearch" class="row q-mx-md q-mb-xs items-center">
                     <DivBtn
-                        class="text-grey-5 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
+                        class="text-grey-5 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
                         :icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
                         @click.stop.prevent="extendedParams = !extendedParams"
                     >
@@ -110,7 +110,7 @@
                     </q-input>
                     <div class="q-mx-xs" />
                     <DivBtn
-                        class="text-grey-8 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
+                        class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
                         icon="la la-level-up-alt"
                         @click.stop.prevent="cloneSearch"
                     >
@@ -122,7 +122,7 @@
                     </DivBtn>
                 </div>
                 <div v-show="!isExtendedSearch && extendedParams" class="row q-mx-md q-mb-xs items-center">
-                    <div style="width: 34px" />
+                    <div style="width: 30px" />
                     <div class="q-mx-xs" />
                     <q-input
                         v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
@@ -192,7 +192,7 @@
                     <q-input
                         v-model="extSearchNames"
                         class="col q-mt-xs" :bg-color="inputBgColor('extended')" input-style="cursor: pointer"
-                        style="min-width: 200px; max-width: 756px;" label="Расширенный поиск" stack-label outlined dense clearable readonly
+                        style="min-width: 200px; max-width: 752px;" label="Расширенный поиск" stack-label outlined dense clearable readonly
                         @click.stop.prevent="selectExtSearch"
                     >
                         <template v-if="extSearchNames" #append>
@@ -206,7 +206,7 @@
 
                     <div class="q-mx-xs" />
                     <DivBtn
-                        class="text-grey-8 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
+                        class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
                         icon="la la-level-up-alt"
                         @click.stop.prevent="cloneSearch"
                     >
@@ -693,8 +693,7 @@ class Search {
     }
 
     showSearchHelp() {
-        let info = '';  
-        info += `<div style="min-width: 250px" />`;
+        let info = `<div style="min-width: 250px" />`;
         info += `
 <p>
     Для раздела <b>Авторы</b>, работу поискового движка можно описать простой фразой: найти авторов по указанным критериям.
@@ -733,7 +732,7 @@ class Search {
     <br><br>
     Для разделов <b>Серии</b>, <b>Книги</b> все аналогично разделу <b>Авторы</b>.
 </p>
-`;        
+`;
 
         this.$root.stdDialog.alert(info, 'Памятка', {iconName: 'la la-info-circle'});
     }

client/components/Search/SelectExtSearchDialog/SelectExtSearchDialog.vue

@@ -5,6 +5,14 @@
                 <div style="font-size: 110%">
                     Расширенный поиск
                 </div>
+
+                <DivBtn class="q-ml-md text-white bg-secondary" :size="30" :icon-size="24" icon="la la-question" round @click.stop.prevent="showSearchHelp">
+                    <template #tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                            Памятка
+                        </q-tooltip>
+                    </template>
+                </DivBtn>
             </div>
         </template>
 
@@ -41,11 +49,14 @@
 import vueComponent from '../../vueComponent.js';
 
 import Dialog from '../../share/Dialog.vue';
+import DivBtn from '../../share/DivBtn.vue';
+
 import _ from 'lodash';
 
 const componentOptions = {
     components: {
-        Dialog
+        Dialog,
+        DivBtn,
     },
     watch: {
         modelValue(newValue) {
@@ -126,6 +137,49 @@ class SelectExtSearchDialog {
         this.error = error.join('<br>');
     }
 
+    showSearchHelp() {
+        let info = `<div style="min-width: 250px" />`;
+        info += `
+<p>
+    Расширенный поиск ведется непосредственно по значениям атрибутов записей описания книг.
+    Атрибуты можно увидеть, если включить опцию "Показывать JSON".
+    Названия атрибутов соответствуют названиям полей струкутры записей из inpx-файла.
+    На поисковые значения действуют те же правила, что и для разделов "Авторы", "Серии", "Книги".
+    <br>
+    Для строковых значений (S):
+    <ul>
+        <li>
+            без префикса: значение трактуется, как "начинается с"
+        </li>
+        <br>
+        <li>
+            префикс "=": поиск по точному совпадению
+        </li>
+        <br>
+        <li>
+            префикс "*": поиск подстроки в строке
+        </li>
+        <br>
+        <li>
+            префикс "#": поиск подстроки в строке, но только среди начинающихся не с латинского или кириллического символа
+        </li>
+    </ul>
+    Для числовых значений (N):
+    <ul>
+        <li>
+            число N: поиск по точному совпадению
+        </li>
+        <li>
+            диапазон N..M: поиск по диапазону числовых значений, включая N и M. Например, поисковое значение 1024..2048 в поле "size"
+            найдет все ссылки на файлы размером от 1КБ до 2КБ.
+        </li>
+    </ul>
+</p>
+`;
+
+        this.$root.stdDialog.alert(info, 'Памятка', {iconName: 'la la-info-circle'});
+    }
+
     onKeyPress(event) {
         if (event.code == 'Enter')
             this.apply();