[WIP] Introduce RepeatFreqInterval

Author: sunkup

src/components/AppSidebar/RepeatItem.vue

@@ -27,7 +27,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<component :is="icon" :size="20" />
 		</div>
 		<RepeatSummary class="property-repeat__summary__content"
-			:recurrence-rule="recurrence" />
+			:recurrence-rule="recurrenceRule" />
 		<Actions>
 			<ActionButton @click="toggleOptions">
 				<template #icon>
@@ -38,7 +38,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		</Actions>
 
 		<div v-if="showOptions" class="property-repeat__options">
-			options
+			options {{ recurrenceRule.interval }}
+			<RepeatFreqInterval :frequency="recurrenceRule.frequency"
+				:interval="recurrenceRule.interval" />
 		</div>
 	</div>
 </template>
@@ -47,20 +49,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 import { translate as t } from '@nextcloud/l10n'
 import RepeatSummary from './RepeatItem/RepeatSummary.vue'
+import RepeatFreqInterval from './RepeatItem/RepeatFreqInterval.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import { NcActions as Actions, NcActionButton as ActionButton } from '@nextcloud/vue'
 
 export default {
 	components: {
 		RepeatSummary,
+		RepeatFreqInterval,
 		Actions,
 		ActionButton,
 		Pencil,
 		Check,
 	},
 	props: {
-		recurrence: {
+		recurrenceRule: {
 			type: Object,
 			required: true,
 		},

src/components/AppSidebar/RepeatItem/RepeatFreqInterval.vue

@@ -0,0 +1,59 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <[email protected]>
+  -
+  - @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>
+	<div class="repeat-option-set repeat-option-set--interval-freq">
+		<span class="repeat-option-set__label">
+			{{ repeatEveryLabel }}
+		</span>
+		<input class="intervalInput"
+			type="number"
+			min="1"
+			max="366"
+			:value="interval">
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'RepeatFreqInterval',
+	props: {
+		frequency: {
+			type: String,
+			required: true,
+		},
+		interval: {
+			type: Number,
+			required: true,
+		},
+	},
+	computed: {
+		repeatEveryLabel() {
+			if (this.frequency === 'NONE') {
+				return t('tasks', 'Repeat')
+			}
+			return t('tasks', 'Repeat every')
+		},
+	},
+}
+</script>

src/models/task.js

@@ -336,7 +336,7 @@ export default class Task {
 	 * @readonly
 	 * @memberof Task
 	 */
-	get recurrence() {
+	get recurrenceRule() {
 		if (this._recurrence === undefined || this._recurrence === null) {
 			return getDefaultRecurrenceRuleObject()
 		}
@@ -707,7 +707,7 @@ export default class Task {
 	 */
 	completeRecurring() {
 		// Get recurrence iterator, starting at start date
-		const iter = this.recurrence.iterator(this.start)
+		const iter = this.recurrenceRule.iterator(this.start)
 		// Skip the start date itself
 		iter.next()
 		// If there is a next recurrence, update the start date to next recurrence date

src/views/AppSidebar.vue

@@ -193,8 +193,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					@add-tag="updateTag"
 					@set-tags="updateTags" />
 				<RepeatItem v-show="!readOnly || task.recurring"
-					:recurrence="task.recurrence"
-					:disabled="readOnly"
+					:recurrence-rule="task.recurrenceRule"
+					:disabled="false"
 					:placeholder="t('tasks', 'No recurrence')"
 					icon="IconRepeat" />
 			</div>