Добавлена маршрутизация, выбор вида списка: Авторы, Серии, Книги

client/components/Search/AuthorList/AuthorList.vue

@@ -122,7 +122,7 @@
         </div>
         <!-- Формирование списка конец ------------------------------------------------------------------>
 
-        <div v-if="ready && !refreshing && !tableData.length" class="row items-center q-ml-md" style="font-size: 120%">
+        <div v-if="!refreshing && !tableData.length" class="row items-center q-ml-md" style="font-size: 120%">
             <q-icon class="la la-meh q-mr-xs" size="28px" />
             Поиск не дал результатов
         </div>
@@ -176,16 +176,11 @@ const componentOptions = {
         showDeleted() {
             this.updateTableData();
         },
-        ready(newValue) {
-            if (newValue)
-                this.refresh();//no await
-        }
     },
 };
 class AuthorList extends BaseList {
     _options = componentOptions;
     _props = {
-        ready: Boolean,
         list: Object,
         search: Object,
         genreMap: Object,
@@ -221,6 +216,10 @@ class AuthorList extends BaseList {
         this.loadSettings();
     }
 
+    mounted() {
+        this.refresh();//no await
+    }
+
     loadSettings() {
         const settings = this.settings;
 
@@ -811,9 +810,6 @@ class AuthorList extends BaseList {
     }
 
     async refresh() {
-        if (!this.ready)
-            return;
-
         //параметры запроса
         const newQuery = _.cloneDeep(this.search);
         newQuery.offset = (newQuery.page - 1)*newQuery.limit;

client/components/Search/Search.vue

@@ -30,6 +30,16 @@
                         </q-tooltip>
                     </DivBtn>
 
+                    <q-btn-toggle
+                        v-model="selectedList"
+                        class="q-ml-md"
+                        toggle-color="primary"
+                        :options="listOptions"
+                        push
+                        no-caps
+                        rounded
+                    />
+
                     <div class="col"></div>
                     <div class="q-px-sm q-py-xs bg-green-12 clickable2" style="border: 1px solid #aaaaaa; border-radius: 6px" @click="openReleasePage">
                         {{ projectName }}
@@ -111,7 +121,7 @@
             </div>
 
             <!-- Формирование списка ------------------------------------------------------------------------>
-            <AuthorList :ready="ready" :list="list" :search="search" :genre-map="genreMap" @list-event="listEvent" />
+            <component :is="selectedListComponent" v-if="selectedListComponent" :list="list" :search="search" :genre-map="genreMap" @list-event="listEvent" />
             <!-- Формирование списка конец ------------------------------------------------------------------>
 
             <div class="row justify-center">
@@ -164,6 +174,7 @@
 import vueComponent from '../vueComponent.js';
 
 import AuthorList from './AuthorList/AuthorList.vue';
+import SeriesList from './SeriesList/SeriesList.vue';
 
 import PageScroller from './PageScroller/PageScroller.vue';
 import SelectGenreDialog from './SelectGenreDialog/SelectGenreDialog.vue';
@@ -178,9 +189,16 @@ import diffUtils from '../../share/diffUtils';
 
 import _ from 'lodash';
 
+const route2component = {
+    'author': {component: 'AuthorList', label: 'Авторы'},
+    'series': {component: 'SeriesList', label: 'Серии'},
+    //'book': 'BookList',
+};
+
 const componentOptions = {
     components: {
         AuthorList,
+        SeriesList,
         PageScroller,
         SelectGenreDialog,
         SelectLangDialog,
@@ -229,6 +247,7 @@ const componentOptions = {
             this.setSetting('abCacheEnabled', newValue);
         },
         $route(to) {
+            this.updateListFromRoute(to);
             this.updateSearchFromRouteQuery(to);
         },
         langDefault() {
@@ -245,6 +264,13 @@ const componentOptions = {
             },
             deep: true,
         },
+        selectedList(newValue) {
+            this.selectedListComponent = (route2component[newValue] ? route2component[newValue].component : null);
+
+            if (this.getListRoute() != newValue) {
+                this.updateRouteQueryFromSearch();
+            }
+        }
     },
 };
 class Search {
@@ -252,6 +278,9 @@ class Search {
     
     ready = false;
 
+    selectedList = '';
+    selectedListComponent = '';
+
     collection = '';
     projectName = '';
 
@@ -339,6 +368,7 @@ class Search {
                 this.$refs.authorInput.focus();
 
             this.setDefaults();
+            this.updateListFromRoute(this.$route);
             this.updateSearchFromRouteQuery(this.$route);
 
             this.sendMessage({type: 'mes', data: 'hello-from-inpx-web'});
@@ -403,6 +433,27 @@ class Search {
         return result.join(', ');
     }
 
+    get listOptions() {
+        const result = [];
+        for (const [route, rec] of Object.entries(route2component))
+            result.push({label: rec.label, value: route});
+        return result;
+    }
+
+    async updateListFromRoute(to) {
+        const newPath = to.path;
+        let newList = this.getListRoute(newPath);
+        newList = (newList ? newList : 'author');
+        if (this.selectedList != newList)
+            this.selectedList = newList;
+    }
+
+    getListRoute(newPath) {
+        newPath = (newPath ? newPath : this.$route.path);
+        const m = newPath.match(/^\/([^/]*).*$/i);
+        return (m ? m[1] : newPath);
+    }
+
     openReleasePage() {
         window.open('https://github.com/bookpauk/inpx-web/releases', '_blank');
     }
@@ -672,7 +723,7 @@ class Search {
         }
     }
 
-    async updateSearchFromRouteQuery(to) {
+    updateSearchFromRouteQuery(to) {
         if (this.list.liberamaReady)
             this.sendCurrentUrl();
             
@@ -709,7 +760,7 @@ class Search {
 
             const diff = diffUtils.getObjDiff(oldQuery, query);
             if (!diffUtils.isEmptyObjDiff(diff)) {
-                this.$router.replace({query});
+                this.$router.replace({path: this.selectedList, query});
             }
         } finally {
             (async() => {
@@ -722,7 +773,7 @@ class Search {
     async updateGenreTreeIfNeeded() {
         if (this.genreTreeUpdating)
             return;
-        
+
         this.genreTreeUpdating = true;
         try {
             if (this.genreTreeInpxHash !== this.list.inpxHash) {

client/quasar.js

@@ -14,7 +14,7 @@ import {QLinearProgress} from 'quasar/src/components/linear-progress';
 import {QInput} from 'quasar/src/components/input';
 import {QBtn} from 'quasar/src/components/btn';
 //import {QBtnGroup} from 'quasar/src/components/btn-group';
-//import {QBtnToggle} from 'quasar/src/components/btn-toggle';
+import {QBtnToggle} from 'quasar/src/components/btn-toggle';
 import {QIcon} from 'quasar/src/components/icon';
 //import {QSlider} from 'quasar/src/components/slider';
 //import {QTabs, QTab} from 'quasar/src/components/tabs';
@@ -48,7 +48,7 @@ const components = {
     QInput,
     QBtn,
     //QBtnGroup,
-    //QBtnToggle,
+    QBtnToggle,
     QIcon,
     //QSlider,
     //QTabs, QTab,

client/router.js

@@ -5,6 +5,9 @@ const Search = () => import('./components/Search/Search.vue');
 
 const myRoutes = [
     ['/', Search],
+    ['/author', Search],
+    ['/series', Search],
+    ['/book', Search],
     ['/:pathMatch(.*)*', null, null, '/'],
 ];