feat: add tooltip for latest give description

src/views/ContactsView.vue

@@ -46,7 +46,7 @@
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      My Contacts
+      Your Contacts
     </h1>
 
     <!-- New Contact -->
@@ -137,20 +137,30 @@
 
           <div v-if="showGiveTotals" class="float-right">
             <div class="float-right">
-              to: {{ givenByMeTotals[contact.did] || 0 }}
+              <div class="tooltip">
-              <button
+                to: {{ givenByMeTotals[contact.did] || 0 }}
-                class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                <span class="tooltiptext-left">{{
-                @click="onClickAddGive(identity.did, contact.did)"
+                  givenByMeDescriptions[contact.did]
-              >
+                }}</span>
-                +
+                <button
-              </button>
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-              by: {{ givenToMeTotals[contact.did] || 0 }}
+                  @click="onClickAddGive(identity.did, contact.did)"
-              <button
+                >
-                class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  +
-                @click="onClickAddGive(contact.did, identity.did)"
+                </button>
-              >
+              </div>
-                +
+              <div class="tooltip">
-              </button>
+                by: {{ givenToMeTotals[contact.did] || 0 }}
+                <span class="tooltiptext-left">
+                  {{ givenByMeDescriptions[contact.did] }}
+                </span>
+                <button
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="onClickAddGive(contact.did, identity.did)"
+                >
+                  +
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -187,6 +197,17 @@ const Buffer = require("buffer/").Buffer;
 
 const SERVICE_ID = "endorser.ch";
 
+export interface GiveServerRecord {
+  agentDid: string;
+  amount: number;
+  confirmed: number;
+  description: string;
+  fullClaim: GiveVerifiableCredential;
+  handleId: string;
+  recipientDid: string;
+  unit: string;
+}
+
 export interface GiveVerifiableCredential {
   "@context": string;
   "@type": string;
@@ -210,8 +231,12 @@ export interface RegisterVerifiableCredential {
 export default class ContactsView extends Vue {
   contacts: Array<Contact> = [];
   contactInput = "";
+  // { "did:...": concatenated-descriptions } entry for each contact
+  givenByMeDescriptions: Record<string, string> = {};
   // { "did:...": amount } entry for each contact
   givenByMeTotals: Record<string, number> = {};
+  // { "did:...": concatenated-descriptions } entry for each contact
+  givenToMeDescriptions: Record<string, string> = {};
   // { "did:...": amount } entry for each contact
   givenToMeTotals: Record<string, number> = {};
   hourDescriptionInput = "";
@@ -287,17 +312,23 @@ export default class ContactsView extends Vue {
         Authorization: "Bearer " + token,
       };
       const resp = await this.axios.get(url, { headers });
-      //console.log("Server response", resp.status, resp.data);
+      console.log("All your gifts:", resp.data);
       if (resp.status === 200) {
+        const contactDescriptions: Record<string, string> = {};
         const contactTotals: Record<string, number> = {};
-        for (const give of resp.data.data) {
+        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;
+            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);
+        this.givenByMeDescriptions = contactDescriptions;
         this.givenByMeTotals = contactTotals;
       }
     } catch (error) {
@@ -318,16 +349,22 @@ export default class ContactsView extends Vue {
         Authorization: "Bearer " + token,
       };
       const resp = await this.axios.get(url, { headers });
-      //console.log("Server response", resp.status, resp.data);
+      console.log("All gifts you've recieved:", resp.data);
       if (resp.status === 200) {
+        const contactDescriptions: Record<string, string> = {};
         const contactTotals: Record<string, number> = {};
-        for (const give of resp.data.data) {
+        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;
+            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);
+        this.givenToMeDescriptions = contactDescriptions;
         this.givenToMeTotals = contactTotals;
       }
     } catch (error) {
@@ -700,6 +737,7 @@ export default class ContactsView extends Vue {
 </script>
 
 <style>
+/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
 /* Tooltip container */
 .tooltip {
   position: relative;
@@ -717,13 +755,32 @@ export default class ContactsView extends Vue {
   padding: 5px 0;
   border-radius: 6px;
 
-  /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
 }
+/* How do we share with the above so code isn't duplicated? */
+.tooltip .tooltiptext-left {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 1;
+
+  bottom: 0%;
+  right: 105%;
+  margin-left: -60px;
+}
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
+.tooltip:hover .tooltiptext-left {
+  visibility: visible;
+}
 </style>

src/views/ProjectsView.vue

@@ -45,7 +45,7 @@
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      My Plans
+      Your Plans
     </h1>
 
     <!-- Quick Search -->