Добавлено подсвечивание номера страницы, если изменились критерии поиска

client/components/Search/PageScroller/PageScroller.vue

@@ -3,7 +3,7 @@
         <div class="q-mr-xs">
             Страница
         </div>
-        <div class="bg-white">
+        <div class="trans" :class="{'bg-green-4': highlight, 'bg-white': !highlight}">
             <NumInput 
                 v-model="page" :min="1" :max="pageCount" mask="#######"
                 style="width: 220px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable" mm-buttons
@@ -20,6 +20,7 @@
 import vueComponent from '../../vueComponent.js';
 
 import NumInput from '../../share/NumInput.vue';
+import * as utils from '../../../share/utils';
 
 const componentOptions = {
     components: {
@@ -43,10 +44,23 @@ class PageScroller {
     };
 
     page = 1;
+    highlight = false;
 
     created() {
     }
 
+    async highlightScroller() {
+        if (this.inTrans)
+            return;
+
+        this.inTrans = true;
+        await utils.sleep(300);
+        this.highlight = true;
+        await utils.sleep(300);
+        this.highlight = false;
+        await utils.sleep(300);
+        this.inTrans = false;
+    }
 }
 
 export default vueComponent(PageScroller);
@@ -54,4 +68,8 @@ export default vueComponent(PageScroller);
 </script>
 
 <style scoped>
+.trans {
+    border-radius: 5px;
+    transition: background-color 0.3s linear;
+}
 </style>

client/components/Search/Search.vue

@@ -125,7 +125,7 @@
             </div>
 
             <div class="row justify-center" style="min-height: 48px">
-                <PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" />
+                <PageScroller v-show="pageCount > 1" ref="pageScroller1" v-model="search.page" :page-count="pageCount" />
             </div>
 
             <!-- Формирование списка ------------------------------------------------------------------------>
@@ -941,6 +941,22 @@ class Search {
         });
     }
 
+    highlightPageScroller(query) {
+        const q = _.cloneDeep(query);
+        delete q.limit;
+        delete q.offset;
+        delete q.page;
+
+        try {
+            if (this.search.page < 2 || !this._prevQuery || _.isEqual(this._prevQuery, q))
+                return;
+
+            this.$refs.pageScroller1.highlightScroller();
+        } finally {
+            this._prevQuery = q;
+        }
+    }
+
     async updateSearchFromRouteQuery(to) {
         if (this.liberamaReady)
             this.sendCurrentUrl();
@@ -1477,6 +1493,7 @@ class Search {
                         await this.updateGenreTreeIfNeeded();
                         await this.updateTableData();
                         this.scrollToTop();
+                        this.highlightPageScroller(query);
                     }
                 } catch (e) {
                     this.$root.stdDialog.alert(e.message, 'Ошибка');