Рефакторинг

client/components/Search/Search.vue

@@ -210,42 +210,7 @@
             </div>
         </div>
 
-        <Dialog v-model="settingsDialogVisible">
+        <SettingsDialog v-model="settingsDialogVisible" />
-            <template #header>
-                <div class="row items-center" style="font-size: 110%">
-                    <q-icon class="q-mr-sm text-green" name="la la-cog" size="28px"></q-icon>
-                    Настройки
-                </div>
-            </template>
-
-            <div class="q-mx-md column" style="min-width: 300px; font-size: 120%;">
-                <div class="row items-center q-ml-sm">
-                    <div class="q-mr-sm">
-                        Результатов на странице
-                    </div>
-                    <q-select
-                        v-model="limit" :options="limitOptions" class="bg-white"
-                        dropdown-icon="la la-angle-down la-sm"
-                        outlined dense emit-value map-options
-                    />
-                </div>
-
-                <q-checkbox v-model="showCounts" size="36px" label="Показывать количество" />                
-                <q-checkbox v-model="showRates" size="36px" label="Показывать оценки" />
-                <q-checkbox v-model="showInfo" size="36px" label="Показывать кнопку (инфо)" />
-                <q-checkbox v-model="showGenres" size="36px" label="Показывать жанры" />
-                <q-checkbox v-model="showDates" size="36px" label="Показывать даты поступления" />
-                <q-checkbox v-model="showDeleted" size="36px" label="Показывать удаленные" />
-                <q-checkbox v-model="abCacheEnabled" size="36px" label="Кешировать запросы" />
-            </div>
-
-            <template #footer>
-                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click.stop.prevent="settingsDialogVisible = false">
-                    OK
-                </q-btn>
-            </template>
-        </Dialog>
-
         <SelectGenreDialog v-model="selectGenreDialogVisible" v-model:genre="search.genre" :genre-tree="genreTree" />
         <SelectLangDialog v-model="selectLangDialogVisible" v-model:lang="search.lang" :lang-list="langList" :lang-default="langDefault" />        
         <SelectLibRateDialog v-model="selectLibRateDialogVisible" v-model:librate="search.librate" />
@@ -263,6 +228,7 @@ import SeriesList from './SeriesList/SeriesList.vue';
 import TitleList from './TitleList/TitleList.vue';
 
 import PageScroller from './PageScroller/PageScroller.vue';
+import SettingsDialog from './SettingsDialog/SettingsDialog.vue';
 import SelectGenreDialog from './SelectGenreDialog/SelectGenreDialog.vue';
 import SelectLangDialog from './SelectLangDialog/SelectLangDialog.vue';
 import SelectLibRateDialog from './SelectLibRateDialog/SelectLibRateDialog.vue';
@@ -290,6 +256,7 @@ const componentOptions = {
         SeriesList,
         TitleList,
         PageScroller,
+        SettingsDialog,
         SelectGenreDialog,
         SelectLangDialog,
         SelectLibRateDialog,
@@ -328,27 +295,6 @@ const componentOptions = {
 
             this.updatePageCount();
         },
-        showCounts(newValue) {
-            this.setSetting('showCounts', newValue);
-        },
-        showRates(newValue) {
-            this.setSetting('showRates', newValue);
-        },
-        showInfo(newValue) {
-            this.setSetting('showInfo', newValue);
-        },
-        showGenres(newValue) {
-            this.setSetting('showGenres', newValue);
-        },
-        showDates(newValue) {
-            this.setSetting('showDates', newValue);
-        },
-        showDeleted(newValue) {
-            this.setSetting('showDeleted', newValue);
-        },
-        abCacheEnabled(newValue) {
-            this.setSetting('abCacheEnabled', newValue);
-        },
         $route(to) {
             this.updateListFromRoute(to);
             this.updateSearchFromRouteQuery(to);
@@ -436,12 +382,6 @@ class Search {
     prevManualDate = '';
 
     //settings
-    showCounts = true;
-    showRates = true;
-    showInfo = true;
-    showGenres = true;
-    showDates = true;
-    showDeleted = false;
     abCacheEnabled = true;
     langDefault = '';
     limit = 20;
@@ -464,16 +404,6 @@ class Search {
 
     bookInfo = {};
 
-    limitOptions = [
-        {label: '10', value: 10},
-        {label: '20', value: 20},
-        {label: '50', value: 50},
-        {label: '100', value: 100},
-        {label: '200', value: 200},
-        {label: '500', value: 500},
-        {label: '1000', value: 1000},
-    ];
-
     searchDateOptions = [
         {label: 'сегодня', value: 'today'},
         {label: 'за 3 дня', value: '3days'},
@@ -530,12 +460,6 @@ class Search {
         this.extendedParams = settings.extendedParams;
         this.expanded = _.cloneDeep(settings.expanded);
         this.expandedSeries = _.cloneDeep(settings.expandedSeries);
-        this.showCounts = settings.showCounts;
-        this.showRates = settings.showRates;
-        this.showInfo = settings.showInfo;
-        this.showGenres = settings.showGenres;
-        this.showDates = settings.showDates;
-        this.showDeleted = settings.showDeleted;
         this.abCacheEnabled = settings.abCacheEnabled;
         this.langDefault = settings.langDefault;
     }

client/components/Search/SettingsDialog/SettingsDialog.vue

@@ -0,0 +1,151 @@
+<template>
+    <Dialog ref="dialog" v-model="dialogVisible">
+        <template #header>
+            <div class="row items-center" style="font-size: 110%">
+                <q-icon class="q-mr-sm text-green" name="la la-cog" size="28px"></q-icon>
+                Настройки
+            </div>
+        </template>
+
+        <div class="q-mx-md column" style="min-width: 300px; font-size: 120%;">
+            <div class="row items-center q-ml-sm">
+                <div class="q-mr-sm">
+                    Результатов на странице
+                </div>
+                <q-select
+                    v-model="limit" :options="limitOptions" class="bg-white"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                />
+            </div>
+
+            <q-checkbox v-model="showCounts" size="36px" label="Показывать количество" />                
+            <q-checkbox v-model="showRates" size="36px" label="Показывать оценки" />
+            <q-checkbox v-model="showInfo" size="36px" label="Показывать кнопку (инфо)" />
+            <q-checkbox v-model="showGenres" size="36px" label="Показывать жанры" />
+            <q-checkbox v-model="showDates" size="36px" label="Показывать даты поступления" />
+            <q-checkbox v-model="showDeleted" size="36px" label="Показывать удаленные" />
+            <q-checkbox v-model="abCacheEnabled" size="36px" label="Кешировать запросы" />
+        </div>
+
+        <template #footer>
+            <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
+                OK
+            </q-btn>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+import Dialog from '../../share/Dialog.vue';
+
+const componentOptions = {
+    components: {
+        Dialog
+    },
+    watch: {
+        modelValue(newValue) {
+            this.dialogVisible = newValue;
+        },
+        dialogVisible(newValue) {
+            this.$emit('update:modelValue', newValue);
+        },
+
+        settings() {
+            this.loadSettings();
+        },
+        limit(newValue) {
+            this.commit('setSettings', {'limit': newValue});
+        },
+        showCounts(newValue) {
+            this.commit('setSettings', {'showCounts': newValue});
+        },
+        showRates(newValue) {
+            this.commit('setSettings', {'showRates': newValue});
+        },
+        showInfo(newValue) {
+            this.commit('setSettings', {'showInfo': newValue});
+        },
+        showGenres(newValue) {
+            this.commit('setSettings', {'showGenres': newValue});
+        },
+        showDates(newValue) {
+            this.commit('setSettings', {'showDates': newValue});
+        },
+        showDeleted(newValue) {
+            this.commit('setSettings', {'showDeleted': newValue});
+        },
+        abCacheEnabled(newValue) {
+            this.commit('setSettings', {'abCacheEnabled': newValue});
+        },
+    }
+};
+class SettingsDialog {
+    _options = componentOptions;
+    _props = {
+        modelValue: Boolean,
+    };
+
+    dialogVisible = false;
+
+    //settings
+    limit = 20;
+    showCounts = true;
+    showRates = true;
+    showInfo = true;
+    showGenres = true;
+    showDates = true;
+    showDeleted = false;
+    abCacheEnabled = true;
+
+    limitOptions = [
+        {label: '10', value: 10},
+        {label: '20', value: 20},
+        {label: '50', value: 50},
+        {label: '100', value: 100},
+        {label: '200', value: 200},
+        {label: '500', value: 500},
+        {label: '1000', value: 1000},
+    ];
+
+    created() {
+        this.commit = this.$store.commit;
+
+        this.loadSettings();
+    }
+
+    mounted() {
+    }
+
+    get settings() {
+        return this.$store.state.settings;
+    }
+
+    loadSettings() {
+        const settings = this.settings;
+
+        this.limit = settings.limit;
+
+        this.showCounts = settings.showCounts;
+        this.showRates = settings.showRates;
+        this.showInfo = settings.showInfo;
+        this.showGenres = settings.showGenres;
+        this.showDates = settings.showDates;
+        this.showDeleted = settings.showDeleted;
+        this.abCacheEnabled = settings.abCacheEnabled;
+    }
+
+    okClick() {
+        this.dialogVisible = false;
+    }
+}
+
+export default vueComponent(SettingsDialog);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+</style>