From db117dab29c218f2228854de043022b4264f9333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= <v.code.ngyvz7vf@what.tf>
Date: Mon, 25 Sep 2023 13:06:37 +0200
Subject: [PATCH] Allow to set a default account

---
 CHANGELOG.md                     |  3 +++
 src/accounts.js                  |  2 +-
 src/locales/en.json              |  2 ++
 src/locales/fr.json              |  2 ++
 src/views/AddAccountView.vue     |  1 +
 src/views/MainView.vue           | 10 +++++++---
 src/views/ManageAccountsView.vue | 14 ++++++++++++--
 7 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c28003..6fca586 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Possibility to set a default account
+
 ### Changed
 - The style has been entirely reworked using Bootstrap instead of Bulma
 - It is now impossible to include the separator in the dedicated name
diff --git a/src/accounts.js b/src/accounts.js
index 93d0bc3..80b9d25 100644
--- a/src/accounts.js
+++ b/src/accounts.js
@@ -1,5 +1,5 @@
 export function sortAccounts(accounts) {
-	accounts.value.sort((a, b) => {
+	accounts.sort((a, b) => {
 		const va = `${a.localPart}@${a.domain}`;
 		const vb = `${b.localPart}@${b.domain}`;
 		return va.localeCompare(vb);
diff --git a/src/locales/en.json b/src/locales/en.json
index c4e29df..bf89aee 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -71,6 +71,8 @@
 	},
 	"manageAccounts": {
 		"title": "Accounts",
+		"isDefault": "default",
+		"setDefault": "Set default",
 		"delete": "@:invariants.controls.delete",
 		"close": "@:invariants.controls.close"
 	}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 4130474..6cccfea 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -71,6 +71,8 @@
 	},
 	"manageAccounts": {
 		"title": "Comptes",
+		"isDefault": "défaut",
+		"setDefault": "Définir par défaut",
 		"delete": "@:invariants.controls.delete",
 		"close": "@:invariants.controls.close"
 	}
diff --git a/src/views/AddAccountView.vue b/src/views/AddAccountView.vue
index f2760c5..7bc3531 100644
--- a/src/views/AddAccountView.vue
+++ b/src/views/AddAccountView.vue
@@ -62,6 +62,7 @@ const addAccount = () => {
 				separator: separator.value,
 				domain: domainName.value,
 				key: key,
+				isDefault: false,
 			};
 			accounts.value.push(newAccount);
 			return toMainView();
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 2b106d7..a1f83db 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -11,8 +11,12 @@ import LayoutComponent from '../components/LayoutComponent.vue';
 import NavBarComponent from '../components/NavBarComponent.vue';
 
 const router = useRouter();
-const accounts = sortAccounts(useStorage('sake-accounts', []));
-const selectedAccountId = ref(accounts.value[0].id);
+const accounts = useStorage('sake-accounts', []);
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
+const selectedAccountId = ref((() => {
+	const def = accounts.value.find((a) => a.isDefault);
+	return def ? def.id : accounts.value[0].id;
+})());
 const subAddrName = ref('');
 
 const fromRawAccount = (raw_account) => {
@@ -63,7 +67,7 @@ const resetForm = () => {
 		<div class="mb-3">
 			<label class="form-label" for="account-name">{{ $t("main.account") }}</label>
 			<select class="form-select" id="account-name" v-model="selectedAccountId">
-				<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
+				<option v-for="account in sortedAccounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
 			</select>
 		</div>
 
diff --git a/src/views/ManageAccountsView.vue b/src/views/ManageAccountsView.vue
index 274d203..4c82de4 100644
--- a/src/views/ManageAccountsView.vue
+++ b/src/views/ManageAccountsView.vue
@@ -1,16 +1,24 @@
 <script setup>
 import { sortAccounts } from '../accounts';
+import { computed } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
 
 const router = useRouter();
-const accounts = sortAccounts(useStorage('sake-accounts', []));
+const accounts = useStorage('sake-accounts', []);
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
 
 const deleteAccount = (accountId) => {
 	return router.push(`/delete-account/${accountId}`);
 };
+const setDefaultAccount = (accountId) => {
+	accounts.value = accounts.value.map((a) => {
+		a.isDefault = a.id === accountId;
+		return a;
+	});
+};
 const toMainView = () => {
 	return router.push('/');
 };
@@ -22,11 +30,13 @@ const toMainView = () => {
 
 		<table class="table">
 				<tbody>
-					<tr v-for="account in accounts">
+					<tr v-for="account in sortedAccounts">
 						<th class="text-end align-middle">
+							<span class="badge text-bg-primary" v-if="account.isDefault">{{ $t("manageAccounts.isDefault") }}</span>
 							{{ account.localPart }}@{{ account.domain }}
 						</th>
 						<th>
+							<button type="button" class="btn btn-primary me-2" @click="setDefaultAccount(account.id)" v-if="!account.isDefault">{{ $t("manageAccounts.setDefault") }}</button>
 							<button type="button" class="btn btn-danger" @click="deleteAccount(account.id)">{{ $t("manageAccounts.delete") }}</button>
 						</th>
 					</tr>