From 4ed5d1e8fe76af62ed65e1c8806c4f18605a1ca0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 14 Apr 2021 10:24:07 +0200
Subject: [PATCH] Add repeat mode setting for tasks

See https://kolaente.dev/vikunja/api/pulls/834
---
 src/components/tasks/partials/repeatAfter.vue | 82 +++++++++----------
 src/models/task.js                            |  5 +-
 src/models/taskRepeatModes.json               |  5 ++
 3 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 src/models/taskRepeatModes.json

diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue
index 338a639e0..22320dd41 100644
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@@ -5,52 +5,56 @@
 			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
 			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
 		</div>
-		<div class="columns is-align-items-center">
-			<div class="is-flex column">
-				<p class="pr-4">
-					Each
-				</p>
-				<div class="field has-addons is-fullwidth">
-					<div class="control">
-						<input
-							:disabled="disabled"
-							@change="updateData"
-							class="input"
-							placeholder="Specify an amount..."
-							v-model="repeatAfter.amount"/>
-					</div>
-					<div class="control">
-						<div class="select">
-							<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
-								<option value="hours">Hours</option>
-								<option value="days">Days</option>
-								<option value="weeks">Weeks</option>
-								<option value="months">Months</option>
-								<option value="years">Years</option>
-							</select>
-						</div>
+		<div class="is-flex is-align-items-center mb-2">
+			<label for="repeatMode" class="is-fullwidth">
+				Repeat mode:
+			</label>
+			<div class="control">
+				<div class="select">
+					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
+						<option :value="repeatModes.REPEAT_MODE_DEFAULT">Default</option>
+						<option :value="repeatModes.REPEAT_MODE_MONTH">Monthly</option>
+						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">From Current Date</option>
+					</select>
+				</div>
+			</div>
+		</div>
+		<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
+			<p class="pr-4">
+				Each
+			</p>
+			<div class="field has-addons is-fullwidth">
+				<div class="control">
+					<input
+						:disabled="disabled"
+						@change="updateData"
+						class="input"
+						placeholder="Specify an amount..."
+						v-model="repeatAfter.amount"
+						type="number"
+					/>
+				</div>
+				<div class="control">
+					<div class="select">
+						<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
+							<option value="hours">Hours</option>
+							<option value="days">Days</option>
+							<option value="weeks">Weeks</option>
+							<option value="months">Months</option>
+							<option value="years">Years</option>
+						</select>
 					</div>
 				</div>
 			</div>
-			<fancycheckbox
-				:disabled="disabled"
-				@change="updateData"
-				class="column"
-				v-model="task.repeatFromCurrentDate"
-				v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
-			>
-				Repeat from current date
-			</fancycheckbox>
 		</div>
 	</div>
 </template>
 
 <script>
-import Fancycheckbox from '../../input/fancycheckbox'
+import repeatModes from '@/models/taskRepeatModes'
 
 export default {
 	name: 'repeatAfter',
-	components: {Fancycheckbox},
 	data() {
 		return {
 			task: {},
@@ -58,12 +62,12 @@ export default {
 				amount: 0,
 				type: '',
 			},
+			repeatModes: repeatModes,
 		}
 	},
 	props: {
 		value: {
-			default: () => {
-			},
+			default: () => {},
 			required: true,
 		},
 		disabled: {
@@ -107,8 +111,4 @@ p {
 .input {
 	min-width: 2rem;
 }
-
-.fancycheckbox {
-	padding: 0;
-}
 </style>
\ No newline at end of file
diff --git a/src/models/task.js b/src/models/task.js
index 9ef7fab68..ffdc7744a 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -2,6 +2,8 @@ import AbstractModel from './abstractModel'
 import UserModel from './user'
 import LabelModel from './label'
 import AttachmentModel from './attachment'
+import {REPEAT_MODE_DEFAULT} from './taskRepeatModes'
+
 import SubscriptionModel from '@/models/subscription'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 
@@ -94,6 +96,7 @@ export default class TaskModel extends AbstractModel {
 			endDate: 0,
 			repeatAfter: 0,
 			repeatFromCurrentDate: false,
+			repeatMode: REPEAT_MODE_DEFAULT,
 			reminderDates: [],
 			parentTaskId: 0,
 			hexColor: '',
@@ -114,7 +117,7 @@ export default class TaskModel extends AbstractModel {
 	}
 
 	getTextIdentifier() {
-		if(this.identifier === '') {
+		if (this.identifier === '') {
 			return `#${this.index}`
 		}
 
diff --git a/src/models/taskRepeatModes.json b/src/models/taskRepeatModes.json
new file mode 100644
index 000000000..7d172950b
--- /dev/null
+++ b/src/models/taskRepeatModes.json
@@ -0,0 +1,5 @@
+{
+  "REPEAT_MODE_DEFAULT": 0,
+  "REPEAT_MODE_MONTH": 1,
+  "REPEAT_MODE_FROM_CURRENT_DATE": 2
+}
\ No newline at end of file