Add repeat mode setting for tasks

See https://kolaente.dev/vikunja/api/pulls/834

src/components/tasks/partials/repeatAfter.vue

@@ -5,8 +5,21 @@
 			<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 is-align-items-center mb-2">
-			<div class="is-flex column">
+			<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>
@@ -17,7 +30,9 @@
 						@change="updateData"
 						class="input"
 						placeholder="Specify an amount..."
-							v-model="repeatAfter.amount"/>
+						v-model="repeatAfter.amount"
+						type="number"
+					/>
 				</div>
 				<div class="control">
 					<div class="select">
@@ -32,25 +47,14 @@
 				</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>

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}`
 		}
 

src/models/taskRepeatModes.json

@@ -0,0 +1,5 @@
+{
+  "REPEAT_MODE_DEFAULT": 0,
+  "REPEAT_MODE_MONTH": 1,
+  "REPEAT_MODE_FROM_CURRENT_DATE": 2
+}