From 9f4e72a0e13a188789814f54ef8afe362a89d02e Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 18 Mar 2020 15:06:29 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D1=85=D0=BE=D1=82=D0=BA=D0=B5=D1=8F=D0=BC=D0=B8?=
 =?UTF-8?q?,=20=D0=BF=D1=80=D0=BE=D0=BC=D0=B5=D0=B6=D1=83=D1=82=D0=BE?=
 =?UTF-8?q?=D1=87=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B8=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/SettingsPage/SettingsPage.vue      |   3 +
 .../SettingsPage/UserHotKeys/UserHotKeys.vue  | 111 ++++++++++++++++++
 .../Reader/SettingsPage/include/KeysTab.inc   |   4 +
 client/quasar.js                              |   2 +
 client/store/modules/reader.js                |   2 +-
 5 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue

diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue
index 5954962e..0412273f 100644
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/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);
diff --git a/client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue b/client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue
new file mode 100644
index 00000000..1535c6af
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/components/Reader/SettingsPage/include/KeysTab.inc b/client/components/Reader/SettingsPage/include/KeysTab.inc
index a33c44ce..6e53e36c 100644
--- a/client/components/Reader/SettingsPage/include/KeysTab.inc
+++ b/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>
\ No newline at end of file
diff --git a/client/quasar.js b/client/quasar.js
index f4325299..05526c9b 100644
--- a/client/quasar.js
+++ b/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 
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index cd9fa0a8..26307ddf 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -1,6 +1,6 @@
 const readerActions = {
     'help': 'Справка',
-    'loader': 'Загрузить книгу',
+    'loader': 'Страница загрузки',
     'settings': 'Настроить',
     'undoAction': 'Действие назад',
     'redoAction': 'Действие вперед',