Работа над BookInfoDialog

client/components/App.vue

@@ -133,6 +133,10 @@ body, html, #app {
     animation: rotating 2s linear infinite;
 }
 
+.q-dialog__inner--minimized > div {
+    max-width: 800px;
+}
+
 @keyframes rotating { 
     from { 
         transform: rotate(0deg); 

client/components/Search/BookInfoDialog/BookInfoDialog.vue

@@ -8,7 +8,8 @@
             </div>
         </template>
 
-        <div ref="box" class="column q-mt-xs overflow-auto no-wrap" style="width: 200px; padding: 0px 10px 10px 10px;">
+        <div ref="box" class="column q-mt-xs overflow-auto no-wrap" style="padding: 0px 10px 10px 10px;">
+            <div v-html="annotation" />
         </div>
 
         <template #footer>
@@ -24,6 +25,7 @@
 import vueComponent from '../../vueComponent.js';
 
 import Dialog from '../../share/Dialog.vue';
+import XmlParser from '../../../../server/core/xml/XmlParser';
 
 const componentOptions = {
     components: {
@@ -36,23 +38,50 @@ const componentOptions = {
         dialogVisible(newValue) {
             this.$emit('update:modelValue', newValue);
         },
+        bookInfo() {
+            this.parseBookInfo();
+        }
     }
 };
 class BookInfoDialog {
     _options = componentOptions;
     _props = {
         modelValue: Boolean,
+        bookInfo: Object,
     };
 
     dialogVisible = false;
 
+    //info props
+    annotation = '';
+
     created() {
         this.commit = this.$store.commit;
+        this.parseBookInfo();
     }
 
     mounted() {
     }
 
+    parseBookInfo() {
+        const bookInfo = this.bookInfo;
+        const xml = new XmlParser();
+
+        //defaults
+        this.annotation = '';
+
+        if (bookInfo.fb2) {
+            const desc = xml.navigator(bookInfo.fb2);
+
+            //annotation
+            const annObj = desc.v('description/title-info/annotation');
+            if (annObj) {
+                this.annotation = xml.fromObject(annObj).toString({noHeader: true});
+                this.annotation = this.annotation.replace(/<p>/g, `<p class="p-annotation">`);
+            }
+        }
+    }
+
     okClick() {
         this.dialogVisible = false;
     }
@@ -63,4 +92,13 @@ export default vueComponent(BookInfoDialog);
 </script>
 
 <style scoped>
-</style>
+</style>
+
+<style>
+.p-annotation {
+    text-indent: 20px;
+    text-align: justify;
+    padding: 0;
+    margin: 0;
+}
+</style>

client/components/Search/Search.vue

@@ -250,7 +250,7 @@
         <SelectLangDialog v-model="selectLangDialogVisible" v-model:lang="search.lang" :lang-list="langList" :lang-default="langDefault" />        
         <SelectLibRateDialog v-model="selectLibRateDialogVisible" v-model:librate="search.librate" />
         <SelectDateDialog v-model="selectDateDialogVisible" v-model:date="search.date" />
-        <BookInfoDialog v-model="bookInfoDialogVisible" book-info="bookInfo" />
+        <BookInfoDialog v-model="bookInfoDialogVisible" :book-info="bookInfo" />
     </div>
 </template>
 

server/core/xml/ObjectNavigator.js

@@ -59,7 +59,7 @@ class ObjectNavigator {
             return null;
 
         raw = (Array.isArray(raw) ? raw : [raw]);
-        
+
         const result = [];
         for (const r of raw)
             result.push(new ObjectNavigator(r));
@@ -80,6 +80,11 @@ class ObjectNavigator {
         return this.raw;
     }
 
+    v(selector = '') {
+        const res = this.$(selector);
+        return (res ? res.value : null);
+    }
+
     text(selector = '') {
         const res = this.$(`${selector}/*TEXT`);
         return (res ? res.value : null);