Работа над HistoryPage

client/components/Reader/HistoryPage/HistoryPage.vue

@@ -1,13 +1,56 @@
 <template>
     <div ref="main" class="main">
-        <Window>
+        <Window class="window">
             <template slot="header">
-                Прочитаные книги:
+                Последние 100 открытых книг
             </template>
 
-            <div class="list">
-                Test
-            </div>
+            <el-table
+                :data="tableData"
+                style="width: 100%"
+                size="mini"
+                height="1px"
+                stripe
+                border
+                :default-sort = "{prop: 'touchTime', order: 'descending'}"
+                >
+
+                <el-table-column
+                    prop="touchTime"
+                    min-width="120px"
+                    sortable
+                    >
+                    <template slot="header" slot-scope="scope">
+                        Время<br>просмотра
+                    </template>
+                </el-table-column>
+
+                <el-table-column
+                    min-width="300px"
+                    >
+                    <template slot="header" slot-scope="scope">
+                        <el-input
+                            v-model="search"
+                            size="mini"
+                            placeholder="Найти"/>
+                    </template>
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.desc.author }}</span><br>
+                        <span>{{ `"${scope.row.desc.title}"` }}</span>
+                    </template>                    
+                </el-table-column>
+
+                <el-table-column
+                    >
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            @click="handleDel(scope.$index, scope.row)">Убрать
+                        </el-button>
+                    </template>
+                </el-table-column>
+
+            </el-table>
         </Window>
     </div>
 </template>
@@ -16,7 +59,8 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
-
+import _ from 'lodash';
+import {formatDate} from '../../../share/utils';
 import Window from '../../share/Window.vue';
 
 export default @Component({
@@ -25,11 +69,44 @@ export default @Component({
     },
 })
 class HistoryPage extends Vue {
+    search = null;
+
     created() {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
     }
 
+    get tableData() {
+        const state = this.reader;
+        let result = [];
+
+        for (let bookKey in state.openedBook) {
+            const book = state.openedBook[bookKey];
+            let touchTime = new Date();
+            touchTime.setTime(book.touchTime);
+
+            result.push({
+                touchTime: formatDate(touchTime),
+                desc: {
+                    title: book.fb2.bookTitle,
+                    author: _.compact([
+                        book.fb2.lastName,
+                        book.fb2.firstName,
+                        book.fb2.middleName
+                    ]).join(' '),
+                }
+            });
+        }
+
+        return result;
+    }
+
+    keyHook(event) {
+        if (event.type == 'keydown' && event.code == 'Escape') {
+            this.$emit('history-toggle');
+            return true;
+        }
+    }
 }
 //-----------------------------------------------------------------------------
 </script>
@@ -42,11 +119,9 @@ class HistoryPage extends Vue {
     align-items: center;
 }
 
-.list {
-    flex: 1;
-    background-color: #ffffff;
+.window {
+    min-width: 200px;
+    max-width: 600px;
 }
 
-.list-item {
-}
 </style>