Search.vue 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380
  1. <template>
  2. <div class="root column fit" style="position: relative">
  3. <a ref="download" style="display: none;"></a>
  4. <div v-show="loadingMessage" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 2">
  5. <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">
  6. <q-icon class="la la-spinner icon-rotate text-blue-8" size="28px" />
  7. <div class="q-ml-sm">
  8. {{ loadingMessage }}
  9. </div>
  10. </div>
  11. </div>
  12. <div v-show="loadingMessage2" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 1">
  13. <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">
  14. <q-icon class="la la-spinner icon-rotate text-blue-8" size="28px" />
  15. <div class="q-ml-sm">
  16. {{ loadingMessage2 }}
  17. </div>
  18. </div>
  19. </div>
  20. <div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
  21. <div ref="toolPanel" class="tool-panel column bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
  22. <div class="header q-mx-md q-mb-xs q-mt-sm row items-center">
  23. <div class="row items-center" style="font-size: 150%;">
  24. <div class="q-mr-xs">
  25. Коллекция
  26. </div>
  27. <div class="clickable" @click="showCollectionInfo">
  28. {{ collection }}
  29. </div>
  30. </div>
  31. <DivBtn class="q-ml-md text-white bg-secondary" :size="30" :icon-size="24" :imt="1" icon="la la-cog" round @click="settingsDialogVisible = true">
  32. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  33. Настройки
  34. </q-tooltip>
  35. </DivBtn>
  36. <DivBtn class="q-ml-sm text-white bg-secondary" :size="30" :icon-size="24" icon="la la-question" round @click="showSearchHelp">
  37. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  38. Памятка
  39. </q-tooltip>
  40. </DivBtn>
  41. <div class="col"></div>
  42. <div class="q-px-sm q-py-xs bg-green-12 clickable2" style="border: 1px solid #aaaaaa; border-radius: 6px" @click="openReleasePage">
  43. {{ projectName }}
  44. </div>
  45. </div>
  46. <div class="row q-mx-md q-mb-sm items-center">
  47. <q-input
  48. ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce"
  49. class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
  50. >
  51. <q-tooltip v-if="search.author" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  52. {{ search.author }}
  53. </q-tooltip>
  54. </q-input>
  55. <div class="q-mx-xs" />
  56. <q-input
  57. v-model="search.series" :maxlength="inputMaxLength" :debounce="inputDebounce"
  58. class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
  59. >
  60. <q-tooltip v-if="search.series" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  61. {{ search.series }}
  62. </q-tooltip>
  63. </q-input>
  64. <div class="q-mx-xs" />
  65. <q-input
  66. v-model="search.title" :maxlength="inputMaxLength" :debounce="inputDebounce"
  67. class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
  68. >
  69. <q-tooltip v-if="search.title" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  70. {{ search.title }}
  71. </q-tooltip>
  72. </q-input>
  73. <div class="q-mx-xs" />
  74. <q-input
  75. v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
  76. class="bg-white q-mt-xs" input-style="cursor: pointer" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
  77. @click="selectGenre"
  78. >
  79. <template v-if="genreNames" #append>
  80. <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.genre = ''" />
  81. </template>
  82. <q-tooltip v-if="genreNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  83. {{ genreNames }}
  84. </q-tooltip>
  85. </q-input>
  86. <div class="q-mx-xs" />
  87. <q-input
  88. v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
  89. class="bg-white q-mt-xs" input-style="cursor: pointer" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
  90. @click="selectLang"
  91. >
  92. <q-tooltip v-if="search.lang && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  93. {{ search.lang }}
  94. </q-tooltip>
  95. </q-input>
  96. <div class="q-mx-xs" />
  97. <DivBtn class="text-white q-mt-xs bg-grey-13" :size="30" :icon-size="24" icon="la la-broom" round @click="setDefaults">
  98. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
  99. Сбросить поиск
  100. </q-tooltip>
  101. </DivBtn>
  102. <div class="q-mx-xs" />
  103. <div class="row items-center q-mt-xs">
  104. <div v-show="queryFound > 0">
  105. {{ foundAuthorsMessage }}
  106. </div>
  107. <div v-show="queryFound == 0">
  108. Ничего не найдено
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="row justify-center" style="min-height: 48px">
  114. <PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" />
  115. </div>
  116. <!-- Формирование списка ------------------------------------------------------------------------>
  117. <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-author': item.num % 2}" style="font-size: 120%">
  118. <div class="row items-center q-ml-md q-mr-xs no-wrap">
  119. <div class="row items-center clickable2 q-py-xs no-wrap" @click="expandAuthor(item)">
  120. <div style="min-width: 30px">
  121. <div v-if="!isExpanded(item)">
  122. <q-icon name="la la-plus-square" size="28px" />
  123. </div>
  124. <div v-else>
  125. <q-icon name="la la-minus-square" size="28px" />
  126. </div>
  127. </div>
  128. </div>
  129. <div class="clickable2 q-ml-xs q-py-sm text-green-10 text-bold" @click="selectAuthor(item.author)">
  130. {{ item.name }}
  131. </div>
  132. <div class="q-ml-sm text-bold" style="color: #555">
  133. {{ getBookCount(item) }}
  134. </div>
  135. </div>
  136. <div v-if="item.bookLoading" class="book-row row items-center">
  137. <q-icon class="la la-spinner icon-rotate text-blue-8" size="28px" />
  138. <div class="q-ml-xs">
  139. Обработка...
  140. </div>
  141. </div>
  142. <div v-if="isExpanded(item) && item.books">
  143. <div v-for="book in item.books" :key="book.key" class="book-row column">
  144. <!-- серия книг -->
  145. <div v-if="book.type == 'series'" class="column">
  146. <div class="row items-center q-mr-xs no-wrap text-grey-9">
  147. <div class="row items-center clickable2 q-py-xs no-wrap" @click="expandSeries(book)">
  148. <div style="min-width: 30px">
  149. <div v-if="!isExpandedSeries(book)">
  150. <q-icon name="la la-plus-square" size="28px" />
  151. </div>
  152. <div v-else>
  153. <q-icon name="la la-minus-square" size="28px" />
  154. </div>
  155. </div>
  156. </div>
  157. <div class="clickable2 q-ml-xs q-py-sm text-bold" @click="selectSeries(book.series)">
  158. Серия: {{ book.series }}
  159. </div>
  160. </div>
  161. <div v-if="isExpandedSeries(book) && book.books">
  162. <div v-if="book.showAllBooks" class="book-row column">
  163. <BookView
  164. v-for="subbook in book.allBooks" :key="subbook.key"
  165. :book="subbook" :genre-tree="genreTree"
  166. show-author
  167. :title-color="isFoundSeriesBook(book, subbook) ? 'text-blue-10' : 'text-red'"
  168. @book-event="bookEvent"
  169. />
  170. </div>
  171. <div v-else class="book-row column">
  172. <BookView v-for="subbook in book.books" :key="subbook.key" :book="subbook" :genre-tree="genreTree" @book-event="bookEvent" />
  173. </div>
  174. <div
  175. v-if="book.allBooks && book.allBooks.length != book.books.length"
  176. class="q-my-sm clickable2"
  177. style="margin-left: 100px"
  178. @click="book.showAllBooks = !book.showAllBooks"
  179. >
  180. <div v-if="book.showAllBooks" class="row items-center text-blue-10">
  181. <q-icon class="la la-long-arrow-alt-up" size="28px" />
  182. Только найденные книги
  183. </div>
  184. <div v-else class="row items-center text-red">
  185. <q-icon class="la la-long-arrow-alt-down" size="28px" />
  186. Все книги серии
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <!-- книга без серии -->
  192. <BookView v-else :book="book" :genre-tree="genreTree" @book-event="bookEvent" />
  193. </div>
  194. </div>
  195. <div v-if="isExpanded(item) && item.showMore" class="row items-center book-row q-mb-sm">
  196. <i class="las la-ellipsis-h text-blue-10" style="font-size: 40px"></i>
  197. <q-btn class="q-ml-md" color="primary" style="width: 200px" dense rounded no-caps @click="showMore(item)">
  198. Показать еще {{ showMoreCount }}
  199. </q-btn>
  200. <q-btn class="q-ml-sm" color="primary" style="width: 200px" dense rounded no-caps @click="showMore(item, true)">
  201. Показать все
  202. </q-btn>
  203. </div>
  204. </div>
  205. <!-- Формирование списка конец ------------------------------------------------------------------>
  206. <div v-if="ready && !refreshing && !tableData.length" class="row items-center q-ml-md" style="font-size: 120%">
  207. <q-icon class="la la-meh q-mr-xs" size="28px" />
  208. Поиск не дал результатов
  209. </div>
  210. <div v-show="hiddenCount" class="row">
  211. <div class="q-ml-lg q-py-sm clickable2 text-red" style="font-size: 120%" @click="showHiddenHelp">
  212. {{ hiddenResultsMessage }}
  213. </div>
  214. </div>
  215. <div class="row justify-center">
  216. <PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" />
  217. </div>
  218. <div v-show="pageCount <= 1" class="q-mt-lg" />
  219. </div>
  220. <Dialog v-model="settingsDialogVisible">
  221. <template #header>
  222. <div class="row items-center" style="font-size: 130%">
  223. <q-icon class="q-mr-sm" name="la la-cog" size="28px"></q-icon>
  224. Настройки
  225. </div>
  226. </template>
  227. <div class="q-mx-md column" style="min-width: 300px; font-size: 120%;">
  228. <div class="row items-center q-ml-sm">
  229. <div class="q-mr-sm">
  230. Результатов на странице
  231. </div>
  232. <q-select
  233. v-model="limit" :options="limitOptions" class="bg-white"
  234. dropdown-icon="la la-angle-down la-sm"
  235. outlined dense emit-value map-options
  236. />
  237. </div>
  238. <q-checkbox v-model="showCounts" size="36px" label="Показывать количество" />
  239. <q-checkbox v-model="showRate" size="36px" label="Показывать оценки" />
  240. <q-checkbox v-model="showGenres" size="36px" label="Показывать жанры" />
  241. <q-checkbox v-model="showDeleted" size="36px" label="Показывать удаленные" />
  242. <q-checkbox v-model="abCacheEnabled" size="36px" label="Кешировать запросы" />
  243. </div>
  244. <template #footer>
  245. <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="settingsDialogVisible = false">
  246. OK
  247. </q-btn>
  248. </template>
  249. </Dialog>
  250. <SelectGenreDialog v-model="selectGenreDialogVisible" v-model:genre="search.genre" :genre-tree="genreTree" />
  251. <SelectLangDialog v-model="selectLangDialogVisible" v-model:lang="search.lang" :lang-list="langList" :lang-default="langDefault" />
  252. </div>
  253. </template>
  254. <script>
  255. //-----------------------------------------------------------------------------
  256. import vueComponent from '../vueComponent.js';
  257. import { reactive } from 'vue';
  258. import PageScroller from './PageScroller/PageScroller.vue';
  259. import SelectGenreDialog from './SelectGenreDialog/SelectGenreDialog.vue';
  260. import SelectLangDialog from './SelectLangDialog/SelectLangDialog.vue';
  261. import BookView from './BookView/BookView.vue';
  262. import authorBooksStorage from './authorBooksStorage';
  263. import DivBtn from '../share/DivBtn.vue';
  264. import Dialog from '../share/Dialog.vue';
  265. import * as utils from '../../share/utils';
  266. import diffUtils from '../../share/diffUtils';
  267. import _ from 'lodash';
  268. const maxItemCount = 500;//выше этого значения показываем "Загрузка"
  269. const showMoreCount = 100;//значение для "Показать еще"
  270. const componentOptions = {
  271. components: {
  272. PageScroller,
  273. SelectGenreDialog,
  274. SelectLangDialog,
  275. BookView,
  276. Dialog,
  277. DivBtn
  278. },
  279. watch: {
  280. config() {
  281. this.makeTitle();
  282. },
  283. settings() {
  284. this.loadSettings();
  285. },
  286. search: {
  287. handler(newValue) {
  288. this.limit = newValue.limit;
  289. this.refresh();
  290. },
  291. deep: true,
  292. },
  293. limit(newValue) {
  294. this.setSetting('limit', newValue);
  295. this.updatePageCount();
  296. },
  297. showCounts(newValue) {
  298. this.setSetting('showCounts', newValue);
  299. },
  300. showRate(newValue) {
  301. this.setSetting('showRate', newValue);
  302. },
  303. showGenres(newValue) {
  304. this.setSetting('showGenres', newValue);
  305. },
  306. showDeleted(newValue) {
  307. this.setSetting('showDeleted', newValue);
  308. this.updateTableData();
  309. },
  310. abCacheEnabled(newValue) {
  311. this.setSetting('abCacheEnabled', newValue);
  312. },
  313. totalFound() {
  314. this.updatePageCount();
  315. },
  316. $route(to) {
  317. this.updateSearchFromRouteQuery(to);
  318. },
  319. langDefault() {
  320. this.updateSearchFromRouteQuery(this.$route);
  321. },
  322. },
  323. };
  324. class Search {
  325. _options = componentOptions;
  326. ready = false;
  327. collection = '';
  328. projectName = '';
  329. loadingMessage = '';
  330. loadingMessage2 = '';
  331. settingsDialogVisible = false;
  332. selectGenreDialogVisible = false;
  333. selectLangDialogVisible = false;
  334. pageCount = 1;
  335. //input field consts
  336. inputMaxLength = 1000;
  337. inputDebounce = 200;
  338. //search fields
  339. search = {
  340. author: '',
  341. series: '',
  342. title: '',
  343. genre: '',
  344. lang: '',
  345. page: 1,
  346. limit: 50,
  347. };
  348. //settings
  349. expanded = [];
  350. expandedSeries = [];
  351. showCounts = true;
  352. showRate = true;
  353. showGenres = true;
  354. showDeleted = false;
  355. abCacheEnabled = true;
  356. langDefault = '';
  357. limit = 20;
  358. //stuff
  359. refreshing = false;
  360. queryFound = -1;
  361. totalFound = 0;
  362. bookRowsOnPage = 100;
  363. inpxHash = '';
  364. genreTree = [];
  365. langList = [];
  366. genreTreeInpxHash = '';
  367. cachedAuthors = {};
  368. hiddenCount = 0;
  369. showTooltips = true;
  370. showMoreCount = showMoreCount;
  371. limitOptions = [
  372. {label: '10', value: 10},
  373. {label: '20', value: 20},
  374. {label: '50', value: 50},
  375. {label: '100', value: 100},
  376. {label: '200', value: 200},
  377. {label: '500', value: 500},
  378. {label: '1000', value: 1000},
  379. ];
  380. searchResult = {};
  381. tableData = [];
  382. created() {
  383. this.commit = this.$store.commit;
  384. this.loadSettings();
  385. }
  386. mounted() {
  387. (async() => {
  388. await authorBooksStorage.init();
  389. this.api = this.$root.api;
  390. if (!this.$root.isMobileDevice)
  391. this.$refs.authorInput.focus();
  392. this.setDefaults();
  393. this.updateSearchFromRouteQuery(this.$route);
  394. //чтоб не вызывался лишний refresh
  395. await utils.sleep(100);
  396. this.ready = true;
  397. this.refresh();//no await
  398. })();
  399. }
  400. loadSettings() {
  401. const settings = this.settings;
  402. this.search.limit = settings.limit;
  403. this.expanded = _.cloneDeep(settings.expanded);
  404. this.expandedSeries = _.cloneDeep(settings.expandedSeries);
  405. this.showCounts = settings.showCounts;
  406. this.showRate = settings.showRate;
  407. this.showGenres = settings.showGenres;
  408. this.showDeleted = settings.showDeleted;
  409. this.abCacheEnabled = settings.abCacheEnabled;
  410. this.langDefault = settings.langDefault;
  411. }
  412. get config() {
  413. return this.$store.state.config;
  414. }
  415. get settings() {
  416. return this.$store.state.settings;
  417. }
  418. get genreNames() {
  419. let result = [];
  420. const genre = new Set(this.search.genre.split(','));
  421. for (const section of this.genreTree) {
  422. for (const g of section.value)
  423. if (genre.has(g.value))
  424. result.push(g.name);
  425. }
  426. return result.join(', ');
  427. }
  428. openReleasePage() {
  429. window.open('https://github.com/bookpauk/inpx-web', '_blank');
  430. }
  431. makeTitle() {
  432. const collection = this.config.dbConfig.inpxInfo.collection.split('\n');
  433. this.collection = collection[0].trim();
  434. this.projectName = `${this.config.name} v${this.config.webAppVersion}`;
  435. this.$root.setAppTitle(`Коллекция ${this.collection}`);
  436. }
  437. showSearchHelp() {
  438. let info = '';
  439. info += `<div style="min-width: 250px" />`;
  440. info += `
  441. <p>
  442. Работу поискового движка можно описать простой фразой: найти авторов по указанным критериям.
  443. По тем же критериям среди найденных авторов фильтруются книги, сортируются и группируются по сериям.
  444. <br><br>
  445. По умолчанию поисковое значение трактуется как "начинается с". Например значение автора "Пушкин"
  446. трактуется как: найти авторов, имя которых начинается с "Пушкин". Поиск всегда ведется без
  447. учета регистра - значения "Ельцин" и "ельцин" равнозначны.
  448. <br><br>
  449. В поисковых полях "Автор", "Серия", "Название" также доступны следующие префиксы:
  450. <ul>
  451. <li>
  452. "=" поиск по точному совпадению. Например, если задать "=Пушкин Александр Сергеевич" в поле автора,
  453. то будет найден в точности этот автор
  454. </li>
  455. <br>
  456. <li>
  457. "*" поиск подстроки в строке. Например, для "*Александр" в поле автора, будут найдены
  458. все авторы, имя которых содержит "Александр"
  459. </li>
  460. <br>
  461. <li>
  462. "#" поиск подстроки в строке, но только для тех значений, которые не начинаются ни с одной буквы русского или латинского алфавита.
  463. Например, значение "#поворот" в поле автора означает: найти всех авторов, имя которых начинается не с русской или латинской буквы и содержит слово "поворот".
  464. Указание простого "#" в поиске по названию означает: найти всех авторов, названия книг которых начинаются не с русской или латинской буквы
  465. </li>
  466. <br>
  467. <li>
  468. "?" поиск пустых значений или тех, что начинаются с этого символа. Например, "?" в поле серии означает: найти всех авторов, у которых есть книги без серий
  469. или название серии начинается с "?".
  470. Значение "?" в поле названия означает: найти всех авторов, книги которых без названия или начинаются с "?"
  471. </li>
  472. </ul>
  473. <br>
  474. Специльное имя автора "?" служит для поиска и группировки книг без автора.
  475. </p>
  476. `;
  477. this.$root.stdDialog.alert(info, 'Памятка', {iconName: 'la la-info-circle'});
  478. }
  479. showHiddenHelp() {
  480. this.$root.stdDialog.alert(`
  481. Книги этих авторов помечены как удаленные. Для того, чтобы их увидеть, необходимо установить опцию "Показывать удаленные" в настройках.
  482. `, 'Пояснение', {iconName: 'la la-info-circle'});
  483. }
  484. showCollectionInfo() {
  485. /*
  486. "dbConfig": {
  487. "inpxInfo": {
  488. "collection": "Flibusta Offline 2 August 2022\r\nflibusta_all_local_2022-08-02\r\n65537\r\nFlibusta. A local collection. Total: 636591 books\r\nhttp://flibusta.is/",
  489. },
  490. "stats": {
  491. "recsLoaded": 687063,
  492. "authorCount": 153364,
  493. "authorCountAll": 177034,
  494. "bookCount": 576018,
  495. "bookCountAll": 687063,
  496. "bookDelCount": 111045,
  497. "noAuthorBookCount": 4347,
  498. "titleCount": 512671,
  499. "seriesCount": 54472,
  500. "genreCount": 238,
  501. "langCount": 102
  502. },
  503. */
  504. let info = '';
  505. const inpxInfo = this.config.dbConfig.inpxInfo;
  506. const stat = this.config.dbConfig.stats;
  507. const keyStyle = 'style="display: inline-block; text-align: right; margin-right: 5px; min-width: 200px"';
  508. info += `<div style="min-width: 250px" />`;
  509. info += `
  510. <div><div ${keyStyle}>Обработано ссылок на книги:</div><span>${stat.bookCountAll}</span></div>
  511. <div><div ${keyStyle}>Из них актуальных:</div><span>${stat.bookCount}</span></div>
  512. <div><div ${keyStyle}>Помеченных как удаленные:</div><span>${stat.bookDelCount}</span></div>
  513. <div><div ${keyStyle}>Актуальных без автора:</div><span>${stat.noAuthorBookCount}</span></div>
  514. <br>
  515. <div><div ${keyStyle}>Всего записей об авторах:</div><span>${stat.authorCountAll}</span></div>
  516. <div><div ${keyStyle}>Записей без соавторов:</div><span>${stat.authorCount}</span></div>
  517. <div><div ${keyStyle}>С соавторами:</div><span>${stat.authorCountAll- stat.authorCount}</span></div>
  518. <br>
  519. <div><div ${keyStyle}>Уникальных названий книг:</div><span>${stat.titleCount}</span></div>
  520. <div><div ${keyStyle}>Уникальных серий:</div><span>${stat.seriesCount}</span></div>
  521. <div><div ${keyStyle}>Найдено жанров:</div><span>${stat.genreCount}</span></div>
  522. <div><div ${keyStyle}>Найдено языков:</div><span>${stat.langCount}</span></div>
  523. `;
  524. info += `
  525. <div><hr/>
  526. <b>collection.info:</b>
  527. <pre>${inpxInfo.collection}</pre>
  528. </div>
  529. `;
  530. this.$root.stdDialog.alert(info, 'Статистика по коллекции', {iconName: 'la la-info-circle'});
  531. }
  532. async hideTooltip() {
  533. //Firefox bugfix: при всплывающем диалоге скрываем подсказку
  534. this.showTooltips = false;
  535. await utils.sleep(1000);
  536. this.showTooltips = true;
  537. }
  538. selectGenre() {
  539. this.hideTooltip();
  540. this.selectGenreDialogVisible = true;
  541. }
  542. selectLang() {
  543. this.hideTooltip();
  544. this.selectLangDialogVisible = true;
  545. }
  546. onScroll() {
  547. if (this.ignoreScrolling)
  548. return;
  549. const curScrollTop = this.$refs.scroller.scrollTop;
  550. if (!this.lastScrollTop)
  551. this.lastScrollTop = 0;
  552. if (!this.lastScrollTop2)
  553. this.lastScrollTop2 = 0;
  554. if (curScrollTop - this.lastScrollTop > 0) {
  555. this.$refs.toolPanel.style.position = 'relative';
  556. this.$refs.toolPanel.style.top = `${this.lastScrollTop2}px`;
  557. } else {
  558. this.$refs.toolPanel.style.position = 'sticky';
  559. this.$refs.toolPanel.style.top = 0;
  560. this.lastScrollTop2 = curScrollTop;
  561. }
  562. this.lastScrollTop = curScrollTop;
  563. }
  564. async ignoreScroll(ms = 50) {
  565. this.ignoreScrolling = true;
  566. await utils.sleep(ms);
  567. this.ignoreScrolling = false;
  568. }
  569. scrollToTop() {
  570. this.$refs.scroller.scrollTop = 0;
  571. this.lastScrollTop = 0;
  572. }
  573. get foundAuthorsMessage() {
  574. return `Найден${utils.wordEnding(this.totalFound, 2)} ${this.totalFound} автор${utils.wordEnding(this.totalFound)}`;
  575. }
  576. get hiddenResultsMessage() {
  577. return `+${this.hiddenCount} результат${utils.wordEnding(this.hiddenCount)} скрыт${utils.wordEnding(this.hiddenCount, 2)}`;
  578. }
  579. updatePageCount() {
  580. const prevPageCount = this.pageCount;
  581. this.pageCount = Math.ceil(this.totalFound/this.limit);
  582. this.pageCount = (this.pageCount < 1 ? 1 : this.pageCount);
  583. if (this.prevPage && prevPageCount == 1 && this.pageCount > 1 && this.prevPage <= this.pageCount) {
  584. this.search.page = this.prevPage;
  585. }
  586. if (this.search.page > this.pageCount) {
  587. this.prevPage = this.search.page;
  588. this.search.page = 1;
  589. }
  590. }
  591. getBookCount(item) {
  592. let result = '';
  593. if (!this.showCounts || item.count === undefined)
  594. return result;
  595. if (item.loadedBooks) {
  596. let count = 0;
  597. for (const book of item.loadedBooks) {
  598. if (book.type == 'series')
  599. count += book.books.length;
  600. else
  601. count++;
  602. }
  603. result = `${count}/${item.count}`;
  604. } else
  605. result = `#/${item.count}`;
  606. return `(${result})`;
  607. }
  608. selectAuthor(author) {
  609. this.search.author = `=${author}`;
  610. this.scrollToTop();
  611. }
  612. selectSeries(series) {
  613. this.search.series = `=${series}`;
  614. }
  615. async download(book, action) {
  616. if (this.downloadFlag)
  617. return;
  618. this.downloadFlag = true;
  619. (async() => {
  620. await utils.sleep(200);
  621. if (this.downloadFlag)
  622. this.loadingMessage2 = 'Подготовка файла...';
  623. })();
  624. try {
  625. const makeValidFilenameOrEmpty = (s) => {
  626. try {
  627. return utils.makeValidFilename(s);
  628. } catch(e) {
  629. return '';
  630. }
  631. };
  632. //имя файла
  633. let downFileName = 'default-name';
  634. const author = book.author.split(',');
  635. const at = [author[0], book.title];
  636. downFileName = makeValidFilenameOrEmpty(at.filter(r => r).join(' - '))
  637. || makeValidFilenameOrEmpty(at[0])
  638. || makeValidFilenameOrEmpty(at[1])
  639. || downFileName;
  640. downFileName = downFileName.substring(0, 100);
  641. const ext = `.${book.ext}`;
  642. if (downFileName.substring(downFileName.length - ext.length) != ext)
  643. downFileName += ext;
  644. const bookPath = `${book.folder}/${book.file}${ext}`;
  645. //подготовка
  646. const response = await this.api.getBookLink({bookPath, downFileName});
  647. const link = response.link;
  648. const href = `${window.location.origin}${link}`;
  649. if (action == 'download') {
  650. //скачивание
  651. const d = this.$refs.download;
  652. d.href = href;
  653. d.download = downFileName;
  654. d.click();
  655. } else if (action == 'copyLink') {
  656. //копирование ссылки
  657. if (utils.copyTextToClipboard(href))
  658. this.$root.notify.success('Ссылка успешно скопирована');
  659. else
  660. this.$root.notify.error('Копирование ссылки не удалось');
  661. } else if (action == 'readBook') {
  662. //читать
  663. const url = this.config.bookReadLink.replace('${DOWNLOAD_LINK}', href);
  664. window.open(url, '_blank');
  665. }
  666. } catch(e) {
  667. this.$root.stdDialog.alert(e.message, 'Ошибка');
  668. } finally {
  669. this.downloadFlag = false;
  670. this.loadingMessage2 = '';
  671. }
  672. }
  673. bookEvent(event) {
  674. switch (event.action) {
  675. case 'titleClick':
  676. this.search.title = `=${event.book.title}`;
  677. break;
  678. case 'download':
  679. case 'copyLink':
  680. case 'readBook':
  681. this.download(event.book, event.action);//no await
  682. break;
  683. }
  684. }
  685. isExpanded(item) {
  686. return this.expanded.indexOf(item.author) >= 0;
  687. }
  688. isExpandedSeries(seriesItem) {
  689. return this.expandedSeries.indexOf(seriesItem.key) >= 0;
  690. }
  691. isFoundSeriesBook(book, subbook) {
  692. if (!book.booksSet) {
  693. book.booksSet = new Set(book.books.map(b => b.id));
  694. }
  695. return book.booksSet.has(subbook.id);
  696. }
  697. setSetting(name, newValue) {
  698. this.commit('setSettings', {[name]: _.cloneDeep(newValue)});
  699. }
  700. setDefaults() {
  701. this.search = Object.assign({}, this.search, {
  702. author: '',
  703. series: '',
  704. title: '',
  705. genre: '',
  706. lang: this.langDefault,
  707. });
  708. }
  709. async updateSearchFromRouteQuery(to) {
  710. if (this.routeUpdating)
  711. return;
  712. const query = to.query;
  713. this.search = Object.assign({}, this.search, {
  714. author: query.author || '',
  715. series: query.series || '',
  716. title: query.title || '',
  717. genre: query.genre || '',
  718. lang: (typeof(query.lang) == 'string' ? query.lang : this.langDefault),
  719. page: parseInt(query.page, 10) || 1,
  720. limit: parseInt(query.limit, 10) || this.search.limit,
  721. });
  722. if (this.search.limit > 1000)
  723. this.search.limit = 1000;
  724. }
  725. updateRouteQueryFromSearch() {
  726. this.routeUpdating = true;
  727. try {
  728. const oldQuery = this.$route.query;
  729. const query = _.pickBy(this.search);
  730. if (this.search.lang == this.langDefault) {
  731. delete query.lang;
  732. } else {
  733. query.lang = this.search.lang;
  734. }
  735. const diff = diffUtils.getObjDiff(oldQuery, query);
  736. if (!diffUtils.isEmptyObjDiff(diff)) {
  737. this.$router.replace({query});
  738. }
  739. } finally {
  740. (async() => {
  741. await utils.sleep(100);
  742. this.routeUpdating = false;
  743. })();
  744. }
  745. }
  746. async expandAuthor(item) {
  747. const expanded = _.cloneDeep(this.expanded);
  748. const key = item.author;
  749. if (!this.isExpanded(item)) {
  750. expanded.push(key);
  751. await this.getBooks(item);
  752. if (expanded.length > 10) {
  753. expanded.shift();
  754. }
  755. this.setSetting('expanded', expanded);
  756. this.ignoreScroll();
  757. } else {
  758. const i = expanded.indexOf(key);
  759. if (i >= 0) {
  760. expanded.splice(i, 1);
  761. this.setSetting('expanded', expanded);
  762. }
  763. }
  764. }
  765. expandSeries(seriesItem) {
  766. const expandedSeries = _.cloneDeep(this.expandedSeries);
  767. const key = seriesItem.key;
  768. if (!this.isExpandedSeries(seriesItem)) {
  769. expandedSeries.push(key);
  770. if (expandedSeries.length > 100) {
  771. expandedSeries.shift();
  772. }
  773. this.getSeriesBooks(seriesItem); //no await
  774. this.setSetting('expandedSeries', expandedSeries);
  775. this.ignoreScroll();
  776. } else {
  777. const i = expandedSeries.indexOf(key);
  778. if (i >= 0) {
  779. expandedSeries.splice(i, 1);
  780. this.setSetting('expandedSeries', expandedSeries);
  781. }
  782. }
  783. }
  784. async loadBooks(authorId) {
  785. try {
  786. let result;
  787. if (this.abCacheEnabled) {
  788. const key = `${authorId}-${this.inpxHash}`;
  789. const data = await authorBooksStorage.getData(key);
  790. if (data) {
  791. result = JSON.parse(data);
  792. } else {
  793. result = await this.api.getBookList(authorId);
  794. await authorBooksStorage.setData(key, JSON.stringify(result));
  795. }
  796. } else {
  797. result = await this.api.getBookList(authorId);
  798. }
  799. return (result.books ? JSON.parse(result.books) : []);
  800. } catch (e) {
  801. this.$root.stdDialog.alert(e.message, 'Ошибка');
  802. }
  803. }
  804. async loadSeriesBooks(series) {
  805. try {
  806. let result;
  807. if (this.abCacheEnabled) {
  808. const key = `series-${series}-${this.inpxHash}`;
  809. const data = await authorBooksStorage.getData(key);
  810. if (data) {
  811. result = JSON.parse(data);
  812. } else {
  813. result = await this.api.getSeriesBookList(series);
  814. await authorBooksStorage.setData(key, JSON.stringify(result));
  815. }
  816. } else {
  817. result = await this.api.getSeriesBookList(series);
  818. }
  819. return (result.books ? JSON.parse(result.books) : []);
  820. } catch (e) {
  821. this.$root.stdDialog.alert(e.message, 'Ошибка');
  822. }
  823. }
  824. async getSeriesBooks(seriesItem) {
  825. //асинхронно подгружаем все книги серии, блокируем повторный вызов
  826. if (seriesItem.allBooks === null) {
  827. seriesItem.allBooks = undefined;
  828. (async() => {
  829. seriesItem.allBooks = await this.loadSeriesBooks(seriesItem.series);
  830. if (seriesItem.allBooks) {
  831. seriesItem.allBooks = seriesItem.allBooks.filter(book => (this.showDeleted || !book.del));
  832. this.sortSeriesBooks(seriesItem.allBooks);
  833. } else {
  834. seriesItem.allBooks = null;
  835. }
  836. })();
  837. }
  838. }
  839. filterBooks(loadedBooks) {
  840. const s = this.search;
  841. const emptyFieldValue = '?';
  842. const ruAlphabet = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
  843. const enAlphabet = 'abcdefghijklmnopqrstuvwxyz';
  844. const enru = new Set((ruAlphabet + enAlphabet).split(''));
  845. const splitAuthor = (author) => {
  846. if (!author) {
  847. author = emptyFieldValue;
  848. }
  849. const result = author.split(',');
  850. if (result.length > 1)
  851. result.push(author);
  852. return result;
  853. };
  854. const filterBySearch = (bookValue, searchValue) => {
  855. if (!searchValue)
  856. return true;
  857. bookValue = bookValue.toLowerCase();
  858. searchValue = searchValue.toLowerCase();
  859. //особая обработка префиксов
  860. if (searchValue[0] == '=') {
  861. searchValue = searchValue.substring(1);
  862. return bookValue == searchValue;
  863. } else if (searchValue[0] == '*') {
  864. searchValue = searchValue.substring(1);
  865. return bookValue.indexOf(searchValue) >= 0;
  866. } else if (searchValue[0] == '#') {
  867. searchValue = searchValue.substring(1);
  868. return !bookValue || (!enru.has(bookValue[0]) && bookValue.indexOf(searchValue) >= 0);
  869. } else if (searchValue[0] == '?') {
  870. return bookValue == '' || bookValue.indexOf(searchValue) == 0;
  871. } else {
  872. return bookValue.indexOf(searchValue) == 0;
  873. }
  874. };
  875. return loadedBooks.filter((book) => {
  876. //author
  877. let authorFound = false;
  878. const authors = splitAuthor(book.author);
  879. for (const a of authors) {
  880. if (filterBySearch(a, s.author)) {
  881. authorFound = true;
  882. break;
  883. }
  884. }
  885. //genre
  886. let genreFound = !s.genre;
  887. if (!genreFound) {
  888. const searchGenres = new Set(s.genre.split(','));
  889. const bookGenres = book.genre.split(',');
  890. for (let g of bookGenres) {
  891. if (!g)
  892. g = emptyFieldValue;
  893. if (searchGenres.has(g)) {
  894. genreFound = true;
  895. break;
  896. }
  897. }
  898. }
  899. //lang
  900. let langFound = !s.lang;
  901. if (!langFound) {
  902. const searchLang = new Set(s.lang.split(','));
  903. langFound = searchLang.has(book.lang || emptyFieldValue);
  904. }
  905. return (this.showDeleted || !book.del)
  906. && authorFound
  907. && filterBySearch(book.series, s.series)
  908. && filterBySearch(book.title, s.title)
  909. && genreFound
  910. && langFound
  911. ;
  912. });
  913. }
  914. showMore(item, all = false) {
  915. if (item.loadedBooks) {
  916. const currentLen = (item.books ? item.books.length : 0);
  917. let books;
  918. if (all) {
  919. books = item.loadedBooks;
  920. } else {
  921. books = item.loadedBooks.slice(0, currentLen + showMoreCount);
  922. }
  923. item.showMore = (books.length < item.loadedBooks.length);
  924. item.books = books;
  925. }
  926. }
  927. sortSeriesBooks(books) {
  928. books.sort((a, b) => {
  929. const dserno = (a.serno || Number.MAX_VALUE) - (b.serno || Number.MAX_VALUE);
  930. const dtitle = a.title.localeCompare(b.title);
  931. const dext = a.ext.localeCompare(b.ext);
  932. return (dserno ? dserno : (dtitle ? dtitle : dext));
  933. });
  934. }
  935. async getBooks(item) {
  936. if (item.books) {
  937. if (item.count > maxItemCount) {
  938. item.bookLoading = true;
  939. await utils.sleep(1);//для перерисовки списка
  940. item.bookLoading = false;
  941. }
  942. return;
  943. }
  944. if (!this.getBooksFlag)
  945. this.getBooksFlag = 0;
  946. this.getBooksFlag++;
  947. if (item.count > maxItemCount)
  948. item.bookLoading = true;
  949. try {
  950. if (this.getBooksFlag == 1) {
  951. (async() => {
  952. await utils.sleep(500);
  953. if (this.getBooksFlag > 0)
  954. this.loadingMessage2 = 'Загрузка списка книг...';
  955. })();
  956. }
  957. const loadedBooks = await this.loadBooks(item.key);
  958. const filtered = this.filterBooks(loadedBooks);
  959. const prepareBook = (book) => {
  960. return Object.assign(
  961. {
  962. key: book.id,
  963. type: 'book',
  964. },
  965. book
  966. );
  967. };
  968. //объединение по сериям
  969. const books = [];
  970. const seriesIndex = {};
  971. for (const book of filtered) {
  972. if (book.series) {
  973. let index = seriesIndex[book.series];
  974. if (index === undefined) {
  975. index = books.length;
  976. books.push(reactive({
  977. key: `${item.author}-${book.series}`,
  978. type: 'series',
  979. series: book.series,
  980. allBooks: null,
  981. showAllBooks: false,
  982. books: [],
  983. }));
  984. seriesIndex[book.series] = index;
  985. }
  986. books[index].books.push(prepareBook(book));
  987. } else {
  988. books.push(prepareBook(book));
  989. }
  990. }
  991. //сортировка
  992. books.sort((a, b) => {
  993. if (a.type == 'series') {
  994. return (b.type == 'series' ? a.key.localeCompare(b.key) : -1);
  995. } else {
  996. return (b.type == 'book' ? a.title.localeCompare(b.title) : 1);
  997. }
  998. });
  999. //сортировка внутри серий
  1000. for (const book of books) {
  1001. if (book.type == 'series') {
  1002. this.sortSeriesBooks(book.books);
  1003. //асинхронно подгрузим все книги серии, если она раскрыта
  1004. if (this.isExpandedSeries(book)) {
  1005. this.getSeriesBooks(book);//no await
  1006. }
  1007. }
  1008. }
  1009. if (books.length == 1 && books[0].type == 'series' && !this.isExpandedSeries(books[0])) {
  1010. this.expandSeries(books[0]);
  1011. }
  1012. item.loadedBooks = books;
  1013. this.showMore(item);
  1014. await this.$nextTick();
  1015. } finally {
  1016. item.bookLoading = false;
  1017. this.getBooksFlag--;
  1018. if (this.getBooksFlag == 0)
  1019. this.loadingMessage2 = '';
  1020. }
  1021. }
  1022. async updateGenreTreeIfNeeded() {
  1023. try {
  1024. if (this.genreTreeInpxHash !== this.inpxHash) {
  1025. let result;
  1026. if (this.abCacheEnabled) {
  1027. const key = `genre-tree-${this.inpxHash}`;
  1028. const data = await authorBooksStorage.getData(key);
  1029. if (data) {
  1030. result = JSON.parse(data);
  1031. } else {
  1032. result = await this.api.getGenreTree();
  1033. await authorBooksStorage.setData(key, JSON.stringify(result));
  1034. }
  1035. } else {
  1036. result = await this.api.getGenreTree();
  1037. }
  1038. this.genreTree = result.genreTree;
  1039. this.langList = result.langList;
  1040. this.genreTreeInpxHash = result.inpxHash;
  1041. }
  1042. } catch (e) {
  1043. this.$root.stdDialog.alert(e.message, 'Ошибка');
  1044. }
  1045. }
  1046. async updateTableData() {
  1047. let result = [];
  1048. const expandedSet = new Set(this.expanded);
  1049. const authors = this.searchResult.author;
  1050. if (!authors)
  1051. return;
  1052. let num = 0;
  1053. this.hiddenCount = 0;
  1054. for (const rec of authors) {
  1055. this.cachedAuthors[rec.author] = rec;
  1056. const count = (this.showDeleted ? rec.bookCount + rec.bookDelCount : rec.bookCount);
  1057. if (!count) {
  1058. this.hiddenCount++;
  1059. continue;
  1060. }
  1061. const item = reactive({
  1062. key: rec.id,
  1063. num,
  1064. author: rec.author,
  1065. name: rec.author.replace(/,/g, ', '),
  1066. count,
  1067. loadedBooks: false,
  1068. books: false,
  1069. bookLoading: false,
  1070. showMore: false,
  1071. });
  1072. num++;
  1073. if (expandedSet.has(item.author)) {
  1074. if (authors.length > 1 || item.count > maxItemCount)
  1075. this.getBooks(item);//no await
  1076. else
  1077. await this.getBooks(item);
  1078. }
  1079. result.push(item);
  1080. }
  1081. if (result.length == 1 && !this.isExpanded(result[0])) {
  1082. this.expandAuthor(result[0]);
  1083. }
  1084. this.tableData = result;
  1085. }
  1086. async refresh() {
  1087. if (!this.ready)
  1088. return;
  1089. this.updateRouteQueryFromSearch();
  1090. //оптимизация
  1091. if (this.abCacheEnabled && this.search.author && this.search.author[0] == '=') {
  1092. const authorSearch = this.search.author.substring(1);
  1093. const author = this.cachedAuthors[authorSearch];
  1094. if (author) {
  1095. const key = `${author.id}-${this.inpxHash}`;
  1096. let data = await authorBooksStorage.getData(key);
  1097. if (data) {
  1098. this.queryFound = 1;
  1099. this.totalFound = 1;
  1100. this.searchResult = {author: [author]};
  1101. await this.updateTableData();
  1102. return;
  1103. }
  1104. }
  1105. }
  1106. //параметры запроса
  1107. const offset = (this.search.page - 1)*this.search.limit;
  1108. const newQuery = _.cloneDeep(this.search);
  1109. newQuery.offset = offset;
  1110. this.queryExecute = newQuery;
  1111. if (this.refreshing)
  1112. return;
  1113. this.refreshing = true;
  1114. try {
  1115. while (this.queryExecute) {
  1116. const query = this.queryExecute;
  1117. this.queryExecute = null;
  1118. let inSearch = true;
  1119. (async() => {
  1120. await utils.sleep(500);
  1121. if (inSearch)
  1122. this.loadingMessage = 'Поиск авторов...';
  1123. })();
  1124. try {
  1125. const result = await this.api.search(query);
  1126. this.queryFound = result.author.length;
  1127. this.totalFound = result.totalFound;
  1128. this.inpxHash = result.inpxHash;
  1129. this.searchResult = result;
  1130. await utils.sleep(1);
  1131. if (!this.queryExecute) {
  1132. await this.updateGenreTreeIfNeeded();
  1133. await this.updateTableData();
  1134. this.scrollToTop();
  1135. }
  1136. } catch (e) {
  1137. this.$root.stdDialog.alert(e.message, 'Ошибка');
  1138. } finally {
  1139. inSearch = false;
  1140. this.loadingMessage = '';
  1141. }
  1142. }
  1143. } finally {
  1144. this.refreshing = false;
  1145. }
  1146. }
  1147. }
  1148. export default vueComponent(Search);
  1149. //-----------------------------------------------------------------------------
  1150. </script>
  1151. <style scoped>
  1152. .root {
  1153. }
  1154. .tool-panel {
  1155. border-bottom: 1px solid black;
  1156. }
  1157. .header {
  1158. min-height: 30px;
  1159. }
  1160. .clickable {
  1161. color: blue;
  1162. cursor: pointer;
  1163. }
  1164. .clickable2 {
  1165. cursor: pointer;
  1166. }
  1167. .odd-author {
  1168. background-color: #e8e8e8;
  1169. }
  1170. .book-row {
  1171. margin-left: 50px;
  1172. }
  1173. </style>