Browse Source

add toggle for displaying give amounts for each contact

tweaks
Trent Larson 2 years ago
parent
commit
59d621efc1
  1. 1
      project.yaml
  2. 1
      src/db/tables/index.ts
  3. 44
      src/views/AccountViewView.vue

1
project.yaml

@ -12,6 +12,7 @@
- replace user-affecting console.logs with error messages (eg. catches) - replace user-affecting console.logs with error messages (eg. catches)
- contacts - contacts
- make advanced "show/hide amounts" button into a nice UI toggle
- commit screen - commit screen

1
src/db/tables/index.ts

@ -19,6 +19,7 @@ export type Settings = {
id: number; id: number;
firstName?: string; firstName?: string;
lastName?: string; lastName?: string;
showContactGivesInline?: boolean;
}; };
export const SettingsSchema = { export const SettingsSchema = {

44
src/views/AccountViewView.vue

@ -169,6 +169,21 @@
</form> </form>
</dialog> </dialog>
<h3 class="text-sm uppercase font-semibold mb-3">Advanced</h3>
<div class="flex">
<button
href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showContactGivesClassNames()"
@click="toggleShowContactAmounts"
>
{{ showContactGives ? "Showing" : "Hiding" }}
amounts given with contacts (Click to
{{ showContactGives ? "hide" : "show" }})
</button>
</div>
<div v-bind:class="computedAlertClassNames()"> <div v-bind:class="computedAlertClassNames()">
<button <button
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2" class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@ -203,6 +218,8 @@ export default class AccountViewView extends Vue {
mnemonic = ""; mnemonic = "";
publicHex = ""; publicHex = "";
derivationPath = ""; derivationPath = "";
showContactGives = false;
copy = useClipboard().copy; copy = useClipboard().copy;
// 'created' hook runs when the Vue instance is first created // 'created' hook runs when the Vue instance is first created
@ -213,6 +230,7 @@ export default class AccountViewView extends Vue {
if (settings) { if (settings) {
this.firstName = settings.firstName || ""; this.firstName = settings.firstName || "";
this.lastName = settings.lastName || ""; this.lastName = settings.lastName || "";
this.showContactGives = !!settings.showContactGivesInline;
} }
const numAccounts = await db.accounts.count(); const numAccounts = await db.accounts.count();
@ -251,6 +269,32 @@ export default class AccountViewView extends Vue {
this.derivationPath = identity.keys[0].meta.derivationPath; this.derivationPath = identity.keys[0].meta.derivationPath;
} }
public async toggleShowContactAmounts() {
this.showContactGives = !this.showContactGives;
try {
await db.open();
const settings = await db.settings.get(MASTER_SETTINGS);
if (settings) {
db.settings.update(MASTER_SETTINGS, {
showContactGivesInline: this.showContactGives,
});
}
} catch (err) {
this.alertMessage =
"Clear your cache and start over (after data backup). See console log for more info.";
console.log("Telling user to clear cache because:", err);
this.alertTitle = "Error Creating Account";
this.isAlertVisible = true;
}
}
public showContactGivesClassNames() {
return {
"bg-slate-900": !this.showContactGives,
"bg-green-600": this.showContactGives,
};
}
alertMessage = ""; alertMessage = "";
alertTitle = ""; alertTitle = "";
isAlertVisible = false; isAlertVisible = false;

Loading…
Cancel
Save