add user setting for comment ordering

frontend/src/components/tasks/partials/comments.vue

@@ -269,7 +269,8 @@ async function loadComments(taskId: ITask['id']) {
 	newComment.taskId = taskId
 	commentEdit.taskId = taskId
 	commentToDelete.taskId = taskId
-	comments.value = await taskCommentService.getAll({taskId})
+	let order = authStore.settings.frontendSettings.commentOrder;
+	comments.value = await taskCommentService.getAll({taskId}, {order: order})
 }
 
 watch(

frontend/src/i18n/lang/en.json

@@ -150,6 +150,11 @@
           "dark": "Dark"
         }
       },
+      "commentOrder": {
+        "title": "Comment order",
+        "asc": "Oldest first",
+        "desc": "Newest first"
+      },
       "apiTokens": {
         "title": "API Tokens",
         "general": "API tokens allow you to use Vikunja's API without user credentials.",
@@ -1206,4 +1211,4 @@
       "years": "year|years"
     }
   }
-}
+}

frontend/src/modelTypes/IUserSettings.ts

@@ -10,6 +10,7 @@ export interface IFrontendSettings {
 	quickAddMagicMode: PrefixMode
 	colorSchema: BasicColorSchema
 	filterIdUsedOnOverview: IProject['id'] | null
+	commentOrder: string
 }
 
 export interface IUserSettings extends IAbstract {

frontend/src/models/userSettings.ts

@@ -19,6 +19,7 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 		playSoundWhenDone: true,
 		quickAddMagicMode: PrefixMode.Default,
 		colorSchema: 'auto',
+		commentOrder: 'asc',
 	}
 
 	constructor(data: Partial<IUserSettings> = {}) {

frontend/src/stores/auth.ts

@@ -103,6 +103,7 @@ export const useAuthStore = defineStore('auth', () => {
 				playSoundWhenDone: true,
 				quickAddMagicMode: PrefixMode.Default,
 				colorSchema: 'auto',
+				commentOrder: 'asc',
 				...newSettings.frontendSettings,
 			},
 		})

frontend/src/views/user/settings/General.vue

@@ -187,6 +187,23 @@
 				</div>
 			</label>
 		</div>
+		<div class="field">
+			<label class="is-flex is-align-items-center">
+				<span>
+					{{ $t('user.settings.commentOrder.title') }}
+				</span>
+				<div class="select ml-2">
+					<select v-model="settings.frontendSettings.commentOrder">
+						<option value="asc">
+							{{ $t('user.settings.commentOrder.asc') }}
+						</option>
+						<option value="desc">
+							{{ $t('user.settings.commentOrder.desc') }}
+						</option>
+					</select>
+				</div>
+			</label>
+		</div>
 
 		<x-button
 			v-cy="'saveGeneralSettings'"