relieve SideBarTabConfiguration and split configuration in components

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

12 files changed, 804 insertions, 293 deletions

diff --git a/src/js/components/Configuration/ConfigAccess.vue b/src/js/components/Configuration/ConfigAccess.vue
new file mode 100644
index 00000000..a996f832
--- /dev/null
+++ b/src/js/components/Configuration/ConfigAccess.vue
@@ -0,0 +1,79 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+		<RadioGroupDiv v-model="pollAccess" :options="accessOptions" />
+		<CheckBoxDiv v-model="pollImportant" class="indented" :disabled="pollAccess !== 'public'"
+			:label="t('polls', 'Relevant for all users')" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+import RadioGroupDiv from '../Base/RadioGroupDiv'
+
+export default {
+	name: 'ConfigAccess',
+
+	components: {
+		CheckBoxDiv,
+		RadioGroupDiv,
+	},
+
+	data() {
+		return {
+			accessOptions: [
+				{ value: 'hidden', label: t('polls', 'Only invited users') },
+				{ value: 'public', label: t('polls', 'All users') },
+			],
+		}
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		pollAccess: {
+			get() {
+				return this.poll.access
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { access: value })
+				this.$emit('change')
+			},
+		},
+
+		pollImportant: {
+			get() {
+				return (this.poll.important > 0)
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { important: +value })
+				this.$emit('change')
+			},
+		},
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigAdminAccess.vue b/src/js/components/Configuration/ConfigAdminAccess.vue
new file mode 100644
index 00000000..5021e988
--- /dev/null
+++ b/src/js/components/Configuration/ConfigAdminAccess.vue
@@ -0,0 +1,55 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<CheckBoxDiv v-model="adminAccess" :label="t('polls', 'Allow admins to edit this poll')" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+
+export default {
+	name: 'ConfigAdminAccess',
+
+	components: {
+		CheckBoxDiv,
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		adminAccess: {
+			get() {
+				return this.poll.adminAccess
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { adminAccess: +value })
+				this.$emit('change')
+			},
+		},
+
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigAllowComment.vue b/src/js/components/Configuration/ConfigAllowComment.vue
new file mode 100644
index 00000000..54447368
--- /dev/null
+++ b/src/js/components/Configuration/ConfigAllowComment.vue
@@ -0,0 +1,55 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<CheckBoxDiv v-model="allowComment" :label="t('polls', 'Allow Comments')" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+
+export default {
+	name: 'ConfigAllowComment',
+
+	components: {
+		CheckBoxDiv,
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		allowComment: {
+			get() {
+				return this.poll.allowComment
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { allowComment: +value })
+				this.$emit('change')
+			},
+		},
+
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigAllowMayBe.vue b/src/js/components/Configuration/ConfigAllowMayBe.vue
new file mode 100644
index 00000000..3f1c0be6
--- /dev/null
+++ b/src/js/components/Configuration/ConfigAllowMayBe.vue
@@ -0,0 +1,61 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<CheckBoxDiv v-model="allowMaybe" :label="label" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+
+export default {
+	name: 'ConfigAllowMayBe',
+
+	components: {
+		CheckBoxDiv,
+	},
+
+	data() {
+		return {
+			label: t('polls', 'Allow "maybe" vote'),
+		}
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		allowMaybe: {
+			get() {
+				return this.poll.allowMaybe
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { allowMaybe: +value })
+				this.$emit('change')
+			},
+		},
+
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigAnonymous.vue b/src/js/components/Configuration/ConfigAnonymous.vue
new file mode 100644
index 00000000..d19e90ce
--- /dev/null
+++ b/src/js/components/Configuration/ConfigAnonymous.vue
@@ -0,0 +1,55 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<CheckBoxDiv v-model="anonymous" :label="t('polls', 'Anonymous poll')" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+
+export default {
+	name: 'ConfigAnonymous',
+
+	components: {
+		CheckBoxDiv,
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		anonymous: {
+			get() {
+				return this.poll.anonymous
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { anonymous: +value })
+				this.$emit('change')
+			},
+		},
+
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
new file mode 100644
index 00000000..d9536864
--- /dev/null
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -0,0 +1,116 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+		<ButtonDiv
+			:icon="closed ? 'icon-polls-open' : 'icon-polls-closed'"
+			:title="closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll')"
+			@click="switchClosed()" />
+		<CheckBoxDiv v-show="!closed" v-model="useExpire" :label="t('polls', 'Closing date')" />
+		<DatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import moment from '@nextcloud/moment'
+import { DatetimePicker } from '@nextcloud/vue'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+
+export default {
+	name: 'ConfigClosing',
+
+	components: {
+		CheckBoxDiv,
+		DatetimePicker,
+	},
+
+	data() {
+		return {
+			expirationDatePicker: {
+				editable: true,
+				minuteStep: 5,
+				type: 'datetime',
+				format: moment.localeData().longDateFormat('L LT'),
+				placeholder: t('polls', 'Closing date'),
+				confirm: true,
+				lang: {
+					formatLocale: {
+						firstDayOfWeek: moment.localeData()._week.dow === 0 ? 7 : moment.localeData()._week.dow,
+						months: moment.months(),
+						monthsShort: moment.monthsShort(),
+						weekdays: moment.weekdays(),
+						weekdaysMin: moment.weekdaysMin(),
+					},
+				},
+			},
+		}
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		...mapGetters({
+			closed: 'poll/closed',
+		}),
+
+		expire: {
+			get() {
+				return moment.unix(this.poll.expire)._d
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { expire: moment(value).unix() })
+				this.$emit('change')
+			},
+		},
+
+		useExpire: {
+			get() {
+				return this.poll.expire
+			},
+			set(value) {
+				if (value) {
+					this.$store.commit('poll/setProperty', { expire: moment().add(1, 'week').unix() })
+				} else {
+					this.$store.commit('poll/setProperty', { expire: 0 })
+				}
+				this.$emit('change')
+			},
+		},
+	},
+
+	methods: {
+		switchClosed() {
+			if (this.closed) {
+				this.$store.commit('poll/setProperty', { expire: 0 })
+			} else {
+				this.$store.commit('poll/setProperty', { expire: -1 })
+			}
+			this.$emit('change')
+
+		},
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigDescription.vue b/src/js/components/Configuration/ConfigDescription.vue
new file mode 100644
index 00000000..92bcd898
--- /dev/null
+++ b/src/js/components/Configuration/ConfigDescription.vue
@@ -0,0 +1,56 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<textarea v-model="description" class="edit-description"
+		@change="$emit('change')" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+	name: 'ConfigDescription',
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		description: {
+			get() {
+				return this.poll.description
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { description: value })
+				this.$store.commit('poll/setDescriptionSafe', value)
+			},
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	textarea.edit-description {
+		height: 210px;
+	}
+</style>
diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue
new file mode 100644
index 00000000..294fa76f
--- /dev/null
+++ b/src/js/components/Configuration/ConfigOptionLimit.vue
@@ -0,0 +1,92 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+		<CheckBoxDiv v-model="useOptionLimit" :label="t('polls', 'Limit yes votes per option')" />
+		<InputDiv v-if="optionLimit" v-model="optionLimit" class="selectUnit indented"
+			use-num-modifiers
+			@add="optionLimit++"
+			@subtract="optionLimit--" />
+		<CheckBoxDiv v-if="optionLimit"
+			v-model="hideBookedUp"
+			class="indented"
+			:label="t('polls', 'Hide not available Options')" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+import InputDiv from '../Base/InputDiv'
+
+export default {
+	name: 'ConfigOptionLimit',
+
+	components: {
+		CheckBoxDiv,
+		InputDiv,
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		useOptionLimit: {
+			get() {
+				return (this.poll.optionLimit !== 0)
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { optionLimit: value ? 1 : 0 })
+				this.$emit('change')
+			},
+		},
+
+		optionLimit: {
+			get() {
+				return this.poll.optionLimit
+			},
+			set(value) {
+				if (!this.useOptionLimit) {
+					value = 0
+				} else if (value < 1) {
+					value = 1
+				}
+				this.$store.commit('poll/setProperty', { optionLimit: value })
+				this.$emit('change')
+			},
+		},
+
+		hideBookedUp: {
+			get() {
+				return (this.poll.hideBookedUp > 0)
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { hideBookedUp: +value })
+				this.$emit('change')
+			},
+		},
+
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigShowResults.vue b/src/js/components/Configuration/ConfigShowResults.vue
new file mode 100644
index 00000000..f836bb5b
--- /dev/null
+++ b/src/js/components/Configuration/ConfigShowResults.vue
@@ -0,0 +1,66 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+		<RadioGroupDiv v-model="pollShowResults" :options="pollShowResultsOptions" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import RadioGroupDiv from '../Base/RadioGroupDiv'
+
+export default {
+	name: 'ConfigShowResults',
+
+	components: {
+		RadioGroupDiv,
+	},
+
+	data() {
+		return {
+			pollShowResultsOptions: [
+				{ value: 'always', label: t('polls', 'Always show results') },
+				{ value: 'closed', label: t('polls', 'Hide results until poll is closed') },
+				{ value: 'never', label: t('polls', 'Never show results') },
+			],
+		}
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		pollShowResults: {
+			get() {
+				return this.poll.showResults
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { showResults: value })
+				this.$emit('change')
+			},
+		},
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigTitle.vue b/src/js/components/Configuration/ConfigTitle.vue
new file mode 100644
index 00000000..b94e6533
--- /dev/null
+++ b/src/js/components/Configuration/ConfigTitle.vue
@@ -0,0 +1,50 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+	<input v-model="title" :class="{ error: !poll.title }" type="text"
+		@change="$emit('change')"
+		@keyup.enter="$emit('change')">
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+	name: 'ConfigTitle',
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+		}),
+
+		title: {
+			get() {
+				return this.poll.title
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { title: value })
+			},
+		},
+	},
+}
+</script>
diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue
new file mode 100644
index 00000000..400f7484
--- /dev/null
+++ b/src/js/components/Configuration/ConfigVoteLimit.vue
@@ -0,0 +1,80 @@
+<!--
+  - @copyright Copyright (c) 2021 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>
+		<CheckBoxDiv v-model="useVoteLimit" :label="t('polls', 'Limit yes votes per user')" />
+		<InputDiv v-if="voteLimit" v-model="voteLimit" class="selectUnit indented"
+			use-num-modifiers
+			@add="voteLimit++"
+			@subtract="voteLimit--" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
+import InputDiv from '../Base/InputDiv'
+
+export default {
+	name: 'ConfigVoteLimit',
+
+	components: {
+		CheckBoxDiv,
+		InputDiv,
+	},
+
+	computed: {
+		...mapState({
+			poll: state => state.poll,
+			countOptions: state => state.options.list.length,
+		}),
+
+		useVoteLimit: {
+			get() {
+				return (this.poll.voteLimit !== 0)
+			},
+			set(value) {
+				this.$store.commit('poll/setProperty', { voteLimit: value ? 1 : 0 })
+				this.$emit('change')
+			},
+		},
+
+		voteLimit: {
+			get() {
+				return this.poll.voteLimit
+			},
+			set(value) {
+				if (!this.useVoteLimit) {
+					value = 0
+				} else if (value < 1) {
+					value = this.countOptions
+				} else if (value > this.countOptions) {
+					value = 1
+				}
+				this.$store.commit('poll/setProperty', { voteLimit: value })
+				this.$emit('change')
+			},
+		},
+	},
+}
+</script>
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index 3d861e0a..25e5810f 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -29,56 +29,33 @@
 		<ConfigBox v-if="!acl.isOwner" :title="t('polls', 'As an admin you may edit this poll')" icon-class="icon-checkmark" />
 
 		<ConfigBox :title="t('polls', 'Title')" icon-class="icon-sound">
-			<input v-model="pollTitle" :class="{ error: titleEmpty }" type="text"
-				@change="writeValue({ title: $event.target.value })"
-				@keyup.enter="writeValue({ title: $event.target.value })">
+			<ConfigTitle @change="writePoll" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Description')" icon-class="icon-edit">
-			<textarea v-model="pollDescription" class="edit-description"
-				@change="writeValue({ description: $event.target.value })" />
+			<ConfigDescription @change="writePoll" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Poll configurations')" icon-class="icon-category-customization">
-			<CheckBoxDiv v-model="pollAllowComment" :label="t('polls', 'Allow Comments')" />
-			<CheckBoxDiv v-model="pollAllowMaybe" :label="allowMybeLabel" />
-			<CheckBoxDiv v-model="pollAnonymous" :label="t('polls', 'Anonymous poll')" />
+			<ConfigAllowComment @change="writePoll" />
+			<ConfigAllowMayBe @change="writePoll" />
+			<ConfigAnonymous @change="writePoll" />
 
-			<CheckBoxDiv v-model="useVoteLimit" :label="t('polls', 'Limit yes votes per user')" />
-			<InputDiv v-if="pollVoteLimit" v-model="pollVoteLimit" class="selectUnit indented"
-				use-num-modifiers
-				@add="pollVoteLimit++"
-				@subtract="pollVoteLimit--" />
-
-			<CheckBoxDiv v-model="useOptionLimit" :label="t('polls', 'Limit yes votes per option')" />
-			<InputDiv v-if="pollOptionLimit" v-model="pollOptionLimit" class="selectUnit indented"
-				use-num-modifiers
-				@add="pollOptionLimit++"
-				@subtract="pollOptionLimit--" />
-			<CheckBoxDiv v-if="pollOptionLimit"
-				v-model="hideBookedUp"
-				class="indented"
-				:label="t('polls', 'Hide not available Options')" />
+			<ConfigVoteLimit @change="writePoll" />
+			<ConfigOptionLimit @change="writePoll" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Poll closing status')" :icon-class="closed ? 'icon-polls-closed' : 'icon-polls-open'">
-			<ButtonDiv
-				:icon="closed ? 'icon-polls-open' : 'icon-polls-closed'"
-				:title="closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll')"
-				@click="switchClosed()" />
-			<CheckBoxDiv v-show="!closed" v-model="pollExpiration" :label="t('polls', 'Closing date')" />
-			<DatetimePicker v-show="pollExpiration && !closed" v-model="pollExpire" v-bind="expirationDatePicker" />
+			<ConfigClosing @change="writePoll" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Access')" icon-class="icon-category-auth">
-			<CheckBoxDiv v-if="acl.isOwner" v-model="pollAdminAccess" :label="t('polls', 'Allow admins to edit this poll')" />
-			<RadioGroupDiv v-model="pollAccess" :options="accessOptions" />
-			<CheckBoxDiv v-model="pollImportant" class="indented" :disabled="pollAccess !== 'public'"
-				:label="t('polls', 'Relevant for all users')" />
+			<ConfigAdminAccess v-if="acl.isOwner" @change="writePoll" />
+			<ConfigAccess @change="writePoll" />
 		</ConfigBox>
 
 		<ConfigBox :title="t('polls', 'Result display')" icon-class="icon-screen">
-			<RadioGroupDiv v-model="pollShowResults" :options="pollShowResultsOptions" />
+			<ConfigShowResults @change="writePoll" />
 		</ConfigBox>
 
 		<ButtonDiv :icon="poll.deleted ? 'icon-history' : 'icon-delete'"
@@ -96,292 +73,77 @@
 import debounce from 'lodash/debounce'
 import { mapGetters, mapState } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
-import { DatetimePicker } from '@nextcloud/vue'
 import ConfigBox from '../Base/ConfigBox'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
-import InputDiv from '../Base/InputDiv'
-import RadioGroupDiv from '../Base/RadioGroupDiv'
+import ConfigDescription from '../Configuration/ConfigDescription'
+import ConfigTitle from '../Configuration/ConfigTitle'
+import ConfigAllowComment from '../Configuration/ConfigAllowComment'
+import ConfigAnonymous from '../Configuration/ConfigAnonymous'
+import ConfigAllowMayBe from '../Configuration/ConfigAllowMayBe'
+import ConfigAdminAccess from '../Configuration/ConfigAdminAccess'
+import ConfigVoteLimit from '../Configuration/ConfigVoteLimit'
+import ConfigOptionLimit from '../Configuration/ConfigOptionLimit'
+import ConfigClosing from '../Configuration/ConfigClosing'
+import ConfigAccess from '../Configuration/ConfigAccess'
+import ConfigShowResults from '../Configuration/ConfigShowResults'
 
 export default {
 	name: 'SideBarTabConfiguration',
 
 	components: {
 		ConfigBox,
-		CheckBoxDiv,
-		DatetimePicker,
-		InputDiv,
-		RadioGroupDiv,
-	},
-
-	data() {
-		return {
-			titleEmpty: false,
-			allowMybeLabel: t('polls', 'Allow "maybe" vote'),
-			accessOptions: [
-				{ value: 'hidden', label: t('polls', 'Only invited users') },
-				{ value: 'public', label: t('polls', 'All users') },
-			],
-			pollShowResultsOptions: [
-				{ value: 'always', label: t('polls', 'Always show results') },
-				{ value: 'closed', label: t('polls', 'Hide results until poll is closed') },
-				{ value: 'never', label: t('polls', 'Never show results') },
-			],
-		}
+		ConfigDescription,
+		ConfigTitle,
+		ConfigAllowComment,
+		ConfigAllowMayBe,
+		ConfigAnonymous,
+		ConfigAdminAccess,
+		ConfigVoteLimit,
+		ConfigOptionLimit,
+		ConfigClosing,
+		ConfigAccess,
+		ConfigShowResults,
 	},
 
 	computed: {
 		...mapState({
 			poll: state => state.poll,
 			acl: state => state.poll.acl,
-			countOptions: state => state.options.list.length,
 		}),
 
 		...mapGetters({
 			closed: 'poll/closed',
 			participantsVoted: 'poll/participantsVoted',
 		}),
-
-		// Add bindings
-		pollDescription: {
-			get() {
-				return this.poll.description
-			},
-			set(value) {
-				this.$store.commit('poll/setProperty', { description: value })
-				this.$store.commit('poll/setDescriptionSafe', value)
-			},
-		},
-
-		pollTitle: {
-			get() {
-				return this.poll.title
-			},
-			set(value) {
-				this.$store.commit('poll/setProperty', { title: value })
-			},
-		},
-
-		pollAccess: {
-			get() {
-				return this.poll.access
-			},
-			set(value) {
-				this.writeValue({ access: value })
-			},
-		},
-
-		useVoteLimit: {
-			get() {
-				return (this.poll.voteLimit !== 0)
-			},
-			set(value) {
-				this.writeValue({ voteLimit: value ? 1 : 0 })
-			},
-		},
-
-		pollVoteLimit: {
-			get() {
-				return this.poll.voteLimit
-			},
-			set(value) {
-				if (!this.useVoteLimit) {
-					value = 0
-				} else if (value < 1) {
-					value = this.countOptions
-				} else if (value > this.countOptions) {
-					value = 1
-				}
-				this.writeValue({ voteLimit: value })
-			},
-		},
-
-		useOptionLimit: {
-			get() {
-				return (this.poll.optionLimit !== 0)
-			},
-			set(value) {
-				this.writeValue({ optionLimit: value ? 1 : 0 })
-			},
-		},
-
-		pollOptionLimit: {
-			get() {
-				return this.poll.optionLimit
-			},
-			set(value) {
-				if (!this.useOptionLimit) {
-					value = 0
-				} else if (value < 1) {
-					value = 1
-				}
-				this.writeValue({ optionLimit: value })
-			},
-		},
-
-		hideBookedUp: {
-			get() {
-				return (this.poll.hideBookedUp > 0)
-			},
-			set(value) {
-				this.writeValue({ hideBookedUp: +value })
-			},
-		},
-
-		pollShowResults: {
-			get() {
-				return this.poll.showResults
-			},
-			set(value) {
-				this.writeValue({ showResults: value })
-			},
-		},
-
-		pollExpire: {
-			get() {
-				return moment.unix(this.poll.expire)._d
-			},
-			set(value) {
-				this.writeValue({ expire: moment(value).unix() })
-			},
-		},
-
-		pollExpiration: {
-			get() {
-				return this.poll.expire
-			},
-			set(value) {
-				if (value) {
-					this.writeValue({ expire: moment().add(1, 'week').unix() })
-				} else {
-					this.writeValue({ expire: 0 })
-				}
-			},
-		},
-
-		pollAnonymous: {
-			get() {
-				return (this.poll.anonymous > 0)
-			},
-			set(value) {
-				this.writeValue({ anonymous: +value })
-			},
-		},
-
-		pollImportant: {
-			get() {
-				return (this.poll.important > 0)
-			},
-			set(value) {
-				this.writeValue({ important: +value })
-			},
-		},
-
-		pollAdminAccess: {
-			get() {
-				return (this.poll.adminAccess > 0)
-			},
-			set(value) {
-				this.writeValue({ adminAccess: +value })
-			},
-		},
-
-		pollAllowComment: {
-			get() {
-				return this.poll.allowComment
-			},
-			set(value) {
-				this.writeValue({ allowComment: +value })
-			},
-		},
-
-		pollAllowMaybe: {
-			get() {
-				return this.poll.allowMaybe
-			},
-			set(value) {
-				this.writeValue({ allowMaybe: +value })
-			},
-		},
-
-		firstDOW() {
-			// vue2-datepicker needs 7 for sunday
-			if (moment.localeData()._week.dow === 0) {
-				return 7
-			} else {
-				return moment.localeData()._week.dow
-			}
-		},
-
-		expirationDatePicker() {
-			return {
-				editable: true,
-				minuteStep: 5,
-				type: 'datetime',
-				format: moment.localeData().longDateFormat('L LT'),
-				placeholder: t('polls', 'Closing date'),
-				confirm: true,
-				lang: {
-					formatLocale: {
-						firstDayOfWeek: this.firstDOW,
-						months: moment.months(),
-						monthsShort: moment.monthsShort(),
-						weekdays: moment.weekdays(),
-						weekdaysMin: moment.weekdaysMin(),
-					},
-				},
-			}
-		},
 	},
 
 	methods: {
 
-		writeValueDebounced: debounce(function(e) {
-			this.writeValue(e)
-		}, 1500),
-
 		successDebounced: debounce(function(title) {
-			showSuccess(t('polls', '"{pollTitle}" successfully saved', { pollTitle: title }))
-			emit('update-polls')
+			showSuccess(t('polls', '"{pollTitle}" successfully saved', { pollTitle: this.poll.title }))
 		}, 1500),
 
-		writeValue(e) {
-			this.$store.commit('poll/setProperty', e)
-			this.updatePoll()
-		},
-
 		switchDeleted() {
 			if (this.poll.deleted) {
-				this.writeValue({ deleted: 0 })
+				this.$store.commit('poll/setProperty', { deleted: 0 })
 			} else {
-				this.writeValue({ deleted: moment.utc().unix() })
+				this.$store.commit('poll/setProperty', { deleted: moment.utc().unix() })
 			}
-
-		},
-
-		switchClosed() {
-			if (this.closed) {
-				this.writeValue({ expire: 0 })
-			} else {
-				this.writeValue({ expire: -1 })
-			}
-
+			this.writePoll()
 		},
 
 		async deletePermanently() {
 			if (!this.poll.deleted) return
 			try {
 				await this.$store.dispatch('poll/delete', { pollId: this.poll.id })
-				emit('update-polls')
 				this.$router.push({ name: 'list', params: { type: 'relevant' } })
 			} catch {
 				showError(t('polls', 'Error deleting poll.'))
 			}
 		},
 
-		async updatePoll() {
-			if (this.titleEmpty) {
+		async writePoll() {
+			if (!this.poll.title) {
 				showError(t('polls', 'Title must not be empty!'))
 			} else {
 				try {
@@ -396,19 +158,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-textarea.edit-description {
-	height: 210px;
-}
-
-.selectUnit {
-	display: flex;
-	align-items: center;
-	input {
-		margin: 0 4px;
-		width: 40px;
-	}
-}
-
-</style>