From 32cbde1c4ed48a6b5e68474620b27352f92d1ab7 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 19 Aug 2022 18:35:01 +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 | 34 ++++++++++++++++++++++++-----
 client/quasar.js                    |  4 ++--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/client/components/Search/Search.vue b/client/components/Search/Search.vue
index 9e7a592..0a2723c 100644
--- a/client/components/Search/Search.vue
+++ b/client/components/Search/Search.vue
@@ -60,10 +60,21 @@
             </div>
         </div>
 
-        <div class="col fit column no-wrap" style="overflow: auto">
-            <div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
-                <div class="q-my-sm q-ml-md" style="font-size: 120%">
-                    {{ item.value }}
+        <div class="col fit" style="position: relative">
+            <div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2)">
+                <div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
+                    <q-spinner color="primary" size="2em" />
+                    <div class="q-ml-sm">
+                        Поиск авторов...
+                    </div>
+                </div>
+            </div>
+
+            <div class="col fit column no-wrap" style="overflow: auto">
+                <div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
+                    <div class="q-my-sm q-ml-md" style="font-size: 120%">
+                        {{ item.value }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -74,6 +85,7 @@
 //-----------------------------------------------------------------------------
 import vueComponent from '../vueComponent.js';
 
+import * as utils from '../../share/utils';
 //import _ from 'lodash';
 
 const componentOptions = {
@@ -108,6 +120,8 @@ class Search {
     collection = '';
     projectName = '';
 
+    loadingVisible = false;
+
     //input field consts 
     inputMaxLength = 1000;
     inputDebounce = 200;
@@ -213,6 +227,13 @@ class Search {
                 const query = this.queryExecute;
                 this.queryExecute = null;
 
+                let inSearch = true;
+                (async() => {
+                    await utils.sleep(500);
+                    if (inSearch)
+                        this.loadingVisible = true;
+                })();
+
                 try {
                     const result = await this.api.search(query);
 
@@ -220,10 +241,13 @@ class Search {
                     this.totalFound = result.totalFound;
 
                     this.searchResult = result;
-                    this.updateTableData();//no await
+                    await this.updateTableData();
                 } catch (e) {
                     this.$root.stdDialog.alert(e.message, 'Ошибка');
                     return;
+                } finally {
+                    inSearch = false;
+                    this.loadingVisible = false;
                 }
             }
         } finally {
diff --git a/client/quasar.js b/client/quasar.js
index c02da38..a405b63 100644
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -22,7 +22,7 @@ import {QIcon} from 'quasar/src/components/icon';
 //import {QList} from 'quasar/src/components/item';
 //import {QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
 //import {QTooltip} from 'quasar/src/components/tooltip';
-//import {QSpinner} from 'quasar/src/components/spinner';
+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 {QSelect} from 'quasar/src/components/select';
@@ -53,7 +53,7 @@ const components = {
     //QList,
     //QItem, QItemSection, QItemLabel,
     //QTooltip,
-    //QSpinner,
+    QSpinner,
     //QTable, QTh, QTr, QTd,
     //QCheckbox,
     QSelect,