Add initial unfinished repeat item to sidebar

Signed-off-by: Sunik <[email protected]>

Author: sunkup

src/components/AppSidebar/RepeatItem.vue

@@ -0,0 +1,78 @@
+<!--
+Nextcloud - Tasks
+
+@author Sunik Kupfer
+@copyright 2023 Sunik Kupfer <[email protected]>
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+License as published by the Free Software Foundation; either
+version 3 of the License, or any later version.
+
+This library 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 library. If not, see <http://www.gnu.org/licenses/>.
+
+-->
+
+<template>
+	<div class="property__item">
+		<div class="repeat__icon">
+			<component :is="icon" :size="20" />
+		</div>
+		{{ recurrence }}
+	</div>
+</template>
+
+<script>
+
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	components: {
+	},
+	props: {
+		recurrence: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		placeholder: {
+			type: String,
+			default: '',
+		},
+		icon: {
+			type: String,
+			default: null,
+		},
+	},
+	methods: {
+		t,
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.property__item {
+	display: flex;
+	border-bottom: 1px solid var(--color-border);
+	width: 100%;
+	color: var(--color-text-lighter);
+
+	.repeat__icon {
+		display: flex;
+		height: 44px;
+		width: 44px;
+		justify-content: center;
+		flex-basis: 44px;
+		flex-shrink: 0;
+	}
+}
+</style>

src/main.js

@@ -36,6 +36,7 @@ import Eye from 'vue-material-design-icons/Eye.vue'
 import EyeOff from 'vue-material-design-icons/EyeOff.vue'
 import Pulse from 'vue-material-design-icons/Pulse.vue'
 import Tag from 'vue-material-design-icons/Tag.vue'
+import Repeat from 'vue-material-design-icons/Repeat.vue'
 import TrendingUp from 'vue-material-design-icons/TrendingUp.vue'
 
 import Vue from 'vue'
@@ -82,6 +83,8 @@ Vue.component('IconPulse', Pulse)
 // eslint-disable-next-line vue/match-component-file-name
 Vue.component('IconTag', Tag)
 // eslint-disable-next-line vue/match-component-file-name
+Vue.component('IconRepeat', Repeat)
+// eslint-disable-next-line vue/match-component-file-name
 Vue.component('IconTrendingUp', TrendingUp)
 
 if (!OCA.Tasks) {

src/models/task.js

@@ -330,10 +330,22 @@ export default class Task {
 		return this._completedDateMoment.clone()
 	}
 
+	/**
+	 * Return the recurrence
+	 *
+	 * @readonly
+	 * @memberof Task
+	 */
 	get recurrence() {
 		return this._recurrence
 	}
 
+	/**
+	 * Whether this task repeats
+	 *
+	 * @readonly
+	 * @memberof Task
+	 */
 	get recurring() {
 		if (this._start === null || this._recurrence === null) {
 			return false

src/views/AppSidebar.vue

@@ -192,6 +192,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					icon="IconTag"
 					@add-tag="updateTag"
 					@set-tags="updateTags" />
+				<RepeatItem v-show="!readOnly || task.recurring"
+					:recurrence="task.recurrence == null ? null : task.recurrence.toString()"
+					:disabled="readOnly"
+					:placeholder="t('tasks', 'No recurrence')"
+					icon="IconRepeat" />
 			</div>
 		</NcAppSidebarTab>
 		<NcEmptyContent v-else :description="taskStatusLabel">
@@ -240,6 +245,7 @@ import CalendarPickerItem from '../components/AppSidebar/CalendarPickerItem.vue'
 import MultiselectItem from '../components/AppSidebar/MultiselectItem.vue'
 import SliderItem from '../components/AppSidebar/SliderItem.vue'
 import TagsItem from '../components/AppSidebar/TagsItem.vue'
+import RepeatItem from '../components/AppSidebar/RepeatItem.vue'
 import NotesItem from '../components/AppSidebar/NotesItem.vue'
 import TaskCheckbox from '../components/TaskCheckbox.vue'
 // import TaskStatusDisplay from '../components/TaskStatusDisplay'
@@ -300,6 +306,7 @@ export default {
 		MultiselectItem,
 		SliderItem,
 		TagsItem,
+		RepeatItem,
 		CalendarPickerItem,
 		NotesItem,
 		TaskCheckbox,
@@ -720,6 +727,7 @@ export default {
 			calendar: 'getCalendarByRoute',
 			calendars: 'getSortedCalendars',
 			tags: 'tags',
+			recurrence: 'recurrence',
 			showTaskInCalendar: 'showTaskInCalendar',
 			calendarView: 'calendarView',
 		}),