Browse Source

feat: allow selection of total vs confirmed vs unconfirmed give amounts

pull/14/head
Trent Larson 2 years ago
parent
commit
3177d0f4b3
  1. 3
      project.yaml
  2. 16
      src/views/AccountViewView.vue
  3. 137
      src/views/ContactsView.vue

3
project.yaml

@ -12,14 +12,13 @@
- replace user-affecting console.logs with error messages (eg. catches) - replace user-affecting console.logs with error messages (eg. catches)
- contacts v1 : - contacts v1 :
- test confirmed vs unconfirmed amounts
- remove 'copy' until it works - remove 'copy' until it works
- switch to prod server - switch to prod server
- 01 show gives with confirmations - 01 show gives with confirmations
- .5 Add page to show seed. - .5 Add page to show seed.
- 01 Provide a way to import the non-sensitive data. - 01 Provide a way to import the non-sensitive data.
- 01 Provide way to share your contact info. - 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 - .2 move all "identity" references to temporary account access
- get 'copy' to work on account page - get 'copy' to work on account page

16
src/views/AccountViewView.vue

@ -194,7 +194,7 @@
href="" href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6" class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showContactGivesClassNames()" v-bind:class="showContactGivesClassNames()"
@click="toggleShowContactAmounts" @click="toggleShowContactAmounts()"
> >
{{ showContactGives ? "Showing" : "Hiding" }} {{ showContactGives ? "Showing" : "Hiding" }}
amounts given with contacts (Click to 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() { public async exportDatabase() {
try { try {
const blob = await db.export({ prettyJson: true }); 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 = ""; alertMessage = "";
alertTitle = ""; alertTitle = "";
isAlertVisible = false; isAlertVisible = false;

137
src/views/ContactsView.vue

@ -65,7 +65,7 @@
</button> </button>
</div> </div>
<div class="flex justify-between" v-if="showGiveTotals"> <div class="flex justify-between" v-if="showGiveNumbers">
<div class="w-full text-right"> <div class="w-full text-right">
Hours to Add: Hours to Add:
<input <input
@ -81,6 +81,22 @@
placeholder="Description" placeholder="Description"
v-model="hourDescriptionInput" v-model="hourDescriptionInput"
/> />
<br />
<br />
<button
href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showGiveAmountsClassNames()"
@click="toggleShowGiveTotals()"
>
{{
showGiveTotals
? "Totals"
: showGiveConfirmed
? "Confirmed"
: "Unconfirmed"
}}
</button>
</div> </div>
</div> </div>
@ -135,10 +151,20 @@
<fa icon="trash-can" class="text-red-600 fa-fw ml-1" /> <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
</button> </button>
<div v-if="showGiveTotals" class="float-right"> <div v-if="showGiveNumbers" class="float-right">
<div class="float-right"> <div class="float-right">
<div class="tooltip"> <div class="tooltip">
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 */
}}
<span class="tooltiptext-left">{{ <span class="tooltiptext-left">{{
givenByMeDescriptions[contact.did] givenByMeDescriptions[contact.did]
}}</span> }}</span>
@ -150,7 +176,17 @@
</button> </button>
</div> </div>
<div class="tooltip px-2"> <div class="tooltip px-2">
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 */
}}
<span class="tooltiptext-left"> <span class="tooltiptext-left">
{{ givenToMeDescriptions[contact.did] }} {{ givenToMeDescriptions[contact.did] }}
</span> </span>
@ -234,15 +270,21 @@ export default class ContactsView extends Vue {
// { "did:...": concatenated-descriptions } entry for each contact // { "did:...": concatenated-descriptions } entry for each contact
givenByMeDescriptions: Record<string, string> = {}; givenByMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact // { "did:...": amount } entry for each contact
givenByMeTotals: Record<string, number> = {}; givenByMeConfirmed: Record<string, number> = {};
// { "did:...": amount } entry for each contact
givenByMeUnconfirmed: Record<string, number> = {};
// { "did:...": concatenated-descriptions } entry for each contact // { "did:...": concatenated-descriptions } entry for each contact
givenToMeDescriptions: Record<string, string> = {}; givenToMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact // { "did:...": amount } entry for each contact
givenToMeTotals: Record<string, number> = {}; givenToMeConfirmed: Record<string, number> = {};
// { "did:...": amount } entry for each contact
givenToMeUnconfirmed: Record<string, number> = {};
hourDescriptionInput = ""; hourDescriptionInput = "";
hourInput = "0"; hourInput = "0";
identity: IIdentifier | null = null; identity: IIdentifier | null = null;
showGiveTotals = false; showGiveNumbers = false;
showGiveTotals = true;
showGiveConfirmed = true;
// 'created' hook runs when the Vue instance is first created // 'created' hook runs when the Vue instance is first created
async created() { async created() {
@ -252,8 +294,8 @@ export default class ContactsView extends Vue {
await db.open(); await db.open();
const settings = await db.settings.get(MASTER_SETTINGS_KEY); const settings = await db.settings.get(MASTER_SETTINGS_KEY);
this.showGiveTotals = !!settings?.showContactGivesInline; this.showGiveNumbers = !!settings?.showContactGivesInline;
if (this.showGiveTotals) { if (this.showGiveNumbers) {
this.loadGives(); this.loadGives();
} }
const allContacts = await db.contacts.toArray(); const allContacts = await db.contacts.toArray();
@ -315,21 +357,27 @@ export default class ContactsView extends Vue {
console.log("All your gifts:", resp.data); console.log("All your gifts:", resp.data);
if (resp.status === 200) { if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {}; const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {}; const contactConfirmed: Record<string, number> = {};
const contactUnconfirmed: Record<string, number> = {};
const allData: Array<GiveServerRecord> = resp.data.data; const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) { for (const give of allData) {
if (give.unit == "HUR") { if (give.unit == "HUR") {
const recipDid: string = give.recipientDid; const recipDid: string = give.recipientDid;
const prevAmount = contactTotals[recipDid] || 0; if (give.confirmed) {
contactTotals[recipDid] = prevAmount + give.amount; 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] || ""; const prevDesc = contactDescriptions[recipDid] || "";
// Since many make the tooltip too big, we'll just use the latest; // Since many make the tooltip too big, we'll just use the latest;
contactDescriptions[recipDid] = give.description || prevDesc; contactDescriptions[recipDid] = give.description || prevDesc;
} }
} }
//console.log("Done retrieving gives", contactTotals); //console.log("Done retrieving gives", contactConfirmed);
this.givenByMeDescriptions = contactDescriptions; this.givenByMeDescriptions = contactDescriptions;
this.givenByMeTotals = contactTotals; this.givenByMeConfirmed = contactConfirmed;
} }
} catch (error) { } catch (error) {
this.alertTitle = "Error from Server"; this.alertTitle = "Error from Server";
@ -352,20 +400,26 @@ export default class ContactsView extends Vue {
console.log("All gifts you've recieved:", resp.data); console.log("All gifts you've recieved:", resp.data);
if (resp.status === 200) { if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {}; const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {}; const contactConfirmed: Record<string, number> = {};
const contactUnconfirmed: Record<string, number> = {};
const allData: Array<GiveServerRecord> = resp.data.data; const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) { for (const give of allData) {
if (give.unit == "HUR") { if (give.unit == "HUR") {
const prevAmount = contactTotals[give.agentDid] || 0; if (give.confirmed) {
contactTotals[give.agentDid] = prevAmount + give.amount; 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] || ""; const prevDesc = contactDescriptions[give.agentDid] || "";
// Since many make the tooltip too big, we'll just use the latest; // Since many make the tooltip too big, we'll just use the latest;
contactDescriptions[give.agentDid] = give.description || prevDesc; contactDescriptions[give.agentDid] = give.description || prevDesc;
} }
} }
//console.log("Done retrieving receipts", contactTotals); //console.log("Done retrieving receipts", contactConfirmed);
this.givenToMeDescriptions = contactDescriptions; this.givenToMeDescriptions = contactDescriptions;
this.givenToMeTotals = contactTotals; this.givenToMeConfirmed = contactConfirmed;
} }
} catch (error) { } catch (error) {
this.alertTitle = "Error from Server"; this.alertTitle = "Error from Server";
@ -675,16 +729,17 @@ export default class ContactsView extends Vue {
this.alertTitle = ""; this.alertTitle = "";
this.alertMessage = ""; this.alertMessage = "";
if (fromDid === identity.did) { 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?) // do this to update the UI (is there a better way?)
// eslint-disable-next-line no-self-assign // eslint-disable-next-line no-self-assign
this.givenByMeTotals = this.givenByMeTotals; this.givenByMeConfirmed = this.givenByMeConfirmed;
} else { } else {
this.givenToMeTotals[fromDid] = this.givenToMeConfirmed[fromDid] =
this.givenToMeTotals[fromDid] + amount; this.givenToMeConfirmed[fromDid] + amount;
// do this to update the UI (is there a better way?) // do this to update the UI (is there a better way?)
// eslint-disable-next-line no-self-assign // eslint-disable-next-line no-self-assign
this.givenToMeTotals = this.givenToMeTotals; this.givenToMeConfirmed = this.givenToMeConfirmed;
} }
} }
} catch (error) { } catch (error) {
@ -707,6 +762,32 @@ export default class ContactsView extends Vue {
} }
} }
public selectedGiveTotal(
contactGivesConfirmed: Record<string, number>,
contactGivesUnconfirmed: Record<string, number>,
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 = ""; alertTitle = "";
alertMessage = ""; alertMessage = "";
isAlertVisible = false; isAlertVisible = false;
@ -733,6 +814,14 @@ export default class ContactsView extends Vue {
"duration-300": true, "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,
};
}
} }
</script> </script>

Loading…
Cancel
Save