Работа над проектом

client/components/Search/BookView/BookView.vue

@@ -1,9 +1,27 @@
 <template>
-    <div>
-        <div class="q-my-sm" @click="selectTitle(book.title)">
-            {{ book.title }}
-            <br>{{ book.src }}
+    <div class="row items-center">
+        <div class="q-my-sm clickable2" @click="selectTitle">
+            {{ book.serno ? `${book.serno}. ` : '' }}
+            <span class="text-blue-10">{{ book.title }}</span>
         </div>
+
+        <div class="q-ml-sm">
+            {{ bookSize }}, {{ book.ext }}
+        </div>
+
+        <div class="q-ml-sm clickable" @click="download">
+            (скачать)
+        </div>
+
+        <div class="q-ml-sm clickable" @click="copyLink">
+            <q-icon name="la la-copy" size="20px" />
+        </div>
+
+        <div class="q-ml-sm">
+            {{ bookGenre }}
+        </div>
+
+        {{ book.src1 }}
     </div>
 </template>
 
@@ -21,11 +39,44 @@ class BookView {
     _options = componentOptions;
     _props = {
         book: Object,
+        genreTree: Array,
     };
 
     created() {
     }
 
+    get bookSize() {
+        let size = this.book.size/1024;
+        let unit = 'KB';
+        if (size > 1024) {
+            size = size/1024;
+            unit = 'MB';
+        }
+        return `${size.toFixed(0)}${unit}`;
+    }
+
+    get bookGenre() {
+        let result = [];
+        const genre = new Set(this.book.genre.split(','));
+
+        for (const section of this.genreTree) {
+            for (const g of section.value)
+                if (genre.has(g.value))
+                    result.push(g.name);
+        }
+
+        return `(${result.join(', ')})`;
+    }
+
+    selectTitle() {
+        this.$emit('bookEvent', {action: 'titleClick', book: this.book});
+    }
+
+    download() {
+    }
+
+    copyLink() {
+    }
 }
 
 export default vueComponent(BookView);
@@ -33,4 +84,13 @@ export default vueComponent(BookView);
 </script>
 
 <style scoped>
+.clickable {
+    color: blue;
+    cursor: pointer;
+}
+
+.clickable2 {
+    cursor: pointer;
+}
+
 </style>