Use v-model

nextcloud · Jul 28, 2024 · 6b0f61c · 6b0f61c
1 parent e0ca043
commit 6b0f61c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/src/components/AppSidebar/RepeatItem.vue b/src/components/AppSidebar/RepeatItem.vue
@@ -34,12 +34,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			</div>
 			<span v-show="!editing" class="content__name">
 				<RepeatSummary class="property-repeat__summary__content"
-					:recurrence-rule="recurrenceRule" />
+					:recurrence-rule="value" />
 			</span>
 			<div v-if="editing" class="content__input">
 				<RepeatFreqInterval v-if="!readOnly && !disabled"
-					:frequency="frequency"
-					:interval="interval"
+					v-model:frequency="frequency"
+					v-model:interval="interval"
 					@change-frequency="changeFrequency"
 					@change-interval="changeInterval" />
 			</div>
@@ -74,6 +74,7 @@ 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'
 import editableItem from '../../mixins/editableItem.js'
+import logger from '../../utils/logger.js'
 
 export default {
 	name: 'RepeatItem',
@@ -87,7 +88,10 @@ export default {
 	},
 	mixins: [editableItem],
 	props: {
-		recurrenceRule: {
+		/**
+		 * The Recurrence object
+		 */
+		value: {
 			type: Object,
 			required: true,
 		},
@@ -110,22 +114,23 @@ export default {
 	},
 	data() {
 		return {
-			frequency: 'NONE',
-			interval: 0,
+			frequency: this.value.frequency,
+			interval: this.value.interval,
 		}
 	},
 	methods: {
 		t,
 		isRecurring() {
-			return this.recurrenceRule.frequency !== 'NONE'
+			return this.value.frequency !== 'NONE'
 		},
 		changeFrequency(value) {
 			this.frequency = value
-			// this.setValue()
+			// this.newValue = this.value.copy(interval = value)
 		},
 		changeInterval(value) {
+			logger.info('change Interval to ' + value)
 			this.interval = value
-			// this.setValue()
+			// this.newValue = this.value.copy(interval = value)
 		},
 	},
 }

diff --git a/src/components/AppSidebar/RepeatItem/RepeatFreqInterval.vue b/src/components/AppSidebar/RepeatItem/RepeatFreqInterval.vue
@@ -26,12 +26,11 @@
 			{{ repeatEveryLabel }}
 		</span>
 		<input v-if="!isIntervalDisabled"
-			class="intervalInput"
+			:value="interval"
 			type="number"
 			min="1"
 			max="366"
-			:value="interval"
-			@input="changeInterval">
+			@input="$emit('update:interval', $event.target.value)">
 		<RepeatFreqSelect :freq="frequency"
 			:count="interval"
 			@change="changeFrequency" />
@@ -54,7 +53,7 @@ export default {
 			required: true,
 		},
 	},
-	emits: ['change-frequency', 'change-interval'],
+	emits: ['update:frequency', 'update:interval'],
 	computed: {
 		repeatEveryLabel() {
 			if (this.frequency === 'NONE') {
@@ -68,10 +67,7 @@ export default {
 	},
 	methods: {
 		changeFrequency(value) {
-			this.$emit('change-frequency', value)
-		},
-		changeInterval(value) {
-			this.$emit('change-interval', value)
+			this.$emit('update:frequency', value)
 		},
 	},
 }

diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
@@ -261,10 +261,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			<template #icon>
 				<Repeat :size="20" />
 			</template>
-			<RepeatItem :recurrence-rule="task.recurrenceRule"
-				:disabled="false"
+			<RepeatItem :value="task.recurrenceRule"
+				:disabled="readOnly"
 				:read-only="readOnly"
 				:placeholder="t('tasks', 'No recurrence')"
+				:task="task"
 				icon="IconRepeat" />
 		</NcAppSidebarTab>
 	</NcAppSidebar>