Allow to set a default account

This commit is contained in:
Rodolphe Bréard 2023-09-25 13:06:37 +02:00
parent 1c8d6db391
commit db117dab29
7 changed files with 28 additions and 6 deletions

View file

@ -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

View file

@ -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);

View file

@ -71,6 +71,8 @@
},
"manageAccounts": {
"title": "Accounts",
"isDefault": "default",
"setDefault": "Set default",
"delete": "@:invariants.controls.delete",
"close": "@:invariants.controls.close"
}

View file

@ -71,6 +71,8 @@
},
"manageAccounts": {
"title": "Comptes",
"isDefault": "défaut",
"setDefault": "Définir par défaut",
"delete": "@:invariants.controls.delete",
"close": "@:invariants.controls.close"
}

View file

@ -62,6 +62,7 @@ const addAccount = () => {
separator: separator.value,
domain: domainName.value,
key: key,
isDefault: false,
};
accounts.value.push(newAccount);
return toMainView();

View file

@ -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>

View file

@ -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>