Работа над TitleList

2022-10-26 21:32:08 +07:00
parent 2509b0f742
commit 4cacecc13b
8 changed files with 203 additions and 10 deletions
--- a/client/components/Search/AuthorList/AuthorList.vue
+++ b/client/components/Search/AuthorList/AuthorList.vue
@@ -6,7 +6,7 @@
        <LoadingMessage :message="loadingMessage2" z-index="1" />

        <!-- Формирование списка ------------------------------------------------------------------------>
-        <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-author': item.num % 2}" style="font-size: 120%">
+        <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-item': item.num % 2}" style="font-size: 120%">
            <div class="row items-center q-ml-md q-mr-xs no-wrap">
                <div class="row items-center clickable2 q-py-xs no-wrap" @click="expandAuthor(item)">
                    <div style="min-width: 30px">
@@ -106,7 +106,7 @@

                <div v-if="isExpandedAuthor(item) && item.books && !item.books.length" class="book-row row items-center">
                    <q-icon class="la la-meh q-mr-xs" size="24px" />
-                    По каждому из заданных критериев у этого автора были найдены разные книги, но нет полного совпадения                    
+                    По каждому из заданных критериев у этого автора были найдены разные книги, но нет полного совпадения
                </div>
            </div>

@@ -456,7 +456,7 @@ export default vueComponent(AuthorList);
    cursor: pointer;
 }

-.odd-author {
+.odd-item {
    background-color: #e8e8e8;
 }

--- a/client/components/Search/BaseList.js
+++ b/client/components/Search/BaseList.js
@@ -198,6 +198,9 @@ export default class BaseList {
            case 'authorClick':
                this.selectAuthor(event.book.author);
                break;
+            case 'seriesClick':
+                this.selectSeries(event.book.series);
+                break;
            case 'titleClick':
                this.selectTitle(event.book.title);
                break;
--- a/client/components/Search/BookView/BookView.vue
+++ b/client/components/Search/BookView/BookView.vue
@@ -31,7 +31,7 @@
                </div>
            </div>

-            <div class="q-ml-sm row items-center">
+            <div v-if="!titleList" class="q-ml-sm row items-center">
                {{ book.serno ? `${book.serno}. ` : '' }}
                <div v-if="showAuthor && book.author">
                    <span class="clickable2 text-green-10" @click="selectAuthor">{{ bookAuthor }}</span>
@@ -40,6 +40,20 @@
                </div>
                <span v-else class="clickable2" :class="titleColor" @click="selectTitle">{{ book.title }}</span>
            </div>
+            <div v-else class="q-ml-sm row items-center">
+                <span class="clickable2" :class="titleColor" @click="selectTitle">{{ book.title }}</span>
+
+                <div v-if="book.author || bookSeries" class="row">
+                    &nbsp;-&nbsp;
+                    <div v-if="book.author">
+                        <span class="clickable2 text-green-10" @click="selectAuthor">{{ bookAuthor }}</span>
+                        &nbsp;
+                    </div>
+                    <div v-if="bookSeries">
+                        <span class="clickable2" @click="selectSeries">{{ bookSeries }}</span>
+                    </div>
+                </div>
+            </div>
        </div>

        <div class="q-ml-sm">
@@ -88,6 +102,7 @@ class BookView {
        genreMap: Object,
        showAuthor: Boolean,
        showReadLink: Boolean,
+        titleList: Boolean,
        titleColor: { type: String, default: 'text-blue-10'},
    };

@@ -112,7 +127,7 @@ class BookView {
    }

    get bookAuthor() {
-        if (this.showAuthor && this.book.author) {
+        if ((this.showAuthor || this.titleList) && this.book.author) {
            let a = this.book.author.split(',');
            return a.slice(0, 2).join(', ') + (a.length > 2 ? ' и др.' : '');
        }
@@ -120,6 +135,14 @@ class BookView {
        return '';
    }

+    get bookSeries() {
+        if (this.book.series) {
+            return `(${this.book.series})`;
+        }
+
+        return '';
+    }
+
    get bookSize() {
        let size = this.book.size/1024;
        let unit = 'KB';
@@ -155,6 +178,10 @@ class BookView {
        this.$emit('bookEvent', {action: 'authorClick', book: this.book});
    }

+    selectSeries() {
+        this.$emit('bookEvent', {action: 'seriesClick', book: this.book});
+    }
+
    selectTitle() {
        this.$emit('bookEvent', {action: 'titleClick', book: this.book});
    }
--- a/client/components/Search/LoadingMessage/LoadingMessage.vue
+++ b/client/components/Search/LoadingMessage/LoadingMessage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="message" class="fit row justify-center items-center" :style="`position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); z-index: ${zIndex}`">
+    <div v-show="message" class="fit row justify-center items-center" :style="`position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); z-index: ${zIndex}`">
        <div class="bg-white row justify-center items-center q-px-lg" style="min-width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
            <q-icon class="la la-spinner icon-rotate text-blue-8" size="28px" />
            <div class="q-ml-sm">
--- a/client/components/Search/Search.vue
+++ b/client/components/Search/Search.vue
@@ -169,6 +169,7 @@ import vueComponent from '../vueComponent.js';

 import AuthorList from './AuthorList/AuthorList.vue';
 import SeriesList from './SeriesList/SeriesList.vue';
+import TitleList from './TitleList/TitleList.vue';

 import PageScroller from './PageScroller/PageScroller.vue';
 import SelectGenreDialog from './SelectGenreDialog/SelectGenreDialog.vue';
@@ -186,13 +187,14 @@ import _ from 'lodash';
 const route2component = {
    'author': {component: 'AuthorList', label: 'Авторы'},
    'series': {component: 'SeriesList', label: 'Серии'},
-    'book': {component: 'AuthorList', label: 'Книги'},
+    'book': {component: 'TitleList', label: 'Книги'},
 };

 const componentOptions = {
    components: {
        AuthorList,
        SeriesList,
+        TitleList,
        PageScroller,
        SelectGenreDialog,
        SelectLangDialog,
@@ -263,6 +265,7 @@ const componentOptions = {
        selectedList(newValue) {
            this.selectedListComponent = (route2component[newValue] ? route2component[newValue].component : null);
            this.pageCount = 1;
+            this.foundCountMessage = '';

            if (this.getListRoute() != newValue) {
                this.updateRouteQueryFromSearch();
--- a/client/components/Search/SeriesList/SeriesList.vue
+++ b/client/components/Search/SeriesList/SeriesList.vue
@@ -6,7 +6,7 @@
        <LoadingMessage :message="loadingMessage2" z-index="1" />

        <!-- Формирование списка ------------------------------------------------------------------------>
-        <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-author': item.num % 2}" style="font-size: 120%">
+        <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-item': item.num % 2}" style="font-size: 120%">
            <div class="row items-center q-ml-md q-mr-xs no-wrap">
                <div class="row items-center clickable2 q-py-xs no-wrap" @click="expandSeries(item)">
                    <div style="min-width: 30px">
@@ -56,7 +56,7 @@

                <div v-if="!item.showAllBooks && isExpandedSeries(item) && item.books && !item.books.length" class="book-row row items-center">
                    <q-icon class="la la-meh q-mr-xs" size="24px" />
-                    По каждому из заданных критериев у этой серии были найдены разные книги, но нет полного совпадения                    
+                    Возможно у этой серии были найдены книги, помеченные как удаленные, но подходящие по критериям
                </div>

                <div
@@ -288,7 +288,7 @@ export default vueComponent(SeriesList);
    cursor: pointer;
 }

-.odd-author {
+.odd-item {
    background-color: #e8e8e8;
 }

--- a/client/components/Search/TitleList/TitleList.vue
+++ b/client/components/Search/TitleList/TitleList.vue
@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <a ref="download" style="display: none;"></a>
+
+        <LoadingMessage :message="loadingMessage" z-index="2" />
+        <LoadingMessage :message="loadingMessage2" z-index="1" />
+
+        <!-- Формирование списка ------------------------------------------------------------------------>
+        <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-item': item.num % 2}" style="font-size: 120%">
+            <BookView
+                class="book-row"
+                title-list
+                :book="item.book" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
+            />
+            <BookView
+                v-for="book in item.books" :key="book.id"
+                :book="book" :genre-map="genreMap"
+                class="book-row"
+                title-list
+                :show-read-link="showReadLink"
+                @book-event="bookEvent"
+            />
+        </div>
+        <!-- Формирование списка конец ------------------------------------------------------------------>
+
+        <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>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+import { reactive } from 'vue';
+
+import BaseList from '../BaseList';
+
+import * as utils from '../../../share/utils';
+
+import _ from 'lodash';
+
+class TitleList extends BaseList {
+    get foundCountMessage() {
+        return `Найден${utils.wordEnding(this.list.totalFound, 4)} ${this.list.totalFound} уникальн${utils.wordEnding(this.list.totalFound, 6)} назван${utils.wordEnding(this.list.totalFound, 3)}`;
+    }
+
+    async updateTableData() {
+        let result = [];
+
+        const title = this.searchResult.title;
+        if (!title)
+            return;
+
+        let num = 0;
+        for (const rec of title) {
+            const item = reactive({
+                key: rec.id,
+                title: rec.title,
+                num,
+
+                book: false,
+                books: [],
+            });
+
+            if (rec.books) {
+                const filtered = this.filterBooks(rec.books);
+
+                for (let i = 0; i < filtered.length; i++) {
+                    if (i === 0)
+                        item.book = filtered[i];
+                    else
+                        item.books.push(filtered[i]);                    
+                }
+
+                if (filtered.length) {
+                    num++;
+                    result.push(item);
+                }
+            }
+        }
+
+        this.tableData = result;
+    }
+
+    async refresh() {
+        //параметры запроса
+        let newQuery = _.cloneDeep(this.search);
+        newQuery = newQuery.setDefaults(newQuery);
+        delete newQuery.setDefaults;
+        newQuery.offset = (newQuery.page - 1)*newQuery.limit;
+
+        if (_.isEqual(newQuery, this.prevQuery))
+            return;
+        this.prevQuery = newQuery;
+
+        this.queryExecute = newQuery;
+
+        if (this.refreshing)
+            return;
+
+        this.refreshing = true;
+
+        (async() => {
+            await utils.sleep(500);
+            if (this.refreshing)
+                this.loadingMessage = 'Поиск книг...';
+        })();
+
+        try {
+            while (this.queryExecute) {
+                const query = this.queryExecute;
+                this.queryExecute = null;
+
+                try {
+                    const result = await this.api.titleSearch(query);
+
+                    this.list.queryFound = result.title.length;
+                    this.list.totalFound = result.totalFound;
+                    this.list.inpxHash = result.inpxHash;
+
+                    this.searchResult = result;
+
+                    await utils.sleep(1);
+                    if (!this.queryExecute) {
+                        await this.updateTableData();
+                        this.scrollToTop();
+                        this.highlightPageScroller(query);
+                    }
+                } catch (e) {
+                    this.$root.stdDialog.alert(e.message, 'Ошибка');
+                }
+            }
+        } finally {
+            this.refreshing = false;
+            this.loadingMessage = '';
+        }
+    }
+}
+
+export default vueComponent(TitleList);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.clickable2 {
+    cursor: pointer;
+}
+
+.odd-item {
+    background-color: #e8e8e8;
+}
+
+.book-row {
+    margin-left: 50px;
+}
+</style>
--- a/client/share/utils.js
+++ b/client/share/utils.js
@@ -40,6 +40,8 @@ export function wordEnding(num, type = 0) {
        ['о', '', 'о', 'о', 'о', 'о', 'о', 'о', 'о', 'о'],
        ['ий', 'ие', 'ия', 'ия', 'ия', 'ий', 'ий', 'ий', 'ий', 'ий'],
        ['о', 'а', 'о', 'о', 'о', 'о', 'о', 'о', 'о', 'о'],
+        ['ок', 'ка', 'ки', 'ки', 'ки', 'ок', 'ок', 'ок', 'ок', 'ок'],
+        ['ых', 'ое', 'ых', 'ых', 'ых', 'ых', 'ых', 'ых', 'ых', 'ых'],
    ];
    const deci = num % 100;
    if (deci > 10 && deci < 20) {