Работа над хоткеями, промежуточный коммит

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -76,6 +76,8 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
+import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
+
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
 
@@ -85,6 +87,7 @@ export default @Component({
     components: {
         Window,
         NumInput,
+        UserHotKeys,
     },
     data: function() {
         return Object.assign({}, rstore.settingDefaults);

client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="table col column no-wrap">
+        <!-- header -->
+        <div class="table-row row">
+            <div class="desc q-pa-sm bg-green-4">Действие</div>
+            <div class="hotKeys col q-pa-sm bg-green-4 row no-wrap">
+                <span>Сочетания клавиш</span>
+                <q-input ref="input" outlined dense rounded bg-color="grey-4"
+                    placeholder="Найти"
+                    v-model="search"
+                    @click.stop
+                />                
+            </div>
+        </div>
+
+        <!-- body -->
+        <div class="table-row row" v-for="(action, index) in tableData" :key="index">
+            <div class="desc q-pa-sm">{{ rstore.readerActions[action] }}</div>
+            <div class="hotKeys col q-pa-sm">
+                <q-chip removable color="grey-8" text-color="white" v-for="(code, index) in value[action]" :key="index" @remove="removeCode(action, code)">
+                    {{ code }}
+                </q-chip>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import rstore from '../../../../store/modules/reader';
+//import * as utils from '../../share/utils';
+
+const UserHotKeysProps = Vue.extend({
+    props: {
+        value: Object,
+        //prop: { type: Number, default: 0 },
+    }
+});
+
+export default @Component({
+    watch: {
+        search: function() {
+            this.updateTableData();
+        },
+        value: function() {
+            this.updateTableData();
+        }
+    },
+})
+class UserHotKeys extends UserHotKeysProps {
+    search = '';
+    rstore = {};
+    tableData = [];
+
+    created() {
+        this.rstore = rstore;
+    }
+
+    mounted() {
+        this.updateTableData();
+    }
+
+    updateTableData() {
+        let result = rstore.hotKeys.map(hk => hk.name);
+
+        const search = this.search.toLowerCase();
+        const codesIncludeSearch = (action) => {
+            for (const code of this.value[action]) {
+                if (code.toLowerCase().includes(search))
+                    return true;
+            }
+            return false;
+        };
+
+        result = result.filter(item => {
+            return !search ||
+                rstore.readerActions[item].toLowerCase().includes(search) ||
+                codesIncludeSearch(item)
+        });
+
+        this.tableData = result;
+    }
+
+    removeCode(action, code) {
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.table {
+    border-left: 1px solid grey;
+    border-top: 1px solid grey;
+}
+
+.table-row {
+    border-right: 1px solid grey;
+    border-bottom: 1px solid grey;
+}
+
+.desc {
+    width: 100px;
+}
+
+.hotKeys {
+    border-left: 1px solid grey;    
+}
+</style>

client/components/Reader/SettingsPage/include/KeysTab.inc

@@ -11,3 +11,7 @@
     <div class="label-4"></div>
     <q-btn class="button" dense no-caps @click="addHotKeyCode">{{ testCode }}</q-btn>
 </div>
+
+<div class="item row">
+    <UserHotKeys v-model="userHotKeys" />
+</div>

client/quasar.js

@@ -30,6 +30,7 @@ import {QSelect} from 'quasar/src/components/select';
 import {QColor} from 'quasar/src/components/color';
 import {QPopupProxy} from 'quasar/src/components/popup-proxy';
 import {QDialog} from 'quasar/src/components/dialog';
+import {QChip} from 'quasar/src/components/chip';
 
 const components = {
     //QLayout,
@@ -55,6 +56,7 @@ const components = {
     QColor,
     QPopupProxy,
     QDialog,
+    QChip,
 };
 
 //directives 

client/store/modules/reader.js

@@ -1,6 +1,6 @@
 const readerActions = {
     'help': 'Справка',
-    'loader': 'Загрузить книгу',
+    'loader': 'Страница загрузки',
     'settings': 'Настроить',
     'undoAction': 'Действие назад',
     'redoAction': 'Действие вперед',