make performance threshold configurable

Signed-off-by: dartcafe <github@dartcafe.de>

4 files changed, 83 insertions, 5 deletions

diff --git a/src/js/components/Settings/PerformanceSettings.vue b/src/js/components/Settings/PerformanceSettings.vue
new file mode 100644
index 00000000..c41a44c1
--- /dev/null
+++ b/src/js/components/Settings/PerformanceSettings.vue
@@ -0,0 +1,75 @@
+<!--
+  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
+  -
+  - @author René Gieling <github@dartcafe.de>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<div class="user_settings">
+			{{ t('polls', 'Limit the amount of vote cells. If the threshold is reached, all other participants get hidden to avoid performance break downs. The default value is 1000.') }}
+			<input v-model="threshold"
+				type="text"
+				:placeholder="t('polls', 'Enter amount of maximal allowed vote boxes.')">
+		</div>
+	</div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex'
+
+export default {
+	name: 'PerformanceSettings',
+
+	computed: {
+		...mapState({
+			settings: (state) => state.settings.user,
+		}),
+
+		threshold: {
+			get() {
+				return this.settings.performanceThreshold
+			},
+			set(value) {
+				this.writeValue({ performanceThreshold: +value })
+			},
+		},
+	},
+
+	methods: {
+		async writeValue(value) {
+			await this.$store.commit('settings/setPreference', value)
+			this.$store.dispatch('settings/write')
+		},
+	},
+}
+</script>
+
+<style>
+	.user_settings {
+		padding-top: 16px;
+	}
+
+	.settings_details {
+		padding-top: 8px;
+		margin-left: 26px;
+	}
+
+</style>
diff --git a/src/js/components/Settings/SettingsDlg.vue b/src/js/components/Settings/SettingsDlg.vue
index 309e33c7..752798a1 100644
--- a/src/js/components/Settings/SettingsDlg.vue
+++ b/src/js/components/Settings/SettingsDlg.vue
@@ -26,6 +26,10 @@
 			<FeatureSettings />
 		</AppSettingsSection>
 
+		<AppSettingsSection :title="t('polls', 'Performance settings')">
+			<PerformanceSettings />
+		</AppSettingsSection>
+
 		<AppSettingsSection :title="t('polls', 'Experimental Styles')">
 			<ExpertimantalSettings />
 		</AppSettingsSection>
@@ -38,6 +42,7 @@ import { AppSettingsDialog, AppSettingsSection } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import FeatureSettings from './FeatureSettings'
 import ExpertimantalSettings from './ExpertimantalSettings'
+import PerformanceSettings from './PerformanceSettings'
 
 export default {
 	name: 'SettingsDlg',
@@ -47,6 +52,7 @@ export default {
 		AppSettingsSection,
 		FeatureSettings,
 		ExpertimantalSettings,
+		PerformanceSettings,
 	},
 
 	data() {
diff --git a/src/js/store/modules/poll.js b/src/js/store/modules/poll.js
index f932f33d..b4f3a32b 100644
--- a/src/js/store/modules/poll.js
+++ b/src/js/store/modules/poll.js
@@ -27,10 +27,6 @@ import { generateUrl } from '@nextcloud/router'
 import acl from './subModules/acl.js'
 import { uniqueArrayOfObjects } from '../../helpers/arrayHelper.js'
 
-// max threshold for cells to display. If the number is too high, rendering
-// of the vote table can become bad, because of too much iterations
-const MAX_CELLS = 200
-
 const defaultPoll = () => ({
 	id: 0,
 	type: 'datePoll',
@@ -154,7 +150,7 @@ const getters = {
 
 	isClosed: (state) => (state.expire > 0 && moment.unix(state.expire).diff() < 1000),
 
-	safeTable: (state, getters) => (getters.countCells > MAX_CELLS),
+	safeTable: (state, getters, rootState) => (getters.countCells > rootState.settings.user.performanceThreshold),
 
 	countParticipants: (state, getters) => (getters.participants.length),
 
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index bc313fd0..041ded0f 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -34,6 +34,7 @@ const defaultSettings = () => ({
 		glassySidebar: false,
 		defaultViewTextPoll: 'list-view',
 		defaultViewDatePoll: 'table-view',
+		performanceThreshold: 1000,
 	},
 	session: {
 		manualViewDatePoll: '',