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}, {orderBy: 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'"

pkg/models/task_comments.go

@@ -18,6 +18,7 @@ package models
 
 import (
 	"time"
+	"fmt"
 
 	"code.vikunja.io/api/pkg/db"
 
@@ -37,6 +38,9 @@ type TaskComment struct {
 	Author   *user.User `xorm:"-" json:"author"`
 	TaskID   int64      `xorm:"not null" json:"-" param:"task"`
 
+	// The query parameter to order the items by. This can be either asc or desc, with asc being the default.
+	OrderBy    []string `query:"order_by" json:"order_by"`
+
 	Reactions ReactionMap `xorm:"-" json:"reactions"`
 
 	Created time.Time `xorm:"created" json:"created"`
@@ -270,7 +274,7 @@ func (tc *TaskComment) ReadAll(s *xorm.Session, auth web.Auth, search string, pa
 	query := s.
 		Where(builder.And(where...)).
 		Join("LEFT", "users", "users.id = task_comments.author_id").
-		OrderBy("task_comments.created asc")
+		OrderBy(fmt.Sprintf("task_comments.created %s", tc.OrderBy[0]))
 	if limit > 0 {
 		query = query.Limit(limit, start)
 	}