relieve SideBarTabConfiguration and split configuration in components

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

1 files changed, 39 insertions, 293 deletions

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>