From 26ef17eb40d5444d64d68344d63c4bf09930b17a Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Wed, 24 Jan 2024 15:40:06 +0100
Subject: [PATCH] Sort columns by title

---
 .../src/lib/components/project/Column.svelte  | 20 +++++++++++++------
 .../src/lib/components/project/Project.svelte |  4 ++--
 frontend/src/lib/types/TagOption.ts           |  4 ++++
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/project/Column.svelte b/frontend/src/lib/components/project/Column.svelte
index 18c017d..3f86a36 100644
--- a/frontend/src/lib/components/project/Column.svelte
+++ b/frontend/src/lib/components/project/Column.svelte
@@ -71,6 +71,15 @@
 
 		card.showModal = true;
 	}
+
+	async function setOptionValue() {
+		if (!option || !primaryTag) return;
+		if (newOptionValue === option.value) return;
+
+		await option.setValue(newOptionValue);
+		newOptionValue = option.value;
+		currentView.reload();
+	}
 </script>
 
 <div
@@ -86,12 +95,11 @@
 		<input
 			bind:value={newOptionValue}
 			type="text"
-			on:blur={async () => {
-				if (!option || !primaryTag) return;
-				if (newOptionValue === option.value) return;
-
-				await option.setValue(newOptionValue);
-				newOptionValue = option.value;
+			on:blur={setOptionValue}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					setOptionValue();
+				}
 			}}
 			disabled={option === null}
 		/>
diff --git a/frontend/src/lib/components/project/Project.svelte b/frontend/src/lib/components/project/Project.svelte
index 0a8b568..3926fce 100644
--- a/frontend/src/lib/components/project/Project.svelte
+++ b/frontend/src/lib/components/project/Project.svelte
@@ -5,7 +5,7 @@
 	import type Project from '$lib/types/Project';
 	import type ProjectTag from '$lib/types/ProjectTag';
 	import { projectTags } from '$lib/types/ProjectTag';
-	import type TagOption from '$lib/types/TagOption';
+	import TagOption from '$lib/types/TagOption';
 	import type View from '$lib/types/View';
 	import Column from './Column.svelte';
 	import Header from './Header.svelte';
@@ -118,7 +118,7 @@
 			{#if $cards}
 				<div class="grid">
 					{#if $currentView.primaryTag}
-						{#each $currentView.primaryTag.options as option (option.id)}
+						{#each [...$currentView.primaryTag.options].sort(TagOption.compare) as option (option.id)}
 							{#if columnPassFilters(option, $currentView.filters)}
 								<Column
 									{option}
diff --git a/frontend/src/lib/types/TagOption.ts b/frontend/src/lib/types/TagOption.ts
index 175c9b1..e5f7d6b 100644
--- a/frontend/src/lib/types/TagOption.ts
+++ b/frontend/src/lib/types/TagOption.ts
@@ -13,6 +13,10 @@ export default class TagOption {
 		this._value = value;
 	}
 
+	static compare(a: TagOption, b: TagOption): number {
+		return a.value.localeCompare(b.value);
+	}
+
 	get id(): number {
 		return this._id;
 	}