Add RepeatFreqSelect

src/components/AppSidebar/RepeatItem.vue

@@ -39,7 +39,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<div v-if="editing" class="content__input">
 				<RepeatFreqInterval v-if="!readOnly && !disabled"
 					:frequency="frequency"
-					:interval="interval" />
+					:interval="interval"
+					@change-frequency="changeFrequency"
+					@change-interval="changeInterval" />
 			</div>
 		</div>
 		<div class="item__actions">
@@ -109,14 +111,22 @@ export default {
 	data() {
 		return {
 			frequency: 'NONE',
-			interval: -1,
+			interval: 0,
 		}
 	},
 	methods: {
 		t,
 		isRecurring() {
 			return this.recurrenceRule.frequency !== 'NONE'
 		},
+		changeFrequency(value) {
+			this.frequency = value
+			// this.setValue()
+		},
+		changeInterval(value) {
+			this.interval = value
+			// this.setValue()
+		},
 	},
 }
 </script>

src/components/AppSidebar/RepeatItem/RepeatFreqInterval.vue

@@ -25,18 +25,25 @@
 		<span class="repeat-option-set__label">
 			{{ repeatEveryLabel }}
 		</span>
-		<input class="intervalInput"
+		<input v-if="!isIntervalDisabled"
+			class="intervalInput"
 			type="number"
 			min="1"
 			max="366"
-			:value="interval">
+			:value="interval"
+			@input="changeInterval">
+		<RepeatFreqSelect :freq="frequency"
+			:count="interval"
+			@change="changeFrequency" />
 	</div>
 </template>
 
 <script>
+import RepeatFreqSelect from './RepeatFreqSelect.vue'
 
 export default {
 	name: 'RepeatFreqInterval',
+	components: { RepeatFreqSelect },
 	props: {
 		frequency: {
 			type: String,
@@ -47,13 +54,25 @@ export default {
 			required: true,
 		},
 	},
+	emits: ['change-frequency', 'change-interval'],
 	computed: {
 		repeatEveryLabel() {
 			if (this.frequency === 'NONE') {
 				return t('tasks', 'Repeat')
 			}
 			return t('tasks', 'Repeat every')
 		},
+		isIntervalDisabled() {
+			return this.frequency === 'NONE'
+		},
+	},
+	methods: {
+		changeFrequency(value) {
+			this.$emit('change-frequency', value)
+		},
+		changeInterval(value) {
+			this.$emit('change-interval', value)
+		},
 	},
 }
 </script>

src/components/AppSidebar/RepeatItem/RepeatFreqSelect.vue

@@ -0,0 +1,87 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @author Georg Ehrke <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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>
+	<NcSelect v-show="true"
+		display-name="green"
+		:clearable="false"
+		:options="options"
+		:model-value="selected"
+		:placeholder="t('tasks', 'Select something')"
+		:append-to-body="false"
+		@option:selected="select" />
+</template>
+
+<script>
+import { NcSelect } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	name: 'RepeatFreqSelect',
+	components: {
+		NcSelect,
+	},
+	props: {
+		freq: {
+			type: String,
+			required: true,
+		},
+		count: {
+			type: Number,
+			required: true,
+		},
+	},
+	emits: ['change'],
+	computed: {
+		options() {
+			return [{
+				label: t('tasks', 'never'),
+				freq: 'NONE',
+			}, {
+				label: n('tasks', 'day', 'days', this.count),
+				freq: 'DAILY',
+			}, {
+				label: n('tasks', 'week', 'weeks', this.count),
+				freq: 'WEEKLY',
+			}, {
+				label: n('tasks', 'month', 'months', this.count),
+				freq: 'MONTHLY',
+			}, {
+				label: n('tasks', 'year', 'years', this.count),
+				freq: 'YEARLY',
+			}]
+		},
+		selected() {
+			return this.options.find(o => o.freq === this.freq)
+		},
+	},
+	methods: {
+		t,
+		select(value) {
+			if (!value) {
+				return
+			}
+			this.$emit('change', value.freq)
+		},
+	},
+}
+</script>