Sort tasks by name

microdraw/src/atlas_ui.js

@@ -120,6 +120,7 @@ var app = new Vue({
 		enable_auto_rename: true,
 		annotation_import: new AnnotationImport(),
 		annotation_filter: null,
+		sort_tasks_by_name: false,
 		task_wizard: {
 			loading: false,
 			section_data: [],
@@ -150,7 +151,17 @@ var app = new Vue({
 				}
 			}
 			return annotations;
+		},
+		sorted_tasks: function() {
+			if (this.selected_project === null) {
+				// No tasks
+				return [];
+			}
+			if (this.sort_tasks_by_name) {
+				return this.selected_project.tasks.toSorted((a, b) => a.name.localeCompare(b.name));
 			}
+			return this.selected_project.tasks;
+		},
 	},
 	methods: {
 		getProjects: function() {

microdraw/src/microdraw.html

@@ -254,7 +254,7 @@
 								<ol id="atlas_task_list"
 								    class="list-group atlas_task_list border border-dark rounded bg-light"
 								    v-if="selected_project !== null">
-									<li v-for="(task, index) in selected_project.tasks"
+									<li v-for="(task, index) in sorted_tasks"
 									    class="list-group-item list-group-item-action">
 										<div class="form-row">
 											<input v-model="task.task_id" class="col-1 form-control" type="text" readonly />
@@ -290,6 +290,7 @@
 								</ol>
 							</div>
 
+
 							<!-- Button group -->
 							<div class="btn-group" role="group">
 								<button v-on:click="newTask" type="button" class="btn btn-primary" data-toggle="modal"
@@ -303,6 +304,11 @@
 								<button type="button" class="btn btn-info" v-on:click="submitAllJobsForProject(selected_project, submitTrainingPredictionJob)">Train+Predict all</button>
 								<button type="button" class="btn btn-danger" v-on:click="cancelAllJobsForProject(selected_project)">Cancel all</button>
 							</div>
+
+							<div class="form-group" id="atlas_ui_task_options">
+								<input type="checkbox" v-model="sort_tasks_by_name" id="atlas_ui_task_sort_by_name"/>
+								<label for="atlas_ui_task_sort_by_name">Sort by name</label><p>
+							</div>
 						</div>
 						<div class="modal-footer">
 							<button type="button" class="btn btn-primary" data-dismiss="modal"