deadcxap/inpx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Рефакторинг и улучшение отображения всех книг серии

Browse Source
This commit is contained in:
Book Pauk
2022-10-19 15:15:57 +07:00
parent f8416a4aec
commit a5a734a333
1 changed files with 69 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
client/components/Search/Search.vue
View File

@@ -179,32 +179,44 @@
</div> </div>
</div> </div>
<div v-if="isExpandedSeries(book) && book.books"> <div v-if="isExpandedSeries(book) && book.seriesBooks">
<div v-if="book.showAllBooks" class="book-row column"> <div v-if="book.showAllBooks" class="book-row column">
<BookView <BookView
v-for="subbook in book.allBooks" :key="subbook.id" v-for="seriesBook in book.allBooks" :key="seriesBook.id"
:book="subbook" :genre-tree="genreTree" :book="seriesBook" :genre-tree="genreTree"
show-author show-author
:show-read-link="showReadLink" :show-read-link="showReadLink"
:title-color="isFoundSeriesBook(book, subbook) ? 'text-blue-10' : 'text-red'" :title-color="isFoundSeriesBook(book, seriesBook) ? 'text-blue-10' : 'text-red'"
@book-event="bookEvent" @book-event="bookEvent"
/> />
</div> </div>
<div v-else class="book-row column"> <div v-else class="book-row column">
<BookView v-for="subbook in book.books" :key="subbook.key" :book="subbook" :genre-tree="genreTree" :show-read-link="showReadLink" @book-event="bookEvent" /> <BookView
v-for="seriesBook in book.seriesBooks" :key="seriesBook.key"
:book="seriesBook" :genre-tree="genreTree" :show-read-link="showReadLink" @book-event="bookEvent"
/>
</div> </div>
<div <div
v-if="book.allBooks && book.allBooks.length != book.books.length" v-if="book.allBooks && book.allBooks.length != book.seriesBooks.length"
class="q-my-sm clickable2" class="row items-center q-my-sm"
style="margin-left: 100px" style="margin-left: 100px"
@click="book.showAllBooks = !book.showAllBooks"
> >
<div v-if="book.showAllBooks" class="row items-center text-blue-10"> <div v-if="book.showAllBooks && book.showMore" class="row items-center q-mr-md">
<i class="las la-ellipsis-h text-red" style="font-size: 40px"></i>
<q-btn class="q-ml-md" color="red" style="width: 200px" dense rounded no-caps @click="showMoreSeries(book)">
Показать еще {{ showMoreCount }}
</q-btn>
<q-btn class="q-ml-sm" color="red" style="width: 200px" dense rounded no-caps @click="showMoreSeries(book, true)">
Показать все
</q-btn>
</div>
<div v-if="book.showAllBooks" class="row items-center clickable2 text-blue-10" @click="book.showAllBooks = false">
<q-icon class="la la-long-arrow-alt-up" size="28px" /> <q-icon class="la la-long-arrow-alt-up" size="28px" />
Только найденные книги Только найденные книги
</div> </div>
<div v-else class="row items-center text-red"> <div v-else class="row items-center clickable2 text-red" @click="book.showAllBooks = true">
<q-icon class="la la-long-arrow-alt-down" size="28px" /> <q-icon class="la la-long-arrow-alt-down" size="28px" />
Все книги серии Все книги серии
</div> </div>
@@ -774,11 +786,11 @@ class Search {
if (!this.showCounts || item.count === undefined) if (!this.showCounts || item.count === undefined)
return result; return result;
if (item.loadedBooks) { if (item.booksLoaded) {
let count = 0; let count = 0;
for (const book of item.loadedBooks) { for (const book of item.booksLoaded) {
if (book.type == 'series') if (book.type == 'series')
count += book.books.length; count += book.seriesBooks.length;
else else
count++; count++;
} }
@@ -897,12 +909,12 @@ class Search {
return this.expandedSeries.indexOf(seriesItem.key) >= 0; return this.expandedSeries.indexOf(seriesItem.key) >= 0;
} }
isFoundSeriesBook(book, subbook) { isFoundSeriesBook(seriesItem, seriesBook) {
if (!book.booksSet) { if (!seriesItem.booksSet) {
book.booksSet = new Set(book.books.map(b => b.id)); seriesItem.booksSet = new Set(seriesItem.seriesBooks.map(b => b.id));
} }
return book.booksSet.has(subbook.id); return seriesItem.booksSet.has(seriesBook.id);
} }
setSetting(name, newValue) { setSetting(name, newValue) {
@@ -1062,22 +1074,23 @@ class Search {
async getSeriesBooks(seriesItem) { async getSeriesBooks(seriesItem) {
//асинхронно подгружаем все книги серии, блокируем повторный вызов //асинхронно подгружаем все книги серии, блокируем повторный вызов
if (seriesItem.allBooks === null) { if (seriesItem.allBooksLoaded === null) {
seriesItem.allBooks = undefined; seriesItem.allBooksLoaded = undefined;
(async() => { (async() => {
seriesItem.allBooks = await this.loadSeriesBooks(seriesItem.series); seriesItem.allBooksLoaded = await this.loadSeriesBooks(seriesItem.series);
if (seriesItem.allBooks) { if (seriesItem.allBooksLoaded) {
seriesItem.allBooks = seriesItem.allBooks.filter(book => (this.showDeleted || !book.del)); seriesItem.allBooksLoaded = seriesItem.allBooksLoaded.filter(book => (this.showDeleted || !book.del));
this.sortSeriesBooks(seriesItem.allBooks); this.sortSeriesBooks(seriesItem.allBooksLoaded);
this.showMoreSeries(seriesItem);
} else { } else {
seriesItem.allBooks = null; seriesItem.allBooksLoaded = null;
} }
})(); })();
} }
} }
filterBooks(loadedBooks) { filterBooks(books) {
const s = this.search; const s = this.search;
const emptyFieldValue = '?'; const emptyFieldValue = '?';
@@ -1125,7 +1138,7 @@ class Search {
} }
}; };
return loadedBooks.filter((book) => { return books.filter((book) => {
//author //author
let authorFound = false; let authorFound = false;
const authors = splitAuthor(book.author); const authors = splitAuthor(book.author);
@@ -1171,22 +1184,37 @@ class Search {
} }
showMore(item, all = false) { showMore(item, all = false) {
if (item.loadedBooks) { if (item.booksLoaded) {
const currentLen = (item.books ? item.books.length : 0); const currentLen = (item.books ? item.books.length : 0);
let books; let books;
if (all) { if (all) {
books = item.loadedBooks; books = item.booksLoaded;
} else { } else {
books = item.loadedBooks.slice(0, currentLen + showMoreCount); books = item.booksLoaded.slice(0, currentLen + showMoreCount);
} }
item.showMore = (books.length < item.loadedBooks.length); item.showMore = (books.length < item.booksLoaded.length);
item.books = books; item.books = books;
} }
} }
sortSeriesBooks(books) { showMoreSeries(seriesItem, all = false) {
books.sort((a, b) => { if (seriesItem.allBooksLoaded) {
const currentLen = (seriesItem.allBooks ? seriesItem.allBooks.length : 0);
let books;
if (all) {
books = seriesItem.allBooksLoaded;
} else {
books = seriesItem.allBooksLoaded.slice(0, currentLen + showMoreCount);
}
seriesItem.showMore = (books.length < seriesItem.allBooksLoaded.length);
seriesItem.allBooks = books;
}
}
sortSeriesBooks(seriesBooks) {
seriesBooks.sort((a, b) => {
const dserno = (a.serno || Number.MAX_VALUE) - (b.serno || Number.MAX_VALUE); const dserno = (a.serno || Number.MAX_VALUE) - (b.serno || Number.MAX_VALUE);
const dtitle = a.title.localeCompare(b.title); const dtitle = a.title.localeCompare(b.title);
const dext = a.ext.localeCompare(b.ext); const dext = a.ext.localeCompare(b.ext);
@@ -1220,9 +1248,8 @@ class Search {
})(); })();
} }
const loadedBooks = await this.loadBooks(item.key); const booksToFilter = await this.loadBooks(item.key);
const filtered = this.filterBooks(booksToFilter);
const filtered = this.filterBooks(loadedBooks);
const prepareBook = (book) => { const prepareBook = (book) => {
return Object.assign( return Object.assign(
@@ -1246,16 +1273,18 @@ class Search {
key: `${item.author}-${book.series}`, key: `${item.author}-${book.series}`,
type: 'series', type: 'series',
series: book.series, series: book.series,
allBooksLoaded: null,
allBooks: null, allBooks: null,
showAllBooks: false, showAllBooks: false,
showMore: false,
books: [], seriesBooks: [],
})); }));
seriesIndex[book.series] = index; seriesIndex[book.series] = index;
} }
books[index].books.push(prepareBook(book)); books[index].seriesBooks.push(prepareBook(book));
} else { } else {
books.push(prepareBook(book)); books.push(prepareBook(book));
} }
@@ -1273,7 +1302,7 @@ class Search {
//сортировка внутри серий //сортировка внутри серий
for (const book of books) { for (const book of books) {
if (book.type == 'series') { if (book.type == 'series') {
this.sortSeriesBooks(book.books); this.sortSeriesBooks(book.seriesBooks);
//асинхронно подгрузим все книги серии, если она раскрыта //асинхронно подгрузим все книги серии, если она раскрыта
if (this.isExpandedSeries(book)) { if (this.isExpandedSeries(book)) {
@@ -1286,7 +1315,7 @@ class Search {
this.expandSeries(books[0]); this.expandSeries(books[0]);
} }
item.loadedBooks = books; item.booksLoaded = books;
this.showMore(item); this.showMore(item);
await this.$nextTick(); await this.$nextTick();
@@ -1351,7 +1380,7 @@ class Search {
author: rec.author, author: rec.author,
name: rec.author.replace(/,/g, ', '), name: rec.author.replace(/,/g, ', '),
count, count,
loadedBooks: false, booksLoaded: false,
books: false, books: false,
bookLoading: false, bookLoading: false,
showMore: false, showMore: false,