From 3177d0f4b3def91a11ba0da99dda67675b7dfdf9 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Wed, 22 Mar 2023 21:56:02 -0600 Subject: [PATCH] feat: allow selection of total vs confirmed vs unconfirmed give amounts --- project.yaml | 3 +- src/views/AccountViewView.vue | 16 ++-- src/views/ContactsView.vue | 137 ++++++++++++++++++++++++++++------ 3 files changed, 122 insertions(+), 34 deletions(-) diff --git a/project.yaml b/project.yaml index 32c82a5..7560ea2 100644 --- a/project.yaml +++ b/project.yaml @@ -12,14 +12,13 @@ - replace user-affecting console.logs with error messages (eg. catches) - contacts v1 : + - test confirmed vs unconfirmed amounts - remove 'copy' until it works - switch to prod server - 01 show gives with confirmations - .5 Add page to show seed. - 01 Provide a way to import the non-sensitive data. - 01 Provide way to share your contact info. - - 01 allow visibility to others - - 01 register others - .2 move all "identity" references to temporary account access - get 'copy' to work on account page diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index 5507537..243cc46 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -194,7 +194,7 @@ href="" class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6" v-bind:class="showContactGivesClassNames()" - @click="toggleShowContactAmounts" + @click="toggleShowContactAmounts()" > {{ showContactGives ? "Showing" : "Hiding" }} amounts given with contacts (Click to @@ -359,13 +359,6 @@ export default class AccountViewView extends Vue { } } - public showContactGivesClassNames() { - return { - "bg-slate-900": !this.showContactGives, - "bg-green-600": this.showContactGives, - }; - } - public async exportDatabase() { try { const blob = await db.export({ prettyJson: true }); @@ -422,6 +415,13 @@ export default class AccountViewView extends Vue { } } + public showContactGivesClassNames() { + return { + "bg-slate-900": !this.showContactGives, + "bg-green-600": this.showContactGives, + }; + } + alertMessage = ""; alertTitle = ""; isAlertVisible = false; diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue index c83ee75..92fd648 100644 --- a/src/views/ContactsView.vue +++ b/src/views/ContactsView.vue @@ -65,7 +65,7 @@ -
+
Hours to Add: +
+
+
@@ -135,10 +151,20 @@ -
+
- to: {{ givenByMeTotals[contact.did] || 0 }} + to: + {{ + /* eslint-disable prettier/prettier */ + this.showGiveTotals + ? ((givenByMeConfirmed[contact.did] || 0) + + (givenByMeUnconfirmed[contact.did] || 0)) + : this.showGiveConfirmed + ? (givenByMeConfirmed[contact.did] || 0) + : (givenByMeUnconfirmed[contact.did] || 0) + /* eslint-enable prettier/prettier */ + }} {{ givenByMeDescriptions[contact.did] }} @@ -150,7 +176,17 @@
- by: {{ givenToMeTotals[contact.did] || 0 }} + by: + {{ + /* eslint-disable prettier/prettier */ + this.showGiveTotals + ? ((givenToMeConfirmed[contact.did] || 0) + + (givenToMeUnconfirmed[contact.did] || 0)) + : this.showGiveConfirmed + ? (givenToMeConfirmed[contact.did] || 0) + : (givenToMeUnconfirmed[contact.did] || 0) + /* eslint-enable prettier/prettier */ + }} {{ givenToMeDescriptions[contact.did] }} @@ -234,15 +270,21 @@ export default class ContactsView extends Vue { // { "did:...": concatenated-descriptions } entry for each contact givenByMeDescriptions: Record = {}; // { "did:...": amount } entry for each contact - givenByMeTotals: Record = {}; + givenByMeConfirmed: Record = {}; + // { "did:...": amount } entry for each contact + givenByMeUnconfirmed: Record = {}; // { "did:...": concatenated-descriptions } entry for each contact givenToMeDescriptions: Record = {}; // { "did:...": amount } entry for each contact - givenToMeTotals: Record = {}; + givenToMeConfirmed: Record = {}; + // { "did:...": amount } entry for each contact + givenToMeUnconfirmed: Record = {}; hourDescriptionInput = ""; hourInput = "0"; identity: IIdentifier | null = null; - showGiveTotals = false; + showGiveNumbers = false; + showGiveTotals = true; + showGiveConfirmed = true; // 'created' hook runs when the Vue instance is first created async created() { @@ -252,8 +294,8 @@ export default class ContactsView extends Vue { await db.open(); const settings = await db.settings.get(MASTER_SETTINGS_KEY); - this.showGiveTotals = !!settings?.showContactGivesInline; - if (this.showGiveTotals) { + this.showGiveNumbers = !!settings?.showContactGivesInline; + if (this.showGiveNumbers) { this.loadGives(); } const allContacts = await db.contacts.toArray(); @@ -315,21 +357,27 @@ export default class ContactsView extends Vue { console.log("All your gifts:", resp.data); if (resp.status === 200) { const contactDescriptions: Record = {}; - const contactTotals: Record = {}; + const contactConfirmed: Record = {}; + const contactUnconfirmed: Record = {}; const allData: Array = resp.data.data; for (const give of allData) { if (give.unit == "HUR") { const recipDid: string = give.recipientDid; - const prevAmount = contactTotals[recipDid] || 0; - contactTotals[recipDid] = prevAmount + give.amount; + if (give.confirmed) { + const prevAmount = contactConfirmed[recipDid] || 0; + contactConfirmed[recipDid] = prevAmount + give.amount; + } else { + const prevAmount = contactUnconfirmed[recipDid] || 0; + contactUnconfirmed[recipDid] = prevAmount + give.amount; + } const prevDesc = contactDescriptions[recipDid] || ""; // Since many make the tooltip too big, we'll just use the latest; contactDescriptions[recipDid] = give.description || prevDesc; } } - //console.log("Done retrieving gives", contactTotals); + //console.log("Done retrieving gives", contactConfirmed); this.givenByMeDescriptions = contactDescriptions; - this.givenByMeTotals = contactTotals; + this.givenByMeConfirmed = contactConfirmed; } } catch (error) { this.alertTitle = "Error from Server"; @@ -352,20 +400,26 @@ export default class ContactsView extends Vue { console.log("All gifts you've recieved:", resp.data); if (resp.status === 200) { const contactDescriptions: Record = {}; - const contactTotals: Record = {}; + const contactConfirmed: Record = {}; + const contactUnconfirmed: Record = {}; const allData: Array = resp.data.data; for (const give of allData) { if (give.unit == "HUR") { - const prevAmount = contactTotals[give.agentDid] || 0; - contactTotals[give.agentDid] = prevAmount + give.amount; + if (give.confirmed) { + const prevAmount = contactConfirmed[give.agentDid] || 0; + contactConfirmed[give.agentDid] = prevAmount + give.amount; + } else { + const prevAmount = contactUnconfirmed[give.agentDid] || 0; + contactUnconfirmed[give.agentDid] = prevAmount + give.amount; + } const prevDesc = contactDescriptions[give.agentDid] || ""; // Since many make the tooltip too big, we'll just use the latest; contactDescriptions[give.agentDid] = give.description || prevDesc; } } - //console.log("Done retrieving receipts", contactTotals); + //console.log("Done retrieving receipts", contactConfirmed); this.givenToMeDescriptions = contactDescriptions; - this.givenToMeTotals = contactTotals; + this.givenToMeConfirmed = contactConfirmed; } } catch (error) { this.alertTitle = "Error from Server"; @@ -675,16 +729,17 @@ export default class ContactsView extends Vue { this.alertTitle = ""; this.alertMessage = ""; if (fromDid === identity.did) { - this.givenByMeTotals[toDid] = this.givenByMeTotals[toDid] + amount; + this.givenByMeConfirmed[toDid] = + this.givenByMeConfirmed[toDid] + amount; // do this to update the UI (is there a better way?) // eslint-disable-next-line no-self-assign - this.givenByMeTotals = this.givenByMeTotals; + this.givenByMeConfirmed = this.givenByMeConfirmed; } else { - this.givenToMeTotals[fromDid] = - this.givenToMeTotals[fromDid] + amount; + this.givenToMeConfirmed[fromDid] = + this.givenToMeConfirmed[fromDid] + amount; // do this to update the UI (is there a better way?) // eslint-disable-next-line no-self-assign - this.givenToMeTotals = this.givenToMeTotals; + this.givenToMeConfirmed = this.givenToMeConfirmed; } } } catch (error) { @@ -707,6 +762,32 @@ export default class ContactsView extends Vue { } } + public selectedGiveTotal( + contactGivesConfirmed: Record, + contactGivesUnconfirmed: Record, + did: string + ) { + /* eslint-disable prettier/prettier */ + this.showGiveTotals + ? ((contactGivesConfirmed[did] || 0) + (contactGivesUnconfirmed[did] || 0)) + : this.showGiveConfirmed + ? (contactGivesConfirmed[did] || 0) + : (contactGivesUnconfirmed[did] || 0); + /* eslint-enable prettier/prettier */ + } + public toggleShowGiveTotals() { + if (this.showGiveTotals) { + this.showGiveTotals = false; + this.showGiveConfirmed = true; + } else if (this.showGiveConfirmed) { + this.showGiveTotals = false; // stays the same + this.showGiveConfirmed = false; + } else { + this.showGiveTotals = true; + this.showGiveConfirmed = true; + } + } + alertTitle = ""; alertMessage = ""; isAlertVisible = false; @@ -733,6 +814,14 @@ export default class ContactsView extends Vue { "duration-300": true, }; } + + public showGiveAmountsClassNames() { + return { + "bg-slate-900": this.showGiveTotals, + "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed, + "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed, + }; + } }