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

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
 

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;

src/views/ContactsView.vue

@@ -65,7 +65,7 @@
       </button>
     </div>
 
-    <div class="flex justify-between" v-if="showGiveTotals">
+    <div class="flex justify-between" v-if="showGiveNumbers">
       <div class="w-full text-right">
         Hours to Add:
         <input
@@ -81,6 +81,22 @@
           placeholder="Description"
           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>
 
@@ -135,10 +151,20 @@
             <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
           </button>
 
-          <div v-if="showGiveTotals" class="float-right">
+          <div v-if="showGiveNumbers" class="float-right">
             <div class="float-right">
               <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">{{
                   givenByMeDescriptions[contact.did]
                 }}</span>
@@ -150,7 +176,17 @@
                 </button>
               </div>
               <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">
                   {{ givenToMeDescriptions[contact.did] }}
                 </span>
@@ -234,15 +270,21 @@ export default class ContactsView extends Vue {
   // { "did:...": concatenated-descriptions } entry for each contact
   givenByMeDescriptions: Record<string, string> = {};
   // { "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
   givenToMeDescriptions: Record<string, string> = {};
   // { "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 = "";
   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<string, string> = {};
-        const contactTotals: Record<string, number> = {};
+        const contactConfirmed: Record<string, number> = {};
+        const contactUnconfirmed: Record<string, number> = {};
         const allData: Array<GiveServerRecord> = 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<string, string> = {};
-        const contactTotals: Record<string, number> = {};
+        const contactConfirmed: Record<string, number> = {};
+        const contactUnconfirmed: Record<string, number> = {};
         const allData: Array<GiveServerRecord> = 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<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 = "";
   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,
+    };
+  }
 }
 </script>